/* 20260719-responsive-layout-system1: shared responsive structure for primary pages. */

:root {
    --responsive-gutter-phone: 12px;
    --responsive-gutter-tablet: clamp(16px, 3vw, 28px);
    --responsive-gutter-desktop: clamp(24px, 4vw, 64px);
    --responsive-safe-top: env(safe-area-inset-top, 0px);
    --responsive-safe-right: env(safe-area-inset-right, 0px);
    --responsive-safe-bottom: env(safe-area-inset-bottom, 0px);
    --responsive-safe-left: env(safe-area-inset-left, 0px);
}

html {
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
picture,
video,
canvas,
iframe,
svg {
    max-width: 100%;
}

:where(.home-hero, .my-page, .redeem-shell, .order-shell, .price-page, .admin-shell, .boss-register-layout, .review-shell, .suggest-page),
:where(.my-shell, .my-main, .my-feature-grid, .my-lower-panel, .redeem-hero, .redeem-grid, .order-hero, .order-grid, .price-hero, .price-grid, .admin-overview, .boss-register-panel-shell, .reviews-grid, .suggest-card, .suggest-form) {
    min-width: 0;
}

.suggest-page {
    width: 100%;
    margin-inline: auto;
}

:where(.my-card, .my-feature-card, .my-lower-section, .redeem-card, .redeem-panel, .order-card, .order-panel, .price-card, .admin-panel, .admin-stat-card, .boss-register-panel-content, .price-review-item, .suggest-field) {
    min-width: 0;
    overflow-wrap: anywhere;
}

.my-modal-panel,
.admin-modal-card {
    max-width: calc(100vw - 24px - var(--responsive-safe-left) - var(--responsive-safe-right));
    max-height: calc(100vh - 32px - var(--responsive-safe-top) - var(--responsive-safe-bottom));
    max-height: calc(100dvh - 32px - var(--responsive-safe-top) - var(--responsive-safe-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-table-wrap,
.redeem-pagination,
.review-pagination {
    max-width: 100%;
    overscroll-behavior-inline: contain;
}

.boss-register-character img {
    max-width: none;
}

@media (min-width: 1100px) {
    .my-page {
        width: min(calc(100% - var(--responsive-gutter-desktop) - var(--responsive-gutter-desktop)), 1440px);
    }

    .redeem-shell,
    .review-shell {
        width: min(calc(100% - var(--responsive-gutter-desktop) - var(--responsive-gutter-desktop)), 1260px);
    }

    .order-shell {
        width: min(calc(100% - var(--responsive-gutter-desktop) - var(--responsive-gutter-desktop)), 1440px);
    }

    .price-page {
        width: min(calc(100% - var(--responsive-gutter-desktop) - var(--responsive-gutter-desktop)), 1320px);
    }

    .boss-register-layout {
        width: min(calc(100% - var(--responsive-gutter-desktop) - var(--responsive-gutter-desktop)), 1440px);
    }

    .suggest-page {
        padding-inline: clamp(380px, 30vw, 520px) var(--responsive-gutter-desktop);
    }

    .my-feature-grid,
    .price-feature-grid,
    .price-step-grid {
        gap: clamp(12px, 1.2vw, 18px);
    }
}

@media (min-width: 768px) and (max-width: 1099px) {
    .my-page,
    .redeem-shell,
    .order-shell,
    .price-page,
    .review-shell,
    .boss-register-layout {
        width: min(calc(100% - var(--responsive-gutter-tablet) - var(--responsive-gutter-tablet)), 1040px);
        max-width: 100%;
    }

    .home-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(78px, 12vh, 116px) var(--responsive-gutter-tablet) clamp(150px, 24vh, 210px);
    }

    .home-hero__content {
        width: min(76vw, 660px);
        max-width: calc(100vw - var(--responsive-gutter-tablet) - var(--responsive-gutter-tablet));
    }

    .home-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(14px, 2.4vh, 22px) clamp(18px, 7vw, 72px);
        padding-inline: clamp(36px, 10vw, 110px);
        padding-bottom: var(--responsive-safe-bottom);
    }

    .my-page {
        padding-block: clamp(28px, 5vh, 48px);
    }

    .my-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .my-profile-card {
        min-height: 0;
    }

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

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

    .my-lower-section + .my-lower-section {
        border-left: 0;
    }

    .my-lower-section:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(198, 225, 255, 0.24);
    }

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

    .redeem-nav,
    .order-nav {
        flex-direction: row;
        align-items: center;
    }

    .redeem-actions,
    .redeem-actions .redeem-button,
    .order-actions,
    .order-actions .order-button {
        width: auto;
    }

    .order-shell {
        padding-top: clamp(10px, 2vh, 18px);
    }

    .order-card,
    .order-panel {
        min-height: 0;
    }

    .order-card--intro {
        padding-right: clamp(116px, 18vw, 190px);
    }

    .order-form-grid,
    .order-voucher-box {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .consult-home-page .consult-mobile-view {
        display: none;
    }

    .consult-home-page .consult-desktop-view {
        display: contents;
    }

    .price-hero {
        grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1.38fr);
        align-items: stretch;
    }

    .price-hero-selling {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .price-hero-badge {
        min-height: 0;
    }

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

    .price-step-grid,
    .price-feature-grid,
    .price-review-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .price-step:last-child,
    .price-review-stat:last-child {
        grid-column: 1 / -1;
    }

    .admin-sidebar {
        width: 180px;
    }

    .admin-shell {
        width: auto;
        max-width: none;
        margin-left: 180px;
        padding: clamp(16px, 2.5vw, 24px);
    }

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

    .admin-hero {
        grid-column: 1 / -1;
    }

    .admin-stat-card {
        min-height: 150px;
    }

    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 900px;
    }

    .boss-register-layout {
        min-height: 100vh;
        min-height: 100dvh;
        padding-block: clamp(22px, 4vw, 42px);
    }

    .boss-register-panel-shell {
        min-height: min(760px, calc(100dvh - 44px));
        margin-right: 0;
    }

    .boss-register-companion {
        min-height: min(640px, calc(100dvh - 56px));
    }

    .boss-reviews-page .review-shell {
        padding-bottom: clamp(34px, 6vw, 54px);
    }

    .boss-reviews-page .review-nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .boss-reviews-page .stats-panel,
    .boss-reviews-page .reviews-grid.is-dynamic-review-list,
    .boss-reviews-page .summary-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .suggest-page {
        min-height: 100vh;
        min-height: 100dvh;
        justify-content: center;
        padding: clamp(72px, 9vh, 96px) var(--responsive-gutter-tablet) clamp(90px, 12vh, 124px);
    }

    .suggest-card {
        width: min(100%, 820px);
    }

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

@media (min-width: 900px) and (max-width: 1099px) {
    .boss-register-layout {
        grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    }
}

@media (min-width: 768px) and (max-width: 899px) {
    .boss-register-layout {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 32px), 760px);
    }

    .boss-register-panel-shell {
        order: 1;
        justify-self: center;
        width: min(100%, 620px);
    }

    .boss-register-companion {
        order: 2;
        min-height: 380px;
    }

    .boss-register-character {
        height: 440px;
    }

    .boss-register-companion-card {
        justify-self: end;
    }
}

