:root {
  --sk-raw-color-primary: #6366f1;
  --sk-raw-color-primary-light: #818cf8;
  --sk-raw-color-primary-dark: #4338ca;
  --sk-raw-color-accent: #f59e0b;
  --sk-raw-color-accent-2: #f97316;
  --sk-raw-color-success: #10b981;
  --sk-raw-color-danger: #ef4444;
  --sk-raw-color-violet: #a855f7;
  --sk-raw-color-pink: #ec4899;
  --sk-raw-color-cyan: #06b6d4;
  --sk-raw-color-rose: #f43f5e;
  --sk-raw-color-blue: #3b82f6;
  --sk-raw-color-ink: #0f172a;
  --sk-raw-color-paper: #ffffff;
  --sk-raw-radius-px-s: 8;
  --sk-raw-radius-px-m: 10;
  --sk-raw-radius-px-l: 16;
  --sk-raw-radius-px-xl: 24;
  --sk-raw-radius-px-pill: 999;
  --sk-raw-layout-px-header-height: 68;
  --sk-raw-layout-px-reading-max: 860;
  --sk-raw-layout-px-catalog-max: 1200;
  --sk-raw-layout-px-sticky-offset: 84;
  --sk-raw-shadow-card: 0 1px 3px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.03);
  --sk-raw-shadow-card-hover: 0 14px 30px -10px rgba(67,56,202,.18),0 8px 12px -8px rgba(15,23,42,.06);
  --sk-raw-shadow-button: 0 8px 18px -8px rgba(67,56,202,.65);
  --sk-raw-shadow-button-hover: 0 12px 24px -10px rgba(67,56,202,.70);
  --sk-raw-shadow-floating: 0 28px 56px -18px rgba(30,27,75,.22),0 10px 20px -12px rgba(15,23,42,.08);
  --sk-raw-shadow-dialog: 0 28px 90px rgba(16,12,38,.28);
  --sk-raw-shadow-focus: 0 0 0 4px rgba(99,102,241,.28);
  --sk-raw-ease: cubic-bezier(.4,0,.2,1);
  --sk-typography-family-sans: Inter, Noto Sans TC, PingFang TC, Microsoft JhengHei, Segoe UI, system-ui, sans-serif;
  --sk-typography-size-px-micro: 10.5;
  --sk-typography-size-px-tiny: 11;
  --sk-typography-size-px-caption: 12;
  --sk-typography-size-px-body-sm: 14;
  --sk-typography-size-px-body: 16;
  --sk-typography-size-px-title-sm: 20;
  --sk-typography-size-px-title: 28;
  --sk-typography-size-px-display: 44;
  --sk-typography-size-fluid-display: clamp(30px,4.4vw,44px);
  --sk-typography-size-fluid-title: clamp(24px,2.7vw,32px);
  --sk-typography-line-height-compact: 1.25;
  --sk-typography-line-height-heading: 1.32;
  --sk-typography-line-height-tight: 1.42;
  --sk-typography-line-height-body: 1.78;
  --sk-typography-line-height-reading: 1.8;
  --sk-typography-letter-spacing-display: -.02em;
  --sk-typography-letter-spacing-title: -.015em;
  --sk-typography-letter-spacing-title-sm: -.01em;
  --sk-typography-letter-spacing-heading: -.01em;
  --sk-typography-letter-spacing-tight: -.01em;
  --sk-typography-letter-spacing-kicker: .06em;
  --sk-typography-letter-spacing-label: .1em;
  --sk-typography-letter-spacing-overline: .14em;
  --sk-typography-letter-spacing-wide: .22em;
  --sk-typography-weight-regular: 400;
  --sk-typography-weight-medium: 500;
  --sk-typography-weight-semibold: 600;
  --sk-typography-weight-bold: 700;
  --sk-typography-weight-extrabold: 800;
  --sk-typography-weight-black: 900;
  --sk-spacing-scale-px: 4, 6, 8, 10, 12, 14, 16, 20, 22, 24, 30, 38, 44, 56, 70;
  --sk-spacing-control-gap-px: 10;
  --sk-spacing-section-gap-px: 56;
  --sk-radii-control: 10;
  --sk-radii-card: 24;
  --sk-radii-panel: 16;
  --sk-radii-dialog: 24;
  --sk-radii-hero: 32px;
  --sk-radii-pill: 999;
  --sk-shadows-card: 0 1px 3px rgba(15,23,42,.05),0 1px 2px rgba(15,23,42,.03);
  --sk-shadows-card-hover: 0 14px 30px -10px rgba(67,56,202,.18),0 8px 12px -8px rgba(15,23,42,.06);
  --sk-shadows-button: 0 8px 18px -8px rgba(67,56,202,.65);
  --sk-shadows-button-hover: 0 12px 24px -10px rgba(67,56,202,.70);
  --sk-shadows-floating: 0 28px 56px -18px rgba(30,27,75,.22),0 10px 20px -12px rgba(15,23,42,.08);
  --sk-shadows-dialog: 0 28px 90px rgba(16,12,38,.28);
  --sk-shadows-focus: 0 0 0 4px rgba(99,102,241,.28);
  --sk-containers-reading-max-px: 860;
  --sk-containers-catalog-max-px: 1200;
  --sk-containers-page-gutter-min-px: 16;
  --sk-containers-page-gutter-max-px: 24;
  --sk-breakpoints-px-minimum: 320;
  --sk-breakpoints-px-phone: 390;
  --sk-breakpoints-px-single-column: 560;
  --sk-breakpoints-px-tablet: 768;
  --sk-breakpoints-px-mobile-nav: 860;
  --sk-breakpoints-px-stack-pdp: 1080;
  --sk-breakpoints-px-desktop: 1200;
  --sk-breakpoints-px-wide: 1440;
  --sk-safe-area-top: env(safe-area-inset-top);
  --sk-safe-area-right: env(safe-area-inset-right);
  --sk-safe-area-bottom: env(safe-area-inset-bottom);
  --sk-safe-area-left: env(safe-area-inset-left);
  --sk-safe-area-minimum-sticky-gap-px: 12;
  --sk-z-index-decoration: -1;
  --sk-z-index-content: 1;
  --sk-z-index-sticky: 100;
  --sk-z-index-header: 120;
  --sk-z-index-tabbar: 130;
  --sk-z-index-sticky-buy: 140;
  --sk-z-index-fullscreen-course: 200;
  --sk-z-index-drawer-backdrop: 300;
  --sk-z-index-drawer: 310;
  --sk-z-index-dialog: 400;
  --sk-z-index-toast: 500;
  --sk-motion-standard-ms: 160;
  --sk-motion-theme-ms: 350;
  --sk-motion-ease: cubic-bezier(.4,0,.2,1);
  --sk-motion-durations-ms: 140, 160, 200, 220, 280, 320, 340, 350, 450;
  --sk-motion-theme-transition-properties: color, border-color, box-shadow;
  --sk-motion-animations-drift: 20s-46s linear infinite; JS randomises delay -30s..0 and peak opacity .28-.62;
  --sk-motion-animations-fade: 340ms cubic-bezier(.4,0,.2,1) both;
  --sk-motion-animations-spin: 800ms linear infinite;
  --sk-motion-animations-course-veil: 280ms cubic-bezier(.4,0,.2,1); JS setTimeout must stay aligned;
  --sk-motion-reduced-motion-duration-ms: 0.01;
  --sk-motion-reduced-motion-background-particles: stopped;
  --sk-motion-reduced-motion-information-loss: false;
  --sk-focus-ring-width-px: 2;
  --sk-focus-ring-offset-px: 3;
  --sk-focus-light-color: #6366f1;
  --sk-focus-dark-color: #6366f1;
  --sk-focus-minimum-contrast: 3;
  --sk-focus-never-color-only: true;
  --sk-effects-blur-surface-px: 20;
  --sk-effects-blur-overlay-px: 16;
  --sk-effects-blur-control-px: 12;
  --sk-effects-fallback-surface: rgba(255,255,255,.96);
  --sk-effects-gradient-text-fallback: #4338ca;
  --sk-effects-supports-fallback-required: true;
  --sk-semantic-feedback-success-foreground: #047857;
  --sk-semantic-feedback-success-background: #ecfdf5;
  --sk-semantic-feedback-success-border: #6ee7b7;
  --sk-semantic-feedback-success-on-solid: #ffffff;
  --sk-semantic-feedback-warning-foreground: #92400e;
  --sk-semantic-feedback-warning-background: #fffbeb;
  --sk-semantic-feedback-warning-border: #fcd34d;
  --sk-semantic-feedback-warning-on-solid: #0f172a;
  --sk-semantic-feedback-error-foreground: #b91c1c;
  --sk-semantic-feedback-error-background: #fef2f2;
  --sk-semantic-feedback-error-border: #fca5a5;
  --sk-semantic-feedback-error-on-solid: #ffffff;
  --sk-semantic-feedback-info-foreground: #1d4ed8;
  --sk-semantic-feedback-info-background: #eff6ff;
  --sk-semantic-feedback-info-border: #93c5fd;
  --sk-semantic-feedback-info-on-solid: #ffffff;
  --sk-semantic-entitlement-provisional-foreground: #92400e;
  --sk-semantic-entitlement-provisional-background: #fffbeb;
  --sk-semantic-entitlement-provisional-border: #fcd34d;
  --sk-semantic-entitlement-provisional-text-or-icon-required: true;
  --sk-semantic-entitlement-permanent-foreground: #047857;
  --sk-semantic-entitlement-permanent-background: #ecfdf5;
  --sk-semantic-entitlement-permanent-border: #6ee7b7;
  --sk-semantic-entitlement-permanent-text-or-icon-required: true;
  --sk-semantic-entitlement-frozen-foreground: #1d4ed8;
  --sk-semantic-entitlement-frozen-background: #eff6ff;
  --sk-semantic-entitlement-frozen-border: #93c5fd;
  --sk-semantic-entitlement-frozen-text-or-icon-required: true;
  --sk-semantic-entitlement-revoked-foreground: #b91c1c;
  --sk-semantic-entitlement-revoked-background: #fef2f2;
  --sk-semantic-entitlement-revoked-border: #fca5a5;
  --sk-semantic-entitlement-revoked-text-or-icon-required: true;
  --sk-semantic-entitlement-expired-foreground: #475569;
  --sk-semantic-entitlement-expired-background: #f1f5f9;
  --sk-semantic-entitlement-expired-border: #cbd5e1;
  --sk-semantic-entitlement-expired-text-or-icon-required: true;
  --sk-semantic-entitlement-legal-hold-foreground: #6b21a8;
  --sk-semantic-entitlement-legal-hold-background: #faf5ff;
  --sk-semantic-entitlement-legal-hold-border: #d8b4fe;
  --sk-semantic-entitlement-legal-hold-text-or-icon-required: true;
  --sk-semantic-commerce-price: #b45309;
  --sk-semantic-commerce-discount: #b91c1c;
  --sk-semantic-commerce-primary-cta: #4338ca;
  --sk-semantic-commerce-secondary-cta: #ffffff;
  --sk-semantic-commerce-unavailable: #64748b;
  --sk-semantic-selection-background: rgba(99,102,241,.12);
  --sk-semantic-selection-border: #6366f1;
  --sk-semantic-selection-text: #312e81;
  --sk-semantic-selection-hover-background: rgba(99,102,241,.08);
  --sk-semantic-brand-gradient: linear-gradient(135deg,#818cf8,#f59e0b);
  --sk-semantic-gradients-brand: linear-gradient(135deg,#818cf8,#f59e0b);
  --sk-semantic-gradients-primary-cta: linear-gradient(135deg,#4338ca,#3730a3);
  --sk-semantic-gradients-hot-badge: linear-gradient(135deg,#f59e0b,#f97316);
  --sk-semantic-gradients-card-accent-bar: linear-gradient(135deg,var(--sk-card-accent),color-mix(in srgb,var(--sk-card-accent) 55%,#000));
  --sk-semantic-gradients-owned-cover-overlay: linear-gradient(160deg,rgba(16,185,129,.20),transparent 55%);
  --sk-semantic-gradients-preview-surface: linear-gradient(160deg,var(--sk-theme-surface-strong),var(--sk-theme-heat-bg));
  --sk-semantic-gradients-keyword: linear-gradient(90deg,#5b3fd6 0%,#9333ea 55%,#c2410c 100%);
  --sk-semantic-gradients-marker: rgba(245,158,11,.30);
  --sk-theme-canvas: #fafbff;
  --sk-theme-canvas-gradient: radial-gradient(ellipse 80% 80% at 20% 0%,rgba(99,102,241,.12) 0%,transparent 50%),radial-gradient(ellipse 70% 70% at 80% 30%,rgba(168,85,247,.10) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 100%,rgba(245,158,11,.08) 0%,transparent 60%),linear-gradient(135deg,#fafbff 0%,#f1f4ff 50%,#ebeefe 100%);
  --sk-theme-surface: rgba(255,255,255,.88);
  --sk-theme-surface-strong: rgba(255,255,255,.96);
  --sk-theme-surface-muted: rgba(255,255,255,.55);
  --sk-theme-surface-elevated: #ffffff;
  --sk-theme-text: #0f172a;
  --sk-theme-text-secondary: #334155;
  --sk-theme-text-muted: #64748b;
  --sk-theme-text-inverse: #ffffff;
  --sk-theme-border: #e2e8f0;
  --sk-theme-border-strong: #cbd5e1;
  --sk-theme-focus-ring: #6366f1;
  --sk-theme-overlay: rgba(15,23,42,.52);
  --sk-theme-skeleton: rgba(99,102,241,.10);
  --sk-theme-link: #4338ca;
  --sk-theme-link-hover: #312e81;
  --sk-theme-disabled-surface: #e2e8f0;
  --sk-theme-disabled-text: #64748b;
  --sk-theme-pill-bg: rgba(99,102,241,.10);
  --sk-theme-heat-bg: rgba(99,102,241,.045);
  --sk-theme-violet-pale: rgba(168,85,247,.10);
  --sk-theme-copper-pale: rgba(245,158,11,.11);
  --sk-theme-green-pale: rgba(16,185,129,.11);
  --sk-theme-red-pale: rgba(239,68,68,.09);
  --sk-theme-ink-accent: #b45309;
  --sk-theme-ink-success: #047857;
  --sk-theme-ink-danger: #b91c1c;
  --sk-theme-ink-info: #4338ca;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --sk-theme-canvas: #050816;
  --sk-theme-canvas-gradient: radial-gradient(ellipse 80% 80% at 20% 0%,rgba(99,102,241,.20) 0%,transparent 50%),radial-gradient(ellipse 70% 70% at 80% 30%,rgba(168,85,247,.17) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 100%,rgba(245,158,11,.10) 0%,transparent 60%),linear-gradient(135deg,#050816 0%,#0a0e2e 50%,#0d1138 100%);
  --sk-theme-surface: rgba(22,27,74,.40);
  --sk-theme-surface-strong: rgba(22,27,74,.66);
  --sk-theme-surface-muted: rgba(255,255,255,.045);
  --sk-theme-surface-elevated: #161b4a;
  --sk-theme-text: #f8fafc;
  --sk-theme-text-secondary: #cbd5e1;
  --sk-theme-text-muted: #94a3b8;
  --sk-theme-text-inverse: #050816;
  --sk-theme-border: rgba(129,140,248,.18);
  --sk-theme-border-strong: rgba(129,140,248,.38);
  --sk-theme-focus-ring: #6366f1;
  --sk-theme-overlay: rgba(2,6,23,.72);
  --sk-theme-skeleton: rgba(129,140,248,.16);
  --sk-theme-link: #818cf8;
  --sk-theme-link-hover: #ffffff;
  --sk-theme-disabled-surface: #1e293b;
  --sk-theme-disabled-text: #94a3b8;
  --sk-theme-pill-bg: rgba(99,102,241,.20);
  --sk-theme-heat-bg: rgba(255,255,255,.03);
  --sk-theme-violet-pale: rgba(168,85,247,.16);
  --sk-theme-copper-pale: rgba(245,158,11,.15);
  --sk-theme-green-pale: rgba(16,185,129,.14);
  --sk-theme-red-pale: rgba(239,68,68,.14);
  --sk-theme-ink-accent: #fbbf24;
  --sk-theme-ink-success: #6ee7b7;
  --sk-theme-ink-danger: #fca5a5;
  --sk-theme-ink-info: #c7d2fe;
  --sk-shadows-card: 0 1px 3px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --sk-shadows-card-hover: 0 16px 32px -12px rgba(0,0,0,.55);
  --sk-shadows-floating: 0 28px 56px -18px rgba(0,0,0,.60);
  --sk-semantic-feedback-success-foreground: #6ee7b7;
  --sk-semantic-feedback-success-background: rgba(16,185,129,.14);
  --sk-semantic-feedback-success-border: rgba(16,185,129,.38);
  --sk-semantic-feedback-success-on-solid: #050816;
  --sk-semantic-feedback-warning-foreground: #fbbf24;
  --sk-semantic-feedback-warning-background: rgba(245,158,11,.15);
  --sk-semantic-feedback-warning-border: rgba(245,158,11,.40);
  --sk-semantic-feedback-warning-on-solid: #050816;
  --sk-semantic-feedback-error-foreground: #fca5a5;
  --sk-semantic-feedback-error-background: rgba(239,68,68,.14);
  --sk-semantic-feedback-error-border: rgba(239,68,68,.38);
  --sk-semantic-feedback-error-on-solid: #050816;
  --sk-semantic-feedback-info-foreground: #c7d2fe;
  --sk-semantic-feedback-info-background: rgba(99,102,241,.20);
  --sk-semantic-feedback-info-border: rgba(129,140,248,.38);
  --sk-semantic-feedback-info-on-solid: #050816;
  --sk-semantic-entitlement-provisional-foreground: #fbbf24;
  --sk-semantic-entitlement-provisional-background: rgba(245,158,11,.15);
  --sk-semantic-entitlement-provisional-border: rgba(245,158,11,.40);
  --sk-semantic-entitlement-permanent-foreground: #6ee7b7;
  --sk-semantic-entitlement-permanent-background: rgba(16,185,129,.14);
  --sk-semantic-entitlement-permanent-border: rgba(16,185,129,.38);
  --sk-semantic-entitlement-frozen-foreground: #c7d2fe;
  --sk-semantic-entitlement-frozen-background: rgba(99,102,241,.20);
  --sk-semantic-entitlement-frozen-border: rgba(129,140,248,.38);
  --sk-semantic-entitlement-revoked-foreground: #fca5a5;
  --sk-semantic-entitlement-revoked-background: rgba(239,68,68,.14);
  --sk-semantic-entitlement-revoked-border: rgba(239,68,68,.38);
  --sk-semantic-entitlement-expired-foreground: #94a3b8;
  --sk-semantic-entitlement-expired-background: rgba(148,163,184,.14);
  --sk-semantic-entitlement-expired-border: rgba(148,163,184,.34);
  --sk-semantic-entitlement-legal-hold-foreground: #d8b4fe;
  --sk-semantic-entitlement-legal-hold-background: rgba(168,85,247,.16);
  --sk-semantic-entitlement-legal-hold-border: rgba(168,85,247,.40);
  --sk-semantic-commerce-price: #fbbf24;
  --sk-semantic-commerce-discount: #fca5a5;
  --sk-semantic-commerce-primary-cta: #818cf8;
  --sk-semantic-commerce-secondary-cta: #161b4a;
  --sk-semantic-commerce-unavailable: #94a3b8;
  --sk-semantic-gradients-primary-cta: linear-gradient(135deg,#6366f1,#4f46e5);
  --sk-semantic-gradients-keyword: linear-gradient(90deg,#a78bfa 0%,#c084fc 55%,#fb923c 100%);
  --sk-semantic-gradients-marker: rgba(245,158,11,.34);
  }
}

:root[data-theme="dark"] {
  --sk-theme-canvas: #050816;
  --sk-theme-canvas-gradient: radial-gradient(ellipse 80% 80% at 20% 0%,rgba(99,102,241,.20) 0%,transparent 50%),radial-gradient(ellipse 70% 70% at 80% 30%,rgba(168,85,247,.17) 0%,transparent 50%),radial-gradient(ellipse 80% 60% at 50% 100%,rgba(245,158,11,.10) 0%,transparent 60%),linear-gradient(135deg,#050816 0%,#0a0e2e 50%,#0d1138 100%);
  --sk-theme-surface: rgba(22,27,74,.40);
  --sk-theme-surface-strong: rgba(22,27,74,.66);
  --sk-theme-surface-muted: rgba(255,255,255,.045);
  --sk-theme-surface-elevated: #161b4a;
  --sk-theme-text: #f8fafc;
  --sk-theme-text-secondary: #cbd5e1;
  --sk-theme-text-muted: #94a3b8;
  --sk-theme-text-inverse: #050816;
  --sk-theme-border: rgba(129,140,248,.18);
  --sk-theme-border-strong: rgba(129,140,248,.38);
  --sk-theme-focus-ring: #6366f1;
  --sk-theme-overlay: rgba(2,6,23,.72);
  --sk-theme-skeleton: rgba(129,140,248,.16);
  --sk-theme-link: #818cf8;
  --sk-theme-link-hover: #ffffff;
  --sk-theme-disabled-surface: #1e293b;
  --sk-theme-disabled-text: #94a3b8;
  --sk-theme-pill-bg: rgba(99,102,241,.20);
  --sk-theme-heat-bg: rgba(255,255,255,.03);
  --sk-theme-violet-pale: rgba(168,85,247,.16);
  --sk-theme-copper-pale: rgba(245,158,11,.15);
  --sk-theme-green-pale: rgba(16,185,129,.14);
  --sk-theme-red-pale: rgba(239,68,68,.14);
  --sk-theme-ink-accent: #fbbf24;
  --sk-theme-ink-success: #6ee7b7;
  --sk-theme-ink-danger: #fca5a5;
  --sk-theme-ink-info: #c7d2fe;
  --sk-shadows-card: 0 1px 3px rgba(0,0,0,.40),0 1px 2px rgba(0,0,0,.30);
  --sk-shadows-card-hover: 0 16px 32px -12px rgba(0,0,0,.55);
  --sk-shadows-floating: 0 28px 56px -18px rgba(0,0,0,.60);
  --sk-semantic-feedback-success-foreground: #6ee7b7;
  --sk-semantic-feedback-success-background: rgba(16,185,129,.14);
  --sk-semantic-feedback-success-border: rgba(16,185,129,.38);
  --sk-semantic-feedback-success-on-solid: #050816;
  --sk-semantic-feedback-warning-foreground: #fbbf24;
  --sk-semantic-feedback-warning-background: rgba(245,158,11,.15);
  --sk-semantic-feedback-warning-border: rgba(245,158,11,.40);
  --sk-semantic-feedback-warning-on-solid: #050816;
  --sk-semantic-feedback-error-foreground: #fca5a5;
  --sk-semantic-feedback-error-background: rgba(239,68,68,.14);
  --sk-semantic-feedback-error-border: rgba(239,68,68,.38);
  --sk-semantic-feedback-error-on-solid: #050816;
  --sk-semantic-feedback-info-foreground: #c7d2fe;
  --sk-semantic-feedback-info-background: rgba(99,102,241,.20);
  --sk-semantic-feedback-info-border: rgba(129,140,248,.38);
  --sk-semantic-feedback-info-on-solid: #050816;
  --sk-semantic-entitlement-provisional-foreground: #fbbf24;
  --sk-semantic-entitlement-provisional-background: rgba(245,158,11,.15);
  --sk-semantic-entitlement-provisional-border: rgba(245,158,11,.40);
  --sk-semantic-entitlement-permanent-foreground: #6ee7b7;
  --sk-semantic-entitlement-permanent-background: rgba(16,185,129,.14);
  --sk-semantic-entitlement-permanent-border: rgba(16,185,129,.38);
  --sk-semantic-entitlement-frozen-foreground: #c7d2fe;
  --sk-semantic-entitlement-frozen-background: rgba(99,102,241,.20);
  --sk-semantic-entitlement-frozen-border: rgba(129,140,248,.38);
  --sk-semantic-entitlement-revoked-foreground: #fca5a5;
  --sk-semantic-entitlement-revoked-background: rgba(239,68,68,.14);
  --sk-semantic-entitlement-revoked-border: rgba(239,68,68,.38);
  --sk-semantic-entitlement-expired-foreground: #94a3b8;
  --sk-semantic-entitlement-expired-background: rgba(148,163,184,.14);
  --sk-semantic-entitlement-expired-border: rgba(148,163,184,.34);
  --sk-semantic-entitlement-legal-hold-foreground: #d8b4fe;
  --sk-semantic-entitlement-legal-hold-background: rgba(168,85,247,.16);
  --sk-semantic-entitlement-legal-hold-border: rgba(168,85,247,.40);
  --sk-semantic-commerce-price: #fbbf24;
  --sk-semantic-commerce-discount: #fca5a5;
  --sk-semantic-commerce-primary-cta: #818cf8;
  --sk-semantic-commerce-secondary-cta: #161b4a;
  --sk-semantic-commerce-unavailable: #94a3b8;
  --sk-semantic-gradients-primary-cta: linear-gradient(135deg,#6366f1,#4f46e5);
  --sk-semantic-gradients-keyword: linear-gradient(90deg,#a78bfa 0%,#c084fc 55%,#fb923c 100%);
  --sk-semantic-gradients-marker: rgba(245,158,11,.34);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--sk-motion-reduced-motion-duration-ms, 0ms) !important;
    transition-duration: var(--sk-motion-reduced-motion-duration-ms, 0ms) !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   0. Aliases the token emitter cannot express
   ========================================================================== */
:root {
  /* Named by value, not by index.

     The old ladder was --sk-sp-4..11. A rule saying 'padding: var(--sk-sp-30)'
     told you nothing about how big that was, and re-pointing the ladder at a
     different scale silently resized all 110 call sites. Naming each step by its
     pixel value makes both the size and any future drift from spacing.scale_px
     visible where it is used.

     Values are contracts/design-tokens.json 'spacing.scale_px', re-measured
     against 樣稿 v2 on 2026-08-22. Four steps moved to v2's ladder: 32→30, 40→38,
     48→44, 64→56. (The old 76px step had a definition and no call site; the
     contract's 70px replaces it.) The emitter joins the array into a single
     comma-separated string and cannot express a ladder, which is why it is here
     rather than generated. */
  --sk-sp-4: 4px;
  --sk-sp-6: 6px;
  --sk-sp-8: 8px;
  --sk-sp-10: 10px;
  --sk-sp-12: 12px;
  --sk-sp-14: 14px;
  --sk-sp-16: 16px;
  --sk-sp-20: 20px;
  --sk-sp-22: 22px;
  --sk-sp-24: 24px;
  --sk-sp-30: 30px;
  --sk-sp-38: 38px;
  --sk-sp-44: 44px;
  --sk-sp-56: 56px;
  --sk-sp-70: 70px;

  --sk-r-s: calc(var(--sk-raw-radius-px-s) * 1px);
  --sk-r-m: calc(var(--sk-raw-radius-px-m) * 1px);
  --sk-r-l: calc(var(--sk-raw-radius-px-l) * 1px);
  --sk-r-xl: calc(var(--sk-raw-radius-px-xl) * 1px);
  --sk-r-pill: calc(var(--sk-raw-radius-px-pill) * 1px);

  --sk-fs-micro: calc(var(--sk-typography-size-px-micro) * 1px);
  --sk-fs-tiny: calc(var(--sk-typography-size-px-tiny) * 1px);
  --sk-fs-caption: calc(var(--sk-typography-size-px-caption) * 1px);
  --sk-fs-body-sm: calc(var(--sk-typography-size-px-body-sm) * 1px);
  --sk-fs-body: calc(var(--sk-typography-size-px-body) * 1px);
  --sk-fs-title-sm: calc(var(--sk-typography-size-px-title-sm) * 1px);
  --sk-fs-title: calc(var(--sk-typography-size-px-title) * 1px);
  --sk-fs-display: calc(var(--sk-typography-size-px-display) * 1px);

  /* The contract carries both clamps, so nothing here writes one by hand. */
  --sk-fs-display-fluid: var(--sk-typography-size-fluid-display);
  --sk-fs-title-fluid: var(--sk-typography-size-fluid-title);

  /* effects.*_px and motion.*_ms are emitted as bare numbers. */
  --sk-blur-surface: blur(calc(var(--sk-effects-blur-surface-px) * 1px));
  --sk-blur-overlay: blur(calc(var(--sk-effects-blur-overlay-px) * 1px));
  --sk-blur-control: blur(calc(var(--sk-effects-blur-control-px) * 1px));
  --sk-dur-standard: calc(var(--sk-motion-standard-ms) * 1ms);
  --sk-dur-theme: calc(var(--sk-motion-theme-ms) * 1ms);

  --sk-page-max: calc(var(--sk-containers-catalog-max-px) * 1px);
  --sk-reading-max: calc(var(--sk-containers-reading-max-px) * 1px);
  --sk-gutter: calc(var(--sk-containers-page-gutter-max-px) * 1px);
  --sk-sticky-top: calc(var(--sk-raw-layout-px-sticky-offset) * 1px);
  --sk-header-h: calc(var(--sk-raw-layout-px-header-height) * 1px);

  /* The card accent bar. v2 passes this per card as an inline
     style="--card-accent:…", which our CSP (style-src 'self', no
     'unsafe-inline') drops on the floor — so the palette is modifier classes
     instead and this is the default. No new colours: every value is raw.color.* */
  --sk-card-accent: var(--sk-raw-color-primary);

  --sk-ring: 0 0 0 calc(var(--sk-focus-ring-width-px) * 1px) var(--sk-theme-focus-ring);
  --sk-focus-offset: calc(var(--sk-focus-ring-offset-px) * 1px);
  --sk-ease: var(--sk-raw-ease);
}

/* The five accent bars, as classes rather than inline custom properties. */
.sk-card--accent-amber { --sk-card-accent: var(--sk-raw-color-accent); }
.sk-card--accent-indigo { --sk-card-accent: var(--sk-raw-color-primary); }
.sk-card--accent-emerald { --sk-card-accent: var(--sk-raw-color-success); }
.sk-card--accent-violet { --sk-card-accent: var(--sk-raw-color-violet); }
.sk-card--accent-cyan { --sk-card-accent: var(--sk-raw-color-cyan); }
.sk-card--accent-rose { --sk-card-accent: var(--sk-raw-color-rose); }

/* --------------------------------------------------------------------------
   The dark-theme price and discount used to be patched here. They no longer are.

   contracts/design-tokens.json now carries 'semantic.commerce.dark', and the
   emitter folds any 'dark' override group into the same two theme blocks it
   already writes for the palette — so the override lands on
   --sk-semantic-commerce-price itself rather than on a second copy kept here.
   Same rendered result (#fbbf24 / #fca5a5), one source of truth.

   The reason for those values is unchanged and still worth stating: the light
   ends of the ramp (#b45309 amber, #b91c1c red) sit on a near-black canvas in
   dark mode, and a price and a saving are the two things a shopper is trying to
   read.
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1. Reset and base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--sk-typography-family-sans);
  font-size: var(--sk-fs-body);
  line-height: var(--sk-typography-line-height-body);
  color: var(--sk-theme-text);
  background-color: var(--sk-theme-canvas);
  background-image: var(--sk-theme-canvas-gradient);
  background-attachment: fixed;
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 {
  /* 14px, which is 樣稿 v2's value and not on our own spacing scale — the scale
     jumps 12 → 14 → 16 and the contract's --sk-sp-14 is exactly this. Using
     --sk-sp-16 put an extra 2px under every heading on every page; two pixels
     is invisible alone and is why the site read as looser than the mockup. */
  margin: 0 0 var(--sk-sp-14);
  /* heading, not compact. The contract gained both when it was reconciled
     against 樣稿 v2 on 2026-08-22 — 1.32 and -.025em are v2's measured values,
     and the -0.01em written here was nobody's. */
  line-height: var(--sk-typography-line-height-heading);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-heading);
  text-wrap: balance;
}
/* letter-spacing: the shared rule above sets heading (-.025em), which is
   v2's value for h2 and below. v2 tightens the display size one step further to
   -.04em, and at 46px that difference is a visible half-character across a
   two-line headline. */
/* Fluid, not fixed. The contract has carried clamp(30px,4.6vw,46px) since it
   was reconciled against 樣稿 v2, and this rule was asking for the flat 46px
   instead — so every heading on the site was at its desktop size on a 390px
   phone, where 46px is roughly eight characters to a line. This is the single
   biggest reason the site did not look like the mockup on a small screen. */
h1 {
  font-size: var(--sk-fs-display-fluid);
  font-weight: var(--sk-typography-weight-black);
  letter-spacing: var(--sk-typography-letter-spacing-title);
}
h2 { font-size: var(--sk-fs-title-fluid); margin-top: var(--sk-sp-38); font-weight: var(--sk-typography-weight-extrabold); }
/* 19px, v2's value. --sk-fs-title-sm is 20px and is the lede's old size; one
   pixel is not the point, sharing a size with a paragraph is. */
h3 { font-size: 19px; margin-top: var(--sk-sp-24); font-weight: var(--sk-typography-weight-extrabold); }
h4 { font-size: var(--sk-fs-body); margin-top: var(--sk-sp-20); }

p { margin: 0 0 var(--sk-sp-16); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--sk-fs-caption); color: var(--sk-theme-text-muted); }
code, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: 0.92em;
  background: var(--sk-theme-surface-muted);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-s);
  padding: 0.1em 0.4em;
  word-break: break-all;
}

a { color: var(--sk-theme-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:hover { color: var(--sk-theme-link-hover); }

hr { border: 0; border-top: 1px solid var(--sk-theme-border); margin: var(--sk-sp-30) 0; }

:focus-visible {
  outline: 2px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
  border-radius: var(--sk-r-s);
}

/* Gradient text, written once.

   Four places wanted it — the brand mark, the hero accent, the stat figures and
   the footer name — and each had its own copy of the same four declarations,
   with the @supports fallback written out twice and the footer missing from
   one of the two lists. A fifth caller would have made five copies.

   The fallback matters more than it looks: without background-clip: text the
   element is transparent text on a gradient, i.e. invisible. Anything that opts
   into this class gets the fallback with it.

   The four existing callers join by selector rather than by adding a class in
   the markup: their HTML is asserted by shell.test.ts and storefront.test.ts,
   and a styling refactor should not need to touch either. */
.sk-gradient-text,
.sk-hero__accent,
.sk-course--home .sk-learnstats dd {
  background: var(--sk-semantic-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sk-gradient-text,
  .sk-hero__accent,
  .sk-course--home .sk-learnstats dd {
    color: var(--sk-effects-gradient-text-fallback);
    -webkit-text-fill-color: currentColor;
  }
}

/* semantic.selection has no dark variant in the contract — it is one flat set
   — and selection.text is #312e81, a near-black indigo. On the dark canvas
   that is dark-on-dark. --sk-theme-ink-info is the same role and does follow
   the theme (#4338ca light, #c7d2fe dark), so the selection reads in both. */
::selection { background: var(--sk-semantic-selection-background); color: var(--sk-theme-ink-info); }

/* ==========================================================================
   2. Skip link
   --------------------------------------------------------------------------
   Hidden by clipping, the .sk-visually-hidden way, and shown only while it
   has focus.

   Until 2026-09-25 it was hidden by moving it: translateY(-200%) parked the
   whole link just above the top edge of the page, at the toast layer (500).
   On an iPhone, pulling past the top of the page (rubber-band scrolling, or a
   fast flick) shows what is above that edge, and the link appeared at the top
   left over everything. A clipped 1px box has nothing to reveal, wherever the
   page is scrolled.

   :focus as well as :focus-visible, so a browser without :focus-visible still
   shows it. Neither ever matches for a tap: the link has no visible area to tap.
   ========================================================================== */
.sk-skip-link {
  position: absolute;
  left: var(--sk-sp-16);
  top: var(--sk-sp-16);
  z-index: var(--sk-z-index-toast);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-text);
  border-radius: var(--sk-r-m);
  font-weight: var(--sk-typography-weight-medium);
  text-decoration: none;
  box-shadow: var(--sk-shadows-floating);
}
.sk-skip-link:focus,
.sk-skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--sk-sp-12) var(--sk-sp-20);
  overflow: visible;
  clip-path: none;
  border: 1px solid var(--sk-theme-border-strong);
}

/* ==========================================================================
   3. Header
   ========================================================================== */
/* Full-bleed glass, centred contents, one element.

   The bar used to carry 'max-width: var(--sk-page-max)' itself, so above
   1200px the canvas gradient showed through on both sides of a sticky header
   that is supposed to be a single sheet. The obvious fix is an inner wrapper;
   this does it without one, because the wrapper would also mean re-pointing
   every '.sk-header' rule in section 15 at a new element.

   The inline padding is whichever is larger: the page gutter, or the slack
   either side of a --sk-page-max column. Below 1200px the second term is
   negative and the gutter wins, which is what the narrow breakpoints already
   assume. */
.sk-header {
  position: sticky;
  top: 0;
  z-index: var(--sk-z-index-header);
  display: flex;
  align-items: center;
  gap: var(--sk-sp-16);
  width: 100%;
  min-height: var(--sk-header-h);
  padding: var(--sk-sp-12) max(var(--sk-gutter), calc((100% - var(--sk-page-max)) / 2));
  background: var(--sk-theme-surface-strong);
  -webkit-backdrop-filter: var(--sk-blur-surface);
  backdrop-filter: var(--sk-blur-surface);
  border-bottom: 1px solid var(--sk-theme-border);
}

.sk-header__brand {
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}
.sk-header__brand:focus-visible { color: var(--sk-theme-text); }

/* The search entry PRD §3.3 lists among the four things the header may hold.

   'margin-inline-start: auto' is deliberately not set here: .sk-drawer already
   claims the slack, so search and the theme picker travel with it as one
   right-hand cluster. */
@media (max-width: 860px) {
  /* Enter submits. The button is 60px of a header that has to hold five
     things at 375px. */
}

/* The drawer is a native <details>: it opens with no JavaScript. On wide
   viewports the marker is hidden and the panel is always laid out.

   🔴 The second half of that sentence was a lie until 2026-08-22. The trigger is
   display: none above 768px and the <details> is closed, and a closed
   <details> hides everything that is not its <summary> — so on every desktop
   the primary navigation (首頁 / 全部證照 / 我的學習 / 我的帳戶) was invisible
   AND unreachable: nothing left to click to open it. The comment claimed the
   behaviour; no rule implemented it.

   Two declarations are needed because engines hide the closed content two
   different ways. Firefox and older Chromium put display: none on the
   non-summary children, which author CSS outranks. Newer engines moved to
   content-visibility on the ::details-content pseudo, which display does
   not touch. Both are written; whichever the browser has, one of them applies
   and the other is ignored.

   Scoped to min-width rather than written at the base, because at the base it
   would cascade into the phone layout and hold the drawer permanently open —
   which is the opposite bug in the opposite place. */
.sk-drawer { margin-inline-start: auto; }
@media (min-width: 861px) {
  .sk-drawer__panel { display: block; }
  .sk-drawer::details-content { content-visibility: visible; }
  .sk-nav__home { display: none; }
}
.sk-drawer__trigger {
  display: none;
  align-items: center;
  cursor: pointer;
  list-style: none;
  padding: var(--sk-sp-8) var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  background: var(--sk-theme-surface);
  color: var(--sk-theme-text);
}
.sk-drawer__trigger::-webkit-details-marker { display: none; }
.sk-drawer__trigger:hover { border-color: var(--sk-raw-color-primary); }

.sk-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-nav a {
  position: relative;
  display: block;
  padding: 9px 14px;
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-body-sm);
  /* semibold, not medium: at 14px on a translucent bar, 500 is the weight that
     makes a navigation item look disabled. */
  font-weight: var(--sk-typography-weight-semibold);
  white-space: nowrap;
  color: var(--sk-theme-text-secondary);
  text-decoration: none;
  transition: background-color 0.16s var(--sk-ease), color 0.16s var(--sk-ease), transform .16s var(--sk-ease), box-shadow .16s var(--sk-ease);
}
.sk-nav a:hover { transform: translateY(-1px); background: var(--sk-theme-pill-bg); color: var(--sk-theme-text); box-shadow: 0 7px 16px rgba(67, 56, 202, .1); }

/* The drawer groups (PRD §3.3: 已開通 / 其他證照 / 依分類找) and their rules were
   removed on 2026-09-25: the menu is navigation only (創辦人核可的選單改版).
   .sk-badge--owned, which the 已開通 heading borrowed, is still used by the
   product page and stays where it is. */
.sk-nav a[aria-current="page"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--sk-raw-color-primary) 17%, var(--sk-theme-surface)), var(--sk-theme-pill-bg));
  /* Same reason as ::selection above: in dark mode this was the one navigation
     item the reader could not see, which is precisely the item that is supposed
     to stand out. */
  color: var(--sk-theme-ink-info);
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 18px 4px;
  height: 2px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-raw-color-primary);
}
.sk-drawer[open] > .sk-drawer__trigger {
  border-color: var(--sk-raw-color-primary);
  background: color-mix(in srgb, var(--sk-raw-color-primary) 12%, var(--sk-theme-surface));
  color: var(--sk-theme-ink-info);
}

/* Theme picker: a radio fieldset that reads as a segmented control. */
.sk-theme { display: flex; align-items: center; gap: var(--sk-sp-8); }
.sk-theme > * { margin-top: 0; }
/* The base label rule is display:block with a bottom margin, which is right
   for a form field and wrong for a segmented control: it stacked the three
   options and made the sticky header 130px tall on a phone. Everything the
   control needs is set explicitly here rather than inherited. */
/* The input itself is visually hidden, so the ring has to land on the label.
   Outline as well as glow: forced-colors mode drops box-shadow. */
/* The island submits on change, so the button is the no-JavaScript fallback. */

/* ==========================================================================
   4. Main and page rhythm
   ========================================================================== */
.sk-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--sk-page-max);
  margin: 0 auto;
  padding: var(--sk-sp-38) var(--sk-gutter) var(--sk-sp-56);
}
.sk-main:focus { outline: none; }

.sk-main > section { margin-bottom: var(--sk-sp-44); }
.sk-main > section:last-child { margin-bottom: 0; }

/* ==========================================================================
   5. Cards, surfaces, sections
   ========================================================================== */
/* .sk-card carries an accent bar; .sk-panel is the neutral surface.

   v2 draws a 4px bar across the top of every card and colours it per card with
   an inline style="--card-accent:…". Our CSP is style-src 'self' with no
   'unsafe-inline', so a browser would drop every one of those attributes and
   the whole five-colour system with them — hence the .sk-card--accent-*
   classes at the top of this file.

   Done now rather than later on purpose: .sk-card has one caller today and
   .sk-panel two. The same change once the catalogue renders cards is fifty. */
.sk-card::before {
  content: "";
  display: block;
  height: 4px;
  margin: calc(var(--sk-sp-24) * -1) calc(var(--sk-sp-24) * -1) var(--sk-sp-20);
  border-radius: var(--sk-r-xl) var(--sk-r-xl) 0 0;
  background: linear-gradient(135deg, var(--sk-card-accent), color-mix(in srgb, var(--sk-card-accent) 55%, #000));
}
/* position/isolation/overflow are v2's and were all three missing. The card
   draws a 4px accent bar with ::before whose negative margins reach the card
   edge; without overflow:hidden it squares off the rounded top corners, and
   without a stacking context of its own the bar of a hovered card can slide
   under the card next to it. */
.sk-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: var(--sk-shadows-card);
}
/* The corner bloom v2 gives every card. ::before is taken by the 4px accent bar
   (CSP: v2 passes the colour as an inline style, which our policy drops), so the
   glow goes on ::after. Decorative and behind the content. */
.sk-card::after {
  content: "";
  position: absolute;
  right: -52px;
  top: -62px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sk-card-accent, var(--sk-raw-color-primary)) 42%, transparent), transparent 68%);
  opacity: 0.34;
  pointer-events: none;
  z-index: -1;
}
.sk-card,
.sk-panel {
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  /* 樣稿 v2 的 .card 用 --r-xl(26px)。--r-l(20px) 在 v2 是搜尋框與小卡的圓角。 */
  border-radius: var(--sk-r-xl);
  padding: var(--sk-sp-24);
  /* The blur radii are contract values (effects.blur_*_px), not a number
     someone liked. surface is the 20px one every panel in v2 uses. */
  -webkit-backdrop-filter: var(--sk-blur-surface);
  backdrop-filter: var(--sk-blur-surface);
}
.sk-panel { box-shadow: var(--sk-shadows-card); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  /* Every glass surface needs an opaque, real theme token when blur is absent. */
  .sk-card,
  .sk-panel,
  .sk-product,
  .sk-header,
  .sk-footer,
  .sk-hero,
  .sk-steps,
  .sk-tryone { background: var(--sk-theme-surface-elevated); }
}

/* One kicker language site-wide. .sk-eyebrow was a second specification
   (12px/700/.15em/raw amber) that only the product page used; the raw amber is
   also the 2.2:1 colour ink_accent exists to replace. */
.sk-eyebrow {
  display: block;
  /* 2026-10-04（小修 F6）：11px 讀不到，提到 12.5px，跟 .sk-kicker 與 .sk-checkout 裡的 .sk-eyebrow 同一個大小。 */
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-black);
  letter-spacing: var(--sk-typography-letter-spacing-wide);
  color: var(--sk-theme-ink-accent);
}

/* 17px / 1.95 / 62ch — all three are 樣稿 v2's, and all three were wrong here.

   The size was --sk-fs-title-sm (20px), which is a heading size: the lede was
   competing with the h1 above it instead of sitting under it. The measure was
   --sk-reading-max (860px), a limit meant for body prose; 62ch is narrower at
   this size and is what keeps a lede to two or three lines instead of four. */
.sk-lede {
  font-size: 17px;
  line-height: 1.95;
  color: var(--sk-theme-text-secondary);
  max-width: 62ch;
}

.sk-muted { color: var(--sk-theme-text-muted); }

/* Native disclosure lists keep every explanation usable with scripting off.
   The open state has text, shape and a marker, so it is not colour-only. */
.sk-disclosure-list { display: grid; gap: var(--sk-sp-10); }
.sk-disclosure {
  --sk-disclosure-accent: var(--sk-raw-color-primary);
  --sk-disclosure-ink: var(--sk-theme-ink-info);
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 32%, var(--sk-theme-border));
  border-radius: var(--sk-r-l);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sk-disclosure-accent) 9%, var(--sk-theme-surface-strong)), var(--sk-theme-surface-strong) 72%);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--sk-disclosure-accent) 8%, transparent);
  transition: transform .18s var(--sk-ease), border-color .18s var(--sk-ease), box-shadow .18s var(--sk-ease);
}
.sk-disclosure::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sk-disclosure-accent);
  opacity: .9;
}
.sk-disclosure--indigo { --sk-disclosure-accent: var(--sk-raw-color-primary); --sk-disclosure-ink: var(--sk-theme-ink-info); }
.sk-disclosure--violet { --sk-disclosure-accent: var(--sk-raw-color-violet); --sk-disclosure-ink: var(--sk-theme-ink-info); }
.sk-disclosure--emerald { --sk-disclosure-accent: var(--sk-raw-color-success); --sk-disclosure-ink: var(--sk-theme-ink-success); }
.sk-disclosure--amber { --sk-disclosure-accent: var(--sk-raw-color-accent); --sk-disclosure-ink: var(--sk-theme-ink-accent); }
.sk-disclosure--rose { --sk-disclosure-accent: var(--sk-raw-color-rose); --sk-disclosure-ink: var(--sk-theme-ink-danger); }
.sk-disclosure--cyan { --sk-disclosure-accent: var(--sk-raw-color-cyan); --sk-disclosure-ink: var(--sk-theme-ink-info); }
.sk-disclosure:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--sk-disclosure-accent) 58%, var(--sk-theme-border));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--sk-disclosure-accent) 14%, transparent);
}
.sk-disclosure[open] {
  border-color: color-mix(in srgb, var(--sk-disclosure-accent) 68%, var(--sk-theme-border));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--sk-disclosure-accent) 17%, transparent);
}
.sk-disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--sk-sp-10);
  min-height: 54px;
  padding: 10px var(--sk-sp-12) 10px var(--sk-sp-14);
  color: var(--sk-theme-text);
  font-size: 14px;
  font-weight: var(--sk-typography-weight-extrabold);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}
.sk-disclosure__summary::-webkit-details-marker { display: none; }
.sk-disclosure__marker {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 42%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--sk-disclosure-accent) 15%, var(--sk-theme-surface));
  color: var(--sk-disclosure-ink);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-black);
  line-height: 1;
}
.sk-disclosure__label { min-width: 0; }
.sk-disclosure__summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sk-disclosure-accent) 14%, var(--sk-theme-surface));
  color: var(--sk-disclosure-ink);
  font-size: 17px;
  line-height: 1;
  transition: transform .18s var(--sk-ease), background-color .18s var(--sk-ease);
}
.sk-disclosure[open] > .sk-disclosure__summary::after { content: "−"; transform: rotate(180deg); }
.sk-disclosure__summary:hover { background: color-mix(in srgb, var(--sk-disclosure-accent) 7%, transparent); }
.sk-disclosure__summary:focus-visible {
  outline: 3px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
  border-radius: inherit;
}
.sk-disclosure__body {
  margin: 0 var(--sk-sp-14);
  padding: var(--sk-sp-12) 0 var(--sk-sp-16) 42px;
  border-top: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 22%, var(--sk-theme-border));
  color: var(--sk-theme-text-secondary);
  font-size: 13.5px;
  line-height: 1.8;
  animation: sk-disclosure-reveal .2s var(--sk-ease) both;
}
.sk-disclosure__action { margin: var(--sk-sp-8) 0 0; }
.sk-disclosure__action a {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-sp-6);
  padding: 5px 9px;
  border-radius: var(--sk-r-pill);
  background: color-mix(in srgb, var(--sk-disclosure-accent) 12%, transparent);
  color: var(--sk-disclosure-ink);
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-disclosure__action-arrow { transition: transform .18s var(--sk-ease); }
.sk-disclosure__action a:hover .sk-disclosure__action-arrow { transform: translateX(3px); }
@keyframes sk-disclosure-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

.sk-prose { max-width: var(--sk-reading-max); line-height: var(--sk-typography-line-height-reading); }
.sk-prose li { margin-bottom: var(--sk-sp-8); }

/* ==========================================================================
   6. Hero
   ========================================================================== */
/* The section's outer rhythm only. The panel's own padding is set with the rest
   of the glass shell further down; writing a second padding here is what made
   the shell read as a full-width band — 44px 0 30px zeroed its left and right,
   so the copy ran to the panel edge. */
.sk-hero { margin: 0 0 var(--sk-sp-30); }
.sk-hero h1 {
  max-width: 16ch;
  /* The contract carries this clamp (typography.size_fluid.display); it used to
     be written out here with a different lower bound. */
  font-size: var(--sk-fs-display-fluid);
}


/* ==========================================================================
   7. Catalog grid and product cards
   ========================================================================== */
.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--sk-sp-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sk-product {
  display: flex;
  flex-direction: column;
  gap: var(--sk-sp-12);
  height: 100%;
  padding: var(--sk-sp-20);
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: transform 0.2s var(--sk-ease), box-shadow 0.2s var(--sk-ease), border-color 0.2s var(--sk-ease);
}
.sk-product:hover {
  transform: translateY(-2px);
  border-color: var(--sk-theme-border-strong);
  box-shadow: var(--sk-shadows-card-hover);
}
/* 16px title, 12.5px description clamped to two lines — v2's card. Ours ran
   20/14 with no clamp, so a long certificate name plus a four-line pitch made
   every card in the row a different height. */
.sk-product__title {
  margin: 0;
  font-size: var(--sk-fs-body);
  letter-spacing: -0.02em;
  line-height: 1.42;
}
.sk-product__title a { text-decoration: none; color: var(--sk-theme-text); }
.sk-product__title a:hover { color: var(--sk-theme-link); }
/* The whole card is the hit area, but the link stays the only tab stop. */
.sk-product__title a::after { content: ""; position: absolute; inset: 0; }
.sk-product { position: relative; }
.sk-product__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-8);
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-muted);
}
.sk-product__desc {
  flex: 1;
  font-size: var(--sk-fs-caption);
  line-height: 1.8;
  color: var(--sk-theme-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-product__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sk-sp-12);
  margin-top: auto;
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
}

/* Catalog filters follow the mockup's search row and three aligned chip axes. */
.sk-cattools {
  display: grid;
  gap: var(--sk-sp-14);
  margin-bottom: var(--sk-sp-30);
  padding: var(--sk-sp-22);
}
.sk-cattools > * + * { margin-top: 0; }
.sk-cattools__row {
  display: flex;
  gap: var(--sk-sp-10);
  align-items: center;
  flex-wrap: wrap;
}
.sk-cattools__row input[type="search"] {
  flex: 1;
  min-width: 220px;
  max-width: none;
}
.sk-cattools legend.sk-visually-hidden { padding: 0; }
.sk-axis {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
.sk-axis__layout {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--sk-sp-12);
  align-items: start;
}
.sk-axis__label {
  margin-bottom: 0;
  padding-top: 9px;
  color: var(--sk-theme-text-secondary);
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.sk-chip,
.sk-segment > span {
  position: relative;
  display: inline-flex;
}
.sk-cattools .sk-chip input,
.sk-cattools .sk-segment input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.sk-cattools .sk-chip input + label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.16s var(--sk-ease), color 0.16s var(--sk-ease), background-color 0.16s var(--sk-ease), box-shadow 0.16s var(--sk-ease);
}
.sk-cattools .sk-chip input + label:hover {
  border-color: var(--sk-raw-color-primary-light);
  color: var(--sk-theme-text);
}
.sk-cattools .sk-chip input:checked + label {
  border-color: transparent;
  background: var(--sk-raw-color-primary-dark);
  color: #ffffff;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.24);
}
.sk-cattools .sk-segment {
  display: flex;
  flex: none;
  gap: var(--sk-sp-6);
  margin: 0;
  padding: var(--sk-sp-4);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
}
.sk-cattools .sk-segment input + label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--sk-r-pill);
  background: transparent;
  color: var(--sk-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-bold);
  line-height: 1.3;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.16s var(--sk-ease), background-color 0.16s var(--sk-ease), box-shadow 0.16s var(--sk-ease);
}
.sk-cattools .sk-segment input + label:hover { color: var(--sk-theme-text); }
.sk-cattools .sk-segment input:checked + label {
  background: var(--sk-raw-color-primary-dark);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.26);
}
.sk-cattools .sk-chip input:focus-visible + label,
.sk-cattools .sk-segment input:focus-visible + label {
  outline: 2px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
}
/* Category and ownership now navigate immediately with real GET links. */
.sk-cattools .sk-filter-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--sk-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  transition: border-color .16s var(--sk-ease), color .16s var(--sk-ease), background-color .16s var(--sk-ease), box-shadow .16s var(--sk-ease);
}
.sk-cattools .sk-chip .sk-filter-link {
  min-height: 40px;
  max-width: 100%;
  padding: 8px 15px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
}
.sk-cattools .sk-chip .sk-filter-link::before {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--sk-raw-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-raw-color-primary) 12%, transparent);
}
.sk-cattools .sk-segment .sk-filter-link {
  min-height: 36px;
  padding: 7px 15px;
  border: 0;
  border-radius: var(--sk-r-pill);
  background: transparent;
  font-weight: var(--sk-typography-weight-bold);
  white-space: nowrap;
}
.sk-cattools .sk-filter-link:hover {
  color: var(--sk-theme-text);
  border-color: var(--sk-raw-color-primary-light);
  background: color-mix(in srgb, var(--sk-raw-color-primary) 9%, var(--sk-theme-surface-muted));
  box-shadow: 0 7px 18px rgba(99, 102, 241, .1);
}
.sk-cattools .sk-filter-link--active,
.sk-cattools .sk-filter-link[aria-current="page"] {
  border-color: transparent;
  background: var(--sk-raw-color-primary-dark);
  color: #fff;
  box-shadow: 0 7px 18px rgba(99, 102, 241, .25);
}
.sk-cattools .sk-chip .sk-filter-link--active::before,
.sk-cattools .sk-chip .sk-filter-link[aria-current="page"]::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex-basis: 16px;
  margin-inline-end: 5px;
  background: rgba(255, 255, 255, .18);
  box-shadow: none;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}
.sk-cattools .sk-filter-link:focus-visible {
  outline: 3px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
}
.sk-cattools__footer,
.sk-cattools__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sk-sp-10);
}
.sk-cattools__footer { justify-content: space-between; }
.sk-cattools__actions { flex: 1; }

@media (max-width: 860px) {
  .sk-axis__layout { grid-template-columns: 1fr; gap: 7px; }
  .sk-axis__label { padding-top: 0; }
}
@media (max-width: 480px) {
  .sk-cattools__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .sk-cattools__row input[type="search"] { min-width: 0; width: 100%; }
  .sk-cattools__row > .sk-btn--primary { min-height: 44px; }
  .sk-cattools .sk-segment { grid-column: 1 / -1; width: 100%; }
  .sk-cattools .sk-segment > span { flex: 1; min-width: 0; }
  .sk-cattools .sk-segment .sk-filter-link { width: 100%; min-height: 44px; padding-inline: var(--sk-sp-8); }
  .sk-cattools .sk-chip .sk-filter-link { min-height: 44px; white-space: normal; }
  .sk-cattools__footer .sk-btn { min-height: 44px; }
}

/* The result count is a count, not a notice.

   It carries role="status" so the number is announced when the filter form
   comes back, and the element-level [role="status"] rule dresses that as a
   full info panel. Weight and rhythm here instead — and, deliberately, no <b>
   around the digit: four assertions match 「符合的商品：共 N 款」 as one
   contiguous string. */
.sk-catcount {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  letter-spacing: var(--sk-typography-letter-spacing-tight);
  margin: var(--sk-sp-20) 0;
}
.sk-catcount[role="status"] {
  display: flex;
  align-items: baseline;
  gap: var(--sk-sp-12);
  flex-wrap: wrap;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sk-theme-text);
}
.sk-catcount__hint { font-size: var(--sk-fs-caption); font-weight: var(--sk-typography-weight-regular); color: var(--sk-theme-text-muted); letter-spacing: normal; }
.sk-catalog { padding-top: 18px; }
.sk-catalog__head { margin-bottom: 26px; }
.sk-catalog__head .sk-kicker { margin-top: 0; }
.sk-catalog__head h1 { margin: 0 0 var(--sk-sp-12); }
.sk-catalog__head .sk-lede { margin-bottom: 0; }
.sk-catalog__summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-4);
  margin: var(--sk-sp-14) 0 0;
  padding: 8px 12px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-caption);
}
.sk-catalog__summary strong { color: var(--sk-theme-text); }

/* The card accent bar.

   Not shared with .sk-card::before: that rule's negative margins are the card's
   own 24px padding, and .sk-product pads 20px. Reusing it would leave the bar
   4px short on both sides and the corner radius showing through. The colour
   comes from the same .sk-card--accent-* classes, which only set a custom
   property and therefore work on any element. */
.sk-product::before {
  content: "";
  display: block;
  height: 4px;
  margin: calc(var(--sk-sp-20) * -1) calc(var(--sk-sp-20) * -1) var(--sk-sp-16);
  border-radius: var(--sk-r-xl) var(--sk-r-xl) 0 0;
  background: linear-gradient(135deg, var(--sk-card-accent), color-mix(in srgb, var(--sk-card-accent) 55%, #000));
}
/* The cover image.

   Same negative-margin trick as the accent bar above, and for the same reason:
   .sk-product pads 20px, so a child that must reach the card edge has to cancel
   that padding itself. The top margin also cancels the column gap, because the
   bar and the picture are two flex items and the 12px between them would leave
   a stripe of card showing through under the accent.

   aspect-ratio plus width and height in the markup means the grid reserves the
   square before the bytes arrive; without it every card jumps as its image
   lands, which on a 29-card catalogue is a page that will not sit still.

   No border-radius: the accent bar above already carries the rounded top, and
   the card's overflow is visible, so rounding here would show a hairline of
   background between the two. */
.sk-product--covered::before { margin-bottom: 0; }

/* overflow:hidden is load-bearing, not tidiness. The picture is deliberately
   wider than the card's content box so it can reach the border, and this
   stylesheet has no global img rule to clamp it — on 2026-08-25 the first
   version shipped without either and every cover rendered at its intrinsic
   720px, spilling across the neighbouring cards in the grid. */
/* The sample's drifting background rebuilt with fixed CSS values. The sample
   randomized these values in inline styles; fixed nth-child rules preserve the
   motion while keeping the site's style-src policy intact. */
.sk-particles {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sk-particles i {
  position: absolute;
  bottom: -14vh;
  display: block;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--sk-particle-color, var(--sk-raw-color-primary-light)) 55%, transparent), transparent 70%);
  animation: sk-drift var(--p-dur, 26s) linear var(--p-delay, 0s) infinite;
  will-change: transform, opacity;
}
.sk-particles i:nth-child(1) { left: 6%; width: 10px; height: 10px; --p-dur: 24s; --p-delay: -3s; --p-peak: .40; --p-drift: 18px; }
.sk-particles i:nth-child(2) { left: 19%; width: 16px; height: 16px; --p-dur: 33s; --p-delay: -12s; --p-peak: .30; --p-drift: -22px; --sk-particle-color: var(--sk-raw-color-accent); }
.sk-particles i:nth-child(3) { left: 34%; width: 8px; height: 8px; --p-dur: 21s; --p-delay: -19s; --p-peak: .52; --p-drift: 30px; --sk-particle-color: var(--sk-raw-color-success); }
.sk-particles i:nth-child(4) { left: 48%; width: 13px; height: 13px; --p-dur: 40s; --p-delay: -6s; --p-peak: .34; --p-drift: -14px; --sk-particle-color: var(--sk-raw-color-cyan); }
.sk-particles i:nth-child(5) { left: 63%; width: 19px; height: 19px; --p-dur: 29s; --p-delay: -25s; --p-peak: .28; --p-drift: 26px; --sk-particle-color: var(--sk-raw-color-accent); }
.sk-particles i:nth-child(6) { left: 76%; width: 11px; height: 11px; --p-dur: 46s; --p-delay: -15s; --p-peak: .45; --p-drift: -28px; }
.sk-particles i:nth-child(7) { left: 88%; width: 15px; height: 15px; --p-dur: 26s; --p-delay: -9s; --p-peak: .36; --p-drift: 20px; --sk-particle-color: var(--sk-raw-color-success); }
.sk-particles i:nth-child(8) { left: 96%; width: 9px; height: 9px; --p-dur: 36s; --p-delay: -30s; --p-peak: .48; --p-drift: -16px; --sk-particle-color: var(--sk-raw-color-accent); }
@keyframes sk-drift {
  0% { transform: translate3d(0, 0, 0) scale(.7); opacity: 0; }
  12% { opacity: var(--p-peak, .5); }
  88% { opacity: var(--p-peak, .5); }
  100% { transform: translate3d(var(--p-drift, 24px), -118vh, 0) scale(1.15); opacity: 0; }
}
.sk-main,
.sk-footer { position: relative; z-index: 1; }

/* The hero is now one centered promise. The former right-hand product carousel
   and four detached trust cards made visitors decode two different messages
   before learning what the product does. */
.sk-hero__copy {
  width: min(100%, 920px);
  margin-inline: auto;
  text-align: center;
}
.sk-store-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-sp-12);
  flex-wrap: wrap;
  margin-bottom: var(--sk-sp-20);
}
/* --sk-theme-accent does not exist — the contract's themes carry ink_accent,
   not accent — so this fell back to #6366f1, which is 4.47:1 against white and
   fails AA at 11px. Deep indigo is the same decision styles.ts already made for
   the primary button, and it is 8.6:1.

   v2 paints this badge with a 135deg gradient from #6366f1 to #4338ca. Not
   copied: the light end of that gradient is the 4.47:1 colour, so half the pill
   would still fail. Contrast wins over the gradient; if the gradient is ever
   wanted, both stops have to clear 4.5:1 first. */
.sk-store-eyebrow b {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--sk-raw-color-primary-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: var(--sk-typography-letter-spacing-overline);
}
.sk-store-eyebrow > span { font-size: 13px; font-weight: 700; color: var(--sk-theme-text-secondary); }
.sk-hero h1 { max-width: 22ch; margin: 0 auto var(--sk-sp-16); }
.sk-hero__accent { display: block; }
.sk-hero .sk-lede { max-width: 70ch; margin-inline: auto; }
.sk-hero__highlights {
  width: min(100%, 820px);
  margin: var(--sk-sp-24) auto 0;
  text-align: left;
  transition: padding-bottom .18s var(--sk-ease);
}
.sk-hero__highlights:has(.sk-disclosure[open]) { padding-bottom: 150px; }
.sk-hero__highlights .sk-disclosure-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sk-sp-10);
}
.sk-hero__highlights .sk-disclosure {
  /* visible 是必要的:點開後的說明框要能浮出卡片外面。代價是父層的圓角不再
     裁切子元素,而 .sk-disclosure::before 那條 3px 的強調線是從頂到底的直線,
     沒有圓角可裁時,它上下兩端會直挺挺地穿出卡片的圓角。 */
  overflow: visible;
  align-self: start;
}
/* 首頁這四張不畫那條線(創辦人 2026-08-27 裁決)。
   不是為了閃避上面那個裁切問題才拿掉的 —— 這四張卡只有 68px 高,顏色已經由外框、
   底色漸層、左側圖示方塊與右側加號四處表達,再加一條是第五處。拿掉之後辨識度不變,
   而且不會有對不齊的邊。站上其他地方的 disclosure 仍然保留這條線:它們的 overflow
   是 hidden,圓角會把線的頭尾修掉,看起來是服貼的。 */
.sk-hero__highlights .sk-disclosure::before { content: none; }
.sk-hero__highlights .sk-disclosure__summary {
  min-height: 68px;
  padding: var(--sk-sp-10);
  font-size: 13px;
}
.sk-hero__highlights .sk-disclosure__marker { flex-basis: 30px; width: 30px; height: 30px; }
.sk-hero__highlights .sk-disclosure__summary::after { flex-basis: 24px; width: 24px; height: 24px; }
.sk-hero__highlights .sk-disclosure__body {
  position: absolute;
  z-index: 2;
  width: min(340px, calc(100vw - 48px));
  margin: var(--sk-sp-8) 0 0;
  padding: var(--sk-sp-16);
  border: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 44%, var(--sk-theme-border));
  border-radius: var(--sk-r-l);
  background: color-mix(in srgb, var(--sk-disclosure-accent) 7%, var(--sk-theme-surface-elevated));
  box-shadow: 0 22px 46px color-mix(in srgb, var(--sk-disclosure-accent) 16%, transparent);
}
.sk-hero__highlights .sk-disclosure:nth-child(n + 3) .sk-disclosure__body { right: 0; }
.sk-hero__search { width: min(100%, 700px); margin: var(--sk-sp-24) auto 0; }
.sk-hero__search label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--sk-theme-text-secondary); }
.sk-hero__searchbox {
  display: flex;
  gap: var(--sk-sp-8);
  margin-top: var(--sk-sp-8);
  padding: 7px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-strong);
  box-shadow: 0 16px 38px rgba(43, 31, 86, 0.1);
}
.sk-hero__searchbox input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 9px 12px; }
.sk-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-sp-12); margin-top: var(--sk-sp-20); }
.sk-store-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-sp-8); margin-top: var(--sk-sp-24); }
.sk-store-trust span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  color: var(--sk-theme-text-secondary);
}
.sk-store-trust i { margin-inline-end: var(--sk-sp-8); font-style: normal; color: var(--sk-theme-text-muted); }
.sk-store-trust b { font-size: 15px; font-weight: 900; letter-spacing: -0.02em; color: var(--sk-theme-text); }

@media (max-width: 860px) {
  .sk-hero__highlights:has(.sk-disclosure[open]) { padding-bottom: 0; }
  .sk-hero__highlights .sk-disclosure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-hero__highlights .sk-disclosure__body {
    position: static;
    width: auto;
    margin: 0 var(--sk-sp-14);
    padding: var(--sk-sp-12) 0 var(--sk-sp-16) 42px;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 22%, var(--sk-theme-border));
    border-radius: 0;
    box-shadow: none;
  }
}

@media (max-width: 560px) {
  .sk-hero { padding: var(--sk-sp-24) var(--sk-sp-20); }
  .sk-hero__highlights { width: min(100%, 360px); }
  .sk-hero__highlights .sk-disclosure-list { grid-template-columns: 1fr; }
  .sk-hero__highlights .sk-disclosure__summary { justify-content: flex-start; text-align: left; }
  .sk-hero__highlights .sk-disclosure__body { position: static; width: auto; margin: 0 var(--sk-sp-14); padding: var(--sk-sp-12) 0 var(--sk-sp-16) 42px; border: 0; border-top: 1px solid color-mix(in srgb, var(--sk-disclosure-accent) 22%, var(--sk-theme-border)); border-radius: 0; box-shadow: none; }
  .sk-hero__searchbox { flex-direction: column; }
  .sk-hero__searchbox .sk-btn { width: 100%; }
  .sk-hero__actions .sk-btn { width: 100%; }
  .sk-store-trust { flex-wrap: nowrap; gap: 2px; }
  .sk-store-trust span { gap: 2px; font-size: 12px; }
  .sk-store-trust i { margin-inline-end: 3px; }
  .sk-store-trust b { font-size: 14px; }
}

/* Popular certificates end with this field. The free-trial invitation below
   is deliberately a separate section, rather than a second block inside it. */
.sk-discovery {
  display: grid;
  min-width: 0;
  gap: var(--sk-sp-30);
  margin-top: var(--sk-sp-44);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--sk-theme-border);
  border-radius: 32px;
  background:
    radial-gradient(circle at 94% 8%, color-mix(in srgb, var(--sk-raw-color-primary) 13%, transparent), transparent 32%),
    var(--sk-theme-surface-muted);
  box-shadow: 0 26px 74px rgba(43, 31, 86, .09);
}
.sk-discovery > *,
.sk-discovery__popular,
.sk-discovery__popular > * { min-width: 0; max-width: 100%; }
.sk-discovery__popular > .sk-sectionhead { margin-top: 0; }

/* The featured row is four across at full width, not auto-fill: v2 shows the
   four the Owner picked as one line, and auto-fill dropped the fourth onto a
   row of its own where it read as an afterthought. */
.sk-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .sk-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .sk-grid--four { grid-template-columns: 1fr; }
  .sk-grid.sk-featured-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(86vw, 330px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding: 0 var(--sk-sp-16) var(--sk-sp-12);
    margin-inline: calc(var(--sk-sp-16) * -1);
  }
  .sk-featured-grid > li { scroll-snap-align: start; }
}
.sk-product--compact .sk-product__foot { margin-top: var(--sk-sp-16); }
.sk-featured-grid .sk-product--compact .sk-product__cover {
  width: min(72%, 168px);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  margin: var(--sk-sp-12) auto 0;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
}

/* The trial section is a marketing door, not a fake question. One side explains
   why it is useful; the other shows the four things a visitor can actually do. */
.sk-tryone {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--sk-sp-30);
  align-items: center;
  margin-top: var(--sk-sp-44);
  padding: clamp(24px, 4vw, 42px);
  background:
    radial-gradient(circle at 8% 100%, color-mix(in srgb, var(--sk-raw-color-accent) 14%, transparent), transparent 34%),
    var(--sk-theme-surface-strong);
  border: 1px solid var(--sk-theme-border);
  border-radius: 30px;
  box-shadow: 0 20px 58px rgba(43, 31, 86, .09);
}
.sk-tryone__intro h2 { margin: 0 0 var(--sk-sp-8); }
.sk-tryone__subheading {
  margin: 0 0 var(--sk-sp-12);
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-extrabold);
  line-height: 1.5;
  color: var(--sk-theme-text);
}
.sk-tryone__intro .sk-lede { margin-bottom: var(--sk-sp-16); }
.sk-tryone__available {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-sp-8);
  margin: 0 0 var(--sk-sp-18, 18px);
  padding: 8px 12px;
  border: 1px solid var(--sk-semantic-feedback-success-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-semantic-feedback-success-background);
  color: var(--sk-semantic-feedback-success-foreground);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-tryone__actions { display: flex; flex-wrap: wrap; gap: var(--sk-sp-10); margin-bottom: var(--sk-sp-12); }
.sk-tryone__experience,
.sk-tryone__card {
  padding: var(--sk-sp-22);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface);
}
.sk-tryone__features {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-tryone__features li {
  display: grid;
  gap: var(--sk-sp-4);
  padding: var(--sk-sp-16) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-tryone__features li:first-child { padding-top: 0; }
.sk-tryone__features li:last-child { padding-bottom: 0; border-bottom: 0; }
.sk-tryone__features strong { font-size: var(--sk-fs-body); }
.sk-tryone__features span { color: var(--sk-theme-text-secondary); line-height: 1.75; }
.sk-tryone__q { margin: 0 0 var(--sk-sp-14); font-size: 15px; font-weight: var(--sk-typography-weight-extrabold); }
.sk-tryone__opts { display: grid; gap: var(--sk-sp-10); margin: 0 0 var(--sk-sp-12); padding: 0; list-style: none; }
.sk-tryone__opts .sk-disclosure { background: var(--sk-theme-surface-strong); }
.sk-tryone__opts > li { --sk-option-accent: var(--sk-raw-color-primary); }
.sk-tryone__opts > li:nth-child(2) { --sk-option-accent: var(--sk-raw-color-violet); }
.sk-tryone__opts > li:nth-child(3) { --sk-option-accent: var(--sk-raw-color-success); }
.sk-tryone__opts > li:nth-child(4) { --sk-option-accent: var(--sk-raw-color-accent); }
.sk-tryone__opts > li > a,
.sk-tryone__option {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sk-sp-12);
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--sk-option-accent) 30%, var(--sk-theme-border));
  border-radius: var(--sk-r-l);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sk-option-accent) 9%, var(--sk-theme-surface-strong)), var(--sk-theme-surface-strong) 70%);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  transition: transform .18s var(--sk-ease), border-color .18s var(--sk-ease), box-shadow .18s var(--sk-ease);
}
.sk-tryone__opts > li > a:hover {
  transform: translateX(3px);
  border-color: color-mix(in srgb, var(--sk-option-accent) 64%, var(--sk-theme-border));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--sk-option-accent) 12%, transparent);
}
.sk-tryone__option { cursor: default; }
.sk-tryone__opts > li > a > span:first-child,
.sk-tryone__option > span:first-child {
  display: grid;
  place-items: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sk-option-accent) 16%, var(--sk-theme-surface));
  font-weight: var(--sk-typography-weight-black);
  color: var(--sk-theme-text);
}
@media (max-width: 760px) {
  .sk-tryone { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sk-tryone { padding: var(--sk-sp-22) var(--sk-sp-18, 18px); }
  .sk-tryone__actions .sk-btn { width: 100%; }
  .sk-tryone__experience { padding: var(--sk-sp-16); }
}

/* Paired 760px buyer-feedback sheets: artwork 11 on the left and artwork 10 on
   the right. Both keep their square ratio and collapse to one column together. */
.sk-reviews__sheet {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--sk-r-l);
}
.sk-reviews__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-sp-16);
}
.sk-reviews__media { padding: 14px; }
.sk-reviews__trigger {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--sk-raw-color-violet) 26%, var(--sk-theme-border));
  border-radius: var(--sk-r-l);
  cursor: zoom-in;
  background: var(--sk-theme-surface-muted);
  box-shadow: 0 12px 30px rgba(57, 45, 118, .08);
}
.sk-reviews__trigger::after {
  content: "";
  position: absolute;
  inset: -70% -35%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .34) 50%, transparent 58%);
  transform: translateX(-55%);
  transition: transform .48s var(--sk-ease);
}
.sk-reviews__trigger:hover::after { transform: translateX(55%); }
.sk-reviews__trigger img { transition: transform .24s var(--sk-ease), filter .24s var(--sk-ease); }
.sk-reviews__trigger:hover img { transform: scale(1.015); filter: saturate(1.04) contrast(1.02); }
.sk-reviews__trigger:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: 5px; }

html[data-sk-lightbox-open="true"] { overflow: hidden; }
.sk-lightbox {
  width: min(94vw, 920px);
  max-width: none;
  max-height: min(92vh, 920px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--sk-raw-color-violet) 38%, var(--sk-theme-border));
  border-radius: 26px;
  background: color-mix(in srgb, var(--sk-theme-surface-elevated) 96%, transparent);
  color: var(--sk-theme-text);
  box-shadow: 0 36px 100px rgba(17, 24, 39, .36);
}
.sk-lightbox::backdrop {
  background: rgba(10, 12, 28, .76);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.sk-lightbox[open] { animation: sk-lightbox-in .2s var(--sk-ease) both; }
.sk-lightbox__panel { position: relative; display: grid; place-items: center; padding: clamp(12px, 2.5vw, 24px); }
.sk-lightbox__closeform { position: absolute; z-index: 2; inset: var(--sk-sp-10) var(--sk-sp-10) auto auto; margin: 0; }
.sk-lightbox__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 50%;
  background: rgba(15, 23, 42, .86);
  color: #fff;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sk-shadows-card);
}
.sk-lightbox__close:hover { background: var(--sk-raw-color-primary-dark); transform: scale(1.05); }
.sk-lightbox__image {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(92vh - 48px);
  object-fit: contain;
  border-radius: 18px;
}
@keyframes sk-lightbox-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sk-home-faq {
  margin-top: var(--sk-sp-70);
  padding: clamp(24px, 4vw, 42px) 0 0;
  border-top: 1px solid var(--sk-theme-border-strong);
}
.sk-home-faq h2 { margin: 0 0 var(--sk-sp-16); }
.sk-faq-list { margin: 0; }
.sk-faq-list__item { padding: var(--sk-sp-20) 0; border-bottom: 1px solid var(--sk-theme-border); }
.sk-faq-list__item:first-child { border-top: 1px solid var(--sk-theme-border); }
.sk-faq-list dt { margin: 0; font-size: var(--sk-fs-body); line-height: 1.6; }
.sk-faq-list dd {
  margin: var(--sk-sp-8) 0 0;
  max-width: 76ch;
  color: var(--sk-theme-text-secondary);
  line-height: 1.85;
}
.sk-faq-contact { margin: var(--sk-sp-22) 0 0; color: var(--sk-theme-text-secondary); }
.sk-faq-contact a { font-weight: var(--sk-typography-weight-extrabold); text-decoration: none; }
.sk-faq-contact a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .sk-home-faq { margin-top: var(--sk-sp-44); padding-top: var(--sk-sp-30); }
}

/* The hero, as a glass panel rather than bare text on the page background.
   樣稿 v2 wraps it in a 32px rounded card with two soft colour blooms behind it;
   this is that, built from the existing tokens instead of new colours. */
.sk-hero {
  position: relative;
  isolation: isolate;
  /* 44px and 32px, both v2's. The panel was at 32/24 with the site's --sk-r-xl
     (26px), which is the card radius — the hero is the one surface v2 rounds
     more than a card, and at this size the difference is visible. */
  padding: 44px;
  /* surface-strong (.92), not surface (.70): the hero is the one panel v2 makes
     nearly opaque, so the blooms behind it read as glow rather than as content. */
  background: var(--sk-theme-surface-strong);
  border: 1px solid var(--sk-theme-border);
  border-radius: 32px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 28px 90px rgba(38, 28, 84, 0.12);
  overflow: hidden;
}
/* Two blooms, not one, and both at v2's measurements: indigo 420px off the
   top-right, amber 340px off the bottom-left. A single grey circle was standing
   in for them, which is why the panel read as flat — the pair is what gives the
   glass something to refract, and the warm one is the only warm thing on an
   otherwise entirely indigo screen.

   z-index:-1 with pointer-events:none, so neither can take a click from the
   call to action sitting over it. */
.sk-hero::before,
.sk-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.sk-hero::before {
  right: -90px;
  top: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 68%);
  opacity: 0.55;
}
.sk-hero::after {
  left: -70px;
  bottom: -140px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 68%);
  opacity: 0.5;
}
.sk-hero > * { position: relative; }
@media (max-width: 560px) {
  /* This must follow the base hero rule. Keeping it earlier let the later 44px
     desktop padding win on phones, which squeezed a 343px card to 253px of
     usable text. */
  .sk-hero { padding: var(--sk-sp-24) var(--sk-sp-20); }
}

/* Product gallery: one large image with one row of thumbnails, as the sample.
   The sample had six (cover plus five); since 2026-09-25 every product has seven
   (its B-shop cover plus the six shared images), so the row is seven wide rather
   than six with the last one alone on a second row. At the single-column
   breakpoint it becomes four columns: two rows of four and three, not three
   rows with one thumbnail left alone at the bottom. */
.sk-gallery { margin: 0; padding: var(--sk-sp-16); }
.sk-gallery__main-link {
  position: relative;
  display: block;
  border-radius: var(--sk-r-l);
  cursor: zoom-in;
}
.sk-gallery__main-link::after {
  content: "放大 ↗";
  position: absolute;
  right: var(--sk-sp-12);
  bottom: var(--sk-sp-12);
  padding: 7px 11px;
  border-radius: var(--sk-r-pill);
  background: rgba(15, 23, 42, .82);
  color: #fff;
  font-size: 12px;
  font-weight: var(--sk-typography-weight-bold);
  pointer-events: none;
}
.sk-gallery__main-link:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: var(--sk-focus-offset); }
.sk-gallery__main {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--sk-theme-surface-muted);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
}
.sk-gallery__caption {
  margin: var(--sk-sp-10) 0 0;
  color: var(--sk-theme-text-muted);
  font-size: var(--sk-fs-caption);
  line-height: 1.6;
}
.sk-gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sk-sp-8);
  margin-top: var(--sk-sp-12);
}
.sk-gallery__thumbs a {
  position: relative;
  min-width: 0;
  padding: 2px;
  border: 2px solid transparent;
  border-radius: 11px;
  overflow: hidden;
  transition: transform .18s var(--sk-ease), border-color .18s var(--sk-ease), box-shadow .18s var(--sk-ease);
}
.sk-gallery__thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--sk-theme-surface-muted);
  border: 1px solid var(--sk-theme-border);
  border-radius: inherit;
}
.sk-gallery__thumbs a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(67, 56, 202, .14); }
.sk-gallery__thumbs a:hover img { border-color: var(--sk-theme-border-strong); }
.sk-gallery__thumbs a[aria-current="true"] {
  border-color: var(--sk-raw-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sk-raw-color-primary) 22%, transparent), 0 9px 20px rgba(67, 56, 202, .16);
}
.sk-gallery__thumbs a[aria-current="true"]::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--sk-theme-surface);
  border-radius: 50%;
  background: var(--sk-raw-color-primary-dark);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.sk-gallery__thumbs a:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: 2px; }

/* Section kicker, as 樣稿 uses above each product-page heading. */
.sk-kicker {
  display: block;
  margin-top: var(--sk-sp-24);
  margin-bottom: var(--sk-sp-10);
  /* 2026-10-04（小修 F6）：這個 11px 早就被後面（區塊小標那段）的 12.5px 蓋掉，畫面上一直是 12.5。
     值對齊成 12.5px，之後誰動後面那條，這裡不會變成一個讀不到的下限。 */
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-black);
  /* .22em and amber, both from v2. A kicker set in the body's secondary grey at
     .14em reads as small print; the point of the element is that it does not. */
  letter-spacing: var(--sk-typography-letter-spacing-wide);
  color: var(--sk-theme-ink-accent);
}
.sk-card > .sk-kicker:first-child { margin-top: 0; }
.sk-who ul { display: grid; gap: var(--sk-sp-10); margin: var(--sk-sp-16) 0 0; padding: 0; list-style: none; }
.sk-who li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 14px;
  line-height: 1.85;
}
/* 「這份適合你嗎？」（提案_會員網站搜尋與AI曝光第一波 5.3，登記表 #85）：原本「適合誰」那張卡，小標與標題照內容欄的
   置中規則；五個問答照組合包常見問題的寫法靠左——問題粗體、答案在下、細線分隔、不收合。「這份適合我嗎？」那一題的清單
   沿用上面的打勾樣式，其他答案是段落與一排連結。 */
.sk-who .sk-faq-list { margin: var(--sk-sp-16) 0 0; }
.sk-who .sk-faq-list__item { padding: var(--sk-sp-14) 0; border-top: 1px solid var(--sk-theme-border); border-bottom: 0; }
.sk-who .sk-faq-list__item:first-child { border-top: 0; padding-top: 0; }
.sk-who dt { margin: 0; }
.sk-who dd { margin: var(--sk-sp-8) 0 0; max-width: none; font-size: var(--sk-fs-body-sm); line-height: 1.8; }
.sk-who dd > p { margin: 0; overflow-wrap: anywhere; }
.sk-who dd > * + * { margin-top: var(--sk-sp-6); }
.sk-who dd > ul { margin-top: var(--sk-sp-4); }
.sk-who__links { display: flex; flex-wrap: wrap; gap: var(--sk-sp-6) var(--sk-sp-16); }
.sk-who__links a { font-weight: var(--sk-typography-weight-bold); text-decoration: none; }
.sk-who__links a:hover { text-decoration: underline; }
.sk-who li::before { content: "\2713"; flex: none; color: var(--sk-theme-ink-success); font-weight: 900; }

.sk-compare--vs .sk-compare__arrow {
  width: 2.5em;
  text-align: center;
  color: var(--sk-theme-text-secondary);
  border-left: 0;
  border-right: 0;
}
/* The pale pair the contract already carries; green_pale had zero uses site-wide
   until now. Colour is not the only cue — the column headers name each side. */
.sk-compare--vs .sk-compare__bad { background: var(--sk-theme-red-pale); }
.sk-compare--vs .sk-compare__good { background: var(--sk-theme-green-pale); font-weight: 600; }

/* 也可以只開通一科, under the buy box. */
.sk-singles { margin-top: var(--sk-sp-16); padding: 18px; }
.sk-singles ul { margin: var(--sk-sp-8) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sk-sp-8); }
.sk-singles a {
  display: flex;
  justify-content: space-between;
  gap: var(--sk-sp-8);
  padding: 10px 12px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  text-decoration: none;
  color: inherit;
  font-size: var(--sk-fs-body-sm);
}
.sk-singles a:hover { border-color: var(--sk-theme-border-strong); }
.sk-singles a span { color: var(--sk-theme-text-secondary); flex: none; }

/* Header actions sit hard right as one 8px group, matching the sample. */
.sk-header__actions { display: flex; align-items: center; gap: var(--sk-sp-8); flex: none; }
.sk-header__cta { flex: none; }
.sk-nav { margin-left: auto; gap: 3px; }

/* The header mark. 32px is as small as this illustration survives — it is a
   circular badge with two faces and two cats in it, and below about 28px it
   reads as a smudge. Flex-shrink is off so a long page title cannot squeeze it. */
.sk-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: none;
  text-decoration: none;
  color: inherit;
}
.sk-header__logo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 20px rgba(99, 102, 241, 0.24);
}
.sk-header__logo.sk-header__logo--avatar {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  object-fit: contain;
}
/* Two lines, matching 樣稿 v2: the name at 17px/900 and the role beneath it at
   10.5px with wide tracking. The second line is what tells a first-time visitor
   that this is both the shop and the place the notes live — the single word
   「SK互動筆記」 does not. */
.sk-header__names strong {
  display: block;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.25;
}
.sk-header__names small {
  display: block;
  /* 2026-10-04（小修 F6）：10.5px 提到 12px。目前頁首只印站名那一行，這條規則沒有對到任何元素；
     先把下限定好，副標哪天回來才不會又是 10.5px。頁首最小高 68px，兩行（17px 加 12px）放得下。 */
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--sk-theme-text-secondary);
}
@media (min-width: 861px) and (max-width: 1080px) {
  .sk-header { gap: 10px; }
  .sk-header__brand { gap: var(--sk-sp-8); }
  .sk-nav a { padding-inline: 10px; font-size: 13px; }
}
@media (min-width: 861px) and (max-width: 930px) {
  .sk-header__names small { display: none; }
}

/* 我的學習：與樣稿相同的寬版 owned card，權限資料仍由伺服器決定。 */
.sk-library { padding-top: 18px; }
.sk-library__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sk-sp-20);
  flex-wrap: wrap;
  margin-bottom: var(--sk-sp-26, 26px);
}
.sk-library__head .sk-kicker { margin-top: 0; }
.sk-library__title { margin: 0 0 var(--sk-sp-12); font-size: var(--sk-fs-title-fluid); }
.sk-library__head .sk-lede { margin-bottom: 0; }
.sk-library__count { align-self: flex-end; }
.sk-library__empty { padding: var(--sk-sp-44); text-align: center; }
.sk-library__empty p { margin: 0; }
.sk-owned-list { display: grid; gap: var(--sk-sp-16); margin: 0; padding: 0; list-style: none; }
.sk-notebook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sk-notebook-grid .sk-owned-card { height: 100%; }
.sk-notebook-grid .sk-owned-card__body { gap: 12px; }
.sk-notebook-grid .sk-owned-card__body > p { margin: 0; }
.sk-notebook-grid .sk-owned-card__body > .sk-btn { margin-top: auto; }
@media (max-width: 1000px) { .sk-notebook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sk-notebook-grid { grid-template-columns: 1fr; } }
.sk-owned-list__item { min-width: 0; }
.sk-owned-card {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  padding: 0;
}
.sk-owned-card::before { position: absolute; inset: 0 0 auto; z-index: 2; margin: 0; height: 4px; }
.sk-owned-card--no-cover { grid-template-columns: 1fr; }
.sk-owned-card__cover { position: relative; background: var(--sk-theme-surface-muted); border-right: 1px solid var(--sk-theme-border); }
.sk-owned-card__cover img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sk-owned-card__flag { position: absolute; top: var(--sk-sp-12); right: var(--sk-sp-12); z-index: 3; }
.sk-owned-card__body { display: flex; flex-direction: column; gap: 11px; min-width: 0; padding: var(--sk-sp-22) var(--sk-sp-24); }
.sk-owned-card__topics { display: flex; flex-wrap: wrap; gap: 7px; }
.sk-owned-card__body h2 { margin: 0; font-size: 24px; letter-spacing: -0.03em; }
.sk-owned-card__pitch { margin: 0; font-size: 13.5px; line-height: 1.9; color: var(--sk-theme-text-muted); }
.sk-owned-card__meta { display: flex; flex-wrap: wrap; gap: var(--sk-sp-14); font-size: 12.5px; color: var(--sk-theme-text-muted); }
.sk-owned-card__meta b { color: var(--sk-theme-text-secondary); font-weight: var(--sk-typography-weight-extrabold); }
.sk-owned-card__states { display: grid; gap: var(--sk-sp-8); margin: 0; padding: 0; list-style: none; }
.sk-owned-card__states li { min-width: 0; }
.sk-owned-card__states p { margin: var(--sk-sp-6) 0 0; }
.sk-owned-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-sp-14);
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: var(--sk-sp-14);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-owned-card__foot > span { font-size: 12.5px; color: var(--sk-theme-text-muted); }
.sk-owned-card__go { color: var(--sk-theme-link); font-size: 14px; font-weight: var(--sk-typography-weight-extrabold); text-decoration: none; }
.sk-owned-card__go:hover { opacity: 0.7; }
.sk-owned-card__updated {
  margin: var(--sk-sp-6) 0 0;
  color: var(--sk-theme-text);
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-owned-card__progress {
  margin: var(--sk-sp-6) 0 var(--sk-sp-10);
  color: var(--sk-theme-text-muted);
}
.sk-resume {
  display: flex;
  align-items: center;
  gap: var(--sk-sp-14);
  flex-wrap: wrap;
  padding: var(--sk-sp-16);
  margin-bottom: var(--sk-sp-24);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
}
.sk-resume__kicker {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--sk-theme-text-muted);
  flex-basis: 100%;
}
.sk-resume__what {
  margin: 0;
  font-weight: var(--sk-typography-weight-extrabold);
  flex: 1 1 auto;
  min-width: 0;
}
.sk-resume__where { font-weight: 400; color: var(--sk-theme-text-muted); }
.sk-library__more { margin-top: var(--sk-sp-56); padding: 36px; text-align: center; }
.sk-library__more h2 { margin: 0; }
.sk-library__more p { color: var(--sk-theme-text-muted); }
.sk-library__more-actions { display: flex; justify-content: center; gap: var(--sk-sp-10); flex-wrap: wrap; margin-top: var(--sk-sp-14); }

/* The shelf's 「今天」 panel (2026-09-06): one certificate, one action, the daily facts, the sections. */
.sk-today { margin-bottom: var(--sk-sp-24); padding: var(--sk-sp-20); }
.sk-today__head { display: flex; align-items: baseline; gap: var(--sk-sp-12); flex-wrap: wrap; }
.sk-today__name { margin: 0; flex: 1 1 auto; min-width: 0; }
.sk-today__switch { margin-left: auto; }
.sk-today__note { margin: var(--sk-sp-8) 0 0; color: var(--sk-theme-text-secondary); }
.sk-today__primary { margin-top: var(--sk-sp-14); }
.sk-today__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sk-sp-12); margin: var(--sk-sp-20) 0 0; }
.sk-today__facts > div { padding: var(--sk-sp-12); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-m); background: var(--sk-theme-surface-muted); }
.sk-today__facts dt { margin: 0; font-size: var(--sk-fs-caption); color: var(--sk-theme-text-muted); }
.sk-today__facts dd { margin: var(--sk-sp-4) 0 0; }
.sk-today__facts strong { font-size: var(--sk-fs-title-sm); }
.sk-today__sections { display: flex; flex-wrap: wrap; gap: var(--sk-sp-8); margin-top: var(--sk-sp-16); }
.sk-today__sections a { padding: var(--sk-sp-8) var(--sk-sp-12); border: 1px solid var(--sk-theme-border); border-radius: 999px; font-size: var(--sk-fs-body-sm); text-decoration: none; }
.sk-today__others { margin-top: var(--sk-sp-20); padding-top: var(--sk-sp-14); border-top: 1px solid var(--sk-theme-border); }
.sk-today__others h3 { margin: 0 0 var(--sk-sp-8); }
.sk-today__others ul { display: grid; gap: var(--sk-sp-8); margin: 0; padding: 0; list-style: none; }
.sk-today__others li { display: flex; align-items: baseline; gap: var(--sk-sp-8); flex-wrap: wrap; }
.sk-today__other-go { margin-left: auto; }
.sk-library__next { margin-top: var(--sk-sp-24); padding: var(--sk-sp-20); }
.sk-library__next h2 { margin: 0 0 var(--sk-sp-8); }

/* 概念地圖 (2026-09-06): subject → category → topic, each topic linking to its own card. */
.sk-map-subject { margin-top: var(--sk-sp-24); }
.sk-map-subject__name { margin: 0 0 var(--sk-sp-12); font-size: var(--sk-fs-title-sm); }
.sk-map-category { margin-top: var(--sk-sp-16); }
/* 分類導讀(0061):圖示與那一句「這個主題在學什麼」。
   成品的概念地圖靠這一層建立理解順序,網站原本只有名稱與考點數。 */
.sk-map-category__icon { margin-right: var(--sk-sp-8); font-size: 1.1em; line-height: 1; }
.sk-map-category__tagline {
  margin: var(--sk-sp-4) 0 var(--sk-sp-10);
  max-width: var(--sk-reading-max);
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-body-sm);
  line-height: var(--sk-typography-line-height-tight);
}
.sk-map-category__name { margin: 0 0 var(--sk-sp-8); font-size: var(--sk-fs-body); }
.sk-map-category__count { color: var(--sk-theme-text-muted); font-weight: 400; }
.sk-map-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sk-sp-8); margin: 0; padding: 0; list-style: none; }
.sk-map-topic { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sk-sp-8); padding: var(--sk-sp-8) var(--sk-sp-12); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-m); text-decoration: none; }
.sk-map-topic__title { min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; }
.sk-map-topic__meta { color: var(--sk-theme-text-muted); white-space: nowrap; }
.sk-concepts-return { margin: 0 0 var(--sk-sp-16); }
.sk-result-concept { margin-top: var(--sk-sp-12); }

/* 速查表 (2026-09-06): scannable cards, rendered from imported data rather than product markup. */
.sk-course-quickref__empty { margin: var(--sk-sp-24) 0; }
.sk-quickref-subject { margin-top: var(--sk-sp-24); }
.sk-quickref-subject__name { margin: 0 0 var(--sk-sp-12); font-size: var(--sk-fs-title-sm); }
.sk-quickref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sk-sp-16); margin: 0; padding: 0; list-style: none; }
.sk-quickref-card { padding: var(--sk-sp-16); }
.sk-quickref-card__title { margin: 0; font-size: var(--sk-fs-body); }
.sk-quickref-card__desc { margin: var(--sk-sp-6) 0 0; color: var(--sk-theme-text-muted); font-size: var(--sk-fs-body-sm); }
.sk-quickref-card__rows { display: grid; gap: var(--sk-sp-8); margin: var(--sk-sp-12) 0 0; }
.sk-quickref-row { display: grid; grid-template-columns: minmax(84px, 30%) 1fr; gap: var(--sk-sp-8); align-items: start; }
.sk-quickref-row dt { margin: 0; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text-secondary); font-size: var(--sk-fs-body-sm); min-width: 0; }
.sk-quickref-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; font-size: var(--sk-fs-body-sm); }
.sk-quickref-row__lines { margin: 0; padding-left: var(--sk-sp-16); }
.sk-quickref-table { width: 100%; border-collapse: collapse; font-size: var(--sk-fs-body-sm); }
.sk-quickref-table th, .sk-quickref-table td { padding: var(--sk-sp-6) var(--sk-sp-8); border-bottom: 1px solid var(--sk-theme-border); text-align: left; vertical-align: top; }
.sk-course-quickref__foot { margin-top: var(--sk-sp-20); }
@media (max-width: 480px) {
  .sk-quickref-row { grid-template-columns: 1fr; gap: var(--sk-sp-4); }
}

/* The trial page (2026-09-06): the concept card first, then the question, then the way to the product. */
/* The trial page's own header went away on 2026-09-07: its title and scope line
   moved into .sk-coursebar, where the .sk-course--trial rules further down were
   already waiting for them. (No backticks in this file -- the whole stylesheet is
   one template literal, and a backtick in a comment ends it.) */
.sk-trial__question { margin-top: var(--sk-sp-24); }
.sk-trial__notice { color: var(--sk-theme-text-secondary); }
.sk-trial__product { margin-top: var(--sk-sp-24); padding: var(--sk-sp-20); }

/* Breadcrumb, product-page stat row, comparison table and related list. */
.sk-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-8);
  margin: 0 0 var(--sk-sp-16);
  padding: 0;
  list-style: none;
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-secondary);
}
/* The separator is generated rather than typed into the markup, so it is never
   read aloud between every pair of links.
   2026-09-30：分隔符號從「/」改成「›」。分類標籤照總表原字、本身就帶「/」（銀行/信託/授信/外匯），
   層級之間再用「/」就分不出哪一條是層級。後台的麵包屑（AdminBreadcrumb）本來就用「›」，兩邊一致。 */
.sk-crumbs li + li::before { content: "›"; margin-right: var(--sk-sp-8); opacity: 0.5; }
.sk-crumbs [aria-current="page"] { color: var(--sk-theme-text); font-weight: 600; }

.sk-pdpstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sk-sp-10);
  margin: var(--sk-sp-16) 0;
  padding: var(--sk-sp-14);
  list-style: none;
  text-align: center;
  background: var(--sk-theme-heat-bg);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
}
/* One tinted box with three cells, not three bordered white cards: v2's
   .buy-stats. Three cards next to the buy box read as three more things to
   decide about. */
.sk-pdpstats li { min-width: 0; padding: var(--sk-sp-6) var(--sk-sp-4); overflow-wrap: anywhere; }
.sk-pdpstats strong { display: block; font-size: 19px; line-height: 1.3; }
/* 2026-10-04（小修 F6）：統計小標（題、科目、年度）11px 提到 13px。390px 手機三格各約 91px 寬，
   標籤都是一到三個字，量過 320 到 1280 沒有換行擠壞也沒有橫向溢出。 */
.sk-pdpstats span { font-size: 13px; color: var(--sk-theme-text-muted); }

/* The table scrolls inside its own box. A two-column comparison is the width
   that breaks a phone layout first, and a page that scrolls sideways as a whole
   is a page whose every other element is now off-centre. */
.sk-compare__scroll { overflow-x: auto; margin: var(--sk-sp-16) 0; }
.sk-compare { width: 100%; border-collapse: collapse; }
.sk-compare th,
.sk-compare td {
  padding: var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border);
  text-align: left;
  vertical-align: top;
}
.sk-compare thead th { background: var(--sk-theme-surface); font-size: var(--sk-fs-body-sm); }
.sk-compare td:first-child { color: var(--sk-theme-text-secondary); }

/* Section head: kicker over heading, as v2 puts above every section below the
   hero. The h2 loses its own top margin here because the kicker already
   supplies the gap. */
.sk-sectionhead { margin-top: var(--sk-sp-56); }
.sk-sectionhead .sk-kicker { margin-top: 0; }
.sk-sectionhead h2 { margin-top: 0; }

/* The three-step explanation is a plain, always-visible sequence. */
.sk-steps {
  margin-top: var(--sk-sp-56);
  padding: clamp(22px, 3.5vw, 36px);
  border: 1px solid var(--sk-theme-border);
  border-radius: 30px;
  background: var(--sk-theme-surface-strong);
}
.sk-steps > .sk-sectionhead { margin-top: 0; }
.sk-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sk-sp-16);
  margin: var(--sk-sp-20) 0 0;
  padding: 0;
  list-style: none;
}
.sk-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sk-sp-12);
  align-items: start;
  min-width: 0;
  padding: var(--sk-sp-8) 0;
}
.sk-steps__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-pill-bg);
  color: var(--sk-theme-ink-info);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-black);
}
.sk-steps__item h3 {
  margin: 0 0 var(--sk-sp-6);
  font-size: 17px;
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-steps__item p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sk-theme-text-secondary);
}
@media (max-width: 860px) {
  .sk-steps__list { grid-template-columns: 1fr; }
  .sk-steps__item + .sk-steps__item {
    padding-top: var(--sk-sp-18, 18px);
    border-top: 1px solid var(--sk-theme-border);
  }
}
@media (max-width: 560px) {
  .sk-steps { padding: var(--sk-sp-22) var(--sk-sp-18, 18px); }
}

@media (max-width: 760px) {
  .sk-reviews__grid { grid-template-columns: 1fr; }
}

/* The visible circle is the sample's 38px; the transparent pseudo-element keeps
   a 44px pointer target without changing the row geometry. */
.sk-theme__toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.16s var(--sk-ease), color 0.16s var(--sk-ease);
}
.sk-theme__toggle::before { content: ""; position: absolute; inset: -3px; }
.sk-theme__icon {
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  transition: transform .22s var(--sk-ease);
}
.sk-theme__toggle[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--sk-raw-color-accent) 60%, var(--sk-theme-border));
  background: color-mix(in srgb, var(--sk-raw-color-accent) 13%, var(--sk-theme-surface-muted));
  color: var(--sk-theme-ink-accent);
}
.sk-theme__toggle:hover { border-color: var(--sk-raw-color-primary); color: var(--sk-theme-text); transform: none; box-shadow: 0 8px 18px rgba(67, 56, 202, .14); }
.sk-theme__toggle:hover .sk-theme__icon { transform: rotate(16deg) scale(1.08); }
.sk-theme fieldset { border: 0; padding: 0; margin: 0; }

.sk-product--covered { overflow: hidden; }
.sk-product__cover {
  display: block;
  width: calc(100% + var(--sk-sp-20) * 2);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: calc(var(--sk-sp-12) * -1) calc(var(--sk-sp-20) * -1) 0;
  background: var(--sk-theme-surface);
}
/* Absolute, over the cover's top-right corner. It used to be a block above the
   image, which pushed the picture down and left a white band between the accent
   bar and the cover — and made .sk-product--covered::before's assumption (that
   the bar is immediately followed by the cover) false. */
.sk-product--covered { position: relative; }
.sk-product__flag { margin: 0; }
.sk-product--covered .sk-product__flag { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sk-product--owned { border-color: var(--sk-semantic-entitlement-permanent-border); }
/* A card with no action must not read as clickable. */
.sk-product:not(:has(a)):hover { transform: none; box-shadow: none; cursor: default; }

/* ==========================================================================
   8. Price
   --------------------------------------------------------------------------
   The original price is <s> with a visually-hidden label, so a screen reader
   says 「原價 599 元」 rather than reading two bare numbers in a row and leaving
   the listener to guess which one they pay.
   ========================================================================== */
.sk-price { display: flex; align-items: baseline; gap: var(--sk-sp-8); flex-wrap: wrap; }
.sk-price__now {
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  color: var(--sk-semantic-commerce-price);
  letter-spacing: -0.02em;
}
.sk-price--lg .sk-price__now { font-size: var(--sk-fs-display-fluid); }
/* 只在真的降過價之後才會出現：確實被收過、現已退場的舊價（裁決 #41）。
   刻意比現價小、灰、不加粗——它是背景資訊，不是這張卡要人讀的數字。 */
.sk-price__was {
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-muted);
  text-decoration-thickness: 1px;
}

.sk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   8b. Product detail
   ========================================================================== */
.sk-backlink {
  display: inline-block;
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-muted);
  text-decoration: none;
}
.sk-backlink:hover { color: var(--sk-theme-link); }

.sk-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: var(--sk-sp-24);
  align-items: start;
}
.sk-pdp__main { min-width: 0; display: grid; gap: 18px; }
.sk-pdp__main > * { margin-top: 0; margin-bottom: 0; }

/* The contract carries this offset (raw.layout_px.sticky_offset); it was 88px
   written out here, which is neither the header height nor the contract value. */
.sk-buybox { position: sticky; top: var(--sk-sticky-top); display: grid; gap: var(--sk-sp-14); }
.sk-buybox__card h1 { margin: 0 0 var(--sk-sp-10); font-size: 28px; }
.sk-buybox__tags { display: flex; flex-wrap: wrap; gap: var(--sk-sp-8); margin-bottom: var(--sk-sp-12); }
.sk-buybox__pitch { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--sk-theme-text-secondary); }
.sk-buybox .sk-btn { width: 100%; }
.sk-buybox h2 { margin-top: var(--sk-sp-20); font-size: var(--sk-fs-body); }
.sk-buybox__note { font-size: var(--sk-fs-caption); margin-top: var(--sk-sp-8); }
.sk-buybox__fine { margin-top: var(--sk-sp-16); font-size: var(--sk-fs-caption); }

.sk-speclist {
  display: block;
  margin: var(--sk-sp-24) 0;
  padding: 0 var(--sk-sp-20);
  background: var(--sk-theme-surface-muted);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
}
.sk-speclist > div {
  display: grid;
  grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
  gap: var(--sk-sp-16);
  padding: 11px var(--sk-sp-4);
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-speclist > div:last-child { border-bottom: 0; }
.sk-speclist dt {
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-muted);
  margin: 0;
  font-weight: var(--sk-typography-weight-bold);
}
.sk-speclist dd { margin: 0; font-weight: var(--sk-typography-weight-medium); overflow-wrap: anywhere; }

.sk-pdp-brand__head { display: flex; align-items: center; gap: var(--sk-sp-12); margin-bottom: var(--sk-sp-14); }
.sk-pdp-brand__head img { border-radius: 14px; border: 1px solid var(--sk-theme-border-strong); }
.sk-pdp-brand__head strong { display: block; font-size: 15px; line-height: 1.3; }
.sk-pdp-brand__head small { color: var(--sk-theme-text-muted); font-size: var(--sk-fs-caption); }
.sk-pdp-brand p, .sk-pdp-note p { margin-bottom: 0; }
.sk-pdp-brand p + p { margin-top: var(--sk-sp-10); }
.sk-pdp-spec .sk-speclist { margin-bottom: 0; }
.sk-pdp-related-full { margin-top: var(--sk-sp-56); }
.sk-pdp-related-full .sk-sectionhead { margin-top: 0; }
.sk-pdp-proof { display: grid; gap: var(--sk-sp-10); }
.sk-pdp-proof > strong { font-size: var(--sk-fs-title-sm); }
.sk-pdp-proof > p,
.sk-pdp-proof > small { margin: 0; }
.sk-pdp-proof > small { color: var(--sk-theme-text-muted); line-height: 1.6; }
.sk-pdp-proof > a { display: block; border-radius: var(--sk-r-l); cursor: zoom-in; }
.sk-pdp-proof > a:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: var(--sk-focus-offset); }
.sk-pdp-proof > a img { display: block; width: 100%; height: auto; border-radius: var(--sk-r-l); }
.sk-pdp-preview-status { margin-top: var(--sk-sp-18, 18px); }
.sk-pdp-preview-status > .sk-btn { margin: 0; }
.sk-pdp-preview-status > p { margin: var(--sk-sp-8) 0 0; }
.sk-pdp-preview .sk-lede { margin-bottom: var(--sk-sp-16); }
.sk-pdp-preview .sk-tryone__card { margin-top: 0; }
.sk-pdp-features .sk-lede { margin: 0 0 var(--sk-sp-18, 18px); font-size: 15px; }
.sk-pdp-features .sk-disclosure-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.sk-pdp-features .sk-disclosure { background: var(--sk-theme-surface-strong); }
.sk-pdp-spec .sk-disclosure-list,
.sk-pdp-faq .sk-disclosure-list { margin-top: var(--sk-sp-16); }
.sk-pdp-spec .sk-disclosure__body { padding-inline: var(--sk-sp-10); }
.sk-pdp-spec .sk-speclist { margin: 0; }
.sk-pdp-faq .sk-disclosure__action { margin-top: var(--sk-sp-10); }
@media (max-width: 620px) {
  .sk-pdp-features .sk-disclosure-list { grid-template-columns: 1fr; }
}
.sk-pdp-access { display: grid; gap: var(--sk-sp-10); margin: var(--sk-sp-18, 18px) 0 0; padding: 0; list-style: none; }
.sk-pdp-access li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sk-sp-12);
  align-items: start;
  padding: var(--sk-sp-12) 0;
}
.sk-pdp-access li > b {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-ink-info);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-black);
}
.sk-pdp-access strong { display: block; font-size: 14.5px; }
.sk-pdp-access p { margin: var(--sk-sp-4) 0 0; color: var(--sk-theme-text-secondary); font-size: 13px; line-height: 1.85; }
.sk-pdp-access__notice { margin-top: var(--sk-sp-18, 18px); padding-top: var(--sk-sp-16); border-top: 1px solid var(--sk-theme-border); }
.sk-pdp-access__notice > strong { font-size: 14px; }
.sk-pdp-access__notice ul { display: grid; gap: var(--sk-sp-6); margin: var(--sk-sp-10) 0 0; padding-inline-start: var(--sk-sp-18, 18px); }

/* Account history and orders use the same narrow, card-led rhythm as redeem. */
.sk-account-page { width: min(100%, 720px); margin-inline: auto; }
.sk-account-page > .sk-sectionhead .sk-kicker { margin-top: 0; }
.sk-account-records { display: grid; gap: var(--sk-sp-12); margin: 0; padding: 0; list-style: none; }
.sk-account-record { padding: var(--sk-sp-18, 18px); }
.sk-account-record__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sk-sp-12); }
.sk-account-record__head h2 { margin: 0; font-size: var(--sk-fs-title-sm); }
.sk-account-record__label { margin: 0 0 var(--sk-sp-4); color: var(--sk-theme-text-muted); font-size: var(--sk-fs-caption); }
.sk-account-record__meta { display: flex; justify-content: space-between; gap: var(--sk-sp-12); margin: var(--sk-sp-14) 0 0; padding-top: var(--sk-sp-12); border-top: 1px solid var(--sk-theme-border); color: var(--sk-theme-text-muted); font-size: var(--sk-fs-caption); }
.sk-account-record__go { display: inline-block; margin-top: var(--sk-sp-14); font-size: var(--sk-fs-body-sm); font-weight: var(--sk-typography-weight-extrabold); text-decoration: none; }
.sk-account-empty { padding: var(--sk-sp-32, 32px); text-align: center; }
.sk-account-empty h1, .sk-account-empty h2 { margin-top: 0; }
.sk-account-empty .sk-actions { justify-content: center; }
.sk-account-page__back { margin-top: var(--sk-sp-20); font-size: var(--sk-fs-body-sm); }
.sk-account-page__subheading { margin: var(--sk-sp-24) 0 var(--sk-sp-12); font-size: var(--sk-fs-title-sm); }
/* 這裡原本以 var() 指定 --sk-typography-font-family-numeric,但那個自訂屬性
   從未被定義(tokens 只有 family_sans),所以該宣告一直被整條丟棄、從未生效。
   已於 2026-08-27 刪除以消除靜默失效;若要讓數字真的換一套字體,需先在
   contracts/design-tokens.json 新增一組數字字體,那是設計決策不是修 bug。
   注意 .sk-order-id 同時掛在 <h2> 與 <code> 上,兩者現行字體不同。 */
.sk-order-id { overflow-wrap: anywhere; letter-spacing: 0; }
.sk-order-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-sp-12); padding: var(--sk-sp-18, 18px); }
.sk-order-summary > span { color: var(--sk-theme-text-muted); font-size: var(--sk-fs-caption); }
.sk-order-items { display: grid; gap: var(--sk-sp-10); margin: 0; padding: 0; list-style: none; }
.sk-order-items li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sk-sp-12); padding: var(--sk-sp-16) var(--sk-sp-18, 18px); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-l); background: var(--sk-theme-surface-muted); }
.sk-order-items strong { min-width: 0; overflow-wrap: anywhere; }
/* 官網退款七天自動退(登記表 #48):每一項下面的「申請退款」與期限自成一行。
   擠在名稱與狀態旁邊時,窄版的商品名稱被壓成一行兩個字(2026-09-24 截圖)。 */
.sk-order-refund { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-10) var(--sk-sp-12); margin: 0; }
/* 客人自己取消(提案_客人流程A批緊急修正 A2-1):狀態那一格下面的取消區與「已取消」通知。
   不加間距時三張卡片只隔 3px,在手機上像黏成一塊(2026-09-24 截圖)。 */
.sk-order-cancel, .sk-order-continue, .sk-order-notice { margin-top: var(--sk-sp-12); }
.sk-order-cancel > p:first-child, .sk-order-continue > p:first-child { margin-top: 0; }
.sk-order-continue > form + p { margin-bottom: 0; }
.sk-order-cancel .sk-order-refund { margin-top: var(--sk-sp-10); }
.sk-account-links { margin-top: var(--sk-sp-24); }
.sk-account-links h2 { margin-top: 0; }
.sk-account-links ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-10); margin: var(--sk-sp-14) 0 0; padding: 0; list-style: none; }
.sk-account-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--sk-sp-10); padding: var(--sk-sp-12) var(--sk-sp-14); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-l); background: var(--sk-theme-surface-muted); color: inherit; font-weight: var(--sk-typography-weight-semibold); text-decoration: none; }
.sk-account-links a:hover { border-color: var(--sk-theme-border-strong); color: var(--sk-theme-link); }

/* Public preview hub and the answer-safe native question renderer. */
.sk-preview-hub { display: grid; gap: var(--sk-sp-32, 32px); }
.sk-preview-hub__hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  overflow: hidden;
  padding: clamp(28px, 5vw, 58px);
}
.sk-preview-hub__hero::after { display: block; }
.sk-preview-hub__hero::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  margin: 0;
}
.sk-preview-hub__hero > * { position: relative; }
.sk-preview-hub__hero .sk-kicker { margin-top: 0; }
.sk-preview-hub__hero h1 { max-width: 12ch; margin: var(--sk-sp-10) 0; font-size: var(--sk-fs-display); }
.sk-preview-hub__hero .sk-lede { max-width: 60ch; }
.sk-preview-hub__hero-copy { min-width: 0; }
.sk-preview-hub__promise {
  width: fit-content;
  margin: var(--sk-sp-16) 0 0;
  padding: var(--sk-sp-10) var(--sk-sp-14);
  border: 1px solid var(--sk-semantic-feedback-success-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-semantic-feedback-success-background);
  color: var(--sk-theme-ink-success);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-preview-hub__hero .sk-actions { margin-top: var(--sk-sp-24); }
.sk-preview-hub__feature {
  display: grid;
  grid-template-columns: minmax(160px, 0.82fr) minmax(0, 1.18fr);
  gap: var(--sk-sp-18, 18px);
  align-items: center;
  min-width: 0;
  padding: var(--sk-sp-14);
  border: 1px solid color-mix(in srgb, var(--sk-raw-color-success) 38%, var(--sk-theme-border));
  border-radius: var(--sk-r-xl);
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--sk-raw-color-success) 14%, transparent), transparent 46%),
    color-mix(in srgb, var(--sk-theme-surface-strong) 94%, transparent);
  box-shadow: 0 20px 52px color-mix(in srgb, var(--sk-raw-color-success) 12%, transparent);
}
.sk-preview-hub__feature > img { display: block; width: 100%; height: auto; border-radius: var(--sk-r-l); }
.sk-preview-hub__feature-copy { min-width: 0; }
.sk-preview-hub__feature h2 { margin: var(--sk-sp-6) 0 var(--sk-sp-8); font-size: var(--sk-fs-title-sm); }
.sk-preview-hub__feature p { margin: 0; color: var(--sk-theme-text-secondary); font-size: var(--sk-fs-caption); line-height: 1.65; }
.sk-preview-hub__feature .sk-btn { width: 100%; margin-top: var(--sk-sp-14); }
.sk-preview-hub__feature--pending {
  display: block;
  padding: var(--sk-sp-28, 28px);
  border-color: var(--sk-theme-border);
  background: var(--sk-theme-surface-muted);
  box-shadow: var(--sk-shadows-card);
}
.sk-preview-hub__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-sp-8);
  margin: var(--sk-sp-14) 0 0;
}
.sk-preview-hub__stats > div {
  min-width: 0;
  padding: var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-muted);
  text-align: center;
}
.sk-preview-hub__stats dt { color: var(--sk-theme-text-muted); font-size: 12px; }
.sk-preview-hub__stats dd { margin: var(--sk-sp-4) 0 0; font-size: 17px; font-weight: var(--sk-typography-weight-black); }
.sk-preview-hub__catalog > .sk-sectionhead { margin-top: var(--sk-sp-12); }
.sk-preview-hub__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sk-sp-18, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-preview-hub__grid > li { min-width: 0; }
.sk-product--preview { transition: transform .18s var(--sk-ease), border-color .18s var(--sk-ease), box-shadow .18s var(--sk-ease), filter .18s var(--sk-ease); }
.sk-product--preview .sk-product__cover { object-fit: contain; background: var(--sk-theme-surface-muted); }
.sk-product--preview-open {
  border-color: color-mix(in srgb, var(--sk-raw-color-success) 42%, var(--sk-theme-border));
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--sk-raw-color-success) 12%, transparent), transparent 36%),
    var(--sk-theme-surface);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--sk-raw-color-success) 13%, transparent);
}
.sk-product--preview-open:hover { border-color: var(--sk-raw-color-success); transform: translateY(-4px); }
.sk-product--preview-pending { background: color-mix(in srgb, var(--sk-theme-surface-muted) 88%, transparent); }
.sk-product--preview-pending .sk-product__cover { filter: saturate(.72); opacity: .86; }
.sk-product--preview-pending:hover { transform: translateY(-1px); box-shadow: var(--sk-shadows-card); }
.sk-preview-hub__product-actions { display: flex; flex-wrap: wrap; gap: var(--sk-sp-8); margin-top: auto; padding-top: var(--sk-sp-18, 18px); }
.sk-preview-hub__product-actions .sk-btn { position: relative; z-index: 1; flex: 1 1 120px; }
.sk-preview-hub__empty { padding: var(--sk-sp-28, 28px); color: var(--sk-theme-text-secondary); text-align: center; }

@media (max-width: 900px) {
  .sk-preview-hub__hero { grid-template-columns: minmax(0, 1fr); }
  .sk-preview-hub__feature { max-width: 620px; }
  .sk-preview-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1080px) and (min-width: 901px) {
  .sk-preview-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .sk-preview-hub { gap: var(--sk-sp-22); }
  .sk-preview-hub__hero { padding: var(--sk-sp-24) var(--sk-sp-18, 18px); }
  .sk-preview-hub__hero h1 { font-size: var(--sk-fs-title-fluid); }
  .sk-preview-hub__promise { border-radius: var(--sk-r-l); }
  .sk-preview-hub__feature { grid-template-columns: minmax(0, 1fr); }
  .sk-preview-hub__feature > img { width: min(100%, 300px); margin-inline: auto; }
  .sk-preview-hub__grid { grid-template-columns: minmax(0, 1fr); }
  .sk-speclist { padding-inline: var(--sk-sp-14); }
  .sk-speclist > div { grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: var(--sk-sp-10); }
}

/* ==========================================================================
   9. Badges
   ========================================================================== */
.sk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-sp-4);
  padding: var(--sk-sp-4) 11px;
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
  background: var(--sk-semantic-selection-background);
  border: 1px solid var(--sk-theme-border);
  color: var(--sk-theme-text-secondary);
  white-space: nowrap;
}
.sk-badge--owned {
  background: var(--sk-semantic-feedback-success-background);
  border-color: var(--sk-semantic-feedback-success-border);
  color: var(--sk-semantic-feedback-success-foreground);
}
.sk-badge--ok {
  background: var(--sk-semantic-feedback-success-background);
  border-color: var(--sk-semantic-feedback-success-border);
  color: var(--sk-semantic-feedback-success-foreground);
}
.sk-badge--accent {
  background: var(--sk-theme-heat-bg);
  border-color: color-mix(in srgb, var(--sk-raw-color-accent) 34%, var(--sk-theme-border));
  color: var(--sk-theme-ink-accent);
}
.sk-badge--hot {
  background: #92400e;
  border-color: transparent;
  color: #ffffff;
}
.sk-badge--soon {
  background: var(--sk-semantic-feedback-info-background);
  border-color: var(--sk-semantic-feedback-info-border);
  color: var(--sk-semantic-feedback-info-foreground);
}
.sk-badge--shopee {
  background: var(--sk-semantic-feedback-warning-background);
  border-color: var(--sk-semantic-feedback-warning-border);
  color: var(--sk-semantic-feedback-warning-foreground);
}
/* The four states a member's entitlement can be shut in. The token contract has
   carried 'semantic.entitlement.*' for all of them and nothing called them, so
   every shut state has been rendering as the same neutral badge. */
.sk-badge--frozen {
  background: var(--sk-semantic-entitlement-frozen-background);
  border-color: var(--sk-semantic-entitlement-frozen-border);
  color: var(--sk-semantic-entitlement-frozen-foreground);
}
.sk-badge--revoked {
  background: var(--sk-semantic-entitlement-revoked-background);
  border-color: var(--sk-semantic-entitlement-revoked-border);
  color: var(--sk-semantic-entitlement-revoked-foreground);
}
.sk-badge--expired {
  background: var(--sk-semantic-entitlement-expired-background);
  border-color: var(--sk-semantic-entitlement-expired-border);
  color: var(--sk-semantic-entitlement-expired-foreground);
}
.sk-badge--legal {
  background: var(--sk-semantic-entitlement-legal-hold-background);
  border-color: var(--sk-semantic-entitlement-legal-hold-border);
  color: var(--sk-semantic-entitlement-legal-hold-foreground);
}
/* Listed, but not for sale on any channel. 'commerce.unavailable' exists for
   exactly this and had no call site. */
.sk-badge--paused {
  background: var(--sk-theme-surface-muted);
  border-color: var(--sk-theme-border-strong);
  color: var(--sk-semantic-commerce-unavailable);
}

/* ==========================================================================
   10. Buttons and forms
   ========================================================================== */
button,
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sk-sp-8);
  /* 12/22, 15px, semibold and a translucent surface — all four are 樣稿 v2's,
     and all four were a step off. The one that shows most is the surface: an
     opaque white button on a page whose panels are all rgba(255,255,255,.70)
     is the only opaque thing on the screen, so it reads as pasted on. */
  padding: var(--sk-sp-12) var(--sk-sp-22);
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-strong);
  color: var(--sk-theme-text);
  font: inherit;
  font-size: 15px;
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1.4;
  /* Without this a two-character button breaks between the characters when the
     row is tight, turning 外觀 into a vertical stack and doubling the header. */
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.14s var(--sk-ease), box-shadow 0.14s var(--sk-ease), background-color 0.14s var(--sk-ease);
}
button:hover, .sk-btn:hover { border-color: var(--sk-raw-color-primary); transform: translateY(-1px); }
button:active, .sk-btn:active { transform: translateY(1px); }
button:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.sk-btn--primary,
button.sk-btn--primary {
  border-color: transparent;
  /* The gradient and both shadows are contract values now. They used to be
     written out here as rgba(99,102,241,0.28) and 0.4, against the
     contract's .30 and .45 — a drift of exactly the kind visual regression
     cannot catch, because the baseline was captured from the drifted code. */
  background-image: var(--sk-semantic-gradients-primary-cta);
  color: #ffffff;
  /* extrabold, not bold. On the indigo gradient at 15px, 700 is the weight that
     makes the main call to action read as lighter than the plain button beside
     it — which is exactly backwards. 樣稿 v2 sets 800. */
  font-weight: var(--sk-typography-weight-extrabold);
  box-shadow: var(--sk-shadows-button);
}
.sk-btn--primary:hover { box-shadow: var(--sk-shadows-button-hover); }
.sk-btn--lg { padding: 15px var(--sk-sp-30); font-size: var(--sk-fs-body); }
.sk-btn--block { display: flex; width: 100%; }
.sk-btn--quiet { background: transparent; border-color: var(--sk-theme-border); }

label { display: block; font-size: var(--sk-fs-body-sm); font-weight: var(--sk-typography-weight-semibold); margin-bottom: 7px; }

/*
 * 2026-09-23：包住欄位的標籤，文字要自己一行。
 *
 * 站上有兩種寫法：<label for>文字</label><input>（標籤是 block，欄位自然換行）
 * 與 <label><span>文字</span><input></label>。第二種在後台有四處，span 是
 * inline，於是欄位緊貼在文字右邊、中間沒有任何間距，看起來像疊在一起——客戶檢視
 * 的「客戶 Email」與管理者名單的「原因」都是這樣。
 *
 * :has 限定「真的包著欄位的標籤」，所以只有 for= 、把選項排成一列的那種標籤
 * （學習區的選項按鈕）不受影響。
 */
label:has(> input, > select, > textarea) > span { display: block; margin-bottom: 7px; }

input[type="text"], input[type="email"], input[type="search"], input[type="password"],
input[type="number"], input[type="url"], input[type="tel"], select, textarea {
  width: 100%;
  max-width: 32rem;
  padding: var(--sk-sp-12) var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-strong);
  color: var(--sk-theme-text);
  font: inherit;
  transition: border-color 0.14s var(--sk-ease), box-shadow 0.14s var(--sk-ease);
}
input:focus, select:focus, textarea:focus { outline: none; }
/* The glow is the decoration; the outline is the indicator.

   This rule used to end in outline: none, leaving box-shadow as the only
   focus indicator on every text field on the site. Windows high-contrast mode
   (forced-colors) discards box-shadow outright, so a keyboard user in that mode
   had no visible focus at all — while :focus-visible above was already doing
   the right thing for everything else. §3.4 requires focus to pass contrast
   verification, and a shadow that the OS removes cannot. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--sk-raw-color-primary);
  box-shadow: var(--sk-ring);
  outline: 2px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
}
input::placeholder, textarea::placeholder { color: var(--sk-theme-text-muted); }

fieldset {
  margin: 0 0 var(--sk-sp-20);
  padding: var(--sk-sp-20);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
}
legend { padding: 0 var(--sk-sp-8); font-weight: var(--sk-typography-weight-bold); font-size: var(--sk-fs-body-sm); }

input[type="checkbox"], input[type="radio"] {
  width: 1.05em;
  height: 1.05em;
  margin-inline-end: var(--sk-sp-8);
  accent-color: var(--sk-raw-color-primary);
  vertical-align: -0.15em;
}
input[type="checkbox"] + label, input[type="radio"] + label { display: inline; font-weight: var(--sk-typography-weight-regular); }

form > * + * { margin-top: var(--sk-sp-16); }

/* ==========================================================================
   11. Tables
   ========================================================================== */
/*
 * 2026-09-23：橫向捲動本來是擺設。
 *
 * overflow-x: auto 一直都在，但 table 的 width: 100% 讓表格永遠剛好等於
 * 外框寬度，所以捲軸永遠不出現，欄位改用「擠」的：後台「決策」欄只剩 77px、
 * 「生效起」只剩 122px，於是 2026年9月22日 22:59 被折成兩行、未決定被折成
 * 未決／定。手機更誇張，對帳頁的「重複付款，待補救」變成一個字一行。
 * 把瀏覽器拉寬沒有用——版面本身封頂在 1200px。
 *
 * max-content 讓表格取自己需要的寬度（窄表格仍靠 min-width 填滿外框），
 * 這時 overflow-x 才真的接手。儲存格再用 max-width 封頂，免得單一長文欄位
 * （詳解回報的題幹、決策的理由）把整張表拉成一條線。
 */
.sk-tablewrap { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.sk-tablewrap > table { width: max-content; min-width: 100%; }
.sk-tablewrap > table :is(th, td) { max-width: 44ch; }

/* 2026-10-04（小修 A2）：寬表格可以左右捲，但手機上沒有任何提示。
   純 CSS：沒有 JavaScript、沒有 inline style（CSP 是 default-src none）。上面三條規則一條都沒動。

   做法：外框改成一格的 grid，table 和一個 ::after 疊在同一格（量過：外框與表格的寬高跟改之前
   一模一樣，窄表格仍然填滿外框）。::after 是 24px 寬的漸層，position: sticky; right: 0，所以不管
   捲到哪裡都貼在外框可見區的右緣，pointer-events: none 不擋點擊。

   只有表格真的寬過外框才看得到：支援捲動驅動動畫的瀏覽器，透明度跟著捲動位置走——從最左到
   離盡頭 32px 是 1，最後 32px 淡出成 0，捲到底就沒有了。表格沒有溢出時捲動時間軸不啟動，透明度
   停在基本值 0，什麼都看不到（電腦版表格沒溢出，所以不會出現）。不支援的瀏覽器（舊版 iOS Safari
   等）：只在 860 以下常駐這條淡影，寧可表格沒溢出時多一條淡影，也不要完全沒有提示。

   為什麼不用經典的 background-attachment: local 加 scroll 兩層漸層：這張表的底色是半透明（淺色
   88%、深色 40%），畫在外框背景上的漸層會被表格底色蓋掉大半，淺色幾乎看不見；蓋掉兩端用的遮罩
   也找不到一個不透明又對得上的底色。

   深淺主題：陰影色取 --sk-theme-text 的 18%。那個 token 淺色主題是深色字、深色主題是淺色字，所以
   淺色是淡淡的灰影、深色是淡淡的亮邊，兩邊各自清楚但不刺眼。不認得 color-mix 的舊瀏覽器用前一行
   的固定灰藍。這段註解不寫反引號。 */
.sk-tablewrap { display: grid; }
.sk-tablewrap > table { grid-area: 1 / 1; }
.sk-tablewrap::after {
  content: "";
  grid-area: 1 / 1;
  justify-self: end;
  align-self: stretch;
  position: sticky;
  right: 0;
  width: 24px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to left, rgba(100, 116, 139, 0.22), transparent);
  background: linear-gradient(to left, color-mix(in srgb, var(--sk-theme-text) 18%, transparent), transparent);
}
@supports (animation-timeline: scroll()) {
  .sk-tablewrap::after {
    animation: sk-tablehint linear both;
    animation-timeline: scroll(nearest inline);
    animation-range: calc(100% - 32px) 100%;
  }
}
@supports not (animation-timeline: scroll()) {
  @media (max-width: 860px) {
    .sk-tablewrap::after { opacity: 1; }
  }
}
@keyframes sk-tablehint { from { opacity: 1; } to { opacity: 0; } }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sk-fs-body-sm);
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  overflow: hidden;
}
caption {
  text-align: start;
  font-weight: var(--sk-typography-weight-bold);
  padding-bottom: var(--sk-sp-12);
  color: var(--sk-theme-text-secondary);
}
th, td {
  padding: var(--sk-sp-12) var(--sk-sp-16);
  text-align: start;
  border-bottom: 1px solid var(--sk-theme-border);
  vertical-align: top;
}
thead th {
  background: var(--sk-theme-surface-muted);
  font-weight: var(--sk-typography-weight-bold);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--sk-semantic-selection-hover-background); }

/* ==========================================================================
   12. Status messages
   ========================================================================== */
[role="status"], [role="alert"], .sk-note {
  display: block;
  padding: var(--sk-sp-16) var(--sk-sp-20);
  border-radius: var(--sk-r-m);
  border: 1px solid var(--sk-semantic-feedback-info-border);
  background: var(--sk-semantic-feedback-info-background);
  color: var(--sk-semantic-feedback-info-foreground);
  font-size: var(--sk-fs-body-sm);
}
.sk-note--warn {
  border-color: var(--sk-semantic-feedback-warning-border);
  background: var(--sk-semantic-feedback-warning-background);
  color: var(--sk-semantic-feedback-warning-foreground);
}
.sk-note--error, [role="alert"] {
  border-color: var(--sk-semantic-feedback-error-border);
  background: var(--sk-semantic-feedback-error-background);
  color: var(--sk-semantic-feedback-error-foreground);
}
.sk-note--ok {
  border-color: var(--sk-semantic-feedback-success-border);
  background: var(--sk-semantic-feedback-success-background);
  color: var(--sk-semantic-feedback-success-foreground);
}

/* ==========================================================================
   12b. 表單語彙 —— 欄位、錯誤、動作列、OTP、帳戶與裝置
   --------------------------------------------------------------------------
   為什麼在 §12 之後而不是 §10 之後:.sk-formerror 自己就是一個 role="alert",
   而 §12 的 [role="alert"] 通配規則同樣是 (0,1,0) 特異度 —— 同分時後定義者
   勝,寫在前面的話 display:flex 會被 display:block 蓋掉。§10 的 input / label
   全是元素選擇器,任何 class 都壓得過,所以放在後面對它們沒有影響。

   v2 只畫過 label → input → .tiny 提示(v2.outer.css:219–228、
   v2.stripped.html:1213–1223)。錯誤條、必填標示與送出中在 v2 完全不存在,
   判準是 contracts/design-tokens.json 的 components.form_control:
   「error association is programmatic and not color-only」—— 所以每一個錯誤
   都同時有 aria-describedby 的關聯、一個 ✕ 字元、以及一段視覺隱藏的「錯誤:」。
   顏色是第四個訊號,不是唯一的。
   ========================================================================== */

/* 停用與唯讀。契約有 themes.*.disabled_surface / disabled_text 這兩支,
   在此之前一次都沒有呼叫點 —— 停用的輸入框跟啟用的長得一模一樣。 */
input:disabled, select:disabled, textarea:disabled {
  background: var(--sk-theme-disabled-surface);
  color: var(--sk-theme-disabled-text);
  border-color: var(--sk-theme-border);
  cursor: not-allowed;
}
input:read-only { background: var(--sk-theme-surface-muted); }
/* 連結扮演的停用鈕。button:disabled 已在 §10 處理。 */
.sk-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }

/* 小尺寸鈕與小字。元件語言字典也列了這兩支;先在這裡落地,字典那一輪請直接
   沿用,不要再定義第二份。 */
.sk-btn--sm { padding: var(--sk-sp-8) 15px; font-size: 13px; }

/* 單欄表單容器。720px 是「版面軌道寬」,契約沒有這個範疇,逐字取自 v2 唯一
   畫過的單欄表單(v2.stripped.html:1208)。--wide 用的是契約的 reading_max,
   不是新值:裝置清單比登入表單需要更多寬度。 */
.sk-auth { max-width: 720px; margin-inline: auto; padding-top: 18px; }
.sk-auth--wide { max-width: var(--sk-reading-max); }
.sk-auth > header { margin-bottom: 26px; }
.sk-auth > header .sk-eyebrow { margin-bottom: var(--sk-sp-10); }
.sk-auth h1 { margin: 0 0 var(--sk-sp-12); font-size: 32px; }
.sk-auth > header .sk-lede { margin-bottom: 0; }

.sk-field { margin: 0; }
.sk-field + .sk-field { margin-top: var(--sk-sp-20); }
/* 蓋掉 §10 的 label { display: block },才排得下右側的「必填」。 */
.sk-field > label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sk-sp-8);
  margin-bottom: var(--sk-sp-8);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-semibold);
}
/* 必填是「文字」,不是紅星。紅星是形狀加顏色,沒有圖例就等於沒說。 */
.sk-field__req {
  flex: none;
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-label);
  color: var(--sk-theme-ink-danger);
}
.sk-field__opt {
  flex: none;
  font-size: var(--sk-fs-caption);
  letter-spacing: var(--sk-typography-letter-spacing-label);
  color: var(--sk-theme-text-muted);
}
/* 卡片內的欄位吃滿寬,蓋掉 §10 的 max-width: 32rem。 */
.sk-field input, .sk-field select, .sk-field textarea { max-width: none; }
.sk-field__hint {
  display: block;
  margin: var(--sk-sp-8) 0 0;
  font-size: var(--sk-fs-caption);
  line-height: var(--sk-typography-line-height-reading);
  color: var(--sk-theme-text-muted);
}
/* 欄位層級的錯誤刻意不用 role="alert":頁面是伺服器重繪的,訊息隨頁面一起
   到,live region 不會被唸;真正需要的是 aria-describedby 的關聯。頁面層級
   的摘要才用 role="alert"(見 .sk-formerror)。 */
.sk-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--sk-sp-8);
  margin: var(--sk-sp-8) 0 0;
  font-size: var(--sk-fs-caption);
  line-height: var(--sk-typography-line-height-reading);
  font-weight: var(--sk-typography-weight-semibold);
  color: var(--sk-theme-ink-danger);
}
.sk-field__error i {
  flex: none;
  font-style: normal;
  font-weight: var(--sk-typography-weight-black);
  line-height: 1.4;
}
.sk-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--sk-semantic-feedback-error-border);
  background: var(--sk-theme-red-pale);
}
.sk-field :is(input, select, textarea)[aria-invalid="true"]:focus-visible {
  border-color: var(--sk-semantic-feedback-error-foreground);
}

/* 頁面層級的錯誤摘要。role="alert" 讓它吃 §12 的錯誤色,這裡只補圖示與標題
   的排版,不重複定義任何顏色。 */
.sk-formerror { display: flex; gap: var(--sk-sp-12); align-items: flex-start; }
.sk-formerror i {
  flex: none;
  font-style: normal;
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  line-height: 1.3;
}
.sk-formerror strong { display: block; margin-bottom: var(--sk-sp-4); }
.sk-formerror p { margin: 0; }

/* 動作列。三份規格各給了一組值(登入 10/24、商務 12/20、學習 0),同一顆按鈕
   列在登入頁、結帳頁與練習頁會有三種間距。這是收斂後的那一組,商務的
   --tight 一併收進來,學習的 .sk-qactions 不必存在。 */
.sk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-10);
  align-items: center;
  margin-top: var(--sk-sp-24);
}
.sk-actions--tight { margin-top: var(--sk-sp-12); }
.sk-actions--stack { flex-direction: column; align-items: stretch; }
.sk-actions--stack .sk-btn, .sk-actions--stack button { width: 100%; }

/* 送出中。伺服器渲染不知道這件事,所以只有 island 開得起來;沒有 JS 時表單
   照常送出,只是沒有這個回饋。 */
form[aria-busy="true"] :is(input, select, textarea) { pointer-events: none; }
form[aria-busy="true"] button[type="submit"] { cursor: progress; }
form[aria-busy="true"] button[type="submit"]::after {
  content: "";
  width: var(--sk-sp-14);
  height: var(--sk-sp-14);
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: sk-spin 800ms linear infinite;   /* motion.animations.spin 逐字 */
}
@keyframes sk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  form[aria-busy="true"] button[type="submit"]::after { animation: none; opacity: 0.6; }
}

/* 表單頁的次要出口列。 */
.sk-authfoot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-8) var(--sk-sp-20);
  margin-top: var(--sk-sp-24);
  font-size: var(--sk-fs-body-sm);
}
.sk-authfoot a { color: var(--sk-theme-link); }

/* --------------------------------------------------------------------------
   OTP:一個 input,六個格子。

   六個 <input> 是錯的做法。routes/auth.ts 讀的是單一 body['code'],六個框要
   靠 JS 才拼得回去 —— 沒有 JS 就送不出;而 autocomplete="one-time-code" 的
   自動填入在多欄位上各家瀏覽器行為不一致,那正是這一頁唯一的核心動作。單一
   欄位讓跳格、Backspace、整組貼上與簡訊自動填入全部回到原生行為,JS 只剩
   「濾掉非數字」與「滿六碼自動送出」兩件加分項。

   格子是背景漸層畫的。三個尺寸全部取自 spacing.scale_px,不是新數值;把
   spacing 階梯當控制項尺寸用是契約沒有的範疇,標示出來 —— 44px 同時是觸控
   目標下限,所以這個借用有理由。

   ⚠ 尾端溢出(這是原規格的缺陷,修在這裡):letter-spacing 會加在第 6 個字
   「之後」,所以文字前進總寬是 6 個節距,比看得見的六格多出一個 gap。原規格
   把 width 寫成 6*格寬 + 5*間距,於是輸入到第 6 碼時輸入框橫向捲動、整排格子
   往左跳。修法兩層:(1) 內容盒寬度正好等於 6 個節距,根本不再溢出;(2) 背景
   改用 repeating-linear-gradient + no-repeat,並把繪製區限制在 6 個節距,所以
   第 7 格永遠不會被畫出來。
   -------------------------------------------------------------------------- */
.sk-otp {
  --sk-otp-cell: var(--sk-sp-44);
  --sk-otp-gap: var(--sk-sp-10);
  --sk-otp-pitch: calc(var(--sk-otp-cell) + var(--sk-otp-gap));
  /* 讓每個數字落在格子正中央。1ch 在等寬字型等於字符前進寬度,這是整個技巧
     的前提,也是為什麼下面一定要指定等寬堆疊。 */
  --sk-otp-inset: calc((var(--sk-otp-cell) - 1ch) / 2);
  --sk-otp-track: calc(var(--sk-otp-pitch) * 6);
}
.sk-otp input {
  /* 與 §1 的 code/kbd/samp 同一組堆疊,不另立一份。 */
  font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
  font-size: var(--sk-fs-title);
  font-weight: var(--sk-typography-weight-black);
  line-height: 1;
  letter-spacing: calc(var(--sk-otp-pitch) - 1ch);
  /* box-sizing 是 §1 的 border-box:內容盒 = width − padding-left = 6 個節距,
     正好等於文字前進總寬,所以永遠不會出現橫向捲動。 */
  padding: 0 0 0 var(--sk-otp-inset);
  width: calc(var(--sk-otp-track) + var(--sk-otp-inset));
  max-width: 100%;
  height: var(--sk-sp-56);
  border: 0;
  border-radius: 0;
  background-color: transparent;
  caret-color: var(--sk-raw-color-primary);
  box-shadow: none;
  /* 兩層:格子的底,以及每一格底部的 2px 線。no-repeat 搭配剛好 6 個節距的
     background-size,就是「只畫六格」的機制。 */
  background-image:
    repeating-linear-gradient(to right, var(--sk-theme-surface-elevated) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch)),
    repeating-linear-gradient(to right, var(--sk-theme-border-strong) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch));
  background-size: var(--sk-otp-track) 100%, var(--sk-otp-track) 2px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat, no-repeat;
}
.sk-otp input:focus-visible {
  outline: 2px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
  box-shadow: var(--sk-ring);
  background-image:
    repeating-linear-gradient(to right, var(--sk-theme-pill-bg) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch)),
    repeating-linear-gradient(to right, var(--sk-raw-color-primary) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch));
}
.sk-otp input[aria-invalid="true"] {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(to right, var(--sk-theme-red-pale) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch)),
    repeating-linear-gradient(to right, var(--sk-semantic-feedback-error-border) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch));
}
.sk-otp input:disabled {
  background-color: transparent;
  background-image:
    repeating-linear-gradient(to right, var(--sk-theme-disabled-surface) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch)),
    repeating-linear-gradient(to right, var(--sk-theme-border) 0 var(--sk-otp-cell), transparent var(--sk-otp-cell) var(--sk-otp-pitch));
}
/* 三個尺寸,斷點取自 breakpoints_px 的 single_column(560)與 phone(390)。
   算給後面的人看:卡片內距 24、頁面 gutter 24(390 以下降為 16),所以卡片
   內可用寬度在 390px 手機約 294px、在 320px 約 240px。預設那一組約 338px,
   只有 560px 以上放得下。 */
@media (max-width: 560px) {
  .sk-otp { --sk-otp-cell: var(--sk-sp-38); --sk-otp-gap: var(--sk-sp-6); }
  .sk-otp input { font-size: var(--sk-fs-title-sm); height: var(--sk-sp-44); }
}
@media (max-width: 390px) {
  .sk-otp { --sk-otp-cell: var(--sk-sp-30); --sk-otp-gap: var(--sk-sp-4); }
}

/* 重寄列:倒數與「改用其他 Email」。 */
.sk-resend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-sp-12);
  margin-top: var(--sk-sp-24);
  padding-top: var(--sk-sp-16);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-resend form { margin: 0; }
.sk-resend form > * + * { margin-top: 0; }   /* 蓋掉 §10 的 form > * + * */
.sk-resend__note {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-muted);
}

/* 帳戶與裝置。 */
.sk-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-sp-16);
}
.sk-identity dl { margin: 0; }
.sk-identity dt { font-size: var(--sk-fs-caption); color: var(--sk-theme-text-muted); margin-bottom: var(--sk-sp-4); }
.sk-identity dd {
  margin: 0;
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-tight);
  overflow-wrap: anywhere;
}
.sk-identity form { margin: 0; }
.sk-identity form > * + * { margin-top: 0; }

.sk-sessions { display: grid; gap: var(--sk-sp-12); list-style: none; margin: 0; padding: 0; }
.sk-session {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sk-sp-12) var(--sk-sp-20);
  padding: var(--sk-sp-16) var(--sk-sp-20);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-muted);
}
.sk-session--current { border-color: var(--sk-theme-border-strong); background: var(--sk-theme-pill-bg); }
.sk-session__what { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sk-sp-8); min-width: 0; }
.sk-session__what b { font-size: var(--sk-fs-body); font-weight: var(--sk-typography-weight-bold); }
.sk-session__when { font-size: var(--sk-fs-caption); color: var(--sk-theme-text-muted); }
.sk-session form { margin: 0; }
.sk-session form > * + * { margin-top: 0; }
@media (max-width: 560px) {          /* breakpoints_px.single_column */
  .sk-session { grid-template-columns: 1fr; }
  .sk-session > form, .sk-session > .sk-badge { justify-self: start; }
}

/* Two kinds of newline, and only one of them is worth keeping.

   Measured over the whole bank on 2026-08-22, because the first version of this
   rule got it wrong in both directions:

   * A question stem's newlines are PDF residue. 294 of 52,735 stems contain
     one, and sampling them shows every break falls at the source PDF's right
     margin, mid-clause — 「…標準差為0.40，若為無風險性資產報酬是
0.04，」. The
     same is true of an essay's prompt: 343 of 384 break mid-token, including
     「(5
分)」. Preserving those reproduces the PDF's line width on a phone.
   * A 擬答's newlines are structure. All 384 carry them and 340 use blank lines
     to separate 【設定】 from 【(1) …】, with one formula per line. Collapsing
     those turns a worked solution into a wall.

   So prose that a person wrote keeps its breaks; text that a machine extracted
   does not. The member's own submitted answer is in the first group for the
   obvious reason.

   Neither repairs the 53 stems whose tables were flattened upstream into an
   unseparated string — nothing at this layer can, because the column boundaries
   are gone from the data. The 87 essays that kept question_blocks render as
   real tables instead, which is what that column is for. */
.sk-essay-prompt,
.sk-stem {
  line-height: var(--sk-typography-line-height-reading);
  overflow-wrap: break-word;
}

.sk-prose {
  white-space: pre-wrap;
  line-height: var(--sk-typography-line-height-reading);
  overflow-wrap: break-word;
}

/* 解題提示是「還沒揭答」的區塊,刻意跟參考擬答長得不一樣:淡底加一條線,
   讀起來像旁註而不是答案,人一眼就知道自己還沒看到擬答。 */
/* 自檢清單。點按區要夠大(整行都可以按),因為這是要在手機上一項一項勾的。 */
.sk-essay-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sk-sp-8); }
.sk-essay-checks li {
  display: flex;
  gap: var(--sk-sp-10);
  align-items: flex-start;
  padding: var(--sk-sp-10) var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface);
}
.sk-essay-checks input { margin: 3px 0 0; flex: none; width: 18px; height: 18px; }
.sk-essay-checks label { flex: 1 1 auto; cursor: pointer; line-height: var(--sk-typography-line-height-tight); }
.sk-essay-checks li:has(input:checked) { border-color: var(--sk-raw-color-success); }
.sk-essay-checks li:has(input:checked) label { color: var(--sk-theme-text-secondary); }
.sk-essay-checkform > .sk-tiny { color: var(--sk-theme-text-secondary); }

.sk-essay-hint {
  margin: var(--sk-sp-16) 0;
  padding: var(--sk-sp-16) var(--sk-sp-20);
  border: 1px solid var(--sk-theme-border);
  border-left: 3px solid var(--sk-raw-color-accent);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface);
}
.sk-essay-hint h2 { margin: 0 0 var(--sk-sp-4); font-size: var(--sk-fs-title-sm); }
.sk-essay-hint h3 { margin: var(--sk-sp-12) 0 var(--sk-sp-4); font-size: var(--sk-fs-body-sm); }
.sk-essay-hint > .sk-tiny { margin: 0 0 var(--sk-sp-10); color: var(--sk-theme-text-secondary); }
.sk-essay-list { list-style: none; padding: 0; }

.sk-essay-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-sp-8);
  padding: var(--sk-sp-12) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}

.sk-essay-meta {
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-muted);
}

.sk-essay-note {
  padding: var(--sk-sp-10) var(--sk-sp-14);
  background: var(--sk-theme-heat-bg);
  border-radius: var(--sk-r-m);
}

.sk-essay-disclaimer {
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-muted);
}

.sk-essay-cite {
  display: block;
  font-size: var(--sk-fs-caption);
  font-style: normal;
  color: var(--sk-theme-text-muted);
}

/* Pairs a colour with a word, never a colour alone — components.status_badge. */
.sk-badge--done {
  padding: 2px var(--sk-sp-8);
  font-size: var(--sk-fs-caption);
  border-radius: var(--sk-r-pill);
  color: var(--sk-semantic-entitlement-permanent-foreground);
  background: var(--sk-semantic-entitlement-permanent-background);
  border: 1px solid var(--sk-semantic-entitlement-permanent-border);
}

/* A wide table scrolls inside its own box. The page body never scrolls sideways:
   on a 320px phone a four-column options table is otherwise unreadable in a way
   that also breaks every other page's layout. */
.sk-table-scroll { overflow-x: auto; margin-bottom: var(--sk-sp-16); }

/* Provenance note above a question stem.

   Amber rather than red: this is not a warning about the item, it is a statement
   about where it came from. Uses the feedback warning ramp so it inherits the
   dark-theme values the token file now carries (semantic.feedback.warning.dark),
   and pairs the colour with the word 非官方 so it is never colour-only —
   components.status_badge in the token contract requires exactly that. */
.sk-provenance {
  margin: 0 0 var(--sk-sp-12);
  padding: var(--sk-sp-10) var(--sk-sp-14);
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-semantic-feedback-warning-foreground);
  background: var(--sk-semantic-feedback-warning-background);
  border: 1px solid var(--sk-semantic-feedback-warning-border);
  border-radius: var(--sk-r-m);
}

.sk-provenance strong { margin-inline-end: var(--sk-sp-6); }

.sk-empty {
  padding: var(--sk-sp-44) var(--sk-sp-24);
  text-align: center;
  color: var(--sk-theme-text-muted);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface);
  box-shadow: var(--sk-shadows-card);
}

/* ==========================================================================
   12b. 結果卡、動作列、訂單編號
   ========================================================================== */
/* 必須排在 §12 之後。結果卡一定帶 role="status"(付款狀態會在使用者閱讀時
   改變),而 §12 的 [role="status"] 通配規則與這裡的 class 同為 (0,1,0) ——
   後定義者才贏,否則每一張結果卡都會退回資訊藍。

   四態而不是兩態,是因為這兩頁有兩個「既非成功也非失敗」的結局:
   /checkout/return 的 reconciling(錢的去向還沒有結論),以及 /redeem 的
   order hold / already entitled(對使用者其實是好消息)。套紅叉會告訴他錢
   出事了,套綠勾則是宣稱成功 —— 兩種都是說謊。 */
.sk-outcome,
.sk-verdict {
  display: flex;
  gap: var(--sk-sp-12);
  align-items: flex-start;
  padding: var(--sk-sp-16) var(--sk-sp-20);
  border-radius: var(--sk-r-l);
  border: 1px solid var(--sk-semantic-feedback-info-border);
  background: var(--sk-semantic-feedback-info-background);
  color: var(--sk-semantic-feedback-info-foreground);
  font-size: var(--sk-fs-body-sm);
}
.sk-outcome__icon {
  flex: none;
  font-style: normal;
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  line-height: 1.4;
}
.sk-outcome__body { min-width: 0; }
.sk-outcome__body > strong {
  display: block;
  font-size: var(--sk-fs-body);
  line-height: var(--sk-typography-line-height-heading);
}
.sk-outcome__body > p {
  margin: var(--sk-sp-8) 0 0;
  line-height: var(--sk-typography-line-height-reading);
}
/* 副行刻意不用 --sk-theme-text-muted,也刻意不打 opacity:結果卡有自己的底
   色,灰字壓上去對比會掉,而 feedback 的 foreground 本來就貼著 4.5:1,再乘
   0.85 就掉出門檻。用同一組 foreground 讓它跟著卡片走。 */
.sk-outcome__body > small {
  display: block;
  margin-top: var(--sk-sp-8);
  font-size: var(--sk-fs-caption);
  line-height: var(--sk-typography-line-height-reading);
  color: inherit;
}
.sk-outcome__body ul {
  margin: var(--sk-sp-10) 0 0;
  padding-inline-start: var(--sk-sp-20);
  line-height: var(--sk-typography-line-height-reading);
}
.sk-outcome__body li + li { margin-top: var(--sk-sp-6); }

/* .sk-verdict 是這個盒子的兩態子集,不是第二套結果卡。學習頁與試讀頁要用
   判定條時接這兩個 class,不要再寫一份 —— padding 或圖示大小只要有一處不
   同,同一個網站就會出現兩種結果卡。 */
.sk-outcome--ok,
.sk-verdict {
  background: var(--sk-semantic-feedback-success-background);
  border-color: var(--sk-semantic-feedback-success-border);
  color: var(--sk-semantic-feedback-success-foreground);
}
.sk-outcome--error,
.sk-verdict--wrong {
  background: var(--sk-semantic-feedback-error-background);
  border-color: var(--sk-semantic-feedback-error-border);
  color: var(--sk-semantic-feedback-error-foreground);
}
.sk-outcome--warn {
  background: var(--sk-semantic-feedback-warning-background);
  border-color: var(--sk-semantic-feedback-warning-border);
  color: var(--sk-semantic-feedback-warning-foreground);
}
.sk-outcome--info {
  background: var(--sk-semantic-feedback-info-background);
  border-color: var(--sk-semantic-feedback-info-border);
  color: var(--sk-semantic-feedback-info-foreground);
}
/* 未決狀態多一條左緣重標,讓「還沒有結論」在掃視時和「已經有結論」分得開。
   純幾何,沒有新色。 */
.sk-outcome--pending { border-inline-start-width: var(--sk-sp-4); }

/* 訂單編號行:user-select: all,點一下就整串選起來,方便貼給客服。 */
.sk-orderref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-sp-8);
  margin-top: var(--sk-sp-16);
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-muted);
}
.sk-orderref code {
  font-size: var(--sk-fs-body-sm);
  -webkit-user-select: all;
  user-select: all;
}

/* 結帳與開通刻意用窄欄:整頁只有一個動作,沒有第二欄要放。 */
.sk-checkout { max-width: 720px; margin-inline: auto; }

.sk-redeem { padding-top: 18px; }
.sk-redeem__head { margin-bottom: 26px; }
.sk-redeem__eyebrow { margin-bottom: var(--sk-sp-10); }
.sk-redeem__title { margin: 0 0 var(--sk-sp-12); font-size: 32px; }
.sk-redeem__lede { margin: 0; }
.sk-redeem__form > * + * { margin-top: 0; }
.sk-redeem__field { margin: 0; }
.sk-redeem input.sk-redeem__input { max-width: none; }
.sk-redeem__hint { margin: var(--sk-sp-8) 0 0; }
.sk-redeem__actions, .sk-redeem__result-actions {
  display: flex;
  align-items: center;
  gap: var(--sk-sp-10);
  flex-wrap: wrap;
  margin-top: var(--sk-sp-16);
}
.sk-redeem__result { margin-top: var(--sk-sp-16); }
.sk-redeem__outcome-card > .sk-redeem__result:first-child { margin-top: 0; }
.sk-redeem__help, .sk-redeem__buy-note { margin-top: var(--sk-sp-16); }
.sk-redeem__help-title { margin: 0; font-size: 14px; }
.sk-redeem__help-list { display: grid; gap: 7px; margin: var(--sk-sp-10) 0 0; padding-left: var(--sk-sp-18, 18px); }
.sk-redeem__buy-note p { margin: var(--sk-sp-8) 0 0; }

/* 「關於我們與製作方法」與「勘誤紀錄」（提案_會員網站搜尋與AI曝光第一波_20261004 §5.4）。
   外框是上面 .sk-checkout 的置中窄欄，頁名因此跟會員頁一樣 32px；頁名與導語置中（.sk-sechead），其餘是長內文、靠左。
   段落標題小一級，不跟頁名一樣大；勘誤每一筆的標題再小一級，分類標籤緊貼在它上面。
   錨點（/about#corrections）跳過來時，段落標題不被固定在上方的頁首蓋住。 */
.sk-aboutpage h2,
.sk-corrections h2 { font-size: var(--sk-fs-title-sm); }
.sk-aboutpage section[id] { scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-16)); }
.sk-correction > p:first-child { margin-bottom: var(--sk-sp-8); }
.sk-correction > h3 { margin-top: 0; font-size: var(--sk-fs-body); }

/* 考試指南改版樣稿（2026-10-06）：比照首頁與商品頁——開頭左封面右文字（手機疊起來）、區塊標題置中帶小標與關鍵詞漸層、
   章與考點做成卡片、試讀區塊用卡片，卡片內長文靠左。只用既有 token 與類別（.sk-card、.sk-sechead、.sk-pdpstats、.sk-badge）。 */
.sk-guide { max-width: 1120px; margin: 0 auto; }
.sk-guide > .sk-crumbs { margin-bottom: var(--sk-sp-20); }
.sk-guide__hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sk-sp-30); align-items: center; }
.sk-guide__hero--chapter { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; text-align: center; }
.sk-guide__cover { display: block; width: 100%; height: auto; border-radius: var(--sk-r-xl); border: 1px solid var(--sk-theme-border); box-shadow: var(--sk-shadows-card); }
.sk-guide__intro > h1 { margin: var(--sk-sp-8) 0 var(--sk-sp-10); }
.sk-guide__intro > .sk-lede { color: var(--sk-theme-text-muted); }
.sk-guide__intro .sk-pdpstats { max-width: 520px; }
.sk-guide__hero--chapter .sk-pdpstats { margin-inline: auto; }
.sk-guide__hero--chapter .sk-actions { justify-content: center; }
.sk-guide__section { margin-top: var(--sk-sp-56); }
.sk-guide__card { display: flex; flex-direction: column; gap: var(--sk-sp-8); height: 100%; padding: var(--sk-sp-20); }
.sk-guide__card h3 { margin: 0; font-size: var(--sk-fs-body); line-height: 1.45; }
.sk-guide__card h3 a { color: inherit; text-decoration: none; }
.sk-guide__card h3 a::after { content: ""; position: absolute; inset: 0; }
.sk-guide__card:has(h3 a):hover { border-color: var(--sk-theme-border-strong); transform: translateY(-2px); }
.sk-guide__card:has(h3 a):focus-within { border-color: var(--sk-theme-border-strong); outline: 2px solid var(--sk-theme-ink-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .sk-guide__card:has(h3 a):hover { transform: none; }
}
.sk-guide__card p { margin: 0; color: var(--sk-theme-text-secondary); font-size: var(--sk-fs-body-sm); line-height: 1.6; }
.sk-guide__num { font-weight: 800; font-size: 13px; letter-spacing: 0.08em; color: var(--sk-theme-ink-accent); }
.sk-guide__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-6); margin-top: auto; padding-top: var(--sk-sp-6); }
.sk-guide__big { font-size: var(--sk-fs-title-sm); font-weight: 800; color: var(--sk-theme-text); }
.sk-guide__subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sk-guide__fold { text-align: center; }
.sk-guide__fold > summary { display: inline-flex; list-style: none; cursor: pointer; }
.sk-guide__fold > summary::-webkit-details-marker { display: none; }
.sk-guide__fold[open] > summary { margin-bottom: var(--sk-sp-20); }
.sk-guide__fold > .sk-grid { text-align: left; }
.sk-guide__article { max-width: 760px; margin: var(--sk-sp-30) auto 0; }
.sk-guide__article > h2 { font-size: var(--sk-fs-title-sm); margin-top: var(--sk-sp-30); }
.sk-guide__article > p,
.sk-guide__article li { line-height: 1.8; }
.sk-guide__article > .sk-tablewrap { margin: var(--sk-sp-12) 0; }
@media (min-width: 861px) {
  .sk-guide__chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sk-guide__card { padding: var(--sk-sp-16); }
  .sk-guide__topics { gap: var(--sk-sp-10); }
}
.sk-guide__note { max-width: 760px; margin: var(--sk-sp-16) auto 0; text-align: center; font-size: var(--sk-fs-body-sm); }
.sk-guide__callout { max-width: 760px; margin: var(--sk-sp-56) auto 0; text-align: center; }
.sk-guide__callout h2 { margin-top: 0; }
.sk-guide__callout .sk-actions { justify-content: center; }
.sk-guide__pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-16); max-width: 760px; margin: var(--sk-sp-30) auto 0; }
.sk-guide__pagecard { display: flex; flex-direction: column; gap: var(--sk-sp-4); padding: var(--sk-sp-16) var(--sk-sp-20); text-decoration: none; color: inherit; }
.sk-guide__pagecard--next { text-align: right; }
.sk-guide__back { margin: var(--sk-sp-20) 0 0; text-align: center; }
.sk-guide__source { max-width: 760px; margin: var(--sk-sp-30) auto 0; text-align: center; font-size: var(--sk-fs-caption); }
@media (max-width: 860px) {
  .sk-guide__hero { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .sk-guide__cover { max-width: 220px; margin-inline: auto; }
  .sk-guide__intro .sk-pdpstats { margin-inline: auto; }
  .sk-guide__intro .sk-actions { justify-content: center; }
  .sk-guide__subjects,
  .sk-guide__pager { grid-template-columns: minmax(0, 1fr); }
  .sk-guide__pagecard--next { text-align: left; }
}

/* 靜態說明卡:保留樣稿的表面與陰影,但不使用商品卡的彩條與光暈。 */
.sk-card--flat {
  box-shadow: var(--sk-shadows-card);
  background: var(--sk-theme-surface);
}
.sk-card--flat::before { display: none; }
.sk-card--flat::after { display: none; }
/* 全域 h2 是 28px 加 38px 的上緣留白,塞進卡片裡會把卡片撐開。 */
.sk-card > h2:first-of-type {
  margin-top: 0;
  font-size: var(--sk-fs-title-sm);
}

.sk-tiny {
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-muted);
  /* 1.85, v2's value for small print — looser than body prose on purpose,
     because 12px lines are what people skim. */
  line-height: 1.85;
}
ul.sk-tiny { padding-inline-start: var(--sk-sp-20); }
ul.sk-tiny li + li { margin-top: var(--sk-sp-6); }

/* ==========================================================================
   12b. 學習(/learn/*)
   --------------------------------------------------------------------------
   Seven surfaces, one shell. Two things this deliberately does not do:

   * The native course shell replaces the site chrome while learning, so its
     own course bar never stacks over the site tab bar or covers an option,
     a submit button or the footer. The rail below is sticky under
     the header instead, at --sk-z-index-sticky (100) so the header's 120 wins.
   * No white-space changes. The 294 stems whose newlines are PDF residue and
     the 384 擬答 whose newlines are structure were measured in §12 above.
     Nothing here goes near either.
   ========================================================================== */

/* Learning is reading, not browsing a catalogue: reading_max (860) rather than
   catalog_max (1200). Nobody finishes a 40-character line of a question stem. */
.sk-learn { max-width: var(--sk-reading-max); margin: 0 auto; }

.sk-learn__id { display: grid; gap: var(--sk-sp-12); }
.sk-learn__id .sk-eyebrow { margin-bottom: 0; }
/* A <p>, not a heading: the page's one h1 is its title, and a11y.ts fails a
   document whose first heading is not h1 or which carries two. */
.sk-learn__cert {
  margin: 0;
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-title-sm);
  color: var(--sk-theme-text);
}
.sk-learn__subjects {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sk-learnstats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-24);
  margin: 0;
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-learnstats dt { font-size: var(--sk-fs-caption); color: var(--sk-theme-text-muted); }
.sk-learnstats dd {
  margin: 0;
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
  letter-spacing: var(--sk-typography-letter-spacing-tight);
  color: var(--sk-theme-text);
}

/* The rail: seven real routes, sticky under the header. */
.sk-learnnav {
  position: sticky;
  top: var(--sk-header-h);
  z-index: var(--sk-z-index-sticky);
  margin: var(--sk-sp-16) 0 var(--sk-sp-24);
  padding: var(--sk-sp-8);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-strong);
  -webkit-backdrop-filter: var(--sk-blur-control);
          backdrop-filter: var(--sk-blur-control);
}
.sk-learnnav ul {
  display: flex;
  gap: var(--sk-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--sk-theme-border-strong) transparent;
}
.sk-learnnav ul::-webkit-scrollbar { height: 4px; }
.sk-learnnav ul::-webkit-scrollbar-thumb { background: var(--sk-theme-border-strong); border-radius: 999px; }
.sk-learnnav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sk-sp-6);
  white-space: nowrap;
  padding: var(--sk-sp-8) var(--sk-sp-16);
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-semibold);
  color: var(--sk-theme-text-secondary);
  text-decoration: none;
  transition: background-color 0.14s var(--sk-ease), color 0.14s var(--sk-ease);
}
/* 圖示比文字略大一點才看得清楚,並且壓掉表情符號自帶的行高。 */
.sk-course-nav__icon {
  flex: none;
  font-size: 1.05em;
  line-height: 1;
}
.sk-learnnav a:hover {
  background: var(--sk-semantic-selection-hover-background);
  color: var(--sk-theme-text);
}
/* Solid, not the primary_cta gradient. That gradient starts at #6366f1, which
   is 4.47:1 against white — under the 4.5:1 floor for this 14px label. Its end
   colour, primary_dark, is 8.6:1 on its own. */
.sk-learnnav a[aria-current="page"] {
  background: var(--sk-raw-color-primary-dark);
  color: #ffffff;
}

.sk-learn__title { margin-top: 0; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sk-learnnav { background: var(--sk-theme-surface-elevated); }
}

/* The learning home's way in, and the practice range chooser: both are a short
   list of destinations, so both are buttons rather than bullets. */
.sk-learnhome ul,
.sk-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-12);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* -- 使用說明 -------------------------------------------------------------- */
.sk-about {
  max-width: var(--sk-reading-max);
  line-height: var(--sk-typography-line-height-reading);
}
/* Two sticky bars sit above this page — the header and the rail — and
   html{scroll-behavior:smooth} means an anchor otherwise lands underneath both. */
.sk-about section { scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-70)); }
.sk-about h2 { margin-top: var(--sk-sp-38); font-size: var(--sk-fs-title-sm); }
.sk-about h2:first-of-type { margin-top: var(--sk-sp-24); }

.sk-toc {
  margin: 0 0 var(--sk-sp-30);
  padding: var(--sk-sp-20) var(--sk-sp-24);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-muted);
}
.sk-toc ol { margin: 0; padding-inline-start: var(--sk-sp-20); }
.sk-toc li { margin-bottom: var(--sk-sp-8); font-size: var(--sk-fs-body-sm); }
.sk-toc li:last-child { margin-bottom: 0; }
.sk-toc a { color: var(--sk-theme-link); }

/* -- 錯題本 ---------------------------------------------------------------- */
.sk-mistakefilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-sp-12);
  margin-bottom: var(--sk-sp-24);
}
/* §10's 'form > * + *' would drop the submit button onto its own line. */
.sk-mistakefilter > * + * { margin-top: 0; }

/* A control group, not a section: the global fieldset frame is removed. */
.sk-statefilter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-6);
  margin: 0;
  padding: 0;
  border: 0;
}
.sk-statefilter span { display: inline-flex; align-items: center; }
.sk-statefilter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* Two selectors deep on purpose: §10's 'input[type="radio"] + label' sets
   display:inline at the same specificity, and a tie decided by source order is
   not a thing to depend on. */
.sk-statefilter input + label {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0;
  padding: var(--sk-sp-6) var(--sk-sp-14);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-medium);
  color: var(--sk-theme-text-secondary);
  cursor: pointer;
}
.sk-statefilter input:checked + label {
  border-color: var(--sk-raw-color-primary);
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-text);
  font-weight: var(--sk-typography-weight-semibold);
}
.sk-statefilter input:focus-visible + label { box-shadow: var(--sk-ring); }

.sk-mistakes {
  display: grid;
  gap: var(--sk-sp-12);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-mistake { display: grid; gap: var(--sk-sp-10); }
.sk-mistake__meta { display: flex; flex-wrap: wrap; gap: var(--sk-sp-8); }
.sk-mistake__stem {
  margin: 0;
  font-size: var(--sk-fs-body-sm);
  line-height: var(--sk-typography-line-height-reading);
  color: var(--sk-theme-text-secondary);
  overflow-wrap: break-word;
  /* A list, not a reading surface: the longest flattened-table stem is 239
     characters and would push every other row off the screen. Where
     -webkit-line-clamp is unsupported the whole stem shows — longer, never
     lost. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-mistake__foot {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--sk-sp-10);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-mistake__foot form { margin: 0; }
.sk-mistake__foot form > * + * { margin-top: 0; }

/* -- 練習與考點 ------------------------------------------------------------ */
/* 本輪成績常駐在題號旁邊。成品在作答畫面上一直看得到答對／答錯／正確率,
   那是回饋密度的一部分;網站原本只有「第 N／M 題」。數字用等寬對齊,
   否則每答一題整行都會跳。 */
/* 讀詳解模式的標記。要一眼看得出「這一輪不算成績」,否則會誤以為自己在練習。 */
.sk-browse-badge { margin-left: var(--sk-sp-10); }
.sk-browse-note { margin: var(--sk-sp-10) 0 0; }
.sk-qtally {
  margin-left: var(--sk-sp-12);
  color: var(--sk-theme-text-secondary);
  font-variant-numeric: tabular-nums;
}
.sk-qprev { margin: 0 0 var(--sk-sp-10); font-size: var(--sk-fs-body-sm); }
.sk-qprev a { color: var(--sk-theme-text-secondary); text-decoration: none; }
.sk-qprev a:hover { color: var(--sk-raw-color-primary); text-decoration: underline; }
.sk-qprogress {
  margin: 0 0 var(--sk-sp-16);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-label);
  color: var(--sk-theme-text-muted);
}
.sk-resultverdict {
  display: grid;
  gap: var(--sk-sp-4);
  margin-bottom: var(--sk-sp-20);
}
.sk-resultverdict strong { font-size: var(--sk-fs-body); }
.sk-resultverdict span { font-size: var(--sk-fs-body-sm); }
.sk-resultsource {
  margin-bottom: var(--sk-sp-24);
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
}
.sk-resultsource h2 {
  margin: 0 0 var(--sk-sp-12);
  font-size: var(--sk-fs-body);
}
.sk-resultsource dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sk-sp-10) var(--sk-sp-20);
  margin: 0;
}
.sk-resultsource dl > div { min-width: 0; }
.sk-resultsource dt {
  color: var(--sk-theme-text-muted);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-resultsource dd {
  margin: var(--sk-sp-4) 0 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  font-size: var(--sk-fs-body-sm);
}
.sk-resultoptions {
  display: grid;
  gap: var(--sk-sp-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-resultoption {
  min-width: 0;
  padding: var(--sk-sp-12) var(--sk-sp-14);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface);
}
.sk-resultoption--correct,
.sk-resultoption--selected-correct {
  border-color: var(--sk-semantic-feedback-success-border);
  background: var(--sk-semantic-feedback-success-background);
}
.sk-resultoption--selected-wrong {
  border-color: var(--sk-semantic-feedback-error-border);
  background: var(--sk-semantic-feedback-error-background);
}
.sk-resultoption__text {
  margin: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  line-height: var(--sk-typography-line-height-reading);
}
.sk-resultoption__marks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-6);
  margin: var(--sk-sp-8) 0 0;
}
.sk-resultmark {
  display: inline-flex;
  padding: 2px var(--sk-sp-8);
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-pill);
  color: var(--sk-theme-text-secondary);
  background: var(--sk-theme-surface-elevated);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-resultmark--correct {
  border-color: var(--sk-semantic-feedback-success-border);
  color: var(--sk-semantic-feedback-success-foreground);
  background: var(--sk-semantic-feedback-success-background);
}
.sk-resultmark--wrong {
  border-color: var(--sk-semantic-feedback-error-border);
  color: var(--sk-semantic-feedback-error-foreground);
  background: var(--sk-semantic-feedback-error-background);
}
.sk-resultoption__reason {
  margin: var(--sk-sp-10) 0 0;
  padding-top: var(--sk-sp-10);
  border-top: 1px solid var(--sk-theme-border);
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-body-sm);
  line-height: var(--sk-typography-line-height-reading);
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
.sk-qactions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-10);
  margin: var(--sk-sp-24) 0 0;
}

@media (max-width: 36rem) {
  .sk-resultsource dl { grid-template-columns: minmax(0, 1fr); }
}

.sk-searchform { margin-bottom: var(--sk-sp-30); }

.sk-conceptgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sk-sp-20);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-concept {
  display: flex;
  flex-direction: column;
  gap: var(--sk-sp-12);
  scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-70));
}
.sk-concept__head { display: grid; gap: var(--sk-sp-4); }
.sk-concept__category {
  margin: 0;
  color: var(--sk-theme-text-muted);
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: var(--sk-typography-letter-spacing-label);
}
.sk-concept h2 {
  margin: 0;
  font-size: var(--sk-fs-title-sm);
  line-height: var(--sk-typography-line-height-heading);
  letter-spacing: var(--sk-typography-letter-spacing-heading);
}
.sk-concept__summary {
  margin: 0;
  font-size: var(--sk-fs-body-sm);
  line-height: var(--sk-typography-line-height-reading);
  color: var(--sk-theme-text-secondary);
  overflow-wrap: break-word;
}
.sk-concept__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-concept__details {
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
  overflow: hidden;
}
.sk-concept__details > summary {
  padding: var(--sk-sp-12) var(--sk-sp-16);
  cursor: pointer;
  color: var(--sk-theme-link);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-concept__details > summary::marker { color: var(--sk-raw-color-primary); }
.sk-concept__details[open] > summary { border-bottom: 1px solid var(--sk-theme-border); }
.sk-concept__content {
  display: grid;
  gap: var(--sk-sp-24);
  padding: var(--sk-sp-20);
}
.sk-concept__section { min-width: 0; }
.sk-concept__section h3,
.sk-concept__section h4 { margin: 0 0 var(--sk-sp-10); }
.sk-concept__section h3 { font-size: var(--sk-fs-body); }
.sk-concept__section h4 { font-size: var(--sk-fs-body-sm); }
.sk-concept__section ul { margin-bottom: 0; }
.sk-concept__section li,
.sk-concept__text {
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: var(--sk-typography-line-height-reading);
}
.sk-concept__text { margin: 0; color: var(--sk-theme-text-secondary); }
.sk-highlight {
  padding: 0 0.12em;
  border-radius: 0.2em;
  color: inherit;
  font-weight: var(--sk-typography-weight-bold);
}
.sk-highlight--key {
  background: var(--sk-semantic-feedback-warning-background);
  box-shadow: inset 0 -2px 0 var(--sk-semantic-feedback-warning-border);
}
.sk-highlight--positive {
  background: var(--sk-semantic-feedback-success-background);
  box-shadow: inset 0 -2px 0 var(--sk-semantic-feedback-success-border);
}
.sk-concept__subsection + .sk-concept__subsection {
  margin-top: var(--sk-sp-16);
  padding-top: var(--sk-sp-16);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-concept__formulas {
  display: grid;
  gap: var(--sk-sp-8);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sk-concept__formulas li {
  padding: var(--sk-sp-10) var(--sk-sp-12);
  border-inline-start: 3px solid var(--sk-raw-color-primary);
  background: var(--sk-theme-surface);
  font-weight: var(--sk-typography-weight-medium);
}
.sk-concept__callout {
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-semantic-feedback-info-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-semantic-feedback-info-background);
}
.sk-concept__callout strong { display: block; margin-bottom: var(--sk-sp-6); }
.sk-concept__callout--mnemonic {
  border-color: var(--sk-semantic-feedback-success-border);
  background: var(--sk-semantic-feedback-success-background);
}
.sk-concept__tablewrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
}
.sk-concept__table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  background: var(--sk-theme-surface);
  font-size: var(--sk-fs-body-sm);
}
.sk-concept__table th,
.sk-concept__table td {
  padding: var(--sk-sp-10) var(--sk-sp-12);
  border-bottom: 1px solid var(--sk-theme-border);
  text-align: start;
  vertical-align: top;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.sk-concept__table th { background: var(--sk-theme-surface-muted); }
.sk-concept__table tbody tr:last-child td { border-bottom: 0; }
.sk-concept__traps {
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-semantic-feedback-warning-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-semantic-feedback-warning-background);
}
.sk-concept__example {
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface);
}
.sk-concept__examplehead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-sp-8);
}
.sk-concept__stem { color: var(--sk-theme-text); font-weight: var(--sk-typography-weight-medium); }
.sk-concept__options {
  display: grid;
  gap: var(--sk-sp-8);
  list-style: none;
  margin-bottom: 0;
  padding-inline-start: 0;
}
.sk-concept__option--answer {
  padding: var(--sk-sp-8);
  border: 1px solid var(--sk-semantic-feedback-success-border);
  border-radius: var(--sk-r-s);
  background: var(--sk-semantic-feedback-success-background);
}
.sk-concept__answer-note {
  margin: var(--sk-sp-12) 0 0;
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
  color: var(--sk-theme-text-muted);
  font-size: var(--sk-fs-caption);
}
.sk-concept__reveal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-sp-10);
  margin-top: var(--sk-sp-12);
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-concept__reveal > * + * { margin-top: 0; }
.sk-concept__reveal span { color: var(--sk-theme-text-muted); font-size: var(--sk-fs-caption); }
.sk-concept__solution {
  margin-top: var(--sk-sp-12);
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-semantic-feedback-success-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-semantic-feedback-success-background);
}
.sk-concept__solution p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sk-concept__solution p + p { margin-top: var(--sk-sp-10); }
.sk-concept__foot {
  margin: 0;
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
}
/* Where search lands. Zero JS, and it survives a refresh. */
.sk-concept:target { border-color: var(--sk-raw-color-primary); }

@media (max-width: 560px) {
  .sk-concept { padding: var(--sk-sp-16); }
  .sk-concept__content { padding: var(--sk-sp-16); }
  .sk-concept__table { min-width: 30rem; }
}

/* ==========================================================================
   12c. 沉浸式課程殼與原生作答卡
   ========================================================================== */
body:has(.sk-course) { overflow: hidden; }
body:has(.sk-course) > .sk-header,
body:has(.sk-course) > .sk-footer,
body:has(.sk-course) > .sk-dock,
body:has(.sk-course) > .sk-skip-link { display: none; }
body:has(.sk-course) > .sk-main { max-width: none; height: 100dvh; margin: 0; padding: 0; }

/* 這一層是全站唯一蓋滿視窗的元素,所以它塗什麼,會員就整天看什麼。
   在 2026-09-07 之前它只塗 canvas 純色,把 body 那組四層放射狀漸層整片遮住——
   商店頁有層次、客戶待最久的學習頁反而最平。漸層本身早就在設計契約裡
   (semantic.themes.*.canvas_gradient),與成品逐字相同,只是這裡沒吃到。
   background-attachment 在 fixed 定位下等同不動,內容捲的是 __viewport。 */
.sk-course {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background-color: var(--sk-theme-canvas);
  background-image: var(--sk-theme-canvas-gradient);
  background-attachment: fixed;
}
.sk-coursebar {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sk-sp-14);
  padding: 11px var(--sk-sp-18, 18px);
  border-bottom: 1px solid var(--sk-theme-border);
  background: var(--sk-theme-surface-strong);
  -webkit-backdrop-filter: var(--sk-blur-surface);
  backdrop-filter: var(--sk-blur-surface);
}
.sk-coursebar__title { min-width: 0; text-align: center; }
.sk-coursebar__title strong,
.sk-coursebar__title h1 { display: block; overflow: hidden; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
/* 2026-10-04（小修 F6）：頂欄副標與試讀摘要 11.5px（手機試讀頁 10.5px）提到 12px。
   標題是 15px（手機試讀 13.5px），副標不再往上提，免得兩行一樣大。 */
.sk-coursebar__subtitle { display: block; overflow: hidden; color: var(--sk-theme-text-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.sk-course--trial .sk-coursebar__title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sk-sp-12);
}
.sk-course--trial .sk-coursebar__title h1 { flex: 0 1 auto; }
.sk-coursebar__trial-summary {
  display: flex;
  flex: 0 1 auto;
  align-items: baseline;
  min-width: 0;
  overflow: hidden;
  color: var(--sk-theme-text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.sk-coursebar__trial-summary > span { overflow: hidden; text-overflow: ellipsis; }
.sk-coursebar__trial-summary > span:first-child { color: var(--sk-theme-ink-accent); font-weight: var(--sk-typography-weight-semibold); }
.sk-coursebar__trial-divider { flex: none; padding-inline: var(--sk-sp-8); color: var(--sk-theme-border-strong); }
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  background: var(--sk-theme-canvas);
  opacity: 1;
  visibility: visible;
  transition: opacity 280ms var(--sk-motion-ease), visibility 0s linear 0s;
}
  display: grid;
  justify-items: center;
  gap: 9px;
  max-width: min(440px, calc(100vw - 32px));
  padding: 26px 30px;
  text-align: center;
}
  width: 30px;
  height: 30px;
  border: 3px solid var(--sk-theme-border-strong);
  border-top-color: var(--sk-raw-color-primary);
  border-radius: 50%;
}
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-delay: 0s, 280ms;
}
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  border: 0;
  background: var(--sk-theme-canvas);
}
.sk-course__noscript {
  position: absolute;
  inset-inline: var(--sk-sp-16);
  bottom: var(--sk-sp-16);
  z-index: 2;
  margin: 0;
  padding: var(--sk-sp-10) var(--sk-sp-14);
  border: 1px solid var(--sk-semantic-feedback-warning-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-semantic-feedback-warning-background);
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-caption);
  text-align: center;
}
.sk-course__viewport { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.sk-course__inner.sk-learn { width: min(100%, var(--sk-page-max)); max-width: var(--sk-page-max); padding: var(--sk-sp-24) var(--sk-gutter) var(--sk-sp-70); }
.sk-course__meta {
  display: flex;
  align-items: center;
  gap: var(--sk-sp-14);
  flex-wrap: wrap;
  padding: var(--sk-sp-16) var(--sk-sp-20);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface);
}
.sk-course__meta .sk-course__subjects { flex: 1 1 360px; }
.sk-course__meta .sk-course-stats { flex: none; padding-top: 0; border-top: 0; }
.sk-course:not(.sk-course--home) .sk-course__meta { display: none; }
.sk-course-nav { top: 0; margin: var(--sk-sp-14) 0 var(--sk-sp-24); }
.sk-course__heading { margin: 0 0 var(--sk-sp-20); font-size: 32px; }
.sk-course__content { min-width: 0; }
/* 學習首頁的開場。2026-09-07 之前這裡是:32px 固定大標、20px 實色數字、
   38px 內距,整體像檔案表頭而不是產品首頁;證照成品的開場則是隨螢幕放大的
   大標配四個漸層數字與三倍留白。字級與留白照樣稿調整,顏色與版位不變。
   只作用在首頁(--home),其他分頁的標題維持原樣,那裡要的是安靜。 */
.sk-course__heading--certificate {
  font-size: var(--sk-fs-display-fluid);
  /* compact(1.25)在這個字級會把中文字的上下緣切掉,heading(1.32)才裝得下。 */
  line-height: var(--sk-typography-line-height-heading);
  letter-spacing: var(--sk-typography-letter-spacing-display);
  text-wrap: balance;
}
.sk-course--home .sk-learnstats {
  gap: var(--sk-sp-30);
}
.sk-course--home .sk-learnstats dd {
  font-size: var(--sk-fs-title);
  line-height: var(--sk-typography-line-height-compact);
}
.sk-course__content--home {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
  padding: var(--sk-sp-56) var(--sk-sp-38) var(--sk-sp-44);
  border: 1px solid var(--sk-theme-border);
  border-radius: 32px;
  background: var(--sk-theme-surface-strong);
  box-shadow: 0 28px 90px rgba(38, 28, 84, 0.12);
}
.sk-course__content--home::before,
.sk-course__content--home::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.sk-course__content--home::before { right: -90px; top: -120px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent 68%); opacity: 0.55; }
.sk-course__content--home::after { left: -70px; bottom: -140px; width: 340px; height: 340px; background: radial-gradient(circle, rgba(245, 158, 11, 0.22), transparent 68%); opacity: 0.5; }
.sk-course-home__grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sk-sp-14) !important; }
.sk-course-home__action { width: 100%; min-height: 64px; }
.sk-practice-launch { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sk-sp-14); }
.sk-practice-launch__item { min-width: 0; }
.sk-practice-mode { width: 100%; min-height: 86px; border-radius: var(--sk-r-l); background: var(--sk-theme-surface); box-shadow: var(--sk-shadows-card); }

.sk-practice-card {
  padding: var(--sk-sp-24);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface);
  box-shadow: var(--sk-shadows-card);
}
.sk-question-form > * + * { margin-top: 0; }
.sk-question { margin: 0; padding: 0; border: 0; }
.sk-question__legend {
  display: inline-flex;
  margin-bottom: var(--sk-sp-14);
  padding: var(--sk-sp-4) 11px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-caption);
}
.sk-question__stem { margin: 0 0 var(--sk-sp-18, 18px); overflow-wrap: anywhere; font-size: 16px; font-weight: var(--sk-typography-weight-semibold); }
.sk-question__options { display: grid; gap: var(--sk-sp-10); }
.sk-question-option { position: relative; }
.sk-question-option__input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sk-question-option__label {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: var(--sk-sp-12);
  margin: 0 !important;
  padding: var(--sk-sp-12) var(--sk-sp-14);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 14px;
  font-weight: var(--sk-typography-weight-medium) !important;
  line-height: 1.7;
  cursor: pointer;
  transition: border-color 0.16s var(--sk-ease), background-color 0.16s var(--sk-ease), transform 0.16s var(--sk-ease);
  overflow-wrap: anywhere;
}
.sk-question-option__label:hover { border-color: var(--sk-raw-color-primary-light); transform: translateY(-1px); }
.sk-question-option__key {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: 50%;
  background: var(--sk-theme-surface-strong);
  color: var(--sk-theme-text);
  font-weight: var(--sk-typography-weight-extrabold);
}
.sk-question-option__input:checked + .sk-question-option__label { border-color: var(--sk-raw-color-primary); background: var(--sk-semantic-selection-background); color: var(--sk-theme-text); }
.sk-question-option__input:checked + .sk-question-option__label .sk-question-option__key { border-color: var(--sk-raw-color-primary-dark); background: var(--sk-raw-color-primary-dark); color: #ffffff; }
.sk-question-option__input:focus-visible + .sk-question-option__label { outline: 2px solid var(--sk-theme-focus-ring); outline-offset: var(--sk-focus-offset); }
.sk-practice-card__actions { display: flex; gap: var(--sk-sp-10); flex-wrap: wrap; margin: var(--sk-sp-18, 18px) 0 0; }
.sk-result-option-cards { display: grid; gap: var(--sk-sp-10); margin: var(--sk-sp-12) 0 var(--sk-sp-24); padding: 0; list-style: none; }
.sk-result-option-card { padding: var(--sk-sp-14); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-m); background: var(--sk-theme-surface-muted); }
.sk-result-option-card > p { margin-bottom: 0; }
.sk-resultoption--correct, .sk-resultoption--selected-correct { border-color: var(--sk-semantic-feedback-success-border); background: var(--sk-semantic-feedback-success-background); }
.sk-resultoption--selected-wrong { border-color: var(--sk-semantic-feedback-error-border); background: var(--sk-semantic-feedback-error-background); }
.sk-explanation-card { margin-top: var(--sk-sp-24); padding: var(--sk-sp-20); border: 1px solid color-mix(in srgb, var(--sk-raw-color-accent) 30%, var(--sk-theme-border)); border-radius: var(--sk-r-l); background: var(--sk-theme-heat-bg); }
.sk-explanation-card h2 { margin-top: var(--sk-sp-18, 18px); font-size: var(--sk-fs-body); }
.sk-explanation-card h2:first-child { margin-top: 0; }
.sk-explanation-card p { margin-bottom: 0; line-height: var(--sk-typography-line-height-reading); }
.sk-course-state { max-width: 720px; margin: var(--sk-sp-56) auto; padding: var(--sk-sp-30); border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-xl); background: var(--sk-theme-surface); box-shadow: var(--sk-shadows-card); }

@media (max-width: 560px) {
  .sk-coursebar { grid-template-columns: auto minmax(0, 1fr); gap: var(--sk-sp-10); padding: 9px var(--sk-sp-12); }
  .sk-coursebar__rights { display: none; }
  .sk-coursebar__back { padding-inline: var(--sk-sp-10); }
  .sk-course--trial .sk-coursebar {
    grid-template-areas: "back title";
    grid-template-columns: auto minmax(0, 1fr);
    row-gap: 0;
  }
  .sk-course--trial .sk-coursebar__back { grid-area: back; justify-self: start; }
  .sk-course--trial .sk-coursebar__title {
    grid-area: title;
    display: block;
    text-align: center;
  }
  .sk-course--trial .sk-coursebar__title h1 { font-size: 13.5px; }
  .sk-course--trial .sk-coursebar__rights { display: none; }
  .sk-course--trial .sk-coursebar__trial-summary { display: block; margin-top: 2px; font-size: 12px; }
  .sk-course--trial .sk-coursebar__trial-summary > span:not(:first-child) { display: none; }
  .sk-course__inner.sk-learn { padding: var(--sk-sp-16) var(--sk-sp-16) var(--sk-sp-56); }
  .sk-course__heading { font-size: var(--sk-fs-title); }
  .sk-course__meta { align-items: flex-start; padding: var(--sk-sp-14); }
  .sk-course__content--home { min-height: 0; padding: var(--sk-sp-22); border-radius: var(--sk-r-xl); }
  .sk-course-home__grid { grid-template-columns: 1fr; }
  .sk-practice-launch { grid-template-columns: 1fr; }
  .sk-practice-card { padding: var(--sk-sp-16); }
  .sk-question-option__label { grid-template-columns: 30px minmax(0, 1fr); padding: var(--sk-sp-10) var(--sk-sp-12); }
  .sk-question-option__key { width: 30px; height: 30px; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */
.sk-footer {
  flex-shrink: 0;
  margin-top: var(--sk-sp-44);
  border-top: 1px solid var(--sk-theme-border);
  background: var(--sk-theme-surface);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.sk-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vw, 48px);
  max-width: var(--sk-page-max);
  margin: 0 auto;
  padding: var(--sk-sp-56) var(--sk-gutter) var(--sk-sp-24);
}
.sk-footer__brand { display: grid; justify-items: center; text-align: center; }
.sk-footer__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  width: min(100%, 720px);
  margin-inline: auto;
}
.sk-footer__name {
  font-size: var(--sk-fs-title-sm);
  font-weight: var(--sk-typography-weight-black);
}
.sk-footer__brandmark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--sk-theme-text);
  text-decoration: none;
}
.sk-footer__brandmark img {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  object-fit: contain;
}
.sk-footer__brandmark .sk-footer__logo--full { width: 52px; height: 52px; }
.sk-footer__brandmark strong { display: block; font-size: 17px; font-weight: 900; line-height: 1.25; }
/* 2026-10-04（小修 F6）：10.5px 提到 12px；頁尾目前只印站名，這條沒有對到元素，先定好下限。 */
.sk-footer__brandmark small { display: block; font-size: 12px; letter-spacing: 0.06em; color: var(--sk-theme-text-muted); }
.sk-footer__brandlead { margin: var(--sk-sp-14) 0 0; font-size: 13.5px; font-weight: var(--sk-typography-weight-bold); }
.sk-footer__tagline {
  margin: var(--sk-sp-14) 0 0;
  font-size: var(--sk-fs-body-sm);
  line-height: 1.8;
  color: var(--sk-theme-text-secondary);
  max-width: 46ch;
}
.sk-footer__heading {
  margin: 0 0 var(--sk-sp-12);
  font-size: 13.5px;
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: 0.06em;
  color: var(--sk-theme-text);
}
.sk-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sk-footer__col li { margin-bottom: 9px; font-size: 14px; color: var(--sk-theme-text-muted); }
.sk-footer__col a { color: var(--sk-theme-text-secondary); text-decoration: none; }
.sk-footer__col a:hover { color: var(--sk-theme-link); text-decoration: underline; }
.sk-footer__base {
  max-width: var(--sk-page-max);
  margin: 0 auto;
  padding: 16px var(--sk-gutter) var(--sk-sp-24);
  border-top: 1px solid var(--sk-theme-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sk-sp-12);
  justify-items: center;
  align-items: center;
  text-align: center;
}
.sk-footer__notice, .sk-footer__rights, .sk-footer__review {
  margin: 0;
  font-size: var(--sk-fs-body-sm);
  line-height: 1.75;
  color: var(--sk-theme-text-secondary);
}
.sk-footer__rights { max-width: 76ch; }
.sk-footer__rights { justify-self: center; max-width: none; text-align: center; white-space: normal; }
/* Keep the final disclosure on the full footer row. The base is one column now,
   and this continues to make that intent explicit if the grid changes again. */
.sk-footer__review { grid-column: 1 / -1; }
/* ==========================================================================
   14. Admin — dense, utilitarian, deliberately not marketed
   ========================================================================== */
.admin-readonly {
  border-color: var(--sk-semantic-feedback-warning-border);
  background: var(--sk-semantic-feedback-warning-background);
  color: var(--sk-semantic-feedback-warning-foreground);
}
.undecided { color: var(--sk-theme-text-muted); font-style: italic; }
/* 中文為主、代碼小字（2026-09-20）：代碼還在，但退到第二眼才看得到。 */
.admin-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em;
  color: var(--sk-theme-text-muted);
  /*
   * anywhere，不是 break-all。兩者都能讓一長串 UUID 在窄欄位裡換行，差別是
   * break-all 不管放不放得下都照切，所以 allow 被切成 al／low、hold 被切成
   * ho／ld——後台「決策」欄整欄都是這種兩行的碎字（2026-09-23 目視發現）。
   * anywhere 只在整個字真的放不下時才切，短代碼因此保持完整。
   */
  overflow-wrap: anywhere;
}

/* ==========================================================================
   15. Responsive
   --------------------------------------------------------------------------
   Custom properties cannot be used in a media condition, so the breakpoints
   are written out. The component-specific stack values above follow the
   sample's 1080, 860, 560, and 390 transitions.
   ========================================================================== */
@media (max-width: 1080px) {
  .sk-pdp { grid-template-columns: 1fr; }
  .sk-buybox { position: static; }
  /* 2026-09-08 實測 F13:單欄時圖庫先佔滿整個首屏(主圖是整個視窗寬的正方形),
     商品名、價格與試讀入口被推到第二屏。單欄把購買區排到圖庫前面,主圖高度也封頂。 */
  .sk-pdp > .sk-buybox { order: -1; }
  .sk-gallery__main { width: auto; max-width: 100%; max-height: min(480px, 58vh); margin-inline: auto; }
  .sk-owned-card { grid-template-columns: 200px minmax(0, 1fr); }
  .sk-owned-card--no-cover { grid-template-columns: 1fr; }
  .sk-practice-launch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-footer__base { grid-template-columns: 1fr; }
  .sk-footer__rights { justify-self: center; text-align: center; white-space: normal; }
}

@media (max-width: 860px) {
  .sk-drawer__trigger { display: inline-flex; }
  .sk-drawer__panel {
    position: absolute;
    inset-inline: var(--sk-gutter);
    margin-top: var(--sk-sp-12);
    padding: var(--sk-sp-16);
    background: var(--sk-theme-surface-elevated);
    border: 1px solid var(--sk-theme-border-strong);
    border-radius: var(--sk-r-xl);
    box-shadow: var(--sk-shadows-floating);
    z-index: var(--sk-z-index-drawer);
    /* A menu taller than the screen scrolls inside itself (2026-09-25). Before,
       the panel had no height limit, and on an iPhone its lower entries hung
       below the bottom edge where nothing could scroll them into view: the
       page behind does not move the header, and the panel lives in the header.

       The 100% is the header's height (this panel's containing block is the
       sticky header), so the limit follows the header when it wraps onto two
       rows at 480px and below; the panel starts at the header's last row, so
       what is left is the rest of the screen less a small gap and less the
       home-indicator strip (the page opts into it with viewport-fit=cover).
       The vh line is for browsers without dvh; dvh follows the iPhone toolbars
       as they come and go, so the bottom entry is never under them.

       Only in this phone block: on a computer the panel is the header row, and
       a scrolling box there would clip the links' hover shadow and focus ring.

       overscroll-behavior stops a scroll that reaches the end from carrying on
       into the page behind. The panel stays absolute on purpose: making it
       fixed would not pin it to the screen, because the header has a
       backdrop-filter, and that makes the header the containing block of its
       fixed descendants as well. */
    max-height: calc(100vh - 100% - var(--sk-sp-24) - var(--sk-safe-area-bottom));
    max-height: calc(100dvh - 100% - var(--sk-sp-24) - var(--sk-safe-area-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .sk-nav { flex-direction: column; align-items: stretch; }
  /* Centred, the card styling unchanged (創辦人核可的選單改版, 2026-09-25). */
  .sk-nav a { padding: var(--sk-sp-12) var(--sk-sp-16); text-align: center; }
  .sk-theme legend { display: none; }
  .sk-footer__inner { gap: var(--sk-sp-24); }
  .sk-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sk-footer__base { grid-template-columns: 1fr; }
  .sk-footer__rights { justify-self: center; text-align: center; }
  .sk-main { padding-top: var(--sk-sp-24); padding-bottom: 96px; }
  .sk-hero { padding-top: var(--sk-sp-24); }
}

@media (max-width: 480px) {
  /* Keep the header to one row. Brand + drawer + theme picker wrapped onto a
     second line at 375px, and a sticky header 130px tall eats a sixth of a
     phone screen on every scroll. The theme control keeps all three options and
     its no-JavaScript submit button — it just stops being roomy. */
  .sk-theme label { padding: 4px 6px; font-size: 12px; }
  .sk-theme button { padding: 4px 6px; font-size: 12px; }
  .sk-theme fieldset { padding: 2px; }
  .sk-theme { gap: var(--sk-sp-4); }
  .sk-drawer__trigger { padding: var(--sk-sp-8) var(--sk-sp-12); }
  .sk-header {
    gap: var(--sk-sp-8);
    /* The drawer's auto inline-start margin consumes the free space, which is
       what right-aligns the nav on a wide screen and what pushed the theme
       picker onto a second row on a narrow one. Space-between does the same job
       here without claiming the slack. */
    justify-content: space-between;
    /* Wrapping is the safety net, not the plan: the sizes above are meant to
       fit one row at 360px, but a longer brand name or a wider system font must
       push the theme picker onto a second line rather than off the screen.
       A horizontal scrollbar on a phone is worse than a taller header. */
    flex-wrap: wrap;
    row-gap: var(--sk-sp-8);
  }
  .sk-drawer { margin-inline-start: 0; }
  .sk-header__brand { font-size: var(--sk-fs-body); }
}

@media (max-width: 400px) {
  /* The unified account CTA is longer than the old two-character login label.
     Keep both the logo and the approved visible site name, then recover the
     space from gaps and control padding so the no-dock header still fits. */
  .sk-header__brand { gap: 6px; }
  .sk-header__logo,
  .sk-header__logo.sk-header__logo--avatar { width: 32px; height: 32px; }
  .sk-header__names strong { font-size: 14px; }
  .sk-drawer__trigger { padding: 6px 8px; font-size: 12px; }
  .sk-header__actions { gap: var(--sk-sp-4); }
  .sk-header__cta { padding-inline: 9px; font-size: 12px; }
}

@media (max-width: 560px) {
  .sk-main { padding-inline: var(--sk-sp-16); }
  .sk-grid { grid-template-columns: 1fr; }
  .sk-footer__inner { padding: var(--sk-sp-38) var(--sk-sp-16) var(--sk-sp-20); }
  .sk-footer__links { grid-template-columns: 1fr; gap: var(--sk-sp-22); }
  .sk-footer__base { padding-inline: var(--sk-sp-16); }
  .sk-gallery__thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sk-header__logo { width: 38px; height: 38px; border-radius: 12px; }
  .sk-pdpstats { gap: var(--sk-sp-6); padding: var(--sk-sp-10); }
  .sk-owned-card { grid-template-columns: 1fr; }
  .sk-account-links ul { grid-template-columns: 1fr; }
  .sk-owned-card__cover { border-right: 0; border-bottom: 1px solid var(--sk-theme-border); }
  .sk-owned-card__cover img { aspect-ratio: 16 / 10; }
  .sk-owned-card__body { padding: var(--sk-sp-18, 18px); }
  .sk-owned-card__body h2 { font-size: var(--sk-fs-title-sm); }
  .sk-library__more { padding: var(--sk-sp-30) var(--sk-sp-18, 18px); }
}

@media (max-width: 390px) {
  .sk-header { gap: var(--sk-sp-8); padding-inline: var(--sk-sp-16); }
  .sk-main { padding-inline: var(--sk-sp-16); }
  .sk-footer__inner { padding-inline: var(--sk-sp-16); }
  .sk-footer__links { grid-template-columns: 1fr; }
  .sk-footer__base { padding-inline: var(--sk-sp-16); }
  .sk-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   15b. The bottom dock — one bar, two rows
   --------------------------------------------------------------------------
   樣稿 v2 fixes a tab bar and a buy bar to the bottom independently and orders
   them with z-index 300/310, so the buy bar covers the tab bar outright. Here
   they are two children of one fixed container: the browser stacks them, and
   neither can hide the other. (The tab bar went on 2026-09-24; the buy bar is
   the one row left.)

   The z-index values are the contract's — tabbar 130, sticky_buy 140. This
   note used to say they keep the dock under the drawer panel (310). They do
   not: the sticky header is one stacking layer at 120, and the panel's 310
   only counts inside it, so on a phone product page the buy bar painted over
   the open menu. The dock is hidden while the menu is open instead (the
   max-width 860px block below, 2026-09-25).
   ========================================================================== */
.sk-dock {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--sk-z-index-tabbar);
  flex-direction: column;
  padding-bottom: var(--sk-safe-area-bottom);
  background: var(--sk-theme-surface-strong);
  -webkit-backdrop-filter: var(--sk-blur-surface);
  backdrop-filter: var(--sk-blur-surface);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-dock a:focus-visible {
  outline: 2px solid var(--sk-theme-focus-ring);
  outline-offset: var(--sk-focus-offset);
}

.sk-stickybuy {
  position: relative;
  z-index: var(--sk-z-index-sticky-buy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-sp-12);
  padding: var(--sk-sp-10) var(--sk-gutter);
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-stickybuy .sk-price { margin: 0; }
.sk-stickybuy .sk-btn { flex: none; }
/* 購物車上線後這一條有兩顆鍵。包一格，space-between 才還是「價格靠左、
   動作靠右」；沒有購物車時這一格裡只有一顆鍵，畫面與以前逐像素相同。 */
.sk-stickybuy__actions { display: inline-flex; align-items: center; gap: var(--sk-sp-8); }

.sk-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.sk-tabbar a {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px var(--sk-sp-4) var(--sk-sp-10);
  font-size: var(--sk-fs-tiny);
  font-weight: var(--sk-typography-weight-bold);
  line-height: 1.3;
  color: var(--sk-theme-text-muted);
  text-decoration: none;
  min-width: 0;
  transition: color .16s var(--sk-ease), background-color .16s var(--sk-ease);
}
.sk-tabbar a:hover { color: var(--sk-theme-text); background: color-mix(in srgb, var(--sk-raw-color-primary) 8%, transparent); }
.sk-tabbar a span { white-space: nowrap; }
.sk-tabbar a i { font-style: normal; font-size: 17px; line-height: 1; }
.sk-tabbar a[aria-current="page"] {
  color: var(--sk-theme-ink-info);
  font-weight: var(--sk-typography-weight-bold);
  background: color-mix(in srgb, var(--sk-raw-color-primary) 10%, transparent);
}
.sk-tabbar a[aria-current="page"]::after {
  content: "";
  position: absolute;
  inset: auto 28% 4px;
  height: 3px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-raw-color-primary);
}

@media (max-width: 860px) {
  .sk-dock { display: flex; }
  /* While the menu is open the buy bar would sit on top of it (see the note
     above this section), so it steps aside until the menu closes. An engine
     without :has() drops this rule and keeps the bar, which is what every
     phone did before 2026-09-25. */
  body:has(.sk-drawer[open]) .sk-dock { display: none; }
  .sk-header__cta--dock-hidden { display: none; }
  /* sticky_action in the token contract: "never covers answer options,
     confirmation controls or footer". Scoped with :has() so a page without a
     dock keeps its footer where it is; engines without :has() drop both rules
     and keep the unconditional reservation below, which is the safe direction. */
  .sk-footer { padding-bottom: calc(var(--sk-sp-70) + var(--sk-safe-area-bottom)); }
  body:has(.sk-stickybuy) .sk-footer {
    padding-bottom: calc(var(--sk-sp-70) + var(--sk-sp-56) + var(--sk-safe-area-bottom));
  }
  body:not(:has(.sk-dock)) .sk-footer { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sk-particles { display: none; }
  .sk-product:hover { transform: none; }
  .sk-disclosure,
  .sk-disclosure__summary::after,
  .sk-disclosure__body,
  .sk-disclosure__action-arrow,
  .sk-gallery__thumbs a,
  .sk-reviews__trigger::after,
  .sk-reviews__trigger img,
  .sk-theme__icon,
  .sk-lightbox[open] { animation: none; transition: none; transform: none; }
}

/* Windows high-contrast mode.

   forced-colors replaces the whole palette with the user's, and discards
   box-shadow and background-image entirely. Anything whose meaning is carried by
   a shadow or a tinted background disappears — so the focus ring and the badges
   are restated here in system colours, which forced-colors keeps.

   Highlight and CanvasText are the system keywords, not colours we picked;
   they are the only values that survive this mode. */
@media (forced-colors: active) {
  .sk-particles { display: none; }
  :focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  .sk-theme input:focus-visible + label {
    outline: 2px solid Highlight;
    outline-offset: var(--sk-focus-offset);
  }
  /* Badges are a tinted background plus a word. The tint goes; the border keeps
     the boundary, and the word was always doing the real work. */
  .sk-badge, .sk-theme input:checked + label { border: 1px solid CanvasText; }
  .sk-cattools .sk-chip input + label,
  .sk-cattools .sk-segment input + label,
  .sk-cattools .sk-filter-link { border: 1px solid CanvasText; }
  .sk-cattools .sk-filter-link--active,
  .sk-cattools .sk-filter-link[aria-current="page"] {
    forced-color-adjust: none;
    border: 2px solid Highlight;
    background: Highlight;
    color: HighlightText;
    box-shadow: none;
  }
  .sk-cattools .sk-chip input:focus-visible + label,
  .sk-cattools .sk-segment input:focus-visible + label,
  .sk-cattools .sk-filter-link:focus-visible,
  .sk-disclosure__summary:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: var(--sk-focus-offset);
  }
  .sk-disclosure[open] { border: 2px solid Highlight; }
  .sk-disclosure__marker,
  .sk-disclosure__summary::after { border: 1px solid CanvasText; }
  .sk-gallery__thumbs a[aria-current="true"],
  .sk-tabbar a[aria-current="page"] { border: 2px solid Highlight; }
  .sk-gallery__thumbs a[aria-current="true"]::after { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .sk-lightbox { border: 2px solid CanvasText; }
  .sk-lightbox__close { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  /* An invalid field is a red border plus a message. The tint goes; the border
     has to get thicker to survive as the boundary, and the message was always
     the part that said what was wrong. */
  .sk-field :is(input, select, textarea)[aria-invalid="true"] { border: 2px solid CanvasText; }
  /* The OTP cells are drawn entirely in background-image, which this mode
     discards — without this the field renders as nothing at all. */
  .sk-otp input { border: 1px solid CanvasText; }
  /* Gradient text renders as nothing when background-image is dropped. */
  .sk-gradient-text,
  .sk-header__brand,
  .sk-hero__accent,
  .sk-footer__name {
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}

/* =====================================================================
 * 永續試點(2026-09-09):照成品還原的考點頁結構。
 *
 * 全部掛在 .sk-course--pilot 底下(提案 §六「共用樣式隔離」):其他證照的畫面一條
 * 都吃不到。每條規則後面的 L 數字是成品檔的行號
 * (_證照/永續發展/永續發展基礎能力測驗_互動筆記.html,2026-09-09 HEAD),值照抄;
 * 成品用 var(--card-bg)/var(--card-border)/var(--text-*) 的地方,這一批先對到本站
 * 同義的主題變數(第一批只還原「結構」,配色與字級的整套變數在下一批一起換)。
 * 分類代表色 --sk-cat 由 /learn/:handle/theme.css 依 [data-cat-id] 供給(成品 1162:
 * var(--kpcat, var(--c-primary)),沒有配色就退回主色)。
 * ===================================================================== */
.sk-course--pilot { --sk-cat: var(--sk-raw-color-primary); }
/* minmax(0, 1fr) 而不是 1fr:1fr 的最小值是 auto,卡內 440px 的對照表會把整欄撐寬,
   手機上每個分類表頭都被推出畫面(2026-09-09 第一次 390px 截圖抓到的)。 */
.sk-course--pilot .sk-pilot-concepts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.sk-course--pilot .sk-topic-card, .sk-course--pilot .sk-topic-card__extra, .sk-course--pilot .sk-kpg, .sk-course--pilot .sk-cat { min-width: 0; }
.sk-course--pilot .sk-pilot-concepts summary { list-style: none; }
.sk-course--pilot .sk-pilot-concepts summary::-webkit-details-marker { display: none; }

/* 導覽藥丸 .nav-tab L166–173(成品黏頂導覽的六顆;本站十顆同一套樣式) */
.sk-course--pilot .sk-course-nav__link { padding: 6px 12px; border-radius: 999px; background: transparent; border: 1px solid var(--sk-theme-border); color: var(--sk-theme-text-secondary); font-size: 12px; text-decoration: none; transition: all .3s; white-space: nowrap; }
.sk-course--pilot .sk-course-nav__link:hover, .sk-course--pilot .sk-course-nav__link[aria-current="page"] { background: #6366f1; color: #fff; border-color: #6366f1; }

/* 首頁英雄區 .hero L198–238(成品在頁首,padding 130px 是為了讓出黏頂導覽;本站已有課程列,上緣縮成 24px)
   .gradient-text 取 .sticky-nav .logo L160 的漸層字;統計卡 .stat-card L222、.stat-num L231、.stat-lbl L238;手機 .stat-row 兩欄 L1083 */
.sk-course--pilot .sk-hero { padding: 24px 24px 40px; text-align: center; position: relative; z-index: 1; }
.sk-course--pilot .sk-hero__badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; margin: 0 0 24px; background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--sk-theme-text-secondary); }
.sk-course--pilot .sk-hero__title { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.2; margin: 0 auto 18px; max-width: 900px; }
.sk-course--pilot .sk-hero__gradient { background: linear-gradient(135deg, #818cf8, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-course--pilot .sk-hero__sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--sk-theme-text-secondary); margin: 0 auto 36px; max-width: 720px; line-height: 1.7; }
.sk-course--pilot .sk-hero__sub strong { color: var(--sk-theme-text); }
.sk-course--pilot .sk-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 880px; margin: 0 auto; }
.sk-course--pilot .sk-hero__stat { background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); border-radius: 14px; padding: 22px 16px; text-align: center; transition: all .3s; }
.sk-course--pilot .sk-hero__stat:hover { transform: translateY(-3px); border-color: #818cf8; }
.sk-course--pilot .sk-hero__num { margin: 0; font-weight: 800; font-size: clamp(28px, 4vw, 38px); line-height: 1; background: linear-gradient(135deg, #818cf8, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sk-course--pilot .sk-hero__lbl { font-size: 13px; color: var(--sk-theme-text-muted); margin-top: 8px; font-weight: 400; }
@media (max-width: 720px) {
  .sk-course--pilot .sk-hero { padding: 12px 8px 30px; }
  .sk-course--pilot .sk-hero__stats { grid-template-columns: repeat(2, 1fr); }
  /* 本站的卡比成品窄(課程殼有自己的內距),「113–115」在 28px 會折成兩行;成品用 Inter 的窄數字沒這個問題。 */
  .sk-course--pilot .sk-hero__stat { padding: 18px 8px; }
  .sk-course--pilot .sk-hero__num { font-size: clamp(22px, 7vw, 28px); white-space: nowrap; }
}

/* 練習台 .practice-stats L654–663、.q-header L685–729、.q-stem L733、.opt-list L735、.opt-btn L736–772、
   .prac-nav-bottom L638–639、.btn L632–652、.answer-box L675–785、.expl-card L788–837、.q-concept-* L700–711 */
.sk-course--pilot .sk-prac { display: block; }
.sk-course--pilot .sk-prac__stats { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--sk-theme-border); font-size: 13px; color: var(--sk-theme-text-muted); }
.sk-course--pilot .sk-prac__stats strong { color: var(--sk-theme-text); }
.sk-course--pilot .sk-prac__ok strong { color: #10b981; font-size: 16px; }
.sk-course--pilot .sk-prac__ng strong { color: #f43f5e; font-size: 16px; }
.sk-course--pilot .sk-prac__rate strong { color: #f59e0b; font-size: 16px; }
.sk-course--pilot .sk-q__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; font-size: 12px; color: var(--sk-theme-text-muted); flex-wrap: wrap; }
.sk-course--pilot .sk-q__tags { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sk-course--pilot .sk-q__tag { background: rgba(99,102,241,.10); color: #818cf8; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.sk-course--pilot .sk-q__tag--recur { background: linear-gradient(135deg, #f59e0b, #f97316); color: #fff; font-weight: 700; }
.sk-course--pilot .sk-q__topic { color: var(--sk-theme-text-secondary); }
.sk-course--pilot .sk-q__progress { color: var(--sk-theme-text-muted); font-weight: 600; }
.sk-course--pilot .sk-q__stem { font-size: 16px; color: var(--sk-theme-text); margin: 6px 0 20px; line-height: 1.7; font-weight: 500; }
.sk-course--pilot .sk-prac__question { border: 0; margin: 0; padding: 0; min-width: 0; }
.sk-course--pilot .sk-opt-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sk-course--pilot .sk-opt { position: relative; }
.sk-course--pilot .sk-opt__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sk-course--pilot .sk-opt__btn { width: 100%; box-sizing: border-box; text-align: left; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--sk-theme-border); background: var(--sk-theme-surface); color: var(--sk-theme-text); font-size: 14px; line-height: 1.55; transition: all .18s; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.sk-course--pilot .sk-opt__letter { width: 28px; height: 28px; border-radius: 50%; background: rgba(99,102,241,.10); color: #818cf8; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.sk-course--pilot .sk-opt__input:not(:disabled) + .sk-opt__btn:hover { border-color: #818cf8; transform: translateX(4px); background: rgba(99,102,241,.05); }
.sk-course--pilot .sk-opt__input:not(:disabled) + .sk-opt__btn:hover .sk-opt__letter { background: #6366f1; color: #fff; }
.sk-course--pilot .sk-opt__input:checked + .sk-opt__btn { border-color: #6366f1; background: rgba(99,102,241,.08); }
.sk-course--pilot .sk-opt__input:checked + .sk-opt__btn .sk-opt__letter { background: #6366f1; color: #fff; }
.sk-course--pilot .sk-opt__input:focus-visible + .sk-opt__btn { outline: 2px solid #6366f1; outline-offset: 2px; }
.sk-course--pilot .sk-opt__btn--graded { cursor: default; }
.sk-course--pilot .sk-opt__btn--correct { background: rgba(16,185,129,.12); border-color: #10b981; }
.sk-course--pilot .sk-opt__btn--correct .sk-opt__letter { background: #10b981; color: #fff; }
.sk-course--pilot .sk-opt__btn--wrong { background: rgba(239,68,68,.12); border-color: #f43f5e; }
.sk-course--pilot .sk-opt__btn--wrong .sk-opt__letter { background: #f43f5e; color: #fff; }
.sk-course--pilot .sk-prac__submit { margin: 14px 0 0; }
/* 有腳本時單選題點選項就送出(document.tsx 2f),送出鈕收起來;沒有腳本就留著。 */
html[data-sk-js] .sk-course--pilot .sk-prac__submit--single { display: none; }
.sk-course--pilot .sk-prac__nav { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-prac__btn { flex: 1 1 auto; text-align: center; justify-content: center; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 700; transition: all .2s; text-decoration: none; }
.sk-course--pilot .sk-prac__btn--primary { background: linear-gradient(135deg, #6366f1, #4338ca); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(99,102,241,.3); }
.sk-course--pilot .sk-prac__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(99,102,241,.45); color: #fff; }
.sk-course--pilot .sk-prac__btn--secondary { background: rgba(99,102,241,.06); color: var(--sk-theme-text-secondary); border: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-prac__btn--secondary:hover { background: rgba(99,102,241,.12); color: var(--sk-theme-text); }
.sk-course--pilot .sk-answer-box { margin-top: 18px; padding: 16px 18px; border-radius: 8px; border: 1px solid; position: relative; }
.sk-course--pilot .sk-answer-box--right { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); }
.sk-course--pilot .sk-answer-box--right .sk-answer-box__title { color: #10b981; font-weight: 700; }
.sk-course--pilot .sk-answer-box--wrong { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.3); }
.sk-course--pilot .sk-answer-box--wrong .sk-answer-box__title { color: #f43f5e; font-weight: 700; }
/* 只讀詳解 .answer-box.revealed L675 */
.sk-course--pilot .sk-answer-box--revealed { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.35); }
.sk-course--pilot .sk-answer-box--revealed .sk-answer-box__title { color: #f59e0b; font-weight: 700; }
.sk-course--pilot .sk-answer-box__note { font-size: 12px; font-weight: 500; color: var(--sk-theme-text-secondary); }
/* 在途(送出後等回應):不能再點,但欄位不能 disabled(表單資料要送得出去) */
.sk-course--pilot .sk-prac__form--inflight .sk-opt-list { pointer-events: none; opacity: .72; }
/* 題目頁裡插進來的考點卡面板(腳本 2i);返回鍵借 .sk-concepts-return 的固定樣式 */
.sk-course--pilot .sk-concept-panel { margin-top: 18px; padding-bottom: 70px; scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-16)); }
.sk-course--pilot .sk-concept-panel__return { cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; }
.sk-course--pilot .sk-answer-box__title { font-size: 15px; }
.sk-course--pilot .sk-answer-box__src { font-size: 12px; color: var(--sk-theme-text-muted); margin: 6px 0 0; }
.sk-course--pilot .sk-expl { margin-top: 14px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--sk-theme-border); background: var(--sk-theme-surface); }
.sk-course--pilot .sk-expl__header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; color: #818cf8; text-transform: uppercase; }
.sk-course--pilot .sk-expl__section { margin-bottom: 12px; }
.sk-course--pilot .sk-expl__section:last-child { margin-bottom: 0; }
.sk-course--pilot .sk-expl__label { font-size: 11px; font-weight: 700; color: #f59e0b; letter-spacing: .08em; margin-bottom: 6px; text-transform: uppercase; }
.sk-course--pilot .sk-expl__text { font-size: 13px; color: var(--sk-theme-text-secondary); line-height: 1.7; white-space: pre-line; }
.sk-course--pilot .sk-expl__wrong-list { display: flex; flex-direction: column; gap: 6px; }
.sk-course--pilot .sk-expl__wrong-item { font-size: 13px; color: var(--sk-theme-text-secondary); padding: 8px 12px; background: rgba(239,68,68,.05); border-left: 3px solid rgba(239,68,68,.5); border-radius: 4px; }
.sk-course--pilot .sk-expl__opt { color: #f43f5e; font-weight: 800; margin-right: 6px; }
.sk-course--pilot .sk-expl__key { padding: 10px 14px; background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); border-radius: 6px; font-size: 13px; color: var(--sk-theme-text-secondary); line-height: 1.6; white-space: pre-line; }
.sk-course--pilot .sk-q__concepts { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--sk-theme-border); border-radius: 14px; background: var(--sk-theme-surface); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sk-course--pilot .sk-q__concepts-label { color: var(--sk-theme-text-secondary); font-size: 13px; font-weight: 700; }
.sk-course--pilot .sk-q__concept-btn { min-height: 44px; padding: 9px 13px; border: 1px solid rgba(129,140,248,.55); border-radius: 999px; background: rgba(99,102,241,.12); color: var(--sk-theme-text); font-size: 13px; font-weight: 750; line-height: 1.35; text-decoration: none; display: inline-flex; align-items: center; }
.sk-course--pilot .sk-q__concept-btn:hover { border-color: #f59e0b; background: rgba(99,102,241,.2); }
.sk-course--pilot .sk-prac__extra { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--sk-theme-border); }
.sk-course--pilot .sk-prac__extra-heading { font-size: 15px; margin: 0 0 8px; }

/* 範圍控制列 .practice-control-card L621、.practice-controls L622–630、.recur-toggle L1300 段(成品在題目卡上方一張獨立卡;
   本站放在卡的最上緣,片段換卡時一起重畫) */
.sk-course--pilot .sk-prac-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-prac-range__group { display: flex; flex-direction: column; gap: 4px; }
.sk-course--pilot .sk-prac-range__group--links { gap: 6px; }
.sk-course--pilot .sk-prac-range__group--submit { margin-left: auto; }
.sk-course--pilot .sk-prac-range__lbl { font-size: 12px; color: var(--sk-theme-text-muted); }
.sk-course--pilot .sk-prac-range__select { min-height: 34px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--sk-theme-border); background: var(--sk-theme-surface); color: var(--sk-theme-text); font: inherit; font-size: 14px; }
.sk-course--pilot .sk-prac-range__check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; min-height: 34px; color: var(--sk-theme-text); }
.sk-course--pilot .sk-prac-range__check input { width: 16px; height: 16px; cursor: pointer; accent-color: #f59e0b; }
.sk-course--pilot .sk-prac-range__link { font-size: 13px; color: #818cf8; text-decoration: none; }
.sk-course--pilot .sk-prac-range__link:hover { text-decoration: underline; }
.sk-course--pilot .sk-prac-range .sk-prac__btn { flex: none; }

/* 固定返回鍵 .qcr-return L712–719(從考點卡回到剛才那題) */
.sk-course--pilot .sk-concepts-return { position: fixed; z-index: 9998; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 28px); min-height: 48px; margin: 0; padding: 11px 18px; border: 1px solid rgba(165,180,252,.8); border-radius: 999px; background: #312e81; color: #fff; box-shadow: 0 12px 34px rgba(0,0,0,.34); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sk-course--pilot .sk-concepts-return a { color: #fff; text-decoration: none; }

/* 錯題本空狀態 .start-screen L870–878(成品:圖示方塊＋一句話) */
.sk-course--pilot .sk-course-mistakes .sk-empty { text-align: center; padding: 40px 12px; color: var(--sk-theme-text-secondary); }
.sk-course--pilot .sk-course-mistakes .sk-empty::before { content: '🎯'; width: 64px; height: 64px; border-radius: 20px; background: linear-gradient(135deg, #6366f1, #a855f7); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 16px; box-shadow: 0 14px 36px rgba(99,102,241,.4); }

/* 概念地圖:分類色點(成品總覽 .cmap-dot L1135)與分類名 */
.sk-course--pilot .sk-map-category__name::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sk-cat); margin-right: 8px; vertical-align: middle; }
.sk-course--pilot .sk-map-category { padding-left: 12px; border-left: 3px solid var(--sk-cat); }

/* 總覽條 .cmap L1131–1139 */
.sk-course--pilot .sk-cmap { padding: 16px 18px; border-radius: 14px; background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-cmap__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--sk-theme-text-secondary); cursor: pointer; }
.sk-course--pilot .sk-cmap__head:hover { color: var(--sk-raw-color-primary); }
.sk-course--pilot .sk-cmap__arr { margin-left: auto; font-size: 10px; transition: transform .25s; }
.sk-course--pilot .sk-cmap[open] .sk-cmap__arr { transform: rotate(180deg); }
.sk-course--pilot .sk-cmap__body { margin-top: 12px; }
.sk-course--pilot .sk-cmap__group { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 11px; padding-left: 16px; }
.sk-course--pilot .sk-cmap__cat { flex-basis: 100%; display: flex; align-items: center; gap: 7px; margin-left: -16px; font-weight: 800; font-size: 14px; color: var(--sk-theme-text); }
.sk-course--pilot .sk-cmap__cat::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--sk-cat); }
.sk-course--pilot .sk-cmap__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12.5px; background: var(--sk-theme-surface-elevated); border: 1px solid var(--sk-theme-border); color: var(--sk-theme-text); text-decoration: none; transition: border-color .15s, transform .15s; }
.sk-course--pilot .sk-cmap__chip:hover { border-color: #818cf8; transform: translateY(-1px); }
.sk-course--pilot .sk-cmap__n { font-size: 11px; color: var(--sk-theme-text-muted); font-weight: 700; }

/* 分類區塊 .concept-section / .cat-header L257–356、L1140、L1162–1164 */
.sk-course--pilot .sk-cat__header { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); border-top: 4px solid var(--sk-cat); border-radius: 24px; padding: 28px 32px; position: relative; overflow: hidden; cursor: pointer; }
.sk-course--pilot .sk-cat__header::after { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; border-radius: 50%; opacity: .15; pointer-events: none; background: radial-gradient(circle, var(--sk-cat), transparent); }
.sk-course--pilot .sk-cat__header:hover { filter: brightness(1.05); }
.sk-course--pilot .sk-cat[open] > .sk-cat__header { margin-bottom: 24px; }
.sk-course--pilot .sk-cat__icon { width: 72px; height: 72px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; z-index: 1; background: linear-gradient(135deg, var(--sk-cat), color-mix(in srgb, var(--sk-cat) 60%, #000)); }
.sk-course--pilot .sk-cat__title { position: relative; z-index: 1; display: block; min-width: 0; }
.sk-course--pilot .sk-cat__label { display: inline-block; padding: 3px 10px; background: rgba(245,158,11,.15); color: #f59e0b; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .1em; margin-bottom: 6px; }
.sk-course--pilot .sk-cat__name { display: block; font-size: 24px; font-weight: 800; line-height: 1.3; margin-bottom: 4px; color: var(--sk-theme-text); }
.sk-course--pilot .sk-cat__toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(245,158,11,.15); color: #f59e0b; font-size: 12px; font-weight: 700; letter-spacing: .05em; vertical-align: middle; transition: all .2s; }
.sk-course--pilot .sk-cat__header:hover .sk-cat__toggle { background: rgba(245,158,11,.25); transform: translateX(2px); }
.sk-course--pilot .sk-cat__arr { display: inline-block; font-size: 10px; transition: transform .3s; }
.sk-course--pilot .sk-cat[open] .sk-cat__arr { transform: rotate(180deg); }
.sk-course--pilot .sk-cat__tagline { display: block; color: var(--sk-theme-text-secondary); font-size: 14px; font-weight: 400; }
.sk-course--pilot .sk-cat__desc { display: block; font-size: 13px; line-height: 1.65; color: var(--sk-theme-text-secondary); font-weight: 400; margin-top: 6px; max-width: 780px; }
.sk-course--pilot .sk-cat__stats { text-align: right; position: relative; z-index: 1; font-size: 12px; color: var(--sk-theme-text-muted); font-weight: 400; }
.sk-course--pilot .sk-cat__stats strong { display: block; color: var(--sk-theme-text); font-size: 20px; }
.sk-course--pilot .sk-cat__stats .sk-cat__stat-q { font-size: 14px; color: #f59e0b; }

/* 卡片 .topic-grid L331／358、.topic-card L366–475、L1128–1130 */
.sk-course--pilot .sk-topic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; list-style: none; margin: 0; padding: 0; }
.sk-course--pilot .sk-topic-card__details { background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); border-radius: 14px; padding: 22px; transition: border-color .3s, box-shadow .3s; scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-70)); }
.sk-course--pilot .sk-topic-card__details:not([open]) { padding-bottom: 14px; }
.sk-course--pilot .sk-topic-card__details:hover { border-color: #818cf8; box-shadow: 0 8px 24px rgba(99,102,241,.10); }
.sk-course--pilot .sk-topic-card__head { cursor: pointer; }
.sk-course--pilot .sk-topic-card__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sk-course--pilot .sk-topic-card__name { font-size: 17px; font-weight: 800; color: var(--sk-theme-text); flex: 1; }
.sk-course--pilot .sk-topic-card__count { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(99,102,241,.10); color: #818cf8; font-weight: 700; }
.sk-course--pilot .sk-topic-card__recur { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #f59e0b; background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.3); }
.sk-course--pilot .sk-topic-card__toggle { margin-left: auto; font-size: 12px; color: var(--sk-theme-text-muted); display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(99,102,241,.08); transition: all .2s; }
.sk-course--pilot .sk-topic-card__details:hover .sk-topic-card__toggle { background: rgba(99,102,241,.18); color: #818cf8; }
.sk-course--pilot .sk-topic-card__details[open] .sk-topic-card__toggle { background: rgba(245,158,11,.12); color: #f59e0b; }
.sk-course--pilot .sk-topic-card__arr { display: inline-block; font-size: 10px; transition: transform .3s; }
.sk-course--pilot .sk-topic-card__details[open] .sk-topic-card__arr { transform: rotate(180deg); color: #f59e0b; }
.sk-course--pilot .sk-topic-card__desc { display: block; font-size: 14px; color: var(--sk-theme-text-secondary); line-height: 1.65; font-weight: 400; }
.sk-course--pilot .sk-topic-card__extra { margin-top: 12px; user-select: text; animation: sk-card-expand .32s ease-out; }
.sk-course--pilot .sk-cat[open] > .sk-topic-grid { animation: sk-grid-expand .32s ease-out; }
/* 跳轉高亮 .topic-card.flash L427–435;展開動畫 cardExpand L419–422、gridExpand L362–365 */
.sk-course--pilot .sk-topic-card--flash { animation: sk-card-flash 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes sk-card-expand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sk-grid-expand { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sk-card-flash {
  0% { box-shadow: 0 0 0 0 rgba(245,158,11,0); border-color: var(--sk-theme-border); }
  20% { box-shadow: 0 0 0 4px rgba(245,158,11,.4), 0 12px 40px rgba(245,158,11,.3); border-color: #f59e0b; transform: scale(1.02); }
  60% { box-shadow: 0 0 0 6px rgba(245,158,11,.2), 0 10px 30px rgba(245,158,11,.15); border-color: #f59e0b; transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); border-color: var(--sk-theme-border); }
}
@media (prefers-reduced-motion: reduce) {
  .sk-course--pilot .sk-topic-card__extra, .sk-course--pilot .sk-cat[open] > .sk-topic-grid { animation: none; }
}
.sk-course--pilot .sk-topic-card__kws { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 14px; padding: 0; list-style: none; }
.sk-course--pilot .sk-kw-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(99,102,241,.06); color: var(--sk-theme-text-muted); border: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-topic-card__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.sk-course--pilot .sk-topic-card__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #818cf8; background: rgba(99,102,241,.08); padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(99,102,241,.2); transition: all .2s; text-decoration: none; }
.sk-course--pilot .sk-topic-card__cta:hover { background: #6366f1; color: #fff; border-color: #6366f1; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(99,102,241,.35); }
.sk-course--pilot .sk-topic-card__cta--recur { background: transparent; border: 1px solid #f59e0b; color: #f59e0b; }
.sk-course--pilot .sk-topic-card__cta--recur:hover { background: rgba(245,158,11,.12); color: #f59e0b; border-color: #f59e0b; box-shadow: none; transform: none; }
.sk-course--pilot .sk-topic-card__cta--disabled { cursor: not-allowed; opacity: .5; }
.sk-course--pilot .sk-topic-card__cta--disabled:hover { background: rgba(99,102,241,.08); color: #818cf8; transform: none; box-shadow: none; }

/* 卡內段落 .kpg L1155–1200(.kpg-key/.kpg-ok 是紅粗字 L1173;導讀裡不強調 L1174) */
.sk-course--pilot .sk-kpg { --kpg-hc: #0891b2; --kpg-kw: #d32f2f; overflow-wrap: break-word; }
.sk-course--pilot .sk-kpg__intro { font-size: 14px; color: var(--sk-theme-text-secondary); margin: 2px 0 10px; line-height: 1.8; }
.sk-course--pilot .sk-kpg__sec { margin-top: 13px; }
.sk-course--pilot .sk-kpg__secn { color: var(--kpg-hc); font-size: 15px; font-weight: 700; margin-bottom: 2px; padding-bottom: 5px; border-bottom: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-kpg__sec ul { margin: 7px 0 0; padding-left: 4px; list-style: none; }
.sk-course--pilot .sk-kpg__sec li { position: relative; padding-left: 17px; margin: 6px 0; font-size: 13.8px; color: var(--sk-theme-text-secondary); line-height: 1.8; }
.sk-course--pilot .sk-kpg__sec li::before { content: '▸'; position: absolute; left: 0; color: #818cf8; }
.sk-course--pilot .sk-kpg .sk-highlight { background: none; box-shadow: none; padding: 0; color: var(--kpg-kw); font-weight: 700; }
.sk-course--pilot .sk-kpg__intro .sk-highlight { color: inherit; font-weight: inherit; }
.sk-course--pilot .sk-kpg__mne { display: flex; gap: 11px; align-items: flex-start; background: rgba(245,158,11,.10); border: 1px dashed rgba(245,158,11,.5); border-radius: 12px; padding: 12px 15px; margin: 13px 0 4px; font-size: 13.7px; color: var(--sk-theme-text-secondary); line-height: 1.8; }
.sk-course--pilot .sk-kpg__mne b { color: #f59e0b; }
.sk-course--pilot .sk-kpg__mneico { font-size: 1.35rem; flex: none; }
.sk-course--pilot .sk-kpg__callout { border-radius: 11px; padding: 11px 15px; margin: 13px 0; font-size: 13.7px; border: 1px solid var(--sk-theme-border); border-left-width: 4px; color: var(--sk-theme-text-secondary); line-height: 1.8; }
.sk-course--pilot .sk-kpg__callout .sk-kpg__ct { font-weight: 800; margin-right: 6px; }
.sk-course--pilot .sk-kpg__callout ul { margin: 6px 0 0; padding-left: 18px; }
.sk-course--pilot .sk-kpg__callout li { margin: 5px 0; }
.sk-course--pilot .sk-kpg__callout p { margin: 0; display: inline; }
.sk-course--pilot .sk-kpg__warn { background: rgba(244,63,94,.08); border-color: rgba(244,63,94,.34); }
.sk-course--pilot .sk-kpg__warn .sk-kpg__ct { color: #f43f5e; }
.sk-course--pilot .sk-kpg__warn .sk-highlight { color: inherit; }
/* 判斷規則與公式是網站才有的兩段(對照清單 K1),樣式只借 callout 的殼,不另創。 */
.sk-course--pilot .sk-kpg__rule { border-left-color: var(--kpg-hc); }
.sk-course--pilot .sk-kpg__tblwrap { overflow-x: auto; margin: 13px 0; border-radius: 11px; border: 1px solid var(--sk-theme-border); }
.sk-course--pilot .sk-kpg__tbl { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 13px; background: transparent; }
.sk-course--pilot .sk-kpg__tbl th, .sk-course--pilot .sk-kpg__tbl td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--sk-theme-border); vertical-align: top; }
.sk-course--pilot .sk-kpg__tbl th { background: #6366f1; color: #fff; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.sk-course--pilot .sk-kpg__tbl tbody tr:nth-child(even) td { background: rgba(129,140,248,.07); }
/* 例題 .kpg-ex L1191–1199 */
.sk-course--pilot .sk-kpg__ex { margin: 11px 0; padding: 11px 15px; background: var(--sk-theme-surface); border: 1px solid var(--sk-theme-border); border-left: 3px solid var(--sk-theme-border); border-radius: 0 10px 10px 0; }
.sk-course--pilot .sk-kpg__exlbl { font-size: 12.5px; font-weight: 700; color: var(--sk-theme-text-secondary); margin-bottom: 6px; justify-content: flex-start; }
.sk-course--pilot .sk-kpg__exfreq { margin-left: 8px; background: rgba(245,158,11,.16); color: #f59e0b; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 8px; border: 0; }
.sk-course--pilot .sk-kpg__exstem { font-size: 13.7px; color: var(--sk-theme-text); font-weight: 500; margin: 0 0 6px; line-height: 1.7; }
.sk-course--pilot .sk-kpg__exopts { display: flex; flex-wrap: wrap; gap: 5px 14px; margin: 0 0 8px; padding: 0; list-style: none; }
.sk-course--pilot .sk-kpg__opt { font-size: 13px; color: var(--sk-theme-text-muted); padding: 0; border: 0; background: none; }
.sk-course--pilot .sk-kpg__opt--ans { color: var(--kpg-kw); font-weight: 700; }
.sk-course--pilot .sk-kpg__exsol { font-size: 12.9px; color: var(--sk-theme-text-secondary); line-height: 1.7; background: rgba(99,102,241,.10); border-radius: 7px; padding: 7px 11px; border: 0; margin-top: 8px; }
.sk-course--pilot .sk-kpg__exsol strong { color: var(--sk-theme-text); margin-right: 6px; }
/* 手機:成品 720px 以下沒有另寫分類表頭的規則(其 grid 自然折行);這幾行是本站
   為 390px 加的最小折行,不是成品值——列入對照清單 D1 的手機並排圖驗收。 */
@media (max-width: 720px) {
  .sk-course--pilot .sk-cat__header { grid-template-columns: auto 1fr; gap: 14px; padding: 20px; }
  .sk-course--pilot .sk-cat__stats { grid-column: 1 / -1; text-align: left; }
  .sk-course--pilot .sk-cat__stats strong { display: inline; margin-right: 4px; }
  .sk-course--pilot .sk-cat__icon { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
  .sk-course--pilot .sk-cat__name { font-size: 20px; }
  .sk-course--pilot .sk-cat__toggle { margin-left: 0; margin-top: 6px; }
  .sk-course--pilot .sk-topic-card__details { padding: 16px; }
}

/* ---------------------------------------------------------------------------
   後台導覽列（2026-09-16，UX-115）

   直到這一版，後台的 34 個頁面之間只有一個連結，每一頁都得自己記網址。這一段
   是那條導覽列的全部樣式。

   全部是新的 class 名稱，沒有一條碰到既有規則——會員頁不會因為這段而改變一個
   像素。這是刻意的：本案的停損條款寫明，不為了做選單去改共用版面。

   為什麼是橫排而不是直排：第一版把 13 個連結直向堆疊，實測把頁面內容往下推了
   將近 700px，等於每開一頁都要先捲過選單。橫排折行之後大約佔三行。

   為什麼標題是 p 而不是 h2：這一段渲染在 main 裡面、在每一頁自己的 h1 之前，
   h2 會變成整份文件的第一個標題，a11y 的標題順序規則會在每一條後台路由上報錯。
   --------------------------------------------------------------------------- */
.sk-adminnav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-sp-8) var(--sk-sp-20);
  padding: var(--sk-sp-10) var(--sk-sp-12);
  margin-bottom: var(--sk-sp-20);
  border: 1px solid var(--sk-theme-border);
  border-radius: 10px;
  font-size: var(--sk-fs-body-sm);
}
.sk-adminnav__home {
  margin: 0;
  font-weight: 600;
  padding-right: var(--sk-sp-12);
  border-right: 1px solid var(--sk-theme-border);
}
.sk-adminnav__group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-sp-4) var(--sk-sp-10);
}
.sk-adminnav__heading {
  margin: 0;
  color: var(--sk-theme-text-muted);
  font-size: var(--sk-fs-caption);
  white-space: nowrap;
}
.sk-adminnav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-4) var(--sk-sp-10);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 目前所在的那一頁不是連結的顏色，是實心的標記——照 aria-current 走，不另外傳旗標。 */
.sk-adminnav a[aria-current='page'] {
  font-weight: 700;
  text-decoration: none;
  color: var(--sk-theme-text);
}

/* 首頁的數字。大到可以隔著桌子看見，因為它存在的理由就是不必點進去。 */
.sk-adminstat__n {
  margin: 0;
  font-size: var(--sk-fs-h2, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 640px) {
  .sk-adminnav { gap: var(--sk-sp-6) var(--sk-sp-12); }
  .sk-adminnav__home { border-right: 0; padding-right: 0; }
}

/* 後台麵包屑與清單筆數（2026-09-16，後台介面重做 批 2）。
   都是新 class，沒有一條碰到既有規則。 */
.sk-admincrumb {
  margin: 0 0 var(--sk-sp-8);
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-muted);
}
.sk-admincrumb a { color: inherit; }
@media (max-width: 1023px) {
  .sk-admincrumb a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
}
.sk-listmeta {
  margin: 0 0 var(--sk-sp-8);
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-secondary);
}
/* 被截斷的清單不是提示，是警告：操作者可能以為自己看完了。 */
.sk-listmeta--capped {
  color: var(--sk-theme-text);
  font-weight: 600;
}

/* 後台兩張紀錄表（商業上線決策、通路授權）的篩選表單與開頭說明（2026-09-25，
   提案_組合包折抵與會員頁後台修正 四.2）。都是新 class，碰不到既有規則。
   全站的 form > * + * 會替每個欄位加上緣留白；排成格線時那會讓欄位上下錯開，
   所以在這個表單裡歸零。窄螢幕改成一欄。
   這段註解不寫反引號：整份樣式表住在一個 template literal 裡。 */
.sk-ledgerfilter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sk-sp-12) var(--sk-sp-16);
  align-items: end;
  margin: 0 0 var(--sk-sp-16);
  padding: var(--sk-sp-14) var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
}
.sk-ledgerfilter > * + * { margin-top: 0; }
.sk-ledgerfilter__field { margin: 0; min-width: 0; }
.sk-ledgerfilter__field :is(select, input) { width: 100%; max-width: none; }
.sk-ledgerfilter__field--wide { grid-column: span 2; }
.sk-ledgerfilter__actions { margin: 0; }
@media (max-width: 640px) {
  .sk-ledgerfilter { grid-template-columns: 1fr; }
  .sk-ledgerfilter__field--wide { grid-column: auto; }
}
.sk-ledgerscope { margin: 0 0 var(--sk-sp-12); }
.sk-ledgerscope > .sk-listmeta { margin-bottom: var(--sk-sp-4); }
.sk-ledgerpager > .sk-listmeta { margin: 0; }

/* 退款頁「發票待決定」（2026-09-25，同一份提案 四.3）。
   手機上表格最右邊的「作廢／開折讓」在畫面外，要先橫向捲表格才按得到。
   860px 以下改成卡片：同一批資料、同一組表單，只是換一種排法；寬螢幕維持表格。
   兩種排法都在頁面裡，沒用到的那一種 display: none——那同時把它移出 Tab 順序
   與螢幕閱讀器，所以任何寬度下每個按鈕都只出現一次。
   全站 .sk-tablewrap 的規則一條都不動（shell.test.ts 釘著）。這段註解不寫反引號。 */
.sk-invoicedecide__cards { display: none; list-style: none; margin: 0; padding: 0; }
@media (max-width: 860px) {
  .sk-invoicedecide__wide { display: none; }
  .sk-invoicedecide__cards { display: grid; gap: var(--sk-sp-12); }
}
.sk-invoicedecide__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-sp-8) var(--sk-sp-10);
}
.sk-invoicedecide__actions > form { margin: 0; }
/* 全站 form > * + * 給按鈕上緣 16px（前面是隱藏欄位），按鈕因此比同一列的字低一截。 */
.sk-invoicedecide__actions > form > * + * { margin-top: 0; }
.sk-invoicedecide__actions > p { flex-basis: 100%; margin: 0; }
.sk-invoicedecide__card { padding: var(--sk-sp-16) var(--sk-sp-18, 18px); }
.sk-invoicedecide__title {
  margin: 0 0 var(--sk-sp-8);
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-secondary);
}
.sk-invoicedecide__title strong { color: var(--sk-theme-text); overflow-wrap: anywhere; }
.sk-invoicedecide__facts {
  display: grid;
  gap: var(--sk-sp-4);
  margin: 0 0 var(--sk-sp-12);
  font-size: var(--sk-fs-body-sm);
}
.sk-invoicedecide__facts > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--sk-sp-8); }
.sk-invoicedecide__facts dt { color: var(--sk-theme-text-muted); }
.sk-invoicedecide__facts dd { margin: 0; overflow-wrap: anywhere; }

/* 試讀發布頁上方「原成品試讀（目前使用）」的兩個入口（2026-09-25，同一份提案 四.4）：
   連結一行、說明小字在下一行。 */
.sk-previewhub { margin: 0 0 var(--sk-sp-24); padding-left: 1.2em; }
.sk-previewhub > li + li { margin-top: var(--sk-sp-10); }
.sk-previewhub__note {
  display: block;
  font-size: var(--sk-fs-body-sm);
  color: var(--sk-theme-text-secondary);
}
/* 舊版那一段收到次要位置：分隔線隔開、標題小一號、顏色退一階。內容照舊。 */
.sk-previewlegacy {
  margin-top: var(--sk-sp-30, 30px);
  padding-top: var(--sk-sp-20);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-previewlegacy > h2 {
  margin-top: 0;
  font-size: var(--sk-fs-title-sm);
  color: var(--sk-theme-text-secondary);
}

/* 後台導覽列的可掃描性（2026-09-17）。
   15 個連結排成兩行是一面牆，組名和連結一樣大就分不出哪個可以點。
   組名改成小字、加底線般的分隔，讓眼睛先找到組再找項目。
   全部是既有的 .sk-adminnav 底下的新規則，碰不到別人。 */
.sk-adminnav__group {
  padding-left: var(--sk-sp-10);
  border-left: 1px solid var(--sk-theme-border);
}
.sk-adminnav__heading {
  font-size: var(--sk-fs-micro);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 600;
  opacity: 0.75;
}
/* 連結之間留一點呼吸，手指也點得到。 */
.sk-adminnav__list a {
  display: inline-block;
  padding: 2px 0;
}

/* ---------------------------------------------------------------------------
   跨證照組合包（提案_會員網站跨證照組合包_20260919 §2.8）

   全部是新的 class，碰不到既有任何一條規則。版面骨架沿用既有的
   .sk-card / .sk-grid / .sk-owned-list / .sk-note / .sk-price，所以這裡只補
   「這些新區塊自己的」間距與強調，不重寫任何佈局。

   🔴 為什麼不能省：新 class 在 styles.ts 裡沒有對應規則時，畫面會長得像
   完全沒設計過（2026-09-17 為此連錯四批，差點開一個不必要的重做案）。
   元素上同時掛著既有 class，所以不會全裸——但少了這一段，組合區塊與單張
   卡片之間沒有任何視覺層次。

   ⚠️ 這段註解裡一個反引號都沒有，而且不能有：它住在一個 template literal
   裡面，一個反引號就會把整個字串從這裡截斷，而編譯錯誤會指到幾十行以外的
   地方。上一句話本身就是踩過這個坑才加上的。
   --------------------------------------------------------------------------- */

/* 目錄頁的組合區塊：排在單張證照之前，用一條分隔線把兩區分開。 */
.sk-bundles {
  margin: var(--sk-sp-24) 0 var(--sk-sp-30);
  padding-bottom: var(--sk-sp-24);
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-bundles > h2 { margin: 0 0 var(--sk-sp-8); }
.sk-bundles > .sk-lede { margin: 0 0 var(--sk-sp-16); }

/* 組合卡片。與單張證照卡同一個格線，靠左邊那道色帶區分。 */
.sk-product--bundle { border-left: 3px solid var(--sk-accent-violet, var(--sk-theme-border)); }
/* 組合的價格區是兩行（金額＋「分開買要多少」），與「查看內容 →」並排會把後者
   擠成兩行。改成上下排，右下角那句話回到一行。 */
.sk-product--bundle .sk-product__foot {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sk-sp-8);
}

/* 價格區：一個大數字，下面一行可驗證的事實陳述。**沒有劃掉的原價**。 */
.sk-bundle-price { display: grid; gap: 2px; }
.sk-bundle-price .sk-price { margin: 0; }
.sk-bundle-price__compare { margin: 0; }

/* 名稱揭露（「含 8 張；不含證券分析師」）。不藏起來，但也不喧賓奪主。 */
.sk-bundle-coverage { margin: var(--sk-sp-8) 0; }

/* 已持有折抵。用既有的 .sk-note--ok 底色，只補間距。 */
.sk-bundle-held { margin: var(--sk-sp-12) 0; }
.sk-bundle-held > p { margin: 0 0 var(--sk-sp-8); }
.sk-bundle-held .sk-speclist { margin: 0; }

/* 成員清單：名稱、規模、金額三欄；窄螢幕直接疊起來。 */
.sk-bundle-members .sk-owned-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sk-sp-8);
  align-items: baseline;
  padding: var(--sk-sp-8) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-bundle-members .sk-owned-list__item:last-child { border-bottom: 0; }
@media (max-width: 640px) {
  .sk-bundle-members .sk-owned-list__item { grid-template-columns: 1fr; gap: 2px; }
}

/* 包內試讀是組合卡的錨點目的地；留出黏性頁首高度，避免跳轉後標題被蓋住。 */
.sk-bundle-trials {
  margin-top: var(--sk-sp-16);
  scroll-margin-top: calc(var(--sk-header-h) + var(--sk-sp-24));
}
.sk-bundle-trials .sk-owned-list__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sk-sp-12);
  align-items: center;
  padding: var(--sk-sp-12) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-bundle-trials .sk-owned-list__item:last-child { border-bottom: 0; }
.sk-bundle-trials .sk-owned-list__item p { margin: var(--sk-sp-4) 0 0; }
@media (max-width: 640px) {
  .sk-bundle-trials .sk-owned-list__item { grid-template-columns: 1fr; }
}

/* 單張證照頁的交叉提示：側欄、次級，不比購買區搶眼。 */
.sk-bundle-cross > p { margin: var(--sk-sp-8) 0 0; }

/* 結帳頁的組合明細。 */
.sk-checkout__bundle { margin: var(--sk-sp-16) 0; }
.sk-checkout__bundle > h2 { font-size: var(--sk-fs-body); margin: 0 0 var(--sk-sp-8); }
.sk-checkout__bundle .sk-owned-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sk-sp-8);
  padding: var(--sk-sp-8) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-checkout__bundle .sk-owned-list__item:last-child { border-bottom: 0; }

/* 購物車（/cart）。跟著結帳頁的組合明細走同一個形狀：左邊名稱、右邊金額與
   移除鍵。不另起一套版面，兩頁在同一個流程裡看起來就該是同一頁的兩步。

   .sk-inlineform 是這裡唯一的新規則：form 元素預設 display: block，一顆
   包在表單裡的移除鍵會把右欄撐成兩行。這個站的每一次改狀態都是表單送出
   （沒有第二個 script 可用，shell.test.ts:519-522 釘住），所以「行內的表單」
   會愈來愈多，給它一個名字比每次就地改一次好。

   這段註解裡不寫反引號：整份樣式表是一個 template literal，一個反引號就切斷
   它，而錯誤訊息會指到別的地方（記憶 sk-web-styles-template-literal）。 */
.sk-cart__list .sk-owned-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--sk-sp-8);
  padding: var(--sk-sp-8) 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-cart__list .sk-owned-list__item:last-child { border-bottom: 0; }
.sk-cart__side { display: inline-flex; align-items: baseline; gap: var(--sk-sp-8); white-space: nowrap; }
.sk-inlineform { display: inline; }

/* 訂單頁的「你買的是」。 */
.sk-order-bundle { margin: var(--sk-sp-16) 0; }
.sk-order-bundle > p { margin: 0 0 4px; }

@media print {
  .sk-header, .sk-footer, .sk-skip-link, .sk-theme, .sk-dock { display: none; }
  body { background: #ffffff; color: #000000; }
  .sk-main { max-width: none; padding: 0; }
}

/* ===========================================================================
   客人流程改版 C：頁首選單與購物車、頁尾置中（2026-09-24，提案_客人流程改版BtoG 第三節）
   ---------------------------------------------------------------------------
   本批只在這裡加規則。上面唯一動到的一行是刪掉「有底部選單列時藏起選單鈕」那條：
   底部選單列拿掉了，而商品頁的浮動購買鍵也住在同一個 sk-dock 外框裡，留著它會讓
   手機商品頁連選單鈕都沒有。

   手機（860 以下）：頁首右上角只剩購物車與「選單」。深淺色與「我的學習／登入」
   按鈕讓給選單——選單裡有同樣的兩樣。單一用途頁（開通頁）沒有選單，所以它的頁首
   照舊。電腦：頁首一排維持，購物車在右邊那一組的最前面。

   這段註解裡不寫反引號：整份樣式表是一個 template literal（記憶
   sk-web-styles-template-literal）。
   --------------------------------------------------------------------------- */

/* 購物車：圖示＋件數。名稱在 aria-label（手機上看得到的字只有數字）。 */
.sk-header__cart {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface);
  color: var(--sk-theme-text);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.sk-header__cart:hover { border-color: var(--sk-raw-color-primary); color: var(--sk-theme-text); }
.sk-header__cart:focus-visible { outline: 2px solid var(--sk-theme-focus-ring); outline-offset: var(--sk-focus-offset); }
.sk-header__cart-icon { display: inline-flex; line-height: 0; }
.sk-header__cart-icon svg { width: 20px; height: 20px; }
.sk-header__cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--sk-r-pill);
  background: var(--sk-raw-color-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--sk-typography-weight-extrabold);
}

/* 選單裡的深淺色切換：長得像選單的一項，不是頁首那顆圓鈕。
   置中，跟上面每一項選單文字一樣（創辦人核可的選單改版，2026-09-25）。 */
.sk-theme.sk-theme--menu {
  display: block;
  margin: var(--sk-sp-8) 0 0;
  padding-top: var(--sk-sp-8);
  border-top: 1px solid var(--sk-theme-border);
}
.sk-theme--menu .sk-theme__menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: var(--sk-sp-12) var(--sk-sp-16);
  border: 0;
  border-radius: var(--sk-r-pill);
  background: transparent;
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-semibold);
  text-align: center;
  box-shadow: none;
}
.sk-theme--menu .sk-theme__menu-toggle:hover { background: var(--sk-theme-pill-bg); color: var(--sk-theme-text); transform: none; }
.sk-theme--menu .sk-theme__menu-toggle .sk-theme__icon { width: 20px; font-size: 16px; }

@media (min-width: 861px) {
  /* 電腦：選單專屬的項目（我的學習、登入、選單位置的帳戶）與選單裡的深淺色都不在那一排。 */
  .sk-nav__menu-only,
  .sk-theme.sk-theme--menu { display: none; }
}

@media (max-width: 860px) {
  /* 帳戶在電腦那一排的位置（最後）只給電腦；手機選單裡它排在客服前面。 */
  .sk-nav__row-only { display: none; }
  /* 頁首右上角：購物車在前、選單在後。深淺色與我的學習／登入讓給選單。 */
  .sk-header:not(.sk-header--single) > .sk-header__actions > .sk-theme,
  .sk-header:not(.sk-header--single) > .sk-header__actions > .sk-header__cta { display: none; }
  .sk-header:not(.sk-header--single) > .sk-header__actions { order: 1; margin-inline-start: auto; }
  .sk-header:not(.sk-header--single) > .sk-drawer { order: 2; margin-inline-start: 0; }
  /* 與「選單」鈕同高（那顆在這個寬度是 36px），兩顆並排才不會一大一小。 */
  .sk-header__cart { min-height: 36px; padding: 0 10px; }
  .sk-header__cart-word { display: none; }
  /* 底部選單列拿掉後，底部只剩商品頁的浮動購買鍵；頁尾只要讓出它的高度。 */
  body:has(.sk-stickybuy) .sk-footer { padding-bottom: calc(var(--sk-sp-70) + var(--sk-safe-area-bottom)); }
}

@media (max-width: 400px) {
  /* 選單鈕在這個寬度縮成 30px，購物車跟著縮。 */
  .sk-header__cart { min-height: 30px; padding: 0 8px; gap: 4px; }
  .sk-header__cart-icon svg { width: 18px; height: 18px; }
  .sk-header__cart-count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; }
}

/* 單一用途頁（開通頁）沒有選單，原本靠選單把右邊那組推到最右；沒有選單時它自己靠右。 */
.sk-header--single > .sk-header__actions { margin-inline-start: auto; }

@media (max-width: 560px) {
  /* 頁尾在手機是一欄：各欄置中（決定，2026-09-24）。三欄並排時仍各自靠左。 */
  .sk-footer__col { text-align: center; }
}

/* ===========================================================================
   客人流程改版 G：購物車頁重做（2026-09-24，提案_客人流程改版BtoG 第七節）
   ---------------------------------------------------------------------------
   創辦人 09-24 看了電腦版購物車（你-19）：每一件只是一行底線連結、沒有封面與
   題數科目、價格是右邊很小的灰字、合計框與同意欄的字都很小、大片留白。改成：
   每一件一張卡（封面、題數與科目、清楚的價格）；電腦上右邊一欄結帳明細（合計與
   付款鈕放大、跟著捲動），手機上疊成一欄、結帳明細排在清單後面。

   本批只在這裡加規則，上面一條都沒動。上面那段舊的購物車規則（sk-cart__list、
   sk-cart__side）留著：新的標記不再掛那兩個 class，碰不到新畫面。付款鈕的放大
   寫在外層（結帳明細底下的送出鍵），不改那顆鍵自己的 class——批 B 要在那張表單
   與那顆鍵上加防連點，兩批各改各的行。

   這段註解裡不寫反引號：整份樣式表是一個 template literal（記憶
   sk-web-styles-template-literal）。
   --------------------------------------------------------------------------- */

.sk-cart { width: min(100%, 1080px); margin-inline: auto; }
.sk-cart--empty { width: min(100%, 720px); }
.sk-cart--empty > h1 { margin-bottom: var(--sk-sp-20); }
.sk-cart__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sk-sp-8) var(--sk-sp-16);
  margin-bottom: var(--sk-sp-20);
}
.sk-cart__head > h1 { margin: 0; }
.sk-cart__count { margin: 0; font-size: var(--sk-fs-body-sm); color: var(--sk-theme-text-muted); }
.sk-cart > [role="alert"] { margin: 0 0 var(--sk-sp-16); }

/* 空車：一張置中的卡，一句話加一顆鍵。 */
.sk-cart__empty {
  display: grid;
  justify-items: center;
  gap: var(--sk-sp-16);
  padding: var(--sk-sp-38) var(--sk-sp-24);
  text-align: center;
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  box-shadow: var(--sk-shadows-card);
}
.sk-cart__empty > p { margin: 0; }
.sk-cart__empty > p:first-child { font-size: var(--sk-fs-title-sm); font-weight: var(--sk-typography-weight-bold); }

/* 兩欄：清單與結帳明細。860 以下疊成一欄（與頁首換成手機選單同一個寬度）。 */
.sk-cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sk-sp-24);
  align-items: start;
}
.sk-cart__main { display: grid; gap: var(--sk-sp-12); min-width: 0; }
.sk-cart__main > p { margin: 0; }
.sk-cart__items { display: grid; gap: var(--sk-sp-14); margin: 0; padding: 0; list-style: none; }

/* 一件一張卡：左邊封面，中間名稱與題數科目，右邊價格與移除。 */
.sk-cart-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) auto;
  grid-template-areas: "cover body side";
  gap: var(--sk-sp-14) var(--sk-sp-20);
  align-items: start;
  padding: var(--sk-sp-16);
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  box-shadow: var(--sk-shadows-card);
}
.sk-cart-item--no-cover { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body side"; }
.sk-cart-item__cover {
  grid-area: cover;
  display: block;
  width: 104px;
  height: 104px;
  object-fit: cover;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-muted);
}
.sk-cart-item__body { grid-area: body; display: grid; gap: var(--sk-sp-8); align-content: start; min-width: 0; }
.sk-cart-item__body > * { margin: 0; }
.sk-cart-item__title { font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; }
.sk-cart-item__title a { color: var(--sk-theme-text); text-decoration: none; }
.sk-cart-item__title a:hover { color: var(--sk-theme-link); text-decoration: underline; }
.sk-cart-item__meta { display: flex; flex-wrap: wrap; gap: var(--sk-sp-6); }
.sk-cart-item__subjects { font-size: 13.5px; line-height: 1.7; color: var(--sk-theme-text-secondary); }
.sk-cart-item__note {
  padding: var(--sk-sp-8) var(--sk-sp-12);
  border: 1px solid var(--sk-semantic-feedback-info-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-semantic-feedback-info-background);
  color: var(--sk-semantic-feedback-info-foreground);
  font-size: 13px;
  line-height: 1.7;
}
.sk-cart-item__note--warn {
  border-color: var(--sk-semantic-feedback-warning-border);
  background: var(--sk-semantic-feedback-warning-background);
  color: var(--sk-semantic-feedback-warning-foreground);
}
.sk-cart-item__side {
  grid-area: side;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sk-sp-12);
}
/* 清楚的價格：與商品頁的現價同一個顏色與粗細。 */
.sk-cart-item__price {
  margin: 0;
  font-size: 22px;
  font-weight: var(--sk-typography-weight-black);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--sk-semantic-commerce-price);
  white-space: nowrap;
}
/* 不計入合計的件（已持有、買不到）：卡片照畫，封面與名稱退一階。 */
.sk-cart-item--uncounted .sk-cart-item__cover { opacity: 0.55; }
.sk-cart-item--uncounted .sk-cart-item__title a { color: var(--sk-theme-text-secondary); }

/* 結帳明細：合計放大、付款鈕放大、同意欄的字回到內文大小；電腦上跟著捲動。 */
.sk-cart__summary {
  position: sticky;
  top: var(--sk-sticky-top);
  display: grid;
  gap: var(--sk-sp-16);
  padding: var(--sk-sp-22);
  background: var(--sk-theme-surface);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  box-shadow: var(--sk-shadows-card);
}
.sk-cart__summary > * { margin: 0; }
.sk-cart__summary > h2 { font-size: var(--sk-fs-title-sm); }
.sk-cart__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sk-sp-8) var(--sk-sp-12);
  padding-bottom: var(--sk-sp-16);
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-cart__total dt { font-size: var(--sk-fs-body); font-weight: var(--sk-typography-weight-bold); }
.sk-cart__total dd { margin: 0; }
.sk-cart__total-amount {
  font-size: 32px;
  font-weight: var(--sk-typography-weight-black);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--sk-semantic-commerce-price);
}
.sk-cart__summary form > * + * { margin-top: var(--sk-sp-14); }
.sk-cart__summary fieldset { margin: 0; padding: var(--sk-sp-14) var(--sk-sp-16) var(--sk-sp-16); }
.sk-cart__summary fieldset > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sk-sp-10);
  align-items: start;
}
.sk-cart__summary fieldset > div + div { margin-top: var(--sk-sp-12); }
.sk-cart__summary input[type="checkbox"] { width: 20px; height: 20px; margin: 4px 0 0; }
.sk-cart__summary input[type="checkbox"] + label { margin: 0; font-size: var(--sk-fs-body); line-height: 1.75; }
.sk-cart__terms { margin: var(--sk-sp-12) 0 0; font-size: var(--sk-fs-body-sm); }
.sk-cart__summary button[type="submit"] { min-height: 58px; font-size: 18px; letter-spacing: 0.04em; }

@media (max-width: 1080px) {
  .sk-cart__layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .sk-cart-item { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .sk-cart-item--no-cover { grid-template-columns: minmax(0, 1fr) auto; }
  .sk-cart-item__cover { width: 88px; height: 88px; }
}

@media (max-width: 860px) {
  .sk-cart__layout { grid-template-columns: minmax(0, 1fr); }
  .sk-cart__summary { position: static; }
}

@media (max-width: 560px) {
  /* 手機：封面縮小在左、名稱在右；價格與移除排成卡片最下面一列。 */
  .sk-cart-item {
    grid-template-columns: 72px minmax(0, 1fr);
    grid-template-areas: "cover body" "side side";
    gap: var(--sk-sp-12) var(--sk-sp-14);
    padding: var(--sk-sp-14);
  }
  .sk-cart-item--no-cover { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body" "side"; }
  .sk-cart-item__cover { width: 72px; height: 72px; border-radius: var(--sk-r-m); }
  .sk-cart-item__title { font-size: 16px; }
  .sk-cart-item__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--sk-sp-12);
    border-top: 1px solid var(--sk-theme-border);
  }
  .sk-cart__summary { padding: var(--sk-sp-20) var(--sk-sp-16); }
  .sk-cart__total-amount { font-size: 30px; }
}

/* ── 批 B（提案_客人流程改版BtoG 第二節 B，2026-09-24）──────────────────── */
/* 「我的學習」上方那句「要查看登入中的裝置，請到〈帳戶〉」：連結在手機上不從括號中間斷開。 */
.sk-note__keep { white-space: nowrap; }

/* ==========================================================================
   D 批：試讀併入全部證照（提案_客人流程改版BtoG 第四節 D，2026-09-24）
   --------------------------------------------------------------------------
   卡片下緣的試讀鈕是第二個點擊區：整張卡仍由標題連結的覆蓋層打開商品頁，
   這一顆疊在覆蓋層之上（相對定位＋z-index），點它只會去試讀，兩區不重疊。
   ========================================================================== */
.sk-product__trial {
  position: relative;
  z-index: 1;
  margin: 0;
}
.sk-product__trial-link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--sk-sp-8);
  border-color: color-mix(in srgb, var(--sk-raw-color-success) 45%, var(--sk-theme-border));
  background: color-mix(in srgb, var(--sk-raw-color-success) 10%, var(--sk-theme-surface));
  color: var(--sk-theme-text);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-product__trial-link:hover {
  border-color: var(--sk-raw-color-success);
  background: color-mix(in srgb, var(--sk-raw-color-success) 16%, var(--sk-theme-surface));
  color: var(--sk-theme-text);
}
.sk-product__trial-count {
  flex: none;
  font-size: var(--sk-fs-caption);
  font-weight: var(--sk-typography-weight-semibold);
  color: var(--sk-theme-text-muted);
}
.sk-cattools .sk-trial-filter .sk-filter-link { white-space: nowrap; }
.sk-trial-note { margin: calc(var(--sk-sp-8) * -1) 0 var(--sk-sp-16); }
.sk-pdp-trial-referral a { text-decoration: underline; text-underline-offset: 2px; }
.sk-trial-subjects .sk-library__title { overflow-wrap: anywhere; }
.sk-trial-subjects .sk-notebook-grid { margin-bottom: var(--sk-sp-20); }

/* ── 批 E（提案_客人流程改版BtoG 第五節 E，2026-09-24）──────────────────── */
/* 「我的權益」一張證照一行：狀態徽章在標題旁，副標、來源與日期在下，歷史收在「看紀錄」。
   徽章只用 ok／accent／hot／paused 這幾個名稱：頁面上不得出現資料庫的狀態字（UX-058）。 */
.sk-entitlement__sub {
  margin: var(--sk-sp-6) 0 0;
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-bold);
  color: var(--sk-theme-ink-accent);
}
.sk-entitlement__note { margin: var(--sk-sp-8) 0 0; line-height: 1.8; color: var(--sk-theme-text-muted); }
.sk-entitlement__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sk-sp-8) var(--sk-sp-24);
  margin: var(--sk-sp-14) 0 0;
  padding-top: var(--sk-sp-12);
  border-top: 1px solid var(--sk-theme-border);
  font-size: var(--sk-fs-caption);
}
.sk-entitlement__facts > div { display: flex; gap: var(--sk-sp-8); min-width: 0; }
.sk-entitlement__facts dt { margin: 0; color: var(--sk-theme-text-muted); }
.sk-entitlement__facts dd {
  margin: 0;
  color: var(--sk-theme-text-secondary);
  font-weight: var(--sk-typography-weight-bold);
  overflow-wrap: anywhere;
}
.sk-entitlement__log {
  margin-top: var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
}
.sk-entitlement__log > summary {
  padding: var(--sk-sp-10) var(--sk-sp-14);
  cursor: pointer;
  color: var(--sk-theme-link);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-entitlement__log[open] > summary { border-bottom: 1px solid var(--sk-theme-border); }
.sk-entitlement__versions { display: grid; gap: var(--sk-sp-14); margin: 0; padding: var(--sk-sp-12) var(--sk-sp-14); list-style: none; }
.sk-entitlement__version { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-6) var(--sk-sp-8); margin: 0; }
.sk-entitlement__version strong { min-width: 0; overflow-wrap: anywhere; }
.sk-entitlement__versions > li > .sk-tiny { margin: var(--sk-sp-4) 0 0; }
.sk-entitlement__events {
  display: grid;
  gap: var(--sk-sp-4);
  margin: var(--sk-sp-8) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--sk-fs-caption);
  color: var(--sk-theme-text-secondary);
}
.sk-entitlement__events li { display: flex; flex-wrap: wrap; gap: var(--sk-sp-6); }
.sk-entitlement__time { color: var(--sk-theme-text-muted); }
/* 「我的訂單」：取消後才收到付款的單，錢到哪裡去了。 */
.sk-order-money { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-8); margin: var(--sk-sp-12) 0 0; }
.sk-order-money .sk-tiny { color: var(--sk-theme-text-muted); line-height: 1.7; }
.sk-order-money-card { margin-top: var(--sk-sp-12); padding: var(--sk-sp-14) var(--sk-sp-18, 18px); }
.sk-order-money-card .sk-order-money { margin: 0; }
/*
 * 「我的訂單」照蝦皮（登記表 #57）：五個分頁、待付款卡片、已取消卡片的「重新購買」、訂單明細合成一張的付款卡。
 * 分頁是一般的連結排成一排，目前那一頁底下一條線；一排放不下（窄手機）就整排橫向捲動，不擠壓也不換行
 * ——「待付款（3）」比其他四個長，平均分寬會疊到隔壁（目錄那組分段鈕就是平均分寬，所以不借用）。
 */
.sk-order-tabs { margin: 0 0 var(--sk-sp-16); overflow-x: auto; border-bottom: 1px solid var(--sk-theme-border); }
.sk-order-tabs__list { display: flex; margin: 0; padding: 0; list-style: none; }
.sk-order-tabs__list > li { flex: 1 0 auto; margin: 0; }
.sk-order-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--sk-sp-12);
  border-bottom: 3px solid transparent;
  color: var(--sk-theme-text-secondary);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-bold);
  white-space: nowrap;
  text-decoration: none;
}
.sk-order-tabs a:hover { color: var(--sk-theme-text); }
.sk-order-tabs a[aria-current="page"] { border-bottom-color: var(--sk-raw-color-primary); color: var(--sk-theme-text); }
.sk-order-tabs a:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: -3px; }
.sk-order-limited { margin: 0 0 var(--sk-sp-12); }
.sk-order-names { margin: var(--sk-sp-4) 0 0; color: var(--sk-theme-text-secondary); overflow-wrap: anywhere; }
.sk-order-pay { display: grid; gap: var(--sk-sp-10); margin-top: var(--sk-sp-14); }
.sk-order-pay > p, .sk-order-pay form, .sk-order-pay .sk-order-continue { margin: 0; }
.sk-order-pay .sk-order-continue > p { margin: var(--sk-sp-8) 0 0; }
.sk-order-due strong { font-size: var(--sk-fs-title-sm); }
.sk-order-cancel-link { text-align: center; }
.sk-order-cancel-link a { color: var(--sk-theme-text-muted); }
.sk-order-rebuy { margin: var(--sk-sp-14) 0 0; }
/* 「我的學習」：讀不到但留著的卡——寫原因、不給開啟連結、連到「我的權益」。 */
.sk-owned-card__closed { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--sk-theme-text-muted); }
.sk-owned-card__record {
  color: var(--sk-theme-link);
  font-size: 13.5px;
  font-weight: var(--sk-typography-weight-bold);
  text-decoration: none;
}
.sk-owned-card__record:hover { opacity: 0.7; }
/* 交棒頁（提案_客人流程改版BtoG 第七節 G-2）：「已送去綠界」那段平常不顯示；島嶼腳本在外層加上 data-sk-handoff-sent 時換它顯示、付款說明與按鈕那段收起。不用 hidden 屬性：本站樣式沒有 [hidden] 規則。 */
.sk-handoff__sent { display: none; }
.sk-handoff[data-sk-handoff-sent] .sk-handoff__sent { display: block; }
.sk-handoff[data-sk-handoff-sent] .sk-handoff__go { display: none; }

/* ===========================================================================
   待付款：紅色數字、我的訂單、期限（2026-09-25 晚，登記表 #57，提案_待付款照蝦皮_20260925 乙1）
   ---------------------------------------------------------------------------
   照蝦皮：沒付的訂單在「我的訂單」的「待付款」。手機：「選單」鈕旁一個紅色數字（名字在 aria-label），
   選單裡「我的訂單（待付款 N）」是純文字。電腦：選單鈕藏起來（861 以上），所以頁首購物車旁邊多一個
   「我的訂單」連結，同一個紅色數字；手機上它讓給選單。0 不畫（document.tsx）。

   紅色是固定的 #dc2626 配白字（對比 4.8:1，12px 粗體也過 4.5:1），深淺色都用同一個：設計變數裡的
   紅色字色在深色模式是淺粉紅，配白字讀不出來。徽章不用 sk-badge：頁首不得出現那個類別（shell.test.ts）。

   本批只在這裡加規則，上面一條都沒動。這段註解裡不寫反引號：整份樣式表是一個 template literal
   （記憶 sk-web-styles-template-literal）。
   --------------------------------------------------------------------------- */
.sk-drawer__count,
.sk-header__orders-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--sk-r-pill);
  background: #dc2626;
  color: #ffffff;
  font-size: 12px;
  font-weight: var(--sk-typography-weight-extrabold);
  line-height: 1;
}
.sk-drawer__count { margin-inline-start: 6px; }

/* 電腦版的「我的訂單」：跟購物車同一種圓角框，放在它後面。 */
.sk-header__orders {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface);
  color: var(--sk-theme-text);
  font-size: var(--sk-fs-body-sm);
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
}
.sk-header__orders:hover { border-color: var(--sk-raw-color-primary); color: var(--sk-theme-text); }
.sk-header__orders:focus-visible { outline: 2px solid var(--sk-theme-focus-ring); outline-offset: var(--sk-focus-offset); }
.sk-header__orders[aria-current="page"] { border-color: var(--sk-raw-color-primary); color: var(--sk-theme-ink-info); }

@media (max-width: 860px) {
  /* 手機：選單裡有「我的訂單」，頁首右上角照舊只有購物車與選單。 */
  .sk-header:not(.sk-header--single) > .sk-header__actions > .sk-header__orders { display: none; }
}

@media (max-width: 400px) {
  /* 選單鈕在這個寬度縮成 30px，數字跟著縮（同購物車的數字）。 */
  .sk-drawer__count { min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; margin-inline-start: 4px; }
}

/* 期限那一句（交棒頁、擋重複購買的幾頁、購物車的拒絕說明）：客人最需要記住的一件事，字重加一級。 */
.sk-deadline-note { font-weight: var(--sk-typography-weight-semibold); }

/* 購物車頁標題下那一行提醒：空車與有東西的車都在標題下面、清單上面。箭頭與「去付款」不拆行。 */
.sk-cart__pending { margin: 0 0 var(--sk-sp-16); }
.sk-cart__pending-go { white-space: nowrap; }

/* 交棒頁按鈕下面那一行（「訂單編號重覆」）：跟按鈕隔一點，看得出是按鈕的說明、不是黏在按鈕上。 */
.sk-handoff__elsewhere { margin-top: var(--sk-sp-8); }

/* ===========================================================================
   16. UIUX 2026-09-30（提案_會員網站UIUX全面優化_20260930）
   ---------------------------------------------------------------------------
   整站換上 09-30 七張樣稿的設計規則（樣稿正本：_UIUX優化_樣稿_20260930/src/ds.css、
   components.css，未入版控）。原則：
   - 只加在這一段、只用變數；被測試逐字釘住的舊規則一條都不改，要改的樣子用同樣或更高的
     選擇器在這裡蓋過去。蓋之前先讀那條測試在防什麼（點擊範圍、捲動、顏色標記），不得蓋掉它
     要保護的性質：.sk-drawer 不加 position、後面不再有帶 max-height／overflow 的
     .sk-drawer__panel、頁首不出現 sk-badge、待付款紅點照舊。
   - 頁面上不能有 style 屬性（CSP style-src self），分類色、延遲一律用 class。
   - 動態只在有 JavaScript（html[data-sk-js]）時才藏內容；系統「減少動態」時全部關。
   子段落：16a 地基（主執行者）／16b 首頁與商品頁（乙線）／16c 目錄、組合包、登入（丙線）／
   16d 會員區（丁線）／16e 後台（戊線）。各線只在自己的錨點下面加規則，合併時不打架。
   這段註解不寫反引號（整份樣式表是一個 template literal）。
   --------------------------------------------------------------------------- */

/* ---------- 16a 地基 ---------------------------------------------------- */

/* 字型：Inter 只含英數與常用符號（unicode-range），中文照舊落到系統字。22 KB、快取一年。 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/font/inter-latin-400-800.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2030, U+20AC, U+2122, U+2190-2193, U+2212;
}

/* 大標：黑體 900 在 Inter 子集裡沒有（400–800），也比樣稿重一階 */
h1 { font-weight: var(--sk-typography-weight-extrabold); }

/* 標題關鍵詞漸層：深靛藍 → 紫 → 暖橘（三色對白底 6.7／4.7／5.2；深色模式用亮版）。
   舊的 .sk-gradient-text、.sk-hero__accent 一起換：原本淺靛藍到琥珀，對白底只有 2.2–3.0。 */
.sk-kw,
.sk-gradient-text,
.sk-hero__accent {
  color: var(--sk-effects-gradient-text-fallback);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .sk-kw,
  .sk-gradient-text,
  .sk-hero__accent {
    background: var(--sk-semantic-gradients-keyword);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* 首屏主句的螢光筆底線：畫在字的後面；有 JavaScript 且沒開減少動態時，載入後從左畫到右一次 */
.sk-hl { position: relative; display: inline-block; z-index: 0; padding: 0 .06em; }
.sk-hl::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .08em;
  height: .32em;
  border-radius: 3px;
  background: var(--sk-semantic-gradients-marker);
  z-index: -1;
  transform-origin: left center;
}
[data-sk-js] .sk-hl--draw::after { transform: scaleX(0); animation: sk-marker .9s .35s cubic-bezier(.3, .7, .2, 1) forwards; }
@keyframes sk-marker { to { transform: scaleX(1); } }

/* 小標：前面一條漸層短線，主色、不再是琥珀細字 */
.sk-kicker {
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: .04em;
  color: var(--sk-theme-link);
}
.sk-kicker::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: middle;
  background: var(--sk-semantic-gradients-keyword);
}

/* 區塊標題（置中：小標＋大標＋一行說明）；長內文照舊靠左 */
.sk-sechead { display: grid; justify-items: center; gap: var(--sk-sp-8); max-width: 760px; margin: 0 auto var(--sk-sp-30); text-align: center; }
.sk-sechead > * { margin: 0; }
.sk-sechead > .sk-kicker { margin: 0; }
.sk-sechead > .sk-lede { color: var(--sk-theme-text-muted); font-size: var(--sk-fs-body); }

/* 捲到才淡入：沒有 JavaScript 時內容照常顯示（html 沒有 data-sk-js 就不藏） */
[data-sk-js] .sk-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--sk-ease), transform .6s cubic-bezier(.2, .7, .2, 1);
}
[data-sk-js] .sk-reveal.is-in { opacity: 1; transform: none; }

/* 首屏後面緩慢漂的大光暈（跟泡泡同一組顏色）；容器要是 position: relative 的區塊 */
.sk-aurora { position: absolute; inset: -80px 0 auto 0; height: 760px; z-index: -1; pointer-events: none; overflow: hidden; }
.sk-aurora > span { position: absolute; border-radius: 50%; opacity: .55; animation: sk-orb 22s ease-in-out infinite alternate; }
.sk-aurora > span:nth-child(1) { width: 520px; height: 520px; left: 8%; top: 40px; background: radial-gradient(circle, rgba(99, 102, 241, .30), transparent 66%); }
.sk-aurora > span:nth-child(2) { width: 460px; height: 460px; right: 6%; top: 0; background: radial-gradient(circle, rgba(168, 85, 247, .26), transparent 66%); animation-duration: 26s; animation-delay: -8s; }
.sk-aurora > span:nth-child(3) { width: 380px; height: 380px; left: 42%; top: 300px; background: radial-gradient(circle, rgba(245, 158, 11, .20), transparent 66%); animation-duration: 30s; animation-delay: -14s; }
@keyframes sk-orb { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(40px, 30px, 0) scale(1.12); } }

/* 按鈕：圓角 10、主按鈕深靛藍＋滑過一道光（光是裝飾，不擋點擊） */
.sk-btn { border-radius: var(--sk-r-m); }
.sk-btn--primary { position: relative; overflow: hidden; }
.sk-btn--primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s ease;
  pointer-events: none;
}
.sk-btn--primary:hover::after { left: 120%; }

/* 卡片：拿掉角落光暈（前十第 5 項：裝飾過多），頂端色帶收細到 3px */
.sk-card::after { content: none; }
.sk-card::before { height: 3px; }

/* 標籤：從膠囊改成樣稿的小方角標籤（語意顏色照舊） */
.sk-badge { border-radius: var(--sk-r-s); font-weight: var(--sk-typography-weight-semibold); }
.sk-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 26px;
  padding: 0 10px;
  border-radius: var(--sk-r-s);
  border: 1px solid var(--sk-theme-border);
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-text-muted);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
}
.sk-chip--green { background: var(--sk-semantic-feedback-success-background); border-color: var(--sk-semantic-feedback-success-border); color: var(--sk-semantic-feedback-success-foreground); }
.sk-chip--amber { background: var(--sk-semantic-feedback-warning-background); border-color: var(--sk-semantic-feedback-warning-border); color: var(--sk-semantic-feedback-warning-foreground); }
.sk-chip--red { background: var(--sk-semantic-feedback-error-background); border-color: var(--sk-semantic-feedback-error-border); color: var(--sk-semantic-feedback-error-foreground); }
.sk-chip--indigo { background: var(--sk-semantic-selection-background); border-color: var(--sk-theme-border-strong); color: var(--sk-theme-link); }

/* 商品卡（首頁、目錄、商品頁相關證照共用）：實心白底、圓角 16、內容置中、封面滑過微放大 */
.sk-product {
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-align: center;
}
.sk-product::before { height: 3px; border-radius: var(--sk-r-l) var(--sk-r-l) 0 0; }
.sk-product:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sk-raw-color-primary) 22%, transparent), var(--sk-shadows-card-hover); }
.sk-product__cover { border-bottom: 1px solid var(--sk-theme-border); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.sk-product:hover .sk-product__cover { transform: scale(1.03); }
.sk-product__meta { justify-content: center; }
.sk-product__foot { flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--sk-sp-6); border-top-style: dashed; }
.sk-product__foot .sk-price { justify-content: center; }
.sk-product__foot > .sk-muted { color: var(--sk-theme-link); font-weight: var(--sk-typography-weight-bold); }
.sk-product__trial-link { justify-content: center; gap: var(--sk-sp-10); }

/* 組合包卡：跟單張卡同一個外觀，改用頂端色帶區分（不再是左邊一道粗線），有主圖時跟封面一樣滿版 */
.sk-product--bundle { border-left: 1px solid var(--sk-theme-border); }
.sk-product--bundle .sk-product__foot { align-items: center; }

/* 橫滑帶（組合包帶等）：手機用手指滑、電腦版兩側箭頭（shellIsland 的 data-sk-strip）＋右側淡出 */
.sk-strip { position: relative; }
.sk-strip__track {
  display: flex;
  gap: var(--sk-sp-14);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 10px;
  margin: 0;
  list-style: none;
  scrollbar-width: none;
}
.sk-strip__track::-webkit-scrollbar { display: none; }
.sk-strip__track > * { flex: 0 0 236px; scroll-snap-align: start; }
.sk-strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 10px;
  right: 0;
  width: 64px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--sk-theme-canvas));
}
.sk-strip__arrow {
  position: absolute;
  top: 38%;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--sk-theme-border);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card-hover);
  color: var(--sk-theme-text);
  font-size: 20px;
  line-height: 1;
}
.sk-strip__arrow--prev { left: -18px; }
.sk-strip__arrow--next { right: -18px; }
.sk-strip__arrow[disabled] { opacity: .35; cursor: default; }
.sk-strip__arrow[hidden] { display: none; }
.sk-strip__hint { margin: var(--sk-sp-4) 0 0; text-align: center; font-size: 12.5px; color: var(--sk-theme-text-muted); }
@media (max-width: 860px) {
  .sk-strip__arrow { display: none; }
  .sk-strip__track > * { flex-basis: 64%; }
  .sk-strip::after { width: 32px; }
}
@media (min-width: 861px) {
  .sk-strip__hint { display: none; }
}

/* 手機底部購買列：購買框的主按鈕整顆看得到時收起來（shellIsland 的 data-sk-dock），沒有 JavaScript 時一直顯示 */
[data-sk-dock] { transition: transform .25s var(--sk-ease); }
[data-sk-dock].is-away { transform: translateY(110%); }

/* 頁首：目前頁淡靛底（標記不動，只加樣式） */
.sk-nav a[aria-current="page"] { color: var(--sk-theme-link); background: var(--sk-semantic-selection-background); }

/* 列印時不管捲到哪裡，內容一律顯示 */
@media print {
  [data-sk-js] .sk-reveal { opacity: 1; transform: none; }
}

/* 系統「減少動態」：上面所有動態全部關掉，內容直接顯示 */
@media (prefers-reduced-motion: reduce) {
  [data-sk-js] .sk-reveal { opacity: 1; transform: none; transition: none; }
  [data-sk-js] .sk-hl--draw::after { animation: none; transform: none; }
  .sk-aurora > span { animation: none; }
  .sk-btn--primary::after,
  .sk-product__cover,
  [data-sk-dock] { transition: none; }
}

/* ---------- 16b 首頁與商品頁（乙線）------------------------------------- */

/* 首頁首屏：樣稿 01 的開放式首屏（不再是一張玻璃卡），後面是地基的 .sk-aurora 光暈。
   標記一個字沒改（section 照舊只有 class="sk-hero"），只換外觀；泡泡與底色漸層在外框，照舊。 */
.sk-home > .sk-hero {
  padding: clamp(36px, 7vw, 72px) clamp(4px, 3vw, 32px) clamp(20px, 3vw, 32px);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: visible;
}
.sk-home > .sk-hero::before,
.sk-home > .sk-hero::after { content: none; }
.sk-home > .sk-hero .sk-aurora { inset: -96px 0 auto 0; }
.sk-home > .sk-hero h1 {
  max-width: none;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.25;
  letter-spacing: -.01em;
}
.sk-home > .sk-hero h1 > .sk-hl { display: block; width: fit-content; margin: var(--sk-sp-4) auto 0; }
.sk-home > .sk-hero .sk-lede { max-width: 640px; font-size: clamp(15px, 1.6vw, 17px); color: var(--sk-theme-text-secondary); }
.sk-hero__rating {
  margin: var(--sk-sp-16) auto 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--sk-theme-text-secondary);
  font-weight: var(--sk-typography-weight-semibold);
  word-break: keep-all;
}
.sk-hero__rating::first-letter { color: var(--sk-raw-color-accent); }
.sk-hero__shopee { margin: var(--sk-sp-6) 0 0; font-size: 13.5px; color: var(--sk-theme-text-muted); }
.sk-hero__shopee a { margin-left: 2px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-link); text-decoration: none; }
.sk-hero__shopee a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 首頁各區塊：標題置中（.sk-sechead），卡片置中；「查看全部」鈕放在格子下面置中。 */
.sk-home .sk-sechead { margin-bottom: var(--sk-sp-24); }
.sk-home .sk-sechead > h2 { margin: 0; }
.sk-home-more { margin: var(--sk-sp-20) 0 0; text-align: center; }
.sk-home-more .sk-btn { min-width: 200px; }
/* 熱門證照：樣稿是開放的一區（不再包一張大面板），跟組合包帶同一種排法。 */
.sk-home .sk-discovery {
  margin-top: var(--sk-sp-56);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.sk-discovery__popular > .sk-sechead { margin-top: 0; }
/* 手機的熱門證照改成兩欄兩排（樣稿 01；前十第 8 項「手機卡被切」：原本是一次一張、右邊露半張的橫滑）。 */
@media (max-width: 560px) {
  .sk-home .sk-grid.sk-featured-grid {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sk-sp-10);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
    margin-inline: 0;
  }
}

/* 試做一題（首頁）：左欄上半是 #37 第 5 項的標題與說明、下半是三行功能與「進入免費試讀」，右欄整欄是題目卡；
   手機依標記順序：說明 → 題目卡 → 三行功能與按鈕（先看到題目）。 */
.sk-tryone--demo {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  grid-template-areas: "intro card" "more card";
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: var(--sk-sp-10);
  margin-top: var(--sk-sp-20);
}
.sk-tryone--demo > .sk-tryone__intro { grid-area: intro; text-align: center; }
.sk-tryone--demo > .sk-tryone__experience { grid-area: card; padding: 0; border: 0; background: transparent; }
.sk-tryone--demo > .sk-tryone__more { grid-area: more; text-align: center; }
.sk-tryone--demo .sk-tryone__available { margin-bottom: 0; }
.sk-tryone--demo .sk-tryone__features { text-align: left; margin: 0 auto var(--sk-sp-20); max-width: 360px; }
.sk-tryone--demo .sk-tryone__actions { justify-content: center; }
@media (max-width: 760px) {
  .sk-tryone--demo { grid-template-columns: 1fr; grid-template-areas: "intro" "card" "more"; grid-template-rows: auto; row-gap: var(--sk-sp-20); }
}

/* 公開示範題的題目卡（首頁與商品頁共用，ADR-010）：題目、選項、詳解一律靠左。 */
.sk-try {
  padding: var(--sk-sp-22);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  text-align: left;
}
.sk-try:focus { outline: none; }
.sk-try:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: 3px; }
.sk-try__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-sp-8) var(--sk-sp-10); margin: 0 0 var(--sk-sp-14); font-size: 13px; color: var(--sk-theme-text-muted); }
.sk-try__stem { margin: 0 0 var(--sk-sp-16); font-size: 17px; line-height: 1.75; color: var(--sk-theme-text); font-weight: var(--sk-typography-weight-medium); }
.sk-try__form { margin: 0; }
.sk-try__opts { display: grid; gap: var(--sk-sp-10); margin: 0; padding: 0; list-style: none; }
.sk-try__opt {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: var(--sk-sp-12);
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 10px 14px;
  border: 1.5px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  /* 選項是按鈕，而全站的 button 規則是 nowrap（第 10 節）：不改回來，沒有標點的長選項
     （例如「發行人經主管機關認可之信用評等機構評等達一定等級以上之公司債」）整行衝出手機畫面。 */
  white-space: normal;
  box-shadow: none;
}
button.sk-try__opt { cursor: pointer; transition: border-color .15s var(--sk-ease), background-color .15s var(--sk-ease), transform .15s var(--sk-ease), box-shadow .15s var(--sk-ease); }
button.sk-try__opt:hover { border-color: var(--sk-theme-border-strong); background: var(--sk-semantic-selection-background); transform: translateY(-1px); box-shadow: var(--sk-shadows-card); }
button.sk-try__opt:focus-visible { outline: 3px solid var(--sk-theme-focus-ring); outline-offset: 2px; }
.sk-try__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-link);
  font-weight: var(--sk-typography-weight-extrabold);
  font-size: 14px;
}
.sk-try__text { min-width: 0; overflow-wrap: anywhere; }
.sk-try__mark { font-size: 12.5px; font-weight: var(--sk-typography-weight-bold); white-space: nowrap; }
.sk-try__opt.is-answer { border-color: var(--sk-semantic-feedback-success-border); background: var(--sk-semantic-feedback-success-background); }
.sk-try__opt.is-answer .sk-try__key { background: var(--sk-raw-color-success); color: var(--sk-theme-surface-elevated); }
.sk-try__opt.is-answer .sk-try__mark { color: var(--sk-semantic-feedback-success-foreground); }
.sk-try__opt.is-miss { border-color: var(--sk-semantic-feedback-error-border); background: var(--sk-semantic-feedback-error-background); }
.sk-try__opt.is-miss .sk-try__key { background: var(--sk-semantic-feedback-error-foreground); color: var(--sk-theme-surface-elevated); }
.sk-try__opt.is-miss .sk-try__mark { color: var(--sk-semantic-feedback-error-foreground); }
.sk-try__opts--done .sk-try__opt:not(.is-answer):not(.is-pick) { opacity: .62; }
.sk-try__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sk-sp-8) var(--sk-sp-14); margin: var(--sk-sp-14) 0 0; font-size: 13.5px; color: var(--sk-theme-text-muted); }
.sk-try__swap { font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-link); text-decoration: none; white-space: nowrap; }
a.sk-try__swap:not(.sk-btn):hover { text-decoration: underline; text-underline-offset: 3px; }
.sk-try__verdict {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin: var(--sk-sp-14) 0 0;
  padding: var(--sk-sp-14) var(--sk-sp-16);
  border-radius: var(--sk-r-m);
  text-align: center;
  font-size: 13px;
  color: var(--sk-theme-text-secondary);
}
.sk-try__verdict-word { font-size: 17px; font-weight: var(--sk-typography-weight-extrabold); }
.sk-try__verdict-answer { font-size: 15px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text); }
.sk-try--correct .sk-try__verdict { background: var(--sk-semantic-feedback-success-background); border: 1px solid var(--sk-semantic-feedback-success-border); }
.sk-try--correct .sk-try__verdict-word { color: var(--sk-semantic-feedback-success-foreground); }
.sk-try--wrong .sk-try__verdict { background: var(--sk-semantic-feedback-error-background); border: 1px solid var(--sk-semantic-feedback-error-border); }
.sk-try--wrong .sk-try__verdict-word { color: var(--sk-semantic-feedback-error-foreground); }
.sk-try__next {
  display: grid;
  justify-items: center;
  gap: var(--sk-sp-10);
  margin: var(--sk-sp-12) 0 0;
  padding: var(--sk-sp-14) var(--sk-sp-16);
  border: 1px dashed var(--sk-theme-border-strong);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
  text-align: center;
}
.sk-try__next p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--sk-theme-text); }
.sk-try__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sk-sp-8); }
.sk-try__acts .sk-btn { width: auto; }
.sk-try__expl {
  margin: var(--sk-sp-14) 0 0;
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-semantic-selection-background);
}
.sk-try__expl h3 { margin: 0 0 var(--sk-sp-8); font-size: 15px; color: var(--sk-theme-link); }
.sk-try__expl h4 { margin: var(--sk-sp-14) 0 var(--sk-sp-6); font-size: 14px; color: var(--sk-theme-ink-accent); }
.sk-try__expl p { margin: 0; font-size: 15px; line-height: 1.85; color: var(--sk-theme-text); }
.sk-try__wrong { display: grid; gap: var(--sk-sp-8); margin: 0; padding: 0; list-style: none; }
.sk-try__wrong li { padding: 10px 12px; border-radius: var(--sk-r-s); border-left: 3px solid var(--sk-semantic-feedback-error-border); background: var(--sk-theme-surface-elevated); font-size: 14.5px; line-height: 1.75; }
.sk-try__wrong b { margin-right: 6px; color: var(--sk-semantic-feedback-error-foreground); }
.sk-try__note { margin: var(--sk-sp-12) 0 0; font-size: 12.5px; color: var(--sk-theme-text-muted); text-align: center; }
@media (max-width: 560px) {
  .sk-try { padding: var(--sk-sp-16); }
  .sk-try__stem { font-size: 16px; }
  .sk-try__opt { min-height: 50px; padding: 8px 12px; font-size: 15px; }
}

/* 組合包帶（首頁）：電腦版四欄排好，手機用手指橫滑（地基的 .sk-strip；四包放得下就不要箭頭）。 */
.sk-home-bundles { margin-top: var(--sk-sp-56); }
.sk-home-bundles .sk-strip__track > .sk-product { text-align: center; }
@media (min-width: 861px) {
  /* 四包以內一排放得下：置中排、不捲、不淡出（少於四包時也置中，不留一個空欄）。 */
  .sk-home-bundles .sk-strip__track { flex-wrap: wrap; justify-content: center; overflow: visible; }
  .sk-home-bundles .sk-strip__track > * { flex: 0 1 calc(25% - var(--sk-sp-14)); min-width: 0; }
  .sk-home-bundles .sk-strip::after { content: none; }
}

/* 三步驟：每一步置中（#37 第 3 項的六句不動）；手機照舊上下排、步驟之間細線分隔。 */
.sk-home .sk-steps { padding: clamp(22px, 3.5vw, 36px); }
.sk-home .sk-steps__item { grid-template-columns: 1fr; justify-items: center; text-align: center; }
@media (min-width: 861px) {
  .sk-home .sk-steps__item { padding: var(--sk-sp-8) var(--sk-sp-10); }
}

/* 買家評價與常見問題：標題置中；兩張評價圖照舊左右並排、手機上下排（#37 第 6 項）；問答靠左、整組置中。 */
.sk-home-reviews { margin-top: var(--sk-sp-56); }
.sk-home-faq .sk-faq-list,
.sk-home-faq .sk-faq-contact { max-width: 860px; margin-inline: auto; }
.sk-home-faq .sk-faq-contact { text-align: center; }

/* 商品頁（提案 4-3）：電腦版左邊圖庫＋內容欄、右邊購買框整欄跟著捲；1080 以下依標記順序：圖 → 購買框 → 內容。 */
.sk-pdp--product { gap: var(--sk-sp-24); }
@media (min-width: 1081px) {
  .sk-pdp--product {
    grid-template-columns: minmax(0, 1fr) 372px;
    grid-template-areas: "gallery buy" "main buy";
  }
  .sk-pdp--product > .sk-gallery { grid-area: gallery; }
  .sk-pdp--product > .sk-buybox { grid-area: buy; align-self: start; }
  .sk-pdp--product > .sk-pdp__main { grid-area: main; }
}
@media (max-width: 1080px) {
  .sk-pdp--product > .sk-buybox { order: 0; }
  .sk-pdp--product > .sk-gallery .sk-gallery__main { max-height: min(420px, 50vh); }
}
.sk-pdp--product > .sk-pdp__main { min-width: 0; }
.sk-pdp--product .sk-buybox__card { text-align: center; }
.sk-pdp--product .sk-buybox__tags { justify-content: center; }
.sk-pdp--product .sk-buybox__card .sk-price { justify-content: center; }
.sk-pdp--product .sk-buybox__card .sk-note { text-align: left; }

/* 內容欄每一張卡：小標、標題、短說明置中（創辦人 #7）；清單、對照表、問答照舊靠左。 */
.sk-pdp__main > .sk-card > .sk-kicker { display: block; text-align: center; }
.sk-pdp__main > .sk-card > h2 { text-align: center; }
.sk-pdp__main > .sk-card > .sk-lede { text-align: center; }
.sk-pdp__main > .sk-card > p:has(> .sk-btn) { text-align: center; }

/* 內容欄的示範題那一格：標題置中，題目卡靠左。 */
.sk-pdp-demo .sk-sechead { margin-bottom: var(--sk-sp-16); }
.sk-pdp-demo .sk-sechead > h2 { margin: 0; font-size: var(--sk-fs-title-sm); }
.sk-pdp-demo .sk-try { box-shadow: none; }

/* 買家評價（商品頁）：兩張圖並排、手機上下排；「關於」「網站內使用」兩張小卡並排。 */
.sk-pdp-proof > h2 { margin: 0; font-size: var(--sk-fs-title-sm); }
.sk-pdp-proof__sheets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-14); }
.sk-pdp-proof__sheets img { display: block; width: 100%; height: auto; border-radius: var(--sk-r-l); }
.sk-pdp-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-14); }
.sk-bundle-cross { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sk-sp-16); align-items: center; }
.sk-bundle-cross__art { width: 88px; height: 88px; border-radius: var(--sk-r-m); object-fit: cover; }
.sk-pdp__main > .sk-pdp-related-full { margin-top: var(--sk-sp-20); }
.sk-pdp__main > .sk-pdp-related-full .sk-sechead { margin-bottom: var(--sk-sp-16); }
.sk-pdp__main > .sk-pdp-related-full h2 { font-size: var(--sk-fs-title-sm); }
.sk-pdp__main > .sk-pdp-related-full .sk-grid--four { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
@media (max-width: 560px) {
  .sk-pdp-proof__sheets,
  .sk-pdp-trust { grid-template-columns: 1fr; }
  .sk-pdp__main > .sk-pdp-related-full .sk-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 延伸學習選擇（商品頁，登記表 #82）：標題與導語置中（同內容欄其他卡），清單靠左、每個選項一格、格間細線。
   卡片之間的距離由內容欄的 grid gap 給，這裡不另加外距。 */
.sk-pdp-extend > h2 { margin: 0 0 var(--sk-sp-4); font-size: var(--sk-fs-title-sm); }
.sk-pdp-extend > p { margin: 0; text-align: center; }
.sk-pdp-extend__list { list-style: none; margin: var(--sk-sp-14) 0 0; padding: 0; display: grid; gap: var(--sk-sp-12); }
.sk-pdp-extend__item { padding-top: var(--sk-sp-12); border-top: 1px solid var(--sk-theme-border); }
.sk-pdp-extend__item:first-child { padding-top: 0; border-top: 0; }
.sk-pdp-extend__main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sk-sp-4) var(--sk-sp-12); }
.sk-pdp-extend__name { font-weight: var(--sk-typography-weight-bold); }
.sk-pdp-extend__price { color: var(--sk-theme-text-muted); white-space: nowrap; }
.sk-pdp-extend__item p { margin: var(--sk-sp-4) 0 0; }

/* 手機底部購買列：它標了 data-sk-dock、收起來時連外框一起滑下去（不然只剩一條空的底色）。
   不支援 :has() 的瀏覽器就維持一直顯示，跟沒有 JavaScript 時一樣。 */
.sk-dock { transition: transform .25s var(--sk-ease); }
.sk-dock:has(> .is-away) { transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  .sk-dock { transition: none; }
  button.sk-try__opt { transition: none; }
}

/* ---------- 16c 目錄、組合包、登入（丙線）------------------------------- */

/* 目錄、組合包頁、登入三組頁面（提案 4-2、4-4、4-5；樣稿 04、06、07）。只用變數；
   被測試逐字釘住的標記沒有動，這裡只加樣子。分類色點、卡片縮排用 class 與 data 屬性，不用 style。 */

/* ===== 4-2 目錄 /certificates ===== */

/* 頁首置中：小標、大標、一行說明、摘要膠囊 */
.sk-catalog__head {
  display: grid;
  justify-items: center;
  gap: var(--sk-sp-10);
  max-width: 760px;
  margin: 0 auto var(--sk-sp-22);
  text-align: center;
}
.sk-catalog__head > * { margin: 0; }
.sk-catalog__head h1 { margin: 0; font-size: clamp(30px, 4.2vw, 40px); line-height: 1.25; }
.sk-catalog__head .sk-lede { margin: 0; max-width: 620px; color: var(--sk-theme-text-muted); font-size: var(--sk-fs-body); text-wrap: balance; }
.sk-catalog__summary { justify-content: center; }

/* 查找卡：搜尋一行、篩選置中；實心白底、圓角 24 */
.sk-catalog .sk-cattools {
  max-width: 980px;
  margin: 0 auto var(--sk-sp-8);
  padding: var(--sk-sp-16);
  gap: var(--sk-sp-12);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface-elevated);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: var(--sk-shadows-card);
}
.sk-catalog .sk-cattools__row { justify-content: center; gap: var(--sk-sp-8) var(--sk-sp-10); }
/* 搜尋框吃掉第一行（旁邊只剩「搜尋」鈕），會員的開通分段與「只看可試讀」換到下一行置中 */
.sk-catalog .sk-cattools__row input[type="search"] {
  flex: 1 1 calc(100% - 110px);
  min-width: 0;
  height: 48px;
  border-radius: var(--sk-r-m);
}
.sk-catalog .sk-cattools__row > button[type="submit"] { min-height: 48px; padding-inline: var(--sk-sp-20); border-radius: var(--sk-r-m); }
.sk-catalog .sk-axis__layout { grid-template-columns: 1fr; gap: 0; }
.sk-catalog .sk-axis__label { display: none; }
.sk-catalog .sk-chips { justify-content: center; gap: var(--sk-sp-8); }
/* 地基的 .sk-chip 是小標籤；目錄的 chip 外層只是容器，外觀畫在裡面的連結上 */
.sk-catalog .sk-cattools .sk-chip { min-height: 0; padding: 0; border: 0; background: none; }
.sk-catalog .sk-cattools .sk-chip .sk-filter-link {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13.5px;
}
/* 沒選的白底；選中的那一顆照舊是主色實心（上面 .sk-filter-link--active 那條），這裡不蓋它 */
.sk-catalog .sk-cattools .sk-chip .sk-filter-link:not([aria-current="page"]):not(:hover) { background: var(--sk-theme-surface-elevated); }
.sk-catalog .sk-cattools .sk-chip .sk-filter-link:not([aria-current="page"])::before { width: 8px; height: 8px; flex-basis: 8px; box-shadow: none; }
.sk-catalog .sk-cattools .sk-chip:not([data-sk-cat]) .sk-filter-link:not([aria-current="page"])::before { content: none; }
.sk-catalog .sk-chip[data-sk-cat="overview"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-primary); }
.sk-catalog .sk-chip[data-sk-cat="securities"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-violet); }
.sk-catalog .sk-chip[data-sk-cat="banking"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-cyan); }
.sk-catalog .sk-chip[data-sk-cat="futures"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-accent); }
.sk-catalog .sk-chip[data-sk-cat="compliance"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-rose); }
.sk-catalog .sk-chip[data-sk-cat="fintech"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-success); }
.sk-catalog .sk-chip[data-sk-cat="post"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-blue); }
.sk-catalog .sk-chip[data-sk-cat="bookkeeping"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-theme-text-muted); }
.sk-catalog .sk-chip[data-sk-cat="bundle"] .sk-filter-link:not([aria-current="page"])::before { background: var(--sk-raw-color-pink); }
.sk-catalog .sk-cattools__footer { justify-content: center; }
/* 原生 details 保留無腳本的篩選操作；搜尋與目前條件在外面常駐。 */
.sk-catfilters { min-width: 0; }
.sk-catfilters > summary {
  display: flex; align-items: center; justify-content: center; gap: var(--sk-sp-8);
  min-height: 44px; padding: var(--sk-sp-8) var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border); border-radius: var(--sk-r-m);
  color: var(--sk-theme-text); background: var(--sk-theme-surface-elevated);
  cursor: pointer; font-size: var(--sk-fs-body-sm); font-weight: var(--sk-typography-weight-semibold);
  list-style: none;
}
.sk-catfilters > summary::-webkit-details-marker { display: none; }
.sk-catfilters > summary::after { content: "＋"; }
.sk-catfilters[open] > summary::after { content: "−"; }
.sk-catfilters > summary:focus-visible { outline: 2px solid var(--sk-theme-link); outline-offset: 3px; }
.sk-catfilters__body { display: grid; gap: var(--sk-sp-16); padding-top: var(--sk-sp-16); min-width: 0; }
.sk-cattools__active { margin: 0; font-size: var(--sk-fs-caption); color: var(--sk-theme-text-secondary); overflow-wrap: anywhere; }

/* 數量行與試讀說明：置中；數字照舊不包標籤（測試逐字比對「符合的商品：共 N 款」） */
.sk-catalog .sk-catcount[role="status"] {
  justify-content: center;
  margin: var(--sk-sp-20) 0 var(--sk-sp-8);
  font-size: var(--sk-fs-body);
  text-align: center;
}
.sk-catalog .sk-trial-note { margin: 0 auto var(--sk-sp-12); max-width: 680px; text-align: center; }
.sk-catalog > .sk-note { text-align: center; }

/* 組合包帶：置中區塊標題＋橫滑帶；分隔線拿掉，靠留白分區 */
.sk-catalog .sk-bundles { margin: var(--sk-sp-20) 0 0; padding-bottom: 0; border-bottom: 0; }
.sk-bundles .sk-sechead,
.sk-bundle-others .sk-sechead { margin-bottom: var(--sk-sp-14); }
.sk-bundles .sk-sechead h2,
.sk-bundle-others .sk-sechead h2 { font-size: var(--sk-fs-title-sm); }
.sk-bundles .sk-sechead .sk-lede { font-size: var(--sk-fs-body-sm); }

/* 橫滑帶裡的組合包卡：精簡成圖、名稱、張數、涵蓋說明、價格（說明文字在組合包頁上看） */
.sk-strip .sk-product--bundle { height: auto; }
.sk-strip .sk-product--bundle .sk-product__desc { display: none; }
.sk-strip .sk-product--bundle .sk-product__title { font-size: 15px; }
.sk-strip .sk-product--bundle .sk-price__now { font-size: 21px; }
.sk-strip .sk-bundle-coverage { margin: 0; text-align: center; }
/* 組合包卡的標籤（組合包、暫停購買、已有 N 張）排在主圖下面：主圖右上角本來就印著張數，疊上去會蓋住。
   首頁的組合包帶（16b）用同一張卡，一起列在這裡（整合時看截圖補上的）。 */
.sk-catalog .sk-product--bundle.sk-product--covered .sk-product__flag,
.sk-bundle-page .sk-product--bundle.sk-product--covered .sk-product__flag,
.sk-home-bundles .sk-product--bundle.sk-product--covered .sk-product__flag {
  position: static;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sk-sp-6);
}
/* 箭頭兩顆都按不動（卡片一排放得下）就收起來，不留兩顆灰的 */
.sk-strip:has(.sk-strip__arrow--prev[disabled]):has(.sk-strip__arrow--next[disabled]) .sk-strip__arrow { display: none; }

/* 單張證照格：一排最多四張、每張最寬 272（1152 寬的內容區剛好放四張）；張數少的時候（試讀、搜尋結果）整排置中，不擠在左邊 */
.sk-catalog__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 272px)); justify-content: center; }

/* 單張證照那一格的標題（上面有組合包帶時才看得見） */
.sk-catalog__listhead {
  margin: var(--sk-sp-30) 0 var(--sk-sp-14);
  font-size: var(--sk-fs-title-sm);
  text-align: center;
}

/* 其餘收在「顯示全部 N 款」裡：按鈕置中；打開之後按鈕收起來、其餘的卡接在後面 */
.sk-catalog__more { margin-top: var(--sk-sp-16); }
.sk-catalog__more > summary {
  display: flex;
  width: max-content;
  margin: var(--sk-sp-6) auto 0;
  list-style: none;
  cursor: pointer;
}
.sk-catalog__more > summary::-webkit-details-marker { display: none; }
.sk-catalog__more > summary::after { content: "⌄"; margin-left: var(--sk-sp-8); font-weight: var(--sk-typography-weight-bold); }
.sk-catalog__more[open] > summary { display: none; }

/* 手機兩欄：卡片內距、字級收小，說明文字收起來（點進去看） */
@media (max-width: 640px) {
  .sk-catalog .sk-cattools { padding: var(--sk-sp-12); }
  .sk-catalog .sk-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 calc(var(--sk-sp-12) * -1); padding: 0 var(--sk-sp-12) 2px; scrollbar-width: none; }
  .sk-catalog .sk-chips::-webkit-scrollbar { display: none; }
  .sk-catalog .sk-chip { flex: none; }
  .sk-catalog .sk-cattools .sk-chip .sk-filter-link { white-space: nowrap; }
  .sk-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-10); }
  .sk-catalog__grid .sk-product { --sk-sp-20: 12px; gap: var(--sk-sp-8); }
  .sk-catalog__grid .sk-product__title { font-size: 14px; }
  .sk-catalog__grid .sk-product__desc { display: none; }
  .sk-catalog__grid .sk-product__meta { gap: 4px; }
  .sk-catalog__grid .sk-product__meta .sk-badge { font-size: 11.5px; padding-inline: 6px; }
  .sk-catalog__grid .sk-price__now { font-size: 18px; }
  .sk-catalog__grid .sk-product__foot { padding-top: var(--sk-sp-8); gap: 2px; }
  .sk-catalog__grid .sk-product__trial-link { flex-direction: column; gap: 0; padding: 6px 8px; font-size: 12.5px; }
  .sk-catalog__grid .sk-product--covered .sk-product__flag { top: 6px; right: 6px; }
  .sk-catalog__grid .sk-product__flag .sk-badge { font-size: 11px; padding: 2px 6px; }
}

/* ===== 4-4 組合包頁（樣稿 06：左主圖、右購買框跟著捲；手機 圖 → 名稱與價格 → 內容）===== */
.sk-bundle-page .sk-bundle-hero {
  grid-template-columns: minmax(0, 1fr) 380px;
  grid-template-areas: "art buy" "main buy";
  row-gap: var(--sk-sp-24);
}
.sk-bundle-page .sk-bundle-hero--noart { grid-template-areas: "main buy"; }
.sk-bundle-art {
  grid-area: art;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--sk-r-xl);
  box-shadow: var(--sk-shadows-card-hover);
}
.sk-bundle-art::before { content: none; }
.sk-bundle-art__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.sk-bundle-page .sk-buybox { grid-area: buy; align-self: start; }
.sk-bundle-page .sk-bundle-main { grid-area: main; grid-template-columns: minmax(0, 1fr); gap: var(--sk-sp-20); }
/* 內容欄裡的橫滑帶不能把整欄撐寬（格線項目預設的最小寬度是內容寬） */
.sk-bundle-page .sk-bundle-main > * { min-width: 0; }
.sk-bundle-page .sk-buybox__card { display: grid; gap: var(--sk-sp-12); box-shadow: var(--sk-shadows-floating); }
.sk-bundle-page .sk-buybox__card > * { margin: 0; }
.sk-bundle-page .sk-buybox__tags,
.sk-bundle-page .sk-bundle-price .sk-price { justify-content: center; }
.sk-bundle-page .sk-buybox__card > h1,
.sk-bundle-page .sk-buybox__pitch,
.sk-bundle-page .sk-bundle-price,
.sk-bundle-page .sk-buybox__note,
.sk-bundle-page .sk-buybox__fine { text-align: center; }
.sk-bundle-page .sk-buybox__card > h1 { font-size: 28px; }
.sk-bundle-page .sk-bundle-coverage { padding: var(--sk-sp-8) var(--sk-sp-10); font-size: var(--sk-fs-caption); }

/* 成員卡：封面縮圖＋名稱、題數；暫停、要另外單買、已持有、分攤價標籤照舊在最下面一行 */
.sk-bundle-membersbox > h2,
.sk-bundle-faq > h2,
.sk-bundle-trials > h2 { margin: 0 0 var(--sk-sp-16); font-size: var(--sk-fs-title-sm); text-align: center; }
.sk-bundle-page .sk-bundle-members { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-sp-10); }
.sk-bundle-page .sk-bundle-members .sk-bundle-member {
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--sk-sp-12);
  row-gap: 2px;
  align-items: center;
  align-content: center;
  padding: var(--sk-sp-10);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
}
.sk-bundle-member__cover {
  grid-row: 1 / span 3;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: var(--sk-r-s);
  object-fit: cover;
  background: var(--sk-theme-surface-muted);
}
.sk-bundle-member > :not(.sk-bundle-member__cover) { grid-column: 2; min-width: 0; }
.sk-bundle-member > a { font-weight: var(--sk-typography-weight-bold); line-height: 1.45; text-decoration: none; color: var(--sk-theme-text); }
.sk-bundle-member > a:hover { color: var(--sk-theme-link); }

/* 組合包常見問題：問題粗體、答案在下、細線分隔、不收合（答案靠左） */
.sk-bundle-faq .sk-faq-list { margin: 0; }
.sk-bundle-faq .sk-faq-list__item { padding: var(--sk-sp-12) 0; border-top: 1px solid var(--sk-theme-border); }
.sk-bundle-faq .sk-faq-list__item:first-child { border-top: 0; padding-top: 0; }
.sk-bundle-faq dt { margin: 0; }
.sk-bundle-faq dd { margin: var(--sk-sp-6) 0 0; color: var(--sk-theme-text-secondary); font-size: var(--sk-fs-body-sm); line-height: 1.8; }
.sk-bundle-others { margin-top: var(--sk-sp-8); }

@media (max-width: 1080px) {
  .sk-bundle-page .sk-bundle-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "art" "buy" "main"; }
  .sk-bundle-page .sk-bundle-hero--noart { grid-template-areas: "buy" "main"; }
  .sk-bundle-page .sk-pdp > .sk-buybox { order: 0; }
  .sk-bundle-art { width: 100%; max-width: 520px; justify-self: center; }
}
@media (max-width: 640px) {
  .sk-bundle-page .sk-bundle-members { grid-template-columns: minmax(0, 1fr); }
  .sk-bundle-page .sk-buybox__card > h1 { font-size: 24px; }
}

/* ===== 4-5 登入、驗證碼頁、/shopee：一張置中的卡（樣稿 07）===== */
.sk-auth--card {
  display: grid;
  gap: var(--sk-sp-16);
  max-width: 480px;
  margin: var(--sk-sp-20) auto 0;
  padding: calc(var(--sk-sp-14) * 2);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-floating);
}
.sk-main > .sk-auth--card { margin-bottom: var(--sk-sp-24); }
.sk-auth--card > * { margin: 0; }
.sk-auth--card > header { margin: 0; display: grid; justify-items: center; gap: var(--sk-sp-8); text-align: center; }
.sk-auth--card > header .sk-eyebrow { margin: 0; }
.sk-auth--card h1 { margin: 0; font-size: 28px; line-height: 1.35; }
.sk-auth--card > header .sk-lede,
.sk-auth--card > .sk-lede { margin: 0; font-size: 15px; color: var(--sk-theme-text-muted); text-align: center; }
/* 裡面那張表單卡攤平：外面這一張就是卡。overflow 放開：內距歸零後，.sk-card 的 overflow: hidden 會切到
   欄位標籤第一個字的左緣與輸入框的焦點光圈 */
.sk-auth--card .sk-card {
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
.sk-auth--card .sk-card::before { content: none; }
/* /shopee/verify 的「驗證碼已寄到」那一格保留一個淡底小框 */
.sk-auth--card .sk-card.sk-card--flat {
  padding: var(--sk-sp-12) var(--sk-sp-14);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-muted);
}
.sk-auth--card .sk-field:not(.sk-otp) input[type="email"],
.sk-auth--card .sk-field:not(.sk-otp) input[type="text"] {
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
}
.sk-auth--card .sk-otp input { display: block; margin-inline: auto; }
.sk-auth--card .sk-actions { margin-top: var(--sk-sp-16); }
.sk-auth--card fieldset {
  margin: var(--sk-sp-14) 0 0;
  padding: var(--sk-sp-12) var(--sk-sp-14);
  border: 1px solid var(--sk-theme-border);
  border-radius: 12px;
  background: var(--sk-theme-surface-muted);
}
.sk-auth--card .sk-authfoot { justify-content: center; margin: 0; }
.sk-auth--card .sk-resend { justify-content: center; text-align: center; }
.sk-auth--card > .sk-actions { justify-content: center; }

/* 「登入後會帶你到」：卡片最上面一行，只有名稱與封面，沒有價格 */
.sk-login-dest {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--sk-sp-12);
  align-items: center;
  margin: 0;
  padding: var(--sk-sp-10) var(--sk-sp-12);
  border: 1px solid var(--sk-theme-border);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--sk-theme-violet-pale), var(--sk-semantic-selection-background) 60%, var(--sk-theme-copper-pale));
  text-align: left;
}
.sk-login-dest__media { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.sk-login-dest__media--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sk-theme-border);
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-link);
}
.sk-login-dest__text { display: grid; gap: 2px; min-width: 0; }
.sk-login-dest__text small { font-size: 12.5px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text-muted); line-height: 1.4; }
.sk-login-dest__text b { font-size: 15px; line-height: 1.45; color: var(--sk-theme-text); overflow-wrap: anywhere; }

/* 卡片下面三張理由卡 */
.sk-auth-perks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sk-sp-14);
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.sk-auth-perk {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sk-sp-6);
  padding: var(--sk-sp-16);
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  text-align: center;
}
.sk-auth-perk__icon { color: var(--sk-theme-link); }
.sk-auth-perk strong { font-size: 15px; color: var(--sk-theme-text); }
.sk-auth-perk span { font-size: 13.5px; line-height: 1.6; color: var(--sk-theme-text-muted); }

@media (max-width: 640px) {
  .sk-auth--card { margin-top: var(--sk-sp-8); padding: var(--sk-sp-20); }
  .sk-auth--card h1 { font-size: 24px; }
  .sk-auth-perks { grid-template-columns: minmax(0, 1fr); gap: var(--sk-sp-10); }
  .sk-auth-perk { grid-template-columns: 26px minmax(0, 1fr); justify-items: start; column-gap: var(--sk-sp-12); padding: var(--sk-sp-14); text-align: left; }
  .sk-auth-perk__icon { grid-row: span 2; align-self: center; }
}

/* ---------- 16d 會員區（丁線）------------------------------------------- */

/* 會員頁主標統一：電腦 32、手機 24（樣稿 t-h1）。只點會員頁自己的外框：我的學習與兩種選科頁、帳戶、
   我的權益與我的訂單一族、購物車、結帳一族（結帳、付款結果、開通、客服、案件往來），以及課程殼的頁名。
   .sk-checkout 也包住錯誤頁與條款索引，它們跟著用同一個字級。登入頁（.sk-auth，不含 --wide）不動。 */
.sk-library .sk-library__title,
.sk-auth--wide > header h1,
.sk-account-page h1,
.sk-cart h1,
.sk-checkout h1,
.sk-course .sk-course__heading {
  font-size: 32px;
  line-height: 1.3;
}
@media (max-width: 640px) {
  .sk-library .sk-library__title,
  .sk-auth--wide > header h1,
  .sk-account-page h1,
  .sk-cart h1,
  .sk-checkout h1,
  .sk-course .sk-course__heading {
    font-size: 24px;
    line-height: 1.38;
  }
}

/* 會員頁的小標（開通、客服、案件往來那種 .sk-eyebrow）換成地基 .sk-kicker 的樣子：主色字＋漸層短線，
   不再是琥珀細字。只在 .sk-checkout 外框裡；登入頁、行銷頁、後台、課程殼的 .sk-eyebrow 不動。 */
.sk-checkout .sk-eyebrow {
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: .04em;
  color: var(--sk-theme-link);
}
.sk-checkout .sk-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 3px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: middle;
  background: var(--sk-semantic-gradients-keyword);
}

/* 我的學習（樣稿 02）與兩種選科頁的頁首：整組置中——小標、大標、一行說明、張數與權益紀錄連結。
   舊規則是左右兩欄（標題在左、張數在右），這裡改成一欄。選科頁的頁首多包一層 div，一樣置中。 */
.sk-library .sk-library__head {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--sk-sp-10);
  margin: var(--sk-sp-22) 0 var(--sk-sp-30);
  text-align: center;
}
.sk-library .sk-library__head .sk-library__title { margin: 0; }
.sk-library .sk-library__head .sk-kicker { margin: 0; }
.sk-library .sk-library__head .sk-lede { max-width: 640px; margin: 0 auto; color: var(--sk-theme-text-muted); }
.sk-library__head-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sk-sp-10) var(--sk-sp-16);
  margin-top: var(--sk-sp-4);
}
.sk-library .sk-library__count { align-self: center; }
.sk-library__record {
  color: var(--sk-theme-link);
  font-size: 14.5px;
  font-weight: var(--sk-typography-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
.sk-library__record:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 「繼續上次的學習」卡：一張，置中（封面、小標、名稱、一行在哪裡、按鈕）。舊學習頁的「今天」面板、
   上次讀到這裡、整頁成品那一張都用這個外觀；彩條不要（它是證照卡的語言）。 */
.sk-library .sk-resume-card {
  display: grid;
  justify-items: center;
  gap: var(--sk-sp-14);
  margin: 0 0 var(--sk-sp-38);
  padding: var(--sk-sp-24) var(--sk-sp-22);
  border-radius: var(--sk-r-xl);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-floating);
  text-align: center;
}
.sk-library .sk-resume-card::before { display: none; }
.sk-resume-card__cover {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  border: 1px solid var(--sk-theme-border);
  object-fit: cover;
  box-shadow: var(--sk-shadows-card);
}
.sk-library .sk-resume-card__meta {
  display: grid;
  justify-items: center;
  gap: var(--sk-sp-6);
  min-width: 0;
}
.sk-library .sk-resume-card__meta > * { margin: 0; }
.sk-library .sk-resume-card__meta h2 { font-size: 20px; line-height: 1.4; }
.sk-resume-card__where { font-size: 15px; color: var(--sk-theme-text-secondary); }
.sk-resume-card__subject { color: var(--sk-theme-text); font-weight: var(--sk-typography-weight-bold); }
.sk-library .sk-resume-card .sk-resume__what { font-size: 18px; }
.sk-resume-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sk-sp-10);
}
.sk-library .sk-resume-card .sk-today__primary,
.sk-library .sk-resume-card .sk-today__switch { margin: 0; }
/* 考試倒數、今天建議、待複習、進度：卡片下方一列小字（原本是四格方塊） */
.sk-library .sk-resume-card .sk-today__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sk-sp-4) var(--sk-sp-16);
  margin: 0;
  font-size: 13px;
  color: var(--sk-theme-text-muted);
}
.sk-library .sk-resume-card .sk-today__facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 var(--sk-sp-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.sk-library .sk-resume-card .sk-today__facts dt,
.sk-library .sk-resume-card .sk-today__facts dd { margin: 0; font-size: 13px; }
.sk-library .sk-resume-card .sk-today__facts strong { font-size: 13px; color: var(--sk-theme-text); }
.sk-library .sk-resume-card .sk-today__sections { justify-content: center; margin: 0; }
.sk-library .sk-resume-card .sk-today__sections a {
  padding: 6px 12px;
  background: var(--sk-theme-surface);
  color: var(--sk-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-semibold);
}
.sk-library .sk-resume-card .sk-today__sections a:hover { border-color: var(--sk-theme-border-strong); color: var(--sk-theme-link); }
.sk-library .sk-resume-card .sk-today__others { width: 100%; max-width: 560px; margin: 0; }
.sk-library .sk-resume-card .sk-today__others li { justify-content: center; }
.sk-library .sk-resume-card .sk-today__other-go { margin-left: 0; }
@media (max-width: 640px) {
  .sk-library .sk-resume-card { padding: var(--sk-sp-16); margin-bottom: var(--sk-sp-30); }
  .sk-resume-card__cover { width: 84px; height: 84px; }
  .sk-resume-card__where { font-size: 14px; }
  .sk-resume-card__actions { width: 100%; }
  .sk-resume-card__actions .sk-btn { flex: 1 1 auto; }
}

/* 已開通證照格：電腦四欄、平板三欄、手機兩欄（樣稿 02）。整頁成品是小卡；舊學習頁那種寬卡內容多，
   佔一整列、照舊左圖右文。 */
.sk-library .sk-library__listhead { margin: 0 0 var(--sk-sp-16); font-size: 20px; text-align: center; }
.sk-library__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.sk-library__grid > .sk-owned-list__item--wide { grid-column: 1 / -1; }
@media (max-width: 1080px) { .sk-library__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .sk-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.sk-library__grid .sk-owned-card--notebook {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.sk-library__grid .sk-owned-card--notebook:hover {
  border-color: var(--sk-theme-border-strong);
  box-shadow: var(--sk-shadows-card-hover);
}
.sk-library__grid .sk-owned-card--notebook .sk-owned-card__cover {
  overflow: hidden;
  border-right: 0;
  border-bottom: 1px solid var(--sk-theme-border);
}
.sk-library__grid .sk-owned-card--notebook .sk-owned-card__cover img {
  aspect-ratio: 1;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.sk-library__grid .sk-owned-card--notebook:hover .sk-owned-card__cover img { transform: scale(1.03); }
.sk-library__grid .sk-owned-card--notebook .sk-owned-card__body {
  flex: 1 1 auto;
  align-items: center;
  gap: var(--sk-sp-8);
  padding: 14px 16px 16px;
  text-align: center;
}
.sk-library__grid .sk-owned-card--notebook .sk-owned-card__body > * { margin: 0; }
.sk-library__grid .sk-owned-card--notebook .sk-kicker { font-size: 12px; }
.sk-library__grid .sk-owned-card--notebook .sk-kicker::before { width: 12px; margin-right: 6px; }
.sk-library__grid .sk-owned-card--notebook h2 {
  min-height: 2.9em;
  font-size: 15.5px;
  line-height: 1.45;
  letter-spacing: 0;
}
.sk-owned-card__saved { font-size: 13px; color: var(--sk-theme-text-muted); }
.sk-library__grid .sk-owned-card--notebook .sk-btn {
  width: 100%;
  margin-top: auto;
  padding: 9px 12px;
  font-size: 13.5px;
}
/* 二十張卡不要二十顆實心主按鈕：卡片裡用淡靛底（樣稿的 soft 按鈕），滑過再深一階 */
.sk-library__grid .sk-owned-card--notebook .sk-btn--primary {
  background-image: none;
  background-color: var(--sk-semantic-selection-background);
  color: var(--sk-theme-link);
  box-shadow: none;
}
.sk-library__grid .sk-owned-card--notebook .sk-btn--primary:hover {
  background-color: var(--sk-semantic-selection-hover-background);
  box-shadow: none;
}
.sk-library__grid .sk-owned-card--notebook .sk-owned-card__closed {
  font-size: 13px;
  line-height: 1.7;
  color: var(--sk-theme-text-secondary);
  text-align: left;
}
.sk-owned-card__record-line { font-size: 13px; }
@media (max-width: 640px) {
  .sk-library__grid .sk-owned-card--notebook .sk-owned-card__body { gap: 6px; padding: 10px 12px 12px; }
  .sk-library__grid .sk-owned-card--notebook h2 { font-size: 14px; }
}

/* 下一張推薦（既有 NextCertificate）：置中 */
.sk-library .sk-library__next { margin-top: var(--sk-sp-38); text-align: center; }
.sk-library .sk-library__next h2 { font-size: 20px; }

/* 四個捷徑（樣稿 02）：開通與權益紀錄、訂單、客服、再加一張。電腦一列四格；平板三格＋一整列；
   手機一格一列。 */
.sk-library__shortcuts {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: var(--sk-sp-44);
}
.sk-library__shortcut-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.sk-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  color: var(--sk-theme-text);
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.sk-shortcut:hover {
  border-color: var(--sk-theme-border-strong);
  box-shadow: var(--sk-shadows-card-hover);
  transform: translateY(-2px);
}
.sk-shortcut__title { font-size: 15px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text); }
.sk-shortcut__note { font-size: 13px; line-height: 1.5; color: var(--sk-theme-text-muted); }
.sk-library .sk-library__shortcuts .sk-library__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sk-sp-6);
  margin: 0;
  padding: 16px 18px;
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  text-align: center;
}
.sk-library .sk-library__shortcuts .sk-library__more h2 { margin: 0; font-size: 15px; }
.sk-library .sk-library__shortcuts .sk-library__more p { margin: 0; font-size: 13px; line-height: 1.6; }
.sk-library .sk-library__shortcuts .sk-library__more-actions { gap: var(--sk-sp-6); margin-top: var(--sk-sp-4); }
@media (max-width: 860px) {
  .sk-library__shortcuts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sk-library__shortcut-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sk-shortcut { min-height: 0; padding: 12px 14px; }
}

/* 選科頁（已購與試讀兩種）：頁首置中了，科目卡也放中間，不靠左掛著（創辦人 #7）。 */
.sk-library .sk-notebook-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  justify-content: center;
}
.sk-library .sk-notebook-grid .sk-owned-card__body { align-items: center; text-align: center; }
.sk-library .sk-notebook-grid ~ p { text-align: center; }
@media (max-width: 640px) {
  .sk-library .sk-notebook-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-library__grid .sk-owned-card--notebook,
  .sk-library__grid .sk-owned-card--notebook .sk-owned-card__cover img,
  .sk-shortcut { transition: none; }
  .sk-library__grid .sk-owned-card--notebook:hover .sk-owned-card__cover img,
  .sk-shortcut:hover { transform: none; }
}

/* ---------- 16e 後台（戊線）--------------------------------------------- */

/* 6-1 後台外框：1024 以上是「左側欄＋內容」兩欄，以下導覽在上方、收進一顆「後台選單」
   （原生 details，沒有 JavaScript 也點得開；寬螢幕用 CSS 強制展開，跟頁首選單同一個做法）。
   只認 .sk-adminframe 底下那一個 .sk-adminnav：營運數據頁內文的「看幾天」也叫 sk-adminnav，
   不能被排成側欄。會員頁首頁尾一個像素都不動。 */
.sk-main:has(> .sk-adminframe) { max-width: 1440px; }
.sk-adminframe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sk-sp-16);
  align-items: start;
}
.sk-adminframe > * { min-width: 0; }
.sk-adminframe > .sk-adminnav {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  font-size: 14px;
}
.sk-adminnav__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  cursor: pointer;
  list-style: none;
  font-weight: var(--sk-typography-weight-bold);
  color: var(--sk-theme-text);
}
.sk-adminnav__toggle::-webkit-details-marker { display: none; }
.sk-adminnav__toggle::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--sk-ease);
}
.sk-adminnav__fold[open] > .sk-adminnav__toggle::after { transform: translateY(2px) rotate(-135deg); }
.sk-adminnav__here { min-width: 0; color: var(--sk-theme-link); font-weight: var(--sk-typography-weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-adminnav__here::before { content: "·"; margin-right: 10px; color: var(--sk-theme-text-muted); }
.sk-adminnav__panel { padding: 4px 12px 14px; border-top: 1px solid var(--sk-theme-border); }
.sk-adminframe > .sk-adminnav .sk-adminnav__home { margin: 8px 0 0; padding: 0; border: 0; font-weight: var(--sk-typography-weight-bold); }
.sk-adminframe > .sk-adminnav .sk-adminnav__group { display: block; margin: 12px 0 0; padding: 0; border: 0; }
.sk-adminframe > .sk-adminnav .sk-adminnav__heading {
  margin: 0 10px 4px;
  font-size: 12px;
  font-weight: var(--sk-typography-weight-bold);
  letter-spacing: .06em;
  color: var(--sk-theme-text-muted);
  opacity: 1;
}
.sk-adminframe > .sk-adminnav .sk-adminnav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.sk-adminframe > .sk-adminnav a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: var(--sk-r-m);
  color: var(--sk-theme-text);
  font-weight: var(--sk-typography-weight-semibold);
  text-decoration: none;
}
.sk-adminframe > .sk-adminnav a:hover { background: var(--sk-semantic-selection-hover-background); color: var(--sk-theme-link); }
.sk-adminframe > .sk-adminnav a[aria-current='page'] {
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-link);
  font-weight: var(--sk-typography-weight-bold);
}
.sk-adminnav__label { min-width: 0; overflow-wrap: anywhere; }
/* 數字徽章：只有學員回報、對帳與衝突兩格會有（A3）；0 不顯示。 */
.sk-adminnav__count {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border: 1px solid var(--sk-semantic-feedback-warning-border);
  border-radius: 10px;
  background: var(--sk-semantic-feedback-warning-background);
  color: var(--sk-semantic-feedback-warning-foreground);
  font-size: 12px;
  font-weight: var(--sk-typography-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sk-adminnav__toggle > .sk-adminnav__count { margin-left: 0; }
@media (min-width: 1024px) {
  .sk-adminframe { grid-template-columns: 228px minmax(0, 1fr); gap: 28px; }
  .sk-adminframe > .sk-adminnav {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--sk-header-h) + 16px);
    max-height: calc(100vh - var(--sk-header-h) - 32px);
    overflow-y: auto;
    padding: 8px;
    scrollbar-width: thin;
  }
  .sk-adminframe > :not(.sk-adminnav) { grid-column: 2; }
  .sk-adminnav__toggle { display: none; }
  .sk-adminnav__panel { display: block; padding: 0; border-top: 0; }
  .sk-adminnav__fold::details-content { content-visibility: visible; }
  .sk-adminframe > .sk-adminnav .sk-adminnav__home { margin: 2px 0 0; }
  .sk-adminframe > .sk-adminnav .sk-adminnav__group { margin-top: 8px; }
  .sk-adminframe > .sk-adminnav .sk-adminnav__heading { margin-bottom: 2px; }
  .sk-adminframe > .sk-adminnav .sk-adminnav__list { grid-template-columns: minmax(0, 1fr); gap: 1px; }
  .sk-adminframe > .sk-adminnav a { min-height: 32px; }
}

/* 6-3 其他後台頁：頁面主標統一 28（手機 24），不再是行銷頁的 46。
   有幾頁（商品試讀、原成品試讀發布）的外層是沒有 class 的 section，所以也認外框裡的 section。 */
.sk-admin > h1,
.sk-adminframe > section > h1,
.sk-adminhome__head h1 { margin: 0 0 var(--sk-sp-8); font-size: 28px; line-height: 1.3; }
.sk-admin > .sk-admincrumb { margin-bottom: var(--sk-sp-6); }
/* 頁內的小節標題跟著縮，不能比頁面主標還大。 */
.sk-admin h2,
.sk-adminframe > section h2 { font-size: 20px; line-height: 1.4; }

/* 頁首那段說明：一顆「說明」小鈕，點開才看（原生 details）。 */
.sk-adminnote { margin: 0 0 var(--sk-sp-16); }
.sk-adminnote__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px 0 8px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-text-secondary);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-semibold);
  cursor: pointer;
  list-style: none;
}
.sk-adminnote__toggle::-webkit-details-marker { display: none; }
.sk-adminnote__toggle::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sk-semantic-selection-background);
  color: var(--sk-theme-link);
  font-size: 12px;
  font-weight: var(--sk-typography-weight-extrabold);
  font-style: italic;
}
.sk-adminnote__toggle:hover,
.sk-adminnote[open] > .sk-adminnote__toggle { border-color: var(--sk-theme-border-strong); color: var(--sk-theme-link); }
.sk-adminnote__body {
  max-width: 76ch;
  margin: var(--sk-sp-8) 0 0;
  padding: 12px 14px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 14px;
  line-height: 1.7;
}

/* 表格狀態膠囊：中文照舊、代碼灰色小字在膠囊裡（文字不動，只換外觀）。 */
.sk-state {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-pill);
  background: var(--sk-theme-surface-muted);
  color: var(--sk-theme-text-secondary);
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-bold);
  line-height: 1.5;
}
.sk-state::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sk-state .admin-code { font-size: 11px; font-weight: 500; color: var(--sk-theme-text-secondary); }
.sk-state--ok { border-color: var(--sk-semantic-feedback-success-border); background: var(--sk-semantic-feedback-success-background); color: var(--sk-semantic-feedback-success-foreground); }
.sk-state--wait { border-color: var(--sk-semantic-feedback-warning-border); background: var(--sk-semantic-feedback-warning-background); color: var(--sk-semantic-feedback-warning-foreground); }
.sk-state--bad { border-color: var(--sk-semantic-feedback-error-border); background: var(--sk-semantic-feedback-error-background); color: var(--sk-semantic-feedback-error-foreground); }

/* 6-2 後台首頁：標題列、今天四格、需要處理。 */
.sk-adminhome__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: var(--sk-sp-20);
}
.sk-adminhome__head h1 { margin: 0; }
.sk-adminhome__date { margin: 4px 0 0; font-size: 14px; color: var(--sk-theme-text-muted); }
.sk-adminhome__report { white-space: nowrap; }
.sk-adminkpis__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sk-adminkpi {
  --sk-kpi: var(--sk-raw-color-primary);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  padding: 22px 16px 18px;
  overflow: hidden;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
  text-align: center;
}
.sk-adminkpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sk-kpi); }
.sk-adminkpi--revenue { --sk-kpi: var(--sk-raw-color-success); }
.sk-adminkpi--activations { --sk-kpi: var(--sk-raw-color-violet); }
.sk-adminkpi--members { --sk-kpi: var(--sk-raw-color-accent); }
.sk-adminkpi > p { margin: 0; }
.sk-adminkpi__label { font-size: 13.5px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text-muted); }
.sk-adminkpi__value {
  font-size: 32px;
  font-weight: var(--sk-typography-weight-extrabold);
  line-height: 1.1;
  color: var(--sk-theme-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.sk-adminkpi__value small { margin-left: 4px; font-size: 14px; font-weight: var(--sk-typography-weight-bold); color: var(--sk-theme-text-muted); }
.sk-adminkpi__value .sk-adminkpi__unit { margin: 0 2px 0 0; }
.sk-adminkpi__sub { font-size: 13px; line-height: 1.5; color: var(--sk-theme-text-muted); }
/* 官網：蝦皮的比例，寬度一成一格（頁面上不能有 style 屬性）。 */
.sk-adminkpi__split { display: flex; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; background: var(--sk-raw-color-accent); }
.sk-adminkpi__split > i { display: block; height: 100%; background: var(--sk-raw-color-primary); }
.sk-adminkpi__split--0 > i { width: 0; }
.sk-adminkpi__split--10 > i { width: 10%; }
.sk-adminkpi__split--20 > i { width: 20%; }
.sk-adminkpi__split--30 > i { width: 30%; }
.sk-adminkpi__split--40 > i { width: 40%; }
.sk-adminkpi__split--50 > i { width: 50%; }
.sk-adminkpi__split--60 > i { width: 60%; }
.sk-adminkpi__split--70 > i { width: 70%; }
.sk-adminkpi__split--80 > i { width: 80%; }
.sk-adminkpi__split--90 > i { width: 90%; }
.sk-adminkpi__split--100 > i { width: 100%; }
.sk-adminkpis__note { max-width: 96ch; margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--sk-theme-text-muted); }

.sk-adminhome__todo {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--sk-theme-border);
  border-radius: var(--sk-r-l);
  background: var(--sk-theme-surface-elevated);
  box-shadow: var(--sk-shadows-card);
}
.sk-adminhome__todo > .sk-adminhome__todotitle { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px 4px; font-size: 18px; }
.sk-adminhome__todocount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--sk-semantic-feedback-error-border);
  border-radius: 11px;
  background: var(--sk-semantic-feedback-error-background);
  color: var(--sk-semantic-feedback-error-foreground);
  font-size: 12.5px;
  font-weight: var(--sk-typography-weight-extrabold);
  font-variant-numeric: tabular-nums;
}
.sk-adminhome__note { margin: 0; padding: 0 20px 12px; font-size: 13px; color: var(--sk-theme-text-muted); }
.sk-adminhome__todolist { display: grid; margin: 0; padding: 0; list-style: none; }
/* 三張卡的標記被測試逐字釘住，所以一列一列的樣子全在這裡：數字、名稱、右邊一顆「前往」，整列可點
   （連結用 ::before 撐滿整列；「前往」是外觀，真正的連結就是名稱那一個）。左邊細色條：錢紅、回報靛、衝突琥珀。 */
.sk-adminhome__todolist > .sk-card {
  --sk-todo: var(--sk-theme-ink-danger);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 14px 20px;
  border: 0;
  border-top: 1px solid var(--sk-theme-border);
  border-radius: 0;
  background: transparent;
  box-shadow: inset 3px 0 0 var(--sk-todo);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.sk-adminhome__todolist > .sk-card:nth-child(2) { --sk-todo: var(--sk-raw-color-primary); }
.sk-adminhome__todolist > .sk-card:nth-child(3) { --sk-todo: var(--sk-raw-color-accent); }
.sk-adminhome__todolist > .sk-card::before { content: none; }
.sk-adminhome__todolist > .sk-card::after {
  content: "前往 →";
  position: static;
  width: auto;
  height: auto;
  padding: 6px 14px;
  border: 1px solid var(--sk-theme-border-strong);
  border-radius: var(--sk-r-m);
  background: var(--sk-theme-surface-elevated);
  color: var(--sk-theme-text);
  font-size: 13px;
  font-weight: var(--sk-typography-weight-bold);
  white-space: nowrap;
  opacity: 1;
  z-index: auto;
}
.sk-adminhome__todolist > .sk-card:hover { background: var(--sk-semantic-selection-hover-background); }
.sk-adminhome__todolist > .sk-card:hover::after { border-color: var(--sk-theme-link); color: var(--sk-theme-link); }
.sk-adminhome__todolist > .sk-card > p { margin: 0; }
.sk-adminhome__todolist .sk-adminstat__n { font-size: 26px; font-weight: var(--sk-typography-weight-extrabold); text-align: center; font-variant-numeric: tabular-nums; }
.sk-adminhome__todolist > .sk-card > p > a { color: var(--sk-theme-text); font-size: 15px; font-weight: var(--sk-typography-weight-bold); text-decoration: none; }
.sk-adminhome__todolist > .sk-card > p > a::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.sk-adminhome__todolist > .sk-card > p > a:focus-visible { outline: none; }
.sk-adminhome__todolist > .sk-card:focus-within { box-shadow: inset 3px 0 0 var(--sk-todo), inset 0 0 0 2px var(--sk-theme-focus-ring); }
.sk-adminhome__todo > .sk-tiny { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--sk-theme-border); }

@media (max-width: 1100px) {
  .sk-adminkpis__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sk-admin > h1,
  .sk-adminframe > section > h1,
  .sk-adminhome__head h1 { font-size: 24px; }
  .sk-admin h2,
  .sk-adminframe > section h2 { font-size: 18px; }
  .sk-adminkpis__list { gap: 12px; }
  .sk-adminkpi { padding: 18px 12px 14px; }
  .sk-adminkpi__value { font-size: 26px; }
  .sk-adminhome__todolist > .sk-card { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; }
  .sk-adminhome__todolist .sk-adminstat__n { font-size: 22px; }
  .sk-adminhome__todolist > .sk-card::after { padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sk-adminnav__toggle::after { transition: none; }
}

/* ===========================================================================
   後台導覽連結的點擊範圍（2026-10-04，小修 A1）
   ---------------------------------------------------------------------------
   手機寬度實測有兩處導覽連結比 44 x 44 小：
   一、營運數據頁內文的「看幾天」三個連結（今天、7 天、30 天），只有約 28 x 29。
       它是 inline-block 加上下各 2px 的留白，連結本身就只有字那麼大。
   二、1024 以下展開的「後台選單」，每個連結高 40px（寬度夠）。上面 .sk-adminframe 底下
       那條 a 的 min-height 改成 44px；1024 以上的側欄由同一段的 min-height: 32px 接手，
       電腦版沒有動。

   「看幾天」：連結撐到至少 44 x 44，同時把那個外框的上下留白從 10px 縮到 2px，所以整塊
   的高度跟原本差不多（原本約 51px，現在約 50px），不是多出一截空白。

   選擇器為什麼這樣寫：只認 .sk-adminframe 的內容區裡的 .sk-adminnav，也就是「看幾天」。
   後台選單本身是 .sk-adminframe 的直接子元素，不在這條規則的範圍內，它的連結不能被
   置中（選單的字是靠左的）。1024 以上的斷點跟後台選單自己的斷點相同，電腦版一個像素都不動。

   放在檔尾那段「手機頁首」之前：那一段的測試要求它是整份樣式表的最後一塊。
   這段註解不寫反引號：整份樣式表是一個 template literal。
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .sk-adminframe > :not(.sk-adminnav) .sk-adminnav { padding-block: 2px; }
  .sk-adminframe > :not(.sk-adminnav) .sk-adminnav__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--sk-sp-8);
  }
}

/* ===========================================================================
   手機頁首「選單」「購物車」的點擊範圍（2026-09-29，提案_甲批官網與蝦皮小修 甲 1）
   ---------------------------------------------------------------------------
   860 以下這兩顆鈕看得到的大小照舊（30 到 38px 高），手指按得到的範圍另外撐到長寬都至少
   44 CSS px。原本只有 30 到 38px：選單鈕高度由基本規則、480 與 400 三處決定，購物車 860 以下
   36px、400 以下 30px（跟著選單鈕縮）。

   為什麼不直接把鈕加高：頁首最小高 68px（含上下 12px 留白與 1px 底線，內容只剩 43px），
   44px 的鈕會把頁首撐成 69px，而 .sk-learnnav 的 sticky 是貼著頁首高度算的。所以看得到的
   維持原樣，只加一塊看不見的偽元素當點擊範圍。

   - 偽元素的定位容器是鈕自己：position: relative 只加在選單的 summary（.sk-drawer__trigger）
     與購物車連結上，不加在 .sk-drawer（details）上——選單面板是 position: absolute，
     它的定位容器必須是頁首，面板才會橫跨整個頁首、從頁首底下展開。
   - 四邊都是 min(-1px, calc(50% - 22px))：上下的百分比以鈕的高度算、左右以寬度算。不到 44
     的那一軸往外撐到剛好 44、置中；已經超過 44 的那一軸只蓋到 1px 邊框為止（圓角切掉的
     四個角也算在內），所以寬的那一軸不會伸進兩顆鈕之間的空隙（480 以下只有 8px）。
     400 以下沒有待付款數字時，選單鈕只有 42px 寬，左右各多 1px，到 44。
     寫成四個分開的屬性而不是 inset 簡寫：舊的 iPhone Safari（14.5 以前）不認得 inset。
   - 不在購物車的 a、選單的 summary 上加 class（多個測試逐字比對這兩個元素），頁首也不用 sk-badge。
   - 只在 860 以下：861 以上選單鈕是藏起來的，購物車也照舊，電腦版一個像素都不動。

   這段註解裡不寫反引號：整份樣式表是一個 template literal（記憶 sk-web-styles-template-literal）。
   --------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .sk-drawer__trigger,
  .sk-header__cart { position: relative; }
  .sk-drawer__trigger::after,
  .sk-header__cart::after {
    content: "";
    position: absolute;
    top: min(-1px, calc(50% - 22px));
    right: min(-1px, calc(50% - 22px));
    bottom: min(-1px, calc(50% - 22px));
    left: min(-1px, calc(50% - 22px));
  }
}