/* =========================================
   前台樣式（單一檔）。前半為原 style.css 基底，
   後半為原 front_page.css 主題覆寫，順序不可對調。
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@700&display=swap');

/* =========================================
   基本與共用樣式 (Base & Common)
   ========================================= */
body {
    font-family: "Microsoft JhengHei", Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f9fa;
    color: #333;
}

.site-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background-color: #f7f9fa;
    background-image: url("/static/background.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

.home-body > *:not(.site-bg) {
    position: relative;
    z-index: 1;
}

/* =========================================
   按鈕共用樣式 (Buttons)
   ========================================= */
.btn-yellow {
    display: inline-block;
    background-color: #f1df12;
    color: #333;
    padding: 12px 35px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.btn-yellow:hover {
    background-color: #d9c810;
}

.btn-teal {
    display: inline-block;
    background-color: #3cb4bb;
    color: #ffffff;
    padding: 12px 35px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.btn-teal:hover {
    background-color: #2e9197;
}

/* =========================================
   首頁與導覽列樣式 (Home & Navbar)
   ========================================= */
.home-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background-color: transparent;
}

.top-navbar {
    background-color: #1a252f; 
    width: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 導覽列內部排版：統一寬度與對齊基準 */
.nav-container {
    max-width: 1100px; 
    width: 100%;
    margin: 0 auto;
    position: relative;
    height: 90px; 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    box-sizing: border-box;
    padding: 0 20px; 
}

/* 標題與圖片區塊排版 */
.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px; 
    white-space: nowrap; 
}

/* LOGO 圖片大小 */
.logo-img {
    height: 55px; 
    width: auto;
    display: block;
}

/* 標題文字區塊設定 */
.logo-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
}

.logo-text-wrapper h1 {
    margin: 0;
}

/* 主標題列設定 */
.logo-text-wrapper .main-title {
    color: #ffffff;
    line-height: 1; 
}

/* 金盾兩字：思源宋體、高光亮黃漸層、明顯放大 */
.brand-main {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.8em; 
    font-weight: bold;
    background: linear-gradient(135deg, #ffffcc 0%, #ffea00 35%, #ffb300 75%, #d98a00 100%);
    -webkit-background-clip: text;
    background-clip: text; /* 標準屬性 */
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
    margin-right: 8px; 
    vertical-align: baseline;
}

/* 借錢網文字：放大設定 */
.brand-sub {
    font-size: 1.4em;
    font-weight: normal;
    color: #ffffff;
    vertical-align: baseline;
}

/* 導覽列選單 */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 30px;
    white-space: nowrap;
}

.nav-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.1em;
    font-weight: bold; 
    padding: 10px 0;
    display: block;
    transition: color 0.3s;
}

.nav-menu > li > a:hover {
    color: #ffcc00;
}

.nav-menu > li > a.nav-borrow-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.nav-free-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    background: #fde8e8;
    color: #c0392b;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

/* 下拉式選單 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); 
    background-color: #ffffff;
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 120px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 1000;
}

@media (min-width: 1251px) {
    .dropdown:hover .dropdown-menu {
        display: block;
    }
}

.dropdown-menu li a {
    color: #333333;
    padding: 12px 20px;
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 0.95em;
    transition: background-color 0.2s;
}

.dropdown-menu li .nav-logout-form {
    margin: 0;
}

.dropdown-menu li .nav-logout-form button {
    color: #333333;
    padding: 12px 20px;
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    font-size: 0.95em;
    font-family: inherit;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.2s;
}

.dropdown-menu li a:hover,
.dropdown-menu li .nav-logout-form button:hover {
    background-color: #fae43c; 
    color: #333333;
}

/* 漢堡選單控制元件 (桌面版預設隱藏) */
.menu-checkbox {
    display: none;
}

.menu-icon {
    display: none; 
    font-size: 28px;
    color: #ffffff;
    cursor: pointer;
    user-select: none;
}

/* =========================================
   廣告專頁樣式 (adv.html)
   ========================================= */
.adv-page-wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    flex: 1;
}

.adv-region-bar {
    display: flex;
    align-items: stretch;
    margin: 0 0 22px;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    background: #ffffff;
}

.adv-region-track {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.adv-region-track::-webkit-scrollbar {
    display: none;
}

.adv-region-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 4px 2px;
}

.adv-region-arrow {
    flex: 0 0 34px;
    width: 34px;
    border: 0;
    background: transparent;
    color: #c5c9ce;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    user-select: none;
}

.adv-region-arrow:hover:not(:disabled) {
    color: #6b7280;
}

.adv-region-arrow:disabled {
    color: #e2e4e6;
    cursor: default;
}

.adv-region-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 7px 18px;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #6a6f76;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.96em;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
}

.adv-region-btn:hover {
    background: transparent;
    color: #1f2937;
    border-color: transparent;
}

.adv-region-btn.is-active {
    background: #2f4255;
    color: #ffffff;
    border-color: transparent;
}

.icon-line {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300B900' d='M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386c-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63h2.386c.346 0 .627.285.627.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016c0 .27-.174.51-.432.596-.064.021-.133.031-.199.031-.211 0-.391-.09-.51-.25l-2.443-3.317v2.94c0 .344-.279.629-.631.629-.346 0-.626-.285-.626-.629V8.108c0-.27.173-.51.43-.595.06-.023.136-.033.194-.033.195 0 .375.104.495.254l2.462 3.33V8.108c0-.345.282-.63.63-.63.345 0 .63.285.63.63v4.771zm-5.741 0c0 .344-.282.629-.631.629-.345 0-.627-.285-.627-.629V8.108c0-.345.282-.63.63-.63.346 0 .628.285.628.63v4.771zm-2.466.629H4.917c-.345 0-.63-.285-.63-.629V8.108c0-.345.285-.63.63-.63.348 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-phone {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: text-bottom;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233498db' d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.61 21 3 13.39 3 4c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* =========================================
   借款資訊預告區塊 (Pre-Footer Info)
   ========================================= */
.pre-footer-info {
    background-color: #e9ecef; 
    width: 100%;
    padding: 32px 0;
    border-top: 1px solid #dcdcdc;
    font-size: 0.82em;
}

.info-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1.15fr;
    gap: 28px;
    align-items: start;
}

.info-column h2 {
    font-size: 0.98em;
    line-height: 1.4;
    color: #1a252f;
    margin-top: 0;
    margin-bottom: 12px;
    font-weight: bold;
}

.info-column p,
.info-column ul li {
    font-size: 0.92em;
    color: #2a3035;
    line-height: 1.55;
}

.info-column p {
    margin-top: 0;
    margin-bottom: 15px;
}

.info-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.info-column ul li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 16px; 
    text-align: justify;
}

.info-column ul li::before {
    content: '>';
    position: absolute;
    left: 0;
    top: 0;
    color: #5a6560;
    font-weight: bold;
    font-family: 'Consolas', monospace; 
}

/* =========================================
   表尾樣式 (Footer)
   ========================================= */
.site-footer {
    background-color: #1a252f; 
    width: 100%;
    margin-top: auto; 
}

.footer-links-wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px;
    box-sizing: border-box;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; 
    gap: 25px; 
}