@media (max-width: 767px), (max-width: 932px) and (orientation: landscape) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    @supports (overflow: clip) {
        html,
        body {
            overflow-x: clip;
        }
    }

    .my-page,
    .redeem-shell,
    .order-shell,
    .price-page,
    .review-shell,
    .boss-register-layout {
        width: min(calc(100% - var(--responsive-gutter-phone) - var(--responsive-gutter-phone)), 560px);
        max-width: 100%;
    }

    .home-hero,
    .suggest-page {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .home-hero {
        padding-inline: max(var(--responsive-gutter-phone), var(--responsive-safe-left)) max(var(--responsive-gutter-phone), var(--responsive-safe-right));
    }

    .my-feature-grid,
    .my-lower-panel,
    .redeem-hero,
    .redeem-grid,
    .order-hero,
    .order-grid,
    .price-grid,
    .price-service-grid,
    .price-feature-grid,
    .price-review-stats,
    .boss-reviews-page .stats-panel,
    .boss-reviews-page .reviews-grid.is-dynamic-review-list,
    .suggest-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .my-modal,
    .admin-modal {
        padding: max(12px, var(--responsive-safe-top)) max(12px, var(--responsive-safe-right)) max(12px, var(--responsive-safe-bottom)) max(12px, var(--responsive-safe-left));
    }

    .my-modal-panel,
    .admin-modal-card {
        width: min(92vw, 420px);
        max-height: calc(100vh - 32px - var(--responsive-safe-bottom));
        max-height: calc(100dvh - 32px - var(--responsive-safe-bottom));
    }

    .admin-nav {
        position: relative;
        min-height: auto;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .admin-nav-actions {
        width: 100%;
    }

    .admin-sidebar {
        position: relative;
        top: auto;
        bottom: auto;
        width: 100%;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--admin-line);
    }

    .admin-sidebar-nav {
        display: flex;
        gap: 6px;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }

    .admin-sidebar-link {
        flex: 0 0 auto;
        min-width: max-content;
    }

    .admin-side-health {
        display: none;
    }

    .admin-shell {
        width: min(calc(100% - 20px), 700px);
        max-width: 100%;
        margin: 0 auto;
        padding: 14px 0 calc(28px + var(--responsive-safe-bottom));
    }

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

    .redeem-nav,
    .order-nav {
        flex-direction: row;
        align-items: center;
    }

    .redeem-actions,
    .redeem-actions .redeem-button,
    .order-actions,
    .order-actions .order-button {
        width: auto;
    }

    .admin-hero {
        grid-column: 1 / -1;
    }

    .admin-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .admin-table {
        min-width: 0;
    }

    .boss-register-layout {
        min-height: auto;
        grid-template-columns: minmax(0, 1fr);
        padding-block: 16px calc(24px + var(--responsive-safe-bottom));
    }

    .boss-reviews-page .review-shell {
        padding-bottom: calc(38px + var(--responsive-safe-bottom));
    }

    .suggest-page {
        justify-content: center;
        padding-inline: max(var(--responsive-gutter-phone), var(--responsive-safe-left)) max(var(--responsive-gutter-phone), var(--responsive-safe-right));
        padding-bottom: calc(112px + var(--responsive-safe-bottom));
    }

    .suggest-card {
        width: min(100%, 560px);
    }

    :where(button, a, input, select, textarea) {
        scroll-margin-block: 12px;
    }
}

