:root {
    --ink:#253630;
    --muted:#68746f;
    --jade:#244d43;
    --jade2:#356b5d;
    --red:#9c352d;
    --gold:#aa8550;
    --ivory:#f7f2e8;
    --paper:#fffdf8;
    --line:#ddd4c3;
    --font-scale:1
}

* {
    box-sizing:border-box
}

html {
    font-size:calc(16px * var(--font-scale));
    scroll-behavior:smooth
}

body {
    margin:0;
    font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.75
}

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

img {
    max-width:100%;
    height:auto
}

.container {
    width:min(1180px,calc(100% - 40px));
    margin:auto
}

.skip-link {
    position:absolute;
    left:-9999px
}

.skip-link:focus {
    left:12px;
    top:12px;
    background:#fff;
    padding:10px;
    z-index:999
}

.topbar {
    background:var(--jade);
    color:#fff;
    font-size:.9rem
}

.topbar-inner {
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between
}

.font-tools {
    display:flex;
    gap:6px
}

.font-tools button {
    min-width:38px;
    min-height:32px;
    border:1px solid rgba(255,255,255,.45);
    border-radius:8px;
    background:transparent;
    color:#fff;
    font-weight:700
}

.site-header {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,253,248,.96);
    backdrop-filter:blur(10px);
    box-shadow:0 3px 18px rgba(25,42,36,.08)
}

.nav-wrap {
    display:flex;
    align-items:center;
    min-height:86px;
    gap:28px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    margin-right:auto
}

.brand-seal {
    width:54px;
    height:54px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(145deg,var(--red),#72231e);
    font-family:serif;
    font-size:2rem;
    font-weight:800;
    border:3px double #d6b27a
}

.brand strong {
    display:block;
    font-family:serif;
    font-size:1.28rem;
    letter-spacing:.08em
}

.brand small {
    display:block;
    color:var(--muted);
    font-size:.78rem;
    letter-spacing:.1em
}

.main-nav {
    display:flex;
    align-items:center;
    gap:5px
}

.main-nav a {
    padding:10px 12px;
    border-radius:10px;
    font-weight:650;
    white-space:nowrap
}

.main-nav a:hover {
    background:#f0e8db
}

.main-nav .nav-member {
    background:var(--red);
    color:#fff;
    padding-inline:16px
}

.nav-toggle {
    display:none;
    min-width:48px;
    min-height:44px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:10px;
    font-weight:700
}

.hero {
    position:relative;
    overflow:hidden;
    background:linear-gradient(115deg,#193f37 0%,#2d5d50 54%,#bd8e54 140%);
    color:#fff
}

.hero:after {
    content:"徐";
    position:absolute;
    right:-1vw;
    bottom:-16vw;
    font-size:min(52vw,620px);
    font-family:serif;
    font-weight:900;
    color:rgba(255,255,255,.035);
    line-height:1
}

.hero-inner {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.25fr .75fr;
    min-height:520px;
    align-items:center;
    gap:50px;
    padding:78px 0
}

.eyebrow {
    display:inline-block;
    color:#f0d6ac;
    font-weight:800;
    letter-spacing:.18em;
    margin-bottom:12px
}

.hero h1 {
    font-family:serif;
    font-size:clamp(2.5rem,5vw,4.8rem);
    line-height:1.18;
    margin:0 0 24px;
    letter-spacing:.06em
}

.hero p {
    font-size:1.18rem;
    max-width:700px;
    color:#edf4f1;
    margin:0 0 30px
}

.hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:12px
}

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:10px 20px;
    border-radius:12px;
    border:1px solid transparent;
    font-weight:800;
    cursor:pointer
}

.btn-primary {
    background:var(--red);
    color:#fff
}

.btn-light {
    background:#fff;
    color:var(--jade)
}

.btn-outline {
    border-color:var(--jade);
    color:var(--jade);
    background:#fff
}

.hero-card {
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.23);
    border-radius:28px;
    padding:28px;
    box-shadow:0 30px 70px rgba(0,0,0,.16)
}