.footer-links li a {
    color: #cccccc;
    text-decoration: none;
    font-size: 0.8em;
    transition: color 0.3s;
}

.footer-links li a:hover {
    color: #ffcc00;
}

.footer-warning {
    background-color: #d32f2f; 
    color: #ffffff; 
    text-align: center;
    padding: 10px 16px;
    font-size: 0.82em;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.5;
}

.footer-legal {
    background: #f4f6f5;
    padding: 22px 20px 26px;
    text-align: center;
}

.footer-copy {
    margin: 0 0 12px;
    color: #5a6560;
    font-size: 0.82em;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.footer-org p {
    margin: 0 0 6px;
    color: #4a5250;
    font-size: 0.8em;
    line-height: 1.6;
}

.footer-org p:last-child {
    margin-bottom: 0;
}

/* =========================================
   一般內容頁面樣式 (如：關於本站)
   ========================================= */
.page-wrapper {
    max-width: 1100px;
    width: 100%;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
    flex: 1; 
}

.content-card {
    background-color: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 50px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.content-card h2 {
    color: #1a252f;
    font-size: 2em;
    margin-top: 0;
    border-bottom: 3px solid #f1df12;
    padding-bottom: 15px;
    margin-bottom: 40px;
}

.content-card h3 {
    color: #3cb4bb;
    font-size: 1.3em;
    margin-top: 35px;
    margin-bottom: 15px;
    font-weight: bold;
}

.content-card p {
    color: #555;
    line-height: 1.8;
    font-size: 1.05em;
    margin-bottom: 15px;
}

.warning-list {
    background-color: #fef2f2; 
    border-left: 4px solid #d32f2f; 
    padding: 20px 20px 20px 40px;
    margin: 20px 0;
    border-radius: 4px;
}

.warning-list li {
    color: #333;
    line-height: 1.8;
    margin-bottom: 10px;
    font-size: 1.05em;
}

/* =========================================
   表單基礎樣式 (Forms Base)
   ========================================= */
.form-group { margin-bottom: 20px; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
.required { color: red; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea {
    width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: #ffcc00; outline: none; box-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
textarea { resize: vertical; }

/* =========================================
   註冊頁面樣式 (borromember.html / advmember.html)
   ========================================= */
.registration-wrapper {
    display: flex;
    gap: 40px; 
    margin-top: 20px;
    flex-wrap: nowrap; 
    align-items: flex-start; 
}

.reg-left-col {
    flex: 0 0 60%; 
    max-width: 60%; 
    box-sizing: border-box;
}

.reg-right-col {
    flex: 1; 
    padding-top: 10px;
    box-sizing: border-box;
    min-width: 0; 
}

.reg-title {
    font-size: 1.1em;
    color: #555;
    font-weight: normal;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    line-height: 1.5;
}

.badge-orange {
    background-color: #f39c12;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-right: 15px;
    white-space: nowrap;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 12px;
}

.checkbox-item input[type="checkbox"] {
    margin-top: 3px; 
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-item label {
    font-size: 0.95em;
    color: #333;
    font-weight: normal;
    line-height: 1.5;
    margin-bottom: 0;
    cursor: pointer;
}

.link-blue {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
}

.link-blue:hover {
    text-decoration: underline;
}

.reg-right-col h3 {
    color: #3a5b82; 
    font-weight: normal;
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 1.6em;
}

.reg-right-col p {
    color: #555;
    font-size: 0.95em;
    line-height: 1.6;
    margin-bottom: 20px;
}

.reg-right-col hr {
    border: none;
    border-top: 1px solid #eaeaea;
    margin: 30px 0;
}

.btn-container {
    text-align: center;
    margin-bottom: 20px;
}

.btn-submit-reg {
    width: 100%;
    background-color: #f1df12;
    color: #333;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.btn-submit-reg:hover {
    background-color: #d9c810;
}

/* =========================================
   聯繫我們頁面 (contactus.html)
   ========================================= */
.contact-wrapper {
    display: flex;
    gap: 40px;
    margin-top: 20px;
}

.contact-left-col {
    flex: 6;
    background-color: #f5f5f5; 
    padding: 30px 40px;
    border-radius: 8px;
    box-sizing: border-box;
}

.contact-right-col {
    flex: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}

.contact-left-col h2 {
    margin-top: 0;
    margin-bottom: 25px;
    border: none;
    padding-bottom: 0;
    color: #000;
    font-size: 2em;
}

.contact-form-group {
    margin-bottom: 20px;
}

.contact-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #000;
    font-size: 1.1em;
}

.contact-form-group input[type="text"],
.contact-form-group input[type="email"],
.contact-form-group input[type="tel"],
.contact-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

.contact-form-group textarea {
    height: 150px;
    resize: vertical;
}

.contact-submit-area {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
}

.btn-contact-submit {
    background-color: #0078d7; 
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1.1em;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-contact-submit:hover {
    background-color: #005a9e;
}

.required-text {
    color: #d32f2f;
    font-size: 0.9em;
}

.line-info {
    text-align: center;
}

.line-qr {
    width: 220px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 8px;
}

.line-info h3 {
    margin-top: 0;
    color: #333;
}

.line-id-text {
    font-size: 1.3em;
    font-weight: bold;
    color: #00B900; 
    letter-spacing: 1px;
}

.btn-line-contact {
    display: inline-block;
    background-color: #00B900; 
    color: #ffffff;
    padding: 15px 40px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: background-color 0.3s, transform 0.2s;
}

.btn-line-contact:hover {
    background-color: #009900;
    color: #ffffff;
    transform: translateY(-2px); 
}

/* =========================================
   會員登入頁面 (login.html)
   ========================================= */
.login-wrapper {
    display: flex;
    gap: 60px;
    margin-top: 20px;
}

.login-left-col {
    flex: 5;
}

.login-right-col {
    flex: 5;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.login-title {
    color: #3a5b82;
    font-size: 1.6em;
    font-weight: normal;
    margin-bottom: 20px;
    margin-top: 0;
}

.login-form-group {
    margin-bottom: 20px;
}

.login-form-group input[type="email"],
.login-form-group input[type="password"] {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1em;
}

.login-form-group input:focus {
    border-color: #3498db;
    outline: none;
}

.login-action-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-red {
    background-color: #c81010;
    color: #ffffff;
    padding: 12px 30px;
    font-size: 1.1em;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-red:hover {
    background-color: #a00b0b;
}

.forgot-pwd-link {
    color: #3498db; 
    text-decoration: none;
    font-size: 0.95em;
    position: relative; 
    top: -12px; 
}

.forgot-pwd-link:hover {
    text-decoration: underline;
    color: #2980b9; 
}

.register-block h3 {
    color: #3a5b82;
    font-weight: normal;
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 20px;
    border: none;
    padding-bottom: 0;
}

.register-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.register-row p {
    margin: 0;
    color: #555;
    font-size: 1em;
    flex: 1;
}

.register-row a {
    white-space: nowrap;
    width: auto; 
}

/* =========================================
   忘記密碼頁面 (forget_password.html)
   ========================================= */
.forgot-pwd-wrapper {
    max-width: 600px; 
    margin: 0 auto;
    padding: 30px 0;
}

.forgot-pwd-title {
    color: #3a5b82;
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 30px;
    font-weight: normal;
    border-bottom: none;
}

.alert-success {
    background-color: #5cb85c;
    color: white;
    padding: 15px 20px;
    border-radius: 4px;
    margin-bottom: 25px;
    display: none;
    align-items: center;
    justify-content: space-between;
    font-size: 1.05em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.alert-success.is-visible {
    display: flex;
}

.alert-success .close-btn {
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5em;
    line-height: 1;
    opacity: 0.8;
}

.alert-success .close-btn:hover {
    opacity: 1;
}

.forgot-pwd-desc {
    color: #7f8c8d;
    margin-bottom: 10px;
    font-size: 1.05em;
}

.forgot-pwd-input {
    width: 100%;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1.05em;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.forgot-pwd-input:focus {
    border-color: #3498db;
    outline: none;
}

.forgot-pwd-action {
    text-align: center;
}

/* =========================================
   響應式設計 (RWD) 
   ========================================= */
@media (max-width: 1250px) {
    .nav-container {
        height: auto;
        min-height: 80px;
    }
    .logo-img {
        height: 48px; 
    }
    .menu-icon {
        display: block;
        font-size: 32px;
    }
    .nav-menu {
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #1a252f;
        flex-direction: column;
        gap: 0;
        z-index: 999;
        box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    }
    .nav-menu > li {
        width: 100%;
        text-align: center;
        border-top: 1px solid #2c3e50; 
    }
    .nav-menu > li > a {
        padding: 15px 0;
    }
    .home-body .nav-menu > li > a.nav-borrow-cta {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        width: 100%;
        gap: 0;
        align-items: center;
    }
    .home-body .nav-borrow-cta .nav-borrow-text {
        grid-column: 2;
        justify-self: center;
    }
    .home-body .nav-borrow-cta .nav-free-badge {
        grid-column: 3;
        justify-self: start;
        margin-left: 6px;
    }
    .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        background-color: #2c3e50; 
    }
    .dropdown-menu li a,
    .dropdown-menu li .nav-logout-form button {
        color: #ffffff;
    }
    .menu-checkbox:checked ~ .nav-menu {
        display: flex;
    }
    .dropdown.active > .dropdown-menu {
        display: block;
    }
}

@media (max-width: 1024px) {
    .info-container {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
}

@media (max-width: 768px) {
    .footer-links {
        gap: 15px;
    }
    .footer-warning {
        font-size: 0.9em;
        padding: 12px 15px;
        text-align: justify; 
        text-align-last: center;
    }
    .info-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .logo-img {
        height: 38px; 
    }
    .nav-logo {
        gap: 8px; 
        overflow: hidden; 
    }
    .brand-main {
        font-size: 1.4em; 
        margin-right: 4px;
    }
    .brand-sub {
        font-size: 1.1em; 
    }
    .menu-icon {
        flex-shrink: 0; 
        margin-left: 10px; 
    }
    .adv-region-list {
        min-height: 44px;
        gap: 2px;
    }
    .adv-region-btn {
        padding: 6px 14px;
        font-size: 0.9em;
        flex-grow: 0;
        text-align: center;
    }

    /* 註冊頁面手機版改為上下疊加 */
    .registration-wrapper {
        flex-direction: column;
        flex-wrap: wrap; 
        gap: 30px;
    }
    .reg-left-col {
        flex: auto;
        max-width: 100%;
        width: 100%;
    }
    .reg-right-col {
        flex: auto;
        width: 100%;
        border-top: 2px solid #eaeaea;
        padding-top: 30px;
    }

    /* 聯繫我們手機版改為上下疊加 */
    .contact-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    .contact-left-col {
        padding: 25px 20px;
    }
    .contact-right-col {
        padding-top: 10px;
        border-top: 2px solid #eaeaea;
    }

    /* 登入頁面手機版改為上下疊加 */
    .login-wrapper {
        flex-direction: column;
        gap: 50px;
    }
    .register-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .register-row a {
        width: 100%; 
        white-space: normal; 
        text-align: center; 
        box-sizing: border-box; 
    }
}

/* 主題覆寫（原 front_page.css） */

:root {
    --jd-green: #2E7D32;
    --jd-green-dark: #1B5E20;
    --jd-green-tint: #E8F5E9;
    --jd-ink: #14261a;
    --jd-text: #33413a;
    --jd-muted: #6b7a70;
    --jd-line: rgba(46, 125, 50, 0.12);
    --jd-card-shadow: 0 12px 34px rgba(16, 32, 20, 0.10);
    --jd-radius: 18px;
}

.home-body {
    background-color: transparent;
    background-image: none;
    color: var(--jd-text);
}

@media (min-width: 769px) {
    .site-bg {
        background-position: center center;
    }
}

/* =========================================
   懸浮膠囊導覽列
   ========================================= */
.home-body .top-navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    box-shadow: none;
    padding: 18px 0;
    box-sizing: border-box;
}

.home-body .nav-container {
    height: 64px;
    padding: 0 26px;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(46, 125, 50, 0.08);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(16, 32, 20, 0.10);
}

.home-body .logo-img {
    height: 48px;
}

/* 品牌文字：五字同字型、同字級；金盾金色、借錢網暗綠 */
.home-body .logo-text-wrapper .main-title {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.85em;
    font-weight: 700;
    line-height: 1;
    color: var(--jd-ink);
}

.home-body .brand-main,
.home-body .brand-sub {
    font-family: 'Noto Serif TC', serif;
    font-size: 1em;
    font-weight: 700;
    margin-right: 0;
    vertical-align: baseline;
}

.home-body .brand-main {
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

.home-body .brand-sub {
    background: none;
    -webkit-text-fill-color: #1B5E20;
    color: #1B5E20;
    filter: none;
}

/* 選單文字 */
.home-body .nav-menu {
    gap: 16px;
}

.home-body .nav-menu > li > a {
    color: var(--jd-ink);
    font-size: 1.02em;
    font-weight: 600;
    padding: 8px 2px;
    transition: color 0.2s;
}

.home-body .nav-menu > li > a:hover {
    color: var(--jd-green);
}

.home-body .nav-free-badge {
    background: #fde8e8;
    color: #c0392b;
}

/* 最後一項（會員登入 / 會員中心）→ 綠色膠囊按鈕 */
.home-body .nav-menu > li:last-child > a {
    background: var(--jd-green);
    color: #ffffff;
    padding: 9px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.28);
    transition: background-color 0.2s, transform 0.2s;
}

.home-body .nav-menu > li:last-child > a:hover {
    background: var(--jd-green-dark);
    color: #ffffff;
    transform: translateY(-1px);
}

/* 下拉選單淺色化：緊貼觸發項，避免游標移動時中斷 hover 而消失 */
.home-body .dropdown-menu {
    top: calc(100% + 4px);
    padding: 6px;
    min-width: 150px;
    border: 1px solid rgba(46, 125, 50, 0.1);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(16, 32, 20, 0.14);
}

/* 透明橋接：填補觸發項與選單之間的空隙，讓游標移動不會脫離 hover */
.home-body .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}

.home-body .dropdown-menu li a,
.home-body .dropdown-menu li .nav-logout-form button {
    border-radius: 9px;
    color: var(--jd-text);
}

.home-body .dropdown-menu li a:hover,
.home-body .dropdown-menu li .nav-logout-form button:hover {
    background-color: var(--jd-green-tint);
    color: var(--jd-green);
}

.home-body .menu-icon {
    color: var(--jd-ink);
}

/* =========================================
   Hero 主視覺
   ========================================= */
.hero {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 150px 20px 150px;
    background: transparent;
    overflow: hidden;
}

/* 僅在 Hero 區加一層淡白遮罩，維持標題可讀性（不影響固定背景與下方區塊） */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 40%, rgba(255, 255, 255, 0.45) 100%);
    pointer-events: none;
}

.hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-copy {
    flex: 0 1 760px;
    margin: 0 auto;
    text-align: center;
}

.hero-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.hero-brand img {
    height: 46px;
    width: auto;
}

.hero-brand .hero-brand-text {
    font-family: 'Noto Serif TC', serif;
    font-size: 1.55em;
    font-weight: 700;
    line-height: 1;
}

.hero-brand .hero-brand-gold {
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-brand .hero-brand-ink {
    background: none;
    -webkit-text-fill-color: #1B5E20;
    color: #1B5E20;
    filter: none;
}

.hero-title {
    font-family: 'Noto Serif TC', serif;
    font-size: clamp(1.85em, 4vw, 3.05em);
    line-height: 1.28;
    color: var(--jd-ink);
    margin: 0 0 22px;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6);
}

.hero-title-keep {
    white-space: nowrap;
}

.hero-desc {
    font-size: 1.12em;
    line-height: 1.8;
    color: #1f2d24;
    font-weight: 700;
    max-width: 620px;
    margin: 0 auto 34px;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.7);
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
    display: inline-block;
    padding: 14px 34px;
    font-size: 1.08em;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.btn-hero-primary {
    background: var(--jd-green);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(46, 125, 50, 0.3);
}

.btn-hero-primary:hover {
    background: var(--jd-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(46, 125, 50, 0.36);
}

.btn-hero-secondary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--jd-green);
    border: 1.5px solid var(--jd-green);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.12);
}

.btn-hero-secondary:hover {
    background: var(--jd-green-tint);
    transform: translateY(-2px);
}

/* =========================================
   主要內容區（面板 + 清單列，參考圖2）
   ========================================= */
.home-main {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 40px 20px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 34px;
}

.panel {
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(46, 125, 50, 0.09);
    border-radius: var(--jd-radius);
    box-shadow: var(--jd-card-shadow);
    padding: 16px 24px 20px;
    box-sizing: border-box;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--jd-line);
}

.panel-head .panel-title {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--jd-ink);
    margin: 0;
}

/* 僅區塊主標題加金盾 LOGO；側欄引導、內文小標、表尾不加 */
.panel-title,
.content-card > h1,
.login-title,
.forgot-pwd-title,
.contact-left-col > h1,
.page-wrapper > h1 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.content-card > h1 > span {
    flex: 1;
    min-width: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
}

.page-wrapper > h1 {
    display: inline-flex;
    justify-content: center;
}

.panel-title::before,
.content-card > h1::before,
.login-title::before,
.forgot-pwd-title::before,
.contact-left-col > h1::before,
.page-wrapper > h1::before {
    content: "";
    flex: 0 0 auto;
    width: 1.45em;
    height: 1.45em;
    margin-top: 0.05em;
    background: url("/static/logo.png") center / contain no-repeat;
}

.panel-head .panel-more {
    font-size: 0.9em;
    color: var(--jd-green);
    text-decoration: none;
    font-weight: 600;
}

.panel-head .panel-more:hover {
    text-decoration: underline;
}

/* 清單列（借錢需求 / 全台借錢管道 通用） */
.list-rows {
    display: flex;
    flex-direction: column;
}

.list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 6px;
    border-bottom: 1px solid #eef3ef;
    text-decoration: none;
    transition: background-color 0.15s, box-shadow 0.2s, transform 0.2s;
    border-radius: 10px;
}

.list-row:last-child {
    border-bottom: none;
}

a.list-row:hover {
    background-color: var(--jd-green-tint);
}

/* =========================================
   全台借錢管道：廣告卡片（電腦每排 4 張，手機每排 2 張）
   ========================================= */
.adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.adv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e6efe8;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(16, 32, 20, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.adv-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(16, 32, 20, 0.12);
}

.adv-card-main {
    position: relative;
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.adv-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f2f6f3;
}

.adv-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.adv-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
}

