@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');
@import url('tool-icon.css');

:root {
    --primary-yellow: #F3C14C;
    --light-yellow: #ffdc88;
    --primary-brown: #A65D33;
    --primary-dark-brown: #593825;
    --dark-gray: #777777;
    --black: #333333;
    --bg-light: #f9f9f9;
    --white: #f1f1f1;
    /* 與 web/ 一致：卡片 .portfolio-item、膠囊 .tag */
    --radius-card: 20px;
    --radius-pill: 50px;
    /* Graphic 拼貼、桌曆縮圖網格等：統一圖與圖之間間距 */
    --graphic-media-gap: 18px;
    /* 區塊小標（左直條）與下方圖庫的距離 */
    --graphic-title-gap: 10px;
    /* 馬賽克同一列：強制圖片顯示高度一致，寬度隨比例伸縮 */
    --graphic-mosaic-img-h: clamp(152px, 24vw, 280px);
    font-size: 16px;
}

/* Graphic index / Logo 包裝：表格作品集（graphic/、graphic/logoPkg.html） */
.graphic-table {
    width: 100%;
}

.graphic-table--strip {
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--graphic-title-gap);
}

.graphic-table--strip td {
    padding: 0;
    vertical-align: bottom;
}

/*
 * 馬賽克：tbody Grid + tr display:contents（等同 table 固定欄寬比例）。
 * 第一列兩欄 1:1、第二列三欄 1:1:1（欄寬用 fr 比例，非依圖片寬亂排）。
 * 未強制方形；同一列僅統一「顯示高度」--graphic-mosaic-img-h，圖片寬度隨原圖比例。
 */
.graphic-table--mosaic {
    display: block;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
}

.graphic-table--mosaic tbody {
    display: grid;
    gap: var(--graphic-media-gap);
    align-items: center;
}

.graphic-table--mosaic tr {
    display: contents;
}

.graphic-table--mosaic td {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding: 0;
}