.hero-card .seal-big {
    width:170px;
    height:170px;
    border-radius:50%;
    border:6px double #e1c495;
    margin:0 auto 24px;
    display:grid;
    place-items:center;
    font-family:serif;
    font-size:6.5rem;
    background:rgba(136,38,30,.72)
}

.hero-card ul {
    list-style:none;
    padding:0;
    margin:0
}

.hero-card li {
    padding:11px 0;
    border-top:1px solid rgba(255,255,255,.15)
}

.section {
    padding:74px 0
}

.section.alt {
    background:var(--ivory)
}

.section-head {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:30px
}

.section-title {
    font-family:serif;
    font-size:2rem;
    margin:0
}

.section-sub {
    color:var(--muted);
    margin:.25rem 0 0
}

.cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.card {
    background:#fff;
    border:1px solid #e8e0d3;
    border-radius:20px;
    padding:24px;
    box-shadow:0 12px 32px rgba(44,55,50,.05)
}

.card h3 {
    margin:0 0 8px;
    font-size:1.15rem
}

.card .date {
    color:var(--red);
    font-weight:800;
    font-size:.88rem
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px
}

.feature {
    background:#fff;
    border:1px solid #e5ddcf;
    border-radius:18px;
    padding:22px
}

.feature .icon {
    font-size:1.8rem
}

.feature h3 {
    margin:8px 0
}

.timeline {
    display:grid;
    gap:14px
}

.timeline-item {
    display:grid;
    grid-template-columns:120px 1fr;
    gap:18px;
    border-bottom:1px solid var(--line);
    padding:15px 0
}

.timeline-year {
    font-family:serif;
    font-size:1.4rem;
    color:var(--red);
    font-weight:800
}

.page-hero {
    background:linear-gradient(135deg,#e8ddc9,#f8f4ec);
    padding:54px 0;
    border-bottom:1px solid var(--line)
}

.page-hero h1 {
    font-family:serif;
    font-size:2.25rem;
    margin:0
}

.breadcrumb {
    font-size:.9rem;
    color:var(--muted);
    margin-bottom:7px
}

.content-wrap {
    padding:54px 0
}

.cms-content {
    max-width:850px;
    font-size:1.05rem
}

.cms-content h2,.cms-content h3 {
    font-family:serif;
    color:var(--jade)
}

.cms-content table {
    width:100%;
    border-collapse:collapse
}

.cms-content td,.cms-content th {
    border:1px solid var(--line);
    padding:10px
}

.cms-content img {
    max-width:100%
}

.list-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px
}

.list-card {
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    background:#fff
}

