.front-site--c {
    --front-ink: #0f172a;
    --front-ink-soft: #334155;
    --front-muted: #64748b;
    --front-paper: #ffffff;
    --front-canvas: #f6f9fc;
    --front-canvas-deep: #e8f1f7;
    --front-line: #d8e3ec;
    --front-line-strong: #b4c7d5;
    --front-primary: #0369a1;
    --front-primary-deep: #082f49;
    --front-primary-soft: #e0f2fe;
    --front-accent: #f59e0b;
    --front-accent-soft: #fff6dc;
    --front-success: #15803d;
    --front-success-soft: #e8f7ed;
    --front-danger: #b42318;
    --front-danger-soft: #fff0ee;
    --front-shadow: 0 20px 50px rgba(8, 47, 73, 0.1);
    --front-shadow-soft: 0 7px 22px rgba(8, 47, 73, 0.07);
    --front-radius: 10px;
    background:
        linear-gradient(rgba(3, 105, 161, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(3, 105, 161, 0.035) 1px, transparent 1px),
        var(--front-canvas);
    background-size: 32px 32px;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.7;
}

.front-site--c .front-site-header {
    border-bottom: 2px solid var(--front-primary-deep);
    background: rgba(255, 255, 255, 0.96);
}

.front-site--c .front-utility {
    border-bottom-color: rgba(245, 158, 11, 0.45);
    background: var(--front-primary-deep);
}

.front-site--c .front-container,
.front-site--c .front-shell {
    width: min(1200px, calc(100% - 40px));
}

.front-site--c .front-header__inner {
    min-height: 88px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.front-site--c .front-brand__mark {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--front-primary-deep);
    box-shadow: 5px 5px 0 var(--front-accent);
    font-size: 0.92rem;
}

.front-site--c .front-brand__copy strong {
    color: var(--front-primary-deep);
    font-size: 1.02rem;
    letter-spacing: 0.06em;
}

.front-site--c .front-brand__copy small {
    color: var(--front-primary);
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.front-site--c .front-nav__link {
    border-radius: 4px;
    color: var(--front-ink-soft);
    font-size: 0.82rem;
}

.front-site--c .front-nav__link:hover,
.front-site--c .front-nav__link[aria-current="page"] {
    background: var(--front-primary-soft);
    color: var(--front-primary-deep);
}

.front-site--c .front-nav__link[aria-current="page"] {
    box-shadow: inset 0 -3px 0 var(--front-accent);
}

.front-site--c .front-nav-toggle {
    border-radius: 6px;
    background: var(--front-paper);
}

.front-site--c .front-theme-switcher__summary:hover,
.front-site--c .front-theme-switcher[open] .front-theme-switcher__summary,
.front-site--c .front-theme-switcher__link:hover,
.front-site--c .front-theme-switcher__link.is-active {
    background: var(--front-primary-soft);
    color: var(--front-primary-deep);
}

.front-site--c .front-shell {
    grid-template-columns: 250px minmax(0, 1fr) 200px;
    gap: 28px;
    padding-top: 54px;
    padding-bottom: 82px;
}

.front-site--c .front-side-menu__card,
.front-site--c .front-card,
.front-site--c .front-panel,
.front-site--c .front-auth-card,
.front-site--c .front-rail__card,
.front-site--c .front-news-list,
.front-site--c .front-course-card,
.front-site--c .front-detail-section__body {
    border-radius: var(--front-radius);
    box-shadow: var(--front-shadow-soft);
}

.front-site--c .front-side-menu__intro {
    background:
        linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(3, 105, 161, 0.95)),
        var(--front-primary-deep);
}

.front-site--c .front-side-menu__intro h2,
.front-site--c .front-rail__card h2,
.front-site--c .front-page-intro h1,
.front-site--c .front-section__head h2,
.front-site--c .front-card__header h2,
.front-site--c .front-card__header h3,
.front-site--c .front-detail-hero__copy h1,
.front-site--c .front-detail-section h2,
.front-site--c .front-auth-aside h2,
.front-site--c .front-auth-card h1,
.front-site--c .front-status-panel h1,
.front-site--c .front-modal__copy h2 {
    color: var(--front-ink);
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
    letter-spacing: -0.045em;
}

.front-site--c .front-side-menu__intro h2,
.front-site--c .front-detail-hero__copy h1,
.front-site--c .front-auth-aside h2 {
    color: #fff;
}

.front-site--c .front-page-intro {
    margin-bottom: 36px;
}

.front-site--c .front-page-intro h1 {
    font-size: clamp(2rem, 3.7vw, 3rem);
    line-height: 1.2;
}

.front-site--c .front-page-intro p {
    max-width: 65ch;
    font-size: 0.98rem;
}

.front-site--c .front-page-intro__kicker,
.front-site--c .front-section__kicker,
.front-site--c .front-eyebrow,
.front-site--c .front-page-intro__kicker {
    color: var(--front-primary);
    letter-spacing: 0.16em;
}

.front-site--c .front-page-intro__kicker::before,
.front-site--c .front-eyebrow::before {
    width: 26px;
    height: 3px;
    background: var(--front-accent);
}

.front-site--c .front-button {
    border-radius: 5px;
    font-size: 0.84rem;
    letter-spacing: 0.02em;
}

.front-site--c .front-button--primary {
    background: var(--front-primary);
    box-shadow: 0 8px 18px rgba(3, 105, 161, 0.2);
}

.front-site--c .front-button--primary:hover {
    background: var(--front-primary-deep);
}

.front-site--c .front-button--quiet {
    background: var(--front-accent-soft);
    color: #8a5a00 !important;
}

.front-site--c .front-button--quiet:hover {
    background: #ffedb2;
}

.front-site--c .front-category-menu a:hover,
.front-site--c .front-category-menu a[aria-current="page"] {
    color: var(--front-primary);
}

.front-site--c .front-side-menu__note {
    border: 1px solid #f4d38a;
    border-radius: 6px;
    background: var(--front-accent-soft);
    color: #7a5410;
}

.front-site--c .front-home-hero,
.front-site--c .front-detail-hero {
    border-radius: 8px;
    background: var(--front-primary-deep);
}

.front-site--c .front-home-hero {
    box-shadow: 0 24px 60px rgba(8, 47, 73, 0.18);
}

.front-site--c .front-hero__copy {
    padding: clamp(32px, 6vw, 72px);
}

.front-site--c .front-hero__copy h1 {
    max-width: 12ch;
    font-size: clamp(2.25rem, 5vw, 4rem);
    letter-spacing: -0.08em;
    line-height: 1.1;
}

.front-site--c .front-hero__kicker,
.front-site--c .front-hero__copy p {
    color: #cbe7f5;
}

.front-site--c .front-hero__visual {
    background: #0d4665;
}

.front-site--c .front-hero__placeholder {
    background:
        linear-gradient(135deg, transparent 49.5%, rgba(245, 158, 11, 0.5) 50%, transparent 50.5%),
        linear-gradient(45deg, transparent 49.5%, rgba(125, 211, 252, 0.42) 50%, transparent 50.5%),
        linear-gradient(145deg, #0d5e89, #082f49);
    background-size: 44px 44px, 44px 44px, auto;
}

.front-site--c .front-hero__arrow {
    border-radius: 5px;
    background: rgba(8, 47, 73, 0.78);
}

.front-site--c .front-hero__dot.is-active::before {
    background: var(--front-accent);
}

.front-site--c .front-section {
    margin-top: 64px;
}

.front-site--c .front-section__head h2 {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.front-site--c .front-course-card:hover {
    border-color: #8bc5e4;
    box-shadow: 0 16px 34px rgba(3, 105, 161, 0.13);
}

.front-site--c .front-course-card__placeholder {
    background:
        linear-gradient(135deg, transparent 49.5%, rgba(245, 158, 11, 0.55) 50%, transparent 50.5%),
        linear-gradient(145deg, #0d5e89, #082f49);
    background-size: 34px 34px, auto;
}

.front-site--c .front-news-list a:hover {
    background: #eef8fd;
}

.front-site--c .front-news-note {
    border-color: #b9dcec;
    background: linear-gradient(145deg, #f1faff, #e3f1f8);
}

.front-site--c .front-news-note__mark,
.front-site--c .front-news-row__date {
    background: var(--front-primary-soft);
    color: var(--front-primary-deep);
}

.front-site--c .front-detail-hero__visual,
.front-site--c .front-modal__visual {
    background: #0d4665;
}

.front-site--c .front-detail-hero__placeholder,
.front-site--c .front-modal__placeholder {
    background: linear-gradient(145deg, #0d5e89, #082f49);
}

.front-site--c .front-price-card,
.front-site--c .front-summary {
    border-color: #b9dcec;
    border-radius: 10px;
    background: linear-gradient(145deg, #f1faff, #e3f1f8);
}

.front-site--c .front-price-card__value,
.front-site--c .front-summary__total strong {
    color: var(--front-primary-deep);
}

.front-site--c .front-price-card .front-button--primary {
    background: var(--front-accent);
    color: #342000 !important;
}

.front-site--c .front-price-card .front-button--primary:hover {
    background: #d97706;
}

.front-site--c .front-content-body a {
    color: var(--front-primary);
}

.front-site--c .front-pagination li.active a,
.front-site--c .front-pagination li.active span,
.front-site--c .front-pagination li a:hover,
.front-site--c .front-news-categories a:hover,
.front-site--c .front-news-categories a[aria-current="page"] {
    border-color: var(--front-primary);
    background: var(--front-primary);
}

.front-site--c .front-auth-aside {
    border-radius: 10px;
    background:
        linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(3, 105, 161, 0.96)),
        var(--front-primary-deep);
}

.front-site--c .front-auth-card,
.front-site--c .front-status-panel,
.front-site--c .front-modal__dialog {
    border-radius: 10px;
}

.front-site--c .front-payment-option input:checked + label {
    border-color: var(--front-primary);
    background: var(--front-primary-soft);
    box-shadow: 0 0 0 2px rgba(3, 105, 161, 0.1);
}

.front-site--c .front-payment-option input:checked + label::before {
    border-color: var(--front-primary);
}

.front-site--c .front-modal__close {
    border-radius: 5px;
    background: rgba(8, 47, 73, 0.86);
}

.front-site--c .front-site-footer {
    border-top: 2px solid var(--front-primary-deep);
    background: var(--front-primary-deep);
}

.front-site--c .front-footer__brand strong,
.front-site--c .front-footer__heading {
    color: #fff;
}

.front-site--c .front-footer__brand p,
.front-site--c .front-footer__links a,
.front-site--c .front-footer__bottom {
    color: #eef8fc;
}

/* 深色頁尾的可讀性契約：一般文字至少維持 16px 級距與 4.5:1 以上對比，
   不依賴 base theme 的 muted 色，避免快取或載入順序異常時變成深藍字。 */
.front-site--c .front-footer__brand p,
.front-site--c .front-footer__links a {
    font-size: 0.88rem;
}

.front-site--c .front-footer__links a:hover,
.front-site--c .front-footer__links a:focus-visible {
    color: #fff2b8;
}

.front-site--c .front-footer__contact-col {
    border-top-color: rgba(191, 216, 231, 0.28);
}

/* 深底頁尾聯絡資訊：標籤用白色搭金色小圖示，內容與連結改用高對比淺藍/白色，
   確保電話、Email 在深藍底上清楚可讀（WCAG AA）。 */
.front-site--c .front-footer__contact dt {
    color: #fff;
}

.front-site--c .front-footer__contact dt svg {
    color: var(--front-accent);
}

.front-site--c .front-footer__contact dd,
.front-site--c .front-footer__contact-sep,
.front-site--c .front-footer__contact-note,
.front-site--c .front-footer__contact small {
    color: #eef8fc;
}

.front-site--c .front-footer__contact dd {
    font-size: 0.88rem;
}

.front-site--c .front-footer__contact a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}

.front-site--c .front-footer__contact a:hover,
.front-site--c .front-footer__contact a:focus-visible {
    color: #fff2b8;
}

.front-site--c .front-footer__contact a:focus-visible {
    outline-color: #fff2b8;
}

.front-site--c .front-footer__bottom {
    border-top-color: rgba(191, 216, 231, 0.25);
    color: #eef8fc;
}

.front-site--c .front-footer__bottom a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, 0.55);
}

.front-site--c .front-footer__bottom a:hover,
.front-site--c .front-footer__bottom a:focus-visible {
    color: #fff2b8;
}

.front-site--c .front-footer__bottom a:focus-visible {
    outline-color: #fff2b8;
}

@media (max-width: 1023px) {
    .front-site--c .front-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 22px;
    }

    .front-site--c .front-nav__list {
        border-radius: 8px;
    }
}

@media (max-width: 767px) {
    .front-site--c .front-container,
    .front-site--c .front-shell {
        width: min(100% - 30px, 660px);
    }

    .front-site--c .front-shell {
        padding-top: 30px;
        padding-bottom: 58px;
    }

    .front-site--c .front-hero__copy {
        padding: 30px 25px 22px;
    }

    .front-site--c .front-section {
        margin-top: 48px;
    }
}

@media (max-width: 540px) {
    .front-site--c .front-container,
    .front-site--c .front-shell {
        width: min(100% - 22px, 520px);
    }

    .front-site--c .front-page-intro h1 {
        font-size: clamp(1.8rem, 9vw, 2.4rem);
    }

    .front-site--c .front-hero__copy h1 {
        font-size: clamp(2.1rem, 12vw, 3rem);
    }
}

@media (min-width: 1024px) {
    .front-site--c .front-shell.front-shell--course {
        width: min(1440px, calc(100% - 40px));
        grid-template-columns: clamp(284px, 23vw, 327px) minmax(0, 1fr) clamp(196px, 16vw, 225px);
    }
}