/* =========================================================================
   NetTV 共用樣式表 (style.css)
   5 個語系頁面 (日/繁/簡/英/韓) 共用此檔，改這裡 = 全站同步生效。
   改完樣式後，記得把 5 個 HTML 的 ?v=3 數字 +1（破瀏覽器快取）。
   ========================================================================= */

/* ---- 色彩變數：改品牌色只要改這裡 ---- */
:root {
    --primary-rose: #D488A0;   /* 主粉色：裝飾用（漸層、外框、大標的「S」）*/
    --deep-rose:    #B57C8D;   /* 深粉：Logo、副標、價格 */
    --rose-text:    #B05975;   /* 可通過無障礙對比(AA)的粉：小字文字、購買鈕底色 */
    --soft-bg:      #FFF9FB;   /* 背景米白 */
    --white:        #FFFFFF;
    --dark-text:    #4A4A4A;   /* 內文深灰 */
    --light-grey:   #6E6E6E;   /* 次要灰字（已加深以符合對比標準）*/
    --shadow: 0 15px 40px rgba(212, 136, 160, 0.12);  /* 通用陰影 */
}

/* ---- 基礎重置 ---- */
* { box-sizing: border-box; }
body, html {
    margin: 0; padding: 0;
    font-family: "Helvetica Neue", Arial, sans-serif;  /* 各語系字型在檔案最下方覆寫 */
    background-color: var(--soft-bg);
    color: var(--dark-text);
    line-height: 1.6;
    scroll-behavior: smooth;   /* 點錨點時平滑捲動 */
}

/* ---- 頁首（固定在最上方，半透明毛玻璃）---- */
header {
    position: fixed;
    top: 0; width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);   /* 毛玻璃模糊效果 */
    z-index: 1000;                /* 蓋在所有內容之上 */
    display: flex;
    justify-content: space-between;  /* Logo 靠左、語系靠右 */
    align-items: center;
    padding: 12px 5%;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
.logo { font-weight: 700; letter-spacing: 2px; color: var(--deep-rose); font-size: 1.1rem; }

/* ---- 語系切換（國旗）---- */
.lang-switcher { display: flex; align-items: center; }
.lang-switcher img { width: 26px; margin-left: 10px; border-radius: 50%; transition: 0.3s; }
/* 目前所在語系的國旗：加粉色外框標示 */
.lang-switcher a[aria-current="page"] img { outline: 2px solid var(--primary-rose); outline-offset: 1px; }

/* ---- 右下浮動購買鈕：捲到購買區時由 JS 加 .hidden 淡出 ---- */
.floating-cta { transition: opacity .35s ease, visibility .35s ease; }
.floating-cta.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- 區塊通用 ---- */
section { padding: 60px 10%; text-align: center; }
.container { max-width: 900px; margin: 0 auto; }

/* ---- 主視覺 Hero ---- */
.hero {
    padding-top: 110px;   /* 留空間給固定頁首 */
    padding-bottom: 40px;
    background: linear-gradient(180deg, #FFEBF0 0%, var(--soft-bg) 100%);
}
.hero h1 { font-size: 2.2rem; margin: 0 0 10px 0; color: var(--dark-text); }
.hero h1 span.accent { color: var(--primary-rose); }   /* 標題裡的粉色「S」*/
.hero .subtitle { font-size: 1.1rem; color: var(--deep-rose); margin-bottom: 30px; font-weight: bold; }
.hero-img { max-width: 100%; height: auto; border-radius: 15px; box-shadow: var(--shadow); }

/* ---- 規格卡（4 宮格，自動換行）---- */
.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  /* 寬度不夠自動換行 */
    gap: 20px;
    margin-top: 30px;
}
.spec-card {
    background: var(--white);
    padding: 25px 15px;
    border-radius: 15px;
    border: 1px solid #FCE4EC;
}
.spec-card h2 { color: var(--rose-text); margin: 0 0 5px 0; font-size: 1.1rem; }  /* h2 是為了標題順序正確 */
.spec-card p { font-size: 0.85rem; margin: 0; color: var(--light-grey); }

/* ---- 產品展示區 ---- */
.showcase { background-color: var(--white); padding: 50px 10%; }
.showcase img { width: 100%; max-width: 750px; height: auto; border-radius: 12px; margin: 20px 0; }
.feature-desc { max-width: 700px; margin: 0 auto 30px; font-size: 1.05rem; }

