/* ============================================================
   Discover Sub-Pages (Widget, Theme, Icon, Wallpaper, Dynamic Island)
   Responsive: PC (web) + Mobile (h5)
   ============================================================ */

/* ============================================================
   Sub-page Hero Banner
   Background image shown in full (not cropped).
   Hero inner content is centered over the image.
   category-tabs and discover-content sit below the hero.
   ============================================================ */

/* Breadcrumb: transparent, layered above hero bg image */
.discover-breadcrumb {
    background: transparent;
    background-color: transparent;
}

.discover-hero {
    position: relative;
    width: 100%;
    text-align: center;
}

.discover-hero-bg {
    position: relative;
    width: 100%;
    z-index: 0;
}

.discover-hero-bg img {
    width: 100%;
    height: auto;
    display: block;
}

/*
 * PC only: extend the hero bg image upward behind the fixed navbar.
 *
 * Strategy:
 * 1. padding-top on .discover-hero creates space above the content area.
 * 2. margin-top: -N pulls the section up so the padding area sits behind
 *    the fixed navbar. The bottom edge stays put because total height
 *    increased by N (padding) and top moved up by N (margin): net zero.
 * 3. transform: translateY(-N) on the bg image visually shifts it into
 *    the padding area without affecting layout (transform is paint-only).
 * 4. overflow:hidden on .discover-hero clips the translated image so it
 *    doesn't visually spill above the section box.
 * 5. hero-inner (absolute, top:0) naturally sits at the padding-box top
 *    which is now behind the navbar, so we push it down by N.
 *    Same for the breadcrumb.
 */
.is-pc .discover-hero {
    margin-top: calc(-1 * var(--navbar-height));
    padding-top: var(--navbar-height);
    overflow: hidden;
}

.is-pc .discover-hero-bg img {
    transform: translateY(calc(-1 * var(--navbar-height)));
}

.is-pc .discover-hero-inner {
    top: var(--navbar-height);
}

.is-pc .discover-hero .discover-breadcrumb {
    top: var(--navbar-height);
}

.discover-hero-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    max-width: none;
    margin: 0;
    padding: 0 2.083vw;
    /* Reserve space at bottom for tabs/content to overlap into hero */
    padding-bottom: 6.2vw;
}

@media (max-width: 1240px) {
    .discover-hero-inner {
        padding: 0 2.083vw;
        padding-bottom: 2vw;
    }
}

/* Title wrapper: title text + icon aligned to right of title */
.discover-hero-title-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.833vw;
}

.discover-hero-title {
    font-family: var(--font-title);
    font-size: 2.5vw;
    font-weight: 700;
    color: var(--color-text-dark);
    letter-spacing: -0.026vw;
    margin: 0;
}

.discover-hero-title-icon {
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-50%, -70%);
    height: 2.083vw;
    width: auto;
    display: block;
}

.discover-hero-desc {
    font-family: inherit;
    font-size: 0.781vw;
    font-weight: 400;
    line-height: 1.6;
    max-width: 52vw;
    margin-bottom: 1.3vw;
    /* Fix: lock height to 1 line so title-wrap stays in place;
       extra text overflows visibly downward, pushing elements below hero */
    height: 1.6em; /* = 1 line (matches line-height) */
    overflow: visible;
}

.discover-hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0;
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.discover-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    text-decoration: none;
    margin: 0 -0.5vw;
}

.discover-hero-btn:hover {
    opacity: 0.85;
}