.adv-title {
    font-size: 1.02em;
    font-weight: 700;
    color: var(--jd-ink);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-sub {
    font-size: 0.85em;
    color: var(--jd-muted);
    margin: 0;
    line-height: 1.5;
    height: 3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* 聯繫按鈕（藍色電話 + 綠色 LINE） */
.adv-btn {
    flex: 1;
    text-align: center;
    padding: 9px 0;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.2s, transform 0.2s;
}

.adv-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.adv-btn-tel {
    background: #3498db;
}

.adv-btn-line {
    background: #00B900;
}

.adv-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--jd-line);
}

.adv-pagination a,
.adv-pagination span {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.92em;
    font-weight: 600;
    text-decoration: none;
    box-sizing: border-box;
}

.adv-pagination a {
    color: var(--jd-green);
    background: #ffffff;
    border: 1px solid rgba(46, 125, 50, 0.22);
}

.adv-pagination a:hover {
    background: var(--jd-green-tint);
}

.adv-pagination .is-current {
    color: #ffffff;
    background: var(--jd-green);
    border: 1px solid var(--jd-green);
}

.adv-pagination .is-disabled {
    color: #a2ab9f;
    background: #f5faf5;
    border: 1px solid #e6efe8;
}

.row-main {
    min-width: 0;
}

