@charset "utf-8";
/* CSS Document */
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');

        /* --- 基礎物理設定 --- */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body {
            font-family: 'Noto Sans TC', sans-serif;
            background-color: #0a0a0a;
            color: #e5e5e5;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
		p{font-size:14px; line-height:1.6;}
		li {font-size:14px; line-height:1.4;}
        a { text-decoration: none; color: inherit; transition: 0.3s; }

        /* --- 職人級專用類別 --- */
        .pearl-gradient {
            background: linear-gradient(135deg, #cfb53b 0%, #a67c00 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .bg-gold { background-color: #a67c00; }
        .text-gold { color: #a67c00; }
        .border-gold { border-color: #a67c00; }
        
        /* 玻璃面板協議 */
        .glass-panel { 
            background: rgba(255, 255, 255, 0.03); 
            backdrop-filter: blur(10px); 
            border: 1px solid #27272a; /* zinc-800 */
        }

        /* --- 導覽列 (Navigation) --- */
        .nav-bar {
            border-bottom: 1px solid #27272a;
            padding: 1rem 3rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #000;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .logo-box {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 1px solid #3f3f46;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nav-links { display: none; gap: 2rem; }
        @media (min-width: 768px) { .nav-links { display: flex; } }
        .nav-link { font-size: 0.875rem; tracking: 0.1em; color: #a1a1aa; }
        .nav-link:hover { color: #eab308; }

        /* --- 英雄看板 (Header) --- */
        .hero-section { padding: 6rem 1.5rem; text-align: center; }
        .hero-sub { letter-spacing: 0.3em; color: #71717a; margin-bottom: 1rem; text-transform: uppercase; font-size: 0.875rem; }
        .hero-title { font-size: 3rem; font-weight: 700; margin-bottom: 2rem; }
        @media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
        .hero-desc { max-width: 42rem; margin: 0 auto 3rem; color: #a1a1aa; }
        
        .btn { padding: 0.75rem 2rem; font-weight: 700; border-radius: 4px; display: inline-block; cursor: pointer; border: none; }
        .btn-gold { background-color: #a67c00; color: #000; }
        .btn-gold:hover { background-color: #eab308; }
        .btn-outline { border: 1px solid #a67c00; color: #a67c00; }
        .btn-outline:hover { background-color: #a67c00; color: #000; }

        /* --- 內容區塊 (Sections) --- */
        .section-py { padding: 5rem 1.5rem; }
        .bg-zinc { background-color: #18181b; }
        .max-width-limit { max-width: 1152px; margin: 0 auto; }
        .grid-2 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
        .grid-3 { display: grid; grid-template-columns: 1fr; gap: 2rem; }
        @media (min-width: 768px) { 
            .grid-2 { grid-template-columns: repeat(2, 1fr); } 
            .grid-3 { grid-template-columns: repeat(3, 1fr); }
        }

        .feature-card { padding: 2rem; border-radius: 1rem; position: relative; overflow: hidden; }
        .card-number { position: absolute; top: 0; right: 0; padding: 1rem; font-size: 3.75rem; font-weight: 700; opacity: 0.1; transition: 0.3s; }
        .feature-card:hover .card-number { opacity: 0.2; }

 
		/* --- [整合協議] 實證中心：網格與裁切系統 --- */

#gallery-container {
    display: grid !important;
    /* 🚀 物理定錨：預設 3 欄，並強制使用 minmax 確保不縮得太誇張 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 30px;
    padding: 10px;
}

/* 響應式佈局：電腦端提升顯示密度 */
@media (min-width: 768px) {
    #gallery-container { grid-template-columns: repeat(6, 1fr) !important; gap: 15px !important; }
}
@media (min-width: 1280px) {
    #gallery-container { grid-template-columns: repeat(8, 1fr) !important; gap: 20px !important; }
}

/* 針對 Scripts 的圖切深一點（例如 60px），針對 Sidepanel 切淺一點 */
.pearl-screenshot.normal-crop { top: -35px !important; }
.pearl-screenshot.deep-crop { top: -60px !important; }

.gallery-item {
    position: relative;
    width: 100%;
    /* 🚀 調整比例：改為更寬的比例，符合截圖特徵 */
    aspect-ratio: 10 / 10 !important; 
    background: #000;
    overflow: hidden !important;
    border-radius: 6px;
    border: 1px solid #27272a;
    transition: border-color 0.3s ease;
	cursor: zoom-in !important;
}

.pearl-screenshot {
    position: absolute !important;
    top: 0;
    left: 0;
    /* 🚀 關鍵放大：強制放大圖片，讓內容填滿格子並避開黑邊 */
    width: 120% !important; 
    height: auto !important;
    min-height: 140% !important;
    
    /* 🚀 物理定錨：向左偏移 10% 避開側欄雜訊，向上偏移避開標籤欄 */
    /* 這裡的數值會由 JS 的動態注入來微調 */
    transform: translate(-10%, -45px) !important;
    
    object-fit: cover !important;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.gallery-item:hover {
    border-color: #a67c00;
}

/* 懸停時稍微放大，增加動態感，但維持去頭偏移 */
.gallery-item:hover .pearl-screenshot {
    transform: translate(-10%, -45px) scale(1.1) !important;
}

/* --- [Lightbox] 物理強制顯示協議 --- */
/* 燈箱背景 */
#lightbox {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    z-index: 20000 !important;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
}

/* 🚀 燈箱專用物理裁切殼 */
.lb-crop-frame {
    width: 90%;
    max-width: 1200px;
    height: 80vh; /* 鎖死高度，避免撐破螢幕 */
    overflow: hidden !important; /* 物理遮蔽關鍵 */
    border: 2px solid #a67c00; /* 珍珠金邊框 */
    border-radius: 8px;
    background: #000;
}

#lightbox-img {
    width: 100% !important;
    height: auto !important;
    min-height: 110% !important; /* 冗餘高度 */
    object-fit: contain;
    /* 🚀 初始位移，會被 JS 動態覆蓋 */
    transform: translateY(-45px); 
}

        /* --- 彈出視窗 (Modal) --- */
        .modal-overlay {
            fixed: inset 0; background: rgba(0,0,0,0.9);
            display: none; align-items: center; justify-content: center;
            z-index: 100; padding: 1.5rem;
        }
        .modal-content {
            background: #18181b; border: 1px solid #27272a;
            padding: 2rem; border-radius: 1.5rem; width: 100%; max-width: 28rem;
        }
        .required-mark::after { content: " *"; color: #d4af37; margin-left: 2px; }
        
        .pearl-input {
            width: 100%; background: rgba(0, 0, 0, 0.2);
            border: 1px solid #444; border-radius: 8px;
            padding: 12px; color: #fff; margin-bottom: 1rem;
            transition: 0.3s;
        }
        .pearl-input:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 15px rgba(0, 212, 255, 0.2); }

        /* --- 對接終端：物理顯示協議 --- */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.9) !important;
    z-index: 10001 !important; /* 確保高於 Lightbox 的 9999 */
    display: none; /* 初始物理關閉 */
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(8px);
}

/* 強化內容面板的職人質感 */
.modal-content {
    background: #18181b !important;
    border: 1px solid #a67c00 !important;
    padding: 2.5rem !important;
    border-radius: 1.5rem !important;
    width: 100% !important;
    max-width: 28rem !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

/* 珍珠專用輸入框協議 */
.pearl-input {
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid #3f3f46 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #fff !important;
    margin-top: 0.5rem !important;
    transition: 0.3s !important;
}
.pearl-input:focus {
    border-color: #a67c00 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(166, 124, 0, 0.2) !important;
}

        /* --- 頁尾 (Footer) --- */
        footer { padding: 3rem 1.5rem; border-top: 1px solid #27272a; text-align: center; font-size: 0.75rem; color: #52525b; letter-spacing: 0.1em; }
		

/* --- 2. 佈局協議 (Layout Protocol) --- */
.pearl-wrapper {
    display: flex;
    width: 100vw;
    height: 100vh;
   /* padding-top: 64px; /* 導航列預留空間 */
}

/* 左側發射台：物理彈性區 */
.content-field {
    flex: 1;
    height: 100%;
    padding: 10px 20px;
    background-color: #09090b;
    overflow-y: auto;
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.input-group {
    margin-bottom: 16px;
    background: rgba(39, 39, 42, 0.2);
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 12px;
}

.input-label {
    display: block;
    font-size: 12px;
    color: #71717a;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.input-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
}

/* 珍珠金專屬滾動條 */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: #27272a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #d4af37; }
    /* 物理過渡協議 */
    .squeeze-transition {
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }
    /* 🚩 珍珠引擎：Iframe 宿主定錨 */
.expert-side-module iframe {
    width: 100% !important;
    height: 100vh !important; /* 撐滿整個垂直空間 */
    border: none !important;  /* 移除預設邊框 */
    background: transparent !important; /* 允許背景穿透 */
    display: block;	
}
/* 1. 寬度與背景物理設定 */
.expert-side-module iframe::-webkit-scrollbar {
    width: 5px;               /* 物理極窄化，減少視覺干擾 */
    background: #0d0d0d;      /* 必須與 iframe 背景色死鎖 */
}

/* 2. 滾動條軌道 (Track) */
.expert-side-module iframe::-webkit-scrollbar-track {
    background: #0d0d0d;
}

/* 3. 滾動條滑塊 (Thumb) - 珍珠金屬色 */
.expert-side-module iframe::-webkit-scrollbar-thumb {
    background: #27272a;      /* 預設暗灰色 */
    border-radius: 10px;
    border: 1px solid #0d0d0d; /* 透過 border 營造縮排感 */
    transition: background 0.3s ease;
}

/* 4. 激活狀態：珍珠金顯影 */
.expert-side-module iframe::-webkit-scrollbar-thumb:hover {
    background: #d4af37;      /* 職人金：滑鼠移入時點亮 */
}
   /* 🚩 1. 初始狀態定錨 (尚未激活) */
#expert-side-module {
    width: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden; /* 防止內容在收合時噴出來 */
    
    /* 物理過渡協議：針對 width 與 opacity 進行 0.6 秒的緩衝 */
    transition: 
        width 0.6s cubic-bezier(0.23, 1, 0.32, 1), 
        opacity 0.4s ease;
}

/* 🚩 2. 激活狀態 (engine-active) */
.engine-active #expert-side-module {
    width: 360px;
    opacity: 1;
    pointer-events: auto;
}

/* 🚩 3. 左側主場：同步擠壓補償 */
#content-field {
    flex: 1;
    /* 同步設定過渡，確保左側跟著側欄一起滑動 */
    transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

    .engine-active #content-field {
        width: calc(100% - 360px); /* 物理擠壓補償 */
    }

    /* 滾動條：維持黑金窄版設計 */
    #expert-side-module::-webkit-scrollbar {
        width: 4px;
    }
    #expert-side-module::-webkit-scrollbar-thumb {
        background: #27272a;
        border-radius: 10px;
    }
	.sidepanel-container {
   
    
}
/* 🚩 珍珠引擎：雙欄等高定錨 */
.dual-pane-layout {
    display: flex;
    gap: 24px;
    align-items: stretch; /* 核心：強制左右等高 */
    width: 100%;
    min-height: 450px; /* 您可以根據需求設定基礎高度 */
}

/* 左側：資產區 */
.pane-left {
    flex: 1;
    display: flex;
}

.pane-left .asset-zone {
    width: 100%;
    height: 100%; /* 繼承父層高度 */
    border: 2px dashed #27272a;
    border-radius: 16px;
    display: block;
	text-align:center;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 20, 0.4);
}

/* 右側：文案區 */
.pane-right {
    flex: 1.5; /* 稍微寬一點，符合職人視覺比例 */
    display: flex;
    flex-direction: column;
    gap: 16px;
	/*margin-right:35px;*/
}

/* 🚩 標題外置協議 */
.input-label-external {
    display: block;
    font-size: 11px;
    color: #71717a;
    margin-bottom: 8px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.input-container {
    display: flex;
    flex-direction: column;
}

/* 確保中間的說明文案能自動吃掉剩餘空間，保持底部對齊 */
.flex-grow {
    flex-grow: 1;
}

.input-field-pearl {
    width: 100%;
    background: rgba(39, 39, 42, 0.2);
    border: 1px solid #27272a;
    border-radius: 12px;
    padding: 12px 16px;
    color: #fff;
    outline: none;
    transition: border-color 0.3s ease;
}

.input-field-pearl:focus {
    border-color: #d4af37; /* 珍珠金喚醒 */
}

textarea.input-field-pearl {
    height: 100%; /* 在 flex-grow 下撐滿 */
    resize: none;
}
/* 🚩 珍珠引擎：資產顯影區暗房設定 */
.asset-zone {
    overflow: hidden; /* 確保大圖不會撐破框框 */
    background: radial-gradient(circle, #1a1a1a 0%, #0d0d0d 100%) !important;
    position: relative;
}

.asset-zone img {
    /* 物理慣性：進場動畫 */
    animation: pearl-fade-in 0.5s ease-out;
}

@keyframes pearl-fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
/* 🎨 珍珠引擎專用：全資產展開樣式表 */
.pearl-console-full {
    background: #ffffff;
    border: 1px solid #dcdde1;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    margin-top: 20px;
    color: #2f3640;
    line-height: 1.7;
}

.protocol-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    margin: 10px 0;
    color: #1e272e;
}

.protocol-badge {
    background: #d4af37;
    color: #fff;
    padding: 2px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.subtitle {
    color: #7f8c8d;
    font-size: 0.95rem;
    margin-bottom: 25px;
    border-bottom: 2px solid #f1f2f6;
    padding-bottom: 15px;
}

.protocol-section {
    margin-bottom: 25px;
}

.section-title {
    font-size: 1.2rem;
    color: #d4af37;
    margin-bottom: 15px;
    border-left: 4px solid #d4af37;
    padding-left: 12px;
}

.feature-item {
    background: #fdfdfd;
    border: 1px solid #f1f2f6;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px;
}

.feature-item h4 {
    margin: 0 0 8px 0;
    color: #2f3640;
    border-bottom: 1px solid #eee;
    display: inline-block;
}

.pro-note {
    font-size: 0.9rem;
    color: #718093;
    background: #f9f9f9;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 8px;
}

.asset-list {
    padding-left: 20px;
}

.asset-list li {
    margin-bottom: 8px;
}

.highlight {
    background: #fcf8e8;
    padding: 15px;
    border-radius: 8px;
}

.security {
    border: 2px dashed #d4af37;
    padding: 15px;
    border-radius: 8px;
}		

.ui-icon-svg {
	width: 350px;  /* 讓它更大氣一點 */
    height: 350px;
    color: #666;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-family: "Segoe UI", "Microsoft JhengHei", sans-serif;
}

.contact-icon {
    width: 20px;   /* 嚴格控制物理尺寸 */
    height: 20px;
    object-fit: contain;
}

.contact-text {
    font-size: 14px;
    color: #444;
    font-weight: 500;
}