/* ==========================================
   1. 基本設定
   ========================================== */
   * {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, "PingFang TC", "Microsoft JhengHei", sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* 防止產生左右捲軸 */
}

/* 核心：定義置中的容器 */
.inner-content {
    max-width: 1920px; 
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

/* 隱藏漢堡選單的勾勾（開關） */
#menu-toggle {
    display: none ;
}

/* 電腦版時隱藏漢堡三條線圖示 */
.hb-menu {
    display: none;
}

/* ==========================================
   2. 導覽列與頁首 (Header & Nav)
   ========================================== */
.site-header {
    width: 100%;
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 2000;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 38px;
    width: auto;
    display: block;
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 35px;
    margin: 0;
    padding: 0;
    align-items: center;
}

.main-nav ul li a {
    text-decoration: none;
    color: #444 ;
    font-size: 15px;
    font-weight: 600;
    transition: 0.3s;
}

.main-nav ul li a:hover {
    color: #004b91 ; /* 滑鼠移過去換色 */
}

.nav-social img {
    width: 22px ;
    height: auto;
    display: block;
}

/* ==========================================
   3. 區塊樣式 (Sections)
   ========================================== */

  /* ====== index ======== */

   /* 首頁 Banner */
.hero-banner{
    width: 100%;
    object-fit: cover;
    display: block;
}



/* 最新消息 (電腦版 3 欄) */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-item img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    margin-bottom: 15px;
}

/* 作品展示網格 (電腦版 4 欄) */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    padding-bottom: 40px;
}

.thumb img {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease;
}

.thumb img:hover { opacity: 0.7; }

/* 角色介紹與頁尾 */
.character-bg { 
    width: 100%;
    overflow: hidden;
    background-color: #ffffff;  
}
.character-section img { width: 100%; display: block; }

.site-footer {
    text-align: center;
    padding: 60px 0;
    background-color: #fff;
    font-size: 12px;
    color: #bbb;
    letter-spacing: 1px;
}

/* ====== brand ======== */
/* ABOUT 導言 */
.about-section { padding: 60px 0px; }
.about-intro {
    padding: 60px 0;
    text-align: center;
}

.about-intro h1 {
    font-size: 36px;
    letter-spacing: 2px;
    margin-bottom: 40px;
}

.intro-text p {
    margin: 5px 0;
    font-size: 14px;
    color: #333;
}

.highlight-kr, .highlight-en {
    font-weight: 800;
    font-size: 18px ;
    margin-top: 20px ;
    display: block; /* 確保獨立成行 */
}

/* 角色大圖區塊 (強制滿版修正) */
.character-section {
    width: 100%;
}



.character-section .inner-content {
    max-width: 100% ; /* 強制撐滿螢幕 */
    width: 100% ;
    padding: 0;
}


/* ====== news ======== */
/* ��ҳ Banner ͼƬ�趨 */
.hero-banner img, 
.character-section img {
    width: 100%;
    display: block;
    object-fit: cover; 
}

/*Slogan */
.slogan-section {
    width: 100%;
    background-color: #76C3EC;
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
}

.slogan-section h1 {
    font-size: 32px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

h2 {
    text-align: center;
    margin-bottom: 40px;
}



.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.news-link {
    text-decoration: none;
    color: inherit;
    display: block;
    text-align: center;
    transition: 0.3s;
}

.news-link:hover {
    opacity: 0.8;
}

.news-item img {
    width: 100%;
    aspect-ratio: 1/1; /* ǿ��ͼƬ�������� */
    object-fit: cover;
    margin-bottom: 15px;
    display: block;
}
/* ====== product ======== */
.about-intro {
    padding: 0px 0 0px ;
}

.about-intro h1 {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 4px;
    margin-bottom: 20px ;
    color: #222;
}

.intro-text p {
    margin: 5px 0 ;
    font-size: 15px;
    color: #555;
}

/* ONLINE STORE 黑色膠囊按鈕 (保留膠囊形狀) */
.btn-store {
    display: inline-block;
    padding: 10px 45px;
    background-color: #000;
    color: #fff ;
    border-radius: 50px; /* 按鈕維持膠囊狀，不影響圖片 */
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 40px ;
}

.btn-store:hover {
    background-color: #333;
    transform: translateY(-2px);
}
.item-section{
    padding: 40px 0;
}
.section-title {
    margin-top: 0;
    margin-bottom: 40px;
    font-size: 26px;
    font-weight: 700;
    color: #222;
    letter-spacing: 2px;
}

/* ==========================================
   4. 插畫九宮格區塊 (已移除圖片圓角)
   ========================================== */
.news-section {
    padding: 40px 0 80px;
    background-color: #fff;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.news-item {
    background: #fff;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.news-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    /* border-radius 已移除，現在是直角 */
}

.news-item:hover {
    opacity: 0.8;
}



/* ====== cooperate ======== */


/* ====== work ======== */
.grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.news-item {
    background: #fff;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.news-item img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    /* border-radius 已移除，圖片圓角設定 */
}

.news-item:hover {
    opacity: 0.8;
}


/* 點擊圖片放大 */
.lightbox-overlay {
 display: none;
 position: fixed;
 z-index: 9999;
 top: 0; left: 0;
 width: 100%; height: 100%;
 background-color: rgba(0, 0, 0, 0.9);
 justify-content: center;
 align-items: center;
 cursor: pointer;
        }
.lightbox-content {
 max-width: 85%;
 max-height: 85%;
 box-shadow: 0 0 20px rgba(0,0,0,0.5);
 animation: zoomIn 0.3s ease;
        }
.close-btn {
 position: absolute;
 top: 20px; right: 30px;
 color: white;
 font-size: 40px;
 font-weight: bold;
}


/* ==========================================
   4. 頁尾 (Footer)
   ========================================== */
   .site-footer {
    text-align: center;
    padding: 60px 0;
    background-color: #fff;
    font-size: 12px;
    color: #999;
}

.footer-logo {
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}




/* ==========================================
  5. 手機版響應式 (RWD - 768px 以下)
   ========================================== */
   @media screen and (max-width: 768px) {
    

    /* 漢堡選單圖示 */
    .hb-menu {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 26px;
        height: 20px;
        z-index: 1001;
    }

    .bar {
        width: 100%;
        height: 2px;
        background-color: #333;
        border-radius: 10px;
        transition: 0.3s;
    }

    /* 手機版導覽選單 */
    .main-nav {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background-color: #fff;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05);
        z-index: 1000;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 30px 0;
    }
    .main-nav ul {
        display: flex;
        list-style: none;
        gap: 5px;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .main-nav ul li { margin: 15px 0; }

    /* 選單開關功能 */
    #menu-toggle:checked ~ .main-nav { max-height: 500px; }
    #menu-toggle:checked + .hb-menu .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    #menu-toggle:checked + .hb-menu .bar:nth-child(2) { opacity: 0; }
    #menu-toggle:checked + .hb-menu .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* --- 手機版網格統一寫法 --- */
    
    .grid-3 { 
        grid-template-columns: 1fr; /* 消息變 1 欄 */
        gap: 20px;
    }
    .grid-5 { 
        grid-template-columns: repeat(2, 1fr) ; 
        gap: 8px; 
    }

    .grid-6 { 
        grid-template-columns: repeat(2, 1fr) ; /* 強制改為一排兩張 */
        gap: 10px; 
    }
    
    .slogan-section { padding: 50px 0; }
    .slogan-section h1 { font-size: 24px; }

    

    
}

/* 平板與手機通用微調 */
@media screen and (max-width: 992px) {
    .about-intro h1 { font-size: 28px; }
}