.row-title {
    font-size: 1.05em;
    font-weight: 700;
    color: var(--jd-ink);
    margin: 0 0 5px;
}

/* 借錢需求列的中繼資訊 */
.row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 0.86em;
    color: var(--jd-muted);
    margin-top: 4px;
}

.row-meta .row-amt {
    font-weight: 700;
    color: var(--jd-ink);
}

.row-meta .vip-on {
    color: var(--jd-green);
    font-weight: 700;
}

.row-meta .vip-off {
    color: #a2ab9f;
}

.row-success {
    display: inline-block;
    background: var(--jd-green);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.82em;
    padding: 3px 10px;
    border-radius: 999px;
}

.list-row.is-closed .row-title {
    color: var(--jd-muted);
}

.request-detail-body {
    margin-top: 8px;
}

.request-unlock {
    margin-top: 8px;
    padding: 16px;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    background: #f8fbf8;
}

.request-unlock .btn-yellow,
.request-unlock-note + .btn-yellow,
.request-unlock p .btn-yellow {
    display: inline-block;
    margin-top: 8px;
    text-decoration: none;
}

.request-unlock-note {
    margin-top: 12px;
    color: var(--jd-muted);
    font-size: 0.9rem;
}

.request-unlock-points {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.row-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.row-close-confirm {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 600;
    font-size: 0.86em;
    color: var(--jd-muted);
    white-space: nowrap;
    cursor: pointer;
}

.row-actions .btn-yellow {
    padding: 8px 16px;
    font-size: 0.9em;
}

.row-empty {
    padding: 22px 6px;
    color: var(--jd-muted);
}

/* =========================================
   Pre-footer 與 footer 微調（融入綠色主題）
   ========================================= */
.home-body .pre-footer-info {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--jd-line);
}