.graphic-table--logo-row-2 tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graphic-table--logo-row-3 tbody {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graphic-table--logo-row-4 tbody {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.graphic-table--calendar-preview tbody {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.graphic-table--ratio-1-2-1 tbody {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
}

/* 兩張拼貼表上下相接時，留白與格線 gap 同級 */
.graphic-table--mosaic + .graphic-table--mosaic {
    margin-top: var(--graphic-media-gap);
}

.graphic-table--mosaic .box {
    box-sizing: border-box;
}

/* 欄等寬 + box 等高（--graphic-mosaic-img-h），圖用 cover 從中心做最小裁切，
 * 如此「不管幾張、上下高度都一致、欄寬平均」。 */
.graphic-table--mosaic .box:not(.box1) {
    width: 100%;
    height: var(--graphic-mosaic-img-h);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--bg-light);
}

.graphic-table--mosaic .box > a {
    display: block;
    width: 100%;
    height: 100%;
}

.graphic-table--mosaic td img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.graphic-table--strip + .graphic-table--mosaic {
    margin-top: 0;
}

/* 不同主題區塊之間（上一組圖庫 → 下一個小標） */
.graphic-table--mosaic + .graphic-table--strip {
    margin-top: calc(var(--graphic-media-gap) * 2.25);
}

/* 內頁區塊小標（Graphic、About 等） */
.box.box1 {
    height: fit-content;
    border-left: 10px solid var(--primary-dark-brown);
}

.box.box1 h3 {
    font-size: 2rem;
    padding-left: 50px;
    margin: 0;
    color: var(--primary-dark-brown);
}

@media (max-width: 1024px) {
    :root {
        --graphic-mosaic-img-h: clamp(138px, 34vw, 248px);
    }

    .graphic-table--logo-row-2 tbody,
    .graphic-table--logo-row-3 tbody,
    .graphic-table--logo-row-4 tbody,
    .graphic-table--ratio-1-2-1 tbody,
    .graphic-table--calendar-preview tbody {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* 三板：第三格另起一排，整列寬置中於「半欄寬」維持與其他卡片同尺寸 */
    .graphic-table--mosaic tbody > tr > td:last-child:nth-child(3) {
        grid-column: 1 / -1;
    }

    .graphic-table--mosaic tbody > tr > td:last-child:nth-child(3) .box:not(.box1) {
        max-width: calc(50% - var(--graphic-media-gap) / 2);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .graphic-table--mosaic tbody {
        gap: max(12px, var(--graphic-media-gap));
    }
}

/* 內頁：與首頁共用樣式但略縮小 rem 基準（首頁 index 的 <html> 不加 .page-inner） */
html.page-inner {
    font-size: 15px;
}

* {
    margin: 0;
    padding: 0;
    font-family: "Noto Serif TC", serif;
    box-sizing: border-box;
}

body {
    background-color: var(--white);
    color: var(--black);
}

a {
    text-decoration: none;
    color: inherit;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    /* 移除手機版點擊時的灰色遮罩 */
}

header {
    background: var(--light-yellow);
    padding: 0 10%;
}

.navbar {
    padding: 10px 50px;
}

/* 導覽左右平分：左 Studio・Visual｜右 Web・Notes・Tools */
.nav-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
    width: 100%;
}

@media (min-width: 1400px) {
    .nav-shell {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "nav-start nav-logo nav-end";
        align-items: center;
        column-gap: 28px;
        row-gap: 0;
        flex-wrap: nowrap;
        justify-content: stretch;
    }

    .nav-logo {
        grid-area: nav-logo;
        justify-self: center;
    }

    .nav-toggle {
        display: none;
    }

    .nav-menu {
        display: contents;
    }

    .nav-links--start {
        grid-area: nav-start;
        justify-content: flex-end;
    }

    .nav-links--end {
        grid-area: nav-end;
        justify-content: flex-start;
    }
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 28px 36px;
    margin: 0;
    padding: 0;
}

.nav-links--start {
    justify-content: flex-end;
}

.nav-links--end {
    justify-content: flex-start;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.nav-toggle__bar {
    display: block;
    width: 24px;
    height: 2.5px;
    margin: 0 auto;
    background: var(--primary-brown);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-shell.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.nav-shell.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.nav-shell.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
    display: none;
    width: 100%;
}

/* 預設先收合；桌機再展開（需放在 .nav-menu 預設後方避免被覆蓋） */
@media (min-width: 1400px) {
    .nav-menu {
        display: contents;
    }
}

body.nav-open {
    overflow: hidden;
}

.nav-logo {
    display: block;
    line-height: 0;
    justify-self: center;
    flex-shrink: 0;
}

/* Logo 967×154（橫式）：只鎖高度，寬度隨比例 */
.nav-logo img {
    --nav-logo-ratio: 967 / 154;
    height: clamp(46px, 5.2vw, 60px);
    width: auto;
    max-width: none;
    max-height: none;
    aspect-ratio: var(--nav-logo-ratio);
    object-fit: contain;
    object-position: center;
    display: block;
}

@media (min-width: 1400px) {
    .nav-links {
        flex-wrap: nowrap;
        gap: 22px 28px;
    }
}

.nav-links a {
    text-decoration: none;
    color: var(--primary-brown);
    font-size: 1.2rem;
    font-weight: 800;

}

.nav-links a:hover {
    color: var(--primary-dark-brown);
}

.nav-links > li > a.active,
.nav-links li.dropdown > a.active {
    border-bottom: 3px solid var(--primary-yellow);
    padding-bottom: 4px;
}

/* 1. 禁用狀態樣式 */
.nav-links li.disabled {
    position: relative;
    /* 為了讓提示文字對齊 */
}

/* downDisabled 也需要定位基準，否則 ::after 會以整頁為參考 */
.nav-links li.downDisabled {
    position: relative;
}

.nav-links li.downDisabled a {
    color: var(--primary-brown) !important;
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

.nav-links li.disabled a {
    color: var(--primary-brown) !important;
    /* 使用之前規範中的灰色 #8c8c8c */
    opacity: 0.6;
    pointer-events: none;
    /* 徹底禁止點擊事件 */
}

/* 2. 滑鼠滑過去的提示文字 (Tooltip) */
.nav-links li.disabled::after {
    content: attr(data-tooltip);
    /* 抓取 HTML 裡的文字 */
    position: absolute;
    bottom: -45px;
    /* 顯示在選項下方 */
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    /* 初始縮小，增加彈出感 */
    background: var(--primary-brown);
    /* 使用你規範中的 core-900 黑色 */
    color: var(--white);
    /* 使用你的主色黃 #FFDD00 讓文字明顯 */
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    white-space: nowrap;
    z-index: 100;
    /* 玻璃擬態效果與陰影 */
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 221, 0, 0.3);
    /* 帶點主色邊框 */
    /* 預設隱藏 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 貝茲曲線彈跳動畫 */
}




/* 3. Hover 時秀出提示 */
.nav-links li.disabled:hover::after {
    opacity: 1;
    visibility: visible;
    bottom: -35px;
    /* 稍微往下飄移的動態感 */
}

/* --- 下拉選單基礎設定 --- */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--white);
    /* 使用背景白 */
    list-style: none;
    min-width: 180px;
    padding: 10px 0;
    border-radius: var(--radius-card);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--light-yellow);

    /* 預設隱藏動畫 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

/* 讓下拉選單與選單項之間沒有間隙，避免滑鼠移出時選單消失 */
.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
}

/* --- 顯示狀態 --- */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- 下拉項目樣式 --- */
.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--primary-brown) !important;
    /* 強制使用你的深棕色 */
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    white-space: nowrap;
    transition: background 0.2s ease;
    text-align: center;
    text-decoration: none !important;
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: var(--light-yellow);
    color: var(--primary-dark-brown) !important;
    text-decoration: none !important;
    border-bottom: none;
}

