/* Fonts: ChenYuluoyan (辰宇落雁體) */
@font-face {
    font-family: "jf-openhuninn-2.1";                 /* ← 你等下就用這個名字 */
    src: url("../assets/jf-openhuninn-2.1.ttf") format("truetype");
    font-weight: 100;                             /* Thin 權重，多數瀏覽器也會合成 400 */
    font-style: normal;
    font-display: swap;
}


/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'jf-openhuninn-2.1','Microsoft JhengHei','PingFang TC','Helvetica Neue',Arial,sans-serif;
    line-height: 1.7;
    color: #2b2b2b;
    background: #f5F3EF;
    min-height: 100vh;
}

/* Header & Nav */
.header { 
    background:#24392e; 
    border-bottom:1px solid rgba(255,255,255,.06); 
    padding:1rem 0; 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    z-index:1000; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    box-shadow:0 8px 24px rgba(0,0,0,.15); 
}
.header-content { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    width:100%; 
    max-width:1200px; 
    padding:0 2rem; 
}
.logo { 
    font-size: 2rem; 
    font-weight:900; 
    color:#f6efe6; 
    letter-spacing:.5px; 
}
.nav { 
    display:flex; 
    gap:2rem; 
    align-items:center; 
}
.nav-item { 
    display:flex; 
    align-items:center; 
    gap:.5rem; 
    color:#d9e2da; 
    text-decoration:none; 
    font-size:1rem; 
    transition: all .2s ease; 
    white-space: nowrap; /* 防止文字換行 */
}
.nav-item:hover { 
    color:#ffd166; 
    transform: translateY(-1px); 
}
.nav-icon { 
    width:16px; 
    height:16px; 
}

/* Layout helpers */
.main-content { margin-top: 90px; padding: 3rem 2rem; max-width: 1100px; margin-left:auto; margin-right:auto; }
.card { background:#ffffff; border-radius:18px; box-shadow:0 20px 40px rgba(0,0,0,.12); padding:1.5rem; }
.list { color:#495057; }
.list li { margin:.35rem 0; }

/* Responsive */
@media (max-width: 768px) {
    .header { 
        padding: 0.75rem 0; 
    }
    
    .header-content { 
        padding: 0 1rem; 
        flex-wrap: wrap; 
        justify-content: space-between; 
    }
    
    .logo { 
        font-size: 1.5rem; 
        flex-shrink: 0; 
    }
    
    .nav { 
        gap: 1rem; 
        flex-wrap: wrap; 
        justify-content: center; 
        width: 100%; 
        margin-top: 0.5rem; 
    }
    
    .nav-item { 
        font-size: 0.9rem; 
        padding: 0.25rem 0.5rem; 
    }
    
    .main-content { 
        margin-top: 140px; 
        padding: 2rem 1rem; 
    }
}

/* 針對更小的手機螢幕 */
@media (max-width: 480px) {
    .header { 
        padding: 0.5rem 0; 
    }
    
    .header-content { 
        padding: 0 0.5rem; 
        flex-direction: column; 
        gap: 0.5rem; 
    }
    
    .logo { 
        font-size: 1.3rem; 
        text-align: center; 
    }
    
    .nav { 
        gap: 0.75rem; 
        margin-top: 0; 
        justify-content: center; 
    }
    
    .nav-item { 
        font-size: 0.85rem; 
        padding: 0.2rem 0.4rem; 
    }
    
    .main-content { 
        margin-top: 160px; 
        padding: 1rem 0.5rem; 
    }
}