.home-body .info-column ul li::before {
    color: var(--jd-green);
}

.home-body .info-column p,
.home-body .info-column ul li {
    color: #24302a;
}

.home-body .footer-legal {
    background: #eef3ef;
}

.home-body .site-footer {
    background-color: #14261a;
}

.home-body .footer-links li a:hover {
    color: #8bd694;
}

/* 內頁：導覽列改為佔位，避免內容被絕對定位蓋住 */
.home-body:not(.is-home) .top-navbar {
    position: relative;
}

/* =========================================
   內頁內容區塊（對齊首頁面板風格）
   ========================================= */

.home-body .page-wrapper,
.home-body .adv-page-wrapper {
    margin-top: 12px;
    margin-bottom: 32px;
}

.home-body .content-card {
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(46, 125, 50, 0.09);
    border-radius: 18px;
    box-shadow: var(--jd-card-shadow);
    padding: 18px 28px 28px;
}

.home-body .content-card > h1 {
    font-size: 1.35em;
    font-weight: 700;
    color: var(--jd-ink);
    margin-top: 0;
    margin-bottom: 16px;
}

.home-body .content-card h2 {
    color: var(--jd-ink);
    font-size: 1.2em;
    border-bottom-color: var(--jd-green);
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 8px;
}

.home-body .content-card form + h2 {
    margin-top: 40px;
}

.home-body .vip-buy-lead {
    text-align: center;
    font-size: 1.2em;
    font-weight: 700;
    color: var(--jd-ink);
    margin: 8px 0 24px;
}

.home-body .points-shop-balance {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    text-align: left;
    font-size: 1em;
    font-weight: 400;
}

.home-body .points-shop-hint {
    font-size: 0.85em;
    font-weight: 500;
    color: var(--jd-muted);
}

@media (max-width: 768px) {
    .home-body .points-shop-balance {
        justify-content: center;
        text-align: center;
    }
}

.home-body .vip-buy-card h3 {
    margin-top: 22px;
}

.home-body .vip-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.home-body .vip-choice {
    display: inline-flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.home-body .vip-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.home-body .vip-choice > span {
    display: inline-block;
    padding: 10px 14px;
    border: 1px solid var(--jd-line);
    border-radius: 8px;
    background: #fff;
    font-weight: 700;
    color: var(--jd-ink);
}

.home-body .vip-choice input:checked + span {
    background: var(--jd-green);
    color: #fff;
    border-color: var(--jd-green);
}

.home-body .vip-choice.is-locked {
    cursor: default;
}

.home-body .vip-choice.is-locked > span {
    opacity: 0.9;
}

.home-body .vip-plan-note,
.home-body .vip-region-hint,
.home-body .vip-pay-note {
    color: var(--jd-muted);
    font-size: 0.95em;
}

.home-body .vip-quote {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    background: #f7faf7;
}

.home-body .vip-quote p {
    margin: 0 0 8px;
}

.home-body .vip-quote-total {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--jd-ink);
}

.home-body .vip-price-was {
    text-decoration: line-through;
    font-weight: 400;
    opacity: 0.55;
    margin-right: 0.45em;
}

.home-body .vip-discount-field input {
    width: 100%;
    max-width: 420px;
}

.home-body .vip-discount-input-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
}

.home-body .vip-discount-tip {
    position: absolute;
    left: 8px;
    bottom: calc(100% + 10px);
    z-index: 40;
    width: max-content;
    max-width: min(240px, 80vw);
    padding: 6px 10px;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    background: #fff5f5;
    color: #c0392b;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 6px 16px rgba(192, 57, 43, 0.14);
    pointer-events: none;
}

.home-body .vip-discount-tip::after,
.home-body .vip-discount-tip::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 100%;
    border: 6px solid transparent;
}

.home-body .vip-discount-tip::before {
    border-top-color: #f5c6cb;
    margin-top: 1px;
}

.home-body .vip-discount-tip::after {
    border-top-color: #fff5f5;
}

.home-body .vip-buy-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 28px;
}

.home-body .vip-buy-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.home-body .vip-buy-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.home-body .policy-card > h2 {
    font-size: 1.2em;
    font-weight: 700;
    line-height: 1.4;
}

.home-body .content-card h3 {
    color: var(--jd-green);
}

.home-body .content-card h3:first-of-type {
    margin-top: 18px;
}

.home-body .adv-region-btn:hover {
    background: transparent;
    color: #1f2937;
}

.home-body .adv-region-btn.is-active,
.home-body .adv-region-btn.is-active:hover {
    background: #2f4255;
    color: #ffffff;
}

.home-body .btn-yellow {
    background-color: var(--jd-green);
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(46, 125, 50, 0.25);
}

.home-body .btn-yellow:hover {
    background-color: var(--jd-green-dark);
}

.home-body .member-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.home-body .member-role-text {
    white-space: normal;
}