.dropdown-menu a.active {
    background-color: var(--light-yellow);
    color: var(--primary-dark-brown) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: none;
    padding-bottom: 10px;
}


/* 2. 滑鼠滑過去的提示文字 (Tooltip) */
.nav-links li.downDisabled::after {
    content: attr(data-tooltip);
    /* 抓取 HTML 裡的文字 */
    position: absolute;
    top: 50%;
    /* 顯示在選項右邊 */
    left: 100%;
    margin-left: 10px;
    transform: translateY(-50%) translateX(-5px) scale(0.9);
    /* 初始縮小，增加彈出感 */
    background: var(--primary-brown);
    /* 使用你規範中的 core-900 黑色 */
    color: var(--white);
    /* 使用你的主色黃 #FFDD00 讓文字明顯 */
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    /* 玻璃擬態效果與陰影 */
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 221, 0, 0.3);
    /* 帶點主色邊框 */
    /* 預設隱藏 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 貝茲曲線彈跳動畫 */
}




/* 3. Hover 時秀出提示 */
.nav-links li.downDisabled:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0) scale(1);
    /* 稍微往右飄移的動態感 */
}




/* 針對原本 disabled 提示的微調 (避免擋到下拉選單) */
.nav-links li:not(.downDisabled) {
    cursor: pointer;
}



.hero-section {
    display: flex;
    padding-top: 5%;
    background: var(--light-yellow);
}

.hero-text {
    margin: auto;
    width: 50%;
    text-align: center;
}

.hero-text h1 {
    font-size: 3rem;
    text-align: left;
    margin-bottom: 20%;
}

.hero-text h1 br {
    margin-left: 5px;
}

.hero-text h1 span {
    color: var(--primary-brown);
}

.hero-describe {
    margin-right: 20%;
    text-align: right;
}

.hero-describe h2 {
    font-size: 1.8rem;
    margin-bottom: 3%;
}

/* .hero-img{
    width: 50%
} */

/* 右側不規則圖形容器 */
.hero-image-container {
    position: relative;
}