.list-card .thumb {
    height:190px;
    background:linear-gradient(135deg,#d7c8ab,#8baa9c);
    display:grid;
    place-items:center;
    color:#fff;
    font-size:4rem;
    font-family:serif
}

.list-card .body {
    padding:20px
}

.meta {
    font-size:.9rem;
    color:var(--muted)
}

.member-panel {
    max-width:840px;
    margin:50px auto;
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:30px;
    box-shadow:0 20px 60px rgba(30,50,42,.08)
}

.member-status {
    padding:14px 16px;
    border-radius:12px;
    background:#f3ede2;
    margin-bottom:20px
}

.notice {
    padding:12px 16px;
    border-radius:10px;
    margin:16px 0;
    background:#edf5f2
}

.notice.error {
    background:#fae9e7;
    color:#7e2420
}

.notice.success {
    background:#e8f5ee;
    color:#24563d
}

.form-grid {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px
}

.field {
    display:grid;
    gap:6px
}

.field.full {
    grid-column:1/-1
}

input,select,textarea {
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #cfc6b7;
    border-radius:10px;
    background:#fff;
    font:inherit
}

textarea {
    min-height:120px
}

.site-footer {
    background:#1d342e;
    color:#e9efec;
    padding:48px 0 18px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:30px
}

.footer-title {
    font-family:serif;
    font-size:1.4rem;
    font-weight:800
}

.site-footer a {
    color:#fff
}

.copyright {
    border-top:1px solid rgba(255,255,255,.15);
    margin-top:28px;
    padding-top:16px;
    font-size:.88rem;
    color:#bdcbc6
}

.gallery-grid {
    columns:3;
    column-gap:16px
}

.gallery-item {
    break-inside:avoid;
    margin-bottom:16px;
    border-radius:16px;
    overflow:hidden;
    background:#eee
}

.gallery-item img {
    display:block;
    width:100%
}

@media(max-width:900px) {
    .container {
        width:min(100% - 28px,1180px)
    }
    .nav-wrap {
        min-height:74px
    }
    .brand-seal {
        width:46px;
        height:46px
    }
    .brand small {
        display:none
    }
    .nav-toggle {
        display:block
    }
    .main-nav {
        position:absolute;
        left:14px;
        right:14px;
        top:118px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        background:#fff;
        border:1px solid var(--line);
        border-radius:16px;
        padding:10px;
        box-shadow:0 20px 50px rgba(0,0,0,.15)
    }
    .main-nav.open {
        display:flex
    }
    .main-nav a {
        min-height:46px
    }
    .hero-inner {
        grid-template-columns:1fr;
        min-height:auto;
        padding:58px 0
    }
    .hero-card {
        display:none
    }
    .cards,.list-grid {
        grid-template-columns:1fr 1fr
    }
    .feature-grid {
        grid-template-columns:1fr 1fr
    }
    .footer-grid {
        grid-template-columns:1fr 1fr
    }
    .gallery-grid {
        columns:2
    }
}

@media(max-width:620px) {
    html {
        font-size:calc(17px * var(--font-scale))
    }
    .container {
        width:min(100% - 22px,1180px)
    }
    .brand strong {
        font-size:1.08rem
    }
    .hero h1 {
        font-size:2.35rem
    }
    .hero p {
        font-size:1.06rem
    }
    .hero-actions .btn {
        width:100%
    }
    .section {
        padding:48px 0
    }
    .section-head {
        align-items:start;
        flex-direction:column
    }
    .cards,.list-grid,.feature-grid,.footer-grid,.form-grid {
        grid-template-columns:1fr
    }
    .timeline-item {
        grid-template-columns:1fr;
        gap:2px
    }
    .gallery-grid {
        columns:1
    }
    .btn {
        min-height:52px
    }
    .font-tools button {
        min-height:36px
    }
    .page-hero h1 {
        font-size:1.8rem
    }
}

@media print {
    .site-header,.site-footer,.no-print {
        display:none!important
    }
    .page-hero {
        padding:10px 0
    }
    .content-wrap {
        padding:10px 0
    }
}

.hero-slide {
    display: none;
    min-height: 520px;
    background: linear-gradient(115deg,#193f37 0%,#2d5d50 54%,#bd8e54 140%);
    background-size: cover;
    background-position: center;
}

.hero-slide.is-active {
    display: block;
}

.hero-carousel-controls {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    pointer-events: none;
}

.hero-carousel-controls button {
    pointer-events: auto;
}

.hero-arrow {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 50%;
    background: rgba(15,42,35,.55);
    color: #fff;
    font-size: 1.7rem;
    cursor: pointer;
}

.hero-dots {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15,42,35,.48);
}

.hero-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.hero-dot.is-active {
    background: #fff;
}

@media (max-width: 900px) {
    .hero-slide {
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .hero-carousel-controls {
        bottom: 10px;
    }

    .hero-arrow {
        width: 38px;
        height: 38px;
    }
}

.content-cover {
    display: block;
    width: min(100%, 1100px);
    height: auto;
    max-height: 620px;
    object-fit: contain;
    margin: 0 auto 34px;
    border-radius: 18px;
    background: #f4efe6;
}

.site-confirm-dialog {
    width: min(92vw, 480px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
}

.site-confirm-dialog::backdrop {
    background: rgba(18,35,30,.55);
}

.site-confirm-card {
    padding: 24px;
}

.site-confirm-card h2 {
    margin-top: 0;
    font-family: serif;
}

.site-confirm-card p {
    color: var(--muted);
    white-space: pre-wrap;
}

.site-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
}