.home-body .kyc-unverified {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

.home-body .kyc-unverified-flag {
    color: #c62828;
    font-weight: 800;
    letter-spacing: 0.04em;
    animation: kyc-pulse 1.2s ease-in-out infinite;
}

.home-body .kyc-unverified-hint,
.home-body .kyc-unverified-hint a {
    color: #c62828;
    font-weight: 700;
}

.home-body .kyc-unverified-hint a {
    text-decoration: underline;
}

.home-body .kyc-verified-flag {
    background: linear-gradient(135deg, #e8c547 0%, #7cb342 48%, #2e7d32 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: 0.04em;
}

@keyframes kyc-pulse {
    0%, 100% {
        opacity: 1;
        text-shadow: 0 0 0 rgba(198, 40, 40, 0);
    }
    50% {
        opacity: 0.72;
        text-shadow: 0 0 10px rgba(198, 40, 40, 0.65);
    }
}

.kyc-panel {
    margin-top: 36px;
    padding-top: 8px;
    border-top: 1px solid #e2e8e4;
}

.kyc-reject {
    color: #c62828;
    font-weight: 700;
}

.kyc-birth-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kyc-birth-fields input {
    width: 88px;
}

.home-body .vip-gold {
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.home-body .member-vip-expire {
    margin-top: 0;
}

.home-body .points-capsule-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.home-body .points-capsule {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 4px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    font-size: 0.92em;
    line-height: 1;
    box-shadow: 0 4px 10px rgba(168, 106, 6, 0.28);
    cursor: pointer;
}

.home-body .points-capsule-tip {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    z-index: 40;
    width: max-content;
    max-width: min(280px, 80vw);
    padding: 8px 10px;
    border-radius: 8px;
    background: #14261a;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    box-shadow: 0 8px 20px rgba(16, 32, 20, 0.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.home-body .points-capsule-wrap:hover .points-capsule-tip,
.home-body .points-capsule-wrap.is-open .points-capsule-tip {
    opacity: 1;
    visibility: visible;
}

.home-body .points-capsule img {
    width: 22px;
    height: 22px;
    object-fit: contain;
    border-radius: 50%;
    background: #000;
    flex-shrink: 0;
}

.home-body .points-capsule-unit {
    font-size: 0.9em;
    font-weight: 700;
}

.home-body .member-identity .member-vip-buy {
    margin-left: 0;
    margin-right: 0;
    text-decoration: none;
}

.home-body .member-points-shop {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 4px;
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    color: #ffffff;
    font-size: 0.85em;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(168, 106, 6, 0.28);
}

.home-body .referral-share {
    margin: 8px 0 18px;
}

.home-body .referral-share-url {
    word-break: break-all;
}

.home-body button.js-share-referral {
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 10px 22px;
    font-size: 1em;
}

.home-body .btn-teal {
    background-color: #ffffff;
    color: var(--jd-green);
    border: 1.5px solid var(--jd-green);
    border-radius: 999px;
}

.home-body .btn-teal:hover {
    background-color: var(--jd-green-tint);
}

/* 金色按鈕（對齊金盾字色） */
.home-body .btn-gold {
    display: inline-block;
    background: linear-gradient(135deg, #e0a531 0%, #c8860f 45%, #a86a06 100%);
    color: #ffffff;
    padding: 12px 32px;
    font-size: 1.1em;
    font-weight: 700;
    text-decoration: none;
    border: none;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(168, 106, 6, 0.28);
    transition: filter 0.2s, transform 0.2s;
    text-align: center;
    box-sizing: border-box;
}

.home-body .btn-gold:hover {
    filter: brightness(0.93);
    transform: translateY(-2px);
    color: #ffffff;
}

/* 註冊頁右側兩個 CTA 同寬同高 */
.home-body .btn-container .btn-gold,
.home-body .btn-container .btn-teal {
    width: 100%;
    padding: 12px 32px;
    font-size: 1.1em;
    font-weight: 700;
    box-sizing: border-box;
}

/* 登入頁兩個金色按鈕同尺寸 */
.home-body .register-row a.btn-gold {
    min-width: 210px;
    padding: 12px 22px;
    font-size: 1em;
    white-space: nowrap;
    text-align: center;
}

/* 註冊／登入／忘記密碼：區塊內標題上方不再疊加多餘 margin */
.home-body .content-card:has(.registration-wrapper) {
    padding-top: 18px;
}

.home-body .registration-wrapper,
.home-body .login-wrapper {
    margin-top: 0;
}

.home-body .reg-title {
    margin-bottom: 16px;
}

.home-body .forgot-pwd-wrapper {
    padding-top: 0;
    padding-bottom: 12px;
}

.home-body .forgot-pwd-title {
    margin-top: 0;
    margin-bottom: 18px;
}

.home-body input:focus,
.home-body select:focus,
.home-body textarea:focus {
    border-color: var(--jd-green);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, 0.15);
}

/* =========================================
   響應式
   ========================================= */
@media (max-width: 992px) {
    .hero-copy {
        flex: 0 1 640px;
    }
}

@media (max-width: 1250px) {
    /* 手機膠囊選單淺色化，覆寫 style.css 的深色下拉 */
    .home-body .nav-menu {
        top: calc(100% + 10px);
        left: 0;
        right: 0;
        width: auto;
        background: #ffffff;
        border: 1px solid rgba(46, 125, 50, 0.12);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 14px 30px rgba(16, 32, 20, 0.14);
    }
    .home-body .nav-menu > li {
        border-top: 1px solid #eef3ef;
    }
    .home-body .nav-menu > li:first-child {
        border-top: none;
    }
    .home-body .nav-menu > li:last-child > a {
        background: transparent;
        color: var(--jd-green);
        border-radius: 0;
        box-shadow: none;
        padding: 15px 0;
        transform: none;
    }
    .home-body .nav-menu > li:last-child > a:hover {
        background: var(--jd-green-tint);
    }
    .home-body .dropdown-menu {
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0;
        background-color: #f5faf5;
    }
    .home-body .dropdown-menu li a,
    .home-body .dropdown-menu li .nav-logout-form button {
        border-radius: 0;
        color: var(--jd-text);
    }
}

@media (max-width: 768px) {
    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .btn-hero-primary,
    .btn-hero-secondary {
        text-align: center;
    }
    .panel {
        padding: 20px 16px;
    }
    /* 廣告卡片：手機每排 2 張（不改左右邊界） */
    .adv-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .list-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* 手機版標題：縮小、水平置中，並與右側漢堡按鈕保持距離 */
    .home-body .nav-container {
        justify-content: center;
        padding: 0 52px;
    }
    .home-body .nav-logo {
        gap: 8px;
    }
    .home-body .logo-img {
        height: 44px;
    }
    .home-body .logo-text-wrapper .main-title {
        font-size: 1.75em;
    }
    .home-body .brand-main,
    .home-body .brand-sub {
        font-size: 1em;
        margin-right: 0;
    }
    .home-body .menu-icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
        font-size: 26px;
    }
}

.news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    background: #fff;
    position: relative;
}

a.news-item:hover,
.news-item:hover {
    background: var(--jd-green-tint);
}

.news-item > a.news-copy {
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.news-item.is-static {
    background: #f8fbf8;
}

.news-thumb {
    width: 88px;
    height: 88px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.news-copy {
    flex: 1;
    min-width: 0;
}

.news-copy-head {
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.news-copy h2,
.news-copy h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jd-ink);
    flex: 1;
    min-width: 0;
}

.news-meta,
.news-kicker {
    margin: 0;
    color: var(--jd-muted);
    font-size: 0.9rem;
}

.news-pin {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 6px;
    vertical-align: -0.12em;
    color: var(--jd-green-dark);
    flex-shrink: 0;
}

.news-hero {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
    margin: 0;
}

.article-media-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    aspect-ratio: 1;
    box-sizing: border-box;
    padding: 16px;
    text-align: center;
    border-radius: 12px;
    background: var(--jd-green-tint);
    border: 1px dashed var(--jd-green-dark);
}

.article-media-gate-copy {
    margin: 0;
    color: var(--jd-ink);
    font-weight: 700;
    line-height: 1.5;
}

.article-media-gate-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.article-media-gate .adv-btn {
    min-width: 108px;
}

.article-media-gate.is-compact {
    width: 88px;
    height: 88px;
    aspect-ratio: auto;
    flex-shrink: 0;
    gap: 4px;
    padding: 6px;
    border-radius: 8px;
}

.article-media-gate.is-compact .article-media-gate-copy {
    font-size: 0.72rem;
}

.article-media-gate-link {
    color: var(--jd-green-dark);
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: underline;
    line-height: 1.3;
}

.news-detail-layout {
    display: grid;
    grid-template-columns: minmax(160px, 280px) 1fr;
    gap: 24px;
    align-items: start;
    margin: 16px 0 8px;
}

.news-detail-layout.is-text-only {
    grid-template-columns: 1fr;
}

.news-body {
    line-height: 1.8;
    margin: 0 0 20px;
}

.home-body .content-card .news-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--jd-ink);
    margin: 1.5em 0 0.5em;
    padding: 0;
    border: none;
}