/* ---- 購買區（漸層底 + 白色大卡片）---- */
.checkout-section {
    background: linear-gradient(180deg, var(--white) 0%, #FFF0F3 100%);
    padding: 60px 5%;
}
.checkout-card {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 30px;
    padding: 50px 30px;
    box-shadow: 0 30px 60px rgba(212, 136, 160, 0.15);
    border: 1px solid #FFF;
}
.checkout-card h2 { font-size: 1.8rem; margin: 0 0 10px 0; }
.promo { color: var(--rose-text); margin-bottom: 30px; font-size: 1rem; }
/* .payment-box：舊版虛線框（目前未使用，保留以備不時之需）*/
.payment-box {
    background: #FDFDFD;
    border: 2px dashed #FCE4EC;
    border-radius: 20px;
    padding: 40px 20px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* ---- 頁尾 ---- */
footer {
    background: #3D3D3D;
    color: #AAA;
    padding: 60px 10% 30px;
    font-size: 0.85rem;
}
.footer-logo { filter: brightness(0) invert(1); opacity: 0.3; margin-bottom: 20px; }

/* ---- 浮動購買鈕外觀（固定右下角）---- */
.floating-cta {
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: var(--rose-text);   /* 深粉，白字才看得清（無障礙）*/
    color: white;
    padding: 12px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 10px 25px rgba(212, 136, 160, 0.3);
    z-index: 999;
    font-size: 0.9rem;
}

/* ---- 手機版調整（螢幕 ≤600px）---- */
@media (max-width: 600px) {
    .hero h1 { font-size: 1.5rem; }
    section { padding: 40px 5%; }
    .checkout-card { padding: 30px 15px; }
    .floating-cta { padding: 10px 20px; font-size: 0.85rem; }
}

/* ---- 捲動時頁首縮小 ---- */
header { transition: padding 0.3s ease, box-shadow 0.3s ease; }
header.scrolled { padding: 7px 5%; box-shadow: 0 2px 20px rgba(0,0,0,0.12); }

/* ---- 捲動進場淡入動畫（由 JS 加 .visible 觸發）---- */
.fade-in { opacity: 0; transform: translateY(25px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ---- Feature Cards 圖片格子（桌機 hover 放大 / 手機點擊放大）---- */
.feature-card-img {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 4 / 3;    /* 111顯示/333劇院 用 4:3；222盒子另設 16:9 全寬 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 25px rgba(0,0,0,0.12);
    background: #f5f5f5;
}
.feature-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;   /* 填滿不變形 */
    display: block;
    transition: transform 0.3s ease;
}
/* hover(桌機) 或 .zoomed(手機點擊) 時：卡片浮起 */
.feature-card-img:hover,
.feature-card-img.zoomed {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 14px 38px rgba(0,0,0,0.20);
    z-index: 2;
}
.feature-card-img:hover img,
.feature-card-img.zoomed img {
    transform: scale(1.08);   /* 圖片本身再放大一點 */
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 固定 2 欄 */
    gap: 20px;
    margin: 30px auto 0;
    max-width: 700px;
}
/* 222 產品盒子主圖：橫跨整排、16:9 不裁切 */
.feature-card-img.feature-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (max-width: 600px) {
    .feature-grid { gap: 12px; grid-template-columns: 1fr; }   /* 手機改單欄直向堆疊 */
}

/* ---- 各語系字型：依 <html lang> 自動套用對應系統字型 ---- */
html[lang="ja"]    body { font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; }
html[lang="zh-TW"] body { font-family: "Helvetica Neue", Arial, "Microsoft JhengHei", "PingFang TC", sans-serif; }
html[lang="zh-CN"] body { font-family: "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif; }
html[lang="ko"]    body { font-family: "Helvetica Neue", Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* ---- 購買區內部元件 ---- */
.price-hero { font-size:2.8rem; font-weight:800; color:#B57C8D; margin:18px 0 2px; line-height:1; }  /* 大價格 */
.price-hero small { font-size:.9rem; font-weight:500; color:#6E6E6E; }                                /* 「含運」小字 */
.price-sub { color:#6E6E6E; font-size:.92rem; margin-bottom:26px; }                                   /* 價格下方說明 */
.pay-stack { max-width:300px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }         /* 按鈕直向排列 */
.pay-stack form { margin:0; }
.pp-btn { width:100%; height:3rem; border:none; border-radius:0.5rem; font-weight:bold; font-size:1.05rem; cursor:pointer; font-family:inherit; transition:filter .2s; }
.pp-btn:hover { filter:brightness(.95); }
.pp-yellow { background:#FFD140; color:#000; }   /* 黃色：立即購買 */
.pp-black  { background:#2C2E2F; color:#fff; }   /* 黑色：信用卡/簽帳卡 */
.pay-cards { height:1.5rem; margin:8px auto 0; display:block; }   /* 信用卡 logo 圖 */
.b-trust { text-align:center; font-size:.78rem; color:#6E6E6E; margin-top:10px; }   /* 安全結帳信任標語 */