html {
    overflow-x: clip;
}
body {
    font-family: "Noto Sans TC", system-ui, sans-serif;
    overflow-x: clip;
}

/* Book cover hover lift — triggered when wrapping .group is hovered */
.cover {
    transition:
        transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
    cursor: pointer;
}
.group:hover .cover {
    transform: translateY(-10px);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.18),
        0 6px 12px rgba(0, 0, 0, 0.1);
}
.group:active .cover {
    transform: translateY(-4px);
    transition-duration: 0.12s;
}
/* Title turns brand color on hover */
.group:hover .cover + p,
.group:hover .cover ~ p {
    color: #0016a2;
}
/* Pill "學報介紹" inverts on hover */
.group:hover .pill-soft {
    background-color: #0016a2;
    color: #ffffff;
}
.pill-soft {
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/* Mobile menu — full-screen overlay, fades in */
.mobile-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease-out,
        visibility 0.25s;
}
.mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Journal intro modal */
.journal-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.25s ease-out,
        visibility 0.25s;
}
.journal-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.journal-modal-panel {
    transform: scale(0.96) translateY(8px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.journal-modal.is-open .journal-modal-panel {
    transform: scale(1) translateY(0);
}

/* Hero — banner image renders at its native aspect ratio (1440×420 baked PNG) */
.hero-img {
    display: block;
    width: 100%;
    max-width: 1440px;
    height: auto;
    margin-inline: auto;
    aspect-ratio: 1440 / 420; /* reserves space while loading */
}

/* Book cover placeholders — distinct gradients per series */
.cover {
    background: linear-gradient(160deg, #cdd9ee 0%, #93b1da 100%);
    position: relative;
}
.cover::after {
    content: attr(data-label);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(28, 64, 131, 0.45);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-align: center;
    padding: 8px;
}
.cover.c-2 {
    background: linear-gradient(160deg, #fbf2d8 0%, #e8c982 100%);
}
.cover.c-3 {
    background: linear-gradient(160deg, #e9d5ff 0%, #a78bfa 100%);
}
.cover.c-4 {
    background: linear-gradient(160deg, #d1fae5 0%, #34d399 100%);
}
.cover.c-5 {
    background: linear-gradient(160deg, #fee2e2 0%, #f87171 100%);
}
.cover.c-6 {
    background: linear-gradient(160deg, #fff7ed 0%, #fdba74 100%);
}
.cover.c-7 {
    background: linear-gradient(160deg, #e0f2fe 0%, #38bdf8 100%);
}
.cover.c-8 {
    background: linear-gradient(160deg, #fef9c3 0%, #facc15 100%);
}
.cover.c-9 {
    background: linear-gradient(160deg, #fce7f3 0%, #f472b6 100%);
}
.cover.c-10 {
    background: linear-gradient(160deg, #ccfbf1 0%, #2dd4bf 100%);
}

/* Native <select> 完整 reset（同 advanced-search / search-results 規格）：
       iOS Safari 對 <select> 有 native chrome 會覆蓋 h-full，要全部一起重置 */
.as-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    display: block;
    height: 100%;
    font-size: inherit;
    line-height: inherit;
}

/* <input type="search" size="1"> 完整 reset（iOS Safari 用）：
       重置所有 native search chrome（border / border-radius / background / margin）
       高度由 Tailwind class 顯式指定 */
input[type="search"] {
    -webkit-appearance: none;
    min-width: 0;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    box-sizing: border-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}