.home-body .content-card .news-body h2:first-child {
    margin-top: 1.5em;
}

.news-detail > .news-body:first-of-type > h2:first-child {
    margin-top: 0;
}

.news-body h4 {
    margin: 1.35em 0 0.45em;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--jd-ink);
}

.news-body h4:first-child {
    margin-top: 0;
}

.news-body p {
    margin: 0 0 0.85em;
}

.news-body ul,
.news-body ol {
    margin: 0 0 0.95em;
    padding-left: 1.35em;
}

.news-body li {
    margin: 0.28em 0;
}

.news-body a {
    color: var(--jd-green-dark);
    text-decoration: underline;
}

.news-contact {
    display: flex;
    gap: 10px;
    margin: 0;
}

.news-contact .adv-btn {
    flex: 1;
    max-width: 240px;
}

.preview-banner {
    background: #fff3cd;
    color: #856404;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.crop-stage {
    margin-top: 10px;
}

.crop-viewport {
    width: 280px;
    height: 280px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    background: #111;
    cursor: grab;
    user-select: none;
}

.crop-viewport:active {
    cursor: grabbing;
}

.crop-viewport img {
    position: absolute;
    max-width: none;
    display: block;
}

.crop-hint {
    margin: 8px 0 0;
    font-size: 0.85em;
    color: var(--jd-muted);
}

.crop-zoom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    max-width: 280px;
}

.crop-zoom-row input {
    flex: 1;
}

.field-count {
    font-size: 0.82em;
    color: var(--jd-muted);
    font-weight: normal;
}

.ad-preview-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px;
    border: 1px solid var(--jd-line);
    border-radius: 14px;
    background: #fff;
}

.ad-preview-thumb-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.ad-preview-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
    background: #f2f6f3;
}

.ad-preview-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ad-preview-body .adv-sub {
    flex: 0;
}

@media (max-width: 768px) {
    .news-item {
        align-items: flex-start;
    }
    .news-detail-layout {
        grid-template-columns: 1fr;
    }
}

.nav-unread {
    display: inline-block;
    min-width: 1.15em;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.72em;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.home-body .nav-menu > li:last-child > a .nav-unread {
    background: #fff;
    color: #c0392b;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.notify-toolbar {
    margin: 0 0 16px;
}

.notify-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.notify-item {
    padding: 14px 16px;
    border: 1px solid var(--jd-line);
    border-radius: 12px;
    background: #fff;
}

.notify-item.is-unread {
    background: var(--jd-green-tint);
    border-color: rgba(46, 125, 50, 0.28);
}

.notify-item h4,
.notify-item .notify-meta,
.notify-item .notify-body {
    margin: 0 0 6px;
}

.notify-item .notify-body:last-child {
    margin-bottom: 0;
}

.notify-meta {
    color: var(--jd-muted);
    font-size: 0.86em;
}

.notify-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.notify-new {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background: #c0392b;
    color: #fff;
    font-size: 0.7em;
    font-weight: 700;
}

.profile-form {
    max-width: 520px;
}

.profile-form input[readonly] {
    background: #f0f3f1;
    color: #5b6b60;
    cursor: not-allowed;
}

/* 手機：略縮全站文字與按鈕，表頭「金盾借錢網」維持原大小 */
@media (max-width: 768px) {
    .home-body {
        font-size: 15px;
    }

    .home-body .logo-text-wrapper .main-title {
        font-size: 1.75em;
    }

    .home-body .logo-img {
        height: 44px;
    }

    .home-body .brand-main,
    .home-body .brand-sub {
        font-size: 1em;
    }

    .home-body .hero-brand {
        gap: 10px;
        margin-bottom: 14px;
    }

    .home-body .hero-brand img {
        height: 42px;
    }

    .home-body .hero-brand .hero-brand-text {
        font-size: 1.45em;
    }

    .home-body .menu-icon {
        font-size: 24px;
    }

    .home-body .nav-menu > li > a,
    .home-body .dropdown-menu li a,
    .home-body .dropdown-menu li .nav-logout-form button {
        font-size: 0.95rem;
        padding: 10px 0;
    }

    .home-body .nav-menu > li:last-child > a {
        padding: 10px 0;
    }

    .hero {
        padding: 148px 14px 28px;
    }

    .hero-title {
        font-size: 1.85em;
        margin-bottom: 16px;
    }

    .hero-desc {
        font-size: 1.12em;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .btn-hero-primary,
    .btn-hero-secondary {
        padding: 13px 20px;
        font-size: 1.08em;
    }

    .panel {
        padding: 14px 12px;
    }

    .panel-head {
        padding: 12px 12px 10px;
    }

    .home-body .content-card {
        padding: 14px 14px 18px;
        border-radius: 14px;
    }

    .home-body .content-card > h1 {
        font-size: 1.35em;
    }

    .home-body .content-card h2,
    .home-body .policy-card > h2,
    .home-body .contact-left-col h2,
    .content-card h2 {
        font-size: 1.15em;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .home-body .content-card h3,
    .content-card h3,
    .reg-right-col h3,
    .register-block h3 {
        font-size: 1.15em;
    }

    .home-body .content-card p,
    .content-card p,
    .home-body li,
    .content-card li {
        font-size: 1em;
        line-height: 1.6;
    }

    .home-body .btn-yellow,
    .home-body .btn-teal,
    .home-body .btn-gold,
    .home-body .btn-red,
    .home-body .btn-submit-reg,
    .home-body .btn-contact-submit,
    .home-body .btn-line-contact,
    .home-body .btn-container .btn-gold,
    .home-body .btn-container .btn-teal,
    .home-body .register-row a.btn-gold,
    .row-actions .btn-yellow {
        padding: 9px 16px;
        font-size: 0.95em;
        min-height: 0;
    }

    .home-body input[type="text"],
    .home-body input[type="email"],
    .home-body input[type="tel"],
    .home-body input[type="number"],
    .home-body input[type="password"],
    .home-body select,
    .home-body textarea,
    .home-body .login-form-group input,
    .home-body .contact-form-group input,
    .home-body .contact-form-group textarea,
    .home-body .forgot-pwd-input {
        padding: 8px 10px;
        font-size: 16px;
    }

    .home-body label,
    .home-body .field-count,
    .home-body .adv-sub,
    .home-body .news-meta {
        font-size: 0.88em;
    }

    .adv-btn,
    .home-body .adv-btn {
        padding: 8px 0;
        font-size: 0.88em;
    }

    .pre-footer-info,
    .site-footer,
    .footer-warning {
        font-size: inherit;
    }

    .info-column h2 {
        font-size: 0.95em;
    }
}

.home-body .site-flash {
    width: 100%;
    max-width: 720px;
    margin: 20px auto;
    text-align: center;
}

.home-body .site-flash-item {
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.home-body .site-flash-item.is-error {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

.home-body .site-flash-item.is-ok {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.field-hint {
    margin: 6px 0 0;
    color: var(--jd-muted);
    font-size: 0.85rem;
}

.article-tag-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
}

.article-tag-options input[type="text"] {
    width: 8.5em;
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.article-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--jd-green-tint);
    color: var(--jd-green-dark);
    font-size: 0.75rem;
}

.silo-crumbs {
    margin: 0 0 10px;
    color: var(--jd-muted);
    font-size: 0.9rem;
}

.silo-crumbs a {
    color: var(--jd-green-dark);
    text-decoration: none;
}

.silo-city-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 14px;
    color: var(--jd-muted);
}

.silo-city-links a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--jd-green-tint);
    color: var(--jd-green-dark);
    text-decoration: none;
    font-size: 0.9rem;
}

.silo-city-links a.is-current {
    background: var(--jd-green-dark);
    color: #fff;
}

.seo-semantic-block {
    margin-top: 40px;
    padding: 25px;
    font-size: 0.95em;
    color: #4a5550;
    background-color: #f4f7f5;
    border-radius: 12px;
    line-height: 1.6;
}

.seo-semantic-intro {
    margin: 0 0 16px;
}

.seo-faq-heading {
    font-size: 1.15em;
    margin: 0 0 16px;
    color: #14261a;
}

.faq-item {
    margin-bottom: 12px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e0e8e2;
}

.faq-item:last-child {
    margin-bottom: 0;
}

.faq-item summary {
    font-weight: bold;
    cursor: pointer;
    color: #1b5e20;
}

.faq-item p {
    margin: 8px 0 0;
    color: #33413a;
}

.article-audit-badge {
    margin-top: 20px;
    padding: 12px 16px;
    background-color: #f8fbf8;
    border-left: 4px solid #2e7d32;
    font-size: 0.88em;
    color: #4a5550;
    border-radius: 4px;
}

.guide-faq-list {
    margin-top: 16px;
}

.guide-faq-list .faq-item {
    margin-bottom: 12px;
}

.guide-faq-list .faq-answer {
    margin: 8px 0 0;
    color: #33413a;
}

.guide-faq-list .faq-answer p {
    margin: 0 0 8px;
}

.guide-faq-list .faq-answer ol,
.guide-faq-list .faq-answer ul {
    margin: 8px 0 0;
    padding-left: 1.3em;
}

.guide-faq-list .faq-answer a {
    color: var(--jd-green-dark);
    text-decoration: underline;
}

.points-shop-list {
    display: grid;
    gap: 16px;
    margin: 20px 0 28px;
}

.points-shop-card {
    padding: 18px 16px;
    border: 1px solid var(--jd-line);
    border-radius: 14px;
    background: #fff;
}

.points-shop-card h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.points-shop-price,
.points-shop-unit,
.points-shop-total {
    margin: 0 0 8px;
}

.points-shop-card .form-group {
    margin: 12px 0;
}

.points-shop-card select {
    min-width: 88px;
}

.guide-cat-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.guide-cat-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--jd-green-tint);
    color: var(--jd-green-dark);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 600;
}