@media (max-width: 932px) and (orientation: landscape) {
    .home-hero {
        min-height: 100vh;
        min-height: 100dvh;
        padding-top: max(54px, var(--responsive-safe-top));
        padding-bottom: max(96px, calc(74px + var(--responsive-safe-bottom)));
    }

    .home-hero__content {
        width: min(62vw, 560px);
    }

    .home-nav {
        bottom: max(8px, var(--responsive-safe-bottom));
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        padding-inline: max(18px, var(--responsive-safe-left)) max(18px, var(--responsive-safe-right));
    }

    .home-nav a {
        font-size: clamp(12px, 1.8vw, 15px);
    }

    .consult-home-page .consult-desktop-view {
        display: none;
    }

    .consult-home-page .consult-mobile-view {
        display: grid;
    }

    .consult-home-page .price-page {
        width: min(calc(100% - 24px), 860px);
        padding: max(52px, var(--responsive-safe-top)) 0 calc(84px + var(--responsive-safe-bottom));
    }

    .consult-mobile-chip-grid,
    .consult-mobile-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-feature-grid,
    .my-lower-panel,
    .redeem-hero,
    .redeem-grid,
    .order-hero,
    .order-grid,
    .suggest-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .my-page,
    .redeem-shell,
    .order-shell,
    .suggest-page {
        width: min(calc(100% - 24px), 900px);
    }

    .boss-reviews-page .review-shell {
        width: min(calc(100% - 24px), 900px);
    }

    .boss-reviews-page .stats-panel,
    .boss-reviews-page .reviews-grid.is-dynamic-review-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .suggest-page {
        padding-top: max(56px, var(--responsive-safe-top));
        padding-bottom: max(24px, var(--responsive-safe-bottom));
    }

    .my-modal-panel,
    .admin-modal-card,
    .live2d-quiz {
        max-height: calc(100dvh - 20px - var(--responsive-safe-top) - var(--responsive-safe-bottom));
    }
}

@media (max-height: 700px) {
    .my-page,
    .redeem-shell,
    .order-shell,
    .review-shell,
    .boss-register-layout {
        padding-top: clamp(8px, 2vh, 18px);
        padding-bottom: clamp(18px, 4vh, 32px);
    }

    .home-hero {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .boss-register-panel-shell,
    .boss-register-companion {
        min-height: 0;
    }

    .my-modal-panel,
    .admin-modal-card {
        max-height: calc(100vh - 20px - var(--responsive-safe-top) - var(--responsive-safe-bottom));
        max-height: calc(100dvh - 20px - var(--responsive-safe-top) - var(--responsive-safe-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}