.blob-shape {
    width: 350px;
    height: 300px;
    background-color: var(--primary-yellow);
    /* 創造不規則形狀的關鍵 */
    /* border-radius: 60% 40% 60% 40% / 50% 60% 40% 50%; */
    border-radius: 67% 33% 67% 33% / 45% 60% 40% 55%;
    border: 2px dashed #555;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 狗狗圖片縮放與位置調整 */
.avatar {
    width: 80%;
    height: auto;
    /* 視圖片情況可能需要調整 margin-top 或 position */
}


/* 作品集區域 */
.section-title {
    text-align: center;
    padding: 100px 0 50px;
    font-size: 2rem;
    color: var(--black);
    letter-spacing: 4px;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    padding: 0 10% 100px;
}

.work-item {
    position: relative;
    background: var(--bg-light);
    height: 400px;
    overflow: hidden;
    border-radius: var(--radius-card);
    /* border: 1px solid #eee; */
    transition: transform 0.4s ease;
}

.work-item:hover {
    transform: translateY(-10px);
}

.work-image {
    width: 100%;
    height: 100%;
    background-color: var(--primary-yellow);
    /* 預設圖片占位色 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-style: italic;
}

.work-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: var(--white);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.work-item:hover .work-info {
    transform: translateY(0);
}

.main-container {
    width: 80%;
    margin: 10% auto;
}

.main-container h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-top: 40px;
}

/* 頁面大標題設計 (通用) */
.page-title {
    text-align: center;
    margin: 80px auto 20px auto;
    position: relative;
    padding-bottom: 20px;
}

.page-title h2 {
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -1px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.page-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 6px;
    background: var(--primary-yellow);
    margin: 10px auto 0;
    border-radius: var(--radius-pill);
}

.page-title p {
    font-size: 1rem;
    color: var(--dark-gray);
    letter-spacing: 2px;
    font-weight: 500;
}

/* 作品卡片 meta：tag／date／工具（Web、UI/UX 共用） */
.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 0 10px;
    gap: 12px;
}

.card-meta .tag {
    margin-bottom: 0;
}

.card-meta .card-tools {
    margin: 0;
}

.tag {
    display: inline-block;
    background: var(--primary-yellow);
    color: #fff;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: bold;
}

.date {
    font-size: 0.75rem;
    color: var(--dark-gray);
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* 全站工具 icon 樣式見 tool-icon.css */
.card-tools {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--primary-brown);
    letter-spacing: 0.04em;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.card-content .card-tools,
.card-meta .card-tools {
    color: var(--primary-brown);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.meta-tool-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
}

/* --- 作品集卡片系統 --- */
.portfolio-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 25px;
    margin: 40px auto;
}

.portfolio-item {
    background: #fff;
    /* 或 var(--card-bg) */
    border-radius: var(--radius-card);
    overflow: hidden;
    vertical-align: top;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid #eee;
}

.portfolio-item:hover {
    transform: translateY(-8px);
}

.card-content {
    padding: 24px;
    box-sizing: border-box;
}

.uiux-case-copy.card-content {
    padding: 0;
}

.card-content h3 {
    margin: 0;
    line-height: 1.35;
}

.card-desc {
    margin: 8px 0 0;
    padding: 0;
    color: #666;
    font-size: 0.9rem;
    line-height: 1.75;
    text-align: left;
    hanging-punctuation: allow-end;
}

/* 聯絡資訊 */
footer {
    background-color: var(--black);
    color: var(--primary-yellow);
    flex-shrink: 0;
    /* 防止 Footer 被壓縮 */
    padding: 25px 5%;
    text-align: center;
    font-size: 0.8rem;
}

.contact-email {
    margin: 0px auto;
    font-size: 1rem;
    display: block;
    color: var(--white);
    text-decoration: none;

}

/* 外層容器：確保背景滿版且不斷層 */
.section-wrapper {
    width: 100%;
    padding: 100px 0;
    /* 用 padding 撐開間距 */
    box-sizing: border-box;
}

/* 內層容器：確保內容絕對置中不偏左 */
.container {
    width: 100%;
    /* max-width: 1200px; */
    /* 這裡限制你的美感邊界 */
    margin: 0 auto;
    /* 核心：自動平分左右 */
    padding: 0 40px;
}

/* 針對 web/ 的三列架構 */
.portfolio-grid-web {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* --- 寬度 < 1400px：漢堡選單 --- */
@media (max-width: 1399px) {
    .navbar {
        padding: 10px 20px;
    }

    /* Logo + 漢堡固定同一列；選單展開時整塊另起一排 */
    .nav-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "nav-logo nav-toggle";
        align-items: center;
        column-gap: 12px;
        row-gap: 0;
    }

    .nav-logo {
        grid-area: nav-logo;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }

    .nav-logo img {
        height: clamp(34px, 8vw, 48px);
        max-width: 100%;
        width: auto;
    }

    .nav-toggle {
        display: flex;
        grid-area: nav-toggle;
        justify-self: end;
    }

    .nav-menu {
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-top: 16px;
        padding: 16px 20px 20px;
        background: var(--white);
        border: 2px solid var(--light-yellow);
        border-radius: var(--radius-card);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    }

    .nav-shell.is-open .nav-menu {
        display: flex;
    }

    .nav-links--start,
    .nav-links--end {
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        flex-wrap: nowrap;
    }

    .nav-links--end {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    .nav-links > li {
        width: 100%;
        text-align: center;
    }

    .nav-links > li > a,
    .nav-links li.dropdown > a {
        display: block;
        width: 100%;
        padding: 12px 8px;
        font-size: 1.05rem;
        font-weight: 700;
        line-height: 1.3;
        box-sizing: border-box;
    }

    .nav-links > li > a.active,
    .nav-links li.dropdown > a.active {
        border-bottom: none;
        padding-bottom: 12px;
        color: var(--primary-dark-brown);
        background: rgba(243, 193, 76, 0.18);
        border-radius: var(--radius-pill);
    }

    .nav-links li.downDisabled > a {
        opacity: 0.45;
    }

    .nav-links li.disabled::after,
    .nav-links li.downDisabled::after {
        bottom: auto;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) scale(0.9);
        margin-top: 6px;
    }

    .dropdown {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .dropdown::after {
        display: none;
    }

    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        margin: 4px auto 8px;
        padding: 10px 14px;
        box-shadow: none;
        border: 1px dashed rgba(166, 93, 51, 0.28);
        background: rgba(255, 252, 245, 0.6);
        min-width: 0;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
    }

    .dropdown:hover .dropdown-menu {
        transform: none;
    }

    .dropdown-menu li {
        width: 100%;
    }

    .dropdown-menu a {
        padding: 9px 6px;
        font-size: 0.92rem !important;
        font-weight: 500 !important;
        white-space: normal;
        line-height: 1.45;
        text-align: center;
        border-bottom: none;
    }

    .dropdown-menu a.active {
        padding-bottom: 9px;
        background: rgba(243, 193, 76, 0.22);
        border-radius: 8px;
    }

    .dropdown-menu li.downDisabled a {
        opacity: 0.45;
    }
}

/* --- iPad / 平板（含 iPad Pro 直向與一般 10" 機型）--- */
@media (max-width: 1024px) {
    header {
        padding: 0 5%;
    }

    .navbar {
        padding: 8px 20px;
    }

    .nav-links a {
        font-size: 1.05rem;
    }

    .container {
        padding: 0 20px;
    }

    .main-container {
        width: 92%;
        margin: 6% auto;
    }

    .page-title {
        margin: 48px auto 16px;
        padding-bottom: 14px;
    }

    .page-title h2 {
        font-size: clamp(1.85rem, 5vw, 2.6rem);
    }

    .portfolio-table {
        border-spacing: 16px;
    }

    .section-title {
        padding: 60px 0 36px;
        font-size: 1.65rem;
    }

    .portfolio-grid {
        padding: 0 5% 60px;
        gap: 28px;
    }

    .portfolio-grid-web {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    /* 首頁英雄區：平板直向不再擠雙欄 */
    .hero-section {
        flex-direction: column-reverse;
        width: 100%;
        margin: 6% 0 8%;
        text-align: center;
        align-items: center;
        gap: 28px;
        padding-top: 2%;
    }

    .hero-text {
        width: min(520px, 92%);
        text-align: center;
    }

    .hero-describe {
        margin-right: 0 !important;
        text-align: center;
    }

    .hero-describe h2 {
        margin-right: 0 !important;
    }

    .hero-text h1 {
        text-align: center;
        margin-bottom: 20px;
        font-size: clamp(2rem, 5.5vw, 2.75rem);
    }

    .hero-img {
        max-width: min(340px, 88vw);
    }

    .hero-img img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }

    /* graphic / web 等以 table 排版的頁面：改為單欄堆疊（Graphic 馬賽克除外，見 .graphic-table--mosaic） */
    main.main-container > table:not(.graphic-table) {
        width: 100% !important;
        display: block;
    }

    main.main-container > table:not(.graphic-table) tbody,
    main.main-container > table:not(.graphic-table) thead {
        display: block;
        width: 100%;
    }

    main.main-container > table:not(.graphic-table) tr {
        display: block;
        width: 100%;
    }

    main.main-container > table:not(.graphic-table) td,
    main.main-container > table:not(.graphic-table) th {
        display: block;
        width: 100% !important;
        height: auto !important;
        min-height: 0;
        box-sizing: border-box;
    }

    /* 覆寫 web/ 內嵌樣式中的 border-spacing */
    main.main-container table.web-portfolio-table {
        border-spacing: 0 !important;
        border-collapse: separate;
        width: 100% !important;
        display: block;
    }

    main.main-container table.web-portfolio-table tbody,
    main.main-container table.web-portfolio-table tr {
        display: block;
        width: 100%;
    }

    main.main-container table.web-portfolio-table td {
        display: block;
        width: 100% !important;
        margin-bottom: 24px;
    }

    main.main-container table.web-portfolio-table td:empty {
        display: none;
        margin: 0;
    }

    /* 內頁區塊小標（Graphic、About 等） */
    .box.box1 h3 {
        padding-left: clamp(16px, 4vw, 50px);
        font-size: clamp(1.65rem, 4.2vw, 2.35rem);
    }
}

@media (max-width: 768px) {
    .navbar .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .portfolio-grid-web {
        grid-template-columns: 1fr;
    }

    .hero-section {
        margin: 10% 0;
    }

    .hero-text h1 {
        font-size: clamp(1.85rem, 8vw, 2.5rem);
    }

    .hero-content h1 {
        font-size: 3rem;
    }
}

/* ============================================================
   About 頁面共用元件（努比使用說明書／成長時間軸共用，原 about-guide.css）
   用於 about/noopy-guide.html、about/timeline.html
   ============================================================ */

html.about-guide-page {
    font-size: 16px;
}

.about-guide {
    max-width: 960px;
    margin: 0 auto 80px;
}

.about-guide p,
.about-guide li,
.about-guide blockquote,
.about-guide .about-callout p {
    font-size: 1rem;
    line-height: 1.75;
    text-align: left;
}

.about-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 auto 40px;
    max-width: 960px;
}