.guide-cat-btn:hover {
    color: var(--jd-ink);
}

.guide-cat-btn.is-active {
    background: var(--jd-green-dark);
    color: #fff;
}

.home-body.is-recruit {
    min-height: 100vh;
    color: var(--jd-ink);
}

.home-body.is-recruit .site-bg {
    background-image: none;
    background-color: #f7f9fa;
}

.home-body.is-recruit .recruit-nav-register {
    background: var(--jd-green);
    color: #ffffff;
    padding: 9px 22px;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.28);
}

.home-body.is-recruit .recruit-nav-register:hover {
    background: var(--jd-green-dark);
    color: #ffffff;
}

.home-body.is-recruit .nav-menu > li:last-child > a.recruit-nav-register {
    background: var(--jd-green);
    color: #ffffff;
}

.recruit {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 22px 56px;
}

.recruit-hero {
    text-align: center;
}

.recruit-kicker {
    margin: 0 0 16px;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #b8860b;
}

.recruit-title {
    font-size: clamp(1.55em, 3.8vw, 2.35em);
    line-height: 1.35;
    color: var(--jd-ink);
    margin: 0 0 18px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.recruit-lead {
    font-size: 1.02em;
    line-height: 1.85;
    color: #33443a;
    font-weight: 600;
    margin: 0 auto 8px;
    max-width: 760px;
}

.recruit-demo {
    margin: 40px auto 44px;
    max-width: 720px;
}

.recruit-demo-card {
    background: #14261a;
    border: 1px solid rgba(20, 38, 26, 0.12);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(16, 32, 20, 0.18);
    overflow: hidden;
}

.recruit-demo-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.recruit-demo-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #f4f7f5;
}

.recruit-demo-channel {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #d4a017;
    white-space: nowrap;
}

.recruit-demo-list {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.recruit-demo-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px 12px;
    align-items: center;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.recruit-demo-list li:first-child {
    border-top: none;
}

.recruit-demo-tag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(212, 160, 23, 0.16);
    color: #e0b84a;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.recruit-demo-list p {
    margin: 0;
    color: #e8eee9;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
}

.recruit-demo-list time,
.recruit-demo-when {
    color: #8a9a90;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.recruit-demo-caption {
    margin: 0;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #9aab9f;
    font-size: 0.82rem;
    line-height: 1.6;
}

.recruit-cta {
    display: flex;
    justify-content: center;
    margin: 22px 0 0;
}

.recruit-cta .btn-hero-primary {
    min-width: 220px;
    text-align: center;
}

@media (max-width: 759px) {
    .recruit-demo {
        margin: 28px auto 36px;
    }

    .recruit-demo-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .recruit-demo-list li {
        grid-template-columns: auto 1fr;
    }

    .recruit-demo-list time,
    .recruit-demo-when {
        grid-column: 2;
    }
}

.recruit-points {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 40px;
}

@media (min-width: 760px) {
    .recruit-points {
        grid-template-columns: repeat(3, 1fr);
    }
}

.recruit-point {
    background: #ffffff;
    border: 1px solid rgba(46, 125, 50, 0.1);
    border-left: 4px solid #c8860f;
    border-radius: 12px;
    padding: 22px 18px 22px 20px;
    box-shadow: 0 8px 20px rgba(16, 32, 20, 0.06);
}

.recruit-point h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 1.08rem;
    color: var(--jd-ink);
}

.recruit-plane {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: var(--jd-green);
}

.recruit-point p {
    margin: 0;
    line-height: 1.7;
    color: #333;
    font-size: 0.95rem;
}

.recruit-line {
    text-align: center;
    margin-bottom: 36px;
}

.recruit-line p {
    font-weight: 700;
    margin: 0 0 14px;
    color: var(--jd-ink);
}

.recruit-line .line-qr {
    display: block;
    margin: 0 auto 14px;
}

.recruit-note {
    text-align: center;
    margin: 0;
    font-size: 0.92rem;
    color: #5a6b60;
    font-weight: 600;
}

@media (max-width: 1250px) {
    .home-body.is-recruit .nav-menu > li:last-child > a.recruit-nav-register {
        background: transparent;
        color: var(--jd-green);
        border-radius: 0;
        box-shadow: none;
        padding: 15px 0;
    }
}