/* ==== 前台樣式 ==== */
:root{
    --ink:#1a1a2e;
    --ink-2:#24243e;
    --gold:#d4af37;
    --gold-soft:#f0d97a;
    --parchment:#f7f1e1;
    --red-seal:#b52b2b;
    --jade:#0f9b5e;
}

*{box-sizing:border-box;}
html,body{scroll-behavior:smooth;}
body.fe-body{
    font-family:'Noto Serif TC','Songti TC',serif;
    background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);
    color:#e7e3d8;
    min-height:100vh;
}

/* Navbar */
.fe-nav{
    background:rgba(20,20,40,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(212,175,55,.25);
}
.fe-nav .navbar-brand{color:var(--gold);font-size:1.3rem;letter-spacing:.05em;}
.fe-nav .brand-glow{
    display:inline-block;
    animation:glow 3s ease-in-out infinite alternate;
}
@keyframes glow{
    from{text-shadow:0 0 4px var(--gold);}
    to{text-shadow:0 0 16px var(--gold-soft),0 0 24px var(--gold);}
}
.fe-nav .nav-link{color:#e7e3d8 !important;transition:color .25s;}
.fe-nav .nav-link:hover,.fe-nav .nav-link.active{color:var(--gold) !important;}
.fe-nav .dropdown-menu{background:#1a1a2e;border:1px solid rgba(212,175,55,.2);}
.fe-nav .dropdown-item{color:#e7e3d8;}
.fe-nav .dropdown-item:hover{background:rgba(212,175,55,.15);color:var(--gold);}

/* Hero */
.hero{
    position:relative;
    padding:120px 0 100px;
    text-align:center;
    overflow:hidden;
}
.hero::before{
    content:'';
    position:absolute;inset:0;
    background-image:
        radial-gradient(circle at 20% 30%,rgba(212,175,55,.15),transparent 40%),
        radial-gradient(circle at 80% 70%,rgba(181,43,43,.15),transparent 45%);
    animation:driftBg 20s ease-in-out infinite alternate;
}
@keyframes driftBg{
    from{transform:translate(0,0);}
    to{transform:translate(40px,-30px);}
}
.hero h1{
    font-size:clamp(2.2rem,5vw,4rem);
    font-weight:700;
    color:var(--gold);
    letter-spacing:.12em;
    text-shadow:0 0 24px rgba(212,175,55,.35);
    animation:fadeUp 1s ease-out;
}
.hero p.lead{
    color:#d1cdbf;
    font-size:1.15rem;
    max-width:640px;margin:20px auto;
    animation:fadeUp 1.3s ease-out;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:none;}}

.btn-gold{
    background:linear-gradient(135deg,var(--gold) 0%,#b8941e 100%);
    color:#1a1a2e;font-weight:600;border:none;
    padding:12px 36px;border-radius:4px;
    transition:all .3s;
    box-shadow:0 4px 20px rgba(212,175,55,.35);
}
.btn-gold:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 28px rgba(212,175,55,.55);
    color:#1a1a2e;
}

/* 卡片 */
.fe-card{
    background:rgba(255,255,255,.04);
    border:1px solid rgba(212,175,55,.2);
    border-radius:8px;
    padding:28px;
    transition:all .35s;
    backdrop-filter:blur(8px);
}
.fe-card:hover{
    transform:translateY(-6px);
    border-color:var(--gold);
    box-shadow:0 12px 40px rgba(0,0,0,.4);
}
.fe-card h3,.fe-card h4{color:var(--gold);margin-bottom:14px;}
.text-gold{color:var(--gold)!important;}

/* 命盤 */
.bazi-chart-box{
    background:linear-gradient(135deg,#fdf6e3 0%,#f4ebd3 100%);
    color:#2b2b2b;
    border-radius:8px;
    padding:30px;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
    border:2px solid var(--gold);
    position:relative;
}
.bazi-chart-box::before{
    content:'☯';
    position:absolute;top:10px;right:18px;
    color:rgba(180,140,40,.15);
    font-size:5rem;pointer-events:none;
}
.pillar-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;margin:20px 0;
}
.pillar{
    text-align:center;
    padding:16px 8px;
    border:1px solid #c5a572;
    border-radius:6px;
    background:#fff;
    transition:transform .3s;
}
.pillar:hover{transform:scale(1.05);}
.pillar .label{font-size:.85rem;color:#888;}
.pillar .stem{font-size:2rem;color:#1a1a2e;font-weight:700;line-height:1;margin:6px 0;}
.pillar .branch{font-size:2rem;color:var(--red-seal);font-weight:700;line-height:1;}
.pillar .element{font-size:.75rem;color:#6a5a2e;margin-top:6px;}

/* 藏干/副星/運/神煞 對應表 */
.pillar-extra{
    display:flex;flex-direction:column;gap:0;
    border:1px solid #c5a572;border-radius:6px;
    background:#fff;margin:16px 0 4px;overflow:hidden;
}
.pillar-extra-row{
    display:grid;
    grid-template-columns:repeat(4,1fr) 60px;
    border-top:1px solid #e7d9b8;
}
.pillar-extra-row:first-child{border-top:none;}
.pillar-extra-label{
    background:#f0e4c5;color:#8b4513;font-weight:700;
    text-align:center;padding:8px 4px;border-left:1px solid #c5a572;
    display:flex;align-items:center;justify-content:center;
}
.pillar-extra-cell{
    text-align:center;padding:10px 4px;
    border-left:1px dashed #e7d9b8;color:#2b2b2b;line-height:1.5;
    font-size:1.1rem;
}
.pillar-extra-cell:first-of-type{border-left:none;}
.pillar-extra-cell.small{font-size:1rem;}
/* 藏干橫向排列，由右至左 */
.pillar-extra-cell.pillar-extra-horiz{
    display:flex;flex-direction:row-reverse;
    align-items:center;justify-content:center;gap:4px;
}
/* 副星縱向排列、由右至左 (傳統直書，每個詞字往下、詞組由右到左) */
.pillar-extra-cell.pillar-extra-vert{
    display:flex;flex-direction:row-reverse;
    align-items:flex-start;justify-content:center;gap:6px;
    padding-top:6px;padding-bottom:6px;
}
.pillar-extra-cell.pillar-extra-vert .vtext{
    writing-mode:vertical-rl;
    text-orientation:upright;
    letter-spacing:2px;
    line-height:1.1;
}

.elements-bar{display:flex;gap:10px;margin:20px 0;}
.elements-bar .el{
    flex:1;text-align:center;
    padding:12px 6px;border-radius:6px;
    font-weight:700;
    animation:elPop .5s cubic-bezier(.4,1.5,.6,1) backwards;
}
.el-木{background:#c8e6c9;color:#1b5e20;}
.el-火{background:#ffcdd2;color:#b71c1c;}
.el-土{background:#ffecb3;color:#8d6e63;}
.el-金{background:#fff9c4;color:#827717;}
.el-水{background:#bbdefb;color:#0d47a6;}
@keyframes elPop{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:none;}}

/* Footer */
.fe-footer{
    background:#0f0f1e;
    border-top:1px solid rgba(212,175,55,.2);
    padding:40px 0 24px;
    margin-top:80px;
}
.fe-footer .text-gold{color:var(--gold);}

/* Utility */
.bg-ink{background:#1a1a2e;}
.fe-main{min-height:60vh;}
.animate-fade-up{animation:fadeUp .8s ease-out both;}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s,transform .8s;}
.reveal.on{opacity:1;transform:none;}

/* 教師卡片 */
.teacher-card{
    background:#fff;color:#1a1a2e;
    border-radius:12px;overflow:hidden;
    transition:transform .3s,box-shadow .3s;
    border:1px solid rgba(212,175,55,.3);
}
.teacher-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.4);}
.teacher-card .avatar{
    width:100%;aspect-ratio:1;
    background:linear-gradient(135deg,#d4af37,#8b6914);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:4rem;
}
.teacher-card .body{padding:20px;}
.teacher-card .name{color:var(--ink);font-size:1.3rem;font-weight:700;}
.teacher-card .specialty{color:#666;font-size:.9rem;margin:6px 0;}
.teacher-card .price{color:var(--red-seal);font-weight:700;}

/* 表單 */
.form-control,.form-select{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(212,175,55,.3);
    color:#e7e3d8;
}
.form-control:focus,.form-select:focus{
    background:rgba(255,255,255,.12);
    border-color:var(--gold);
    box-shadow:0 0 0 .2rem rgba(212,175,55,.18);
    color:#fff;
}
.form-control::placeholder{color:rgba(231,227,216,.5);}
/* 下拉選項：作業系統原生渲染，需要明確深色字，避免白底白字 */
.form-select option,.form-control option{
    background:#fff;
    color:#2b2b2b;
}
.form-select option:checked,.form-select option:hover{
    background:#d4af37;
    color:#1a1a2e;
}
.form-label{color:#d1cdbf;}
/* Radio / Checkbox 前台版 */
.form-check-input{background-color:rgba(255,255,255,.12);border-color:rgba(212,175,55,.4);}
.form-check-input:checked{background-color:var(--gold);border-color:var(--gold);}
.form-check-label{color:#d1cdbf;}

/* 公告列表 */
.news-list .item{
    display:flex;align-items:center;
    padding:16px 20px;
    border-bottom:1px solid rgba(212,175,55,.15);
    transition:background .2s;
}
.news-list .item:hover{background:rgba(212,175,55,.08);}
.news-list .date{
    color:var(--gold);min-width:110px;font-family:monospace;font-size:.9rem;
}
.news-list .title{color:#e7e3d8;flex:1;margin:0 20px;}

/* 命盤分析 */
.bazi-analysis h4{color:var(--red-seal);border-bottom:2px solid var(--gold);padding-bottom:8px;margin-top:24px;}
.bazi-analysis p{line-height:1.9;color:#2b2b2b;}

/* 文章紙張式閱讀介面 */
.article-paper{
    background:linear-gradient(180deg,#fdf8eb 0%,#f5ecd3 100%);
    color:#2b2b2b;
    border-radius:8px;
    padding:40px 44px;
    box-shadow:0 10px 40px rgba(0,0,0,.3);
    border:1px solid rgba(180,140,40,.3);
    position:relative;
}
.article-paper::before{
    content:'';
    position:absolute;inset:12px;
    border:1px solid rgba(180,140,40,.18);
    border-radius:4px;pointer-events:none;
}
.article-title{
    color:#8b4513;
    font-size:1.9rem;
    line-height:1.4;
    margin-bottom:12px;
    padding-bottom:16px;
    border-bottom:2px solid rgba(180,140,40,.3);
    font-weight:700;
    letter-spacing:.04em;
}
.article-meta{
    color:#888;font-size:.9rem;margin-bottom:24px;
}
.article-content{
    line-height:2;
    color:#2b2b2b;
    font-size:1.05rem;
}
.article-content h1,.article-content h2,.article-content h3,.article-content h4{
    color:#8b4513;
    margin-top:28px;margin-bottom:14px;
    border-left:4px solid var(--gold);
    padding-left:12px;
}
.article-content h2{font-size:1.5rem;}
.article-content h3{font-size:1.25rem;}
.article-content h4{font-size:1.1rem;}
.article-content p{margin-bottom:16px;}
.article-content a{color:var(--red-seal);text-decoration:underline;}
.article-content a:hover{color:#8b1f1f;}
.article-content img{max-width:100%;height:auto;border-radius:6px;margin:16px 0;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.article-content blockquote{
    border-left:4px solid var(--gold);
    padding:12px 20px;
    margin:20px 0;
    background:rgba(212,175,55,.08);
    color:#555;font-style:italic;
}
.article-content ul,.article-content ol{padding-left:28px;margin-bottom:16px;}
.article-content li{margin-bottom:6px;}
.article-content table{
    width:100%;border-collapse:collapse;margin:16px 0;
    background:#fff;
}
.article-content th,.article-content td{
    border:1px solid #d4c896;padding:10px 14px;
}
.article-content th{background:#f0e4c5;color:#8b4513;}
.article-content code{
    background:#f0e4c5;padding:2px 6px;border-radius:3px;
    font-family:'Consolas','Monaco',monospace;color:#8b4513;
}
.article-content pre{
    background:#2b2b2b;color:#e7e3d8;padding:16px;border-radius:6px;
    overflow-x:auto;
}

@media (max-width:640px){
    .article-paper{padding:24px 20px;}
    .article-title{font-size:1.5rem;}
    /* 手機版：太極符號往上移約半個圖案高度，避免遮住年柱標籤 */
    .bazi-chart-box::before{
        top:-30px;
    }
    /* 手機版：藏/副星/運/神煞 表格縮減 (標籤靠右) */
    .pillar-extra-row{grid-template-columns:repeat(4,1fr) 42px;}
    .pillar-extra-label{font-size:.95rem;padding:6px 2px;}
    .pillar-extra-cell{padding:8px 2px;font-size:1rem;}
    .pillar-extra-cell.small{font-size:.9rem;line-height:1.4;}
}