.about-subnav a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    border: 2px solid #eee;
    color: var(--primary-dark-brown);
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.about-subnav a:hover {
    border-color: var(--primary-yellow);
}

.about-subnav a.is-active {
    background: var(--light-yellow);
    border-color: var(--primary-yellow);
}

.guide-section {
    margin-bottom: 56px;
}

.guide-section:last-child {
    margin-bottom: 0;
}

/* Notion 黃底區塊標 */
.guide-pill-label {
    display: table;
    margin: 0 auto 28px;
    padding: 6px 18px;
    background: #fbc827;
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.06em;
    border-radius: 4px;
}

/* Notion columns */
.guide-columns {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.guide-columns--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guide-columns--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.guide-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

/* 開場：左 Spotify、右圖＋提示 */
.guide-hero__media {
    aspect-ratio: 554 / 470;
}

.guide-hero__media iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4px;
}

.about-guide .guide-hero__note {
    text-align: right;
    color: var(--primary-brown);
    font-weight: 700;
    margin: 0;
}

#guide-hero .guide-media img {
    aspect-ratio: 554 / 470;
    object-fit: cover;
}

.guide-media {
    margin: 0;
}

.guide-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.guide-media--full {
    margin-bottom: 48px;
}

/* Notion callout（黃底） */
.about-callout {
    background: #fffbe8;
    border-radius: 4px;
    padding: 18px 20px;
    box-shadow: inset 0 0 0 1px rgba(243, 193, 76, 0.35);
}

