/* 弗洛材料 — 前台共用樣式 */

:root {
            --navy: #0D2137;
            --brand: #1976D2;
            --brand-light: #42A5F5;
        }

        * { box-sizing: border-box; }

        html { scroll-behavior: smooth; }

        body {
            font-family: 'Noto Sans TC', sans-serif;
            color: #374151;
            background: #fff;
        }

        /* ---- Header ---- */
        #site-header {
            position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
            background: rgba(13, 33, 55, 0.97);
            backdrop-filter: blur(8px);
            border-bottom: 1px solid rgba(255,255,255,0.07);
            transition: all .3s ease;
        }
        #site-header.scrolled {
            background: rgba(13, 33, 55, 1);
            box-shadow: 0 2px 20px rgba(0,0,0,.35);
        }

        /* ---- Nav ---- */
        .nav-link {
            position: relative;
            color: rgba(255,255,255,.8);
            font-size: .875rem;
            font-weight: 500;
            letter-spacing: .04em;
            padding: .25rem 0;
            transition: color .2s;
        }
        .nav-link::after {
            content:''; position:absolute; bottom:-2px; left:0; right:0;
            height:2px; background:var(--brand-light);
            transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
        }
        .nav-link:hover, .nav-link.active { color:#fff; }
        .nav-link:hover::after, .nav-link.active::after { transform:scaleX(1); }

        /* ---- Dropdown ---- */
        .dropdown:hover .dropdown-menu { display:block; }
        .dropdown-menu {
            display:none;
            position:absolute; top:100%; left:50%; transform:translateX(-50%);
            min-width:220px;
            background:#fff;
            border-radius:.5rem;
            box-shadow:0 10px 40px rgba(0,0,0,.15);
            overflow:hidden;
            z-index:200;
        }
        .dropdown-menu a {
            display:block; padding:.65rem 1.25rem;
            font-size:.85rem; color:#374151;
            border-bottom:1px solid #f3f4f6;
            transition:background .15s, color .15s;
        }
        .dropdown-menu a:last-child { border-bottom:none; }
        .dropdown-menu a:hover { background:#EFF6FF; color:var(--brand); }

        /* ---- Hero Slider ---- */
        .hero-slider { position:relative; overflow:hidden; }
        .hero-slide { display:none; }
        .hero-slide.active { display:block; }
        .hero-slide img { width:100%; height:100%; object-fit:cover; }

        /* ---- Breadcrumb ---- */
        .page-banner {
            position:relative; overflow:hidden;
            background:linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
            padding: 6rem 0 3rem;
            margin-top:70px;
        }
        .page-banner::before {
            content:''; position:absolute; inset:0;
            background:url('/img/pattern.svg') repeat;
            opacity:.04;
        }

        /* ---- Section ---- */
        .section-title {
            font-size:1.75rem; font-weight:700; color:var(--navy);
            position:relative; padding-bottom:.75rem; margin-bottom:2rem;
        }
        .section-title::after {
            content:''; position:absolute; bottom:0; left:0;
            width:3rem; height:3px; background:var(--brand);
            border-radius:2px;
        }
        .section-title.center { text-align:center; }
        .section-title.center::after { left:50%; transform:translateX(-50%); }

        /* ---- Cards ---- */
        .card-product {
            background:#fff; border-radius:.75rem;
            border:1px solid #E5E7EB;
            overflow:hidden;
            transition:transform .25s ease, box-shadow .25s ease;
        }
        .card-product:hover {
            transform:translateY(-4px);
            box-shadow:0 12px 32px rgba(25,118,210,.15);
        }
        .card-product img {
            width:100%; height:200px; object-fit:cover;
        }

        .card-news {
            background:#fff; border-radius:.75rem;
            border:1px solid #E5E7EB;
            overflow:hidden;
            transition:transform .25s ease, box-shadow .25s ease;
        }
        .card-news:hover {
            transform:translateY(-4px);
            box-shadow:0 12px 32px rgba(0,0,0,.1);
        }
        .card-news img {
            width:100%; height:180px; object-fit:cover;
        }

        /* ---- Buttons ---- */
        .btn-primary {
            display:inline-flex; align-items:center; gap:.5rem;
            background:var(--brand); color:#fff;
            padding:.65rem 1.75rem; border-radius:.375rem;
            font-weight:500; font-size:.9rem;
            transition:background .2s, transform .15s;
            text-decoration:none;
        }
        .btn-primary:hover { background:var(--brand-dark, #1565C0); transform:translateY(-1px); }

        .btn-outline {
            display:inline-flex; align-items:center; gap:.5rem;
            border:2px solid var(--brand); color:var(--brand);
            padding:.6rem 1.5rem; border-radius:.375rem;
            font-weight:500; font-size:.9rem;
            transition:all .2s; text-decoration:none;
        }
        .btn-outline:hover { background:var(--brand); color:#fff; }

        /* ---- Form ---- */
        .form-input {
            width:100%; padding:.65rem 1rem;
            border:1px solid #D1D5DB; border-radius:.375rem;
            font-size:.9rem; color:#374151;
            transition:border-color .2s, box-shadow .2s;
            outline:none;
        }
        .form-input:focus {
            border-color:var(--brand);
            box-shadow:0 0 0 3px rgba(25,118,210,.1);
        }

        /* ---- Footer ---- */
        #site-footer { background:var(--navy); color:rgba(255,255,255,.8); }

        /* ---- Float LINE Button ---- */
        .float-line {
            position:fixed; right:1.25rem; bottom:5.5rem; z-index:900;
            width:56px; height:56px;
            display:flex; align-items:center; justify-content:center;
            transition:transform .2s;
            text-decoration:none;
        }
        .float-line:hover { transform:scale(1.1); }

        /* ---- Mobile Menu ---- */
        #mobile-menu { display:none; }
        #mobile-menu.open { display:block; }

        /* ---- Pagination ---- */
        .page-item { margin:0 .15rem; }
        .page-link {
            display:inline-flex; align-items:center; justify-content:center;
            width:2rem; height:2rem; border-radius:.375rem;
            font-size:.85rem; color:#6B7280;
            border:1px solid #E5E7EB;
            transition:all .2s;
        }
        .page-link:hover, .page-link.active {
            background:var(--brand); color:#fff; border-color:var(--brand);
        }

        /* ---- Utilities ---- */
        .text-brand { color:var(--brand); }
        .bg-navy   { background:var(--navy); }
        .content-html h2 { font-size:1.25rem; font-weight:700; margin:1.5rem 0 .75rem; color:var(--navy); }
        .content-html h3 { font-size:1.1rem; font-weight:600; margin:1.25rem 0 .5rem; }
        .content-html p  { line-height:1.8; margin-bottom:1rem; }
        .content-html ul { list-style:disc; padding-left:1.5rem; margin-bottom:1rem; }
        .content-html img { max-width:100%; border-radius:.5rem; margin:1rem 0; }
        .content-html strong { color:#1e3a5f; }

        @media (max-width:768px) {
            .page-banner { padding:5rem 0 2.5rem; }
        }