.discover-hero-btn img {
    width: 80%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* H5: hide hero download buttons (but not the sticky bar ones) */
.is-h5 .discover-hero .discover-hero-buttons {
    display: none;
}

/* H5: hide hero download buttons on article pages (faq/blog) */
.is-h5 .ap-hero .discover-hero-buttons {
    display: none;
}

/* ============================================================
   Category Tabs (Widget sub-tabs, Dynamic Island sub-tabs)
   ============================================================ */
.category-tabs {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.042vw 0;
    border-bottom: 1px solid #eee;
    max-width: 56.25vw;
    width: 100%;
    margin: -3.646vw auto 0;  /* pull up into hero; buttons→tabs = 120-70 = 50px */
}

/* Inner wrappers: on PC they're transparent (display:contents makes them
   invisible to the flex layout so tabs behave as direct children).
   On H5 they become real containers — see .is-h5 overrides. */
.category-tabs-clip {
    display: contents;
}

.category-tabs-inner {
    display: contents;
}

@media (max-width: 1240px) {
    .category-tabs {
        max-width: none;
        width: calc(100% - 4.167vw);
    }
}

.category-tab {
    font-family: var(--font-family);
    font-size: 0.781vw;
    font-weight: 500;
    color: #000000;
    text-decoration: none;
    padding: 0.208vw 0;
    position: relative;
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.category-tab:focus,
.category-tab:focus-visible,
.category-tab:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.category-tab:hover {
    color: #008cff;
    text-decoration: none;
}

a.category-tab,
a.category-tab:visited,
a.category-tab:hover,
a.category-tab:active,
a.category-tab:focus {
    text-decoration: none;
}

/* Prevent visited links from showing blue on Android back navigation (bfcache) */
a.category-tab:visited {
    color: #000000;
}

a.category-tab.active,
a.category-tab.active:visited {
    color: #008cff;
}

.is-pc a.category-tab:visited {
    color: #000000;
}

.is-pc a.category-tab.active,
.is-pc a.category-tab.active:visited {
    color: #fff;
}

.category-tab.active {
    color: #008cff;
    font-weight: 700;
}

.category-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: #008cff;
    border-radius: 1px;
}

/* ============================================================
   Category Tabs - Web (PC) sticky pill style
   ============================================================ */
.is-pc .category-tabs {
    position: relative;
    z-index: 99;
    background: #008CFF0D;
    height: 3.646vw;
    min-width: 68vw;
    padding: 0;
    border-bottom: none;
    justify-content: center;
    gap: 3.125vw;
    border-radius: 1.302vw;
    margin-top: -8.5vw;  /* pull up into hero; buttons→tabs = 120-70 = 50px */
    margin-bottom: 0;
}

.is-pc .category-tab {
    padding: 0.365vw 0.938vw;
    border-radius: 5.208vw;
    font-size: 0.833vw;
    outline: none;
    transition: color 0.2s ease, background 0.2s ease;
}

.is-pc .category-tab {
    color: #000000;
}

.is-pc .category-tab:hover {
    color: #000000;
    background: rgba(0, 140, 255, 0.08);
}

.is-pc .category-tab.active {
    background: #008cff;
    color: #fff;
    font-weight: 600;
}

.is-pc .category-tab.active::after {
    display: none;
}

/* With tabs: tabs→content = 40px */
.is-pc .discover-content {
    padding-top: 0;
}

.is-pc .category-tabs + .discover-content {
    margin-top: 2.083vw;
}

/* No tabs: hero-buttons → content = 70px */
.discover-content {
    position: relative;
    z-index: 2;
    max-width: 68vw;
    width: 100%;
    margin: -8.5vw auto 0;  /* pull up into hero; buttons→content = 120-50 = 70px */
    padding: 0 0 3.333vw;
}

/* With tabs: tabs → content = 40px */
.category-tabs + .discover-content,
.category-tabs + .category-tabs-placeholder + .discover-content {
    margin-top: 2.083vw;
    padding-top: 0;
}

@media (max-width: 1240px) {
    .discover-content {
        max-width: none;
        width: calc(100% - 4.167vw);
    }
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.042vw;
}

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

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

.content-grid.grid-5 {
    grid-template-columns: repeat(5, 1fr);
}

.content-grid.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-item {
    border-radius: 0.833vw;
    overflow: hidden;
    /* background: #f5f5f5; */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.grid-item:hover {
    transform: translateY(-0.208vw);
    box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.1);
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    /* object-fit: cover; */
}

.grid-item-placeholder {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: inherit;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Ensure <picture> inside grid placeholders doesn't break layout */
.grid-item-placeholder picture {
    display: contents;
}

/* Theme grid items */
.grid-item.theme-item {
    border-radius: 1.042vw;
}

.grid-item.theme-item .grid-item-placeholder {
    aspect-ratio: 368 / 754;
}

.is-h5 .grid-item.theme-item .grid-item-placeholder {
    border: none;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
}

.grid-item.theme-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grid-item-name {
    font-family: var(--font-family);
    font-size: 0.677vw;
    color: #333;
    text-align: center;
    padding: 0.417vw 0.313vw 0;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-item-wrap {
    min-width: 0;
}

/* Icon grid items - square */
.grid-item.icon-item {
    border-radius: 15%;
    aspect-ratio: 1 / 1;
    /* border: 1px solid rgba(0, 0, 0, 0.06); */
}

.grid-item.icon-item .grid-item-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grid-item.icon-item img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

/* Wallpaper grid items */
.grid-item.wallpaper-item {
    border-radius: 0.625vw;
    margin-bottom: 1.5vw
}

.grid-item.wallpaper-item .grid-item-placeholder {
    aspect-ratio: 349 / 753;
    border-radius: 1.1vw;
}

.is-h5 .grid-item.wallpaper-item .grid-item-placeholder {
    border-radius: 2vw;
    border: none;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    outline-offset: -1px;
}

.grid-item.wallpaper-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dynamic Island items */
.grid-item.island-item {
    border-radius: 0.833vw;
    background: #f8f8f8;
}

.grid-item.island-item img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background-color: #fff;
}

/* Fun Gameplay items: preserve original 251×171 ratio */
.grid-item.fun-item {
    background: transparent;
}

.grid-item.fun-item .grid-item-placeholder {
    aspect-ratio: 251 / 171;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: inherit;
}

.grid-item.fun-item img {
    width: 100%;
    aspect-ratio: 251 / 171;
    object-fit: cover;
    margin: auto;
    display: block;
}

/* H5: match the larger border-radius so border isn't clipped at corners */
.is-h5 .grid-item.fun-item .grid-item-placeholder {
    border-radius: inherit;
}

.is-h5 .grid-item.fun-item img {
    border-radius: inherit;
}

/* Category content panels */
.category-panel {
    display: none;
}

.category-panel.active {
    display: block;
}

/* ============================================================
   Dynamic Island: Section subtitle for web layout
   ============================================================ */
.island-section-title {
    font-family: inherit;
    font-size: 1.2vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 1.042vw;
    margin-top: 0;
    text-align: left !important;
}

.island-section + .island-section {
    margin-top: 0.5vw;
}

/* Load More Button — removed from all discover pages */

/* ============================================================
   Bottom Download Bar (H5 only - sticky)
   ============================================================ */
.discover-download {
    text-align: center;
    padding: 2.5vw 0 3.333vw;
    background: #F7F8FA;
}

.discover-download-inner {
    max-width: 56.25vw;
    width: 100%;
    margin: 0 auto;
}

.discover-download .discover-hero-buttons {
    justify-content: center;
}

/* H5 sticky download bar */
.is-h5 .discover-download {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    background: none;
    box-shadow: none;
    z-index: 998;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    will-change: transform;
    visibility: visible;
}

.is-h5 .discover-download .discover-download-inner {
    position: relative;
    width: 100%;
}

.is-h5 .discover-download .discover-download-inner {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
}

.is-h5 .discover-download .discover-download-bg {
    display: none;
}

.is-h5 .discover-download .discover-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4vw 0;
    margin-bottom: 0;
}

.is-h5 .discover-download .discover-hero-btn {
    height: 56%;
}

.is-h5 .discover-download .discover-hero-btn img {
    height: auto;
    width: 90%;
}

.is-h5 .discover-download.bar-hidden {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* Show only one button per platform on h5 */
.is-h5 .discover-download .download-ios,
.is-h5 .discover-download .download-android {
    display: none;
}

.is-h5 .discover-download .download-ios.platform-show,
.is-h5 .discover-download .download-android.platform-show {
    display: inline-flex;
}

/* PC: hide entire download section */
.is-pc .discover-download {
    display: none;
}

/* H5 bottom padding to account for sticky bar */
.is-h5 .discover-content {
    padding-bottom: 21.333vw;
}

/* ============================================================
   H5 Mobile-specific layout adjustments
   ============================================================ */
/* H5: hero height driven by bg image, no extra padding needed */

.is-h5 .discover-hero-inner {
    padding: 0 4.267vw;
    /* Switch to bottom-anchored layout so each child has a fixed position */
    justify-content: initial;
    height: auto;
    top: auto;
    bottom: 0;
    padding-bottom: 18.667vw;
}

.is-h5 .discover-hero-title-wrap {
    margin-bottom: 1.6vw;
}

.is-h5 .discover-hero-title {
    font-size: 7.467vw;
}

.is-h5 .discover-hero-title-icon {
    height: 7.467vw;
}

.is-h5 .discover-hero-desc {
    font-size: 3.467vw;
    padding: 0 4.267vw;
    margin-bottom: 0;
    white-space: normal;
    word-break: break-word;
    color: rgba(41, 41, 41, 0.5);
}

.is-h5 .category-tabs {
    width: 100%;
    padding: 3vw 4.267vw;
    margin-top: -12.667vw;  /* default pull up; JS will adjust based on desc height */
    margin-left: 0;
    margin-right: 0;
    background: transparent;
    transition: top 0.8s ease, margin-top 0.3s ease;
    border-bottom: 1px solid #eee;
    position: relative;
    display: block;
    box-sizing: border-box;
}

/* Inner container: uses CSS transform for horizontal panning.
   overflow:hidden clips content that extends beyond the container
   but does NOT create a scroll container, so the browser can never
   auto-scroll it. Touch-based sliding is handled by JS. */
.is-h5 .category-tabs-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5.333vw;
    width: max-content;
    box-sizing: border-box;
    will-change: transform;
}

/* Clip wrapper: sits between outer padding and inner sliding content */
.is-h5 .category-tabs-clip {
    display: block;
    overflow: hidden;
    width: 100%;
}

/* H5: sticky category-tabs when scrolled past */
.is-h5 .category-tabs.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 0;
    padding: 2vw 4.267vw;
    background: #fff;
    z-index: 999;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* When navbar is visible, push tabs below it */
.is-h5 .category-tabs.sticky.below-navbar {
    top: 12vw;
    box-shadow: none;
}

/* Placeholder to prevent layout jump when tabs become fixed */
.is-h5 .category-tabs-placeholder {
    display: none;
}

.is-h5 .category-tabs-placeholder.active {
    display: block;
}

.is-h5 .category-tab {
    font-size: 3.467vw;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.1vw 0;
    text-align: center;
}

.is-h5 .discover-content {
    width: calc(100% - 8.533vw);
    padding: 5.333vw 0 21.333vw;
    margin-top: -13.334vw;  /* pull up into hero; buttons→content = 60-40 = 20px */
}

.is-h5 .category-tabs + .discover-content,
.is-h5 .category-tabs + .category-tabs-placeholder + .discover-content {
    margin-top: 5vw;
    padding-top: 0;
}

/* When tabs are sticky, placeholder is active — content needs proper spacing */
.is-h5 .category-tabs.sticky + .category-tabs-placeholder.active + .discover-content {
    margin-top: 0;
}

.is-h5 .content-grid {
    gap: 2.667vw;
}

.is-h5 .grid-item {
    border-radius: 2.667vw;
}

.is-h5 .grid-item.icon-item {
    border-radius: 8%;
}

/* ============================================================
   Page-specific grid columns
   ============================================================ */

/* Theme: web=5col, h5=3col */
.content-grid.grid-theme-web {
    grid-template-columns: repeat(5, 1fr);
}

.is-h5 .content-grid.grid-theme-web {
    grid-template-columns: repeat(3, 1fr);
}

/* Icon: web=5col, h5=2col (not 3) */
.content-grid.grid-icon-web {
    grid-template-columns: repeat(5, 1fr);
}

.is-h5 .content-grid.grid-icon-web {
    grid-template-columns: repeat(2, 1fr);
}

/* Wallpaper: web=5col, h5=3col */
.content-grid.grid-wallpaper-web {
    grid-template-columns: repeat(5, 1fr);
}

.is-h5 .content-grid.grid-wallpaper-web {
    grid-template-columns: repeat(3, 1fr);
}

/* Dynamic Island web: Fun Gameplay = 5col, Animation Island = 6col */
.content-grid.grid-island-fun {
    grid-template-columns: repeat(5, 1fr);
}

.content-grid.grid-island-anim {
    grid-template-columns: repeat(6, 1fr);
}

/* Dynamic Island h5: Animation Island = 3col, Fun Gameplay = 2col */
.is-h5 .content-grid.grid-island-h5-anim {
    grid-template-columns: repeat(3, 1fr);
}

.is-h5 .content-grid.grid-island-h5-fun {
    grid-template-columns: repeat(2, 1fr);
}

/* ============================================================
   Media query fallback for non-body-class responsive
   ============================================================ */
@media (max-width: 768px) {
    .discover-hero-inner {
        padding: 0 5.333vw;
        padding-bottom: 16vw;
    }

    .discover-hero-title {
        font-size: 8.533vw;
    }

    .discover-hero-desc {
        font-size: 3.467vw;
        padding: 0 3.2vw;
        height: 1.6em;
        overflow: visible;
    }

    .category-tabs {
        width: calc(100% - 10.667vw);
        padding: 4.267vw 0;
        margin-top: -10.667vw;
    }

    .discover-content {
        width: calc(100% - 10.667vw);
        padding: 6.4vw 0 12.8vw;
        margin-top: -10.667vw;
    }

    .category-tabs + .discover-content,
    .category-tabs + .category-tabs-placeholder + .discover-content {
        margin-top: 0;
    }

    .content-grid {
        gap: 3.2vw;
    }

    .grid-item {
        border-radius: 3.2vw;
    }

    .grid-item.icon-item {
        border-radius: 22%;
    }
}


/* ============================================================
   Article Pages - Shared Styles (FAQ & Blog)
   Both pages use .article-page as root, shared via .ap-* classes.
   ============================================================ */

/* ---- Page wrapper & fixed background ---- */
.article-page {
    position: relative;
    min-height: 10vh;
}

.ap-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

.ap-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* H5: image width = page width, height auto, no crop */
.is-h5 .ap-bg {
    position: absolute;
    height: auto;
}

.is-h5 .ap-bg img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* All content above the fixed bg */
.ap-hero,
.ap-tabs,
.ap-content,
.ap-download {
    position: relative;
    z-index: 1;
}

/* ---- Hero ---- */
.ap-hero {
    text-align: center;
    padding: 3.125vw 0 1.667vw;
}

.ap-hero-inner {
    max-width: 33.333vw;
    margin: 0 auto;
    padding: 0 1.042vw;
}

.ap-title-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 0.833vw;
}