.about-callout__icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    margin-bottom: 10px;
    opacity: 0.85;
}

.about-callout__tag {
    display: block;
    margin-bottom: 10px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary-dark-brown);
    text-align: left;
}

.about-callout__tag--highlight {
    color: var(--primary-brown);
    text-decoration: underline;
    text-decoration-color: var(--primary-yellow);
    text-underline-offset: 3px;
}

.about-callout p {
    margin: 0 0 10px;
}

.about-callout p:last-child {
    margin-bottom: 0;
}

.about-callout a {
    color: var(--primary-brown);
    font-weight: 700;
}

.about-callout .guide-media {
    margin-top: 12px;
}

/* 圖下方說明（Notion quote） */
.guide-quote {
    margin: 0;
    padding: 0 0 0 14px;
    border-left: 3px solid #ddd;
    color: var(--dark-gray);
    font-size: 0.95rem;
}

.guide-quote--caption {
    border-left-color: var(--primary-yellow);
    color: var(--black);
}

/* 近期目標：全寬警告 callout */
.guide-warning {
    background: #fffbe8;
    border-radius: 4px;
    padding: 18px 20px;
    margin-bottom: 24px;
    box-shadow: inset 0 0 0 1px rgba(243, 193, 76, 0.35);
    text-align: left;
}

.guide-warning strong {
    color: var(--primary-dark-brown);
    text-decoration: underline;
    text-decoration-color: var(--primary-yellow);
}

.guide-fruit-lead {
    margin: 0 0 20px;
    padding: 0 0 0 14px;
    border-left: 3px solid #ddd;
    color: var(--black);
}

.guide-fruit-placeholder {
    background: var(--bg-light);
    border: 2px dashed #ddd;
    border-radius: var(--radius-card);
    padding: 40px 24px;
    text-align: center;
    color: var(--dark-gray);
}

.guide-fruit-placeholder strong {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-dark-brown);
    font-size: 1.1rem;
}

/* 果實：能力值分組（每組 3 張） */
.guide-fruit-group {
    margin-bottom: 40px;
}

