sechskies/tablet.css

/* iPad／平板 RWD — max-width ≤1180px（含 iPad 直／橫與小平板／小筆電） */

@media (max-width: 1180px) {

    html:has(body.map-page) {
        scroll-padding-top: clamp(52px, 12vw, 76px);
    }

    nav,
    .portal-nav {
        padding-left: clamp(14px, 3.5vw, 32px) !important;
        padding-right: clamp(14px, 3.5vw, 32px) !important;
        row-gap: 12px;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .map-page .portal-nav {
        padding-left: clamp(14px, 3.5vw, 32px) !important;
        padding-right: clamp(14px, 3.5vw, 32px) !important;
    }

    .portal-nav .logo {
        width: min(240px, 38vw);
        max-width: 100%;
        flex-shrink: 0;
    }

    .portal-nav>ul {
        flex-wrap: wrap;
        gap: clamp(12px, 2vw, 18px);
        justify-content: flex-end;
        min-width: 0;
        flex: 1 1 280px;
    }

    .portal-nav>ul>li>a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    nav ul {
        gap: clamp(12px, 2vw, 20px);
    }

    header {
        background-size: cover;
        background-position: center center;
    }

    .hero h1 {
        font-size: clamp(1.75rem, 4.5vw, 2.35rem);
    }

    .hero p {
        font-size: clamp(1rem, 2.8vw, 1.15rem);
    }

    .container,
    .content-container {
        padding-left: clamp(14px, 3vw, 22px);
        padding-right: clamp(14px, 3vw, 22px);
    }

    section {
        padding: clamp(26px, 5vw, 36px) clamp(16px, 4vw, 28px) !important;
    }

    .story-grid {
        gap: clamp(18px, 4vw, 28px);
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    }

    .card {
        padding: clamp(18px, 4vw, 26px);
    }

    table {
        font-size: 0.92rem;
    }

    table th,
    table td {
        padding: clamp(10px, 2vw, 14px);
    }

    /* 首頁／跨時空軌跡：鑽石主軸在平板改左側縱線（對齊舊 ≤900px 邏輯） */
    .merged-storyline::before {
        left: 18px;
        transform: none;
    }

    .merged-storyline .story-node {
        width: calc(100% - 44px);
        margin-left: 44px;
        margin-right: 0;
    }

    .merged-storyline .story-node:nth-of-type(odd),
    .merged-storyline .story-node:nth-of-type(even) {
        margin-left: 44px;
        margin-right: 0;
    }

    .merged-storyline .story-node::before {
        left: -39px;
        right: auto;
    }

    .merged-storyline .story-node::after {
        left: 14px;
        right: auto;
        transform: rotate(-8deg);
    }

    /* 紀實長卷／pillar 段落 */
    .chronicle-reader,
    .chronicle-pager {
        max-width: min(920px, 100%);
    }

    .variety-block {
        padding: clamp(18px, 4vw, 22px);
    }

    .map-archive-header .main-title,
    .concert-archive-header .main-title {
        letter-spacing: clamp(3px, 1vw, 6px);
    }

    .map-layout {
        grid-template-columns: minmax(280px, 42%) minmax(0, 1fr);
        gap: clamp(16px, 3vw, 22px);
    }

    .map-my-maps-frame {
        height: min(52vh, 520px);
        min-height: 360px;
    }

    .map-embed-all {
        gap: 12px;
    }

    /* 重逢區兩張演唱會大卡之間留白 */
    #stage-now {
        gap: clamp(36px, 5vw, 50px);
    }

    /* 演唱會卡片內距 */
    .con-1,
    .con-2,
    .con-3,
    .con-4,
    #yellownote-stage {
        padding: clamp(32px, 5vw, 44px) clamp(22px, 5vw, 48px) !important;
    }

    .title {
        margin: clamp(24px, 5vw, 40px) !important;
        font-size: clamp(1.15rem, 2.8vw, 1.45rem);
    }

    .concert-container {
        padding-left: clamp(12px, 3vw, 20px);
        padding-right: clamp(12px, 3vw, 20px);
    }

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

    .concert-page .search-input:focus {
        width: min(100%, 440px);
    }

    .concert-page img[src*="img/concert/"] {
        width: min(560px, 88%);
        max-width: 100%;
    }

    /* 歌詞頁 body class（tablet.css 需載於該頁 inline style 之後才可蓋過行內 :root） */
    body.nanum-pen-script-regular {
        margin: clamp(24px, 5vw, 56px) !important;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    html:has(body.nanum-pen-script-regular) {
        font-size: 118.75% !important;
    }

    body.nanum-pen-script-regular table {
        border-spacing: clamp(12px, 3vw, 24px) !important;
        max-width: 100%;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.nanum-pen-script-regular .main-left {
        width: 100% !important;
        display: block;
        box-sizing: border-box;
    }

    body.nanum-pen-script-regular p {
        font-size: 1.2rem !important;
    }

    body.nanum-pen-script-regular h1 {
        font-size: clamp(1.6rem, 5vw, 2.1rem) !important;
    }
}