/* Shared public chrome only. Account forms, product cards and admin tables retain their styles. */
.realm-chrome{--oath-gold:#89682e;--oath-edge:#c7b17b;--oath-ink:#383a35;--oath-paper:#f6f3ec;color-scheme:light}
.realm-chrome .realm-community-strip{position:relative;z-index:3;min-height:34px;display:flex;justify-content:center;align-items:center;background:linear-gradient(90deg,#ece5d4,#fffaf0 45%,#eee6d6);border-top:1px solid #e7dcc4;border-bottom:1px solid #d4c293;color:#66522d;font:12px/1.6 "Microsoft JhengHei","PingFang TC",sans-serif;letter-spacing:.5px;padding:6px 16px}
.realm-chrome .realm-community-strip a{display:flex;align-items:center;gap:9px;color:inherit;text-decoration:none}.realm-chrome .realm-community-strip strong{font-family:Georgia,serif;font-size:14px}.realm-chrome .realm-community-strip a>span:first-child{font-size:9px;color:#9d7734}
.realm-chrome .realm-header{display:flex;flex-wrap:nowrap;align-items:center;min-height:88px;gap:28px;padding:15px max(calc((100vw - 1240px)/2),28px);background:linear-gradient(#ffffff,#f8f5eb);border-bottom:2px solid #bba271;box-shadow:0 12px 36px rgba(40,25,5,0.4),0 4px 12px rgba(40,25,5,0.25);position:relative;z-index:10}
.realm-chrome .realm-brand{display:flex;flex:none;align-items:center;gap:12px;white-space:nowrap;font:700 26px/1.15 "PMingLiU","Noto Serif TC",serif;letter-spacing:3px;color:#65502b;text-shadow:0 1px #fff}
.realm-chrome .realm-brand img{width:47px;height:47px;border:1px solid #c5b17f;box-shadow:0 0 0 3px #e6dcc61c;border-radius:50%;object-fit:cover}.realm-chrome .realm-brand small{display:block;font:8px/1.4 Georgia,serif;letter-spacing:2px;color:#95805b;margin-top:6px}
/* 修改點 1：將 nav 的 flex 屬性改為 initial 或是不要設定，並將 justify-content 設為 flex-start */
.realm-chrome .realm-header nav {
    display: flex;
    /* flex: 1; （移除或註解掉這行，讓它不要自動佔滿剩餘空間） */
    align-items: center;
    justify-content: flex-start; /* 讓選單靠左對齊 */
    gap: 30px; /* 您可以微調這個間距 */
    flex-wrap: nowrap;
    width: auto;
    border: 0;
    padding: 0;
    order: 0;
}

/* 修改點 2：在 Logo 和選單之間增加間距（選擇性） */
.realm-chrome .realm-brand {
    /* 找到原本的 .realm-brand 區塊，加入下面這行 */
    margin-right: 40px; 
}

/* 修改點 3：將右側按鈕推到最右邊 */
.realm-chrome .realm-actions {
    /* 找到原本的 .realm-actions 區塊，加入下面這行 */
    margin-left: auto; 
}
.realm-chrome .realm-header nav a{display:inline-flex;align-items:center;justify-content:center;position:relative;min-height:44px;padding:8px 0;font-size:13px;letter-spacing:1px;color:#625e52;white-space:nowrap}
/* 替導覽列文字加入變色動畫過渡，讓顏色變化更柔和 */
.realm-chrome .realm-header nav a {
    transition: color 0.3s ease;
}

/* 只有滑鼠懸停時改變文字顏色 */
.realm-chrome .realm-header nav a:hover {
    color: #dcb36d; 
}

/* 預先準備好所有選項的底線，並使用 scaleX(0) 隱藏起來 */
.realm-chrome .realm-header nav a:after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 10%;
    width: 80%;
    height: 2px;
    background: #aa8846;
    border: 0;
    transform: scaleX(0); /* X軸縮放為0，完全隱藏 */
    transform-origin: center; /* 設定動畫從中心點向左右兩邊展開 */
    transition: transform 0.3s ease; /* 展開動畫持續 0.3 秒 */
}

/* 只有當滑鼠移過去時，才將底線展開顯示 */
.realm-chrome .realm-header nav a:hover:after {
    transform: scaleX(1); /* X軸縮放恢復為1，顯示我們設定的 80% 寬度 */
}
.realm-chrome .realm-actions{display:flex;gap:12px;align-items:center;flex-shrink:0;margin:0}.realm-chrome .account-link,.realm-chrome .cart-link{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 15px;border:1px solid #b69b61;border-radius:0;box-shadow:inset 0 0 0 2px #fff8,0 2px 4px #4a351014;color:#725321;background:linear-gradient(#fffdf4,#e8dfca);font-size:13px;letter-spacing:.5px;white-space:nowrap}
.realm-chrome .account-link:hover,.realm-chrome .cart-link:hover{background:#eae0c8;color:#5d421a}.realm-chrome .cart-link{padding:8px 10px}.realm-chrome .cart-link span{background:#8a692f;border-color:#8a692f;color:white;margin-left:7px}
.realm-chrome .realm-menu-toggle{display:none;flex-shrink:0;width:44px;height:44px;padding:10px;border:1px solid #b69b61;background:linear-gradient(#fffdf4,#e8dfca);border-radius:0;color:#856128;cursor:pointer}.realm-chrome .realm-menu-toggle span{display:block;height:2px;margin:5px 0;background:currentColor}
.realm-chrome :is(.realm-header,.realm-community-strip) a:focus-visible,.realm-chrome .realm-menu-toggle:focus-visible{outline:3px solid #4e727c;outline-offset:4px}
.realm-chrome .realm-site-end{border-top:1px solid #cdbb94;background:#f4f0e6}.realm-chrome .realm-site-end .community{padding:42px 24px 30px;background:radial-gradient(ellipse at 50% 0,#fffefa,#f0eadc);border-top:4px double #cabb9d}
.realm-chrome .realm-site-end .community h2{font:700 25px/1.5 "PMingLiU","Noto Serif TC",serif;letter-spacing:4px;color:#6f572c}.realm-chrome .realm-site-end .community h2:after{content:"◆";display:block;font-size:9px;color:#a7884b;margin-top:10px;letter-spacing:0}
.realm-chrome .realm-site-end .community-links{max-width:910px;gap:26px;margin-top:22px}.realm-chrome .realm-site-end .community-links .social-mark{border-radius:2px;box-shadow:inset 0 0 0 3px #fff9;background:linear-gradient(145deg,#fffdf4,#e6dac0);border-color:#bca576}.realm-chrome .realm-site-end .community-links strong{font-size:13px;color:#60543e}
.realm-chrome .realm-site-end .realm-signoff{background:linear-gradient(#f0eadc,#e9e3d6);border-bottom:4px double #a89061}.realm-chrome .realm-site-end .footer-inner{max-width:1296px;padding:0 28px 30px}.realm-chrome .realm-site-end .footer-directory{padding:13px 0;border-color:#cbbf9f}.realm-chrome .realm-site-end .footer-directory nav{font-size:13px;font-weight:500}.realm-chrome .realm-site-end .footer-brandrow{padding-top:26px;gap:35px}.realm-chrome .realm-site-end .realm-wordmark{width:180px}.realm-chrome .realm-site-end .realm-wordmark-en{font-size:27px}.realm-chrome .realm-site-end .realm-wordmark-en>span{font-size:39px}.realm-chrome .realm-site-end .footer-credits p{font-size:13px}.realm-chrome .realm-site-end .footer-credits small{font-size:11px}
@media(max-width:1250px){.realm-chrome .realm-header{gap:18px;padding-left:24px;padding-right:24px}.realm-chrome .realm-header nav{gap:16px}.realm-chrome .realm-brand{font-size:23px;letter-spacing:2px}.realm-chrome .realm-brand img{width:43px;height:43px}.realm-chrome .realm-actions{gap:8px}.realm-chrome .account-link{padding:8px 12px}}
@media(max-width:1100px){
 .realm-chrome .realm-header{flex-wrap:wrap;gap:0 14px;min-height:78px;padding:13px 22px}.realm-chrome .realm-brand{margin-right:auto}.realm-chrome .realm-menu-toggle:not([hidden]){display:block;order:1}.realm-chrome .realm-header nav{order:2;flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid #dcd0b6;margin-top:13px;padding-top:8px}.realm-chrome .realm-header nav a{font-size:14px;padding:10px 5px;min-height:46px}.realm-chrome .realm-actions{order:3;flex:0 0 100%;width:100%;justify-content:center;border-top:1px solid #dfd6c1;padding-top:12px;margin-top:8px}.realm-chrome .realm-actions a{min-width:128px;min-height:44px}
 .realm-chrome.realm-menu-ready .realm-header:not(.menu-open) nav,.realm-chrome.realm-menu-ready .realm-header:not(.menu-open) .realm-actions{display:none}
}
@media(max-width:760px){
 .realm-chrome .realm-community-strip{font-size:11px;min-height:32px;padding:5px 10px}.realm-chrome .strip-detail{display:none}.realm-chrome .realm-header{min-height:75px;padding:12px 18px;gap:0 10px}.realm-chrome .realm-brand{font-size:23px;letter-spacing:2px;gap:9px}.realm-chrome .realm-brand img{width:41px;height:41px}.realm-chrome .realm-brand small{font-size:7px;letter-spacing:1.7px}.realm-chrome .realm-header nav a{font-size:13px;letter-spacing:.5px}.realm-chrome .realm-site-end .community{padding:30px 16px 24px}.realm-chrome .realm-site-end .community h2{font-size:23px;letter-spacing:2px}.realm-chrome .realm-site-end .community-links{gap:20px 10px;max-width:360px}.realm-chrome .realm-site-end .community-links strong{font-size:12px}.realm-chrome .realm-site-end .footer-directory nav{gap:18px;font-size:12px}.realm-chrome .realm-site-end .footer-inner{padding:0 18px 28px}.realm-chrome .realm-site-end .footer-brandrow{gap:18px;padding-top:25px}.realm-chrome .realm-site-end .footer-credits{text-align:center}.realm-chrome .realm-site-end .footer-language{margin:0;font-size:11px}.realm-chrome .realm-site-end .back-top{bottom:15px}
}
/* --- 強制拉開導覽列選單的水平間距 --- */
.realm-chrome .realm-header nav a {
    margin: 0 5px !important; /* 讓每個選項左右各增加 5px 的空白距離 */
    display: inline-block; /* 確保外距能正常推開其他元素 */
    transition: color 0.3s ease; /* 順便補上滑鼠懸停時的柔和漸變動畫 */
}
/* --- 左側「回憶龍族」文字 Logo 現代白金風格 --- */
.realm-header [class*="brand"],
.realm-header [class*="logo"],
.realm-header h1,
.realm-header .realm-brand-title,
.realm-header .brand-title,
.realm-header .brand-name {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "微軟正黑體", sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important; /* 將字體放大至 28px，可依喜好微調 */
    letter-spacing: 2px !important; /* 配合大字體稍微拉開一點字距 */
    color: #3a2b1a !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
/* --- 放大中間導覽列選單字體 --- */
.realm-header #realm-navigation a {
    font-size: 15px !important; /* 預設通常偏小，放大至 16px 會較為清晰 */
    font-weight: 600 !important; /* 稍微加粗增加辨識度 */
}

/* --- 社群與榮耀：非對稱 1 大 2 小現代版面 --- */
.has-home-page .oath-features.oath-asymmetric {
    display: grid !important;
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 20px !important;
    align-items: stretch !important;
}

/* 左側大卡片樣式 */
.has-home-page .oath-hero-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 35px 25px !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* 右側容器 */
.has-home-page .oath-sub-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* 右側修長橫向卡片樣式 */
.has-home-page .oath-sub-card {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 20px 25px !important;
    text-align: left !important;
    position: relative !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.has-home-page .oath-sub-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.has-home-page .oath-sub-card h3 {
    font-size: 20px !important;
    margin: 2px 0 !important;
    color: #765b2d !important;
}

.has-home-page .oath-sub-card p {
    font-size: 13px !important;
    margin: 4px 0 0 !important;
    color: #585b52 !important;
}

/* 懸浮發光特效 */
.has-home-page :is(.oath-hero-card, .oath-sub-card):hover {
    transform: translateY(-4px) !important;
    border-color: #aa8647 !important;
    box-shadow: 0 10px 20px rgba(88, 68, 33, 0.15) !important;
    background: linear-gradient(135deg, #ffffff, #f4ebda) !important;
}

/* 手機版自適應 RWD */
@media (max-width: 760px) {
    .has-home-page .oath-features.oath-asymmetric {
        grid-template-columns: 1fr !important;
    }
    .has-home-page .oath-sub-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}
/* Keep seven navigation links within small desktop widths. */
@media(min-width:1101px) and (max-width:1250px){.realm-chrome .realm-brand{margin-right:0}.realm-chrome .realm-header{gap:12px}.realm-chrome .realm-header nav{gap:8px}}
@media(max-width:760px){.realm-chrome .realm-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.realm-chrome .realm-actions a{min-width:0;width:100%;padding:8px 4px;font-size:12px;letter-spacing:0}}