.guide-fruit-group:last-of-type {
    margin-bottom: 0;
}

.guide-fruit-group__title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-yellow);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--primary-dark-brown);
    text-align: left;
}

.guide-fruit-group__count {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--dark-gray);
}

/* 果實：能力值卡片（Notion gallery 風） */
.guide-fruit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.guide-fruit-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-card);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.guide-fruit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.guide-fruit-card__cover {
    display: block;
    margin: 0;
    background: var(--bg-light);
}

.guide-fruit-card__cover img {
    width: 100%;
    height: auto;
    display: block;
}

.guide-fruit-card__body {
    padding: 16px 18px 18px;
}

.guide-fruit-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.guide-fruit-card__name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-brown);
}

.guide-fruit-card__meta {
    font-size: 0.85rem;
    color: var(--dark-gray);
}

.guide-fruit-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.guide-fruit-tag {
    font-size: 0.8rem;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--bg-light);
    color: var(--dark-gray);
}

.guide-fruit-tag--ing {
    background: #ffe0a0;
    color: #a06400;
    font-weight: 700;
}

.guide-fruit-tag--nav {
    background: rgba(243, 193, 76, 0.25);
    color: var(--primary-dark-brown);
}

.guide-fruit-tag--field {
    background: rgba(166, 93, 51, 0.12);
    color: var(--primary-brown);
}

.guide-fruit-card__body p {
    margin: 0;
    font-size: 0.95rem;
}

.guide-fruit-card__body a {
    color: var(--primary-brown);
    font-weight: 600;
}

.guide-fruit-more {
    margin-top: 20px;
    text-align: center;
    font-size: 0.95rem;
}

.guide-intro-lead {
    max-width: 72ch;
    margin: 0 auto 40px;
    padding: 18px 22px;
    background: var(--bg-light);
    border-radius: var(--radius-card);
    border-left: 4px solid var(--primary-yellow);
    text-align: left;
}

@media (max-width: 768px) {

    .guide-columns--2,
    .guide-columns--3 {
        grid-template-columns: 1fr;
    }

    .guide-fruit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .guide-fruit-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   About 頁面共用元件 II（MBTI 比例條／技能搜尋，原 about/index.html 手冊）
   用於 about/noopy-guide.html
   ============================================================ */

.conclusion-text {
    margin-bottom: 16px;
}

.footer-note {
    color: var(--dark-gray);
    text-align: center;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #ddd;
}

/* MBTI 雙色比例條（藍＝功能／工作，黃＝情感／生活） */
.mbti-ratio-chart {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.mbti-ratio-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-card);
    padding: 22px 22px 18px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mbti-ratio-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.mbti-ratio-row {
    display: grid;
    grid-template-columns: 1fr;
}

.mbti-ratio-item__analysis {
    margin: 14px 0 0;
    padding: 0;
    color: var(--black);
}

/* 綜合小結：黃色左邊框區塊 */
.mbti-ratio-item__analysis-summary {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(255, 244, 220, 0.8);
    border-left: 4px solid var(--primary-yellow);
    border-radius: 8px;
    color: var(--primary-dark-brown);
    font-weight: 700;
}

/* E/I S/N 等內文小標籤 */
.mbti-ratio-item__analysis-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    margin-right: 10px;
    margin-bottom: 6px;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
    min-width: 88px;
    text-align: center;
}

.mbti-ratio-item__analysis-badge--left {
    background: rgba(61, 110, 184, 0.12);
    color: #3d6eb8;
}

.mbti-ratio-item__analysis-badge--right {
    background: rgba(122, 86, 58, 0.12);
    color: var(--primary-brown);
}

.mbti-ratio-item__analysis strong {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    color: var(--primary-dark-brown);
}

.mbti-ratio-item__analysis .highlight {
    color: var(--primary-brown);
    font-weight: 700;
}

.mbti-ratio-row__label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--dark-gray);
    line-height: 1.3;
}

.mbti-ratio-row__label--left {
    text-align: right;
    color: #3d6eb8;
}

.mbti-ratio-row__label--right {
    text-align: left;
    color: var(--primary-brown);
}

.mbti-ratio-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    position: relative;
}

.mbti-ratio-bar__work,
.mbti-ratio-bar__life {
    display: flex;
    align-items: center;
    min-width: 0;
    position: relative;
}