.ap-title {
    font-family: var(--font-title);
    font-size: 2.5vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0;
}

.ap-title-wrap .discover-hero-title-icon {
    position: absolute;
    left: 100%;
    top: 100%;
    transform: translate(-50%, -70%);
    height: 2.083vw;
    width: auto;
    display: block;
}

/* Blog title override */
.article-page--blog .ap-title {
    font-size: 2.5vw;
}

.ap-subtitle {
    font-family: inherit;
    font-size: 0.729vw;
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 1.042vw;
}

/* Hero download buttons (web only) */
.ap-hero-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625vw;
}

.ap-hero-buttons .discover-hero-btn {
    height: 2.292vw;
}

.is-h5 .ap-hero-buttons {
    display: none;
}

/* FAQ/Blog hero: match discover-hero-buttons sizing with widget/theme/icon pages
   The .ap-hero-inner is narrow (33.333vw) for title/subtitle centering,
   but buttons need the same width context as the full-width discover-hero-inner. */
.ap-hero .discover-hero-buttons {
    max-width: 66vw;
    width: 66vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.is-h5 .ap-hero .discover-hero-buttons {
    display: none;
}

/* ---- Tabs (mirrors category-tabs from widget.tpl) ---- */
.ap-tabs {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 1.042vw 0;
    border-bottom: 1px solid #eee;
    max-width: 56.25vw;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 1240px) {
    .ap-tabs {
        max-width: none;
        width: calc(100% - 4.167vw);
    }
}

.ap-tab {
    font-family: var(--font-family);
    font-size: 0.781vw;
    font-weight: 500;
    color: #000;
    text-decoration: none;
    padding: 0.208vw 0;
    position: relative;
    transition: color 0.2s ease;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.ap-tab:focus,
.ap-tab:focus-visible,
.ap-tab:active {
    outline: none;
    box-shadow: none;
    border: none;
}

.ap-tab:hover {
    color: #008cff;
}

.ap-tab.active {
    color: #008cff;
    font-weight: 700;
}

.ap-tab.active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: #008cff;
    border-radius: 1px;
}

/* PC sticky pill tabs */
.is-pc .ap-tabs {
    position: relative;
    z-index: 99;
    background: #008CFF0D;
    height: 3.646vw;
    min-width: 68vw;
    padding: 0;
    border-bottom: none;
    justify-content: center;
    gap: 3.125vw;
    border-radius: 1.302vw;
}

.is-pc .ap-tab {
    padding: 0.365vw 0.938vw;
    border-radius: 5.208vw;
    font-size: 0.833vw;
    color: #000;
    transition: color 0.2s ease, background 0.2s ease;
}

.is-pc .ap-tab:hover {
    color: #000;
    background: rgba(0, 140, 255, 0.08);
}

.is-pc .ap-tab.active {
    background: #008cff;
    color: #fff;
    font-weight: 600;
}

.is-pc .ap-tab.active::after {
    display: none;
}

/* ---- Content area ---- */
.ap-content {
    max-width: 41.667vw;
    margin: 0 auto;
    padding: 0 1.042vw;
}

/* Tab panels */
.ap-panel { display: none; }
.ap-panel.active { display: block; }

/* ---- List items (card style with rounded rect bg) ---- */
.ap-list {
    display: flex;
    flex-direction: column;
    gap: 1.406vw;
    padding-top: 1.1vw;
}

.ap-item {
    display: block;
    padding: 1.25vw 1.458vw;
    background: #fff;
    border-radius: 1.563vw;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.ap-item:hover {
    background: #fafcff;
    box-shadow: 0 0.104vw 0.417vw rgba(0, 0, 0, 0.07);
}

.ap-item-title {
    font-family: var(--font-family);
    font-size: 0.833vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 0.417vw;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ap-item-desc {
    font-family: var(--font-family);
    font-size: 0.677vw;
    color: #999 !important;
    line-height: 1.6;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ap-item-desc p {
    margin: 0;
    padding: 0;
    color: #999 !important;
    font-size: inherit;
    line-height: inherit;
}

/* Blog-specific: header row (title + date) */
.ap-item-header {
    display: flex;
    align-items: baseline;
    gap: 0.625vw;
    margin-bottom: 0.417vw;
}

.ap-item-header .ap-item-title {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.ap-item-date {
    font-family: var(--font-family);
    font-size: 0.625vw;
    color: #bbb;
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

/* H5: date below title */
.is-h5 .ap-item-header {
    flex-direction: column;
    gap: 0;
}

.is-h5 .ap-item-header .ap-item-title {
    margin-bottom: 2.133vw;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-h5 .ap-item-date {
    display: none;
}

/* Load more */
.ap-load-more {
    text-align: center;
    padding: 1.667vw 0 3.333vw;
}

/* ---- H5 sticky download bar ---- */
.ap-download {
    display: none;
}

.is-h5 .ap-download {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 998;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ap-download-inner {
    position: relative;
    width: 100%;
}

.ap-download-bg {
    display: block;
    width: 100%;
    height: auto;
}

.ap-download-buttons {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625vw;
}

.ap-download-buttons .discover-hero-btn {
    height: 56%;
}

.ap-download-buttons .discover-hero-btn img {
    height: 80%;
    width: auto;
}

.is-h5 .ap-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    margin-top: 0;
}

.is-h5 .ap-download .download-ios,
.is-h5 .ap-download .download-android {
    display: none;
}

.is-h5 .ap-download .download-ios.platform-show,
.is-h5 .ap-download .download-android.platform-show {
    display: inline-flex;
}

.is-pc .ap-download { display: none; }

/* ---- H5 Mobile adjustments ---- */
.is-h5 .ap-hero {
    padding: 26.333vw 0 0;
}

.is-h5 .ap-title {
    font-size: 8.533vw;
}

.is-h5 .article-page--blog .ap-title {
    font-size: 7.467vw;
}

.is-h5 .ap-title-wrap .discover-hero-title-icon {
    height: 7.467vw;
}

.is-h5 .ap-subtitle {
    font-size: 3.2vw;
    padding: 0 2.133vw;
    margin-bottom: 0;
    color: gray;
}

.is-h5 .ap-tabs {
    width: calc(100% - 8.533vw);
    padding: 0.1vw 0;
    margin-top: 6.5vw;
    background: transparent;
    transition: top 0.8s ease, margin-top 0.3s ease;
    border-bottom: none;
    position: relative;
}

.is-h5 .ap-tabs::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background: #eee;
}

/* H5: sticky ap-tabs when scrolled past */
.is-h5 .ap-tabs.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0.1vw 4.267vw;
    background: #fff;
    z-index: 999;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* When navbar is visible, push tabs below it */
.is-h5 .ap-tabs.sticky.below-navbar {
    top: 13.3vw;
}

/* Placeholder to prevent layout jump when ap-tabs become fixed */
.is-h5 .ap-tabs-placeholder {
    display: none;
}

.is-h5 .ap-tabs-placeholder.active {
    display: block;
}

.is-h5 .ap-tab {
    font-size: 3.467vw;
}

.is-h5 .ap-content {
    padding: 0 4.267vw 21.333vw;
}

.is-h5 .ap-item {
    padding: 5.333vw 5.333vw;
}

.is-h5 .ap-item-title {
    font-size: 4vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.is-h5 .ap-item-desc {
    font-size: 2.8vw !important;
    color: #999 !important;
}

.is-h5 .ap-item-desc p {
    color: #999 !important;
    font-size: 2.8vw !important;
}

/* ---- PC wider layout ---- */
.is-pc .ap-hero {
    padding: 5.75vw 0 2.4vw;
}

.is-pc .ap-content {
    max-width: 68vw;
    padding: 1.042vw 0 3.333vw;
}

.is-pc .ap-item-title {
    font-size: 1.1vw;
}

.is-pc .ap-item-desc {
    font-size: 1vw;
}

.is-pc .ap-item-date {
    font-size: 0.677vw;
}

@media (max-width: 1240px) {
    .is-pc .ap-content {
        max-width: none;
        width: calc(100% - 8.333vw);
        margin: 0 auto;
    }
}


/* ============================================================
   H5 Mobile Overrides for generic styles (based on 375px CSS viewport)
   ============================================================ */
@media (max-width: 768px) {
    /* Hero */
    .discover-hero-inner {
        padding: 0 10.667vw;
        padding-bottom: 12.8vw;
    }

    .discover-hero-title-wrap {
        margin-bottom: 4.267vw;
    }

    .discover-hero-title {
        font-size: 12.8vw;
        letter-spacing: -0.133vw;
    }

    .discover-hero-title-icon {
        height: 10.667vw;
    }

    .discover-hero-desc {
        font-size: 4vw;
        max-width: 98vw;
        margin-bottom: 9.333vw;
        height: 1.6em;
        overflow: visible;
    }

    .discover-hero-buttons {
        gap: 3.2vw;
    }

    .discover-hero-btn {
        height: 12.8vw;
    }

    /* Category Tabs */
    .category-tabs {
        padding: 5.333vw 0;
        max-width: none;
        width: calc(100% - 8.533vw);
        margin: -18.667vw auto 0;
    }

    .category-tab {
        font-size: 4vw;
        padding: 1.067vw 0;
    }

    .category-tab.active::after {
        bottom: -1.7vw;
    }

    /* Content */
    .discover-content {
        max-width: none;
        width: calc(100% - 8.533vw);
        margin: -13.333vw auto 0;
        padding: 0 0 17.067vw;
    }

    .category-tabs + .discover-content,
    .category-tabs + .category-tabs-placeholder + .discover-content {
        margin-top: 10.667vw;
    }

    .content-grid {
        gap: 5.333vw;
    }

    .grid-item {
        border-radius: 4.267vw;
    }

    .grid-item:hover {
        transform: translateY(-1.067vw);
        box-shadow: 0 2.133vw 6.4vw rgba(0, 0, 0, 0.1);
    }

    .grid-item-placeholder {
        border-radius: inherit;
    }

    /* .grid-item.theme-item {
        border-radius: 5.333vw;
    } */

    .grid-item-name {
        font-size: 3.467vw;
        padding: 2.133vw 1.6vw 0;
    }

    .grid-item.wallpaper-item {
        border-radius: 2vw;
    }

    .grid-item.island-item {
        border-radius: 4.267vw;
    }

    /* Island section title */
    .island-section-title {
        font-size: 5.333vw;
        margin-bottom: 5.333vw;
    }

    .island-section + .island-section {
        margin-top: 12.8vw;
    }

    /* Download bar */
    .discover-download {
        padding: 12.8vw 0 17.067vw;
    }

    .discover-download-inner {
        max-width: none;
    }

    .ap-download-buttons {
        gap: 3.2vw;
    }

    /* Article Pages */
    .ap-hero {
        padding: 16vw 0 8.533vw;
    }

    .ap-hero-inner {
        max-width: 170.667vw;
        padding: 0 5.333vw;
    }

    .ap-title-wrap {
        margin-bottom: 2.2vw;
    }

    .ap-title {
        font-size: 12.8vw;
    }

    .ap-title-wrap .discover-hero-title-icon {
        height: 10.667vw;
    }

    .article-page--blog .ap-title {
        font-size: 10.667vw;
    }

    .ap-subtitle {
        font-size: 3.733vw;
        margin: 0 0 5.333vw;
    }

    .ap-hero-buttons {
        gap: 3.2vw;
    }

    .ap-hero-buttons .discover-hero-btn {
        height: 11.733vw;
    }

    /* Tabs */
    .ap-tabs {
        padding: 5.333vw 0;
        max-width: none;
        width: calc(100% - 8.533vw);
    }

    .ap-tab {
        font-size: 4vw;
        padding: 1.067vw 0;
    }

    .ap-tab.active::after {
        bottom: 0;
    }

    /* Content */
    .ap-content {
        max-width: 213.333vw;
        padding: 0 5.333vw;
    }

    .ap-list {
        gap: 4vw;
        padding-top: 5vw;
    }

    .ap-item {
        padding: 6.4vw 7.467vw;
        border-radius: 8vw;
    }

    .ap-item:hover {
        box-shadow: 0 0.533vw 2.133vw rgba(0, 0, 0, 0.07);
    }

    .ap-item-title {
        font-size: 4.267vw;
        margin: 0 0 2.133vw;
    }

    .ap-item-desc {
        font-size: 3.467vw;
    }

    .ap-item-header {
        gap: 3.2vw;
        margin-bottom: 2.133vw;
    }

    .ap-item-date {
        font-size: 3.2vw;
    }

    .ap-load-more {
        padding: 8.533vw 0 17.067vw;
    }
}


/* ============================================================
   Article Content Detail Pages (FAQ Content & Blog Content)
   Shared via .apc-* (article-page-content) classes.
   PC: centered card with app banner above.
   H5: full-width, no banner, sticky download bar at bottom.
   ============================================================ */

/* ---- App Banner (PC only) ---- */
.apc-banner {
    position: relative;
    z-index: 1;
    max-width: 56.25vw;
    margin: 0 auto 0;
}

/* Content detail pages: breadcrumb in normal flow */
.article-page--faq-content .discover-breadcrumb,
.article-page--blog-content .discover-breadcrumb {
    position: relative;
}

.apc-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 1.8vw;
    padding: 1.563vw 2.345vw;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.apc-banner-left {
    display: flex;
    align-items: center;
    gap: 1.094vw;
}

.apc-banner-logo {
    width: 3.906vw;
    height: 3.906vw;
    border-radius: 0.782vw;
    object-fit: contain;
}

.apc-banner-info {
    display: flex;
    flex-direction: column;
    gap: 0.234vw;
}

.apc-banner-name {
    font-family: var(--font-family);
    font-size: 1.407vw;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.3;
}

.apc-banner-name-wrap {
    position: relative;
    display: inline-block;
}

.apc-banner-badge {
    position: absolute;
    left: 12.5%;
    top: 80%;
    transform: translate(0, -50%);
    height: 1.2vw;
    width: auto;
    display: block;
}

.apc-banner-slogan {
    font-family: var(--font-family);
    font-size: 0.938vw;
    color: #000;
    line-height: 1.4;
}

.apc-banner-buttons {
    display: flex;
    align-items: center;
}

.apc-banner-buttons .discover-hero-btn {
    height: 1.562vw;
    margin-right: -2.6vw;
}

.apc-banner-buttons .discover-hero-btn img {
    width: 65%;
    height: auto;
}

/* H5: hide banner */
.is-h5 .apc-banner {
    display: none;
}

/* ---- Article Card ---- */
.apc-article {
    position: relative;
    z-index: 1;
    max-width: 56.25vw;
    margin: 1.25vw auto 3.333vw;
    padding: 2.083vw 2.604vw;
    background: #fff;
    border-radius: 1.8vw;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.apc-header {
    margin-bottom: 0;
}

.apc-title {
    font-family: var(--font-family);
    font-size: 1.563vw;
    font-weight: 700;
    color: var(--color-text-dark);
    line-height: 1.35;
    margin: 0 0 0.521vw;
}

.apc-date {
    display: block;
    font-family: var(--font-family);
    font-size: 0.625vw;
    color: #bbb;
    line-height: 1;
}

.apc-divider {
    height: 1px;
    background: #eee;
    margin: 1.25vw 0;
}

.apc-body {
    font-family: var(--font-family);
    font-size: 0.781vw;
    line-height: 1.8;
}

.apc-body ul,
.apc-body ol {
    padding-left: 1.5em;
    list-style-position: outside;
}

.apc-body p {
    margin: 0 0 1.25vw;
}

.apc-body p:last-child {
    margin-bottom: 0;
}

/* Remote article content (fetched from url) */
.apc-remote-content,
.apc-remote-content * {
    font-size: 1.2vw !important;
    line-height: 1.8 !important;
    word-break: break-word;
}

.apc-remote-content img {
    max-width: 100%;
    height: auto !important;
    width: auto !important;
    object-fit: contain;
}

.apc-remote-content .show-tip,
.apc-remote-content .tip {
    display: none !important;
}

/* ---- PC wider layout ---- */
.is-pc .apc-banner {
    max-width: 68vw;
    padding-top: 1.563vw;
}

.is-pc .apc-article {
    max-width: 68vw;
}

@media (max-width: 1240px) {
    .apc-banner {
        max-width: none;
        width: calc(100% - 8.333vw);
        margin: 0 auto;
    }

    .apc-article {
        max-width: none;
        width: calc(100% - 8.333vw);
        margin-left: auto;
        margin-right: auto;
    }

    .is-pc .apc-banner,
    .is-pc .apc-article {
        max-width: none;
        width: calc(100% - 8.333vw);
    }
}

/* ---- H5 Mobile layout ---- */
.is-h5 .apc-article {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0 4.267vw 1vw;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    margin-top: 12vw;
}

.is-h5 .apc-header {
    padding-top: 12vw;
}

.is-h5 .apc-title {
    font-size: 6.4vw;
    line-height: 1.3;
    margin-bottom: 2.667vw;
}

.is-h5 .apc-date {
    font-size: 3.2vw;
    color: #bbb;
}

.is-h5 .apc-divider {
    margin: 4vw 0;
}

.is-h5 .apc-body {
    font-size: 3.733vw;
    line-height: 2;
    letter-spacing: 0.267vw;
}

.is-h5 .apc-body p {
    margin: 0 0 5.333vw;
}

.is-h5 .apc-remote-content,
.is-h5 .apc-remote-content * {
    font-size: 3.733vw !important;
    line-height: 8vw !important;
}

/* ---- Media query fallback for non-body-class responsive ---- */
@media (max-width: 768px) {
    .apc-banner {
        display: none;
    }

    .apc-article {
        max-width: none;
        width: auto;
        margin: 0;
        padding: 0 5.333vw 21.333vw;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
    }

    .apc-header {
        padding-top: 6.4vw;
    }

    .apc-title {
        font-size: 7.467vw;
        margin-bottom: 3.2vw;
    }

    .apc-date {
        font-size: 3.467vw;
    }

    .apc-divider {
        margin: 4.267vw 0;
    }

    .apc-body {
        font-size: 4vw;
        line-height: 2;
        letter-spacing: 0.267vw;
    }

    .apc-body p {
        margin: 0 0 6.4vw;
    }

    .apc-remote-content,
    .apc-remote-content * {
        font-size: 4vw !important;
        line-height: 8vw !important;
    }
}


/* ============================================================
   Widget Page — Grid Layouts
   ============================================================ */

/* ---- Shared widget item styles ---- */
.wg-item, .lg-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.wg-item:hover, .lg-item:hover {
    transform: translateY(-0.208vw);
    z-index: 1;
}

.wg-item-inner, .lg-item-inner {
    flex: 1 1 auto;
    border-radius: 1.8vw;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

/* Widget type (widget_type='widget') border-radius override */
.widget-grid-web .wg-item-inner {
    border-radius: 0.682vw;
    overflow: hidden;
}

.widget-grid-web .wg-item-inner img {
    border-radius: 0;
}

/* Reset homepage .wg-item styles leaking into discover widget grid */
.widget-grid-web .wg-item {
    border-radius: 0;
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
}

.widget-grid-web .wg-item img,
.widget-grid-web .wg-item .wg-item-inner img {
    background-color: transparent !important;
}

.wg-item:hover .wg-item-inner,
.lg-item:hover .lg-item-inner {
    box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.1);
}

.wg-item-inner img, .lg-item-inner img {
    width: 100%;
    height: 100%;
    display: block;
    /* object-fit: contain; */
    border-radius: inherit;
    margin: 0 auto;
}

/* Ensure <picture> inside widget/lock/standby/control grid items doesn't break flex layout */
.wg-item-inner picture, .lg-item-inner picture,
.sb-item-inner picture, .cc-item-inner picture {
    display: contents;
}

.wg-item .grid-item-name,
.lg-item .grid-item-name {
    flex: 0 0 auto;
}

/* ============================================================
   Widget — Web (PC): 6-col CSS Grid
   Pattern per group (14 items):
   small, medium, small, medium,
   small, medium, small, medium,
   small, small, large, small, small, large
   
   6-col × 4-row grid. 1 unit = 1 col.
   small=1×1, medium=2×1, large=2×2
   
   Row 1: (1,1)s (2,1)m→2col (4,1)s (5,1)m→2col  → fills 1+2+1+2=6
   Row 2: (1,2)s (2,2)m→2col (4,2)s (5,2)m→2col  → fills 6
   Row 3-4: (1,3)s (1,4)s (2,3)l→2col,2row (4,3)s (4,4)s (5,3)l→2col,2row → fills 6 per row
   ============================================================ */
/* Row heights are driven by the small items (1:1 square).
   medium and large stretch to fill their grid cells so edges align.
   Images use object-fit:cover to maintain visual ratio. */

/* small=1×1: square — this drives the row height */
.widget-grid-web .wg-small .wg-item-inner {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

/* medium=2×1: stretch to fill row height set by small */
.widget-grid-web .wg-medium .wg-item-inner {
    aspect-ratio: auto;
}

/* large=2×2: stretch to fill the 2-row span */
.widget-grid-web .wg-large .wg-item-inner {
    aspect-ratio: auto;
}

.widget-grid-web {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.042vw;
    margin-bottom: 1.042vw;
    align-items: stretch;
}

/* Explicit grid placement for each of the 14 items */
/* Row 1 */
.widget-grid-web .wg-pos-0  { grid-column: 1 / 2; grid-row: 1; }
.widget-grid-web .wg-pos-1  { grid-column: 2 / 4; grid-row: 1; }
.widget-grid-web .wg-pos-2  { grid-column: 4 / 5; grid-row: 1; }
.widget-grid-web .wg-pos-3  { grid-column: 5 / 7; grid-row: 1; }
/* Row 2 */
.widget-grid-web .wg-pos-4  { grid-column: 1 / 2; grid-row: 2; }
.widget-grid-web .wg-pos-5  { grid-column: 2 / 4; grid-row: 2; }
.widget-grid-web .wg-pos-6  { grid-column: 4 / 5; grid-row: 2; }
.widget-grid-web .wg-pos-7  { grid-column: 5 / 7; grid-row: 2; }
/* Row 3-4 */
.widget-grid-web .wg-pos-8  { grid-column: 1 / 2; grid-row: 3; }
.widget-grid-web .wg-pos-9  { grid-column: 1 / 2; grid-row: 4; }
.widget-grid-web .wg-pos-10 { grid-column: 2 / 4; grid-row: 3 / 5; }
.widget-grid-web .wg-pos-11 { grid-column: 4 / 5; grid-row: 3; }
.widget-grid-web .wg-pos-12 { grid-column: 4 / 5; grid-row: 4; }
.widget-grid-web .wg-pos-13 { grid-column: 5 / 7; grid-row: 3 / 5; }

/* ============================================================
   Widget — H5 (Mobile): 3-col base grid
   Pattern per group (11 items):
   small, small, small,       → 3 items, 1col each
   small, medium,             → 1col + 2col = 3
   small, medium,             → 1col + 2col = 3
   small, medium,             → 1col + 2col = 3
   large, large               → 1.5col + 1.5col = 3
   
   Use a 6-sub-column grid: small=span2, medium=span4, large=span3
   large=1.5×1.5: aspect-ratio needs to be taller than square
   ============================================================ */
.widget-grid-h5 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2.667vw;
    margin-bottom: 2.667vw;
    align-items: stretch;
}

.widget-grid-h5 .wg-small {
    grid-column: span 2;
}

.widget-grid-h5 .wg-medium {
    grid-column: span 4;
}

.widget-grid-h5 .wg-large {
    grid-column: span 3;
}

/* small=1×1: square — drives row height */
.widget-grid-h5 .wg-small .wg-item-inner {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

/* medium=2×1: stretch to match row height from small */
.widget-grid-h5 .wg-medium .wg-item-inner {
    aspect-ratio: auto;
}

/* large=1.5×1.5: square, drives its own row height */
.widget-grid-h5 .wg-large .wg-item-inner {
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
}

/* ============================================================
   Lockscreen Widget — Web (PC): 8-col CSS Grid
   Pattern per group (20 items):
   inline, inline,
   circle, circle, rect, circle, circle, rect,
   circle, circle, rect, circle, circle, rect,
   circle, circle, rect, circle, circle, rect
   
   8-col grid. inline=8col (full width, short height),
   circle=1col×1col, rect=2col×1col
   Each data row: circle(1) circle(1) rect(2) circle(1) circle(1) rect(2) = 8
   ============================================================ */
.lock-grid-web {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.042vw;
    margin-bottom: 1.042vw;
}

.lock-grid-web .lg-inline {
    grid-column: span 4;
}

.lock-grid-web .lg-inline .lg-item-inner {
    aspect-ratio: 12 / 1;
    border-radius: 2vw;
}

.lock-grid-web .lg-inline .lg-item-inner img {
    object-fit: contain;
    border-radius: inherit;
}

.lock-grid-web .lg-circle {
    grid-column: span 1;
}

.lock-grid-web .lg-circle .lg-item-inner {
    aspect-ratio: 1 / 1;
    border-radius: 1.25vw;
    flex: 0 0 auto;
    display: table-cell;    /* 表格单元格 */
    text-align: center;     /* 水平居中 */
    vertical-align: middle; /* 垂直居中 */
}

.lock-grid-web .lg-circle .lg-item-inner img {
    border-radius: inherit;
}

.lock-grid-web .lg-rect {
    grid-column: span 2;
}

.lock-grid-web .lg-rect .lg-item-inner {
    /* aspect-ratio: 2 / 1; */
    border-radius: 1.25vw;
}

.lock-grid-web .lg-rect .lg-item-inner img {
    border-radius: inherit;
}

/* ============================================================
   Lockscreen Widget — H5 (Mobile): 4-col CSS Grid
   Pattern per group (10 items):
   inline,
   circle, circle, circle, circle,
   rect, circle, circle,
   rect, rect
   
   4-col grid. inline=4col, circle=1col, rect=2col
   ============================================================ */
.lock-grid-h5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.667vw;
    margin-bottom: 2.667vw;
}

.lock-grid-h5 .lg-inline {
    grid-column: 1 / -1;
}

.lock-grid-h5 .lg-inline .lg-item-inner {
    aspect-ratio: 12 / 1;
    border-radius: 1.333vw;
}

.lock-grid-h5 .lg-inline .lg-item-inner img {
    object-fit: contain;
    border-radius: inherit;
}

.lock-grid-h5 .lg-circle {
    grid-column: span 1;
}

.lock-grid-h5 .lg-circle .lg-item-inner {
    aspect-ratio: 1 / 1;
    border-radius: 2.667vw;
    flex: 0 0 auto;
}

.lock-grid-h5 .lg-circle .lg-item-inner img {
    border-radius: inherit;
}

.lock-grid-h5 .lg-rect {
    grid-column: span 2;
}

.lock-grid-h5 .lg-rect .lg-item-inner {
    aspect-ratio: 2 / 1;
    border-radius: 2.667vw;
}

.lock-grid-h5 .lg-rect .lg-item-inner img {
    border-radius: inherit;
}

/* H5 overrides for widget items */
.is-h5 .wg-item-inner,
.is-h5 .lg-item-inner {
    border-radius: 5.6vw;
}

/* Widget type (widget_type='widget') H5 border-radius override */
.is-h5 .widget-grid-h5 .wg-item-inner {
    border-radius: 3.491vw;
    overflow: hidden;
}

.is-h5 .widget-grid-h5 .wg-item-inner img {
    border-radius: 0;
}

/* Reset homepage .wg-item styles leaking into discover widget grid (H5) */
.is-h5 .widget-grid-h5 .wg-item {
    border-radius: 0;
    overflow: visible;
    background: transparent !important;
    box-shadow: none !important;
}

.is-h5 .widget-grid-h5 .wg-item img,
.is-h5 .widget-grid-h5 .wg-item .wg-item-inner img {
    background-color: transparent !important;
}

.is-h5 .wg-item-inner img,
.is-h5 .lg-item-inner img {
    border-radius: inherit;
}

.is-h5 .lock-grid-h5 .lg-circle .lg-item-inner {
    border-radius: 2.667vw;
}

.is-h5 .lock-grid-h5 .lg-circle .lg-item-inner img {
    border-radius: inherit;
}

.is-h5 .lock-grid-h5 .lg-inline .lg-item-inner {
    border-radius: 4vw;
}

.is-h5 .lock-grid-h5 .lg-inline .lg-item-inner img {
    border-radius: inherit;
}

.is-h5 .grid-item-name {
    font-size: 3.2vw;
}

.is-h5 .grid-theme-web .grid-item-name {
    display: none;
}

.is-h5 .discover-hero {
    position: relative;
    width: 100%;
    text-align: center;
    margin-top: 12vw;
    overflow: visible;
}

/* Extend the hero bg image upward behind the fixed navbar.
   transform is paint-only — it shifts the image visually without
   affecting document flow, so nothing below the hero moves. */
.is-h5 .discover-hero-bg {
    transform: translateY(-12vw);
}

/* ============================================================
   Lockscreen Widget — Row gradient backgrounds (cycle per row)
   ============================================================ */
.lg-grad-0 .lg-item-inner { background: linear-gradient(to right, #FFB0CE, #FFD4BC); }
.lg-grad-1 .lg-item-inner { background: linear-gradient(to right, #B6BFFA, #E9B6FA); }
.lg-grad-2 .lg-item-inner { background: linear-gradient(to right, #73ACFF, #B2C7FF); }
.lg-grad-3 .lg-item-inner { background: linear-gradient(to right, #7DCFD1, #92D6A4); }


/* ============================================================
   Control Center — Shared item styles
   ============================================================ */
.cc-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
    max-width: 97%;
    justify-self: center;
}

.cc-item:hover {
    transform: translateY(-0.208vw);
    z-index: 1;
}

.cc-item-inner {
    /* flex: 1 1 auto; */
    aspect-ratio: 1 / 1;
    border-radius: 1.5vw;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.cc-item:hover .cc-item-inner {
    box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.1);
}

.cc-item-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: inherit;
}

.cc-item .grid-item-name {
    flex: 0 0 auto;
}

/* Background variants */
.cc-bg-light .cc-item-inner {
    background: #f8fcff;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.cc-bg-light .cc-item-inner img {
    border-radius: inherit;
}

.cc-bg-grad .cc-item-inner {
    background: linear-gradient(to right, #73ACFF, #B2C7FF);
}

/* ============================================================
   Control Center — Web (PC): 8-col grid
   Row 1 (idx 0-7):   8 small items, 1col each
   Row 2 (idx 8-11):  2 small(1col) + 2 wide(3col) = 8
   Row 3 (idx 12-19): 8 small items, 1col each
   Row 4 (idx 20-26): 7 small items (leave 1 col empty)
   Row 5 (idx 27-30): 4 wide items, 2col each = 8
   Row 6 (idx 31-34): 4 wide items, 2col each = 8
   ============================================================ */
.cc-grid-web {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 1.042vw;
}

/* Row 1: idx 0-7, all 1-col */
.cc-grid-web .cc-pos-0  { grid-column: 1 / 2;  grid-row: 1; }
.cc-grid-web .cc-pos-1  { grid-column: 2 / 3;  grid-row: 1; }
.cc-grid-web .cc-pos-2  { grid-column: 3 / 4;  grid-row: 1; }
.cc-grid-web .cc-pos-3  { grid-column: 4 / 5;  grid-row: 1; }
.cc-grid-web .cc-pos-4  { grid-column: 5 / 6;  grid-row: 1; }
.cc-grid-web .cc-pos-5  { grid-column: 6 / 7;  grid-row: 1; }
.cc-grid-web .cc-pos-6  { grid-column: 7 / 8;  grid-row: 1; }
.cc-grid-web .cc-pos-7  { grid-column: 8 / 9;  grid-row: 1; }

/* Row 2: idx 8-11, 2 small(1col) + 2 medium(2col) = 6col, left-aligned */
.cc-grid-web .cc-pos-8  { grid-column: 1 / 2;  grid-row: 2; }
.cc-grid-web .cc-pos-9  { grid-column: 2 / 3;  grid-row: 2; }
.cc-grid-web .cc-pos-10 { grid-column: 3 / 5;  grid-row: 2; }
.cc-grid-web .cc-pos-11 { grid-column: 5 / 7;  grid-row: 2; }

/* Small circle items in row 2 */
.cc-grid-web .cc-pos-8 .cc-item-inner,
.cc-grid-web .cc-pos-9 .cc-item-inner {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.cc-grid-web .cc-pos-8 .cc-item-inner img,
.cc-grid-web .cc-pos-9 .cc-item-inner img {
    border-radius: inherit;
}

/* Medium items in row 2: 2:1 ratio to match 2× small width, image scales proportionally */
.cc-grid-web .cc-pos-10 .cc-item-inner,
.cc-grid-web .cc-pos-11 .cc-item-inner {
    aspect-ratio: 2 / 1;
    border-radius: 1.5vw;
}

.cc-grid-web .cc-pos-10 .cc-item-inner img,
.cc-grid-web .cc-pos-11 .cc-item-inner img {
    border-radius: inherit;
}

/* Row 3: idx 12-19, all 1-col */
.cc-grid-web .cc-pos-12 { grid-column: 1 / 2;  grid-row: 3; }
.cc-grid-web .cc-pos-13 { grid-column: 2 / 3;  grid-row: 3; }
.cc-grid-web .cc-pos-14 { grid-column: 3 / 4;  grid-row: 3; }
.cc-grid-web .cc-pos-15 { grid-column: 4 / 5;  grid-row: 3; }
.cc-grid-web .cc-pos-16 { grid-column: 5 / 6;  grid-row: 3; }
.cc-grid-web .cc-pos-17 { grid-column: 6 / 7;  grid-row: 3; }
.cc-grid-web .cc-pos-18 { grid-column: 7 / 8;  grid-row: 3; }
.cc-grid-web .cc-pos-19 { grid-column: 8 / 9;  grid-row: 3; }

/* Row 4: idx 20-26, 7 items 1-col each (col 8 empty) */
.cc-grid-web .cc-pos-20 { grid-column: 1 / 2;  grid-row: 4; }
.cc-grid-web .cc-pos-21 { grid-column: 2 / 3;  grid-row: 4; }
.cc-grid-web .cc-pos-22 { grid-column: 3 / 4;  grid-row: 4; }
.cc-grid-web .cc-pos-23 { grid-column: 4 / 5;  grid-row: 4; }
.cc-grid-web .cc-pos-24 { grid-column: 5 / 6;  grid-row: 4; }
.cc-grid-web .cc-pos-25 { grid-column: 6 / 7;  grid-row: 4; }
.cc-grid-web .cc-pos-26 { grid-column: 7 / 8;  grid-row: 4; }

/* Rows 3-4 (idx 12-26): small circle items */
.cc-grid-web .cc-pos-12 .cc-item-inner,
.cc-grid-web .cc-pos-13 .cc-item-inner,
.cc-grid-web .cc-pos-14 .cc-item-inner,
.cc-grid-web .cc-pos-15 .cc-item-inner,
.cc-grid-web .cc-pos-16 .cc-item-inner,
.cc-grid-web .cc-pos-17 .cc-item-inner,
.cc-grid-web .cc-pos-18 .cc-item-inner,
.cc-grid-web .cc-pos-19 .cc-item-inner,
.cc-grid-web .cc-pos-20 .cc-item-inner,
.cc-grid-web .cc-pos-21 .cc-item-inner,
.cc-grid-web .cc-pos-22 .cc-item-inner,
.cc-grid-web .cc-pos-23 .cc-item-inner,
.cc-grid-web .cc-pos-24 .cc-item-inner,
.cc-grid-web .cc-pos-25 .cc-item-inner,
.cc-grid-web .cc-pos-26 .cc-item-inner {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.cc-grid-web .cc-pos-12 .cc-item-inner img,
.cc-grid-web .cc-pos-13 .cc-item-inner img,
.cc-grid-web .cc-pos-14 .cc-item-inner img,
.cc-grid-web .cc-pos-15 .cc-item-inner img,
.cc-grid-web .cc-pos-16 .cc-item-inner img,
.cc-grid-web .cc-pos-17 .cc-item-inner img,
.cc-grid-web .cc-pos-18 .cc-item-inner img,
.cc-grid-web .cc-pos-19 .cc-item-inner img,
.cc-grid-web .cc-pos-20 .cc-item-inner img,
.cc-grid-web .cc-pos-21 .cc-item-inner img,
.cc-grid-web .cc-pos-22 .cc-item-inner img,
.cc-grid-web .cc-pos-23 .cc-item-inner img,
.cc-grid-web .cc-pos-24 .cc-item-inner img,
.cc-grid-web .cc-pos-25 .cc-item-inner img,
.cc-grid-web .cc-pos-26 .cc-item-inner img {
    border-radius: inherit;
}

/* Row 5: idx 27-30, 4 wide items 2-col each */
.cc-grid-web .cc-pos-27 { grid-column: 1 / 3;  grid-row: 5; }
.cc-grid-web .cc-pos-28 { grid-column: 3 / 5;  grid-row: 5; }
.cc-grid-web .cc-pos-29 { grid-column: 5 / 7;  grid-row: 5; }
.cc-grid-web .cc-pos-30 { grid-column: 7 / 9;  grid-row: 5; }

/* Row 6: idx 31-34, 4 wide items 2-col each */
.cc-grid-web .cc-pos-31 { grid-column: 1 / 3;  grid-row: 6; }
.cc-grid-web .cc-pos-32 { grid-column: 3 / 5;  grid-row: 6; }
.cc-grid-web .cc-pos-33 { grid-column: 5 / 7;  grid-row: 6; }
.cc-grid-web .cc-pos-34 { grid-column: 7 / 9;  grid-row: 6; }

/* Wide items in rows 5-6: wider aspect ratio */
.cc-grid-web .cc-pos-27 .cc-item-inner,
.cc-grid-web .cc-pos-28 .cc-item-inner,
.cc-grid-web .cc-pos-29 .cc-item-inner,
.cc-grid-web .cc-pos-30 .cc-item-inner,
.cc-grid-web .cc-pos-31 .cc-item-inner,
.cc-grid-web .cc-pos-32 .cc-item-inner,
.cc-grid-web .cc-pos-33 .cc-item-inner,
.cc-grid-web .cc-pos-34 .cc-item-inner {
    aspect-ratio: 2 / 1;
}

/* ============================================================
   Control Center — H5 (Mobile): 4-col grid
   Row 1-3 (idx 0-11):  4 per row, 1col each (small)
   Row 4 (idx 12-13):   2 per row, 2col each (wide)
   Row 5-6 (idx 14-21): 4 per row, 1col each (small)
   Row 7 (idx 22-23):   2 per row, 2col each (wide)
   Row 8 (idx 24-25):   2 per row, 2col each (wide)
   Row 9 (idx 26-28):   3 per row → use 12-col sub-grid trick
   Row 10-12 (idx 29-34): 2 per row, 2col each (wide)
   ============================================================ */
.cc-grid-h5 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.667vw;
}

.cc-grid-h5 .cc-h5-small {
    grid-column: span 1;
}

.cc-grid-h5 .cc-h5-wide {
    grid-column: span 2;
}

/* Row 9: 3 items in 4-col grid, each span 1, last col empty */
.cc-grid-h5 .cc-h5-third {
    grid-column: span 1;
}

/* Wide items: override aspect ratio and reset circle to rounded rect */
.cc-grid-h5 .cc-h5-wide .cc-item-inner {
    aspect-ratio: 2 / 1;
    border-radius: 5.6vw;
}

.cc-grid-h5 .cc-h5-wide .cc-item-inner img {
    border-radius: inherit;
}

/* H5 overrides — small items stay circular, wide/third use rounded rect */
.is-h5 .cc-item-inner {
    border-radius: 50%;
}

.is-h5 .cc-item-inner img {
    border-radius: inherit;
}

.is-h5 .cc-bg-light .cc-h5-small .cc-item-inner,
.is-h5 .cc-h5-small.cc-bg-light .cc-item-inner {
    border-radius: 50%;
}

.is-h5 .cc-bg-light .cc-h5-small .cc-item-inner img,
.is-h5 .cc-h5-small.cc-bg-light .cc-item-inner img {
    border-radius: inherit;
}

/* ============================================================
   StandBy Mode — Web (PC): 2 images per row
   Images are 2:1 (width:height), border-radius 40px ≈ 2.083vw
   ============================================================ */
.sb-grid-web {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.042vw;
}

.sb-item {
    min-width: 0;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease;
}

.sb-item:hover {
    transform: translateY(-0.208vw);
    z-index: 1;
}

.sb-item-inner {
    flex: 1 1 auto;
    aspect-ratio: 1218 / 563;
    border-radius: 2.083vw;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.sb-item:hover .sb-item-inner {
    box-shadow: 0 0.417vw 1.25vw rgba(0, 0, 0, 0.1);
}

.sb-item-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

/* ============================================================
   StandBy Mode — H5 (Mobile): each image has its own copy of the
   first image as a full-width background behind it.
   ============================================================ */
.sb-grid-h5 {
    display: flex;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    overflow: hidden;
}

.sb-grid-h5 .sb-h5-overlay {
    position: relative;
    overflow: hidden;
    padding: 2.667vw 4.267vw;
}

.sb-grid-h5 .sb-h5-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.sb-grid-h5 .sb-h5-bg-img img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.sb-grid-h5 .sb-h5-overlay .sb-item-inner {
    position: relative;
    z-index: 1;
    aspect-ratio: 1218 / 563;
    border-radius: 5.867vw;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    /* Scale down the foreground image so the bg border peeks out evenly */
    -webkit-transform: scale(0.95) translateZ(0);
    transform: scale(0.95) translateZ(0);
}

/* .sb-grid-h5 .sb-h5-overlay:first-child .sb-item-inner {
    margin-top: 4.267vw;
}

.sb-grid-h5 .sb-h5-overlay:last-child .sb-item-inner {
    margin-bottom: 4.267vw;
} */

.sb-grid-h5 .sb-h5-overlay .sb-item-inner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
    margin-top: -3vw;
}

/* H5 overrides for standby items */
.is-h5 .sb-item-inner {
    border-radius: 5.867vw;
}

.is-h5 .sb-item-inner img {
    border-radius: inherit;
}

/* ============================================================
   iPad (web/PC mode) — push hero-inner, tabs, content down ~150px
   iPad viewport range: 768px–1280px (landscape included).
   150px ÷ 1024px ≈ 14.65vw → use 15vw.
   Only applies when body has .is-pc (desktop UA / web mode).
   ============================================================ */
@media (min-width: 769px) and (max-width: 1280px) {
    .is-pc .discover-hero-inner {
        top: 2.5vw;
    }

    .is-pc .category-tabs {
        margin-top: calc(-9.4vw + 2.5vw);
    }

    .is-pc .discover-content {
        margin-top: calc(-8.5vw + 2.5vw);
    }

    .is-pc .category-tabs + .discover-content {
        margin-top: 2.083vw;
    }
}

/* ============================================================
   Blog Detail Page — Three-Column Layout & Components
   ============================================================ */

/* --- Three-column layout ---
   Center column matches apc-banner width (68vw on PC).
   Left & right sidebars sit OUTSIDE the center width.
   Scaled to 0.9 to prevent overflow.
   ------------------------------------------------------------ */
.blog-detail-layout {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    margin: 1.25vw auto 0;
    padding: 0;
}

.blog-detail-left {
    flex: 0 0 12.4vw;
    min-width: 0;
    right: 55px;
    margin-top: 2.5vw;
    position: relative;
}

.blog-detail-center {
    flex: 0 0 61.2vw;
    max-width: 61.2vw;
    min-width: 0;
}

.blog-detail-center .apc-article {
    margin: 0;
    max-width: none;
    width: 100%;
}

.blog-detail-right {
    flex: 0 0 13vw;
    min-width: 0;
    margin-left: calc(50px / 1920 * 100vw);
    position: relative;
    left: 50px;
}

/* Scale banner to match center column width on blog detail page */

.article-page--blog-content .apc-banner {
    max-width: 61.2vw;
}

.article-page--blog-content .is-pc .apc-banner,
.is-pc .article-page--blog-content .apc-banner {
    max-width: 61.2vw;
}

/* --- TOC Sidebar (sticky, follows scroll) --- */
.blog-toc-sidebar {
    position: sticky;
    top: calc(var(--navbar-height, 4.583vw) + 1.5vw);
    max-height: calc(100vh - var(--navbar-height, 4.583vw) - 3vw);
    overflow-y: auto;
}

/* Server-generated TOC styles */
.blog-toc {
    font-size: 0.729vw;
    line-height: 1.6;
}

.blog-toc-header {
    display: flex;
    align-items: center;
    gap: 0.4vw;
    cursor: pointer;
    margin-bottom: 0.8vw;
    user-select: none;
}

.blog-toc-title {
    font-size: 0.95vw;
    font-weight: 700;
    color: #222;
}

.blog-toc-arrow {
    width: 1.6vw;
    height: auto;
    transition: transform 0.2s ease;
    cursor: pointer;
    flex-shrink: 0;
}

/* Expanded state: arrow points up (default image points down/right, rotate to point up) */
/* Collapsed state: arrow points down */
.blog-toc-arrow.collapsed {
    transform: rotate(180deg);
}

.blog-toc-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.blog-toc-item {
    margin-bottom: 0.5vw;
}

.blog-toc-item a {
    color: #666;
    text-decoration: none;
    transition: color 0.15s;
    display: block;
    padding: 0.1vw 0;
    font-size: 0.78vw;
    line-height: 1.5;
}

.blog-toc-item a:hover {
    color: #007AFF;
}

.blog-toc-item.active > a {
    color: #007AFF !important;
    font-weight: 600;
}

/* Indent by heading level */
.blog-toc-level-3 { padding-left: 0.8vw; }
.blog-toc-level-4 { padding-left: 1.6vw; }
.blog-toc-level-5 { padding-left: 2.4vw; }
.blog-toc-level-6 { padding-left: 3.2vw; }

/* Scroll target offset: prevent navbar from covering headings */
.apc-body h2[id], .apc-body h3[id], .apc-body h4[id], .apc-body h5[id], .apc-body h6[id] {
    scroll-margin-top: calc(var(--navbar-height) + 1.5vw);
}

/* --- H5 TOC (collapsible, between title and divider) --- */
.blog-toc-h5 {
    padding: 1vw 1vw;
    margin: 0;
    margin-bottom: 4vw;
}

.blog-toc-h5-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.blog-toc-h5-title {
    font-size: 4.5vw;
    color: #333;
}

.blog-toc-h5-toggle {
    width: 8vw;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    user-select: none;
    flex-shrink: 0;
}

.blog-toc-h5-toggle.blog-toc-h5-toggle--expanded {
    transform: rotate(180deg);
}

.blog-toc-h5-list {
    background: #F7F8FA;
    list-style: none;
    padding: 2vw 6vw 2vw;
    margin: 2vw -6vw 0;
    width: calc(100% + 11.5vw);
    font-size: 3.2vw;
    line-height: 1.8;
}

.blog-toc-h5-list--collapsed {
    display: none !important;
}

.blog-toc-h5-item {
    margin-bottom: 1vw;
}

.blog-toc-h5-item a {
    color: #666;
    text-decoration: none;
}

.blog-toc-h5-item a:hover {
    color: #007AFF;
}

.blog-toc-h5-item.blog-toc-level-3 { padding-left: 3vw; }
.blog-toc-h5-item.blog-toc-level-4 { padding-left: 6vw; }
.blog-toc-h5-item.blog-toc-level-5 { padding-left: 9vw; }
.blog-toc-h5-item.blog-toc-level-6 { padding-left: 12vw; }

/* --- Showcase Phone Sidebar (sticky) --- */
.blog-showcase-sidebar {
    position: sticky;
    top: calc(var(--navbar-height, 4.583vw) + 1.5vw);
    text-align: center;
}

.blog-showcase-phone {
    margin-bottom: 1vw;
}

.blog-phone-wrapper {
    position: relative;
    display: block;
}

.blog-phone-frame {
    position: relative;
    width: 100%;
    display: block;
}

/* The white phone border image defines the frame size */
.blog-phone-border {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    pointer-events: none;
    box-shadow: 0px 12px 14px rgba(30, 40, 56, 0.2);
    border-radius: 1.9vw;
}

/* Screenshot fills inside the border frame, layered on top */
.blog-phone-screen {
    position: absolute;
    top: 1.4%;
    left: 3.8%;
    width: 93%;
    height: 97%;
    border-radius: 1.6vw;
    overflow: hidden;
    z-index: 2;
}

/* Screenshot images — uses .blog-slide (not .showcase-slide) to avoid homepage CSS conflicts */
.blog-phone-screen .blog-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.blog-phone-screen .blog-slide-active {
    opacity: 1;
}

/* --- Arrows: positioned on left/right sides of the phone frame --- */
.blog-showcase-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: none;
    border: none;
    cursor: pointer;
    color: #ccc;
    padding: 0.2vw;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.blog-showcase-arrow svg {
    width: 0.5vw;
    height: auto;
}

.blog-showcase-arrow:hover {
    color: #999;
}

#blog-showcase-prev {
    left: -1.5vw;
}

#blog-showcase-next {
    right: -1.5vw;
}

/* --- Download buttons (side by side, same width as phone) --- */
.blog-showcase-download {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3vw;
    margin-top: 0.8vw;
}

.blog-showcase-download .discover-hero-btn {
    display: inline-flex;
    margin: 0;
}

.blog-showcase-download .discover-hero-btn img {
    width: 5.5vw;
    height: auto;
}

/* --- Recent Articles section --- */
.blog-recent-articles {
    position: relative;
    z-index: 1;
    max-width: 61.2vw;
    margin: 0 auto;
    padding: 1.5vw 0 3vw;
}

.blog-recent-title {
    font-family: var(--font-family);
    font-size: 1.25vw;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 1vw;
}

.blog-recent-list {
    display: flex;
    flex-direction: column;
    gap: 1vw;
}

.blog-recent-list .blog-recent-item {
    text-decoration: none;
}

/* ap-item-desc: ensure 2-line excerpt with ellipsis */
.ap-item-desc {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    color: #999 !important;
}

/* Bottom date: hidden by default (PC shows date in header) */
.ap-item-date-bottom {
    display: none;
}

/* H5: show bottom date below desc, hide header date */
.is-h5 .blog-recent-item .ap-item-date-bottom {
    display: block;
    margin-top: 2.667vw;
    font-size: 2.933vw;
    color: #bbb;
}

/* H5 Recent Articles */
.is-h5 .blog-recent-articles {
    max-width: none;
    padding: 4vw 0vw 10vw;
    position: relative;
}

/* H5: thick gray separator line between apc-article and blog-recent-articles */
.is-h5 .blog-recent-articles::before {
    content: '';
    display: block;
    width: 100vw;
    height: 2.667vw;
    background: #f0f0f0;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 4vw;
}

.is-h5 .blog-recent-title {
    font-size: 5vw;
    margin-bottom: 3vw;
}

.is-h5 .blog-recent-list {
    gap: 3vw;
}

@media (max-width: 1240px) {
    .blog-detail-layout {
        width: 100%;
        max-width: 100%;
    }

    .blog-detail-center {
        flex: 0 0 calc(100% - 30vw);
        max-width: calc(100% - 30vw);
    }

    .blog-detail-left,
    .blog-detail-right {
        flex: 0 0 10vw;
    }

    .blog-recent-articles {
        max-width: none;
        width: calc(100% - 8.333vw);
        margin-left: auto;
        margin-right: auto;
    }
}