.mbti-ratio-bar__work {
    justify-content: flex-start;
    background: linear-gradient(90deg, #56ccf2, #2f80ed);
}

.mbti-ratio-bar__life {
    justify-content: flex-end;
    background: linear-gradient(90deg, var(--primary-yellow), #f5c96a);
}

.mbti-ratio-bar__pct {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
}

.mbti-ratio-bar__work .mbti-ratio-bar__pct {
    margin-left: 14px;
}

.mbti-ratio-bar__life .mbti-ratio-bar__pct {
    margin-right: 14px;
}

/* 交界標籤：--j 為該列交界百分比，由 inline style 設定 */
.mbti-badge {
    position: absolute;
    top: 50%;
    left: var(--j);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    pointer-events: none;
}

/* 左標：從交界往左推（自身寬度 + 5mm） */
.mbti-badge--left {
    transform: translateY(-50%) translateX(calc(-100% - 5mm));
    background: rgba(47, 128, 237, 0.18);
    color: #fff;
}

/* 右標：從交界往右推 5mm */
.mbti-badge--right {
    transform: translateY(-50%) translateX(5mm);
    background: rgba(0, 0, 0, 0.18);
    color: #fff;
}

.mbti-ratio-chart__note {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid #eee;
    color: var(--dark-gray);
    text-align: center;
}

@media (max-width: 768px) {
    .mbti-ratio-item__analysis {
        padding: 0;
    }
}

/* ── 技能搜尋 ── */
.search-box {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.search-box input {
    width: 100%;
    max-width: 400px;
    height: 42px;
    border: 2px solid var(--primary-yellow);
    border-radius: var(--radius-pill);
    padding: 0 20px;
    font-size: 1rem;
    font-family: "Noto Serif TC", serif;
    color: var(--black);
    outline: none;
    transition: border-color 0.2s;
    background: #fff;
}

.search-box input:focus {
    border-color: var(--primary-brown);
}

.search-box button {
    height: 42px;
    padding: 0 24px;
    border: none;
    border-radius: var(--radius-pill);
    background: var(--primary-brown);
    color: #fff;
    font-size: 0.95rem;
    font-family: "Noto Serif TC", serif;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.search-box button:hover {
    background: var(--primary-dark-brown);
}

.search-result-hint {
    text-align: center;
    font-size: 0.9rem;
    color: var(--dark-gray);
    min-height: 1.4em;
    margin-bottom: 24px;
}

/* ── 技能 Card Grid ── */
.skill-section-label {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--primary-brown);
    text-transform: uppercase;
    margin: 48px 0 16px;
    padding: 5px 14px;
    background: var(--light-yellow);
    border-radius: var(--radius-pill);
    display: inline-block;
}

.skill-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 8px;
}

.skill-row {
    background: #fff;
    border: 1px solid #eee;
    border-radius: var(--radius-card);
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.skill-row:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.skill-row.is-match {
    background: #fffbe8;
    border-color: var(--primary-yellow);
}

.skill-row.is-hidden {
    display: none;
}

.skill-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
    gap: 8px;
}

.skill-name {
    font-weight: 700;
    font-size: 1.2rem;
    color: var(--primary-brown);
    line-height: 1.3;
    white-space: nowrap;
}

.skill-bar {
    flex: 1;
    height: 10px;
    background: #eee;
    border-radius: var(--radius-pill);
    overflow: hidden;
    margin: 8px 0 10px;
}

.skill-bar__fill {
    height: 100%;
    width: var(--level, 0%);
    background: linear-gradient(90deg, var(--primary-yellow), #e8a030);
    border-radius: 4px;
    transition: width 0.6s ease;
}

.skill-tools {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.skill-tool-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.skill-tool-name {
    flex: 0 0 160px;
    font-size: 1rem;
    color: var(--dark-gray);
    white-space: nowrap;
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.skill-tag {
    background: transparent;
    color: var(--dark-gray);
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0;
    border-radius: 0;
}

.skill-tag::before {
    content: '# ';
    color: var(--primary-yellow);
    font-weight: 700;
}

.badge--ing {
    background: #ffe0a0;
    color: #a06400;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    vertical-align: middle;
}

.no-result {
    text-align: center;
    padding: 24px 0;
    color: var(--dark-gray);
    font-size: 0.92rem;
    display: none;
}

@media (max-width: 768px) {
    .skill-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .skill-grid {
        grid-template-columns: 1fr;
    }

    .search-box {
        flex-direction: column;
    }

    .search-box input {
        max-width: 100%;
    }

    .search-box button {
        width: 100%;
        max-width: 100%;
    }
}