@layer components {

    /* ----- Missions Grid Layout ----- */
    .ag-missions-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        /* gap-3 */
    }

    /* ----- Mission Card Base ----- */
    .ag-mission-card {
        border-radius: 1rem;
        /* rounded-2xl */
        transition: all 0.2s ease-in-out;
        position: relative;
        overflow: hidden;
        text-align: left;
        display: flex;
        text-decoration: none;
    }

    /* ----- Mission Card: HOT (1st item) ----- */
    .ag-mission-card-hot {
        grid-column: span 2 / span 2;
        background: linear-gradient(135deg, #4f46e5, #9333ea);
        /* action-start to action-end */
        padding: 1.25rem;
        /* p-5 */
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 0 15px rgba(79, 70, 229, 0.3);
        /* shadow-glow */
    }

    .ag-mission-card-hot:active {
        transform: scale(0.98);
    }

    .ag-mission-hot-left {
        display: flex;
        align-items: center;
        gap: 1rem;
        /* gap-4 */
        z-index: 10;
    }

    .ag-mission-hot-icon-wrap {
        height: 3rem;
        /* h-12 */
        width: 3rem;
        /* w-12 */
        border-radius: 9999px;
        background-color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        /* shadow-lg */
        color: #9333ea;
        /* action-end */
        transition: transform 0.3s;
    }

    @media (hover: hover) {

        .ag-mission-card-hot:hover .ag-mission-hot-icon-wrap {
        transform: scale(1.1);
    }
    }

    .ag-mission-hot-icon-wrap .material-symbols-outlined {
        font-size: 1.5rem;
        /* text-2xl */
    }

    .ag-mission-hot-title-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        /* gap-2 */
        margin-bottom: 0.25rem;
        /* mb-1 */
    }

    .ag-mission-hot-title {
        color: white;
        font-weight: 700;
        font-size: 1.125rem;
        /* text-lg */
        line-height: 1.2;
    }

    .ag-mission-hot-badge {
        background-color: #f43f5e;
        /* accent-rose */
        color: white;
        font-size: 0.625rem;
        /* text-[10px] */
        font-weight: 700;
        padding: 0.125rem 0.375rem;
        /* px-1.5 py-0.5 */
        border-radius: 0.25rem;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        animation: ag-pulse-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .ag-mission-hot-xp-row {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        /* gap-1 */
    }

    .ag-mission-hot-xp {
        color: #fbbf24;
        /* accent-amber */
        font-weight: 700;
        font-size: 0.875rem;
        /* text-sm */
    }

    .ag-mission-hot-arrow {
        color: rgba(255, 255, 255, 0.7);
        font-size: 1.5rem;
        /* text-2xl */
        z-index: 10;
        transition: color 0.2s;
    }

    @media (hover: hover) {

        .ag-mission-card-hot:hover .ag-mission-hot-arrow {
        color: white;
    }
    }

    .ag-mission-hot-bg-dec-1 {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 8rem;
        /* w-32 */
        background-color: rgba(255, 255, 255, 0.1);
        transform: skewX(12deg) translateX(2.5rem);
        pointer-events: none;
    }

    .ag-mission-hot-bg-dec-2 {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 5rem;
        /* h-20 */
        width: 5rem;
        /* w-20 */
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 9999px;
        filter: blur(24px);
        /* blur-2xl */
        pointer-events: none;
    }

    /* ----- Mission Card: SUB (2nd+ items) ----- */
    .ag-mission-card-sub {
        grid-column: span 1 / span 1;
        background-color: white;
        border: 1px solid #f1f5f9;
        /* border-slate-100 */
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        /* shadow-sm */
        padding: 1rem;
        /* p-4 */
        flex-direction: column;
        gap: 0.75rem;
        /* gap-3 */
    }

    @media (hover: hover) {

        .ag-mission-card-sub:hover {
        border-color: #cbd5e1;
        /* hover:border-slate-300 */
    }
    }

    .ag-mission-card-sub-wide {
        grid-column: span 2 / span 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem;
        /* p-3 */
    }

    .ag-mission-sub-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }

    .ag-mission-sub-icon-wrap {
        height: 2.25rem;
        /* h-9 */
        width: 2.25rem;
        /* w-9 */
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        flex-shrink: 0;
    }

    .ag-mission-sub-xp-badge {
        font-size: 0.625rem;
        /* text-[10px] */
        font-weight: 700;
        color: #64748b;
        /* text-slate-500 */
        background-color: #f1f5f9;
        /* bg-slate-100 */
        padding: 0.25rem 0.5rem;
        /* px-2 py-1 */
        border-radius: 0.375rem;
        /* rounded-md */
        border: 1px solid #e2e8f0;
        /* border-slate-200 */
        white-space: nowrap;
    }

    .ag-mission-sub-xp-badge.ag-xp-highlight {
        color: white;
        background-color: #4f46e5;
        border-color: transparent;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        /* shadow-sm */
    }

    .ag-mission-sub-title {
        font-size: 0.875rem;
        /* text-sm */
        font-weight: 700;
        color: #0f172a;
        /* text-primary */
        line-height: 1.25;
        margin-top: 0.25rem;
    }

    .ag-mission-sub-go-btn {
        margin-top: auto;
        width: 100%;
        padding: 0.5rem 0;
        /* py-2 */
        background-color: #f1f5f9;
        /* bg-slate-100 */
        border-radius: 0.5rem;
        /* rounded-lg */
        font-size: 0.75rem;
        /* text-xs */
        color: #0f172a;
        /* text-primary */
        font-weight: 700;
        text-align: center;
        transition: background-color 0.2s;
        border: none;
        cursor: pointer;
        display: block;
    }

    @media (hover: hover) {

        .ag-mission-sub-go-btn:hover {
        background-color: #e2e8f0;
        /* hover:bg-slate-200 */
    }
    }

    .ag-mission-sub-go-btn.ag-btn-disabled {
        background-color: #e2e8f0;
        color: #94a3b8;
    }

    /* ----- Catalog Grid Layout ----- */
    .ag-catalog-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        /* gap-3 */
        padding-left: 1rem;
        /* px-4 */
        padding-right: 1rem;
    }

    /* ----- Catalog Item Card ----- */
    .ag-catalog-card {
        grid-column: span 1 / span 1;
        background-color: white;
        border-radius: 1rem;
        display: flex;
        flex-direction: column;
        height: 11rem;
        /* h-44 */
        position: relative;
        overflow: hidden;
        border: 1px solid #f1f5f9;
        /* border-slate-100 */
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        /* shadow-sm */
        transition: all 0.3s ease;
        text-decoration: none;
    }

    @media (hover: hover) {

        .ag-catalog-card:hover {
        border-color: #fde68a;
        /* hover:border-amber-200 */
    }
    }

    .ag-card-line {
        height: 0.25rem;
        width: 100%;
        flex-shrink: 0;
        background-image: linear-gradient(to right, #fbbf24, #f59e0b, #d97706);
    }

    .ag-catalog-card-inner {
        padding: 0.625rem;
        /* p-2.5 */
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .ag-catalog-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }

    .ag-catalog-card-stats {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ag-catalog-card-stat {
        display: flex;
        align-items: center;
        gap: 0.125rem;
        font-size: 0.625rem;
        /* text-[10px] */
        font-weight: 700;
        color: #94a3b8;
        /* text-slate-400 */
    }

    .ag-catalog-card-stat .material-symbols-outlined {
        font-size: 0.75rem;
        /* text-[12px] */
    }

    .ag-catalog-card-image-wrap {
        flex: 1;
        border-radius: 0.75rem;
        /* rounded-xl */
        background-color: #f1f5f9;
        /* bg-slate-100 */
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
        box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
        /* shadow-inner */
        transition: transform 0.5s ease;
    }

    @media (hover: hover) {

        .ag-catalog-card:hover .ag-catalog-card-image-wrap {
        transform: scale(1.02);
    }
    }

    .ag-catalog-card-overlay {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 0.625rem;
        /* p-2.5 */
    }

    .ag-catalog-card-title {
        color: white;
        font-weight: 700;
        font-size: 0.75rem;
        /* text-xs */
        line-height: 1.25;
        letter-spacing: 0.025em;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        /* drop-shadow-md */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .ag-catalog-card-sub {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.5625rem;
        /* text-[9px] */
        margin-top: 0.125rem;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ----- Add Button Card ----- */
    .ag-catalog-add-btn {
        grid-column: span 1 / span 1;
        background-color: rgba(254, 242, 242, 0.4);
        /* bg-brandcolor-50/40 */
        border-radius: 1rem;
        border: 2px dashed var(--color-brandcolor-300);
        /* border-brandcolor-300 */
        padding: 0.75rem;
        /* p-3 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        height: 11rem;
        /* h-44 */
        position: relative;
        transition: all 0.3s ease;
        text-decoration: none;
    }

    @media (hover: hover) {

        .ag-catalog-add-btn:hover {
        border-color: var(--color-brandcolor-500);
        /* hover:border-brandcolor-500 */
        background-color: var(--color-brandcolor-50);
        /* hover:bg-brandcolor-50 */
    }
    }

    .ag-catalog-add-badge {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background-color: #f43f5e;
        /* bg-rose-500 */
        color: white;
        font-size: 0.5625rem;
        /* text-[9px] */
        font-weight: 700;
        padding: 0.125rem 0.375rem;
        /* px-1.5 py-0.5 */
        border-radius: 0.25rem;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        /* shadow-sm */
        animation: ag-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes ag-pulse {

        0%,
        100% {
            opacity: 1;
        }

        50% {
            opacity: .5;
        }
    }

    .ag-catalog-add-icon-wrap {
        height: 2.75rem;
        /* h-11 */
        width: 2.75rem;
        /* w-11 */
        border-radius: 9999px;
        background-color: white;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        /* shadow-sm */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.5rem;
        color: var(--color-brandcolor-500);
        /* text-brandcolor-500 */
        border: 1px solid var(--color-brandcolor-50);
        /* border-brandcolor-50 */
        transition: all 0.3s ease;
    }

    @media (hover: hover) {

        .ag-catalog-add-btn:hover .ag-catalog-add-icon-wrap {
        transform: scale(1.1);
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        /* shadow-md */
    }
    }

    .ag-add-title {
        font-size: 0.75rem;
        /* text-xs */
        font-weight: 900;
        color: #1e293b;
        /* text-slate-800 */
        margin-bottom: 0.5rem;
        line-height: 1.25;
        transition: color 0.3s ease;
    }

    @media (hover: hover) {

        .ag-catalog-add-btn:hover .ag-add-title {
        color: var(--color-brandcolor-500);
        /* text-brandcolor-500 */
    }
    }

    .ag-catalog-add-xp {
        background-color: var(--color-brandcolor-500);
        /* bg-brandcolor-500 */
        color: white;
        font-size: 0.625rem;
        /* text-[10px] */
        font-weight: 900;
        padding: 0.25rem 0.625rem;
        /* px-2.5 py-1 */
        border-radius: 9999px;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        /* shadow-sm */
        display: flex;
        align-items: center;
        gap: 0.25rem;
        /* gap-1 */
        transition: background-color 0.3s ease;
    }

    @media (hover: hover) {

        .ag-catalog-add-btn:hover .ag-catalog-add-xp {
        background-color: var(--color-brandcolor-700);
        /* bg-brandcolor-700 */
    }
    }

    /* ----- Photo Upload Area (Sake Registration) ----- */
    .ag-photoUpload {
        position: relative;
        width: calc(100% - 2rem);
        margin: 1rem auto;
        aspect-ratio: 16 / 10;
        background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
        border: 2px dashed var(--color-brandcolor-300);
        border-radius: var(--radius-xl);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        overflow: hidden;
        transition: background-color 0.2s;
    }

    .ag-photoUpload:active {
        background-color: #ffecec;
    }

    .ag-photoUpload_icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-brandcolor-500);
        border-radius: var(--radius-lg);
        color: #fff;
        margin-bottom: 0.5rem;
    }

    .ag-photoUpload_icon .material-symbols-outlined {
        font-size: 28px;
    }

    .ag-photoUpload_txt {
        font-size: var(--text-sm);
        font-weight: 700;
        color: var(--color-brandcolor-500);
    }

    .ag-photoUpload_preview {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: none;
        background-color: var(--color-slate-100);
    }

    .ag-photoUpload_preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .ag-photoUpload_preview.is_visible {
        display: block;
    }

    .ag-photoUpload_clearBtn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background-color: var(--color-slate-600);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 3;
        border: none;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .ag-photoUpload_clearBtn .material-symbols-outlined {
        font-size: 16px;
    }


    /* ----- Sake Type Select (Full Width) ----- */
    #sake_category {
        width: 100%;
    }

    /* ===================================================================
       酒図鑑 Masonry Feed — 2026-04-09 リニューアル
       =================================================================== */

    /* ----- Masonry Grid Layout (#755: column-count → flex 2カラム固定) ----- */
    /* column-count はアイテム追加のたびに全列をリバランスするため廃止。         */
    /* flex で左右独立カラムにすることで、追加時に既存の並び順が変わらない。     */
    .masonry-grid {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0 1rem;
    }

    .masonry-col {
        flex: 1;
        min-width: 0;
    }

    @media (min-width: 768px) {
        .masonry-grid {
            max-width: 960px;
            margin-left: auto;
            margin-right: auto;
            gap: 1rem;
        }
    }

    .masonry-item {
        margin-bottom: 0.75rem;
        break-inside: avoid; /* fallback */
    }

    /* ----- Catalog Card (Sake) ----- */
    .catalog-card {
        display: block;
        background: #ffffff;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0px 10px 30px rgba(91, 64, 61, 0.06);
        transition: transform 0.3s ease;
        text-decoration: none;
        color: inherit;
    }

    @media (hover: hover) {

        .catalog-card:hover {
        transform: translateY(-4px);
    }
    }

    .catalog-card:active {
        transform: scale(0.95);
        transition-duration: 0.15s;
    }

    .catalog-card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    @media (hover: hover) {

        .catalog-card:hover .catalog-card-img {
        transform: scale(1.1);
    }
    }

    .catalog-card-body {
        padding: 0.875rem;
    }

    .catalog-card-meta {
        margin-bottom: 0.375rem;
    }

    .catalog-card-title-row {
        display: flex;
        align-items: baseline;
        gap: 0.375rem;
        margin-bottom: 0.125rem;
    }

    .catalog-card-type {
        font-size: 0.625rem;
        color: var(--sq-brand);
        font-weight: 700;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .catalog-card-name {
        font-weight: 700;
        font-size: 0.875rem;
        color: var(--sq-text);
        line-height: 1.25;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-card-brewery-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.625rem;
        color: var(--sq-text-sub);
        font-weight: 500;
    }

    .catalog-card-brewery {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .catalog-card-region {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }

    .catalog-card-note {
        font-size: 0.75rem;
        color: var(--sq-text-sub);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.5;
        margin-bottom: 0.625rem;
    }

    .catalog-card-stats {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: var(--sq-text-sub);
    }

    .catalog-card-stat {
        display: flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.75rem;
        font-weight: 700;
    }

    /* ----- Like Button (Glassmorphism) ----- */
    .sake-like-btn {
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.8);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--sq-brand);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        transition: transform 0.15s;
    }

    .sake-like-btn:active {
        transform: scale(0.9);
    }

    .sake-like-btn.is-liked {
        color: var(--sq-brand);
    }

    .sake-like-btn:not(.is-liked) {
        color: var(--sq-text-sub);
    }

    /* ----- Catalog CTA Panel (図鑑に銘柄登録しよう) ----- */
    .catalog-cta-panel {
        display: block;
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        background: linear-gradient(135deg, var(--sq-brand) 0%, var(--sq-text) 60%);
        box-shadow: 0px 10px 30px rgba(91, 64, 61, 0.12);
        transition: transform 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        color: white;
    }

    @media (hover: hover) {

        .catalog-cta-panel:hover {
        transform: translateY(-4px);
    }
    }

    .catalog-cta-overlay {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 1.25rem;
    }

    .catalog-cta-title {
        font-size: 1.25rem;
        font-weight: 900;
        line-height: 1.3;
        margin-bottom: 0.375rem;
        color: white;
    }

    .catalog-cta-desc {
        font-size: 0.6875rem;
        color: rgba(255, 255, 255, 0.75);
        line-height: 1.5;
        margin-bottom: 0.75rem;
    }

    .catalog-cta-btn {
        display: inline-block;
        background: var(--sq-brand);
        color: white;
        font-size: 0.75rem;
        font-weight: 700;
        padding: 0.5rem 1.25rem;
        border-radius: 9999px;
        transition: background 0.15s;
    }

    .catalog-cta-panel:active .catalog-cta-btn {
        background: #8a0310;
    }

    /* ----- Shop Product Card ----- */
    .shop-card {
        display: block;
        background: #ffffff;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0px 10px 30px rgba(91, 64, 61, 0.06);
        transition: transform 0.3s ease;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
    }

    @media (hover: hover) {

        .shop-card:hover {
        transform: translateY(-4px);
    }
    }

    .shop-card-badge {
        position: absolute;
        top: 0.75rem;
        left: 0.75rem;
        background-color: var(--sq-brand);
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.25rem 0.5rem;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: -0.05em;
    }

    .shop-card-badge--premium {
        background-color: #b69e3f;
    }

    .shop-card-badge--new {
        background-color: #059669;
    }

    .shop-card-gradient {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
        padding: 1rem;
    }

    .shop-card-price-float {
        position: absolute;
        bottom: 0.75rem;
        right: 0.75rem;
        background: white;
        padding: 0.25rem 0.75rem;
        border-radius: 9999px;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .shop-card-footer {
        padding: 1rem;
        background: var(--sq-bg);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* ----- Subscription CTA Panel ----- */
    .sub-panel {
        background-color: var(--sq-brand-lt);
        border-radius: 1rem;
        padding: 1rem 1.25rem;
        color: #fff2f0;
        position: relative;
        overflow: hidden;
        box-shadow: 0px 10px 30px rgba(178, 4, 17, 0.15);
        transition: transform 0.3s ease;
    }

    @media (hover: hover) {

        .sub-panel:hover {
        transform: scale(1.02);
    }
    }

    .sub-panel-decoration {
        position: absolute;
        right: -1rem;
        top: -1rem;
        opacity: 0.1;
        transform: rotate(12deg);
    }

    .sub-panel-decoration .material-symbols-outlined {
        font-size: 120px;
    }

    .sub-panel-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        font-size: 0.6rem;
        font-weight: 700;
        padding: 0.2rem 0.5rem;
        border-radius: 9999px;
        margin-bottom: 0.5rem;
    }

    .sub-panel-title {
        font-size: 1.125rem;
        font-weight: 900;
        line-height: 1.3;
        margin-bottom: 0.375rem;
        white-space: nowrap;
    }

    .sub-panel-desc {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.75rem;
        margin-bottom: 1rem;
        line-height: 1.5;
    }

    .sub-panel-cta {
        display: block;
        width: 100%;
        background: white;
        color: var(--sq-brand);
        font-weight: 700;
        padding: 0.75rem;
        border-radius: 9999px;
        border: none;
        cursor: pointer;
        font-size: 0.875rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        transition: all 0.15s;
        text-align: center;
        text-decoration: none;
    }

    .sub-panel-cta:active {
        transform: scale(0.95);
    }

    /* ----- Quest Panel ----- */
    .quest-panel {
        position: relative;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0px 10px 30px rgba(91, 64, 61, 0.06);
        cursor: pointer;
    }

    .quest-panel-img {
        width: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    @media (hover: hover) {

        .quest-panel:hover .quest-panel-img {
        transform: scale(1.1);
    }
    }

    .quest-panel-gradient {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(178, 4, 17, 0.9), rgba(178, 4, 17, 0.3), transparent);
    }

    .quest-panel-content {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 1.25rem;
        width: 100%;
    }

    .quest-panel-badge {
        display: inline-block;
        background-color: #b69e3f;
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        padding: 0.25rem 0.5rem;
        border-radius: 0.125rem;
        margin-bottom: 0.5rem;
    }

    .quest-panel-title {
        color: white;
        font-weight: 900;
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .quest-panel-meta {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: rgba(255, 255, 255, 0.9);
        font-size: 0.75rem;
        margin-bottom: 1rem;
    }

    .quest-panel-limited {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.125rem 0.5rem;
        border-radius: 0.25rem;
        margin-left: 0.5rem;
    }

    .quest-panel-cta {
        display: block;
        width: 100%;
        background: rgba(255, 255, 255, 0.2);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 0.5rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        cursor: pointer;
        transition: background 0.2s;
        text-align: center;
        text-decoration: none;
    }

    @media (hover: hover) {

        .quest-panel-cta:hover {
        background: rgba(255, 255, 255, 0.3);
    }
    }

    /* ----- Article Card ----- */
    .article-card {
        border-radius: 1rem;
        padding: 1.25rem;
    }

    .article-card--tip {
        background-color: var(--sq-border);
        border: 1px solid rgba(228, 190, 186, 0.1);
    }

    .article-card--trivia {
        background-color: #fcf7ee;
        border: 1px solid rgba(228, 190, 186, 0.3);
    }

    .article-card--news {
        background-color: #eff6ff;
        border: 1px solid rgba(43, 70, 202, 0.1);
    }

    .article-card--events {
        background-color: #fefce8;
        border: 1px solid rgba(182, 158, 63, 0.2);
    }

    .article-card-category {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .article-card-category-label {
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .article-card-title {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }

    .article-card-excerpt {
        font-size: 0.75rem;
        color: var(--sq-text-sub);
        line-height: 1.625;
    }

    .article-card-quote {
        font-size: 0.875rem;
        font-weight: 500;
        font-style: italic;
        line-height: 1.625;
    }

    /* Article Card with Image */
    .article-card-img {
        display: block;
        background: #ffffff;
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0px 10px 30px rgba(91, 64, 61, 0.06);
        text-decoration: none;
        color: inherit;
    }

    .article-card-img-image {
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .article-card-img-body {
        padding: 1rem;
    }

    /* ----- Page Title ----- */
    .catalog-page-title {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0 0.25rem;
        margin-bottom: 0.75rem;
    }

    .catalog-page-title-icon {
        background: var(--sq-brand);
        color: white;
        padding: 0.5rem;
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(178, 4, 17, 0.25);
        transform: rotate(3deg);
        flex-shrink: 0;
    }

    .catalog-page-title-text {
        font-size: 1.75rem;
        font-weight: 900;
        color: var(--sq-text);
        letter-spacing: -0.02em;
        line-height: 1.1;
    }

    .catalog-page-title-sub {
        color: var(--sq-text-sub);
        font-size: 0.6875rem;
        font-weight: 500;
        margin-top: 0.125rem;
    }

    /* ----- Statistics Header ----- */
    .catalog-stats {
        background: var(--sq-bg);
        border-radius: 1rem;
        padding: 0.75rem;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        text-align: center;
        border: 1px solid rgba(228, 190, 186, 0.2);
        box-shadow: 0 2px 8px rgba(91, 64, 61, 0.04);
    }

    .catalog-stats-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.375rem 0.25rem;
    }

    .catalog-stats-icon {
        color: var(--sq-brand);
        margin-bottom: 0.25rem;
    }

    .catalog-stats-label {
        color: var(--sq-text-sub);
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin-bottom: 0.125rem;
    }

    .catalog-stats-value {
        color: var(--sq-text);
        font-weight: 900;
        font-size: 1.125rem;
        line-height: 1;
    }

    .catalog-stats-divider {
        border-left: 1px solid rgba(228, 190, 186, 0.2);
        border-right: 1px solid rgba(228, 190, 186, 0.2);
    }

    /* ----- Search Bar (Masonry Style) ----- */
    .catalog-search-bar {
        display: flex;
        align-items: center;
        position: relative;
    }

    .catalog-search-input {
        display: block;
        width: 100%;
        background: var(--sq-bg);
        border: none;
        border-radius: 9999px;
        padding: 1rem 3.5rem 1rem 3rem;
        color: var(--sq-text);
        font-size: 0.875rem;
        font-weight: 500;
        outline: none;
        transition: box-shadow 0.2s;
    }

    .catalog-search-input::placeholder {
        color: var(--sq-text-sub);
    }

    .catalog-search-input:focus {
        box-shadow: 0 0 0 2px rgba(178, 4, 17, 0.2);
    }

    .catalog-search-icon {
        position: absolute;
        left: 1rem;
        color: var(--sq-text-sub);
        pointer-events: none;
    }

    .catalog-filter-btn {
        position: absolute;
        right: 0.5rem;
        background: var(--sq-brand);
        color: white;
        border: none;
        border-radius: 9999px;
        width: 2.25rem;
        height: 2.25rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
    }

    @media (hover: hover) {

        .catalog-filter-btn:hover {
        background: rgba(178, 4, 17, 0.9);
    }
    }

    /* ============================================================

銘柄登録フォーム — 2026-04-13 リニューアル (#38)
       =================================================================== */

    /* ----- Photo Upload: Viewfinder Style ----- */
    .sake-register-photo {
        position: relative;
        width: calc(100% - 2rem);
        margin: 0 auto;
        aspect-ratio: 3 / 4;
        background: #ffffff;
        border-radius: 2rem;
        border: 1px solid rgba(228, 190, 186, 0.3);
        box-shadow: 0 1px 3px rgba(91, 64, 61, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        overflow: hidden;
        padding: 1.5rem;
        transition: box-shadow 0.3s;
    }

    @media (hover: hover) {

        .sake-register-photo:hover {
        box-shadow: 0 4px 12px rgba(91, 64, 61, 0.12);
    }
    }

    /* Viewfinder dashed border */
    .sake-register-photo__frame {
        position: absolute;
        inset: 1.25rem;
        border: 2px dashed rgba(228, 190, 186, 0.4);
        border-radius: 1rem;
        pointer-events: none;
    }

    /* Corner marks */
    .sake-register-photo__corner {
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        pointer-events: none;
    }

    .sake-register-photo__corner--tl {
        top: 2rem;
        left: 2rem;
        border-top: 4px solid rgba(178, 4, 17, 0.4);
        border-left: 4px solid rgba(178, 4, 17, 0.4);
        border-top-left-radius: 0.75rem;
    }

    .sake-register-photo__corner--tr {
        top: 2rem;
        right: 2rem;
        border-top: 4px solid rgba(178, 4, 17, 0.4);
        border-right: 4px solid rgba(178, 4, 17, 0.4);
        border-top-right-radius: 0.75rem;
    }

    .sake-register-photo__corner--bl {
        bottom: 2rem;
        left: 2rem;
        border-bottom: 4px solid rgba(178, 4, 17, 0.4);
        border-left: 4px solid rgba(178, 4, 17, 0.4);
        border-bottom-left-radius: 0.75rem;
    }

    .sake-register-photo__corner--br {
        bottom: 2rem;
        right: 2rem;
        border-bottom: 4px solid rgba(178, 4, 17, 0.4);
        border-right: 4px solid rgba(178, 4, 17, 0.4);
        border-bottom-right-radius: 0.75rem;
    }

    /* Camera button */
    .sake-register-photo__btn {
        position: relative;
        background: var(--sq-brand);
        color: #fff;
        width: 4rem;
        height: 4rem;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(178, 4, 17, 0.3);
        transition: transform 0.15s;
        z-index: 2;
    }

    .sake-register-photo__btn:active {
        transform: scale(0.95);
    }

    .sake-register-photo__btn .material-symbols-outlined {
        font-size: 2rem;
    }

    /* Ping animation ring */
    .sake-register-photo__ping {
        position: absolute;
        inset: 0;
        background: rgba(178, 4, 17, 0.2);
        border-radius: 9999px;
        animation: sake-register-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    @keyframes sake-register-ping {
        0% {
            transform: scale(1);
            opacity: 0.75;
        }
        75%, 100% {
            transform: scale(1.8);
            opacity: 0;
        }
    }

    /* Tips badge */
    .sake-register-photo__tips {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        background: var(--sq-bg);
        padding: 0.375rem 1rem;
        border-radius: 9999px;
        border: 1px solid rgba(228, 190, 186, 0.2);
        font-size: 0.6875rem;
        font-weight: 700;
        color: var(--sq-brand);
        letter-spacing: 0.05em;
        z-index: 2;
    }

    .sake-register-photo__tips .material-symbols-outlined {
        font-size: 1rem;
    }

    .sake-register-photo__guide {
        font-size: 0.6875rem;
        color: rgba(91, 64, 61, 0.8);
        text-align: center;
        line-height: 1.6;
        font-weight: 500;
        z-index: 2;
    }

    .sake-register-photo__guide strong {
        font-weight: 700;
        color: var(--sq-brand);
    }

    /* Preview overlay */
    .sake-register-photo__preview {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: none;
        background: #f1f5f9;
        border-radius: 2rem;
        overflow: hidden;
    }

    .sake-register-photo__preview.is_visible {
        display: block;
    }

    .sake-register-photo__preview img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .sake-register-photo__clear {
        position: absolute;
        top: 1rem;
        right: 1rem;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 6;
        border: none;
        backdrop-filter: blur(8px);
    }

    .sake-register-photo__clear .material-symbols-outlined {
        font-size: 1.125rem;
    }

    /* ----- Unified Form Fields ----- */
    .sake-register-section {
        padding: 0 1.5rem;
    }

    .sake-register-label {
        display: block;
        font-size: 0.6875rem;
        font-weight: 700;
        color: rgba(91, 64, 61, 0.7);
        margin-left: 0.5rem;
        margin-bottom: 0.5rem;
        letter-spacing: 0.1em;
    }

    .sake-register-label em {
        font-style: normal;
        color: var(--sq-brand);
        margin-left: 0.25rem;
    }

    .sake-register-field {
        width: 100%;
        background: #ffffff;
        border: none;
        box-shadow: inset 0 0 0 1px rgba(228, 190, 186, 0.2);
        border-radius: 1rem;
        height: 3.5rem;
        padding: 0 1.25rem;
        font-size: 0.9375rem;
        color: var(--sq-text);
        outline: none;
        transition: box-shadow 0.2s;
        appearance: none;
        -webkit-appearance: none;
    }

    .sake-register-field:focus {
        box-shadow: inset 0 0 0 2px rgba(178, 4, 17, 0.4);
    }

    .sake-register-field::placeholder {
        color: rgba(91, 64, 61, 0.35);
    }

    .sake-register-field--select {
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b403d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        padding-right: 2.5rem;
    }

    .sake-register-textarea {
        width: 100%;
        background: #ffffff;
        border: none;
        box-shadow: inset 0 0 0 1px rgba(228, 190, 186, 0.2);
        border-radius: 1.5rem;
        padding: 1.25rem;
        font-size: 0.9375rem;
        color: var(--sq-text);
        outline: none;
        resize: none;
        transition: box-shadow 0.2s;
        font-family: inherit;
    }

    .sake-register-textarea:focus {
        box-shadow: inset 0 0 0 2px rgba(178, 4, 17, 0.4);
    }

    .sake-register-textarea::placeholder {
        color: rgba(91, 64, 61, 0.35);
    }

    .sake-register-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

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

    .sake-register-field-group {
        margin-bottom: 1.5rem;
    }

    .sake-register-error {
        display: block;
        font-size: 0.6875rem;
        color: var(--sq-brand);
        margin-top: 0.375rem;
        margin-left: 0.5rem;
        font-weight: 500;
    }

    /* Icon inside field */
    .sake-register-field-icon {
        position: relative;
    }

    .sake-register-field-icon .material-symbols-outlined {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(91, 64, 61, 0.5);
        font-size: 1.25rem;
        pointer-events: none;
    }

    /* Brewery free-input toggle */
    .sake-register-brewery-free {
        display: none;
    }

    .sake-register-brewery-free.is-active {
        display: block;
    }

    .sake-register-brewery-back {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        font-size: 0.6875rem;
        color: var(--sq-brand);
        font-weight: 700;
        cursor: pointer;
        margin-top: 0.375rem;
        background: none;
        border: none;
        padding: 0;
    }

    .sake-register-brewery-back .material-symbols-outlined {
        font-size: 0.875rem;
    }

    /* Char counter */
    .sake-register-charcount {
        font-size: 0.625rem;
        color: rgba(91, 64, 61, 0.4);
        font-family: monospace;
        text-align: right;
        margin-top: 0.25rem;
        margin-right: 0.5rem;
    }

    /* ----- Tag Chips ----- */
    .sake-register-tags {
        margin-bottom: 1.5rem;
    }

    .sake-register-tags__category {
        margin-bottom: 1rem;
    }

    .sake-register-tags__category-name {
        font-size: 0.6875rem;
        font-weight: 700;
        color: rgba(91, 64, 61, 0.6);
        margin-bottom: 0.5rem;
        margin-left: 0.25rem;
    }

    .sake-register-tags__list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .sake-register-tag-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.875rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid rgba(228, 190, 186, 0.3);
        background: #ffffff;
        color: var(--sq-text-sub);
        transition: all 0.15s;
        user-select: none;
    }

    @media (hover: hover) {

        .sake-register-tag-chip:hover {
        border-color: rgba(178, 4, 17, 0.3);
    }
    }

    .sake-register-tag-chip.is-selected {
        background: var(--sq-brand);
        color: #ffffff;
        border-color: var(--sq-brand);
        box-shadow: 0 2px 6px rgba(178, 4, 17, 0.2);
    }

    .sake-register-tag-chip input[type="checkbox"] {
        display: none;
    }

    /* ----- Hint Card ----- */
    .sake-register-hint {
        background: var(--sq-bg);
        border-radius: 1.5rem;
        padding: 1.25rem 1.5rem;
        margin: 0 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .sake-register-hint__inner {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        position: relative;
        z-index: 1;
    }

    .sake-register-hint__icon {
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 9999px;
        background: #ffdfa0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5c4300;
    }

    .sake-register-hint__icon .material-symbols-outlined {
        font-size: 1.25rem;
    }

    .sake-register-hint__title {
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--sq-text);
        margin-bottom: 0.25rem;
    }

    .sake-register-hint__text {
        font-size: 0.75rem;
        color: var(--sq-text-sub);
        line-height: 1.6;
    }

    .sake-register-hint__deco {
        position: absolute;
        right: -1rem;
        bottom: -1rem;
        color: var(--sq-text);
        opacity: 0.05;
    }

    .sake-register-hint__deco .material-symbols-outlined {
        font-size: 8rem;
    }

    /* ----- First Discoverer Panel ----- */
    .sake-register-discoverer {
        background: linear-gradient(135deg, #ffdfa0 0%, #f8bd2a 100%);
        border: 1px solid rgba(113, 83, 0, 0.2);
        border-radius: 1.5rem;
        padding: 1rem 1.25rem;
        margin: 0 1.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 1px 3px rgba(91, 64, 61, 0.06);
    }

    .sake-register-discoverer__user {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .sake-register-discoverer__avatar-wrap {
        position: relative;
        flex-shrink: 0;
    }

    .sake-register-discoverer__avatar {
        width: 3rem;
        height: 3rem;
        border-radius: 9999px;
        border: 2px solid #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        object-fit: cover;
    }

    .sake-register-discoverer__avatar-badge {
        position: absolute;
        bottom: -0.125rem;
        right: -0.125rem;
        background: var(--sq-brand);
        color: #fff;
        border-radius: 9999px;
        padding: 0.125rem;
        border: 2px solid #fff;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sake-register-discoverer__avatar-badge .material-symbols-outlined {
        font-size: 0.75rem;
    }

    .sake-register-discoverer__label {
        display: inline-block;
        font-size: 0.625rem;
        font-weight: 700;
        background: rgba(255, 255, 255, 0.6);
        color: #715300;
        padding: 0.125rem 0.5rem;
        border-radius: 0.375rem;
        margin-bottom: 0.125rem;
    }

    .sake-register-discoverer__name {
        font-size: 0.875rem;
        font-weight: 700;
        color: #261a00;
    }

    .sake-register-discoverer__note {
        font-size: 0.6875rem;
        color: #715300;
        font-weight: 700;
        margin-top: 0.125rem;
    }

    .sake-register-discoverer__crown {
        flex-shrink: 0;
        width: 3rem;
        height: 3rem;
        border-radius: 9999px;
        background: #fff;
        color: var(--sq-brand);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(178, 4, 17, 0.1);
    }

    .sake-register-discoverer__crown .material-symbols-outlined {
        font-size: 1rem;
        margin-bottom: 0.0625rem;
    }

    .sake-register-discoverer__crown span:last-child {
        font-size: 0.5rem;
        font-weight: 700;
        line-height: 1;
    }

    /* ----- Submit Button ----- */
    .sake-register-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
        height: 4rem;
        border-radius: 9999px;
        border: none;
        background: linear-gradient(135deg, #b20411 0%, #d6353b 100%);
        color: #fff;
        font-size: 1.125rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(178, 4, 17, 0.3);
        transition: all 0.15s;
    }

    @media (hover: hover) {

        .sake-register-submit:hover {
        box-shadow: 0 12px 32px rgba(178, 4, 17, 0.4);
    }
    }

    .sake-register-submit:active {
        transform: scale(0.95);
    }

    .sake-register-submit:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    .sake-register-submit .material-symbols-outlined {
        font-size: 1.5rem;
    }
}

    /* ----- Notification Bell & Badge ----- */
    .ag-notification-bell {
        position: relative;
        background: none;
        border: none;
        color: var(--color-slate-600);
        padding: 0.25rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
    }

    .ag-notification-bell:active {
        color: var(--color-brandcolor-500);
    }

    .ag-notification-badge {
        position: absolute;
        top: -2px;
        right: -2px;
        background-color: #f43f5e; /* rose-500 */
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        min-width: 1rem;
        height: 1rem;
        padding: 0 0.25rem;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid white;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }

    /* ----- Notification Drawer ----- */
    .ag-notification-overlay {
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        backdrop-filter: blur(2px);
    }

    .ag-notification-overlay.is_visible {
        opacity: 1;
        visibility: visible;
    }

    .ag-notification-drawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 400px;
        height: 100%;
        background-color: white;
        z-index: 1001;
        transition: right 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        flex-direction: column;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    }

    .ag-notification-drawer.is_open {
        right: 0;
    }

    .ag-notification-header {
        padding: 1.25rem;
        border-bottom: 1px solid var(--color-slate-100);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ag-notification-header h3 {
        font-weight: 900;
        font-size: 1.125rem;
        color: var(--color-slate-900);
    }

    .ag-notification-close {
        background: none;
        border: none;
        color: var(--color-slate-400);
        cursor: pointer;
    }

    .ag-notification-list {
        flex: 1;
        overflow-y: auto;
        padding: 0.5rem 0;
    }

    .ag-notification-item {
        padding: 1rem 1.25rem;
        display: flex;
        gap: 0.75rem;
        text-decoration: none;
        color: inherit;
        border-bottom: 1px solid var(--color-slate-50);
        transition: background-color 0.2s;
    }

    .ag-notification-item:active {
        background-color: var(--color-slate-50);
    }

    .ag-notification-item.is_unread {
        background-color: rgba(79, 70, 229, 0.03); /* brandcolor-50/something */
    }

    .ag-notification-item-icon {
        width: 2.25rem;
        height: 2.25rem;
        background-color: var(--color-brandcolor-50);
        color: var(--color-brandcolor-600);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ag-notification-item-content {
        flex: 1;
    }

    .ag-notification-item-msg {
        font-size: 0.875rem;
        line-height: 1.4;
        color: var(--color-slate-800);
        margin-bottom: 0.25rem;
    }

    .ag-notification-item-time {
        font-size: 0.75rem;
        color: var(--color-slate-400);
    }

    .ag-notification-empty {
        padding: 3rem 1.25rem;
        text-align: center;
        color: var(--color-slate-400);
    }

    .ag-notification-empty .material-symbols-outlined {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: block;
    }

    /* ================================================================
       V2 銘柄登録フォーム (#162)
       ================================================================ */

    /* --- タグチップ共通 --- */
    .sake-v2-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .sake-v2-chip {
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 700;
        border: 1px solid #e4beba40;
        background: #fafaf5;
        color: var(--sq-text-sub);
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }
    @media (hover: hover) {
        .sake-v2-chip:hover {
        background: var(--sq-border);
    }
    }
    .sake-v2-chip.is-selected {
        background: var(--sq-brand);
        color: #fff;
        border-color: var(--sq-brand);
        box-shadow: 0 2px 8px rgba(178,4,17,.25);
        transform: scale(1.05);
    }
    .sake-v2-chip--tag {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
    .sake-v2-chip--tag.is-selected {
        background: #75584d;
        border-color: #75584d;
    }
    .sake-v2-chip--tag input[type="checkbox"] {
        display: none;
    }

    /* --- カスタム入力展開 --- */
    .sake-v2-custom-input {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        margin-top: 0;
    }
    .sake-v2-custom-input.is-active {
        max-height: 4rem;
        opacity: 1;
        margin-top: 0.75rem;
    }

    /* --- 地方タブ --- */
    .sake-v2-region-tabs {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .sake-v2-region-tabs::-webkit-scrollbar { display: none; }
    .sake-v2-region-tab {
        flex-shrink: 0;
        padding: 0.5rem 1rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        border: 1px solid #e4beba40;
        background: #fafaf5;
        color: var(--sq-text-sub);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .sake-v2-region-tab.is-active {
        background: #e3e3de;
        color: var(--sq-text);
        box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
    }
    @media (hover: hover) {
        .sake-v2-region-tab:hover:not(.is-active) {
        background: var(--sq-border);
    }
    }

    /* --- 都道府県エリア --- */
    .sake-v2-prefecture-area {
        background: #fff;
        padding: 1rem;
        border-radius: 1rem;
        border: 1px solid #e4beba30;
        min-height: 7.5rem;
        margin-top: 0.5rem;
    }
    .sake-v2-prefecture-group {
        display: none;
        flex-wrap: wrap;
        gap: 0.5rem;
        animation: sakeFadeIn 0.2s ease;
    }
    .sake-v2-prefecture-group.is-active { display: flex; }

    @keyframes sakeFadeIn {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* --- アコーディオン --- */
    .sake-v2-accordion-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem;
        border: 1px solid #e4beba40;
        border-radius: 1.5rem;
        background: var(--sq-bg);
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .sake-v2-accordion-trigger.is-open {
        border-radius: 1.5rem 1.5rem 0 0;
        border-bottom: none;
    }
    @media (hover: hover) {
        .sake-v2-accordion-trigger:hover { background: var(--sq-border); }
    }
    .sake-v2-accordion-trigger__left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .sake-v2-accordion-trigger__icon {
        background: #fff;
        padding: 0.5rem;
        border-radius: 9999px;
        box-shadow: 0 1px 3px rgba(0,0,0,.06);
        color: var(--sq-brand);
        display: flex;
        transition: transform 0.2s;
    }
    @media (hover: hover) {
        .sake-v2-accordion-trigger:hover .sake-v2-accordion-trigger__icon {
        transform: scale(1.1);
    }
    }
    .sake-v2-accordion-trigger__text {
        font-weight: 700;
        color: var(--sq-text);
        white-space: nowrap;
        font-size: 0.8125rem;
    }
    .sake-v2-accordion-trigger__arrow {
        color: var(--sq-text-sub);
        transition: transform 0.3s ease;
    }

    .sake-v2-accordion-body {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease;
    }
    .sake-v2-accordion-body.is-open {
        max-height: 200rem;
    }
    .sake-v2-accordion-body__inner {
        background: #fff;
        padding: 1.5rem;
        border: 1px solid #e4beba40;
        border-top: none;
        border-radius: 0 0 1.5rem 1.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
    }

    /* --- スライダー --- */
    .sake-v2-slider-group {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .sake-v2-slider-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .sake-v2-slider-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #5b403d99;
        letter-spacing: 0.1em;
        display: flex;
        align-items: center;
        gap: 0.375rem;
    }
    .sake-v2-slider-label .material-symbols-outlined {
        font-size: 1rem;
    }
    .sake-v2-slider-value {
        font-size: 1.875rem;
        font-weight: 900;
        font-family: 'Plus Jakarta Sans', monospace;
        color: var(--sq-brand);
        transition: color 0.2s;
    }
    .sake-v2-slider-value.is-unknown {
        color: #5b403d30;
    }
    .sake-v2-slider-unit {
        font-size: 1.125rem;
        margin-left: 0.25rem;
        color: #5b403d80;
    }
    .sake-v2-slider-value.is-unknown .sake-v2-slider-unit {
        color: #5b403d20;
    }
    .sake-v2-slider-track {
        transition: opacity 0.2s;
    }
    .sake-v2-slider-track.is-disabled {
        opacity: 0.4;
        pointer-events: none;
    }
    .sake-v2-slider {
        width: 100%;
        height: 0.5rem;
        border-radius: 0.5rem;
        background: #e3e3de;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }
    .sake-v2-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--sq-brand);
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(178,4,17,.3);
        cursor: pointer;
    }
    .sake-v2-slider::-moz-range-thumb {
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: var(--sq-brand);
        border: 3px solid #fff;
        box-shadow: 0 2px 6px rgba(178,4,17,.3);
        cursor: pointer;
    }
    .sake-v2-slider-reaction {
        display: inline-block;
        margin-top: 0.75rem;
        padding: 0.5rem 1rem;
        border-radius: 0.75rem;
        font-size: 0.75rem;
        font-weight: 700;
        background: rgba(113,83,0,.08);
        color: #715300;
    }
    .sake-v2-slider-reaction:empty { display: none; }

    /* --- 不明ボタン --- */
    .sake-v2-unknown-btn {
        align-self: flex-start;
        padding: 0.375rem 1rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        border: 1px solid #e4beba40;
        background: #fafaf5;
        color: #5b403d99;
        cursor: pointer;
        transition: all 0.2s;
    }
    @media (hover: hover) {
        .sake-v2-unknown-btn:hover {
        background: var(--sq-border);
    }
    }
    .sake-v2-unknown-btn.is-active {
        background: var(--sq-brand);
        color: #fff;
        border-color: var(--sq-brand);
        box-shadow: 0 2px 8px rgba(178,4,17,.25);
    }

    /* --- 無効化ゾーン --- */
    .sake-v2-disabled-zone {
        opacity: 0.4;
        pointer-events: none;
        transition: opacity 0.2s;
    }

    /* --- 公式スペックタグ --- */
    .sake-v2-spec-tags {
        padding-top: 1rem;
        border-top: 1px solid #e4beba20;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    .sake-v2-spec-tags__header {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--sq-text-sub);
    }
    .sake-v2-spec-tags__header .material-symbols-outlined {
        font-size: 1rem;
    }
    .sake-v2-spec-tags__category {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .sake-v2-spec-tags__category-name {
        font-size: 0.625rem;
        font-weight: 700;
        color: #5b403d99;
        letter-spacing: 0.1em;
    }

    /* --- 丸角フィールド --- */
    .sake-register-field--rounded {
        border-radius: 1rem !important;
        height: 3.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .sake-register-textarea--rounded {
        border-radius: 1.5rem !important;
        padding: 1.25rem;
    }

    /* --- くす玉オーバーレイ --- */
    .sake-v2-kusudama-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        display: none;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 8rem;
        background: rgba(0,0,0,.8);
        backdrop-filter: blur(4px);
        overflow: hidden;
    }
    .sake-v2-kusudama-overlay.is-active {
        display: flex;
    }

    .sake-v2-kusudama {
        position: relative;
        width: 16rem;
        height: 16rem;
    }

    /* Rope */
    .sake-v2-kusudama__rope {
        position: absolute;
        top: -8rem;
        left: 50%;
        transform: translateX(-50%);
        width: 0.25rem;
        height: 8rem;
        background: #b8860b;
        animation: kusudamaRopeDrop 0.4s ease-out forwards;
    }

    /* Kusudama halves */
    .sake-v2-kusudama__half {
        position: absolute;
        top: 0;
        width: 8rem;
        height: 16rem;
        overflow: hidden;
    }
    .sake-v2-kusudama__half--left {
        left: 0;
        transform-origin: top right;
        animation: kusudamaSplitLeft 0.5s ease-out 0.5s forwards;
    }
    .sake-v2-kusudama__half--right {
        right: 0;
        transform-origin: top left;
        animation: kusudamaSplitRight 0.5s ease-out 0.5s forwards;
    }
    .sake-v2-kusudama__ball {
        width: 16rem;
        height: 16rem;
        border-radius: 50%;
        background: linear-gradient(135deg, #ffd700 0%, #daa520 50%, #b8860b 100%);
        border: 4px solid #ffe680;
        box-shadow: 0 8px 32px rgba(0,0,0,.3);
    }
    .sake-v2-kusudama__half--right .sake-v2-kusudama__ball {
        margin-left: -8rem;
    }

    /* Banner (垂れ幕) */
    .sake-v2-kusudama__banner {
        position: absolute;
        top: 4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 5rem;
        height: 0;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 1rem;
        box-shadow: 0 8px 32px rgba(0,0,0,.3);
        overflow: hidden;
        z-index: 10;
        border-left: 2px solid rgba(218,165,32,.3);
        border-right: 2px solid rgba(218,165,32,.3);
        border-bottom: 2px solid rgba(218,165,32,.3);
        animation: bannerUnroll 0.8s ease-out 0.6s forwards;
    }
    .sake-v2-kusudama__banner-text {
        writing-mode: vertical-rl;
        font-size: 1.5rem;
        font-weight: 900;
        color: var(--sq-brand);
        letter-spacing: 0.3em;
        white-space: nowrap;
    }
    .sake-v2-kusudama__banner-sparkle {
        color: #daa520;
        margin-top: auto;
        margin-bottom: 0.5rem;
        font-size: 1.5rem;
    }

    .sake-v2-kusudama__message {
        margin-top: 8rem;
        color: #fff;
        font-weight: 700;
        font-size: 1.25rem;
        letter-spacing: 0.1em;
        text-align: center;
        opacity: 0;
        animation: sakeFadeIn 0.4s ease 1.5s forwards;
    }
    .sake-v2-kusudama__tap-hint {
        margin-top: 2rem;
        color: rgba(255,255,255,.5);
        font-size: 0.875rem;
        opacity: 0;
        animation: sakeFadeIn 0.4s ease 3s forwards, sakePulse 2s infinite 3.4s;
    }

    @keyframes kusudamaRopeDrop {
        from { transform: translateX(-50%) translateY(-100%); }
        to { transform: translateX(-50%) translateY(0); }
    }
    @keyframes kusudamaSplitLeft {
        to { transform: rotate(45deg) translateX(-10px); }
    }
    @keyframes kusudamaSplitRight {
        to { transform: rotate(-45deg) translateX(10px); }
    }
    @keyframes bannerUnroll {
        to { height: 14rem; }
    }
    @keyframes sakePulse {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    /* アクセシビリティ: prefers-reduced-motion */
    @media (prefers-reduced-motion: reduce) {
        .sake-v2-kusudama__rope,
        .sake-v2-kusudama__half--left,
        .sake-v2-kusudama__half--right,
        .sake-v2-kusudama__banner,
        .sake-v2-kusudama__message,
        .sake-v2-kusudama__tap-hint {
            animation: none !important;
        }
        .sake-v2-kusudama__banner { height: 14rem; }
        .sake-v2-kusudama__message { opacity: 1; }
        .sake-v2-kusudama__tap-hint { opacity: 0.5; }
    }


    /* === 酒蔵チップ選択 UI (#182) === */
    .sake-v2-brewery-search {
        position: relative;
        margin-bottom: 0.75rem;
    }
    .sake-v2-brewery-search input {
        width: 100%;
        padding: 0.625rem 0.875rem 0.625rem 2.5rem;
        border: 1.5px solid #e0ddd5;
        border-radius: 1.5rem;
        background: #fafaf5;
        font-size: 0.875rem;
        color: #3a2a22;
        outline: none;
        transition: border-color 0.2s;
    }
    .sake-v2-brewery-search input:focus {
        border-color: var(--sq-brand);
    }
    .sake-v2-brewery-search__icon {
        position: absolute;
        left: 0.75rem;
        top: 50%;
        transform: translateY(-50%);
        color: #9a9590;
        font-size: 1.125rem;
        pointer-events: none;
    }
    .sake-v2-brewery-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        max-height: 15rem;
        overflow-y: auto;
        padding: 0.25rem 0;
        scrollbar-width: thin;
        scrollbar-color: #d4d0c8 transparent;
    }
    .sake-v2-brewery-chips::-webkit-scrollbar {
        width: 4px;
    }
    .sake-v2-brewery-chips::-webkit-scrollbar-thumb {
        background: #d4d0c8;
        border-radius: 2px;
    }
    .sake-v2-brewery-chip {
        display: inline-flex;
        align-items: center;
        padding: 0.375rem 0.875rem;
        border-radius: 1.25rem;
        border: 1.5px solid #e0ddd5;
        background: #fafaf5;
        color: var(--sq-text-sub);
        font-size: 0.8125rem;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
    }
    @media (hover: hover) {
        .sake-v2-brewery-chip:hover {
            border-color: var(--sq-brand);
            color: var(--sq-brand);
        }
    }
    .sake-v2-brewery-chip.is-selected {
        background: var(--sq-brand);
        color: #fff;
        border-color: var(--sq-brand);
        box-shadow: 0 2px 8px rgba(178,4,17,.25);
    }
    .sake-v2-brewery-chip.is-hidden {
        display: none;
    }
    .sake-v2-brewery-free-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.75rem;
        padding: 0.375rem 0;
        color: #9a9590;
        font-size: 0.8125rem;
        cursor: pointer;
        border: none;
        background: none;
        transition: color 0.2s;
    }
    @media (hover: hover) {
        .sake-v2-brewery-free-link:hover {
        color: var(--sq-brand);
    }
    }
    .sake-v2-brewery-no-results {
        color: #9a9590;
        font-size: 0.8125rem;
        padding: 0.5rem 0;
    }
    .sake-v2-brewery-loading {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: #9a9590;
        font-size: 0.8125rem;
        padding: 1rem 0;
    }
    .sake-v2-brewery-loading__spinner {
        display: block;
        width: 1rem;
        height: 1rem;
        border: 2px solid #e2e8f0;
        border-top-color: var(--sq-brand);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }


/* ================================================================
   のみログ投稿画面 (#189)
   V2デザインシステムを完全踏襲
   ================================================================ */

.nomilog-page {
    background: var(--sq-bg);
    min-height: 100vh;
    padding-bottom: 2rem;
}

/* のみログ用: 写真エリアをコンパクトに */
.nomilog-page .sake-register-photo {
    aspect-ratio: auto;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    min-height: auto;
}

.nomilog-chips-card {
    background: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(91, 64, 61, 0.06);
    border: 1px solid rgba(228, 190, 186, 0.2);
    padding: 1.5rem;
    margin: 2rem 1.5rem 0;
}

.nomilog-phase {
    transition: all 0.3s ease-out;
}

.nomilog-phase--hidden {
    display: none;
}

.nomilog-phase__divider {
    border-top: 1px solid rgba(228, 190, 186, 0.2);
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.nomilog-phase__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nomilog-phase__badge {
    background: var(--sq-brand);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 700;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.nomilog-phase__badge--gold {
    background: linear-gradient(135deg, #ffdfa0 0%, #f8bd2a 100%);
    color: var(--sq-text-sub);
}

.nomilog-phase__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sq-text);
}

.nomilog-phase__hint {
    font-size: 0.625rem;
    font-weight: 400;
    color: rgba(91, 64, 61, 0.6);
}

.nomilog-phase__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.nomilog-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(228, 190, 186, 0.4);
    background: #ffffff;
    color: var(--sq-text-sub);
    transition: all 0.15s;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {

    .nomilog-chip:hover {
    background: var(--sq-bg);
}
}

.nomilog-chip:active {
    transform: scale(0.96);
}

.nomilog-chip.is-selected {
    background: var(--sq-brand);
    color: #ffffff;
    border-color: var(--sq-brand);
    box-shadow: 0 2px 6px rgba(178, 4, 17, 0.2);
}

.nomilog-chip__badge {
    position: absolute;
    top: -0.25rem;
    left: -0.25rem;
    background: var(--sq-brand);
    color: #fff;
    font-size: 0.5625rem;
    width: 1rem;
    height: 1rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 10;
    font-weight: 700;
}

#phase-5 .nomilog-chip.is-selected {
    background: linear-gradient(135deg, #ffdfa0 0%, #f8bd2a 100%);
    color: var(--sq-text-sub);
    border-color: #f8bd2a;
}

#phase-5 .nomilog-chip__badge {
    background: linear-gradient(135deg, #ffdfa0 0%, #f8bd2a 100%);
    color: var(--sq-text-sub);
}

.nomilog-ochoko-card {
    background: #ffffff;
    border-radius: 2rem;
    box-shadow: 0 1px 3px rgba(91, 64, 61, 0.06);
    border: 1px solid rgba(228, 190, 186, 0.2);
    padding: 1.5rem;
    margin: 2rem 1.5rem 0;
    text-align: center;
}

.nomilog-ochoko-card__title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--sq-text);
    margin-bottom: 1.25rem;
}

.nomilog-ochoko__row {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.nomilog-ochoko__cup {
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sq-bg);
    border: 1px solid rgba(228, 190, 186, 0.4);
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(91, 64, 61, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.nomilog-ochoko__cup:active {
    transform: scale(0.9);
}

.nomilog-ochoko__cup.is-filled {
    background: var(--sq-brand);
    border-color: var(--sq-brand);
    color: #fff;
    box-shadow: 0 2px 8px rgba(178, 4, 17, 0.25);
}

.nomilog-ochoko__cup.is-gold {
    background: linear-gradient(135deg, #ffdfa0 0%, #f8bd2a 100%);
    border-color: #f8bd2a;
    color: #fff;
    box-shadow: 0 4px 12px rgba(248, 189, 42, 0.4);
    transform: scale(1.1);
}

.nomilog-ochoko__svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
}

.nomilog-ochoko__cup.is-filled .nomilog-ochoko__svg,
.nomilog-ochoko__cup.is-gold .nomilog-ochoko__svg {
    fill: currentColor;
}

.nomilog-ochoko__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--sq-brand);
}

.nomilog-scene-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* --- Tone Chips (AI文体制御) --- */
.nomilog-tone-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.nomilog-tone-group-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #666;
    min-width: 4.5rem;
    flex-shrink: 0;
}

.nomilog-tone-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nomilog-ai-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    background: linear-gradient(135deg, #4f46e5 0%, #9333ea 100%);
    color: #fff;
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 1rem;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.3);
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {

    .nomilog-ai-btn:hover {
    box-shadow: 0 12px 32px rgba(79, 70, 229, 0.4);
}
}

.nomilog-ai-btn:active {
    transform: scale(0.95);
}

.nomilog-ai-btn .material-symbols-outlined {
    font-size: 1.25rem;
}

.nomilog-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--sq-text-sub);
    font-weight: 600;
    font-size: 0.875rem;
}

.nomilog-ai-spinner {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(91, 64, 61, 0.2);
    border-top-color: #9333ea;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.nomilog-suggest {
    background: #fff;
    border: 1px solid rgba(228, 190, 186, 0.3);
    border-radius: 1rem;
    box-shadow: 0 4px 16px rgba(91, 64, 61, 0.1);
    margin-top: 0.5rem;
    max-height: 15rem;
    overflow-y: auto;
    z-index: 50;
    position: relative;
}

.nomilog-suggest__heading {
    padding: 0.5rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: rgba(91, 64, 61, 0.5);
    background: var(--sq-bg);
}

.nomilog-suggest__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid rgba(228, 190, 186, 0.1);
}

@media (hover: hover) {

    .nomilog-suggest__item:hover {
    background: var(--sq-bg);
}
}

.nomilog-suggest__item:last-child {
    border-bottom: none;
}

.nomilog-celebration {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.nomilog-celebration.hidden {
    display: none;
}

.nomilog-celebration__content {
    text-align: center;
}

.nomilog-celebration__tokkuri-wrap {
    position: relative;
    width: 16rem;
    height: 16rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.nomilog-celebration__tokkuri {
    width: 6rem;
    height: 6rem;
    color: #fff;
    position: absolute;
}

.nomilog-celebration__tokkuri--left {
    animation: tokkuriLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nomilog-celebration__tokkuri--right {
    animation: tokkuriRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.nomilog-celebration__sparkle {
    position: absolute;
    top: -1rem;
    color: #f8bd2a;
    font-size: 4rem;
    animation: sparkleIn 0.6s ease-out 0.4s both;
}

.nomilog-celebration__title {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    animation: fadeInUp 0.6s ease-out 0.6s both;
}

.nomilog-celebration__xp {
    display: inline-block;
    background: #f8bd2a;
    color: #5c4300;
    font-weight: 700;
    padding: 0.25rem 1rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    animation: xpBounce 2s ease-in-out 0.8s infinite, fadeInUp 0.4s ease-out 0.8s both;
}

@keyframes nomilogSlideIn {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tokkuriLeft {
    from { transform: translateX(-6rem) rotate(-20deg); opacity: 0; }
    to   { transform: translateX(-0.5rem) rotate(10deg); opacity: 1; }
}

@keyframes tokkuriRight {
    from { transform: translateX(6rem) rotate(20deg); opacity: 0; }
    to   { transform: translateX(0.5rem) rotate(-10deg); opacity: 1; }
}

@keyframes sparkleIn {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes xpBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.5rem); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ================================================================
   #419 Subscription CTA — A×E Hybrid Design
   明朝体 + 縦書き背景 + 金グラデ + 朱CTAボタン
   ================================================================ */

/* --- δ Reminder (small feed insert) --- */
.sq-sub-reminder {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin: 12px 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a1c19, #2a2420);
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s;
}
.sq-sub-reminder:active { transform: scale(0.98); }

.sq-sub-reminder__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(212,160,23,.15), rgba(212,160,23,.05));
    border: 1px solid rgba(212,160,23,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Noto Serif JP', serif;
    font-size: 9px;
    font-weight: 900;
    color: #d4a017;
    letter-spacing: .1em;
    line-height: 1.2;
    text-align: center;
}
.sq-sub-reminder__body { flex: 1; min-width: 0; }
.sq-sub-reminder__title {
    font-family: 'Noto Serif JP', serif;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.4;
}
.sq-sub-reminder__sub {
    font-size: 9px;
    color: rgba(255,255,255,.4);
    margin-top: 2px;
}
.sq-sub-reminder__arrow {
    font-size: 20px;
    color: #d4a017;
    flex-shrink: 0;
}

/* --- Main CTA Card --- */
.sq-sub-cta {
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(160deg, #0f0f0e, #1c1a17 40%, #1a1410);
    color: #fff;
    position: relative;
    text-decoration: none;
    transition: transform 0.2s;
}
.sq-sub-cta:active { transform: scale(0.98); }

/* Washi noise texture (from A) */
.sq-sub-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Vertical text (from E) */
.sq-sub-cta__tate {
    position: absolute;
    top: 20px;
    right: 16px;
    bottom: 60px;
    writing-mode: vertical-rl;
    font-family: 'Noto Serif JP', serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.8;
    color: rgba(255,255,255,.05);
    letter-spacing: .12em;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

/* Gold glow (from A) */
.sq-sub-cta__glow {
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,.1), transparent 70%);
    top: -40px;
    right: -30px;
    pointer-events: none;
}


.sq-sub-cta__body {
    padding: 28px 24px 0;
    position: relative;
    z-index: 1;
}

.sq-sub-cta__eyebrow {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d4a017;
    opacity: .8;
    margin-bottom: 14px;
}

/* Title: Serif (from E) + Gold gradient (from A) */
.sq-sub-cta__title {
    font-family: 'Noto Serif JP', serif;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.7;
}
.sq-sub-cta__title strong {
    background: linear-gradient(90deg, #d4a017, #f0d060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sq-sub-cta__sub {
    font-size: 11px;
    color: rgba(255,255,255,.38);
    margin-top: 10px;
    line-height: 1.7;
}
.sq-sub-cta__sub em {
    font-style: normal;
    color: #d4a017;
    opacity: .7;
}

/* Sake teaser */
.sq-sub-cta__teaser {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
}
.sq-sub-cta__teaser-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.22);
    margin-bottom: 10px;
}
.sq-sub-cta__sake {
    display: flex;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
}
.sq-sub-cta__sake-img {
    width: 33%;
    flex-shrink: 0;
    background: linear-gradient(160deg, #2a2520, #1e1a16);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    border-right: 1px solid rgba(255,255,255,.06);
}
.sq-sub-cta__sake-ph {
    width: 44px;
    height: 72px;
    border-radius: 4px;
    background: linear-gradient(160deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: rgba(255,255,255,.2);
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}
.sq-sub-cta__sake-body {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sq-sub-cta__sake-label {
    font-size: 8px;
    font-weight: 700;
    color: #d4a017;
    opacity: .7;
}
.sq-sub-cta__sake-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 900;
    margin-top: 3px;
    color: #fff;
    line-height: 1.35;
}
.sq-sub-cta__sake-area {
    font-size: 9px;
    color: rgba(255,255,255,.35);
    margin-top: 3px;
}
.sq-sub-cta__sake-type {
    font-size: 9px;
    color: rgba(255,255,255,.25);
    margin-top: 1px;
}

/* Stamp badges (#418 → #739 円形装飾化) */
.sq-sub-cta__stamps {
    display: flex;
    justify-content: center;
    gap: 24px;
}
.sq-sub-cta__stamp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 0;
    text-align: center;
}
.sq-sub-cta__stamp-ring {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212,160,23,.25), rgba(240,208,96,.15));
    box-shadow:
        0 0 0 2px rgba(212,160,23,.35),
        0 0 20px rgba(212,160,23,.1),
        inset 0 0 12px rgba(212,160,23,.08);
    animation: sq-stamp-breathe 3s ease-in-out infinite;
}
.sq-sub-cta__stamp-ring::before {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.5px solid rgba(212,160,23,.2);
    pointer-events: none;
}
.sq-sub-cta__stamp img {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: none;
    background: rgba(255,255,255,.95);
}
.sq-sub-cta__stamp-name {
    font-family: 'Noto Serif JP', serif;
    font-size: 11px;
    font-weight: 900;
    color: rgba(255,255,255,.75);
    letter-spacing: .03em;
}
@keyframes sq-stamp-breathe {
    0%, 100% { box-shadow: 0 0 0 2px rgba(212,160,23,.35), 0 0 20px rgba(212,160,23,.1), inset 0 0 12px rgba(212,160,23,.08); }
    50%      { box-shadow: 0 0 0 3px rgba(212,160,23,.5), 0 0 28px rgba(212,160,23,.18), inset 0 0 16px rgba(212,160,23,.12); }
}

/* Stats bar (from A) */
.sq-sub-cta__stats {
    display: flex;
    margin-top: 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 14px;
}
.sq-sub-cta__stat {
    flex: 1;
    text-align: center;
    padding: 0 8px;
    border-right: 1px solid rgba(255,255,255,.06);
}
.sq-sub-cta__stat:last-child { border-right: none; }
.sq-sub-cta__stat-val {
    font-size: 16px;
    font-weight: 900;
    color: #d4a017;
    font-family: 'Spline Sans', sans-serif;
}
.sq-sub-cta__stat-label {
    font-size: 8px;
    color: rgba(255,255,255,.3);
    margin-top: 3px;
    line-height: 1.3;
}

/* Footer with 朱 CTA button (from B/E) */
.sq-sub-cta__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 20px;
    position: relative;
    z-index: 1;
}
.sq-sub-cta__price {
    font-size: 11px;
    color: rgba(255,255,255,.4);
}
.sq-sub-cta__price b {
    font-size: 18px;
    color: #fff;
    font-family: 'Spline Sans', sans-serif;
}
.sq-sub-cta__btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #b20411, #d62927);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
}

/* ============================================================
   #663 酒図鑑フィード サブスクCTA — Museum Dark (V3×D)
   Compact glassmorphism card for Masonry 2-column feed
   ============================================================ */
.cta-sub-museum {
    display: block;
    text-decoration: none;
    color: #fff;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(15,15,14,.95), rgba(28,26,23,.95));
    border: 1px solid rgba(212,160,23,.12);
    padding: 16px 14px;
    position: relative;
    transition: transform .2s ease;
}
.cta-sub-museum::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
}
.cta-sub-museum:active {
    transform: scale(.98);
}
.cta-sub-museum__glow {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212,160,23,.15), transparent 70%);
    top: -15px;
    left: -10px;
    pointer-events: none;
}
.cta-sub-museum__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}
.cta-sub-museum__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(212,160,23,.2), rgba(212,160,23,.05));
    border: 1px solid rgba(212,160,23,.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cta-sub-museum__head-txt {
    flex: 1;
}
.cta-sub-museum__eyebrow {
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #d4a017;
    opacity: .7;
}
.cta-sub-museum__label {
    font-size: 9px;
    font-weight: 700;
    color: rgba(255,255,255,.5);
    margin-top: 1px;
}
.cta-sub-museum__quote {
    font-family: 'Noto Serif JP', serif;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}
.cta-sub-museum__quote strong {
    background: linear-gradient(90deg, #d4a017, #f0d060);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.cta-sub-museum__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    position: relative;
    z-index: 1;
}
.cta-sub-museum__price {
    font-size: 8px;
    color: rgba(255,255,255,.35);
}
.cta-sub-museum__price b {
    font-size: 14px;
    color: #fff;
    font-family: 'Spline Sans', sans-serif;
}
.cta-sub-museum__btn {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 7px 12px;
    background: linear-gradient(135deg, #b20411, #d62927);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 800;
    color: #fff;
}
.cta-sub-museum__btn .material-symbols-outlined {
    font-size: 12px;
}

/* =================================================================
   #764 レベルアップモーダル — ly_modal 定義
   (Tailwind クラス依存を廃止し独自CSS定義に統一)
   Tailwindクラス使用禁止: このブロック内では style.css/antigravity.css のクラスのみ使用
   ================================================================= */

/* オーバーレイ（全画面半透明背景） */
.ly_modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.ly_modal.is-active {
    display: flex;
}

/* モーダルカード */
.ly_modal_inner {
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem 1.75rem;
    width: 100%;
    max-width: 320px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: ly_modal_in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

/* カード内装飾（金の輝きグロー） */
.ly_modal_inner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(217, 119, 6, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

/* 登場アニメーション */
@keyframes ly_modal_in {
    from { opacity: 0; transform: scale(0.85) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* 絵文字アイコン背景 */
.ly_modal_icon_bg {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 0.75rem;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3);
    animation: ly_icon_pulse 2s ease-in-out infinite;
}

@keyframes ly_icon_pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3); }
    50%       { box-shadow: 0 4px 22px rgba(217, 119, 6, 0.55); }
}

/* タイトル「レベルアップ！」 */
.ly_modal_title {
    font-size: 1.5rem;
    font-weight: 900;
    color: #d97706;
    margin-bottom: 0.25rem;
    letter-spacing: 0.05em;
    font-family: 'Noto Serif JP', 'Noto Sans JP', sans-serif;
    line-height: 1.2;
}

/* Lv.X → Lv.Y 行 */
.ly_modal_level_row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 0.875rem 0;
}

/* レベルバッジ（共通） */
.ly_modal_lv_badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    font-weight: 900;
    line-height: 1;
}

/* 旧レベル（グレー） */
.ly_modal_lv_badge--old {
    background: #f1f5f9;
    color: #94a3b8;
}

/* 新レベル（ゴールド） */
.ly_modal_lv_badge--new {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45);
    animation: ly_lv_shine 1.5s ease-in-out infinite alternate;
}

@keyframes ly_lv_shine {
    from { box-shadow: 0 4px 12px rgba(217, 119, 6, 0.45); }
    to   { box-shadow: 0 4px 20px rgba(217, 119, 6, 0.75), 0 0 0 4px rgba(217, 119, 6, 0.1); }
}

.ly_modal_lv_label {
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 2px;
}

.ly_modal_lv_num {
    font-size: 1.25rem;
}

/* → 矢印 */
.ly_modal_arrow {
    color: #d97706;
    font-size: 1.375rem;
    font-weight: 900;
    animation: ly_arrow_bounce 0.8s ease-in-out infinite alternate;
}

@keyframes ly_arrow_bounce {
    from { transform: translateX(-3px); opacity: 0.7; }
    to   { transform: translateX(3px);  opacity: 1; }
}

/* サブメッセージ */
.ly_modal_body {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.25rem;
}

/* 称号解放バッジ */
.ly_modal_title_badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    margin: 0.625rem 0 0.375rem;
    border: 1px solid #fde68a;
}

/* 称号解放リンク */
.ly_modal_title_link {
    display: block;
    font-size: 0.6875rem;
    color: var(--sq-brand, #9b1a1a);
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.ly_modal_title_link:hover {
    text-decoration: underline;
}

/* OKボタン */
.ly_modal_btn {
    display: block;
    width: 100%;
    padding: 0.875rem;
    background: var(--sq-brand, #9b1a1a);
    color: #ffffff;
    border: none;
    border-radius: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 1.25rem;
    transition: background-color 0.2s, transform 0.1s;
    box-shadow: 0 4px 12px rgba(155, 26, 26, 0.35);
    font-family: 'Noto Sans JP', sans-serif;
    letter-spacing: 0.02em;
}

.ly_modal_btn:hover {
    background-color: #7f1a1a;
    transform: translateY(-1px);
}

.ly_modal_btn:active {
    transform: translateY(0);
    background-color: #6b1515;
}

/* ===================================================================
   #814: Icon System v2 — SVG Blade コンポーネント基盤
   CSS currentColor 制御によるアイコン色管理
   =================================================================== */
@layer components {
    /* ボトムナビ SVG アイコン — 既存の img と同じサイズ・配置にする */
    .ag-icon-nav {
        width: 20px;
        height: 20px;
        display: block;
        color: inherit;
    }

    /* bl_mainMenu 内の SVG はインラインで出力されるため、
       既存の img ルールと同様のサイズ制御を適用 */
    .bl_mainMenu_cell a svg,
    .bl_mainMenu_cell a .bl_mainMenu_icon {
        width: 20px;
        height: 20px;
        display: block;
    }

    /* currentColor 経由の色制御 — Tailwind text-* クラスとの連携 */
    .bl_mainMenu_cell svg {
        fill: currentColor;
    }

    /* stroke 型アイコン（shop）は fill を上書きしない */
    .bl_mainMenu_cell svg[fill="none"] {
        fill: none;
    }
}

/* ===================================================================
   #807: Profile Edit V2 — プロフィール編集画面コンポーネント群
   =================================================================== */
@layer components {

    /* ----- 1. Hero Card (ヒーローカード) ----- */
    .ag-profile-hero {
        position: relative;
        background: var(--sq-card);
        margin: 0.75rem;
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(91, 64, 61, 0.06);
        overflow: hidden;
    }

    .ag-profile-hero__cover {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background: linear-gradient(135deg, #3a1c1e 0%, #7a2033 50%, var(--sq-brand) 100%);
        overflow: hidden;
    }

    .ag-profile-hero__avatar {
        width: 96px;
        height: 96px;
        border-radius: 50%;
        border: 3px solid var(--sq-card);
        background: linear-gradient(135deg, #fce4ec, #f8bbd0);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 900;
        color: var(--sq-text-sub);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        flex-shrink: 0;
        position: relative;
        margin-top: -48px;
        z-index: 2;
    }

    .ag-profile-hero__name {
        font-size: 1.1rem;
        font-weight: 900;
        line-height: 1.2;
        color: var(--sq-text);
        text-shadow:
            -1px -1px 0 var(--sq-card),
             1px -1px 0 var(--sq-card),
            -1px  1px 0 var(--sq-card),
             1px  1px 0 var(--sq-card),
             0 0 8px rgba(255, 255, 255, 0.5);
    }

    .ag-profile-hero__badge {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 10px;
        border-radius: 999px;
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        color: #78350f;
        font-size: 0.7rem;
        font-weight: 700;
        margin-top: 2px;
    }

    .ag-profile-hero__cam {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--sq-card);
        color: var(--sq-text);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
        transition: background 0.2s;
    }

    .ag-profile-hero__cam:hover {
        background: var(--sq-bg);
    }

    /* ----- 2. Completion Ring (完成度リング) ----- */
    .ag-profile-ring {
        display: flex;
        align-items: center;
        gap: 14px;
        margin: 0.75rem;
        padding: 14px 16px;
        background: var(--sq-card);
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(91, 64, 61, 0.06);
    }

    .ag-profile-ring__svg {
        position: relative;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

    .ag-profile-ring__svg svg {
        transform: rotate(-90deg);
        width: 52px;
        height: 52px;
    }

    .ag-profile-ring__svg circle.ag-ring-bg {
        fill: none;
        stroke: var(--sq-border);
        stroke-width: 5;
    }

    .ag-profile-ring__svg circle.ag-ring-fill {
        fill: none;
        stroke: var(--sq-brand);
        stroke-width: 5;
        stroke-linecap: round;
        transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ag-profile-ring__text {
        flex: 1;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--sq-text);
    }

    .ag-profile-ring__text small {
        display: block;
        font-size: 0.72rem;
        font-weight: 400;
        color: var(--sq-text-sub);
        margin-top: 2px;
        line-height: 1.4;
    }

    /* ----- 3. Accordion Section (アコーディオンセクション) ----- */
    .ag-profile-section {
        margin: 0.75rem;
        background: var(--sq-card);
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(91, 64, 61, 0.06);
        overflow: hidden;
    }

    .ag-profile-section__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 10px;
        cursor: pointer;
        user-select: none;
        transition: background 0.2s;
    }

    .ag-profile-section__header:hover {
        background: var(--sq-washi);
    }

    .ag-profile-section__header .ag-section-icon {
        font-size: 18px;
        color: var(--sq-brand);
        margin-right: 6px;
    }

    .ag-profile-section__header .ag-section-title {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.9rem;
        font-weight: 900;
    }

    .ag-profile-section__header .ag-section-title::before {
        content: '';
        width: 4px;
        height: 18px;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--sq-brand), var(--sq-brand-lt));
    }

    .ag-profile-section__header .ag-section-chevron {
        font-size: 20px;
        color: var(--sq-text-sub);
        transition: transform 0.3s ease;
        margin-left: 8px;
    }

    .ag-profile-section__header .ag-section-status {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 2px 10px;
        border-radius: 999px;
        margin-right: 4px;
    }

    .ag-profile-section__body {
        padding: 4px 16px 16px;
        max-height: 800px;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
        opacity: 1;
    }

    /* 閉じた状態（--open なし） */
    .ag-profile-section:not(.ag-profile-section--open) .ag-profile-section__body {
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        opacity: 0;
    }

    .ag-profile-section:not(.ag-profile-section--open) .ag-section-chevron {
        transform: rotate(-90deg);
    }

    /* 開いた状態 */
    .ag-profile-section--open .ag-profile-section__body {
        max-height: 800px;
        opacity: 1;
    }

    .ag-profile-section--open .ag-section-chevron {
        transform: rotate(0deg);
    }

    /* ----- 4. Form Elements (フォーム要素) ----- */

    /* スライダー */
    .ag-profile-slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        outline: none;
        background: linear-gradient(90deg, var(--sq-border) 0%, var(--sq-brand) 100%);
    }

    .ag-profile-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--sq-card);
        border: 3px solid var(--sq-brand);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        transition: transform 0.2s;
    }

    .ag-profile-slider::-webkit-slider-thumb:active {
        transform: scale(1.15);
    }

    .ag-profile-slider::-moz-range-thumb {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--sq-card);
        border: 3px solid var(--sq-brand);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        cursor: pointer;
    }

    .ag-profile-slider__label {
        display: flex;
        justify-content: space-between;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--sq-text-sub);
        margin-bottom: 8px;
    }

    /* タグチップ */
    .ag-profile-tag {
        display: inline-flex;
        align-items: center;
        padding: 7px 16px;
        border-radius: 999px;
        background: var(--sq-washi);
        border: 1px solid var(--sq-border);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--sq-text-sub);
        cursor: pointer;
        transition: all 0.25s;
        user-select: none;
    }

    .ag-profile-tag:active {
        transform: scale(0.95);
    }

    .ag-profile-tag--active {
        background: linear-gradient(135deg, #fff1f2, #ffe4e6);
        border-color: var(--sq-brand);
        color: var(--sq-brand);
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(178, 4, 17, 0.12);
        transform: scale(1.02);
    }

    /* 地域チップ（小さめ） */
    .ag-profile-region-tag {
        display: inline-flex;
        align-items: center;
        padding: 5px 12px;
        border-radius: 999px;
        background: var(--sq-washi);
        border: 1px solid var(--sq-border);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--sq-text-sub);
        cursor: pointer;
        transition: all 0.25s;
        user-select: none;
    }

    .ag-profile-region-tag:active {
        transform: scale(0.95);
    }

    .ag-profile-region-tag--active {
        background: linear-gradient(135deg, #fef3c7, #fde68a);
        border-color: #d97706;
        color: #92400e;
        font-weight: 700;
        box-shadow: 0 2px 8px rgba(217, 119, 6, 0.15);
    }

    /* 都道府県チップコンテナ（展開アニメ） */
    .ag-profile-pref-container {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.3s ease, margin 0.3s ease;
        margin-top: 0;
    }

    .ag-profile-pref-container--open {
        max-height: 300px;
        opacity: 1;
        margin-top: 8px;
    }

    /* 入力フィールド */
    .ag-profile-field {
        margin-bottom: 14px;
    }

    .ag-profile-field label {
        display: block;
        font-size: 0.75rem;
        font-weight: 700;
        color: var(--sq-text-sub);
        margin-bottom: 6px;
    }

    .ag-profile-field input,
    .ag-profile-field select,
    .ag-profile-field textarea {
        display: block;
        width: 100%;
        padding: 10px 14px;
        border: 1px solid var(--sq-border);
        border-radius: 0.75rem;
        background: var(--sq-washi);
        font-family: inherit;
        font-size: 0.9rem;
        color: var(--sq-text);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .ag-profile-field input:focus,
    .ag-profile-field select:focus,
    .ag-profile-field textarea:focus {
        outline: none;
        border-color: var(--sq-brand);
        box-shadow: 0 0 0 3px rgba(178, 4, 17, 0.2);
    }

    .ag-profile-field__hint {
        font-size: 0.7rem;
        color: var(--sq-text-sub);
        margin-top: 4px;
        line-height: 1.5;
        display: flex;
        align-items: center;
        gap: 3px;
    }

    /* ----- 5. CTA Button ----- */
    .ag-profile-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px;
        border: none;
        border-radius: 1rem;
        background: linear-gradient(135deg, var(--sq-brand), var(--sq-brand-lt));
        color: var(--sq-card);
        font-family: inherit;
        font-size: 1rem;
        font-weight: 900;
        letter-spacing: 0.03em;
        cursor: pointer;
        box-shadow: 0 8px 24px rgba(178, 4, 17, 0.2);
        transition: all 0.2s;
        animation: ag-profile-cta-pulse 2.5s ease-in-out infinite;
    }

    .ag-profile-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 32px rgba(178, 4, 17, 0.3);
    }

    .ag-profile-cta:active {
        transform: scale(0.97);
    }

    @keyframes ag-profile-cta-pulse {
        0%, 100% { box-shadow: 0 8px 24px rgba(178, 4, 17, 0.2); }
        50%      { box-shadow: 0 8px 32px rgba(178, 4, 17, 0.35); }
    }

    /* ----- 6. Bottom Sheet (ボトムシート) ----- */
    .ag-profile-sheet {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 300;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    .ag-profile-sheet--open {
        opacity: 1;
        pointer-events: auto;
    }

    .ag-profile-sheet__panel {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        width: 100%;
        max-width: 430px;
        max-height: 85vh;
        background: var(--sq-card);
        border-radius: 1.25rem 1.25rem 0 0;
        z-index: 301;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        flex-direction: column;
    }

    .ag-profile-sheet--open .ag-profile-sheet__panel {
        transform: translateX(-50%) translateY(0);
    }

    .ag-profile-sheet__handle {
        width: 36px;
        height: 4px;
        border-radius: 2px;
        background: var(--sq-border);
        margin: 10px auto 6px;
    }

    .ag-profile-sheet__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        max-height: 50vh;
        overflow-y: auto;
        padding-bottom: 20px;
    }

    .ag-profile-sheet__grid img {
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 8px;
        cursor: pointer;
        transition: transform 0.15s;
    }

    .ag-profile-sheet__grid img:active {
        transform: scale(0.95);
    }

    /* ----- 7. Toast (トースト通知) ----- */
    .ag-profile-toast {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translateX(-50%) translateY(100px);
        padding: 14px 24px;
        background: var(--sq-text);
        color: var(--sq-card);
        border-radius: 1rem;
        font-size: 0.85rem;
        font-weight: 700;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 200;
        white-space: nowrap;
    }

    .ag-profile-toast.is-visible {
        transform: translateX(-50%) translateY(0);
    }

    /* ===================================================================
       #745: 酒蔵写真アップロード — アップロードUI + ライトボックスナビ
       =================================================================== */

    /* --- アップロード中オーバーレイ --- */
    .ag-upload-overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.65);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .ag-upload-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: ag-spin 0.7s linear infinite;
    }

    @keyframes ag-spin {
        to { transform: rotate(360deg); }
    }

    .ag-upload-text {
        color: #fff;
        font-size: 0.875rem;
        font-weight: 700;
    }

    /* --- トースト --- */
    .ag-toast {
        position: fixed;
        bottom: 5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10000;
        padding: 0.75rem 1.5rem;
        border-radius: 2rem;
        font-size: 0.8125rem;
        font-weight: 700;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
        animation: ag-toast-in 0.3s ease-out;
        white-space: nowrap;
    }

    .ag-toast-success {
        background: linear-gradient(135deg, #10b981, #059669);
        color: #fff;
    }

    .ag-toast-error {
        background: linear-gradient(135deg, #ef4444, #dc2626);
        color: #fff;
    }

    @keyframes ag-toast-in {
        from { opacity: 0; transform: translateX(-50%) translateY(20px); }
        to   { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* --- ライトボックス ナビボタン --- */
    .ag-lb-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        background: rgba(0, 0, 0, 0.45);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1.5rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
        -webkit-tap-highlight-color: transparent;
    }

    .ag-lb-nav:active {
        background: rgba(255, 255, 255, 0.25);
    }

    .ag-lb-prev { left: 0.75rem; }
    .ag-lb-next { right: 0.75rem; }

    /* --- ライトボックス カウンター --- */
    .ag-lb-counter {
        color: rgba(255, 255, 255, 0.7);
        font-size: 0.6875rem;
        font-weight: 600;
        margin-left: 0.5rem;
    }

    /* ===================================================================
       WebView 検出時ログイン画面 — ポジティブ誘導 UI
       =================================================================== */

    /* --- LINE ログインボタン強調 (WebView 時) --- */
    .ag-webview-line-cta {
        position: relative;
        padding: 1.125rem 1.5rem !important;
        font-size: 1.125rem !important;
        box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.4);
        animation: ag-webview-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes ag-webview-pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.4);
        }
        50% {
            box-shadow: 0 0 0 8px rgba(6, 199, 85, 0);
        }
    }

    .ag-webview-line-badge {
        position: absolute;
        top: -0.5rem;
        right: -0.25rem;
        background-color: #ef4444;
        color: white;
        font-size: 0.625rem;
        font-weight: 800;
        padding: 0.125rem 0.5rem;
        border-radius: 9999px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        letter-spacing: 0.025em;
    }

    /* --- ポジティブ誘導ボックス --- */
    .ag-webview-info {
        background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
        border: 1px solid #a7f3d0;
        border-radius: 1rem;
        padding: 1.25rem;
        text-align: center;
    }

    .ag-webview-info-icon {
        font-size: 2rem;
        margin-bottom: 0.25rem;
    }

    .ag-webview-info-title {
        font-size: 0.9375rem;
        font-weight: 800;
        color: #065f46;
        margin-bottom: 0.25rem;
        line-height: 1.4;
    }

    .ag-webview-info-sub {
        font-size: 0.75rem;
        color: #047857;
        line-height: 1.5;
    }

    /* --- Google 手順ガイド (折りたたみ) --- */
    .ag-webview-guide {
        margin-top: 0.75rem;
    }

    .ag-webview-guide summary {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        font-size: 0.8125rem;
        font-weight: 700;
        color: #64748b;
        cursor: pointer;
        padding: 0.625rem 0;
        list-style: none;
        transition: color 0.2s;
    }

    .ag-webview-guide summary::-webkit-details-marker {
        display: none;
    }

    .ag-webview-guide summary::before {
        content: "▶";
        font-size: 0.625rem;
        transition: transform 0.2s;
    }

    .ag-webview-guide[open] summary::before {
        transform: rotate(90deg);
    }

    .ag-webview-guide summary:hover {
        color: #334155;
    }

    .ag-webview-guide-body {
        background-color: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        padding: 1rem;
        margin-top: 0.25rem;
    }

    .ag-webview-guide-steps {
        list-style: none;
        padding: 0;
        margin: 0 0 0.75rem 0;
        counter-reset: guide-step;
    }

    .ag-webview-guide-steps li {
        counter-increment: guide-step;
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        font-size: 0.8125rem;
        color: #334155;
        line-height: 1.5;
        padding: 0.375rem 0;
    }

    .ag-webview-guide-steps li::before {
        content: counter(guide-step);
        flex-shrink: 0;
        width: 1.375rem;
        height: 1.375rem;
        border-radius: 9999px;
        background-color: #3b82f6;
        color: white;
        font-size: 0.6875rem;
        font-weight: 800;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 0.125rem;
    }

    .ag-webview-guide-divider {
        height: 1px;
        background-color: #e2e8f0;
        margin: 0.5rem 0;
    }

    .ag-webview-guide-alt {
        font-size: 0.6875rem;
        color: #94a3b8;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    /* --- URLコピーボタン (WebView ガイド内) --- */
    .ag-webview-copy-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        width: 100%;
        padding: 0.625rem;
        background-color: white;
        border: 1px solid #cbd5e1;
        border-radius: 0.625rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #475569;
        cursor: pointer;
        transition: all 0.15s;
    }

    .ag-webview-copy-btn:active {
        transform: scale(0.98);
        background-color: #f1f5f9;
    }

    .ag-webview-copy-btn .material-symbols-outlined {
        font-size: 1.125rem;
        color: #64748b;
    }

    .ag-webview-copy-success {
        font-size: 0.75rem;
        font-weight: 700;
        color: #16a34a;
        text-align: center;
        margin-top: 0.375rem;
    }

    /* --- Android: ブラウザで開くボタン --- */
    .ag-webview-open-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        width: 100%;
        padding: 0.75rem;
        background-color: #3b82f6;
        border-radius: 0.625rem;
        font-size: 0.875rem;
        font-weight: 700;
        color: white;
        text-decoration: none;
        transition: all 0.15s;
    }

    .ag-webview-open-btn:active {
        transform: scale(0.98);
        background-color: #2563eb;
    }

    .ag-webview-open-btn .material-symbols-outlined {
        font-size: 1.25rem;
    }

    /* --- iOS: URL プレビュー --- */
    .ag-webview-url-preview {
        background-color: #f1f5f9;
        border: 1px solid #e2e8f0;
        border-radius: 0.5rem;
        padding: 0.5rem 0.75rem;
        font-family: ui-monospace, "SF Mono", "Menlo", monospace;
        font-size: 0.6875rem;
        color: #475569;
        word-break: break-all;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        text-align: left;
    }

    /* ─── #939 はじめてのクエスト ──────────────────────────── */

    .ag-first-quest {
        margin: 12px 16px 0;
        background: var(--sq-card, #fff);
        border-radius: 16px;
        box-shadow: 0 2px 10px rgba(91,64,61,0.06);
        overflow: hidden;
        position: relative;
        animation: ag-first-quest-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        border: 1.5px solid var(--sq-border, #e8e8e3);
    }

    @keyframes ag-first-quest-appear {
        from { opacity: 0; transform: translateY(20px) scale(0.95); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .ag-first-quest__header {
        padding: 14px 16px 10px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid var(--sq-border, #e8e8e3);
        background: var(--sq-washi, #faf6f0);
    }

    .ag-first-quest__header-icon {
        width: 36px;
        height: 36px;
        background: var(--sq-card, #fff);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--sq-border, #e8e8e3);
        color: var(--sq-gold, #d4a017);
    }

    .ag-first-quest__title-area {
        flex: 1;
    }

    .ag-first-quest__title {
        font-size: 14px;
        font-weight: 900;
        color: var(--sq-text, #1a1c19);
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .ag-first-quest__subtitle {
        font-size: 11px;
        color: var(--sq-text-mute, #999);
        margin-top: 1px;
    }

    .ag-first-quest__dismiss {
        width: 28px;
        height: 28px;
        background: none;
        border: none;
        color: var(--sq-text-mute, #999);
        font-size: 16px;
        cursor: pointer;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    .ag-first-quest__dismiss:hover {
        background: rgba(0,0,0,0.05);
    }

    .ag-first-quest__progress {
        padding: 10px 16px 0;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .ag-first-quest__progress-bar {
        flex: 1;
        height: 6px;
        background: var(--sq-border, #e8e8e3);
        border-radius: 99px;
        overflow: hidden;
    }

    .ag-first-quest__progress-fill {
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, var(--sq-gold, #d4a017), #e8d48a);
        transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .ag-first-quest__progress-text {
        font-size: 11px;
        font-weight: 800;
        color: var(--sq-gold, #d4a017);
        font-family: 'Spline Sans', sans-serif;
        white-space: nowrap;
        min-width: 28px;
        text-align: right;
    }

    .ag-first-quest__steps {
        padding: 4px 0;
        list-style: none;
        margin: 0;
    }

    .ag-first-quest__step {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        transition: all 0.3s;
        cursor: pointer;
        border-bottom: 1px solid rgba(232,232,227,0.5);
    }
    .ag-first-quest__step:last-child {
        border-bottom: none;
    }
    .ag-first-quest__step:active {
        background: var(--sq-info-bg, #f9f7f4);
    }

    .ag-first-quest__step--locked {
        opacity: 0.4;
        cursor: default;
        pointer-events: none;
    }

    .ag-first-quest__step--done {
        opacity: 0.55;
    }

    .ag-first-quest__step-check {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        border: 2px solid var(--sq-border, #e8e8e3);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.3s;
        color: transparent;
    }
    .ag-first-quest__step--active .ag-first-quest__step-check {
        border-color: var(--sq-brand, #b20411);
        box-shadow: 0 0 0 3px rgba(178, 4, 17, 0.1);
        animation: ag-first-quest-pulse 2s ease-in-out infinite;
    }
    .ag-first-quest__step--done .ag-first-quest__step-check {
        border-color: var(--sq-brand, #b20411);
        background: var(--sq-brand, #b20411);
        color: #fff;
    }
    .ag-first-quest__step--locked .ag-first-quest__step-check {
        background: var(--sq-info-bg, #f9f7f4);
        border-color: var(--sq-border, #e8e8e3);
    }

    @keyframes ag-first-quest-pulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(178, 4, 17, 0.1); }
        50% { box-shadow: 0 0 0 6px rgba(178, 4, 17, 0.04); }
    }

    .ag-first-quest__step-icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--sq-info-bg, #f9f7f4);
        color: var(--sq-text-sub, #5b403d);
    }
    .ag-first-quest__step--active .ag-first-quest__step-icon {
        background: rgba(178, 4, 17, 0.06);
        color: var(--sq-brand, #b20411);
    }
    .ag-first-quest__step--done .ag-first-quest__step-icon {
        background: var(--sq-info-bg, #f9f7f4);
        color: var(--sq-text-mute, #999);
    }

    .ag-first-quest__step-content {
        flex: 1;
        min-width: 0;
    }

    .ag-first-quest__step-label {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.3;
    }
    .ag-first-quest__step--done .ag-first-quest__step-label {
        text-decoration: line-through;
        color: var(--sq-text-mute, #999);
    }

    .ag-first-quest__step-desc {
        font-size: 10px;
        color: var(--sq-text-mute, #999);
        margin-top: 1px;
        line-height: 1.3;
    }

    .ag-first-quest__step-reward {
        flex-shrink: 0;
        padding: 2px 8px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 800;
        font-family: 'Spline Sans', sans-serif;
        white-space: nowrap;
        background: rgba(178, 4, 17, 0.06);
        color: var(--sq-brand, #b20411);
    }
    .ag-first-quest__step-reward--badge {
        background: rgba(212, 160, 23, 0.1);
        color: var(--sq-gold, #d4a017);
    }
    .ag-first-quest__step--done .ag-first-quest__step-reward,
    .ag-first-quest__step--done .ag-first-quest__step-reward--badge {
        background: var(--sq-info-bg, #f9f7f4);
        color: var(--sq-text-mute, #999);
    }

    .ag-first-quest__footer {
        padding: 8px 16px 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-top: 1px solid var(--sq-border, #e8e8e3);
        background: var(--sq-washi, #faf6f0);
    }

    .ag-first-quest__footer-text {
        font-size: 10px;
        color: var(--sq-text-sub, #5b403d);
        font-weight: 500;
    }

    .ag-first-quest--complete {
        border-color: var(--sq-gold, #d4a017);
    }
    .ag-first-quest--complete .ag-first-quest__header {
        background: linear-gradient(135deg, rgba(212,160,23,0.08), rgba(232,212,138,0.08));
    }

    /* Badge Modal */
    .ag-first-quest__badge-overlay {
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }
    .ag-first-quest__badge-overlay--visible {
        opacity: 1;
        pointer-events: auto;
    }

    .ag-first-quest__badge-modal {
        background: var(--sq-card, #fff);
        border-radius: 24px;
        padding: 32px 24px;
        text-align: center;
        max-width: 300px;
        width: 90%;
        transform: scale(0.8);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .ag-first-quest__badge-overlay--visible .ag-first-quest__badge-modal {
        transform: scale(1);
    }

    .ag-first-quest__badge-stamp {
        width: 80px;
        height: 80px;
        margin: 0 auto 16px;
        background: linear-gradient(135deg, var(--sq-washi, #faf6f0), #fff);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 3px solid var(--sq-gold, #d4a017);
        box-shadow: 0 4px 20px rgba(212,160,23,0.25);
        animation: ag-first-quest-stamp-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
        color: var(--sq-gold, #d4a017);
    }

    @keyframes ag-first-quest-stamp-in {
        from { transform: scale(0) rotate(-30deg); }
        to { transform: scale(1) rotate(0); }
    }

    .ag-first-quest__badge-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 4px;
    }

    .ag-first-quest__badge-desc {
        font-size: 12px;
        color: var(--sq-text-sub, #5b403d);
        margin-bottom: 16px;
        line-height: 1.6;
    }

    .ag-first-quest__badge-btn {
        padding: 10px 28px;
        background: var(--sq-brand, #b20411);
        color: #fff;
        border: none;
        border-radius: 99px;
        font-size: 14px;
        font-weight: 900;
        font-family: inherit;
        cursor: pointer;
    }
    .ag-first-quest__badge-btn:active {
        transform: scale(0.95);
    }

    .ag-first-quest__badge-subtitle {
        font-size: 0.8125rem;
        color: var(--sq-text-mute, #999);
        margin: 0 0 0.75rem;
        letter-spacing: 0.04em;
    }

    .ag-first-quest__badge-actions {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.25rem;
    }

    .ag-first-quest__badge-btn--secondary {
        display: inline-block;
        padding: 0.625rem 2rem;
        border-radius: 999px;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        border: 1px solid var(--sq-border, #ddd);
        background: transparent;
        color: var(--sq-text-mute, #999);
        cursor: pointer;
        font-family: inherit;
        transition: background 0.2s;
    }

    .ag-first-quest__badge-btn--secondary:hover {
        background: var(--sq-bg-hover, rgba(0,0,0,0.04));
    }

    .ag-first-quest__step--claiming {
        opacity: 0.6;
        pointer-events: none;
    }

    .ag-first-quest__badge-stamp img {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        object-fit: cover;
    }

    /* XP Burst Animation */
    .ag-first-quest__xp-burst {
        position: fixed;
        font-size: 18px;
        font-weight: 900;
        font-family: 'Spline Sans', sans-serif;
        color: var(--sq-brand, #b20411);
        pointer-events: none;
        z-index: 200;
        animation: ag-first-quest-xp-float 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        text-shadow: 0 1px 4px rgba(178,4,17,0.2);
    }

    @keyframes ag-first-quest-xp-float {
        0% { opacity: 1; transform: translateY(0) scale(1); }
        60% { opacity: 1; transform: translateY(-40px) scale(1.3); }
        100% { opacity: 0; transform: translateY(-70px) scale(0.8); }
    }

    /* ===================================================================
       #939 KANPAI MIX — Museum Dark × Live × Haiku
       =================================================================== */

    /* ── KANPAI Section ── */
    .ag-kanpai {
        /* Design Tokens — Museum Dark (scoped) */
        --md-bg: #0a0a0f;
        --md-bg2: #1a1a24;
        --md-text: #e8e4dc;
        --md-text-sub: rgba(232,228,220,0.5);
        --md-gold: #c9a84c;
        --md-gold-lt: #e8d48a;
        --md-brand: #b20411;
        --md-brand-lt: #d62927;

        position: relative;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(180deg, var(--md-bg) 0%, var(--md-bg2) 100%);
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
        margin: 12px 16px 24px;
    }

    /* ── Ball Pit (User Avatars) ── */
    .ag-kanpai-ballpit {
        position: absolute; inset: 0;
        z-index: 1; overflow: hidden;
        pointer-events: none;
    }
    .ag-kanpai-ball {
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(201,168,76,0.2);
        overflow: hidden;
        animation: ag-ballFloat var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
        will-change: transform;
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .ag-kanpai-ball img {
        width: 100%; height: 100%;
        object-fit: cover; border-radius: 50%;
    }
    .ag-kanpai-ball--placeholder {
        display: flex; align-items: center; justify-content: center;
        font-size: 10px; color: rgba(232,228,220,0.5);
        background: var(--md-bg2);
    }
    @keyframes ag-ballFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(calc(var(--float-y, -8px))) rotate(var(--float-r, 1deg)); }
    }

    /* ── Content Layer ── */
    .ag-kanpai-content {
        position: relative; z-index: 5;
        padding: 28px 20px 24px;
        text-align: center;
    }

    /* LIVE Indicator */
    .ag-kanpai-live {
        display: inline-flex; align-items: center; gap: 6px;
        margin-bottom: 16px;
        padding: 3px 10px 3px 8px;
        background: rgba(201,168,76,0.1);
        border: 1px solid rgba(201,168,76,0.15);
        border-radius: 99px;
    }
    .ag-kanpai-live-dot {
        width: 6px; height: 6px;
        background: var(--md-gold);
        border-radius: 50%;
        animation: ag-livePulse 1.5s ease-in-out infinite;
    }
    @keyframes ag-livePulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.7); }
    }
    .ag-kanpai-live-text {
        font-family: 'Spline Sans', sans-serif;
        font-size: 9px; font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--md-gold);
    }

    /* Haiku */
    .ag-kanpai-haiku {
        font-family: 'Noto Serif JP', serif;
        font-size: 15px; font-weight: 700;
        color: var(--md-text);
        line-height: 2.2;
        margin-bottom: 4px;
        letter-spacing: 2px;
        text-shadow: 0 1px 8px rgba(0,0,0,0.3);
    }
    .ag-kanpai-haiku-credit {
        font-size: 9px;
        color: var(--md-text-sub);
        margin-bottom: 20px;
        letter-spacing: 1px;
    }

    /* Wave Visualization */
    .ag-kanpai-wave {
        display: flex; align-items: flex-end;
        justify-content: center; gap: 2px;
        height: 28px;
        margin-bottom: 16px;
    }
    .ag-kanpai-wave .bar {
        width: 3px;
        border-radius: 1.5px;
        background: var(--md-gold);
        opacity: 0.25;
        animation: ag-waveUp var(--dur, 1s) ease-in-out var(--delay, 0s) infinite alternate;
    }
    @keyframes ag-waveUp {
        0% { height: 4px; opacity: 0.1; }
        100% { height: var(--h, 24px); opacity: 0.4; }
    }

    /* Count */
    .ag-kanpai-count-header {
        font-size: 10px; font-weight: 600;
        color: var(--md-text-sub);
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }
    .ag-kanpai-count-row {
        display: flex;
        align-items: baseline;
        justify-content: center;
        gap: 2px;
        margin-bottom: 16px;
    }
    .ag-kanpai-count {
        font-family: 'Spline Sans', sans-serif;
        font-size: 3rem; font-weight: 900;
        color: var(--md-gold-lt);
        line-height: 1;
        text-shadow: 0 2px 12px rgba(201,168,76,0.25);
        transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .ag-kanpai-count.bump {
        transform: scale(1.2);
    }
    .ag-kanpai-count-unit {
        font-size: 12px; font-weight: 700;
        color: var(--md-text-sub);
        margin-left: 2px;
    }

    /* Total (Odometer) */
    .ag-kanpai-total {
        font-size: 11px; font-weight: 500;
        color: var(--md-text-sub);
        opacity: 0.55;
        letter-spacing: 0.3px;
        margin-bottom: 16px;
    }

    /* KANPAI Button */
    .ag-kanpai-btn {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 14px 40px;
        border-radius: 99px;
        font-family: 'Spline Sans', 'Noto Sans JP', sans-serif;
        font-size: 18px; font-weight: 900;
        border: 2px solid var(--md-gold);
        background: transparent;
        color: var(--md-gold-lt);
        cursor: pointer;
        box-shadow: 0 0 24px rgba(201,168,76,0.12),
                    inset 0 0 20px rgba(201,168,76,0.05);
        transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
        position: relative;
        overflow: hidden;
    }
    .ag-kanpai-btn::before {
        content: '';
        position: absolute; inset: 0;
        background: radial-gradient(circle at center, rgba(201,168,76,0.08) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .ag-kanpai-btn:hover::before { opacity: 1; }
    .ag-kanpai-btn:hover {
        box-shadow: 0 0 36px rgba(201,168,76,0.25),
                    inset 0 0 24px rgba(201,168,76,0.08);
        transform: scale(1.03);
        border-color: var(--md-gold-lt);
    }
    .ag-kanpai-btn:active {
        transform: scale(0.95);
        box-shadow: 0 0 16px rgba(201,168,76,0.15);
    }
    .ag-kanpai-btn.is-done {
        background: transparent;
        border-color: rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.25);
        box-shadow: none;
        cursor: pointer;
    }
    .ag-kanpai-btn.is-done:hover {
        border-color: rgba(255,255,255,0.15);
        color: rgba(255,255,255,0.3);
        transform: scale(1.02);
    }
    .ag-kanpai-btn.is-done:active {
        transform: scale(0.95);
    }

    /* Burst Particles */
    .ag-kanpai-burst {
        position: absolute;
        width: 6px; height: 6px;
        border-radius: 50%;
        pointer-events: none; z-index: 10;
        animation: ag-burstOut 0.8s ease-out forwards;
    }
    @keyframes ag-burstOut {
        0% { opacity: 1; transform: translate(0,0) scale(1); }
        100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(0.15); }
    }

    /* XP Burst */
    .ag-kanpai-xp {
        position: absolute;
        left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Spline Sans', sans-serif;
        font-size: 2rem; font-weight: 900;
        color: var(--md-gold-lt);
        text-shadow: 0 2px 12px rgba(201,168,76,0.4);
        pointer-events: none; z-index: 20;
        animation: ag-xpPop 1.8s ease-out forwards;
    }
    @keyframes ag-xpPop {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
        15% { opacity: 1; transform: translate(-50%, -60%) scale(1.2); }
        30% { transform: translate(-50%, -65%) scale(1); }
        100% { opacity: 0; transform: translate(-50%, -120%) scale(0.8); }
    }

    /* ===================================================================
       管理画面 System / Shop テーマ分離 (#1062)
       =================================================================== */

    /* --- System テーマ（デフォルト: スレート） --- */
    .ag-admin-system {
        --sq-admin-sidebar-bg: var(--color-slate-800, #1e293b);
        --sq-admin-sidebar-border: var(--color-slate-700, #334155);
        --sq-admin-sidebar-hover: var(--color-slate-700, #334155);
        --sq-admin-sidebar-active: var(--color-slate-700, #334155);
        --sq-admin-sidebar-section: var(--color-slate-500, #64748b);
        --sq-admin-badge-bg: var(--color-indigo-600, #4f46e5);
        --sq-admin-badge-text: #ffffff;
        --sq-admin-accent: var(--color-indigo-500, #6366f1);
    }

    /* --- Shop テーマ（アンバー / ゴールド） --- */
    .ag-admin-shop {
        --sq-admin-sidebar-bg: #1a1520;
        --sq-admin-sidebar-border: #2d2535;
        --sq-admin-sidebar-hover: #2d2535;
        --sq-admin-sidebar-active: #2d2535;
        --sq-admin-sidebar-section: #8b7fa0;
        --sq-admin-badge-bg: #b8860b;
        --sq-admin-badge-text: #ffffff;
        --sq-admin-accent: #d4a017;
    }

    /* --- ヘッダーバッジ --- */
    .ag-admin-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.25rem 0.75rem;
        border-radius: 0.375rem;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.025em;
        background-color: var(--sq-admin-badge-bg);
        color: var(--sq-admin-badge-text);
    }

    /* --- テーマ対応サイドバー --- */
    .ag-admin-sidebar {
        background-color: var(--sq-admin-sidebar-bg);
    }

    .ag-admin-sidebar-divider {
        border-color: var(--sq-admin-sidebar-border);
    }

    .ag-admin-nav-item:hover {
        background-color: var(--sq-admin-sidebar-hover);
    }

    .ag-admin-nav-item.is-active {
        background-color: var(--sq-admin-sidebar-active);
    }

    .ag-admin-section-label {
        color: var(--sq-admin-sidebar-section);
    }

    /* ─── #1092 ウェルカムツアー ─────────────────────── */

    .ag-welcome-tour__overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ag-welcome-tour__overlay--visible {
        opacity: 1;
    }

    .ag-welcome-tour__modal {
        background: var(--sq-card, #fff);
        border-radius: 20px;
        padding: 32px 24px 24px;
        max-width: 360px;
        width: 90%;
        text-align: center;
        transform: scale(0.85);
        transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    }

    .ag-welcome-tour__overlay--visible .ag-welcome-tour__modal {
        transform: scale(1);
    }

    .ag-welcome-tour__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 24px;
    }

    .ag-welcome-tour__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--sq-border, #e0e0e0);
        transition: background 0.3s, transform 0.3s;
    }

    .ag-welcome-tour__dot--active {
        background: var(--sq-brand, #c8102e);
        transform: scale(1.3);
    }

    .ag-welcome-tour__slides {
        position: relative;
        min-height: 240px;
    }

    .ag-welcome-tour__slide {
        display: none;
        animation: ag-welcome-tour-fade-in 0.4s ease both;
    }

    .ag-welcome-tour__slide--active {
        display: block;
    }

    @keyframes ag-welcome-tour-fade-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .ag-welcome-tour__screenshot {
        margin-bottom: 16px;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        border: 1px solid var(--sq-border, #e8e8e8);
    }

    .ag-welcome-tour__screenshot img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        object-position: top center;
        display: block;
    }

    .ag-welcome-tour__title {
        font-size: 18px;
        font-weight: 800;
        color: var(--sq-text, #1a1a1a);
        margin-bottom: 8px;
    }

    .ag-welcome-tour__desc {
        font-size: 14px;
        color: var(--sq-text-sub, #666);
        line-height: 1.7;
        text-align: left;
    }

    .ag-welcome-tour__nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 28px;
    }

    .ag-welcome-tour__skip {
        background: none;
        border: none;
        color: var(--sq-text-sub, #999);
        font-size: 13px;
        cursor: pointer;
        padding: 8px 12px;
    }

    .ag-welcome-tour__skip:hover {
        color: var(--sq-text, #333);
    }

    .ag-welcome-tour__btn {
        background: var(--sq-brand, #c8102e);
        color: #fff;
        border: none;
        border-radius: 12px;
        padding: 10px 28px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .ag-welcome-tour__btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3);
    }

    .ag-welcome-tour__btn:active {
        transform: translateY(0);
    }

    /* ─── #1091 SAKEチケットバッジ ───────────────────── */

    .ag-ticket-badge {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px 8px;
        background: linear-gradient(135deg, var(--sq-gold, #c8a94e) 0%, #e8c84e 100%);
        color: #1a1200;
        font-size: 12px;
        font-weight: 800;
        border-radius: 12px;
        letter-spacing: 0.3px;
        white-space: nowrap;
        animation: ag-ticket-shimmer 3s ease-in-out infinite;
    }

    @keyframes ag-ticket-shimmer {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.85; }
    }

    /* ===================================================================
       #1119 SNS Share Foundation v2 — Epic #1117
       =================================================================== */

    /* ── x-share-button: icon variant ── */
    .ag-share-btn--icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 44px;
        min-height: 44px;
        border: none;
        background: none;
        color: var(--sq-text-sub);
        cursor: pointer;
        transition: var(--sq-transition);
        border-radius: 50%;
        position: relative;
    }

    .ag-share-btn--icon:hover {
        color: var(--sq-accent);
        background: var(--sq-accent-light);
    }

    .ag-share-btn--icon:active {
        transform: scale(0.9);
    }

    .ag-share-btn--icon .material-symbols-outlined {
        font-size: 20px;
    }

    /* ── x-share-button: pill variant ── */
    .ag-share-btn--pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        height: 42px;
        padding: 0 20px;
        border: none;
        border-radius: var(--sq-radius-pill);
        background: var(--sq-text, #1a1c19);
        color: #fff;
        font-size: 0.875rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--sq-transition);
        font-family: inherit;
        letter-spacing: 0.02em;
    }

    .ag-share-btn--pill:hover {
        border-color: var(--sq-accent);
        color: var(--sq-accent);
    }

    .ag-share-btn--pill:active {
        transform: scale(0.95);
    }

    .ag-share-btn--pill .material-symbols-outlined {
        font-size: 16px;
    }

    /* ── x-share-button: full variant ── */
    .ag-share-btn--full {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 14px 24px;
        border: none;
        border-radius: var(--sq-radius);
        background: linear-gradient(135deg, var(--sq-accent), #c4922a);
        color: #fff;
        font-size: 0.9rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--sq-transition);
        font-family: inherit;
        box-shadow: 0 4px 16px rgba(212, 160, 23, 0.3);
    }

    .ag-share-btn--full:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 24px rgba(212, 160, 23, 0.4);
    }

    .ag-share-btn--full:active {
        transform: scale(0.98);
    }

    .ag-share-btn--full .material-symbols-outlined {
        font-size: 20px;
    }

    /* ── XP バッジ ── */
    .ag-share-xp {
        display: inline-block;
        padding: 2px 8px;
        border-radius: var(--sq-radius-pill);
        background: rgba(255, 255, 255, 0.25);
        font-size: 0.72rem;
        font-weight: 900;
        color: #fff;
        margin-left: 6px;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }

    .ag-share-xp--muted {
        background: rgba(0, 0, 0, 0.08);
        color: var(--sq-accent);
    }

    .ag-share-ticket {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px 8px;
        border-radius: var(--sq-radius-pill);
        background: linear-gradient(135deg, #f5a623, #e8930c);
        font-size: 0.72rem;
        font-weight: 900;
        color: #fff;
        margin-left: 6px;
        letter-spacing: 0.3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
        white-space: nowrap;
    }

    /* icon variant のボタン内ではテキストなしの小さなバッジで表示 */
    .ag-share-btn--icon .ag-share-ticket {
        position: absolute;
        top: -4px;
        right: -4px;
        padding: 1px 5px;
        font-size: 0.6rem;
        margin-left: 0;
    }

    /* ── XP フロートアニメーション ── */
    @keyframes xpFloat {
        0% { opacity: 1; transform: translateY(0) scale(1); }
        60% { opacity: 1; transform: translateY(-30px) scale(1.2); }
        100% { opacity: 0; transform: translateY(-50px) scale(0.8); }
    }

    .ag-xp-float {
        position: fixed;
        font-size: 1.1rem;
        font-weight: 900;
        color: var(--sq-accent);
        text-shadow: 0 2px 4px rgba(212, 160, 23, 0.4);
        pointer-events: none;
        z-index: 400;
        animation: xpFloat 0.8s ease-out forwards;
    }

    /* ── x-share-modal (Bottom Sheet) ── */
    .ag-share-overlay {
        position: fixed;
        inset: 0;
        background: var(--sq-overlay);
        z-index: 200;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .ag-share-overlay.is-active {
        opacity: 1;
        visibility: visible;
    }

    .ag-share-sheet {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        width: 100%;
        max-width: 430px;
        background: var(--sq-card);
        border-radius: 20px 20px 0 0;
        padding: 0 24px 24px;
        padding-bottom: max(24px, env(safe-area-inset-bottom));
        z-index: 201;
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.15);
    }

    .ag-share-overlay.is-active + .ag-share-sheet,
    .ag-share-sheet.is-active {
        transform: translateX(-50%) translateY(0);
    }

    .ag-share-handle {
        width: 36px;
        height: 4px;
        background: #d0d0d0;
        border-radius: 2px;
        margin: 12px auto 16px;
    }

    .ag-share-title {
        font-size: 1rem;
        font-weight: 900;
        text-align: center;
        margin-bottom: 20px;
    }

    .ag-share-options {
        display: flex;
        justify-content: center;
        gap: 32px;
        margin-bottom: 20px;
    }

    /* ── シェアオプション ── */
    .ag-share-opt {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        border: none;
        background: none;
        cursor: pointer;
        font-family: inherit;
        transition: var(--sq-transition);
    }

    .ag-share-opt:active {
        transform: scale(0.9);
    }

    .ag-share-opt-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: #fff;
    }

    .ag-share-opt--fb .ag-share-opt-icon {
        background: var(--sq-fb);
    }

    .ag-share-opt--line .ag-share-opt-icon {
        background: var(--sq-line);
    }

    .ag-share-opt--x .ag-share-opt-icon {
        background: var(--sq-x);
    }

    .ag-share-opt--copy .ag-share-opt-icon {
        background: var(--sq-copy);
    }

    .ag-share-opt-label {
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--sq-text-sub);
    }

    .ag-share-preview {
        background: #f8f8f5;
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 0.8rem;
        color: var(--sq-text-sub);
        line-height: 1.5;
    }

    /* ── トースト ── */
    .ag-share-toast {
        position: fixed;
        bottom: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(200px);
        padding: 14px 24px;
        background: var(--sq-text);
        color: #fff;
        border-radius: 1rem;
        font-size: 0.85rem;
        font-weight: 700;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        z-index: 300;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0;
        pointer-events: none;
    }

    .ag-share-toast.is-visible {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .ag-share-toast-icon {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
    }

    .ag-share-toast-icon.line {
        background: var(--sq-line);
    }

    .ag-share-toast-icon.x {
        background: var(--sq-x);
    }

    .ag-share-toast-icon.copy {
        background: var(--sq-accent);
    }

    .ag-share-toast-icon.fb {
        background: var(--sq-fb);
    }

    .ag-share-toast-icon.ig {
        background: var(--sq-ig);
    }

    .ag-share-toast-icon.native {
        background: var(--sq-accent);
    }

    /* ── レベルアップモーダル ── */
    .levelup-modal {
        position: fixed;
        inset: 0;
        background: var(--sq-overlay);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 150;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    .levelup-modal.is-active {
        opacity: 1;
        visibility: visible;
    }

    .levelup-inner {
        background: var(--sq-card);
        border-radius: 20px;
        padding: 32px 24px;
        text-align: center;
        width: calc(100% - 48px);
        max-width: 340px;
        transform: scale(0.9);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .levelup-modal.is-active .levelup-inner {
        transform: scale(1);
    }

    .levelup-emoji {
        font-size: 3rem;
        margin-bottom: 12px;
    }

    .levelup-title {
        font-size: 1.2rem;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .levelup-levels {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .levelup-lv {
        font-size: 1.8rem;
        font-weight: 900;
        color: var(--sq-accent);
    }

    .levelup-lv.old {
        color: var(--sq-text-muted);
        font-size: 1.2rem;
    }

    .levelup-arrow {
        font-size: 1.2rem;
        color: var(--sq-text-muted);
    }

    .levelup-body {
        font-size: 0.85rem;
        color: var(--sq-text-sub);
        margin-bottom: 20px;
    }

    .levelup-btn {
        display: block;
        width: 100%;
        padding: 12px;
        border: 1px solid var(--sq-border);
        border-radius: var(--sq-radius);
        background: var(--sq-card);
        color: var(--sq-text);
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        font-family: inherit;
        margin-top: 8px;
    }

    /* ===================================================================
       Share Card Carousel (#1118 Phase 2)
       =================================================================== */

    /* — Carousel Container — */
    .ag-share-carousel {
        overflow: hidden;
        position: relative;
        border-radius: 1rem;
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
        padding: 0 4%;
    }

    /* — Slide Track — */
    .ag-share-carousel__track {
        display: flex;
        transition: transform .35s cubic-bezier(.4, 0, .2, 1);
        will-change: transform;
    }

    /* — Individual Card — */
    .ag-share-card {
        flex: 0 0 92%;
        margin: 0 1%;
        min-height: 220px;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        padding: 1.5rem 1.25rem;
        box-sizing: border-box;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* — Dark overlay for text readability on photo bg — */
    .ag-share-card__overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);
        z-index: 0;
    }

    .ag-share-card > * {
        position: relative;
        z-index: 1;
    }

    /* — Season Label — */
    .ag-share-card__label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1.375rem;
        font-weight: 900;
        color: #fff;
        letter-spacing: 0.1em;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(0,0,0,0.3);
    }

    /* — Haiku Text — */
    .ag-share-card__haiku {
        font-size: 1rem;
        line-height: 1.9;
        color: #fff;
        text-align: center;
        font-weight: 600;
        letter-spacing: 0.1em;
        max-width: 20em;
        margin: 0;
        text-shadow: 0 2px 8px rgba(0,0,0,0.7), 0 0 16px rgba(0,0,0,0.3);
    }

    /* — Brand Logo — */
    .ag-share-card__brand {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: auto;
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.5));
    }

    /* — XP Badge — */
    .ag-share-card__xp-badge {
        position: absolute;
        top: 0.75rem;
        right: 0.75rem;
        background: rgba(255, 255, 255, 0.85);
        color: var(--sq-text);
        font-size: 0.625rem;
        font-weight: 900;
        padding: 0.25rem 0.625rem;
        border-radius: 9999px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* — Share Button — */
    .ag-share-card__share-btn {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.5rem 1.25rem;
        border: 2px solid rgba(255,255,255,0.8);
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 700;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.15s;
        font-family: inherit;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .ag-share-card__share-btn:active {
        transform: scale(0.95);
    }

    @media (hover: hover) {
        .ag-share-card__share-btn:hover {
            background: rgba(255, 255, 255, 0.95);
        }
    }

    /* — Dot Indicators — */
    .ag-share-dots {
        display: flex;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 0 0.25rem;
    }

    .ag-share-dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: var(--sq-border, #e2e8f0);
        cursor: pointer;
        transition: background-color 0.2s, transform 0.2s;
    }

    .ag-share-dot--active {
        transform: scale(1.3);
    }
}

/* ===================================================================
   #1118: Referral UI — モック v2 準拠
   Design Tokens (Brand Color Scale + SNS)
   =================================================================== */
:root {
    /* Brand Color Scale for Referral */
    --bc-50: #fef2f2;
    --bc-100: #fde3e4;
    --bc-200: #fcccce;
    --bc-600: #d6353b;
    --bc-700: #b32227;
    --bc-800: #942024;
    --bc-950: #430c0e;
    /* SNS colors */
    --sq-line: #06c755;
    --sq-x: #000;
    --sq-fb: #1877f2;
    --sq-copy: #6b7280;
}

/* ===================================================================
   #1118: Referral Components — モック v2 準拠
   =================================================================== */
@layer components {

    /* ===== H-5: FOMO Campaign Banner ===== */
    .ag-fomo-banner {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 10px 16px;
        background: var(--sq-brand); color: #fff;
        font-size: 13px; font-weight: 700;
        animation: fomoPulse 2s ease-in-out infinite;
    }
    .ag-fomo-banner .material-symbols-outlined { font-size: 18px; animation: fomoPulse 2s ease-in-out infinite; }
    .ag-fomo-banner-sub { font-weight: 500; font-size: 11px; opacity: 0.85; margin-left: 4px; }

    /* ===== Dashboard Hero ===== */
    .ag-ref-hero {
        padding: 28px 20px 24px;
        background: linear-gradient(180deg, var(--bc-50) 0%, var(--sq-bg) 100%);
        text-align: center;
        position: relative;
    }
    .ag-ref-hero-icon {
        width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
        background: var(--sq-brand);
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 4px 16px rgba(178,4,17,0.2);
    }
    .ag-ref-hero-icon .material-symbols-outlined { font-size: 28px; color: #fff; }
    .ag-ref-hero-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 19px; font-weight: 700; line-height: 1.5;
        margin-bottom: 6px; color: var(--sq-text);
    }
    .ag-ref-hero-title strong { color: var(--sq-brand); }
    .ag-ref-hero-sub { font-size: 13px; color: var(--sq-text-sub); line-height: 1.7; }

    /* ===== Code Section ===== */
    .ag-ref-code-section { padding: 16px 20px; }
    .ag-ref-code-label {
        font-size: 11px; font-weight: 600; color: var(--sq-text-sub);
        letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px;
    }
    .ag-ref-code-box {
        display: flex; align-items: center; gap: 10px;
        background: var(--sq-card); border: 1.5px dashed var(--sq-brand);
        border-radius: var(--sq-radius); padding: 12px 14px;
        box-shadow: var(--sq-shadow);
    }
    .ag-ref-code-value {
        flex: 1; font-size: 26px; font-weight: 800;
        letter-spacing: 5px; color: var(--sq-brand);
        font-family: 'Courier New', monospace;
        text-align: center;
    }
    .ag-ref-code-copy {
        display: flex; align-items: center; gap: 4px;
        padding: 8px 14px; border-radius: 8px;
        background: var(--sq-brand); color: #fff;
        border: none; font-weight: 600; font-size: 12px;
        cursor: pointer; transition: var(--sq-transition);
        white-space: nowrap;
    }
    .ag-ref-code-copy:hover { background: var(--sq-brand-lt); }
    .ag-ref-code-copy.copied { background: #059669; }
    /* C-5: QR Button in code section */
    .ag-ref-code-qr {
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 8px;
        background: var(--sq-info-bg); border: 1px solid var(--sq-border);
        cursor: pointer; transition: var(--sq-transition);
        flex-shrink: 0;
    }
    .ag-ref-code-qr:hover { border-color: var(--sq-brand); background: var(--bc-50); }
    .ag-ref-code-qr .material-symbols-outlined { font-size: 20px; color: var(--sq-brand); }

    /* ===== Share Buttons ===== */
    .ag-ref-share-section { padding: 0 20px 16px; }
    .ag-ref-share-label {
        font-size: 12px; font-weight: 600; margin-bottom: 8px;
        color: var(--sq-text-sub);
    }
    .ag-ref-share-buttons { display: flex; gap: 8px; }
    .ag-ref-share-btn {
        flex: 1; display: flex; align-items: center; justify-content: center;
        gap: 5px; padding: 10px; border-radius: var(--sq-radius);
        border: none; font-weight: 600; font-size: 12px;
        cursor: pointer; transition: var(--sq-transition); color: #fff;
    }
    .ag-ref-share-btn:hover { opacity: 0.9; transform: translateY(-1px); }
    .ag-ref-share-btn--line { background: var(--sq-line); }
    .ag-ref-share-btn--fb { background: var(--sq-fb); }
    .ag-ref-share-btn--x { background: var(--sq-x); }
    .ag-ref-share-btn--copy { background: var(--sq-card); color: var(--sq-text-sub); border: 1px solid var(--sq-border); }
    /* M-1: Web Share API hint */
    .ag-ref-share-hint {
        font-size: 11px; color: var(--sq-text-muted); margin-top: 6px;
        display: flex; align-items: center; gap: 4px;
    }
    .ag-ref-share-hint .material-symbols-outlined { font-size: 14px; }

    /* ===== C-3: SAKEチケット info banner ===== */
    .ag-ticket-info-banner {
        display: flex; align-items: flex-start; gap: 8px;
        padding: 10px 14px; border-radius: var(--sq-radius);
        background: var(--sq-info-bg); border: 1px solid var(--sq-border);
        margin-bottom: 10px;
    }
    .ag-ticket-info-banner .material-symbols-outlined { font-size: 18px; color: var(--sq-text-sub); flex-shrink: 0; margin-top: 1px; }
    .ag-ticket-info-banner-text { font-size: 11px; color: var(--sq-text-sub); line-height: 1.6; }
    .ag-ticket-info-banner-text strong { color: var(--sq-text); font-weight: 700; }

    /* ===== Rewards ===== */
    .ag-ref-rewards { padding: 0 20px 16px; }
    .ag-ref-rewards-title {
        font-size: 14px; font-weight: 700; margin-bottom: 10px;
        display: flex; align-items: center; gap: 6px;
        color: var(--sq-text);
    }
    .ag-ref-rewards-title .material-symbols-outlined { font-size: 18px; color: var(--sq-gold); }
    .ag-ref-reward-card {
        background: var(--sq-card); border-radius: var(--sq-radius);
        padding: 12px 14px; margin-bottom: 6px;
        display: flex; align-items: center; gap: 12px;
        border: 1px solid var(--sq-border);
        transition: var(--sq-transition);
    }
    .ag-ref-reward-card:hover { border-color: var(--sq-brand); box-shadow: var(--sq-shadow); }
    .ag-ref-reward-icon {
        width: 40px; height: 40px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .ag-ref-reward-icon .material-symbols-outlined { font-size: 20px; }
    .ag-ref-reward-icon--signup { background: #ecfdf5; }
    .ag-ref-reward-icon--signup .material-symbols-outlined { color: #059669; }
    .ag-ref-reward-icon--review { background: #eff6ff; }
    .ag-ref-reward-icon--review .material-symbols-outlined { color: #2563eb; }
    .ag-ref-reward-icon--level { background: #fef3c7; }
    .ag-ref-reward-icon--level .material-symbols-outlined { color: var(--sq-gold); }
    .ag-ref-reward-icon--visit { background: var(--sq-washi); }
    .ag-ref-reward-icon--visit .material-symbols-outlined { color: var(--sq-brand); }
    .ag-ref-reward-info { flex: 1; }
    .ag-ref-reward-name { font-size: 13px; font-weight: 600; margin-bottom: 1px; color: var(--sq-text); }
    .ag-ref-reward-desc { font-size: 11px; color: var(--sq-text-sub); }
    .ag-ref-reward-amount { text-align: right; }
    .ag-ref-reward-amount-main {
        font-size: 15px; font-weight: 800; color: var(--sq-brand);
        display: flex; align-items: center; gap: 2px;
    }
    .ag-ref-reward-amount-sub { font-size: 10px; color: var(--sq-text-sub); font-weight: 500; }
    .ag-ticket-icon { width: 16px; height: 16px; }

    /* ===== Milestones ===== */
    .ag-ref-milestones { padding: 0 20px 16px; }
    .ag-ref-milestones-title {
        font-size: 14px; font-weight: 700; margin-bottom: 10px;
        display: flex; align-items: center; gap: 6px;
        color: var(--sq-text);
    }
    .ag-ref-milestones-title .material-symbols-outlined { font-size: 18px; color: var(--sq-brand); }
    .ag-milestone-track {
        background: var(--sq-card); border-radius: var(--sq-radius);
        border: 1px solid var(--sq-border); padding: 16px;
        overflow-x: auto; scrollbar-width: none;
    }
    .ag-milestone-track::-webkit-scrollbar { display: none; }
    .ag-milestone-bar {
        display: flex; align-items: center; min-width: 520px;
        position: relative;
    }
    .ag-milestone-node {
        display: flex; flex-direction: column; align-items: center;
        position: relative; z-index: 2;
        min-width: 80px;
    }
    .ag-milestone-icon {
        width: 40px; height: 40px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: var(--sq-border); color: var(--sq-text-muted);
        border: 2px solid var(--sq-border);
        transition: var(--sq-transition);
        margin-bottom: 6px;
    }
    .ag-milestone-icon .material-symbols-outlined { font-size: 20px; }
    .ag-milestone-node.achieved .ag-milestone-icon {
        background: var(--bc-50); color: var(--sq-brand);
        border-color: var(--sq-brand);
    }
    .ag-milestone-node.achieved .ag-milestone-icon .material-symbols-outlined { color: var(--sq-brand); }
    .ag-milestone-label { font-size: 10px; font-weight: 600; color: var(--sq-text-sub); text-align: center; white-space: nowrap; }
    .ag-milestone-reward-label { font-size: 9px; color: var(--sq-text-muted); text-align: center; margin-top: 2px; }
    .ag-milestone-node.achieved .ag-milestone-label { color: var(--sq-brand); font-weight: 700; }
    .ag-milestone-connector {
        flex: 1; height: 3px;
        background: var(--sq-border);
        position: relative; z-index: 1;
        margin: 0 -4px; margin-bottom: 28px;
    }
    .ag-milestone-connector.filled { background: var(--sq-brand); }
    .ag-milestone-connector.partial {
        background: linear-gradient(90deg, var(--sq-brand) 60%, var(--sq-border) 60%);
    }
    .ag-milestone-progress-hint {
        margin-top: 10px; font-size: 11px; color: var(--sq-text-sub);
        display: flex; align-items: center; gap: 4px;
    }
    .ag-milestone-progress-hint .material-symbols-outlined { font-size: 14px; color: var(--sq-brand); }
    .ag-milestone-progress-hint strong { color: var(--sq-brand); }

    /* ===== Stats ===== */
    .ag-ref-stats { padding: 0 20px 20px; }
    .ag-ref-stats-header {
        display: flex; align-items: center; gap: 6px;
        font-size: 14px; font-weight: 700; margin-bottom: 10px;
    }
    .ag-ref-stats-header .material-symbols-outlined { font-size: 18px; color: var(--sq-brand); }
    .ag-ref-stats-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        margin-bottom: 12px;
    }
    .ag-ref-stat-card {
        background: var(--sq-card); border-radius: var(--sq-radius);
        padding: 14px; text-align: center;
        border: 1px solid var(--sq-border);
    }
    .ag-ref-stat-value { font-size: 28px; font-weight: 800; color: var(--sq-brand); line-height: 1; }
    .ag-ref-stat-label { font-size: 11px; color: var(--sq-text-sub); margin-top: 4px; }
    /* H-6: チケット利用先導線 */
    .ag-ref-stat-link {
        display: inline-flex; align-items: center; gap: 2px;
        font-size: 11px; color: var(--sq-brand); font-weight: 600;
        margin-top: 6px; text-decoration: none; cursor: pointer;
    }
    .ag-ref-stat-link:hover { text-decoration: underline; }
    .ag-ref-stat-link .material-symbols-outlined { font-size: 14px; }
    .ag-ref-event-list { display: flex; flex-direction: column; gap: 6px; }
    .ag-ref-event-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; background: var(--sq-card);
        border-radius: var(--sq-radius);
        border: 1px solid var(--sq-border);
    }
    .ag-ref-event-avatar {
        width: 32px; height: 32px; border-radius: 50%;
        background: var(--bc-100);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .ag-ref-event-avatar .material-symbols-outlined { font-size: 16px; color: var(--sq-brand); }
    .ag-ref-event-info { flex: 1; }
    .ag-ref-event-name { font-size: 12px; font-weight: 600; }
    .ag-ref-event-type { font-size: 10px; color: var(--sq-text-muted); }
    .ag-ref-event-reward { font-size: 13px; font-weight: 700; color: #059669; }

    /* ===== H-2: Leaderboard ===== */
    .ag-ref-leaderboard { padding: 0 20px 20px; }
    .ag-ref-leaderboard-title {
        font-size: 14px; font-weight: 700; margin-bottom: 10px;
        display: flex; align-items: center; gap: 6px;
        color: var(--sq-text);
    }
    .ag-ref-leaderboard-title .material-symbols-outlined { font-size: 18px; color: var(--sq-gold); }
    .ag-leaderboard-list { display: flex; flex-direction: column; gap: 4px; }
    .ag-leaderboard-item {
        display: flex; align-items: center; gap: 10px;
        padding: 10px 12px; background: var(--sq-card);
        border-radius: var(--sq-radius); border: 1px solid var(--sq-border);
        transition: var(--sq-transition);
    }
    .ag-leaderboard-item.is-me { border-left: 3px solid var(--sq-brand); background: var(--bc-50); }
    .ag-leaderboard-rank {
        width: 28px; height: 28px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 12px; font-weight: 800; flex-shrink: 0;
    }
    .ag-leaderboard-rank--1 { background: #fef3c7; color: var(--sq-gold); }
    .ag-leaderboard-rank--2 { background: #f1f5f9; color: #64748b; }
    .ag-leaderboard-rank--3 { background: #fff7ed; color: #ea580c; }
    .ag-leaderboard-rank--4, .ag-leaderboard-rank--5 { background: var(--sq-info-bg); color: var(--sq-text-sub); font-weight: 600; }
    .ag-leaderboard-rank .material-symbols-outlined { font-size: 16px; }
    .ag-leaderboard-name { flex: 1; font-size: 13px; font-weight: 600; }
    .ag-leaderboard-name .me-badge { color: var(--sq-brand); font-size: 11px; font-weight: 700; }
    .ag-leaderboard-count { font-size: 13px; font-weight: 700; color: var(--sq-text-sub); }
    .ag-leaderboard-count strong { color: var(--sq-brand); }

    /* ===== Landing ===== */
    /* C-2: Inviter card */
    .ag-inviter-card {
        display: flex; align-items: center; gap: 12px;
        padding: 14px 16px; margin: 0;
        background: var(--sq-card);
        border-bottom: 1px solid var(--sq-border);
        border-left: 3px solid var(--sq-brand);
    }
    .ag-inviter-avatar {
        width: 44px; height: 44px; border-radius: 50%;
        background: var(--bc-100);
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    .ag-inviter-avatar .material-symbols-outlined { font-size: 22px; color: var(--sq-brand); }
    .ag-inviter-info { flex: 1; }
    .ag-inviter-message { font-size: 13px; font-weight: 600; color: var(--sq-text); line-height: 1.5; }
    .ag-inviter-message strong { color: var(--sq-brand); }
    .ag-inviter-meta { font-size: 11px; color: var(--sq-text-sub); margin-top: 2px; display: flex; align-items: center; gap: 8px; }
    .ag-inviter-meta-item { display: flex; align-items: center; gap: 2px; }
    .ag-inviter-meta-item .material-symbols-outlined { font-size: 13px; }

    .ag-landing-hero {
        padding: 40px 24px 32px; text-align: center;
        background: linear-gradient(180deg, var(--bc-50) 0%, var(--sq-bg) 100%);
    }
    .ag-landing-badge {
        display: inline-flex; align-items: center; gap: 5px;
        padding: 5px 12px; border-radius: var(--sq-radius-pill);
        background: var(--bc-100); color: var(--sq-brand);
        font-size: 11px; font-weight: 600; margin-bottom: 20px;
    }
    .ag-landing-badge .material-symbols-outlined { font-size: 14px; }
    .ag-landing-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 22px; font-weight: 700; line-height: 1.6;
        margin-bottom: 10px; color: var(--sq-text);
    }
    .ag-landing-title em { color: var(--sq-brand); font-style: normal; }
    .ag-landing-sub { font-size: 13px; color: var(--sq-text-sub); line-height: 1.7; margin-bottom: 28px; }
    .ag-landing-cta {
        display: block; width: 100%; padding: 14px;
        border-radius: var(--sq-radius); border: none;
        background: var(--sq-brand); color: #fff;
        font-size: 15px; font-weight: 700;
        cursor: pointer; transition: var(--sq-transition);
        box-shadow: 0 4px 16px rgba(178,4,17,0.2);
    }
    .ag-landing-cta:hover { background: var(--sq-brand-lt); transform: translateY(-1px); }
    /* C-4: Social Proof */
    .ag-landing-social-proof {
        display: flex; align-items: center; justify-content: center; gap: 12px;
        margin-top: 12px; font-size: 11px; color: var(--sq-text-sub);
    }
    .ag-landing-social-proof-item {
        display: flex; align-items: center; gap: 3px;
    }
    .ag-landing-social-proof-item .material-symbols-outlined { font-size: 14px; }
    .ag-landing-social-proof-item .star-icon { color: var(--sq-gold); }
    .ag-landing-bonus {
        display: flex; align-items: center; justify-content: center;
        gap: 6px; margin-top: 14px;
        padding: 10px; border-radius: var(--sq-radius);
        background: #ecfdf5; border: 1px solid #d1fae5;
    }
    .ag-landing-bonus .material-symbols-outlined { font-size: 18px; color: #059669; }
    .ag-landing-bonus-text { font-size: 13px; font-weight: 600; color: #059669; }
    .ag-landing-bonus-sub { font-size: 11px; color: #059669; opacity: 0.75; margin-left: 4px; }
    .ag-landing-features {
        padding: 20px; display: flex; flex-direction: column; gap: 10px;
    }
    .ag-landing-feature {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 14px; background: var(--sq-card);
        border-radius: var(--sq-radius); border: 1px solid var(--sq-border);
    }
    .ag-landing-feature-icon {
        width: 40px; height: 40px; border-radius: 10px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0; background: var(--sq-info-bg);
    }
    .ag-landing-feature-icon .material-symbols-outlined { font-size: 20px; color: var(--sq-brand); }
    .ag-landing-feature-text { flex: 1; }
    .ag-landing-feature-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: var(--sq-text); }
    .ag-landing-feature-desc { font-size: 11px; color: var(--sq-text-sub); line-height: 1.5; }

    /* ===== Profile Section ===== */
    .ag-profile-section-title {
        font-size: 15px; font-weight: 700; margin-bottom: 12px;
        display: flex; align-items: center; gap: 6px;
    }
    .ag-profile-section-title .material-symbols-outlined { font-size: 18px; color: var(--sq-brand); }
    .ag-profile-ref-card {
        background: var(--md-card);
        border: 1px solid var(--md-border);
        border-radius: var(--sq-radius); padding: 16px;
        box-shadow: var(--sq-shadow);
    }
    .ag-profile-ref-top {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 12px;
    }
    .ag-profile-ref-title { font-size: 13px; font-weight: 700; color: var(--sq-text); }
    .ag-profile-ref-count {
        display: flex; align-items: center; gap: 4px;
        font-size: 12px; color: var(--sq-text-sub);
    }
    .ag-profile-ref-count strong { color: var(--sq-brand); font-size: 16px; }
    .ag-profile-ref-code-row {
        display: flex; align-items: center; gap: 8px;
        margin-bottom: 12px;
    }
    .ag-profile-ref-code-val {
        flex: 1; padding: 8px 12px;
        background: var(--md-card-2); border: 1px solid var(--md-border);
        border-radius: 8px;
        font-size: 18px; font-weight: 800; letter-spacing: 4px;
        color: var(--sq-brand); font-family: 'Courier New', monospace;
        text-align: center;
    }
    .ag-profile-ref-copy-btn {
        width: 40px; height: 40px; border-radius: 8px;
        background: var(--sq-brand); border: none;
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: var(--sq-transition);
    }
    .ag-profile-ref-copy-btn .material-symbols-outlined { font-size: 20px; color: #fff; }
    .ag-profile-ref-copy-btn:hover { background: var(--sq-brand-lt); }
    /* C-5: QR小ボタン in profile */
    .ag-profile-ref-qr-btn {
        width: 40px; height: 40px; border-radius: 8px;
        background: var(--md-card-2); border: 1px solid var(--md-border);
        display: flex; align-items: center; justify-content: center;
        cursor: pointer; transition: var(--sq-transition);
    }
    .ag-profile-ref-qr-btn:hover { border-color: var(--sq-brand); background: var(--bc-50); }
    .ag-profile-ref-qr-btn .material-symbols-outlined { font-size: 20px; color: var(--sq-brand); }
    /* M-2: Share buttons unified */
    .ag-profile-ref-share-row { display: flex; gap: 6px; }
    .ag-profile-ref-share-btn {
        flex: 1; display: flex; align-items: center; justify-content: center;
        gap: 4px; padding: 9px; border-radius: 8px;
        border: none; font-weight: 600; font-size: 11px;
        cursor: pointer; transition: var(--sq-transition); color: #fff;
    }
    .ag-profile-ref-share-btn:hover { opacity: 0.9; }
    .ag-profile-ref-share-btn--line { background: var(--sq-line); }
    .ag-profile-ref-share-btn--fb { background: var(--sq-fb); }
    .ag-profile-ref-share-btn--x { background: var(--sq-x); }
    .ag-profile-ref-share-btn--copy { background: var(--md-card); color: var(--md-text-sub); border: 1px solid var(--md-border); }
    .ag-profile-ref-share-btn--copy:hover { border-color: var(--sq-brand); color: var(--sq-brand); }
    .ag-profile-ref-link {
        display: flex; align-items: center; justify-content: center; gap: 4px;
        margin-top: 12px; font-size: 12px; color: var(--sq-brand);
        text-decoration: none; font-weight: 600;
    }
    .ag-profile-ref-link .material-symbols-outlined { font-size: 14px; }
    .ag-profile-ref-link:hover { text-decoration: underline; }

    .ag-profile-ref-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 14px;
        padding: 10px 16px;
        border-radius: var(--sq-radius-md);
        background: var(--sq-brand);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 700;
        text-decoration: none;
        transition: var(--sq-transition);
    }
    .ag-profile-ref-cta .material-symbols-outlined { font-size: 18px; }
    .ag-profile-ref-cta:hover { opacity: 0.9; transform: translateY(-1px); }

    /* ===== Celebration Modal ===== */
    .ag-celebration-overlay {
        position: fixed; inset: 0;
        background: var(--sq-overlay); z-index: 200;
        display: none; align-items: center; justify-content: center;
        padding: 24px;
    }
    .ag-celebration-overlay.show { display: flex; }
    .ag-celebration-card {
        background: var(--sq-card); border-radius: 20px;
        padding: 28px 24px; text-align: center;
        max-width: 320px; width: 100%;
        border: 1px solid var(--sq-border);
        box-shadow: var(--sq-shadow-lg);
        animation: celebPop 0.35s ease;
    }
    .ag-celebration-icon {
        width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
        display: flex; align-items: center; justify-content: center;
    }
    .ag-celebration-icon--signup { background: #ecfdf5; }
    .ag-celebration-icon--signup .material-symbols-outlined { font-size: 32px; color: #059669; }
    .ag-celebration-icon--review { background: #eff6ff; }
    .ag-celebration-icon--review .material-symbols-outlined { font-size: 32px; color: #2563eb; }
    .ag-celebration-icon--level { background: #fef3c7; }
    .ag-celebration-icon--level .material-symbols-outlined { font-size: 32px; color: var(--sq-gold); }
    .ag-celebration-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 18px; font-weight: 700; margin-bottom: 6px;
    }
    .ag-celebration-title strong { color: var(--sq-brand); }
    .ag-celebration-desc { font-size: 13px; color: var(--sq-text-sub); line-height: 1.6; margin-bottom: 16px; }
    .ag-celebration-reward {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 8px 20px; border-radius: var(--sq-radius-pill);
        background: var(--bc-50); color: var(--sq-brand);
        font-size: 16px; font-weight: 800; margin-bottom: 20px;
        border: 1px solid var(--bc-200);
    }
    .ag-celebration-reward .material-symbols-outlined { font-size: 18px; }
    /* C-1: 祝福モーダル CTA 改善 */
    .ag-celebration-btn-primary {
        width: 100%; padding: 12px; border-radius: var(--sq-radius);
        background: var(--sq-brand); color: #fff; border: none;
        font-size: 14px; font-weight: 700; cursor: pointer;
        transition: var(--sq-transition);
        margin-bottom: 10px;
        display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .ag-celebration-btn-primary:hover { background: var(--sq-brand-lt); }
    .ag-celebration-btn-primary .material-symbols-outlined { font-size: 18px; }
    .ag-celebration-btn-secondary {
        background: none; border: none; color: var(--sq-text-sub);
        font-size: 13px; font-weight: 500; cursor: pointer;
        padding: 8px; width: 100%;
        transition: var(--sq-transition);
    }
    .ag-celebration-btn-secondary:hover { color: var(--sq-text); }

    /* ===== C-5: QR Modal ===== */
    .ag-qr-modal-overlay {
        position: fixed; inset: 0;
        background: var(--sq-overlay); z-index: 200;
        display: none; align-items: center; justify-content: center;
        padding: 24px;
    }
    .ag-qr-modal-overlay.show { display: flex; }
    .ag-qr-modal-card {
        background: var(--sq-card); border-radius: 20px;
        padding: 28px 24px; text-align: center;
        max-width: 320px; width: 100%;
        border: 1px solid var(--sq-border);
        box-shadow: var(--sq-shadow-lg);
        animation: celebPop 0.35s ease;
    }
    .ag-qr-modal-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 18px; font-weight: 700; margin-bottom: 6px;
        display: flex; align-items: center; justify-content: center; gap: 6px;
    }
    .ag-qr-modal-title .material-symbols-outlined { font-size: 22px; color: var(--sq-brand); }
    .ag-qr-modal-desc { font-size: 13px; color: var(--sq-text-sub); line-height: 1.6; margin-bottom: 16px; }
    .ag-qr-modal-img {
        width: 200px; height: 200px; margin: 0 auto 16px;
        border-radius: var(--sq-radius);
        border: 1px solid var(--sq-border);
    }
    .ag-qr-modal-close {
        width: 100%; padding: 10px; border-radius: var(--sq-radius);
        background: var(--sq-info-bg); color: var(--sq-text-sub);
        border: 1px solid var(--sq-border);
        font-size: 13px; font-weight: 600; cursor: pointer;
        transition: var(--sq-transition);
    }
    .ag-qr-modal-close:hover { background: var(--sq-border); }

    /* ===== Toast ===== */
    .ag-ref-toast {
        position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(40px);
        padding: 10px 20px; border-radius: var(--sq-radius);
        background: var(--sq-text); color: #fff;
        font-size: 13px; font-weight: 600;
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        opacity: 0; pointer-events: none;
        transition: all 0.3s ease; z-index: 999;
        box-shadow: var(--sq-shadow-lg);
    }
    .ag-ref-toast .toast-main {
        display: flex; align-items: center; gap: 6px;
    }
    /* M-3: コピー後ガイダンス */
    .ag-ref-toast .toast-sub {
        font-size: 11px; font-weight: 400; opacity: 0.75;
    }
    .ag-ref-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ===== Share Cards ===== */
    .ag-share-cards-container {
        padding: 20px; display: flex; flex-direction: column; gap: 16px;
    }
    .ag-share-card-item {
        border-radius: var(--sq-radius); overflow: hidden;
        border: 1px solid var(--sq-border); box-shadow: var(--sq-shadow);
    }
    .ag-share-card-visual {
        padding: 28px 20px; text-align: center;
        position: relative;
        background-size: cover; background-position: center;
        color: #fff;
        min-height: 180px;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .ag-share-card-visual::before {
        content: ''; position: absolute; inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    }
    .ag-share-card-visual > * { position: relative; z-index: 1; }
    .ag-share-card-season {
        font-size: 10px; font-weight: 600; letter-spacing: 2px;
        text-transform: uppercase; margin-bottom: 8px;
        opacity: 0.85;
    }
    .ag-share-card-msg {
        font-family: 'Noto Serif JP', serif;
        font-size: 18px; font-weight: 700; line-height: 1.6;
        margin-bottom: 8px;
        text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    }
    .ag-share-card-user {
        font-size: 12px; font-weight: 500; opacity: 0.85;
    }
    .ag-share-card-brand {
        margin-top: 10px;
        display: flex; flex-direction: column; align-items: center; gap: 3px;
    }
    .ag-share-card-brand img {
        height: 24px; width: auto;
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }
    .ag-share-card-brand-name {
        font-size: 10px; font-weight: 700; letter-spacing: 2px;
        opacity: 0.7; text-transform: uppercase;
    }
    .ag-share-card-action {
        padding: 12px 16px; background: var(--sq-card);
        display: flex; align-items: center; justify-content: space-between;
    }
    .ag-share-card-label { font-size: 12px; color: var(--sq-text-sub); }
    .ag-share-card-btn {
        padding: 7px 14px; border-radius: 8px;
        background: var(--sq-brand); color: #fff; border: none;
        font-size: 12px; font-weight: 600; cursor: pointer;
        transition: var(--sq-transition);
        display: flex; align-items: center; gap: 4px;
    }
    .ag-share-card-btn:hover { background: var(--sq-brand-lt); }
    .ag-share-card-btn .material-symbols-outlined { font-size: 14px; }
    .ag-share-card-xp {
        font-size: 10px; font-weight: 700; color: var(--sq-gold);
        background: rgba(212,160,23,0.12); padding: 2px 6px;
        border-radius: 4px; margin-left: 4px;
    }

    /* OGP Preview */
    .ag-share-card-ogp {
        margin: 0 16px 16px; padding: 10px;
        background: var(--sq-info-bg); border-radius: 8px;
        border: 1px solid var(--sq-border);
    }
    .ag-share-card-ogp-label {
        font-size: 9px; font-weight: 600; color: var(--sq-text-muted);
        letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px;
    }
    .ag-share-card-ogp-card {
        background: var(--sq-card); border-radius: 8px; overflow: hidden;
        border: 1px solid var(--sq-border);
    }
    .ag-share-card-ogp-img {
        width: 100%; height: 90px; object-fit: cover;
    }
    .ag-share-card-ogp-body {
        padding: 8px 10px;
    }
    .ag-share-card-ogp-domain {
        font-size: 9px; color: var(--sq-text-muted); margin-bottom: 2px;
    }
    .ag-share-card-ogp-title {
        font-size: 12px; font-weight: 700; color: var(--sq-text);
        line-height: 1.3; margin-bottom: 2px;
    }
    .ag-share-card-ogp-desc {
        font-size: 10px; color: var(--sq-text-sub); line-height: 1.3;
    }

    /* Season specific backgrounds */
    .ag-share-card--early-summer .ag-share-card-visual { background-image: url('/img/share/early_summer.png'); }
    .ag-share-card--fresh-green .ag-share-card-visual { background-image: url('/img/share/fresh_green.png'); }
    .ag-share-card--tropical-night .ag-share-card-visual { background-image: url('/img/share/tropical_night.png'); }
    .ag-share-card--rainy .ag-share-card-visual { background-image: url('/img/share/rainy_season.png'); }

    /* ===== Share Modal ===== */
    .ag-share-modal-overlay {
        position: fixed; inset: 0; z-index: 200;
        background: rgba(0,0,0,0.45);
        display: flex; align-items: flex-end; justify-content: center;
        opacity: 0; visibility: hidden;
        transition: all 0.25s ease;
    }
    .ag-share-modal-overlay.show { opacity: 1; visibility: visible; }
    .ag-share-modal {
        background: var(--sq-card); border-radius: 16px 16px 0 0;
        width: 100%; max-width: 390px;
        padding: 20px 20px 32px;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
    }
    .ag-share-modal-overlay.show .ag-share-modal { transform: translateY(0); }
    .ag-share-modal-handle {
        width: 36px; height: 4px; background: var(--sq-border);
        border-radius: 2px; margin: 0 auto 16px;
    }
    .ag-share-modal-title {
        font-size: 14px; font-weight: 700; margin-bottom: 4px;
    }
    .ag-share-modal-sub {
        font-size: 11px; color: var(--sq-text-sub); margin-bottom: 16px;
    }
    .ag-share-modal-xp-badge {
        display: inline-flex; align-items: center; gap: 3px;
        background: rgba(212,160,23,0.12); color: var(--sq-gold);
        font-size: 11px; font-weight: 700; padding: 3px 8px;
        border-radius: 6px; margin-left: 6px;
    }
    .ag-share-modal-channels {
        display: flex; gap: 12px; justify-content: center; margin-bottom: 16px;
    }
    .ag-share-modal-ch {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        cursor: pointer; border: none; background: none; padding: 0;
        transition: var(--sq-transition);
    }
    .ag-share-modal-ch:hover { transform: scale(1.08); }
    .ag-share-modal-ch-icon {
        width: 48px; height: 48px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    .ag-share-modal-ch-icon--line { background: var(--sq-line); }
    .ag-share-modal-ch-icon--fb { background: var(--sq-fb); }
    .ag-share-modal-ch-icon--x { background: var(--sq-x); }
    .ag-share-modal-ch-icon--copy { background: var(--sq-border); }
    .ag-share-modal-ch-label {
        font-size: 10px; font-weight: 600; color: var(--sq-text-sub);
    }
    .ag-share-modal-cancel {
        display: block; width: 100%; padding: 12px;
        border: 1px solid var(--sq-border); border-radius: 10px;
        background: none; font-size: 13px; font-weight: 600;
        color: var(--sq-text-sub); cursor: pointer;
        transition: var(--sq-transition);
    }
    .ag-share-modal-cancel:hover { border-color: var(--sq-brand); color: var(--sq-text); }

    /* ===== Goshuin Show Page (#1142) ===== */
    .ag-goshuin-show {
        max-width: 480px;
        margin: 0 auto;
        padding: 24px 16px 40px;
    }
    .ag-goshuin-show-hero {
        text-align: center;
        margin-bottom: 24px;
    }
    .ag-goshuin-show-stamp {
        width: 200px;
        height: 200px;
        margin: 0 auto 20px;
        border-radius: 20px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }
    .ag-goshuin-show-stamp.is-locked {
        opacity: 0.4;
        filter: grayscale(1);
    }
    .ag-goshuin-show-stamp__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ag-goshuin-show-stamp__emoji {
        font-size: 80px;
        line-height: 1;
    }
    .ag-goshuin-show-stamp__placeholder {
        font-size: 48px;
        color: var(--q-text-muted, #999);
    }
    .ag-goshuin-show-meta {
        text-align: center;
    }
    .ag-goshuin-show-name {
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        margin: 8px 0 6px;
        color: var(--sq-text, #fff);
    }
    .ag-goshuin-show-desc {
        font-size: 13px;
        color: var(--sq-text-sub, #aaa);
        line-height: 1.6;
        margin: 0;
    }

    /* Context area */
    .ag-goshuin-show-context {
        margin-bottom: 24px;
    }
    .ag-goshuin-show-earned {
        text-align: center;
        padding: 20px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ag-goshuin-show-level {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-bottom: 8px;
    }
    .ag-goshuin-show-level__badge {
        font-size: 1.25rem;
        font-weight: 900;
        color: var(--sq-gold, #ff9800);
    }
    .ag-goshuin-show-level__max {
        font-size: 10px;
        font-weight: 900;
        padding: 2px 8px;
        border-radius: 9999px;
        background: var(--sq-gold, #ff9800);
        color: #000;
        letter-spacing: 0.05em;
    }
    .ag-goshuin-show-earned__text {
        font-size: 13px;
        color: var(--sq-text-sub, #aaa);
        margin: 0 0 16px;
    }
    .ag-goshuin-show-actions {
        display: flex;
        justify-content: center;
    }

    /* Hint (locked state for logged-in user) */
    .ag-goshuin-show-locked {
        padding: 20px;
    }
    .ag-goshuin-show-hint {
        display: flex;
        gap: 12px;
        padding: 16px;
        background: var(--sq-info-bg, rgba(255, 255, 255, 0.04));
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.06);
    }
    .ag-goshuin-show-hint__icon {
        font-size: 24px;
        color: var(--sq-gold, #ff9800);
        flex-shrink: 0;
        margin-top: 2px;
    }
    .ag-goshuin-show-hint__title {
        font-size: 13px;
        font-weight: 700;
        color: var(--sq-text, #fff);
        margin: 0 0 4px;
    }
    .ag-goshuin-show-hint__text {
        font-size: 12px;
        color: var(--sq-text-sub, #aaa);
        line-height: 1.6;
        margin: 0;
    }

    /* CTA (guest) */
    .ag-goshuin-show-cta {
        text-align: center;
        padding: 24px 20px;
        background: rgba(255, 255, 255, 0.04);
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }
    .ag-goshuin-show-cta__title {
        font-size: 15px;
        font-weight: 900;
        color: var(--sq-text, #fff);
        margin: 0 0 8px;
    }
    .ag-goshuin-show-cta__text {
        font-size: 12px;
        color: var(--sq-text-sub, #aaa);
        line-height: 1.7;
        margin: 0 0 20px;
    }
    .ag-goshuin-show-cta__btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 12px 32px;
        border-radius: 12px;
        background: var(--sq-brand, #c0392b);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: var(--sq-transition, 0.2s ease);
    }
    .ag-goshuin-show-cta__btn:hover {
        opacity: 0.9;
        transform: translateY(-1px);
    }
    .ag-goshuin-show-cta__btn .material-symbols-outlined {
        font-size: 18px;
    }

    /* Navigation */
    .ag-goshuin-show-nav {
        text-align: center;
        padding-top: 8px;
    }
    .ag-goshuin-show-nav__link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--sq-text-sub, #aaa);
        text-decoration: none;
        transition: color 0.2s ease;
    }
    .ag-goshuin-show-nav__link:hover {
        color: var(--sq-brand, #c0392b);
    }
    .ag-goshuin-show-nav__link .material-symbols-outlined {
        font-size: 18px;
    }
    /* ===== Add to Homescreen Quest ===== */
    
      /* ─── Classic Red Design Tokens ─── */
      .ag-quest-homescreen {
        --t-bg: #FAFAFA;
        --t-bg2: #F5F0EB;
        --t-bg3: #EFEBE5;
        --t-bg4: #E8E0D8;
        --t-accent: #C23030;
        --t-accent-lt: rgba(194,48,48,.1);
        --t-accent-shadow: rgba(194,48,48,.3);
        --t-accent-deep: #AE1F24;
        --t-text: #1a1a1a;
        --t-text2: #555;
        --t-gray: #777;
        --t-card-bg: #fff;
        --t-card-border: rgba(194,48,48,.06);
        --t-hero-from: #fff;
        --t-hero-to: #F5F0EB;
        --t-radius: 16px;
        --t-radius-sm: 10px;
        --serif: 'Noto Serif JP', serif;
        --sans: 'Noto Sans JP', sans-serif;

        background: var(--t-bg);
        color: var(--t-text);
      }
    
      /* ─── Header ─── */
      .ag-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-bottom: 1px solid rgba(0,0,0,0.06);
      }
      .ag-header__back {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--t-bg2);
        border: none;
        color: var(--t-text);
        cursor: pointer;
        transition: all 0.2s;
      }
      .ag-header__back:active { transform: scale(0.9); }
      .ag-header__title {
        font-size: 16px;
        font-weight: 700;
        flex: 1;
      }
      .ag-header__badge {
        display: flex;
        align-items: center;
        gap: 4px;
        background: var(--t-accent);
        color: #fff;
        font-size: 12px;
        font-weight: 900;
        padding: 4px 10px;
        border-radius: 20px;
      }
    
      /* ─── Hero ─── */
      .ag-hero {
        position: relative;
        padding: 40px 20px 30px;
        text-align: center;
        background: linear-gradient(180deg, var(--t-hero-from) 0%, var(--t-bg2) 100%);
      }
      .ag-hero__icon {
        width: 88px;
        height: 88px;
        margin: 0 auto 20px;
        background: #fff;
        border-radius: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
        animation: hero-float 3s ease-in-out infinite;
        border: 1px solid rgba(0,0,0,0.04);
      }
      @keyframes hero-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-6px); }
      }
      .ag-hero__icon img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        object-fit: contain;
      }
      .ag-hero__title {
        font-family: var(--serif);
        font-size: 24px;
        font-weight: 900;
        margin-bottom: 8px;
        letter-spacing: 0.04em;
        color: var(--t-text);
      }
      .ag-hero__subtitle {
        font-size: 14px;
        color: var(--t-gray);
        line-height: 1.6;
        max-width: 300px;
        margin: 0 auto;
      }
      .ag-hero__xp-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 16px;
        background: var(--t-accent-lt);
        border: 1px solid rgba(194,48,48,0.15);
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 18px;
        font-weight: 900;
        color: var(--t-accent);
        animation: xp-pulse 2.5s ease-in-out infinite;
      }
      @keyframes xp-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(194,48,48,0.15); }
        50% { box-shadow: 0 0 20px 4px rgba(194,48,48,0.1); }
      }
    
      /* ─── Why Banner ─── */
      .ag-why {
        margin: 0 16px 24px;
        padding: 20px;
        background: var(--t-card-bg);
        border-radius: var(--t-radius);
        border: 1px solid var(--t-card-border);
        box-shadow: 0 2px 12px rgba(0,0,0,0.04);
      }
      .ag-why__title {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--t-text);
      }
      .ag-why__list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .ag-why__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 13px;
        color: var(--t-text2);
        line-height: 1.5;
      }
      .ag-why__item-icon {
        flex-shrink: 0;
        width: 28px;
        height: 28px;
        background: var(--t-accent-lt);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
      }
    
      /* ─── Browser Tabs ─── */
      .ag-tabs {
        margin: 0 16px 4px;
        display: flex;
        gap: 4px;
      }
      .ag-tab {
        flex: 1;
        padding: 12px 0;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        background: var(--t-card-bg);
        border: 1px solid rgba(0,0,0,0.06);
        border-bottom: none;
        border-radius: var(--t-radius-sm) var(--t-radius-sm) 0 0;
        cursor: pointer;
        transition: all 0.3s;
        color: var(--t-gray);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .ag-tab--active {
        background: var(--t-bg2);
        color: var(--t-accent);
        border-color: var(--t-accent);
        border-bottom-color: var(--t-bg2);
      }
      .ag-tab__icon {
        font-size: 18px;
      }
    
      /* ─── Carousel ─── */
      .ag-carousel-container {
        margin: 0 16px 24px;
        background: var(--t-bg2);
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 0 0 var(--t-radius) var(--t-radius);
        overflow: hidden;
      }
    
      .ag-carousel {
        display: none;
      }
      .ag-carousel--active {
        display: block;
      }
    
      .ag-carousel__slides {
        position: relative;
        overflow: hidden;
        touch-action: pan-y;
      }
      .ag-carousel__track {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
      }
      .ag-carousel__slide {
        min-width: 100%;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
      }
    
      .ag-carousel__step-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--t-accent);
        color: #fff;
        font-size: 16px;
        font-weight: 900;
        flex-shrink: 0;
      }
    
      .ag-carousel__step-title {
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        line-height: 1.5;
        color: var(--t-text);
      }
      .ag-carousel__step-desc {
        font-size: 13px;
        color: var(--t-text2);
        text-align: center;
        line-height: 1.6;
        max-width: 280px;
      }
    
      .ag-carousel__img-wrap {
        width: min(280px, 75vw);
        max-height: 400px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 4px 24px rgba(0,0,0,0.1);
        border: 1px solid rgba(0,0,0,0.06);
      }
      .ag-carousel__img-wrap img {
        width: 100%;
        height: auto;
        display: block;
      }
    
      /* Navigation */
      .ag-carousel__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
        gap: 16px;
      }
      .ag-carousel__nav-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--t-card-bg);
        border: 1px solid rgba(0,0,0,0.08);
        color: var(--t-text);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
      }
      .ag-carousel__nav-btn:disabled {
        opacity: 0.3;
        cursor: not-allowed;
      }
      .ag-carousel__nav-btn:not(:disabled):active {
        transform: scale(0.9);
        background: var(--t-accent);
        color: #fff;
      }
      .ag-carousel__dots {
        display: flex;
        gap: 6px;
      }
      .ag-carousel__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0,0,0,0.12);
        transition: all 0.3s;
      }
      .ag-carousel__dot--active {
        width: 24px;
        border-radius: 4px;
        background: var(--t-accent);
      }
    
      /* ─── CTA Button ─── */
      .ag-cta-section {
        padding: 0 16px 40px;
      }
      .ag-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 16px;
        background: var(--t-accent);
        border: none;
        border-radius: var(--t-radius);
        font-family: inherit;
        font-size: 16px;
        font-weight: 900;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 20px var(--t-accent-shadow);
        position: relative;
        overflow: hidden;
      }
      .ag-cta-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
        animation: cta-shine 3s infinite;
      }
      @keyframes cta-shine {
        0% { left: -100%; }
        30% { left: 100%; }
        100% { left: 100%; }
      }
      .ag-cta-btn:active {
        transform: scale(0.97);
      }
    
      /* ─── Tips ─── */
      .ag-tips {
        margin: 0 16px 32px;
        padding: 16px;
        background: rgba(194,48,48,0.04);
        border: 1px solid rgba(194,48,48,0.1);
        border-radius: var(--t-radius-sm);
      }
      .ag-tips__title {
        font-size: 13px;
        font-weight: 700;
        color: var(--t-accent);
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 6px;
      }
      .ag-tips__text {
        font-size: 12px;
        color: var(--t-text2);
        line-height: 1.7;
      }
    
      /* ─── Success Overlay ─── */
      .ag-success-overlay {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(26,10,10,0.88);
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.4s;
      }
      .ag-success-overlay--visible {
        display: flex;
        opacity: 1;
      }
      .ag-success-modal {
        text-align: center;
        padding: 40px 32px;
        max-width: 320px;
        animation: success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      @keyframes success-pop {
        0% { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
      }
      .ag-success__xp {
        font-size: 64px;
        font-weight: 900;
        color: #fff;
        text-shadow: 0 4px 20px var(--t-accent-shadow);
        margin-bottom: 8px;
        animation: xp-count 1s ease-out;
      }
      @keyframes xp-count {
        0% { transform: scale(0.3); opacity: 0; }
        60% { transform: scale(1.2); }
        100% { transform: scale(1); opacity: 1; }
      }
      .ag-success__label {
        font-size: 14px;
        color: rgba(255,255,255,0.7);
        font-weight: 700;
        margin-bottom: 24px;
        letter-spacing: 0.1em;
      }
      .ag-success__msg {
        font-size: 20px;
        font-weight: 900;
        color: #fff;
        margin-bottom: 8px;
      }
      .ag-success__desc {
        font-size: 13px;
        color: rgba(255,255,255,0.6);
        line-height: 1.6;
        margin-bottom: 32px;
      }
      .ag-success__btn {
        padding: 14px 40px;
        background: var(--t-accent);
        border: none;
        border-radius: 30px;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        box-shadow: 0 4px 16px var(--t-accent-shadow);
      }
      .ag-success__btn:active { transform: scale(0.95); }
    
      /* ─── Completion illustration ─── */
      .ag-done-illustration {
        width: 80px;
        height: 80px;
        margin: 0 auto 16px;
        background: #fff;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(0,0,0,0.06);
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      }
    
      /* ─── Responsive ─── */
      @media (min-width: 500px) {
        
      }
    
}

/* ===== Referral Animations (global scope) ===== */
@keyframes fomoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}
@keyframes celebPop {
    0% { transform: scale(0.8); opacity: 0; }
    70% { transform: scale(1.03); }
    100% { transform: scale(1); opacity: 1; }
}

/* ===== Quest Action Link (#1182) ===== */
@layer components {
    .ag-quest-action-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 14px;
        font-size: 12px;
        font-weight: 600;
        color: var(--sq-brand, #c0392b);
        background: var(--sq-brand-light, rgba(192, 57, 43, 0.08));
        border: 1px solid var(--sq-brand-border, rgba(192, 57, 43, 0.15));
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
        margin-top: 8px;
        align-self: flex-start;
    }
    .ag-quest-action-link:hover {
        background: var(--sq-brand, #c0392b);
        color: #fff;
        transform: translateY(-1px);
    }
    .ag-quest-action-link:active {
        transform: translateY(0);
    }

    /* ================================================================
       Quest Detail Page — Museum Dark (#1197 / #1198)
       ================================================================ */

    /* ── Detail Layout ── */
    .q-detail { padding: 0 16px 32px; }

    /* ── Header ── */
    .q-detail-header {
        text-align: center; padding: 24px 16px 20px;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .q-detail-icon {
        width: 56px; height: 56px; border-radius: 14px;
        display: inline-flex; align-items: center; justify-content: center;
        margin-bottom: 12px;
    }
    .q-detail-icon .material-symbols-outlined { font-size: 28px; }
    .q-detail-title {
        font-family: 'Noto Serif JP', serif;
        font-size: 1.2rem; font-weight: 900;
        color: var(--q-text, #e8e4dc); margin-bottom: 6px;
    }
    .q-detail-desc {
        font-size: 13px; color: var(--q-sub, #8a8680);
        line-height: 1.6; max-width: 320px; margin: 0 auto;
    }

    /* ── Specs ── */
    .q-detail-specs {
        display: flex; justify-content: center; gap: 16px;
        margin-top: 16px;
    }
    .q-detail-spec {
        text-align: center; padding: 8px 12px;
        background: var(--q-c1, #13131a);
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 10px; min-width: 70px;
    }
    .q-detail-spec-label {
        font-size: 9px; font-weight: 700;
        color: var(--q-muted, #5a5650);
        letter-spacing: .08em; display: block; margin-bottom: 3px;
    }
    .q-detail-spec-val {
        font-size: 13px; font-weight: 800;
        color: var(--q-text, #e8e4dc);
    }
    .q-detail-spec-xp { color: var(--q-gold, #c9a84c); }

    /* ── Reward Badge ── */
    .q-detail-reward {
        margin: 16px 0; padding: 14px;
        background: linear-gradient(135deg, rgba(201,168,76,.06), rgba(201,168,76,.02));
        border: 1px solid rgba(201,168,76,.15);
        border-radius: 14px;
    }
    .q-detail-reward-label {
        font-size: 11px; font-weight: 700;
        color: var(--q-gold, #c9a84c);
        display: flex; align-items: center; gap: 4px;
        margin-bottom: 10px;
    }
    .q-detail-reward-badge {
        display: flex; align-items: center; gap: 12px;
    }
    .q-detail-reward-img {
        width: 52px; height: 52px; border-radius: 10px;
        overflow: hidden; background: #f7f0e3;
        border: 1.5px solid rgba(201,168,76,.3);
        flex-shrink: 0;
    }
    .q-detail-reward-img img {
        width: 100%; height: 100%; object-fit: cover;
    }
    .q-detail-reward-name {
        font-size: 13px; font-weight: 800;
        color: var(--q-text, #e8e4dc);
    }

    /* ── Action Area ── */
    .q-detail-action { margin: 20px 0; }
    .q-detail-completed {
        display: flex; flex-direction: column;
        align-items: center; gap: 6px; padding: 20px;
    }
    .q-detail-completed-text {
        font-size: 15px; font-weight: 800;
        color: var(--q-green, #4ade80);
    }

    /* ── Progress ── */
    .q-detail-progress-area { margin-bottom: 14px; }
    .q-detail-progress-header {
        display: flex; justify-content: space-between;
        align-items: center; margin-bottom: 6px;
    }
    .q-detail-progress-label {
        font-size: 11px; font-weight: 700;
        color: var(--q-muted, #5a5650);
    }
    .q-detail-progress-count {
        font-family: 'Inter', sans-serif;
        font-size: 13px; font-weight: 800;
        color: var(--q-text, #e8e4dc);
    }
    .q-detail-progress-track {
        height: 6px; background: rgba(255,255,255,.06);
        border-radius: 3px; overflow: hidden;
    }
    .q-detail-progress-fill {
        height: 100%; border-radius: 3px;
        background: linear-gradient(90deg, var(--q-gold, #c9a84c), #d4af37);
        transition: width .8s ease;
    }

    /* ── Claim Button ── */
    .q-detail-claim-form { text-align: center; }
    .q-detail-claim-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 12px 28px; border-radius: 12px;
        background: linear-gradient(135deg, var(--q-gold, #c9a84c), #d4af37);
        color: #0a0a0f; font-size: 14px; font-weight: 900;
        border: none; cursor: pointer;
        transition: all .2s; box-shadow: 0 4px 16px rgba(201,168,76,.25);
    }
    .q-detail-claim-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(201,168,76,.35);
    }
    .q-detail-claim-btn:active { transform: translateY(0); }

    /* ── Link Button ── */
    .q-detail-link-btn {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 10px 24px; border-radius: 10px;
        background: var(--q-brand-sub, rgba(178,4,17,.15));
        color: #e87070; font-size: 13px; font-weight: 800;
        border: 1px solid rgba(178,4,17,.2);
        text-decoration: none; transition: all .2s;
    }
    .q-detail-link-btn:hover {
        background: var(--q-brand, #b20411); color: #fff;
    }

    /* ── Hint ── */
    .q-detail-hint { margin-top: 8px; text-align: center; }
    .q-detail-hint-link {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 12px; font-weight: 700;
        color: var(--q-gold, #c9a84c);
        text-decoration: none; transition: opacity .2s;
    }
    .q-detail-hint-link:hover { opacity: .8; }
    .q-detail-hint-text {
        font-size: 12px; color: var(--q-sub, #8a8680);
    }

    /* ── Errors ── */
    .q-detail-errors {
        margin: 12px 0; padding: 10px 14px;
        background: rgba(178,4,17,.1);
        border: 1px solid rgba(178,4,17,.2);
        border-radius: 10px;
    }
    .q-detail-errors ul { list-style: none; padding: 0; margin: 0; }
    .q-detail-errors li {
        font-size: 12px; color: #e87070;
        padding: 2px 0;
    }

    /* ── History ── */
    .q-detail-history { margin-top: 24px; }
    .q-detail-history-title {
        font-size: 13px; font-weight: 800;
        color: var(--q-text, #e8e4dc);
        margin-bottom: 10px;
    }
    .q-detail-history-list {
        list-style: none; padding: 0; margin: 0;
    }
    .q-detail-history-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 8px 12px; margin-bottom: 4px;
        background: var(--q-c1, #13131a);
        border: 1px solid rgba(255,255,255,.04);
        border-radius: 8px;
    }
    .q-detail-history-meta {
        display: flex; align-items: center; gap: 6px;
    }
    .q-detail-history-meta time {
        font-size: 11px; color: var(--q-sub, #8a8680);
    }
    .q-detail-history-badge {
        font-size: 9px; font-weight: 700;
        padding: 1px 6px; border-radius: 4px;
        background: var(--q-gold-dim, rgba(201,168,76,.15));
        color: var(--q-gold, #c9a84c);
        font-style: normal;
    }
    .q-detail-history-cancel {
        font-size: 10px; font-weight: 700;
        color: var(--q-muted, #5a5650);
        background: none; border: 1px solid rgba(255,255,255,.08);
        border-radius: 6px; padding: 3px 8px;
        cursor: pointer; transition: all .2s;
    }
    .q-detail-history-cancel:hover {
        color: #e87070; border-color: rgba(178,4,17,.3);
    }

    /* ── Ranking ── */
    .q-detail-ranking { margin-top: 24px; }
    .q-detail-ranking-title {
        font-size: 14px; font-weight: 800;
        color: var(--q-text, #e8e4dc);
        margin-bottom: 12px;
    }
    .q-detail-ranking-list {
        list-style: none; padding: 0; margin: 0;
    }
    .q-detail-ranking-item {
        display: flex; justify-content: space-between; align-items: center;
        padding: 10px 12px; margin-bottom: 4px;
        background: var(--q-c1, #13131a);
        border: 1px solid rgba(255,255,255,.04);
        border-radius: 10px;
        text-decoration: none; transition: border-color .2s;
    }
    .q-detail-ranking-item:hover {
        border-color: rgba(201,168,76,.15);
    }
    .q-detail-ranking-left {
        display: flex; align-items: center; gap: 10px;
    }
    .q-detail-ranking-num {
        width: 24px; height: 24px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 11px; font-weight: 900; color: #fff;
        background: var(--q-muted, #5a5650); flex-shrink: 0;
    }
    .q-detail-ranking-num--1 { background: var(--q-gold, #c9a84c); color: #0a0a0f; }
    .q-detail-ranking-num--2 { background: #a8b2c1; color: #1a1a24; }
    .q-detail-ranking-num--3 { background: #cd7f32; }
    .q-detail-ranking-name {
        font-size: 13px; font-weight: 700;
        color: var(--q-text, #e8e4dc);
    }
    .q-detail-ranking-right {
        text-align: right;
    }
    .q-detail-ranking-right em {
        font-style: normal; font-size: 11px;
        color: var(--q-sub, #8a8680); display: block;
    }
    .q-detail-ranking-right b {
        font-size: 12px; font-weight: 800;
        color: var(--q-gold, #c9a84c);
    }
    .q-detail-ranking-more {
        text-align: center; margin-top: 10px;
    }

    /* ── Flash Messages ── */
    .q-flash {
        margin: 8px 16px; padding: 10px 14px;
        border-radius: 10px; font-size: 12px; font-weight: 700;
    }
    .q-flash--ok {
        background: var(--q-green-dim, rgba(74,222,128,.12));
        color: var(--q-green, #4ade80);
        border: 1px solid rgba(74,222,128,.2);
    }
    .q-flash--err {
        background: rgba(178,4,17,.1);
        color: #e87070;
        border: 1px solid rgba(178,4,17,.2);
    }

    /* ── Advanced Card Lock State ── */
    .ag-quest-locked {
        border: 2px dashed rgba(255,255,255,.06) !important;
        opacity: 0.55;
    }

    /* ── v4 Quest Card: Goshuin Hint ── */
    .ag-goshuin-hint {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 4px;
        padding: 3px 8px;
        background: rgba(201,168,76,.08);
        border: 1px solid rgba(201,168,76,.15);
        border-radius: 6px;
        font-size: 10px;
        color: var(--q-gold, #c9a84c);
        line-height: 1.2;
    }
    .ag-goshuin-hint-img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 1px solid rgba(201,168,76,.25);
    }

    /* ── v4 Quest Card: XP Pill ── */
    .ag-quest-xp-pill {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 10px;
        font-weight: 700;
        background: rgba(201,168,76,.12);
        color: var(--q-gold, #c9a84c);
        border: 1px solid rgba(201,168,76,.2);
        white-space: nowrap;
        margin-top: 2px;
    }

    /* ── v4 Quest Card: Progress Pulse ── */
    .q-daily-card.is-progressing {
        box-shadow: 0 0 0 1px rgba(201,168,76,.2);
        animation: ag-pulse-gold 2.5s ease-in-out infinite;
    }
    .q-daily-card.is-progressing .q-daily-icon {
        box-shadow: inset 0 0 0 2px rgba(201,168,76,.3);
    }

    @keyframes ag-pulse-gold {
        0%, 100% { box-shadow: 0 0 0 1px rgba(201,168,76,.15); }
        50%      { box-shadow: 0 0 12px 2px rgba(201,168,76,.25); }
    }

    /* ── v4 Quest Card: DONE Stamp ── */
    .ag-quest-done-stamp {
        position: absolute;
        top: 6px;
        right: 6px;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 1px;
        color: var(--q-gold, #c9a84c);
        background: rgba(201,168,76,.12);
        border: 1px solid rgba(201,168,76,.25);
        z-index: 2;
    }

    /* ── v4 Quest Card: Improved Done State ── */
    .q-daily-card.is-done {
        position: relative;
        opacity: 1 !important;
        border: 1px solid rgba(201,168,76,.2) !important;
        background: rgba(201,168,76,.04) !important;
    }
    .q-daily-card.is-done .q-daily-title {
        text-decoration: none;
        color: var(--q-gold, #c9a84c);
    }
    .q-daily-card.is-done .q-daily-desc {
        opacity: 0.6;
    }
}

/* ═══════════════════════════════════════════════════════════
   Badge Achievement Modal (#1234)
   のみログ投稿後に獲得した御酒印を達成理由付きで表示
   ═══════════════════════════════════════════════════════════ */
@layer components {
    .ag-badge-achieve__overlay {
        position: fixed;
        inset: 0;
        z-index: 9999;
        background: rgba(0,0,0,.75);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .ag-badge-achieve__overlay.is-open {
        opacity: 1;
        visibility: visible;
    }
    .ag-badge-achieve__card {
        background: var(--sq-bg-card, #1a1a2e);
        border: 1px solid rgba(201,168,76,.25);
        border-radius: 16px;
        width: min(90vw, 340px);
        padding: 28px 20px 20px;
        text-align: center;
        position: relative;
        animation: ag-badge-pop .4s ease;
    }
    @keyframes ag-badge-pop {
        0% { transform: scale(.8); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    .ag-badge-achieve__slide {
        display: none;
    }
    .ag-badge-achieve__slide.is-active {
        display: block;
    }
    .ag-badge-achieve__stamp {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin: 0 auto 12px;
        object-fit: cover;
        border: 2px solid var(--sq-gold, #c9a84c);
        box-shadow: 0 0 16px rgba(201,168,76,.3);
    }
    .ag-badge-achieve__name {
        font-size: 17px;
        font-weight: 800;
        color: var(--sq-gold, #c9a84c);
        margin-bottom: 4px;
    }
    .ag-badge-achieve__level {
        font-size: 13px;
        color: var(--sq-text-mute, #999);
        margin-bottom: 8px;
    }
    .ag-badge-achieve__reason {
        font-size: 14px;
        color: var(--sq-text-sub, #ccc);
        line-height: 1.6;
        padding: 10px 12px;
        background: rgba(201,168,76,.06);
        border-radius: 8px;
        border: 1px solid rgba(201,168,76,.12);
        margin-bottom: 12px;
    }
    .ag-badge-achieve__reason::before {
        content: '📝 ';
    }
    .ag-badge-achieve__xp {
        font-size: 13px;
        color: var(--sq-gold, #c9a84c);
        font-weight: 700;
    }
    /* Carousel navigation */
    .ag-badge-achieve__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 16px;
    }
    .ag-badge-achieve__nav-btn {
        background: none;
        border: 1px solid rgba(201,168,76,.3);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        color: var(--sq-gold, #c9a84c);
        font-size: 16px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background .2s;
    }
    .ag-badge-achieve__nav-btn:hover {
        background: rgba(201,168,76,.12);
    }
    .ag-badge-achieve__dots {
        display: flex;
        gap: 6px;
    }
    .ag-badge-achieve__dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(201,168,76,.2);
        transition: background .2s;
    }
    .ag-badge-achieve__dot.is-active {
        background: var(--sq-gold, #c9a84c);
    }
    .ag-badge-achieve__close {
        display: block;
        width: 100%;
        margin-top: 16px;
        padding: 10px;
        background: rgba(201,168,76,.1);
        border: 1px solid rgba(201,168,76,.2);
        border-radius: 8px;
        color: var(--sq-gold, #c9a84c);
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: background .2s;
    }
    .ag-badge-achieve__close:hover {
        background: rgba(201,168,76,.2);
    }
    .ag-badge-achieve__counter {
        font-size: 12px;
        color: var(--sq-text-mute, #999);
        margin-top: 8px;
    }
}

/* ─── #1246 Email OTP Authentication ─────────────────────── */
@layer components {

    /* Auth separator: "または" divider between SSO and OTP buttons */
    .ag-auth-separator {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0.25rem 0;
    }
    .ag-auth-separator::before,
    .ag-auth-separator::after {
        content: '';
        flex: 1;
        height: 1px;
        background-color: #e2e8f0; /* slate-200 */
    }
    .ag-auth-separator span {
        font-size: 0.75rem;
        color: #94a3b8; /* slate-400 */
        white-space: nowrap;
    }

    /* OTP 6-digit input field */
    .ag-otp-input {
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.5em;
        text-indent: 0.25em;
    }
    .ag-otp-input::placeholder {
        letter-spacing: 0.5em;
        text-indent: 0.25em;
        color: #cbd5e1; /* slate-300 */
    }

    /* Countdown timer */
    .ag-countdown {
        padding: 0.5rem;
        border-radius: 0.5rem;
        background-color: #f8fafc; /* slate-50 */
    }

    /* ----- Admin: Multi-Image Photo Slots (#1282) ----- */
    .ag-photo-slots {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    .ag-photo-slot {
        position: relative;
        border: 2px dashed #cbd5e1; /* slate-300 */
        border-radius: 0.5rem;
        background-color: #f8fafc; /* slate-50 */
        padding: 0.75rem;
        text-align: center;
        transition: border-color 0.2s, background-color 0.2s;
        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .ag-photo-slot:hover {
        border-color: #818cf8; /* indigo-400 */
        background-color: #eef2ff; /* indigo-50 */
    }
    .ag-photo-slot--has-image {
        border-style: solid;
        border-color: #a5b4fc; /* indigo-300 */
        background-color: #fff;
        padding: 0.5rem;
    }
    .ag-photo-slot__label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: #475569; /* slate-600 */
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .ag-photo-slot__badge {
        display: inline-block;
        font-size: 0.625rem;
        font-weight: 500;
        padding: 0.125rem 0.375rem;
        border-radius: 9999px;
        margin-bottom: 0.5rem;
    }
    .ag-photo-slot__badge--required {
        background-color: #fef2f2; /* red-50 */
        color: #dc2626; /* red-600 */
    }
    .ag-photo-slot__badge--optional {
        background-color: #f0fdf4; /* green-50 */
        color: #16a34a; /* green-600 */
    }
    .ag-photo-slot__preview {
        width: 100%;
        max-height: 160px;
        object-fit: contain;
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
    }
    .ag-photo-slot__placeholder {
        color: #94a3b8; /* slate-400 */
        font-size: 0.875rem;
    }
    .ag-photo-slot__placeholder-icon {
        font-size: 2rem;
        margin-bottom: 0.25rem;
        display: block;
    }
    .ag-photo-slot__input {
        margin-top: 0.5rem;
    }
    .ag-photo-slot__remove {
        position: absolute;
        top: 0.25rem;
        right: 0.25rem;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 9999px;
        background-color: #ef4444; /* red-500 */
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        line-height: 1;
        transition: background-color 0.2s;
    }
    .ag-photo-slot__remove:hover {
        background-color: #dc2626; /* red-600 */
    }
}

/* ═══════════════════════════════════════════════════════════════════
   #1283 Phase 3: Hero Carousel + User Multi-Photo Upload
   ═══════════════════════════════════════════════════════════════════ */
@layer components {

    /* ─── Hero Carousel (Sake Detail) ─── */
    .ag-hero-carousel {
        position: relative;
        width: 100%;
        height: 18rem;
        overflow: hidden;
        touch-action: pan-y;
    }
    .ag-hero-carousel__track {
        display: flex;
        height: 100%;
        transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        will-change: transform;
    }
    .ag-hero-carousel__slide {
        flex: 0 0 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ag-hero-carousel__blur {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(20px) brightness(0.7);
        transform: scale(1.2);
    }
    .ag-hero-carousel__img {
        position: relative;
        z-index: 1;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        cursor: zoom-in;
    }
    .ag-hero-carousel__category {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        z-index: 2;
        padding: 0.125rem 0.5rem;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        backdrop-filter: blur(4px);
    }
    .ag-hero-carousel__dots {
        position: absolute;
        bottom: 5.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        gap: 6px;
        padding: 4px 8px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(4px);
    }
    .ag-hero-carousel__dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: none;
        padding: 0;
        cursor: pointer;
        transition: all 0.25s ease;
    }
    .ag-hero-carousel__dot--active {
        width: 18px;
        border-radius: 3px;
        background: #fff;
    }
    .ag-hero-carousel__thumbs {
        position: absolute;
        bottom: 6.5rem;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        gap: 6px;
    }
    .ag-hero-carousel__thumb {
        width: 40px;
        height: 40px;
        border-radius: 6px;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.4);
        cursor: pointer;
        opacity: 0.7;
        transition: all 0.2s ease;
    }
    .ag-hero-carousel__thumb--active {
        border-color: #fff;
        opacity: 1;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
    }
    .ag-hero-carousel__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ─── Hero overlay pointer-events fix ─── */
    /* hero-gradient (z:2) and hero-content (z:3) cover the carousel,
       blocking click/touch events from reaching the images.
       Make overlays transparent to pointer events, then re-enable
       only on interactive children (buttons, links, heart). */
    .hero .hero-gradient {
        pointer-events: none;
    }
    .hero .hero-content {
        pointer-events: none;
    }
    .hero .hero-content a,
    .hero .hero-content button,
    .hero .hero-content .hero-heart,
    .hero .hero-content .hero-badge {
        pointer-events: auto;
    }
    .hero .page-header {
        pointer-events: none;
    }
    .hero .page-header .hdr-btn,
    .hero .page-header a,
    .hero .page-header button,
    .hero .hero-edit {
        pointer-events: auto;
    }

    /* ─── User Multi-Photo Upload Slots ─── */
    .ag-user-photo-slots {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1rem;
    }
    .ag-user-photo-slot {
        position: relative;
        aspect-ratio: 3 / 4;
        border: 2px dashed rgba(139, 90, 43, 0.25);
        border-radius: 12px;
        background: linear-gradient(135deg, #faf7f0 0%, #f5f0e6 100%);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        cursor: pointer;
        transition: all 0.25s ease;
        overflow: hidden;
    }
    .ag-user-photo-slot:hover {
        border-color: var(--sq-brand, #8b5a2b);
        background: linear-gradient(135deg, #f5efe3 0%, #ece4d4 100%);
    }
    .ag-user-photo-slot__input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }
    .ag-user-photo-slot__icon {
        font-size: 1.75rem;
        color: var(--sq-brand, #8b5a2b);
        opacity: 0.5;
    }
    .ag-user-photo-slot__label {
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--sq-brand, #8b5a2b);
        opacity: 0.7;
        text-align: center;
        line-height: 1.3;
    }
    .ag-user-photo-slot__badge {
        font-size: 0.5625rem;
        padding: 0.125rem 0.375rem;
        border-radius: 4px;
        background: rgba(139, 90, 43, 0.1);
        color: var(--sq-brand, #8b5a2b);
        font-weight: 600;
    }
    .ag-user-photo-slot__preview {
        position: absolute;
        inset: 0;
        z-index: 1;
    }
    .ag-user-photo-slot__preview img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }
    .ag-user-photo-slot__remove {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        z-index: 3;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: rgba(239, 68, 68, 0.9);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        line-height: 1;
        backdrop-filter: blur(4px);
        transition: background-color 0.2s;
    }
    .ag-user-photo-slot__remove:hover {
        background-color: #dc2626;
    }
    .ag-user-photo-slot--has-photo {
        border-style: solid;
        border-color: var(--sq-brand, #8b5a2b);
    }
    .ag-user-photo-slot--primary {
        grid-column: 1 / -1;
        aspect-ratio: 16 / 9;
    }
    .ag-user-photo-slots__hint {
        grid-column: 1 / -1;
        font-size: 0.75rem;
        color: #888;
        text-align: center;
        padding: 0.25rem 0;
    }
}

/* ─── #1279 PhotoSwipe Lightbox ──────────────────────────── */
@layer components {

    /* ヒーロー画像 PhotoSwipe ラッパー */
    .ag-pswp-hero {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ag-pswp-hero a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: zoom-in;
    }
    .ag-pswp-hero a img.hero-img {
        /* hero-img の既存スタイルを維持 — position/size は style.css 側 */
    }

    /* ギャラリー写真のズームトリガー */
    .ag-pswp-zoom-trigger {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        cursor: zoom-in;
        text-decoration: none;
    }
    .ag-pswp-zoom-trigger img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* ズームアイコン（右上に表示） */
    .ag-pswp-zoom-icon {
        position: absolute;
        top: 0.375rem;
        right: 0.375rem;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 0.875rem;
        opacity: 0;
        transition: opacity 0.2s ease;
        pointer-events: none;
    }
    .photo-cell:hover .ag-pswp-zoom-icon,
    .ge-cell:hover .ag-pswp-zoom-icon {
        opacity: 1;
    }
    /* モバイルではズームアイコンを常時薄く表示 */
    @media (max-width: 768px) {
        .ag-pswp-zoom-icon {
            opacity: 0.7;
        }
    }

    /* PhotoSwipe カスタマイズ: 背景色 */
    .pswp {
        --pswp-bg: rgba(0, 0, 0, 0.92);
    }

    /* prefers-reduced-motion 対応 */
    @media (prefers-reduced-motion: reduce) {
        .pswp__transition {
            transition: none !important;
        }
        .ag-pswp-zoom-icon {
            transition: none;
        }
    }
}

/* ============================================================
   #1280: 銘柄情報セクション内 編集ボタン
   ============================================================ */
@layer components {
    .ag-edit-btn-info {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        min-height: 2.75rem;         /* 44px — WCAG 2.5.5 */
        padding: 0.5rem 1rem;
        background: var(--sq-brand, #b20411);
        color: #fff !important;
        border: none;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        font-family: inherit;
        text-decoration: none !important;
        cursor: pointer;
        transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
        white-space: nowrap;
    }
    .ag-edit-btn-info:hover {
        background: color-mix(in srgb, var(--sq-brand, #b20411) 85%, #000);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        transform: translateY(-1px);
    }
    .ag-edit-btn-info:active {
        transform: translateY(0);
        box-shadow: none;
    }
}

/* ============================================================
   #1294: フォトコンペ UX 改善 — 解説テキスト + ミニプログレスバー
   ============================================================ */
@layer components {
    /* セクション解説テキスト */
    .ag-photo-comp-desc {
        font-size: 0.625rem;
        font-weight: 500;
        color: var(--sq-text-secondary, rgba(91, 64, 61, 0.6));
        margin: 0.125rem 0 0;
        line-height: 1.3;
    }
    .ag-photo-comp-desc strong {
        color: var(--sq-brand, #b20411);
        font-weight: 700;
    }

    /* 各写真カードのミニプログレスバー */
    .ag-push-bar {
        display: inline-block;
        width: 2rem;
        height: 0.1875rem;
        background: rgba(255, 255, 255, 0.25);
        border-radius: 2px;
        overflow: hidden;
        vertical-align: middle;
        margin-left: 0.125rem;
    }
    .ag-push-bar-fill {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--sq-brand, #b20411), #ff6b35);
        border-radius: 2px;
        transition: width 0.3s ease;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ♥ Grade System (#106)
   Phase C: Grade Picker, Long Press Ring, Grade Chips
   Phase D: Unlock Modal, Sub Toast, Purple Tooltip
   ══════════════════════════════════════════════════════════════════ */
@layer components {

    /* ─── Grade Color Tokens ─── */
    .bl_heartUnit {
        --ag-heart-red:    #e11d48;
        --ag-heart-gold:   #d4a017;
        --ag-heart-purple: #9333ea;
    }

    /* ─── C-1: Grade Picker (長押しポップアップ) ─── */
    .ag-grade-picker {
        position: absolute;
        bottom: calc(100% + 10px);
        left: -4px;
        transform: scale(0.8);
        transform-origin: bottom left;
        background: var(--sq-card, #fff);
        border: 1px solid var(--sq-border, #e8e8e3);
        border-radius: var(--sq-radius, 12px);
        padding: 6px;
        display: none;
        flex-direction: column;
        gap: 2px;
        min-width: 220px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        z-index: 50;
        opacity: 0;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .ag-grade-picker.is-open {
        display: flex;
        opacity: 1;
        transform: scale(1);
    }
    .ag-grade-picker::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 18px;
        transform: rotate(45deg);
        width: 12px;
        height: 12px;
        background: var(--sq-card, #fff);
        border-right: 1px solid var(--sq-border, #e8e8e3);
        border-bottom: 1px solid var(--sq-border, #e8e8e3);
    }

    /* ─── C-1a: Grade Option Row ─── */
    .ag-grade-opt {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 8px;
        border: none;
        background: transparent;
        color: var(--sq-text, #1a1c19);
        font-family: inherit;
        font-size: 13px;
        cursor: pointer;
        transition: background 0.15s;
        text-align: left;
        width: 100%;
    }
    .ag-grade-opt:hover {
        background: var(--sq-info-bg, #f9f7f4);
    }
    .ag-grade-opt__emoji {
        font-size: 22px;
        flex-shrink: 0;
    }
    .ag-grade-opt__info {
        flex: 1;
    }
    .ag-grade-opt__label {
        font-weight: 600;
        display: block;
    }
    .ag-grade-opt__desc {
        font-size: 10px;
        color: var(--sq-text-mute, #999);
        display: block;
        margin-top: 1px;
    }
    .ag-grade-opt__quota {
        font-size: 10px;
        font-weight: 600;
        color: #b8860b;
        background: rgba(212, 160, 23, 0.1);
        padding: 2px 7px;
        border-radius: 4px;
        flex-shrink: 0;
    }
    .ag-grade-opt__lock {
        font-size: 10px;
        color: var(--sq-text-mute, #999);
        flex-shrink: 0;
    }
    .ag-grade-opt.is-locked {
        opacity: 0.35;
        cursor: not-allowed;
    }
    .ag-grade-divider {
        height: 1px;
        background: var(--sq-border, #e8e8e3);
        margin: 2px 6px;
    }

    /* ─── C-1b: Grade Picker — のみログ詳細ページ variant ─── */
    .ag-grade-picker--detail {
        left: 0;
        bottom: calc(100% + 14px);
    }
    .ag-grade-picker--detail::after {
        left: 24px;
    }
    /* スティッキーバーの is-pressing アニメーション */
    .ndv2_sbHeart.is-pressing {
        animation: ag-heart-press-pulse 0.5s ease;
    }
    @keyframes ag-heart-press-pulse {
        0% { transform: scale(1); }
        50% { transform: scale(0.9); }
        100% { transform: scale(1); }
    }

    /* ─── C-2: Long Press Ring ─── */
    .ag-long-press-ring {
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        border: 2.5px solid transparent;
        border-radius: 50%;
        pointer-events: none;
    }
    .el_heartBtn.is-pressing .ag-long-press-ring {
        border-color: var(--ag-heart-gold, #d4a017);
        animation: ag-press-ring 0.5s linear forwards;
    }
    @keyframes ag-press-ring {
        0%   { clip-path: polygon(50% 50%, 50% 0%, 50% 0%); }
        25%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%); }
        50%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 100%); }
        75%  { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); }
        100% { clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%); }
    }

    /* ─── C-3: Grade Count Chips (グレード別カウント表示) ─── */
    .ag-grade-counts {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: 2px;
    }
    .ag-grade-chip {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 2px 7px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
    }
    .ag-grade-chip--purple {
        background: rgba(147, 51, 234, 0.1);
        color: #7c3aed;
    }
    .ag-grade-chip--gold {
        background: rgba(212, 160, 23, 0.1);
        color: #b8860b;
    }
    .ag-grade-chip--red {
        background: rgba(225, 29, 72, 0.08);
        color: #e11d48;
    }

    /* ─── D-1: Lv.10 💛解放モーダル ─── */
    .ag-unlock-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1000;
        display: none;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }
    .ag-unlock-overlay.is-open {
        display: flex;
    }
    .ag-unlock-modal {
        background: var(--sq-card, #fff);
        border-radius: 20px;
        padding: 32px 24px;
        max-width: 340px;
        width: 100%;
        text-align: center;
        position: relative;
        animation: ag-modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    }
    @keyframes ag-modal-in {
        0%   { opacity: 0; transform: scale(0.8) translateY(20px); }
        100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    .ag-unlock-emoji {
        font-size: 56px;
        display: block;
        margin-bottom: 8px;
        animation: ag-unlock-pulse 1.5s ease-in-out infinite;
    }
    @keyframes ag-unlock-pulse {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.15); }
    }
    .ag-unlock-title {
        font-size: 20px;
        font-weight: 700;
        font-family: 'Noto Serif JP', serif;
        color: var(--sq-text, #1a1c19);
        margin-bottom: 6px;
    }
    .ag-unlock-sub {
        font-size: 13px;
        color: var(--sq-text-sub, #5b403d);
        margin-bottom: 16px;
        line-height: 1.6;
    }
    .ag-unlock-feature {
        background: rgba(212, 160, 23, 0.08);
        border: 1px solid rgba(212, 160, 23, 0.2);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 16px;
        text-align: left;
    }
    .ag-unlock-feature__title {
        font-size: 13px;
        font-weight: 700;
        color: #b8860b;
        margin-bottom: 6px;
    }
    .ag-unlock-feature__list {
        font-size: 12px;
        color: var(--sq-text-sub, #5b403d);
        line-height: 1.7;
    }
    .ag-unlock-feature__list li {
        margin-left: 16px;
        margin-bottom: 2px;
    }
    .ag-unlock-cta {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg, #d4a017, #b8860b);
        color: #fff;
        font-family: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3);
    }
    .ag-unlock-cta:active {
        transform: scale(0.97);
    }

    /* ─── D-2: サブスク💜切替トースト ─── */
    .ag-sub-toast {
        position: fixed;
        top: 80px;
        left: 50%;
        transform: translateX(-50%) translateY(-20px);
        background: var(--sq-card, #fff);
        border: 1px solid rgba(147, 51, 234, 0.2);
        border-radius: 14px;
        padding: 14px 20px;
        display: none;
        align-items: center;
        gap: 12px;
        z-index: 900;
        opacity: 0;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        max-width: 340px;
        width: calc(100% - 32px);
    }
    .ag-sub-toast.is-open {
        display: flex;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    .ag-sub-toast__emoji {
        font-size: 32px;
        flex-shrink: 0;
    }
    .ag-sub-toast__text {
        font-size: 13px;
        color: var(--sq-text, #1a1c19);
        line-height: 1.5;
    }
    .ag-sub-toast__text strong {
        color: #7c3aed;
    }
    .ag-sub-toast__close {
        position: absolute;
        top: 8px;
        right: 10px;
        background: none;
        border: none;
        color: var(--sq-text-mute, #999);
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
    }

    /* ─── D-3: 💜受信ツールチップ ─── */
    .ag-purple-tip {
        position: absolute;
        bottom: calc(100% + 8px);
        left: -4px;
        transform: scale(0.9);
        transform-origin: bottom left;
        background: var(--sq-card, #fff);
        border: 1px solid rgba(147, 51, 234, 0.15);
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 11px;
        color: var(--sq-text-sub, #5b403d);
        line-height: 1.5;
        max-width: calc(100vw - 48px);
        width: max-content;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        z-index: 50;
        opacity: 0;
        pointer-events: none;
        transition: all 0.2s ease;
    }
    .ag-purple-tip::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 18px;
        transform: rotate(45deg);
        width: 10px;
        height: 10px;
        background: var(--sq-card, #fff);
        border-right: 1px solid rgba(147, 51, 234, 0.15);
        border-bottom: 1px solid rgba(147, 51, 234, 0.15);
    }
    .ag-purple-tip.is-open {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }
    .ag-purple-tip strong {
        color: #7c3aed;
    }
}

/* =====================================================================
   #1332 推し蔵 v2 Epic — Wave 3 UI Components
   Feature Flag: oshi_ranking_page / oshi_history / oshi_coach_mark
                 / oshi_barometer_v2 / oshi_carousel_v2
   ===================================================================== */

@layer components {

    /* ─── #1337 Ranking Page ─── */

    .ag-oshi-ranking {
        max-width: 430px;
        margin: 0 auto;
        background: var(--t-bg, #FAFAFA);
        min-height: 100dvh;
    }
    .ag-oshi-ranking__header {
        position: sticky; top: 0; z-index: 50;
        display: flex; align-items: center; gap: 12px;
        padding: 14px 16px;
        background: rgba(255,255,255,0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--sq-border, #e8e8e3);
    }
    .ag-oshi-ranking__back {
        background: none; border: none; cursor: pointer;
        display: flex; align-items: center; color: var(--t-text, #1a1a1a);
    }
    .ag-oshi-ranking__title {
        font-family: var(--serif, 'Noto Serif JP', serif);
        font-size: 16px; font-weight: 700;
    }
    .ag-oshi-ranking__hero {
        text-align: center; padding: 24px 16px 16px;
    }
    .ag-oshi-ranking__hero-icon {
        display: inline-flex; color: var(--sq-gold, #d4a017);
    }
    .ag-oshi-ranking__hero-icon svg { width: 36px; height: 36px; }
    .ag-oshi-ranking__hero-title {
        font-family: var(--serif, 'Noto Serif JP', serif);
        font-size: 20px; font-weight: 700; margin-top: 8px;
    }
    .ag-oshi-ranking__hero-sub {
        font-size: 12px; color: var(--t-text2, #555); margin-top: 4px;
    }

    /* Tab */
    .ag-oshi-ranking__tabs {
        display: flex; justify-content: center; gap: 24px;
        padding: 8px 0 12px;
    }
    .ag-oshi-ranking__tab {
        background: none; border: none; cursor: pointer;
        font-family: var(--sans, 'Noto Sans JP', sans-serif);
        font-size: 14px; font-weight: 500; color: var(--t-gray, #777);
        padding: 8px 16px; border-bottom: 2px solid transparent;
        transition: all 0.2s;
    }
    .ag-oshi-ranking__tab.is-active {
        color: var(--t-accent, #C23030);
        border-bottom-color: var(--t-accent, #C23030);
        font-weight: 700;
    }

    /* Region Filter */
    .ag-oshi-ranking__regions {
        display: flex; gap: 8px; padding: 0 16px 16px;
        overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ag-oshi-ranking__regions::-webkit-scrollbar { display: none; }
    .ag-oshi-ranking__region {
        flex-shrink: 0; padding: 6px 14px;
        border-radius: 999px; font-size: 12px; font-weight: 600;
        border: 1px solid var(--sq-border, #e8e8e3);
        background: #fff; color: var(--t-text, #1a1a1a);
        cursor: pointer; transition: all 0.2s;
        white-space: nowrap;
    }
    .ag-oshi-ranking__region.is-active {
        background: var(--t-accent, #C23030);
        color: #fff; border-color: var(--t-accent, #C23030);
    }

    /* Ranking Cards */
    .ag-oshi-ranking__list {
        padding: 0 16px 32px;
    }
    .ag-oshi-ranking__card {
        display: flex; align-items: center; gap: 14px;
        padding: 14px 16px; margin-bottom: 8px;
        background: var(--t-card-bg, #fff);
        border: 1px solid var(--t-card-border, rgba(194,48,48,.06));
        border-radius: var(--t-radius, 16px);
        box-shadow: 0 2px 8px rgba(0,0,0,.04);
        transition: transform 0.15s;
        animation: ag-oshi-fadeInUp 0.4s ease both;
    }
    .ag-oshi-ranking__card:hover { transform: translateY(-1px); }

    /* Medal styles */
    .ag-oshi-ranking__card--gold {
        background: linear-gradient(135deg, #fef9e7 0%, #fcf0c8 100%);
        border-color: rgba(212,160,23,.2);
        box-shadow: 0 4px 16px rgba(212,160,23,.15);
    }
    .ag-oshi-ranking__card--silver {
        background: linear-gradient(135deg, #f8f9fa 0%, #e8eaed 100%);
        border-color: rgba(0,0,0,.06);
    }
    .ag-oshi-ranking__card--bronze {
        background: linear-gradient(135deg, #fef5ee 0%, #fce8d5 100%);
        border-color: rgba(180,100,40,.1);
    }
    .ag-oshi-ranking__card--my-oshi {
        border: 2px solid var(--t-accent, #C23030);
        position: relative;
    }
    .ag-oshi-ranking__my-badge {
        position: absolute; top: -8px; right: 12px;
        background: var(--t-accent, #C23030); color: #fff;
        font-size: 9px; font-weight: 800; padding: 2px 8px;
        border-radius: 4px; letter-spacing: .04em;
    }
    .ag-oshi-ranking__rank {
        width: 36px; height: 36px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 14px; font-weight: 900; flex-shrink: 0;
        background: var(--t-bg3, #EFEBE5); color: var(--t-text, #1a1a1a);
    }
    .ag-oshi-ranking__card--gold .ag-oshi-ranking__rank {
        background: linear-gradient(135deg, #d4a017, #f5d76e);
        color: #fff;
    }
    .ag-oshi-ranking__card--silver .ag-oshi-ranking__rank {
        background: linear-gradient(135deg, #9ca3af, #d1d5db);
        color: #fff;
    }
    .ag-oshi-ranking__card--bronze .ag-oshi-ranking__rank {
        background: linear-gradient(135deg, #b45309, #d97706);
        color: #fff;
    }
    .ag-oshi-ranking__info { flex: 1; min-width: 0; }
    .ag-oshi-ranking__name {
        font-size: 14px; font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .ag-oshi-ranking__pref {
        font-size: 11px; color: var(--t-gray, #777); margin-top: 2px;
        display: flex; align-items: center; gap: 3px;
    }
    .ag-oshi-ranking__pref svg { width: 12px; height: 12px; }
    .ag-oshi-ranking__votes { text-align: right; flex-shrink: 0; }
    .ag-oshi-ranking__vote-count {
        font-size: 16px; font-weight: 900;
        color: var(--t-accent, #C23030);
        display: flex; align-items: center; gap: 4px;
    }
    .ag-oshi-ranking__vote-count svg { width: 16px; height: 16px; }
    .ag-oshi-ranking__voter-count {
        font-size: 10px; color: var(--t-gray, #777); margin-top: 2px;
    }
    .ag-oshi-ranking__crown {
        display: inline-flex; color: var(--sq-gold, #d4a017);
    }
    .ag-oshi-ranking__crown svg { width: 20px; height: 20px; }
    .ag-oshi-ranking__divider {
        text-align: center; padding: 6px 0 10px;
        font-size: 12px; color: var(--t-gray, #777);
    }
    @keyframes ag-oshi-fadeInUp {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ─── #1337 Home CTA — Museum Dark ─── */

    .ag-oshi-home-cta {
        position: relative; overflow: hidden;
        border-radius: 20px; padding: 22px 20px 20px;
        background: linear-gradient(135deg, #1a1c19 0%, #2a2420 50%, #1e2830 100%);
        text-decoration: none; color: #fff;
        display: block; margin: 0;
        box-shadow: 0 6px 24px rgba(0,0,0,0.2);
    }
    .ag-oshi-home-cta::before {
        content: ''; position: absolute; top: -40px; right: -40px;
        width: 160px; height: 160px; border-radius: 50%;
        background: radial-gradient(circle, rgba(178,4,17,0.2), transparent 70%);
    }
    .ag-oshi-home-cta::after {
        content: ''; position: absolute; bottom: -40px; left: -20px;
        width: 140px; height: 140px; border-radius: 50%;
        background: radial-gradient(circle, rgba(13,115,119,0.15), transparent 70%);
    }
    .ag-oshi-home-cta__top {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 10px; position: relative; z-index: 1;
    }
    .ag-oshi-home-cta__label {
        font-size: 10px; font-weight: 700; letter-spacing: 1.5px;
        color: var(--sq-gold, #d4a017); text-transform: uppercase;
    }
    .ag-oshi-home-cta__live {
        display: flex; align-items: center; gap: 5px;
        font-size: 10px; font-weight: 700; color: #ef4444;
    }
    .ag-oshi-home-cta__live-dot {
        width: 7px; height: 7px; border-radius: 50%;
        background: #ef4444;
        box-shadow: 0 0 6px rgba(239,68,68,0.6);
        animation: ag-oshi-livePulse 1.5s ease-in-out infinite;
    }
    @keyframes ag-oshi-livePulse {
        0%, 100% { opacity: 1; transform: scale(1); }
        50% { opacity: 0.4; transform: scale(0.7); }
    }
    .ag-oshi-home-cta__title {
        font-size: 17px; font-weight: 900; line-height: 1.45;
        position: relative; z-index: 1;
    }
    .ag-oshi-home-cta__title em {
        font-style: normal;
        background: linear-gradient(90deg, var(--sq-gold, #d4a017), #f5d76e);
        -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        background-clip: text;
    }
    .ag-oshi-home-cta__desc {
        font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 6px;
        line-height: 1.5; position: relative; z-index: 1;
    }
    .ag-oshi-home-cta__hotspots {
        display: flex; gap: 6px; margin-top: 16px;
        position: relative; z-index: 1;
    }
    .ag-oshi-home-cta__hotspot {
        flex: 1; text-align: center; padding: 10px 4px 8px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px; backdrop-filter: blur(4px);
    }
    .ag-oshi-home-cta__hotspot:first-child {
        background: rgba(255,255,255,0.12);
        border-color: rgba(201,163,56,0.3);
    }
    .ag-oshi-home-cta__hotspot-area { font-size: 11px; font-weight: 800; line-height: 1; }
    .ag-oshi-home-cta__hotspot-count { font-size: 15px; font-weight: 900; margin-top: 4px; }
    .ag-oshi-home-cta__hotspot:first-child .ag-oshi-home-cta__hotspot-count {
        color: var(--sq-gold, #d4a017);
    }
    .ag-oshi-home-cta__hotspot-unit { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 2px; }
    .ag-oshi-home-cta__divider {
        height: 1px; background: rgba(255,255,255,0.08);
        margin: 16px 0; position: relative; z-index: 1;
    }
    .ag-oshi-home-cta__btn {
        display: flex; align-items: center; justify-content: center;
        gap: 8px; width: 100%;
        background: linear-gradient(135deg, var(--sq-brand, #b20411), #d4182a);
        color: #fff; border: none; border-radius: 14px;
        padding: 14px; font-size: 14px; font-weight: 800;
        font-family: inherit; cursor: pointer;
        position: relative; z-index: 1;
        box-shadow: 0 4px 16px rgba(178,4,17,0.3);
        transition: transform 0.12s;
    }
    .ag-oshi-home-cta__btn:active { transform: scale(0.97); }
    .ag-oshi-home-cta__btn svg { width: 20px; height: 20px; }

    /* ─── #1338 Oshi History (My Page) ─── */

    .ag-oshi-history { padding: 0 16px 24px; }
    .ag-oshi-history__level-card {
        background: var(--t-card-bg, #fff);
        border-radius: var(--t-radius, 16px);
        padding: 20px; margin-bottom: 16px;
        box-shadow: 0 2px 12px rgba(0,0,0,.05);
        border-top: 3px solid;
        border-image: linear-gradient(90deg, var(--t-accent, #C23030), var(--sq-gold, #d4a017), var(--t-accent, #C23030)) 1;
    }
    .ag-oshi-history__level-header {
        display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
    }
    .ag-oshi-history__level-badge {
        width: 48px; height: 48px; border-radius: 50%;
        background: var(--t-accent-lt, rgba(194,48,48,.1));
        display: flex; align-items: center; justify-content: center;
        color: var(--t-accent, #C23030); position: relative;
    }
    .ag-oshi-history__level-badge svg { width: 24px; height: 24px; }
    .ag-oshi-history__level-num {
        position: absolute; bottom: -4px; right: -4px;
        background: var(--t-accent, #C23030); color: #fff;
        font-size: 9px; font-weight: 800; padding: 1px 5px;
        border-radius: 4px;
    }
    .ag-oshi-history__level-title { font-size: 16px; font-weight: 800; }
    .ag-oshi-history__level-sub { font-size: 12px; color: var(--t-gray, #777); }
    .ag-oshi-history__progress {
        margin: 12px 0 8px;
    }
    .ag-oshi-history__progress-header {
        display: flex; justify-content: space-between; align-items: baseline;
        margin-bottom: 6px;
    }
    .ag-oshi-history__progress-count {
        font-size: 22px; font-weight: 900;
    }
    .ag-oshi-history__progress-count span { font-size: 13px; font-weight: 500; color: var(--t-gray, #777); }
    .ag-oshi-history__progress-next { font-size: 11px; color: var(--t-gray, #777); }
    .ag-oshi-history__progress-bar {
        height: 8px; background: var(--sq-border, #e8e8e3);
        border-radius: 4px; overflow: hidden;
    }
    .ag-oshi-history__progress-fill {
        height: 100%; border-radius: 4px;
        background: linear-gradient(90deg, var(--t-accent, #C23030), var(--sq-brand-lt, #d62927));
        transition: width 0.6s ease;
    }
    .ag-oshi-history__progress-hint {
        text-align: right; margin-top: 4px;
        font-size: 12px; font-weight: 700; color: var(--t-accent, #C23030);
    }

    /* Level Map */
    .ag-oshi-history__level-map {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 0 0; position: relative;
    }
    .ag-oshi-history__level-dot {
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--sq-border, #e8e8e3); position: relative; z-index: 1;
    }
    .ag-oshi-history__level-dot--done { background: var(--t-accent, #C23030); }
    .ag-oshi-history__level-dot--current {
        background: #fff; border: 3px solid var(--t-accent, #C23030);
        width: 16px; height: 16px;
    }
    .ag-oshi-history__level-line {
        flex: 1; height: 2px; background: var(--sq-border, #e8e8e3);
    }
    .ag-oshi-history__level-line--done { background: var(--t-accent, #C23030); }
    .ag-oshi-history__level-labels {
        display: flex; justify-content: space-between; padding: 4px 0 0;
        font-size: 10px; color: var(--t-gray, #777);
    }

    /* Stats Grid */
    .ag-oshi-history__stats {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
        margin-bottom: 20px;
    }
    .ag-oshi-history__stat {
        text-align: center; padding: 16px 8px;
        background: var(--t-card-bg, #fff);
        border-radius: var(--t-radius-sm, 10px);
        border: 1px solid var(--t-card-border, rgba(194,48,48,.06));
    }
    .ag-oshi-history__stat-icon {
        display: inline-flex; color: var(--t-accent, #C23030);
        margin-bottom: 6px;
    }
    .ag-oshi-history__stat-icon svg { width: 22px; height: 22px; }
    .ag-oshi-history__stat-value { font-size: 22px; font-weight: 900; }
    .ag-oshi-history__stat-value span { font-size: 12px; font-weight: 500; }
    .ag-oshi-history__stat-label { font-size: 10px; color: var(--t-gray, #777); margin-top: 2px; }

    /* Timeline */
    .ag-oshi-history__timeline { position: relative; padding-left: 20px; }
    .ag-oshi-history__timeline::before {
        content: ''; position: absolute; left: 5px; top: 8px; bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, var(--t-accent, #C23030), var(--sq-border, #e8e8e3));
    }
    .ag-oshi-history__month { margin-bottom: 20px; position: relative; }
    .ag-oshi-history__month-dot {
        position: absolute; left: -20px; top: 4px;
        width: 12px; height: 12px; border-radius: 50%;
        background: var(--t-accent, #C23030); z-index: 1;
    }
    .ag-oshi-history__month-dot--pulse {
        animation: ag-oshi-pulse 2s ease-in-out infinite;
    }
    @keyframes ag-oshi-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(194,48,48,0.4); }
        50% { box-shadow: 0 0 0 6px rgba(194,48,48,0); }
    }
    .ag-oshi-history__month-label {
        font-size: 13px; font-weight: 700; margin-bottom: 8px;
    }
    .ag-oshi-history__month-card {
        background: var(--t-card-bg, #fff);
        border-radius: var(--t-radius-sm, 10px);
        padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .ag-oshi-history__brewery-row {
        display: flex; align-items: center; justify-content: space-between;
        padding: 6px 0;
    }
    .ag-oshi-history__brewery-row + .ag-oshi-history__brewery-row {
        border-top: 1px solid var(--sq-border, #e8e8e3);
    }
    .ag-oshi-history__brewery-name {
        display: flex; align-items: center; gap: 6px;
        font-size: 13px; font-weight: 500;
    }
    .ag-oshi-history__brewery-name svg { width: 16px; height: 16px; color: var(--t-accent, #C23030); }
    .ag-oshi-history__brewery-count {
        font-size: 13px; font-weight: 800; color: var(--t-accent, #C23030);
    }

    /* ─── #1334 Coach Mark ─── */

    .ag-oshi-coach {
        position: fixed; inset: 0; z-index: 9999;
        background: rgba(0,0,0,0.5);
        display: flex; align-items: center; justify-content: center;
        animation: ag-oshi-coachIn 0.3s ease;
    }
    @keyframes ag-oshi-coachIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    .ag-oshi-coach__card {
        background: var(--sq-washi, #faf6f0);
        border-radius: var(--t-radius, 16px);
        padding: 24px; max-width: 320px; width: 90%;
        box-shadow: 0 8px 32px rgba(0,0,0,0.2);
        position: relative;
        animation: ag-oshi-coachSlide 0.3s ease 0.1s both;
    }
    @keyframes ag-oshi-coachSlide {
        from { opacity: 0; transform: translateY(16px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .ag-oshi-coach__header {
        display: flex; align-items: center; gap: 8px;
        font-size: 16px; font-weight: 700; margin-bottom: 12px;
    }
    .ag-oshi-coach__header svg { width: 22px; height: 22px; color: var(--t-accent, #C23030); }
    .ag-oshi-coach__body {
        font-size: 13px; line-height: 1.7; color: var(--t-text2, #555);
    }
    .ag-oshi-coach__close {
        display: block; width: 100%; margin-top: 16px;
        padding: 10px; text-align: center;
        background: transparent; border: 1px solid var(--sq-border, #e8e8e3);
        border-radius: 10px; font-family: inherit;
        font-size: 13px; font-weight: 600; color: var(--t-accent, #C23030);
        cursor: pointer; transition: background 0.2s;
    }
    .ag-oshi-coach__close:active { background: var(--t-accent-lt, rgba(194,48,48,.1)); }

    /* ─── #1336 Barometer v2 ─── */

    .ag-oshi-baro-hint {
        display: flex; align-items: center; gap: 6px;
        font-size: 11px; color: rgba(255,255,255,0.6);
        margin-top: 8px;
    }
    .ag-oshi-baro-hint svg { width: 14px; height: 14px; flex-shrink: 0; }
    .ag-oshi-baro-hint strong { color: #ef4444; font-weight: 700; }

    .ag-oshi-confirm-v2 {
        text-align: center; padding: 32px 20px;
    }
    .ag-oshi-confirm-v2__icon {
        display: inline-flex; color: #22c55e; margin-bottom: 12px;
    }
    .ag-oshi-confirm-v2__icon svg { width: 48px; height: 48px; }
    .ag-oshi-confirm-v2__title {
        font-size: 20px; font-weight: 900; margin-bottom: 6px;
    }
    .ag-oshi-confirm-v2__sub {
        font-size: 13px; color: rgba(255,255,255,0.6);
    }
    .ag-oshi-confirm-v2__share {
        display: inline-flex; align-items: center; gap: 8px;
        margin-top: 20px; padding: 12px 28px;
        background: linear-gradient(135deg, var(--sq-brand, #b20411), #d4182a);
        color: #fff; border: none; border-radius: 14px;
        font-size: 14px; font-weight: 800; font-family: inherit;
        cursor: pointer; box-shadow: 0 4px 16px rgba(178,4,17,0.3);
    }
    .ag-oshi-confirm-v2__share svg { width: 18px; height: 18px; }
    .ag-oshi-confirm-v2__dismiss {
        display: block; margin: 12px auto 0;
        background: none; border: none; color: rgba(255,255,255,0.5);
        font-size: 12px; cursor: pointer; text-decoration: underline;
    }

    /* Push button with remaining count */
    .ag-oshi-push-remaining {
        font-size: 11px; color: rgba(255,255,255,0.5);
        margin-top: 6px; text-align: center;
    }

    /* ─── #1340 Carousel v2 cards ─── */

    .ag-oshi-map-card {
        min-width: 280px; padding: 16px;
        background: var(--t-card-bg, #fff);
        border-radius: var(--t-radius, 16px);
        box-shadow: 0 4px 16px rgba(0,0,0,.08);
        scroll-snap-align: center;
    }
    .ag-oshi-map-card__badge {
        display: inline-block; font-size: 10px; font-weight: 700;
        padding: 3px 8px; border-radius: 6px; margin-bottom: 8px;
    }
    .ag-oshi-map-card__badge--pending {
        background: var(--sq-border, #e8e8e3); color: var(--t-text, #1a1a1a);
    }
    .ag-oshi-map-card__badge--voted {
        background: rgba(34,197,94,0.1); color: #16a34a;
    }
    .ag-oshi-map-card__badge--done {
        background: var(--t-accent-lt, rgba(194,48,48,.1));
        color: var(--t-accent, #C23030);
    }
    .ag-oshi-map-card__title {
        font-size: 14px; font-weight: 700; margin-bottom: 4px;
    }
    .ag-oshi-map-card__sub {
        font-size: 11px; color: var(--t-gray, #777);
        display: flex; align-items: center; gap: 4px;
    }
    .ag-oshi-map-card__sub svg { width: 14px; height: 14px; }
    .ag-oshi-map-card__icons {
        display: flex; gap: 6px; margin-top: 8px;
    }
    .ag-oshi-map-card__icons svg { width: 18px; height: 18px; }

    /* ================================================================ */
    /* HOME V7 REDESIGN                                               */
    /* ================================================================ */

:root {
  --fs-xs:10px;--fs-sm:11px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;
  --md-bg:#111110;--md-card:#1c1a17;--md-card-2:#252320;--md-text:#e8e4dd;
  --md-text-sub:#a09080;--md-text-mute:#6b6055;--md-border:#2e2a25;
  --md-gold:#d4a017;--md-gold-glow:rgba(212,160,23,0.15);
  --md-brand:#b20411;--md-brand-lt:#d62927;--md-brand-glow:rgba(178,4,17,0.12);
  --md-green:#4caf50;--md-green-glow:rgba(76,175,80,0.12);
  --md-accent:var(--md-gold);--md-accent-lt:#d4b85a;--md-accent-glow:var(--md-gold-glow);
  --sq-radius:12px;--sq-radius-pill:999px;
  --sq-transition:all 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* #1383 Theme: Classic Red — --md-* トークンを Classic Red 値で上書き */
html[data-theme="classic-red"]{
  --md-bg:#f4f4ef;--md-card:#fff;--md-card-2:#faf6f0;--md-text:#1a1c19;
  --md-text-sub:#5b403d;--md-text-mute:#999;--md-border:#e8e8e3;
  --md-gold:#b08830;--md-gold-glow:rgba(176,136,48,0.10);
  --md-brand:#b20411;--md-brand-lt:#d62927;--md-brand-glow:rgba(178,4,17,0.06);
  --md-green:#16a34a;--md-green-glow:rgba(22,163,74,0.08);
  --md-accent:var(--md-brand);--md-accent-lt:var(--md-brand-lt);--md-accent-glow:var(--md-brand-glow);
}
/* #1406 Theme: Museum Dark — ラグジュアリーダーク */
html[data-theme="museum-dark"]{
  --md-bg:#111110;--md-card:#1a1a18;--md-card-2:#222220;--md-text:#e8e4dc;
  --md-text-sub:#a09888;--md-text-mute:#706858;--md-border:rgba(255,255,255,0.08);
  --md-gold:#d4a017;--md-gold-glow:rgba(212,160,23,0.12);
  --md-brand:#d4a017;--md-brand-lt:#e8b84a;--md-brand-glow:rgba(212,160,23,0.08);
  --md-green:#22c55e;--md-green-glow:rgba(34,197,94,0.10);
  --md-accent:var(--md-gold);--md-accent-lt:var(--md-gold);--md-accent-glow:var(--md-gold-glow);
  --sq-text:#e8e4dc;--sq-text-sub:#a09888;--sq-brand:#d4a017;
}
/* ━━━ Museum Dark: 投稿・登録画面は Classic Red 固定（#1449） ━━━ */
html[data-theme="museum-dark"] .nomilog-page,
html[data-theme="museum-dark"] #form_addSake {
  --sq-bg:        #f4f4ef;
  --sq-text:      #1a1c19;
  --sq-text-sub:  #5b403d;
  --sq-brand:     #b20411;
  --sq-brand-lt:  #d62927;
  --sq-card:      #fff;
  --sq-border:    #e8e8e3;
  color: var(--sq-text);
  background: var(--sq-bg);
}
/* ━━━ Museum Dark: 旧レイアウト共通コンポーネント ━━━ */
html[data-theme="museum-dark"] .ly_header{background-color:rgba(17,17,16,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--md-border);}
html[data-theme="museum-dark"] .ly_header .bl_headerNav_ttl{color:var(--md-text);}
html[data-theme="museum-dark"] .ly_header .bl_headerNav_ttl img{filter:brightness(0) invert(1);}
html[data-theme="museum-dark"] .ly_header .bl_headerNavL a,
html[data-theme="museum-dark"] .ly_header .bl_headerNavR a{color:var(--md-text-sub);}
html[data-theme="museum-dark"] .ly_header .bl_headerNavR .ag-notification-bell{color:var(--md-text-sub);}
html[data-theme="museum-dark"] .ly_footer{background-color:rgba(17,17,16,0.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 -1px 0 var(--md-border);}
html[data-theme="museum-dark"] .ly_footer .bl_mainMenu_cell{color:var(--md-text-mute);}
html[data-theme="museum-dark"] .ly_footer .bl_mainMenu_cell a{color:var(--md-text-mute);}
html[data-theme="museum-dark"] .ly_footer .bl_mainMenu_cell.is_active a,
html[data-theme="museum-dark"] .ly_footer .bl_mainMenu_cell a.is_active{color:var(--md-gold);}
html[data-theme="museum-dark"] .ly_main{background-color:var(--md-bg);color:var(--md-text);}
/* ━━━ Museum Dark: 銘柄詳細ページ固有 ━━━ */
html[data-theme="museum-dark"] .stats-bar{border-color:var(--md-border);box-shadow:none;}
html[data-theme="museum-dark"] .stat-item{border-right-color:var(--md-border);}
html[data-theme="museum-dark"] .stat-label{color:var(--md-text-sub);}
html[data-theme="museum-dark"] .stat-num.you{color:var(--md-gold);}
html[data-theme="museum-dark"] .sec{border-color:var(--md-border);box-shadow:none;}
html[data-theme="museum-dark"] .sec-head h3{color:var(--md-text);}
html[data-theme="museum-dark"] .bottom-spacer{background:transparent;}
/* ━━━ Museum Dark: マイページ固有 (#1438 Wave 2) ━━━ */
html[data-theme="museum-dark"] .un_profile{background-color:var(--md-card) !important;border-color:var(--md-border) !important;box-shadow:0 4px 6px -1px rgba(0,0,0,0.3) !important;}
html[data-theme="museum-dark"] .un_coverArea_btn{background:rgba(17,17,16,0.7);color:var(--md-text);}
html[data-theme="museum-dark"] .un_nameEdit_btn{color:var(--md-text-sub);}
html[data-theme="museum-dark"] .grade-pill{background:var(--md-card-2);color:var(--md-text);border-color:var(--md-border);}
html[data-theme="museum-dark"] .normal-ring{border-color:var(--md-card);box-shadow:0 2px 12px rgba(0,0,0,0.3);}
/* ━━━ Museum Dark: --t-* トークンブリッジ (#1438 Wave 2) ━━━ */
html[data-theme="museum-dark"] .ag-quest-homescreen,
html[data-theme="museum-dark"] .ag-oshi-history{
  --t-bg:var(--md-bg);--t-bg2:var(--md-card-2);--t-bg3:var(--md-card);--t-bg4:var(--md-border);
  --t-accent:var(--md-brand);--t-accent-lt:var(--md-brand-glow);--t-accent-shadow:rgba(212,160,23,0.3);--t-accent-deep:var(--md-gold);
  --t-text:var(--md-text);--t-text2:var(--md-text-sub);--t-gray:var(--md-text-mute);
  --t-card-bg:var(--md-card);--t-card-border:var(--md-border);
  --t-hero-from:var(--md-bg);--t-hero-to:var(--md-card-2);
}
html[data-theme="museum-dark"] .ag-oshi-history__level-dot--current{background:var(--md-card) !important;border-color:var(--md-gold) !important;}
html[data-theme="museum-dark"] .ag-oshi-history__month-card{box-shadow:none;border:1px solid var(--md-border);}
/* ━━━ Museum Dark: 冒険成果バナー ━━━ */
html[data-theme="museum-dark"] .result-banner{background:var(--md-card);box-shadow:none;border:1px solid var(--md-border);}
html[data-theme="museum-dark"] .result-close{color:var(--md-text-mute);}
html[data-theme="museum-dark"] .result-banner__sub{color:var(--md-text-mute);}
html[data-theme="museum-dark"] .result-btn--ghost{background:var(--md-card-2);color:var(--md-text);border-color:var(--md-border);}
/* ━━━ Museum Dark: シェアボタン ━━━ */
html[data-theme="museum-dark"] .ag-share-btn--pill{background:var(--md-gold);color:var(--md-bg);}
html[data-theme="museum-dark"] .ag-share-btn--pill:hover{background:var(--md-gold);opacity:0.85;}
html[data-theme="museum-dark"] .ag-share-btn--full{background:var(--md-gold);color:var(--md-bg);}
html[data-fontsize="small"]{--fs-xxs:8px;--fs-xs:9px;--fs-sm:10px;--fs-base:12px;--fs-md:13px;--fs-lg:14px;--fs-xl:16px;--fs-2xl:20px;}
html[data-fontsize="normal"]{--fs-xxs:9px;--fs-xs:10px;--fs-sm:11px;--fs-base:13px;--fs-md:14px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:22px;}
html[data-fontsize="large"]{--fs-xxs:11px;--fs-xs:12px;--fs-sm:13px;--fs-base:15px;--fs-md:16px;--fs-lg:18px;--fs-xl:20px;--fs-2xl:24px;}
html[data-fontsize="xlarge"]{--fs-xxs:13px;--fs-xs:14px;--fs-sm:15px;--fs-base:17px;--fs-md:18px;--fs-lg:20px;--fs-xl:24px;--fs-2xl:28px;}

/* v7 scoped styles — body_class=page_home_v7 で適用 */
.page_home_v7{max-width:430px;margin:0 auto;min-height:100vh;position:relative;background:var(--md-bg);color:var(--md-text);font-family:'Noto Sans JP',sans-serif;}
.page_home_v7 .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;vertical-align:middle;}
.page_home_v7 .mi-fill{font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}

/* ================================================================
   PAGE SYSTEM
   ================================================================ */
.page{display:none;padding-bottom:72px;min-height:100vh;}
.page.active{display:block;}

/* ================================================================
   HEADER
   ================================================================ */
.header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;position:sticky;top:0;z-index:100;background:rgba(17,17,16,0.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.header-logo{font-family:'Spline Sans',sans-serif;font-size:16px;font-weight:900;letter-spacing:0.08em;color:var(--md-text);display:flex;align-items:center;gap:6px;}
.header-logo-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:var(--md-gold);border-radius:6px;}
.header-logo-icon .material-symbols-outlined{font-size:16px;color:var(--md-bg);}
.header-actions{display:flex;gap:2px;align-items:center;}
.header-btn{width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--md-text-sub);cursor:pointer;transition:var(--sq-transition);}
.header-btn:hover{color:var(--md-text);background:var(--md-card);}
.header-btn .material-symbols-outlined{font-size:20px;}
/* Settings button with label */
.header-settings{display:flex;align-items:center;gap:2px;padding:6px 10px 6px 8px;border-radius:var(--sq-radius-pill);background:transparent;border:1px solid var(--md-border);color:var(--md-text-sub);cursor:pointer;transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;font-size:var(--fs-xs);font-weight:700;}
.header-settings:hover{color:var(--md-gold);border-color:var(--md-gold);}
.header-settings .material-symbols-outlined{font-size:16px;}

/* ================================================================
   PROFILE XP BAR (shared with shop — replaces status-bar)
   ================================================================ */
.sq-xp-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(17,17,16,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--md-border);}
.sq-xp-avatar{width:32px;height:32px;border-radius:50%;background:var(--md-gold-glow);border:1.5px solid var(--md-gold);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;overflow:hidden;}
.sq-xp-info{flex:1;min-width:0;}
.sq-xp-level{font-size:0.65rem;font-weight:800;color:var(--md-gold);letter-spacing:0.06em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sq-xp-track{height:3px;background:rgba(255,255,255,0.06);border-radius:2px;margin-top:3px;}
.sq-xp-fill{height:100%;background:linear-gradient(90deg,var(--md-gold),#d4af37);border-radius:2px;transition:width 0.6s ease;}
.sq-xp-stats{display:flex;align-items:center;gap:8px;}
.sq-xp-stamps{font-size:0.55rem;color:var(--md-text-sub);display:flex;align-items:center;gap:3px;cursor:pointer;}
.sq-xp-stamps .material-symbols-outlined{font-size:14px;}
.status-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;position:relative;z-index:9;background:rgba(17,17,16,0.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--md-border);gap:8px;}
.status-lv{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.status-lv-badge{font-family:'Spline Sans',sans-serif;font-size:var(--fs-xs);font-weight:900;color:var(--md-gold);background:var(--md-gold-glow);padding:2px 6px;border-radius:4px;}
.status-xp{flex:1;max-width:80px;height:4px;background:var(--md-card-2);border-radius:99px;overflow:hidden;}
.status-xp-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--md-brand),var(--md-brand-lt));}
.status-xp-text{font-family:'Spline Sans',sans-serif;font-size:9px;color:var(--md-text-mute);font-weight:700;white-space:nowrap;}
.status-kanpai{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.status-kanpai-count{font-family:'Spline Sans',sans-serif;font-size:var(--fs-sm);font-weight:900;color:var(--md-text-sub);}
.status-kanpai-count strong{color:var(--md-gold);font-size:var(--fs-md);}
.status-kanpai-btn{display:flex;align-items:center;gap:4px;padding:6px 12px;border:none;border-radius:var(--sq-radius-pill);background:linear-gradient(135deg,var(--md-gold),#b08830);color:var(--md-bg);font-size:var(--fs-xs);font-weight:900;cursor:pointer;transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;box-shadow:0 2px 8px rgba(212,160,23,0.3);}
.status-kanpai-btn:active{transform:scale(0.95);}
.status-kanpai-btn .material-symbols-outlined{font-size:14px;}

/* ================================================================
   WELCOME CARD — FIXES C3
   ================================================================ */
.welcome-card{margin:8px 12px;padding:20px;background:linear-gradient(135deg,rgba(212,160,23,0.08),rgba(178,4,17,0.06));border:1px solid rgba(212,160,23,0.2);border-radius:16px;position:relative;animation:welcomeFadeIn 0.6s ease;}
@keyframes welcomeFadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
.welcome-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;border:none;background:var(--md-card-2);color:var(--md-text-mute);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--sq-transition);}
.welcome-close:hover{color:var(--md-text);background:var(--md-card);}
.welcome-close .material-symbols-outlined{font-size:16px;}
.welcome-title{font-size:var(--fs-lg);font-weight:900;margin-bottom:4px;}
.welcome-title span{color:var(--md-gold);}
.welcome-sub{font-size:var(--fs-sm);color:var(--md-text-sub);margin-bottom:14px;line-height:1.5;}
.welcome-features{display:flex;flex-direction:column;gap:8px;margin-bottom:14px;}
.welcome-feature{display:flex;align-items:center;gap:10px;font-size:var(--fs-sm);font-weight:500;color:var(--md-text);}
.welcome-feature-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.welcome-feature-icon .material-symbols-outlined{font-size:18px;}
.wf-red{background:var(--md-brand-glow);color:var(--md-brand-lt);}
.wf-gold{background:var(--md-gold-glow);color:var(--md-gold);}
.wf-green{background:var(--md-green-glow);color:var(--md-green);}
.welcome-start{display:block;width:100%;padding:10px;border:none;border-radius:var(--sq-radius-pill);background:linear-gradient(135deg,var(--md-gold),#b08830);color:var(--md-bg);font-size:var(--fs-base);font-weight:900;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:var(--sq-transition);text-align:center;}
.welcome-start:active{transform:scale(0.98);}

/* ================================================================
   HOME TABS — Binder-tab style with overlap depth
   ================================================================ */
.home-tabs{display:flex;align-items:flex-end;position:relative;z-index:8;background:rgba(17,17,16,0.94);backdrop-filter:blur(12px);padding:0 8px;gap:0;}
.home-tab{flex:1;padding:10px 12px 10px;text-align:center;cursor:pointer;color:var(--md-text-mute);position:relative;transition:all 0.25s ease;border:none;background:rgba(255,255,255,0.03);font-family:'Noto Sans JP',sans-serif;display:flex;flex-direction:column;align-items:center;gap:1px;border-radius:12px 12px 0 0;border:1px solid transparent;border-bottom:none;z-index:1;margin-bottom:0;}
.home-tab.active{color:var(--md-text);background:var(--md-card);z-index:3;border-color:var(--md-border);box-shadow:0 -2px 8px rgba(0,0,0,0.3);}
.home-tab:not(.active){z-index:1;opacity:0.7;transform:translateY(3px);border-color:rgba(255,255,255,0.05);}
.home-tab:not(.active):hover{opacity:0.9;background:rgba(255,255,255,0.06);}
.home-tab-icon{font-size:20px;line-height:1;transition:var(--sq-transition);}
.home-tab.active .home-tab-icon{color:var(--md-gold);}
.home-tab-jp{display:block;font-size:var(--fs-base);font-weight:900;line-height:1.2;}
.home-tab-sub{display:block;font-size:9px;font-weight:500;color:var(--md-text-mute);opacity:0.7;margin-top:1px;letter-spacing:0.02em;}
.home-tab.active .home-tab-sub{color:var(--md-gold);opacity:0.9;}
/* Active tab: カード端カラーと連動 */
.home-tab[data-tab="nomilog"].active{border-left:3px solid var(--md-brand);}
.home-tab[data-tab="zukan"].active{border-left:3px solid var(--md-gold);}
.home-tab-indicator{display:none;}
.view-toggle{width:36px;height:36px;border-radius:8px;background:transparent;border:1px solid var(--md-border);display:flex;align-items:center;justify-content:center;color:var(--md-text-sub);cursor:pointer;transition:var(--sq-transition);flex-shrink:0;margin-right:2px;margin-bottom:6px;z-index:4;}
.view-toggle:hover{color:var(--md-gold);border-color:var(--md-gold);}
.view-toggle .material-symbols-outlined{font-size:20px;}

/* ================================================================
   FILTER CHIPS — FIXES H2
   ================================================================ */
.filter-bar{display:flex;gap:6px;padding:10px 12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-chip{flex-shrink:0;padding:6px 14px;border-radius:var(--sq-radius-pill);border:1px solid var(--md-border);background:transparent;color:var(--md-text-sub);font-size:var(--fs-xs);font-weight:700;cursor:pointer;transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;white-space:nowrap;}
.filter-chip:hover{border-color:var(--md-text-mute);}
.filter-chip.active{background:var(--md-gold-glow);border-color:var(--md-gold);color:var(--md-gold);}

/* ================================================================
   FEED CONTENT
   ================================================================ */
.home-content{display:none;}
.home-content.active{display:block;}

/* Aa button — compact branded style */
.ag-aa-btn{background:var(--md-card, #1a1c19);border:1.5px solid var(--md-gold, #d4a843);border-radius:6px;cursor:pointer;padding:2px 8px;display:flex;align-items:center;justify-content:center;color:var(--md-gold, #d4a843);font-size:13px;font-weight:900;letter-spacing:0.5px;line-height:1.4;transition:background 0.15s ease, color 0.15s ease;}
.ag-aa-btn:active{background:var(--md-gold, #d4a843);color:var(--md-bg, #111);}

/* MASONRY — 2列 Dual-Column Distribution (Pinterest パターン)
   2つの独立 flex column に index % 2 で交互配置。
   左右交互の時系列 + 隙間なし + 追加ロードでリフローなし。 */
.masonry{display:flex;gap:8px;padding:4px 8px 0;align-items:flex-start;}
.masonry-col{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;}
.masonry-item{background:var(--md-card);border-radius:14px;overflow:hidden;cursor:pointer;transition:var(--sq-transition);}
.masonry-item:active{transform:scale(0.98);}
.card-img{width:100%;overflow:hidden;position:relative;}
.card-img-inner{width:100%;display:flex;align-items:center;justify-content:center;}
.card-body{padding:10px 12px 12px;}

/* --- Nomilog Card --- */
.nomi-sake-tag{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:800;color:var(--md-gold);margin-bottom:4px;}
.nomi-sake-dot{width:5px;height:5px;border-radius:50%;}
.nomi-review{font-size:var(--fs-base);line-height:1.6;color:var(--md-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.nomi-footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.nomi-user{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--md-text-sub);font-weight:700;width:100%;}
.nomi-avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--md-border);display:flex;align-items:center;justify-content:center;}
.nomi-avatar img{width:100%;height:100%;object-fit:cover;}
.nomi-avatar .material-symbols-outlined{font-size:14px;color:var(--md-text-mute);}
.nomi-footer .bl_heartUnit{flex:0 0 auto;}
.nomi-meta{display:flex;align-items:center;gap:8px;}
.nomi-hearts{display:flex;align-items:center;gap:2px;font-size:var(--fs-xs);color:var(--md-text-mute);}
.nomi-hearts .material-symbols-outlined{font-size:14px;color:#e57373;}
.nomi-time{font-size:var(--fs-xs);color:var(--md-text-mute);font-family:'Spline Sans',sans-serif;margin-left:auto;}
/* XP earned badge — FIXES H1 gamification */
.nomi-xp{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-family:'Spline Sans',sans-serif;font-weight:900;color:var(--md-gold);background:var(--md-gold-glow);padding:2px 6px;border-radius:4px;margin-top:6px;}
.nomi-xp .material-symbols-outlined{font-size:11px;color:var(--md-gold);}

/* --- Zukan Card (visual differentiation) — FIXES M1 --- */
.zukan-card{border-left:3px solid var(--md-gold);}
.nomi-card{border-left:3px solid var(--md-brand);}
.zukan-type{display:inline-block;padding:2px 6px;border-radius:4px;font-size:var(--fs-xs);font-weight:800;background:var(--md-gold-glow);color:var(--md-gold);margin-bottom:4px;letter-spacing:0.05em;cursor:pointer;position:relative;transition:var(--sq-transition);}
.zukan-type:hover{background:rgba(212,160,23,0.25);}
.zukan-name{font-size:var(--fs-md);font-weight:900;line-height:1.3;margin-bottom:2px;}
.zukan-brewery{font-size:var(--fs-xs);color:var(--md-text-sub);margin-bottom:2px;}
.zukan-region{font-size:var(--fs-xs);color:var(--md-text-mute);margin-bottom:6px;}
.zukan-stats{display:flex;align-items:center;gap:10px;}
.zukan-stat{display:flex;align-items:center;gap:2px;font-size:var(--fs-xs);color:var(--md-text-mute);}
.zukan-stat .material-symbols-outlined{font-size:14px;}
.zukan-stat--heart .material-symbols-outlined{color:#e57373;}
/* "Drank" checkmark — FIXES maniac request */
.zukan-drank{display:inline-flex;align-items:center;gap:3px;font-size:9px;font-weight:800;color:var(--md-green);background:var(--md-green-glow);padding:2px 6px;border-radius:4px;margin-left:auto;}
.zukan-drank .material-symbols-outlined{font-size:12px;}

/* Sake type tooltip — FIXES M2 */
.type-tooltip{position:fixed;z-index:300;background:var(--md-card);border:1px solid var(--md-gold);border-radius:12px;padding:12px 14px;max-width:280px;box-shadow:0 8px 32px rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity 0.2s ease;font-size:var(--fs-sm);line-height:1.6;color:var(--md-text);}
.type-tooltip.show{opacity:1;pointer-events:all;}
.type-tooltip-title{font-weight:900;color:var(--md-gold);margin-bottom:4px;font-size:var(--fs-base);}
.type-tooltip-close{position:absolute;top:6px;right:8px;background:none;border:none;color:var(--md-text-mute);cursor:pointer;font-size:12px;}

/* ================================================================
   SINGLE COLUMN
   ================================================================ */
body[data-view="single"] .masonry{flex-direction:column;gap:1px;padding:4px 0 0;}
body[data-view="single"] .masonry-col{gap:0;}
body[data-view="single"] .masonry-item{border-radius:0;border-bottom:1px solid var(--md-border);border-left:none !important;}
body[data-view="single"] .card-body{padding:12px 16px 16px;}
body[data-view="single"] .card-img-inner{aspect-ratio:4/3 !important;}
body[data-view="single"] .nomi-sake-tag{font-size:var(--fs-sm);}
body[data-view="single"] .nomi-review{font-size:var(--fs-md);line-height:1.7;-webkit-line-clamp:5;}
body[data-view="single"] .nomi-user{font-size:var(--fs-sm);}
body[data-view="single"] .nomi-hearts{font-size:var(--fs-sm);}
body[data-view="single"] .nomi-hearts .material-symbols-outlined{font-size:18px;}
body[data-view="single"] .zukan-type{font-size:var(--fs-sm);padding:3px 8px;}
body[data-view="single"] .zukan-name{font-size:var(--fs-lg);}
body[data-view="single"] .zukan-brewery{font-size:var(--fs-sm);}
body[data-view="single"] .zukan-region{font-size:var(--fs-sm);}
body[data-view="single"] .zukan-stat{font-size:var(--fs-sm);}
body[data-view="single"] .zukan-stat .material-symbols-outlined{font-size:18px;}
/* Single-col: nomi vs zukan distinction via subtle bg */
body[data-view="single"] .nomi-card{border-left:4px solid var(--md-brand) !important;border-radius:0;}
body[data-view="single"] .zukan-card{border-left:4px solid var(--md-gold) !important;border-radius:0;}

/* ================================================================
   FAB
   ================================================================ */
.fab{position:fixed;bottom:80px;right:calc(50% - 215px + 16px);z-index:90;display:flex;align-items:center;gap:6px;padding:12px 20px;border:none;border-radius:var(--sq-radius-pill);font-size:var(--fs-base);font-weight:900;cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,0.4);transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;}
.fab:hover{transform:scale(1.04);}
.fab:active{transform:scale(0.96);}
.fab .material-symbols-outlined{font-size:18px;}
.fab--nomi{background:linear-gradient(135deg,var(--md-brand),var(--md-brand-lt));color:#fff;}
.fab--zukan{background:linear-gradient(135deg,var(--md-gold),#b08830);color:var(--md-bg);}
@media(max-width:430px){.fab{right:16px;}}

/* ================================================================
   FOOTER NAV
   ================================================================ */
.footer-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;display:flex;align-items:center;background:rgba(17,17,16,0.96);backdrop-filter:blur(12px);border-top:1px solid var(--md-border);z-index:100;padding:4px 0 env(safe-area-inset-bottom,6px);}
.footer-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px 4px;cursor:pointer;text-decoration:none;transition:var(--sq-transition);border:none;background:none;}
.footer-tab .material-symbols-outlined{font-size:22px;color:var(--md-text-mute);transition:var(--sq-transition);}
.footer-tab-label{font-size:9px;font-weight:700;color:var(--md-text-mute);transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;}
.footer-tab.active .material-symbols-outlined{color:var(--md-gold);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;}
.footer-tab.active .footer-tab-label{color:var(--md-gold);}

/* ================================================================
   EXPLORE PAGE — MUSEUM DARK DESIGN
   ================================================================ */
/* Map Hero — G: CLEAR SKY（地図クリア + 白背景帯 + ゴールドライン） */
.ex-map-hero{margin:8px 12px;border-radius:20px;overflow:hidden;position:relative;border:1px solid #ddd;height:200px;display:flex;flex-direction:column;justify-content:flex-end;}
.ex-map-bg{position:absolute;inset:0;z-index:0;}
.ex-map-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(1.05) saturate(1.2);}
.ex-map-overlay{position:relative;z-index:1;padding:14px 16px;background:rgba(255,255,255,0.95);border-top:3px solid var(--md-gold);}
.ex-map-title{font-size:var(--fs-lg);font-weight:900;margin-bottom:4px;color:#2a1f10;}
.ex-map-count{font-size:var(--fs-sm);color:#7a6b50;margin-bottom:10px;}
.ex-map-count strong{color:#b8860b;font-family:'Spline Sans',sans-serif;}
.ex-map-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border:none;border-radius:var(--sq-radius-pill);background:linear-gradient(135deg,var(--md-gold),#b08830);color:var(--md-bg);font-size:var(--fs-base);font-weight:900;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:var(--sq-transition);text-decoration:none;}
.ex-map-btn:active{transform:scale(0.97);}
.ex-map-btn .material-symbols-outlined{font-size:18px;}

/* AI Search Bar — ソムリエくんアイコン付き */
.ai-search{margin:12px 12px 4px;display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--md-card);border:1px solid var(--md-border);border-radius:var(--sq-radius-pill);cursor:text;transition:var(--sq-transition);}
.ai-search:hover{border-color:var(--md-text-mute);}
.ai-search-char{width:24px;height:24px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--md-gold);}
.ai-search-text{font-size:var(--fs-sm);color:var(--md-text-mute);font-style:italic;}
.ai-search-icon{margin-left:auto;color:var(--md-text-mute);}
.ai-search-icon .material-symbols-outlined{font-size:18px;}

/* Quick actions — Museum Dark 統一 */
.ex-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px 12px 4px;}
.ex-quick-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px 12px;background:var(--md-card);border:1px solid var(--md-border);border-radius:16px;cursor:pointer;transition:var(--sq-transition);text-decoration:none;color:inherit;}
.ex-quick-item:hover{background:var(--md-card-2);border-color:var(--md-gold);}
.ex-quick-item--disabled{opacity:0.4;pointer-events:none;}
.ex-quick-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--md-gold-glow);color:var(--md-gold);}
.ex-quick-icon .material-symbols-outlined{font-size:22px;}
.ex-quick-label{font-size:var(--fs-xs);font-weight:700;color:var(--md-text-sub);text-align:center;}

/* Section headers */
.section-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px;}
.section-title{font-size:var(--fs-md);font-weight:900;display:flex;align-items:center;gap:6px;}
.section-title::before{content:'';width:3px;height:16px;background:var(--md-gold);border-radius:99px;}
.section-more{font-size:var(--fs-xs);color:var(--md-text-mute);font-weight:700;cursor:pointer;text-decoration:none;}

/* みんなで乾杯 — 常設CTA */
.ex-kanpai-cta{display:flex;align-items:center;gap:12px;margin:12px 16px 4px;padding:14px 16px;background:linear-gradient(135deg,rgba(201,168,76,0.10),rgba(201,168,76,0.04));border:1px solid rgba(201,168,76,0.25);border-radius:14px;transition:border-color .2s,transform .15s;}
.ex-kanpai-cta:hover{border-color:var(--md-gold);transform:translateY(-1px);}
.ex-kanpai-cta:active{transform:scale(0.98);}
.ex-kanpai-icon{width:40px;height:40px;border-radius:10px;background:var(--md-gold-glow,rgba(201,168,76,0.15));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.ex-kanpai-icon .material-symbols-outlined{font-size:22px;color:var(--md-gold);}
.ex-kanpai-body{flex:1;min-width:0;}
.ex-kanpai-title{font-size:var(--fs-sm);font-weight:900;color:var(--md-gold);}
.ex-kanpai-desc{font-size:var(--fs-xxs);color:var(--md-text-mute);margin-top:2px;line-height:1.4;}
.ex-kanpai-desc strong{color:var(--md-gold);font-weight:800;}
.ex-kanpai-action{flex-shrink:0;}
.ex-kanpai-go{display:inline-block;padding:6px 14px;border-radius:8px;font-size:var(--fs-xxs);font-weight:900;background:var(--md-gold);color:var(--md-bg);letter-spacing:0.5px;}
.ex-kanpai-done{display:flex;align-items:center;gap:3px;font-size:var(--fs-xxs);font-weight:700;color:var(--sq-success,#4caf50);}
.ex-kanpai-done .material-symbols-outlined{font-size:16px;}

.ex-challenge-cards{display:flex;flex-direction:column;gap:8px;padding:0 12px 8px;}

/* Quest Daily Card — base styles (goshuin.css にあるが home では未読込のため複製) */
.ex-challenge-cards .q-daily-card{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--md-card);border:1px solid var(--md-border);border-radius:14px;transition:border-color .2s;}
.ex-challenge-cards .q-daily-card:hover{border-color:rgba(201,168,76,.15);}
.ex-challenge-cards .q-daily-card.is-done{opacity:0.45;}
.ex-challenge-cards .q-daily-body{flex:1;min-width:0;}
.ex-challenge-cards .q-daily-title{font-size:var(--fs-sm);font-weight:800;}
.ex-challenge-cards .q-daily-desc{font-size:var(--fs-xxs);color:var(--md-text-mute);margin-top:2px;}
.ex-challenge-cards .q-daily-progress-track{height:3px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden;margin-top:5px;}
.ex-challenge-cards .q-daily-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--md-gold),#d4af37);}
.ex-challenge-cards .q-daily-action{padding:5px 12px;border-radius:8px;font-size:var(--fs-xxs);font-weight:800;cursor:pointer;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:all .15s;background:rgba(178,4,17,.08);color:#e87070;border:1px solid rgba(178,4,17,.2);}
.ex-challenge-cards .q-daily-action:hover{background:var(--sq-accent);color:#fff;}

/* Quest cards */
.quest-card{flex-shrink:0;width:auto;padding:14px;background:var(--md-card);border:1px solid var(--md-border);border-radius:14px;cursor:pointer;transition:var(--sq-transition);}
.quest-card:hover{border-color:var(--md-gold);}
.quest-card--kanpai{border-left:3px solid var(--md-gold);}
.quest-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.quest-icon .material-symbols-outlined{font-size:18px;}
.quest-title{font-size:var(--fs-sm);font-weight:900;margin-bottom:2px;}
.quest-desc{font-size:var(--fs-xs);color:var(--md-text-mute);line-height:1.4;margin-bottom:8px;}
.quest-reward{display:flex;align-items:center;gap:4px;font-size:9px;font-family:'Spline Sans',sans-serif;font-weight:900;color:var(--md-gold);background:var(--md-gold-glow);padding:2px 6px;border-radius:4px;width:fit-content;}
.quest-reward .material-symbols-outlined{font-size:11px;}

/* Bonus Quest — Museum Dark + タップ可能 */
.bonus-card{padding:16px;background:var(--md-card);border:1px solid var(--md-border);border-radius:14px;cursor:pointer;transition:var(--sq-transition);}
.bonus-card:hover{border-color:var(--md-gold);}
.bonus-label{font-size:var(--fs-xs);font-weight:900;color:var(--md-gold);letter-spacing:0.08em;margin-bottom:4px;}
.bonus-title-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.bonus-title-row .ag-goshuin-hint-img{width:28px;height:28px;border-radius:6px;object-fit:cover;flex-shrink:0;}
.bonus-title{font-size:var(--fs-md);font-weight:900;}
.bonus-bar-track{height:6px;background:var(--md-card-2);border-radius:99px;overflow:hidden;margin-bottom:6px;}
.bonus-bar-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--md-gold),var(--md-gold));}
.bonus-footer{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--md-text-mute);font-weight:700;}
.bonus-footer span:last-child{color:var(--md-gold);}
.bonus-footer .material-symbols-outlined{font-size:13px;vertical-align:text-bottom;}

/* Oshi-kura CTA — 2ボタン */
.oshi-cta{margin:0 12px 8px;padding:18px;background:linear-gradient(135deg,rgba(212,160,23,0.05),rgba(178,4,17,0.04));border:1px solid rgba(212,160,23,0.2);border-radius:14px;position:relative;overflow:hidden;}
.oshi-cta::before{content:'';position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;background:radial-gradient(circle,rgba(212,160,23,0.06),transparent);pointer-events:none;}
.oshi-cta-label{font-size:var(--fs-xs);font-weight:900;color:var(--md-gold);letter-spacing:0.1em;margin-bottom:6px;}
.oshi-cta-title{font-size:var(--fs-md);font-weight:900;line-height:1.5;margin-bottom:6px;}
.oshi-cta-title em{font-style:normal;color:var(--md-gold);}
.oshi-cta-desc{font-size:var(--fs-xs);color:var(--md-text-mute);line-height:1.6;margin-bottom:12px;}
.oshi-cta-stats{display:flex;gap:16px;margin-bottom:14px;}
.oshi-stat-num{font-family:'Spline Sans',sans-serif;font-size:var(--fs-lg);font-weight:900;color:var(--md-gold);margin-right:4px;}
.oshi-stat-label{font-size:9px;color:var(--md-text-mute);}
.oshi-cta-buttons{display:flex;gap:8px;flex-wrap:wrap;}
.oshi-cta-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border:none;border-radius:var(--sq-radius-pill);font-size:var(--fs-sm);font-weight:900;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:var(--sq-transition);text-decoration:none;}
.oshi-cta-btn:hover{transform:scale(1.02);box-shadow:0 4px 16px rgba(212,160,23,0.3);}
.oshi-cta-btn .material-symbols-outlined{font-size:16px;}
.oshi-cta-btn--primary{background:linear-gradient(135deg,var(--md-gold),#b08830);color:var(--md-bg);}
.oshi-cta-btn--secondary{background:transparent;border:1px solid var(--md-gold);color:var(--md-gold);}
.oshi-cta-btn--secondary:hover{background:var(--md-gold-glow);}

/* 御酒印帳 CTA — カード型拡大版 */
.goshuin-cta{display:block;margin:0 12px 8px;padding:18px;background:var(--md-card);border:1px solid var(--md-border);border-radius:14px;text-decoration:none;color:inherit;transition:var(--sq-transition);}
.goshuin-cta:hover{border-color:var(--md-gold);}
.goshuin-cta-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.goshuin-cta-heading{font-size:var(--fs-sm);font-weight:900;color:var(--md-text);}
.goshuin-cta-body{display:flex;align-items:center;gap:16px;margin-bottom:12px;}
.goshuin-cta .goshuin-stamps{display:flex;gap:0;}
.goshuin-cta .goshuin-stamp{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:-8px;border:2px solid var(--md-card);background:var(--md-card-2);overflow:hidden;}
.goshuin-cta .goshuin-stamp:first-child{margin-left:0;}
.goshuin-cta .goshuin-stamp img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.goshuin-cta-text{font-size:var(--fs-sm);color:var(--md-text-sub);font-weight:700;}
.goshuin-cta-footer{font-size:var(--fs-xs);font-weight:900;color:var(--md-gold);display:flex;align-items:center;gap:4px;}

/* Subscription CTA (explore 内の旧 sub-cta は削除。main の sq-sub-cta を @include で再利用) */

/* Settings panel */
.settings-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
.settings-overlay.open{opacity:1;pointer-events:all;}
.settings-panel{position:fixed;bottom:0;left:50%;transform:translateX(-50%) translateY(100%);width:100%;max-width:430px;z-index:201;background:var(--md-card);border-radius:20px 20px 0 0;padding:8px 20px 36px;transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);}
.settings-panel.open{transform:translateX(-50%) translateY(0);}
.settings-handle{width:36px;height:4px;border-radius:99px;background:var(--md-text-mute);margin:0 auto 16px;opacity:0.5;}
.settings-title{font-size:var(--fs-lg);font-weight:900;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.settings-title .material-symbols-outlined{font-size:20px;color:var(--md-gold);}
.font-size-section{margin-bottom:20px;}
.font-size-label{font-size:var(--fs-sm);color:var(--md-text-sub);font-weight:700;margin-bottom:8px;}
.font-size-options{display:flex;gap:8px;}
.font-size-btn{flex:1;padding:12px 8px;background:var(--md-card-2);border:2px solid var(--md-border);border-radius:12px;cursor:pointer;text-align:center;transition:var(--sq-transition);color:var(--md-text-sub);font-family:'Noto Sans JP',sans-serif;}
.font-size-btn.active{border-color:var(--md-gold);background:var(--md-gold-glow);color:var(--md-text);}
.font-size-btn-label{display:block;font-weight:900;margin-bottom:2px;}
.font-size-btn-sample{display:block;color:var(--md-text-mute);}
.font-size-btn.active .font-size-btn-sample{color:var(--md-text-sub);}
.view-mode-section{margin-bottom:12px;}
.view-mode-label{font-size:var(--fs-sm);color:var(--md-text-sub);font-weight:700;margin-bottom:8px;}
.view-mode-options{display:flex;gap:8px;}
.view-mode-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--md-card-2);border:2px solid var(--md-border);border-radius:12px;cursor:pointer;transition:var(--sq-transition);color:var(--md-text-sub);font-family:'Noto Sans JP',sans-serif;}
.view-mode-btn.active{border-color:var(--md-gold);background:var(--md-gold-glow);color:var(--md-text);}
.view-mode-btn .material-symbols-outlined{font-size:28px;}
.view-mode-btn.active .material-symbols-outlined{color:var(--md-gold);}
.view-mode-btn-label{font-size:var(--fs-xs);font-weight:700;}
.settings-preview{background:var(--md-card-2);border-radius:12px;padding:14px;margin-top:12px;}
.settings-preview-label{font-size:var(--fs-xs);color:var(--md-text-mute);font-weight:700;margin-bottom:6px;}
.settings-preview-text{font-size:var(--fs-base);line-height:1.7;color:var(--md-text);}
.settings-preview-text strong{color:var(--md-gold);}

/* AI Search Modal — Full screen overlay */
.search-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,0.85);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;display:flex;flex-direction:column;}
.search-overlay.open{opacity:1;pointer-events:all;}
.search-modal{position:relative;width:100%;max-width:430px;margin:0 auto;display:flex;flex-direction:column;height:100%;padding:56px 16px 0;}
.search-modal-header{display:flex;align-items:center;gap:8px;padding:14px 0;}
.search-modal-close{width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,0.08);color:var(--md-text-sub);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--sq-transition);flex-shrink:0;}
.search-modal-close:hover{background:rgba(255,255,255,0.15);color:var(--md-text);}
.search-modal-close .material-symbols-outlined{font-size:20px;}
.search-modal-input-wrap{flex:1;display:flex;align-items:center;gap:8px;background:var(--md-card);border:1px solid var(--md-border);border-radius:var(--sq-radius-pill);padding:8px 14px;transition:var(--sq-transition);}
.search-modal-input-wrap:focus-within{border-color:var(--md-gold);}
.search-modal-badge{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#7c4dff,#448aff);flex-shrink:0;font-size:10px;font-weight:900;color:#fff;letter-spacing:-0.5px;}
.search-modal-input{flex:1;background:none;border:none;outline:none;color:var(--md-text);font-size:var(--fs-base);font-family:'Noto Sans JP',sans-serif;}
.search-modal-input::placeholder{color:var(--md-text-mute);}
.search-modal-send{width:28px;height:28px;border-radius:50%;border:none;background:var(--md-gold);color:var(--md-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0.3;transition:var(--sq-transition);flex-shrink:0;}
.search-modal-send.active{opacity:1;}
.search-modal-send .material-symbols-outlined{font-size:16px;}
.search-modal-body{flex:1;overflow-y:auto;padding:8px 0;}
.search-char{display:flex;align-items:center;gap:12px;margin:16px 0 20px;padding:14px;background:var(--md-card);border-radius:16px;border:1px solid var(--md-border);}
.search-char-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,rgba(124,77,255,0.15),rgba(68,138,255,0.1));display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.search-char-icon .material-symbols-outlined{font-size:28px;color:#7c4dff;}
.search-char-text{flex:1;}
.search-char-name{font-size:var(--fs-sm);font-weight:900;margin-bottom:2px;}
.search-char-desc{font-size:var(--fs-xs);color:var(--md-text-mute);line-height:1.4;}
.search-section-title{font-size:var(--fs-xs);font-weight:900;color:var(--md-text-mute);letter-spacing:0.08em;margin:16px 0 8px;}
.search-suggest-chips{display:flex;flex-wrap:wrap;gap:6px;}
.search-suggest-chip{padding:6px 12px;border-radius:var(--sq-radius-pill);border:1px solid var(--md-border);background:transparent;color:var(--md-text-sub);font-size:var(--fs-xs);font-weight:600;cursor:pointer;transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;}
.search-suggest-chip:hover{border-color:var(--md-gold);color:var(--md-gold);}
.search-history-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--md-border);cursor:pointer;transition:var(--sq-transition);}
.search-history-item:hover{background:rgba(255,255,255,0.03);}
.search-history-item .material-symbols-outlined{font-size:16px;color:var(--md-text-mute);}
.search-history-text{flex:1;font-size:var(--fs-sm);color:var(--md-text-sub);}

/* First-time settings tooltip — FIXES H3 */
.settings-tooltip{position:fixed;top:52px;right:8px;z-index:150;background:var(--md-gold);color:var(--md-bg);padding:8px 12px;border-radius:10px;font-size:var(--fs-xs);font-weight:700;max-width:180px;box-shadow:0 4px 16px rgba(0,0,0,0.3);animation:tooltipBounce 0.5s ease;pointer-events:all;}
.settings-tooltip::before{content:'';position:absolute;top:-6px;right:20px;width:12px;height:12px;background:var(--md-gold);transform:rotate(45deg);}
.settings-tooltip-close{background:none;border:none;color:var(--md-bg);cursor:pointer;font-weight:900;margin-left:6px;opacity:0.7;}
@keyframes tooltipBounce{0%{opacity:0;transform:translateY(-8px);}60%{transform:translateY(3px);}100%{opacity:1;transform:translateY(0);}}

/* Placeholder pages */
.placeholder-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;color:var(--md-text-mute);text-align:center;padding:40px;}
.placeholder-page .material-symbols-outlined{font-size:48px;margin-bottom:12px;opacity:0.3;}
.placeholder-page-title{font-size:var(--fs-lg);font-weight:900;margin-bottom:4px;color:var(--md-text-sub);}
.placeholder-page-desc{font-size:var(--fs-base);color:var(--md-text-mute);}

/* ================================================================
   v7: Today's Activity Ticker
   ================================================================ */
/* ─── のみログバー（統計 + フィルター統合・filter-bar と同じ高さ） ─── */
.nomi-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;gap:8px;}
.nomi-bar-stats{display:flex;align-items:center;gap:6px;white-space:nowrap;min-width:0;}
.nomi-bar-icon{font-size:16px;color:var(--md-gold);}
.nomi-bar-num{font-family:'Spline Sans',sans-serif;font-size:var(--fs-sm);font-weight:800;color:var(--md-gold);}
.nomi-bar-label{font-size:var(--fs-xs);color:var(--md-text-mute);}
.nomi-bar-dot{width:3px;height:3px;border-radius:50%;background:var(--md-text-mute);flex-shrink:0;}
.nomi-bar-filter{display:flex;gap:4px;flex-shrink:0;}

/* ================================================================
   v7: Taste Tags — FIXES 恵子
   ================================================================ */
.taste-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px;}
.taste-tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;letter-spacing:0.03em;}
.taste-tag--sweet{background:rgba(255,152,0,0.12);color:#ffb74d;}
.taste-tag--dry{background:rgba(33,150,243,0.12);color:#64b5f6;}
.taste-tag--fruity{background:rgba(233,30,99,0.12);color:#f06292;}
.taste-tag--rich{background:rgba(121,85,72,0.12);color:#a1887f;}
.taste-tag--light{background:rgba(129,199,132,0.12);color:#81c784;}

/* ================================================================
   v7: Filter Chip Romaji — FIXES Sarah
   ================================================================ */
.filter-chip-en{display:block;font-size:8px;font-family:'Spline Sans',sans-serif;font-weight:500;opacity:0.6;letter-spacing:0.05em;margin-top:1px;}
.filter-chip{padding:5px 12px 4px;}

/* ================================================================
   v7: Level Tooltip — FIXES 信一
   ================================================================ */
.lv-tooltip{position:fixed;z-index:300;background:var(--md-card);border:1px solid var(--md-gold);border-radius:12px;padding:12px 14px;max-width:250px;box-shadow:0 8px 32px rgba(0,0,0,0.5);opacity:0;pointer-events:none;transition:opacity 0.2s ease;font-size:var(--fs-sm);line-height:1.6;color:var(--md-text);}
.lv-tooltip.show{opacity:1;pointer-events:all;}
.lv-tooltip-title{font-weight:900;color:var(--md-gold);margin-bottom:4px;font-size:var(--fs-base);display:flex;align-items:center;gap:4px;}
.lv-tooltip-title .material-symbols-outlined{font-size:16px;}
.status-lv-badge{cursor:pointer;transition:var(--sq-transition);}
.status-lv-badge:hover{background:var(--md-gold);color:var(--md-bg);}

/* ================================================================
   v7: Help Button — FIXES はるか
   ================================================================ */
.header-help{width:36px;height:36px;border-radius:50%;background:transparent;border:none;display:flex;align-items:center;justify-content:center;color:var(--md-text-mute);cursor:pointer;transition:var(--sq-transition);}
.header-help:hover{color:var(--md-gold);}
.header-help .material-symbols-outlined{font-size:20px;}

/* ================================================================
   v7: KANPAI Modal + Particle System
   ================================================================ */
.kanpai-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;pointer-events:none;transition:opacity 0.3s ease;}
.kanpai-overlay.open{opacity:1;pointer-events:all;}
.kanpai-modal{position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(100%);z-index:810;width:100%;max-width:430px;background:linear-gradient(180deg,#1a1815 0%,#0e0d0b 100%);border-radius:24px 24px 0 0;padding:24px 24px 32px;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);overflow:hidden;}
.kanpai-overlay.open .kanpai-modal{transform:translateX(-50%) translateY(0);}
.kanpai-modal-handle{width:40px;height:4px;border-radius:2px;background:var(--md-text-mute);margin:0 auto 20px;}
.kanpai-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--md-text-mute);cursor:pointer;z-index:5;}
.kanpai-modal-close .material-symbols-outlined{font-size:24px;}

/* Avatar Ball Pit */
.kanpai-ballpit{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;}
.kanpai-ball{position:absolute;border-radius:50%;border:2px solid rgba(212,160,23,0.25);overflow:hidden;animation:kBallFloat var(--dur,4s) ease-in-out var(--delay,0s) infinite;will-change:transform;}
.kanpai-ball img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.kanpai-ball--placeholder{display:flex;align-items:center;justify-content:center;background:var(--md-card-2);color:rgba(232,228,220,0.4);font-size:11px;font-weight:700;}
@keyframes kBallFloat{0%,100%{transform:translateY(0) rotate(var(--base-rot,0deg));}50%{transform:translateY(var(--fy,-8px)) rotate(calc(var(--base-rot,0deg) + var(--fr,2deg)));}}

/* Modal Content */
.kanpai-modal-content{position:relative;z-index:5;}
.kanpai-modal-live{display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:16px;}
.kanpai-modal-live-dot{width:8px;height:8px;border-radius:50%;background:#f44336;animation:livePulse 1.5s ease infinite;}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 4px #f44336;}50%{opacity:0.5;box-shadow:0 0 12px #f44336;}}
.kanpai-modal-live-text{font-size:var(--fs-xs);font-weight:900;color:#f44336;letter-spacing:0.1em;text-transform:uppercase;}
.kanpai-modal-phrase{text-align:center;font-size:var(--fs-base);font-weight:700;line-height:1.6;color:var(--md-gold);margin-bottom:16px;padding:8px 12px;background:rgba(201,168,76,0.08);border-radius:12px;}
.kanpai-modal-count-label{text-align:center;font-size:var(--fs-xs);color:var(--md-text-mute);letter-spacing:0.05em;margin-bottom:4px;}
.kanpai-modal-count{text-align:center;font-family:'Spline Sans',sans-serif;font-size:56px;font-weight:900;color:var(--md-gold);line-height:1;margin-bottom:4px;transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.kanpai-modal-count.bump{transform:scale(1.2);}
.kanpai-modal-total{text-align:center;font-size:var(--fs-xs);color:var(--md-text-mute);margin-bottom:24px;}
.kanpai-modal-action{display:block;width:100%;padding:18px;border:none;border-radius:var(--sq-radius-pill);background:linear-gradient(135deg,var(--md-gold),#e8b828);color:var(--md-bg);font-size:var(--fs-lg);font-weight:900;cursor:pointer;letter-spacing:0.05em;transition:var(--sq-transition);position:relative;overflow:hidden;}
.kanpai-modal-action:hover{transform:scale(1.02);box-shadow:0 4px 24px rgba(212,160,23,0.4);}
.kanpai-modal-action:active{transform:scale(0.97);}
.kanpai-modal-action.cheered{background:linear-gradient(135deg,#8b6914,#a67c1a);}

/* Particle system */
.kanpai-particles{position:fixed;inset:0;pointer-events:none;z-index:900;}
.k-particle{position:absolute;font-size:24px;animation:kParticleFly 2s ease-out forwards;}
@keyframes kParticleFly{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg);}40%{opacity:1;}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0.3) rotate(var(--tr));}}
.k-avatar-fly{position:absolute;width:36px;height:36px;border-radius:50%;border:2px solid var(--md-gold);overflow:hidden;animation:kAvatarExplode 1.8s cubic-bezier(0.25,1,0.5,1) forwards;}
.k-avatar-fly img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.k-avatar-fly--placeholder{display:flex;align-items:center;justify-content:center;background:var(--md-card-2);color:rgba(232,228,220,0.6);font-size:12px;font-weight:700;}
@keyframes kAvatarExplode{0%{opacity:1;transform:translate(0,0) scale(1) rotate(0deg);}30%{opacity:1;transform:translate(var(--tx2),var(--ty2)) scale(1.3) rotate(var(--tr2));}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0.4) rotate(var(--tr));}}
.k-confetti{position:absolute;width:8px;height:8px;border-radius:2px;animation:kConfettiFall 2.5s ease-out forwards;}
@keyframes kConfettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg) scale(1);}100%{opacity:0;transform:translateY(calc(100vh)) rotate(1080deg) scale(0.2);}}
.k-ring{position:absolute;border-radius:50%;border:3px solid var(--md-gold);animation:kRingExpand 1.2s ease-out forwards;}
@keyframes kRingExpand{0%{width:0;height:0;opacity:0.8;}100%{width:300px;height:300px;opacity:0;margin-left:-150px;margin-top:-150px;}}
.k-flash{position:fixed;inset:0;background:radial-gradient(circle at 50% 60%,rgba(212,160,23,0.4),transparent 70%);opacity:0;animation:kFlash 0.6s ease-out forwards;pointer-events:none;z-index:899;}
@keyframes kFlash{0%{opacity:1;}100%{opacity:0;}}
.k-fountain{position:absolute;width:4px;border-radius:2px;animation:kFountain 1.5s ease-out forwards;}
@keyframes kFountain{0%{opacity:1;height:0;transform:translateY(0);}30%{opacity:1;height:30px;}100%{opacity:0;height:4px;transform:translateY(var(--fy2));}}

/* ─── v7 Home: Feed Filter ─── */
/* .feed-filter は .nomi-bar-filter に統合済み — 後方互換のため feed-filter-btn のスタイルは維持 */
.feed-filter-btn{padding:6px 16px;border-radius:20px;border:1px solid var(--md-border,rgba(255,255,255,0.1));background:transparent;color:var(--md-text-sub,#999);font-size:var(--fs-xs,12px);font-weight:600;cursor:pointer;transition:all 0.2s ease;}
.feed-filter-btn.active{background:var(--md-gold-glow,rgba(212,168,67,0.12));border-color:var(--md-gold,#d4a843);color:var(--md-gold,#d4a843);}
.feed-filter-btn:not(.active):hover{border-color:var(--md-text-mute,#666);}

/* ─── v7 Home: Loading Spinner ─── */
.scroll-sentinel{padding:20px 0;display:flex;justify-content:center;}
.loading-spinner{display:flex;gap:6px;align-items:center;justify-content:center;padding:16px;}
.spinner-dot{width:8px;height:8px;border-radius:50%;background:var(--md-gold,#d4a843);animation:spinnerPulse 1.2s ease-in-out infinite;}
.spinner-dot:nth-child(2){animation-delay:0.2s;}
.spinner-dot:nth-child(3){animation-delay:0.4s;}
@keyframes spinnerPulse{0%,80%,100%{opacity:0.3;transform:scale(0.8);}40%{opacity:1;transform:scale(1.2);}}

/* ─── v7 Home: Feed Empty State ─── */
.feed-empty{padding:48px 20px;text-align:center;color:var(--md-text-mute,#666);}
.feed-empty p{margin-top:8px;font-size:var(--fs-sm,13px);}
.feed-empty-cta{display:inline-block;margin-top:16px;padding:10px 24px;border-radius:24px;background:var(--md-brand,#c0392b);color:#fff;font-size:var(--fs-sm,13px);font-weight:700;text-decoration:none;transition:transform 0.2s;}
.feed-empty-cta:hover{transform:scale(1.05);}

/* ─── v7 Home: Feed end message ─── */
.feed-end{padding:24px;text-align:center;color:var(--md-text-mute,#666);font-size:var(--fs-xs,12px);}

/* === GPS Blue Dot === */
.ag-gps-pulse { width: 16px; height: 16px; background: #4285F4; border-radius: 50%; border: 2.5px solid white; box-shadow: 0 0 6px rgba(66,133,244,0.5); position: relative; }
.ag-gps-pulse::after { content:""; position: absolute; inset: -10px; background: rgba(66,133,244,0.25); border-radius: 50%; animation: ag-gps-pulsate 2s ease-out infinite; z-index: -1; }
@keyframes ag-gps-pulsate { 0% { transform: scale(0.5); opacity:1; } 100% { transform: scale(2); opacity:0; } }

/* === HUD === */
.ag-hud { pointer-events: none; position: fixed; inset: 0; z-index: 800; }
.ag-hud > * { pointer-events: auto; }

/* === V4: Compact Legend === */
.ag-v4-legend { position: fixed; bottom: 1.25rem; left: 0.75rem; display: flex; gap: 0.35rem; z-index: 810; pointer-events: auto; }
.ag-v4-legend-chip { display: flex; align-items: center; gap: 4px; padding: 5px 10px; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-radius: 20px; font-size: 0.62rem; font-weight: 600; color: #374151; box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04); }
.ag-v4-legend-dot { width: 7px; height: 7px; border-radius: 50%; }
.ag-v4-legend-dot.ag-u { background: #9ca3af; }
.ag-v4-legend-dot.ag-n { background: #ef4444; }
.ag-v4-legend-dot.ag-c { background: #22c55e; }

/* === V4: Progress Badge (tappable) === */
.ag-v4-progress { position: fixed; top: 0.75rem; left: 0.75rem; display: flex; align-items: center; gap: 6px; padding: 7px 14px; background: rgba(255,255,255,0.88); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); border-radius: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04); z-index: 810; pointer-events: auto; font-size: 0.75rem; font-weight: 700; color: #1a1c19; cursor: pointer; transition: all 0.2s; }
.ag-v4-progress:active { transform: scale(0.96); }
.ag-v4-progress-detail { position: fixed; top: 3.25rem; left: 0.75rem; background: rgba(255,255,255,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 16px; padding: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,0.12); z-index: 811; pointer-events: auto; min-width: 200px; transform-origin: top left; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.ag-v4-progress-detail.ag-hidden { opacity: 0; transform: scale(0.9); pointer-events: none; }
.ag-v4-progress-detail .ag-pd-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; }
.ag-v4-progress-detail .ag-pd-label { font-size: 0.75rem; color: #5b403d; }
.ag-v4-progress-detail .ag-pd-value { font-size: 0.85rem; font-weight: 700; color: #1a1c19; }
.ag-v4-progress-detail .ag-pd-bar { height: 4px; background: #e8e8e3; border-radius: 2px; margin-top: 0.25rem; overflow: hidden; }
.ag-v4-progress-detail .ag-pd-bar-fill { height: 100%; border-radius: 2px; transition: width 0.5s ease; }

/* === V4: Search Panel === */
.ag-v4-search-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #F5F0EB; border: none; border-radius: 50%; cursor: pointer; color: #5b403d; font-size: 1rem; transition: all 0.15s; z-index: 5; }
.ag-v4-search-close:hover { background: #EFEBE5; color: #1a1c19; }
.ag-v4-search-loading { display: none; text-align: center; padding: 0.75rem; color: #999; font-size: 0.78rem; }
.ag-v4-search-loading.ag-active { display: block; }
.ag-v4-search-no-result { color: #999; padding: 0.75rem; font-size: 0.8rem; text-align: center; }
.ag-v4-area-feedback { display: none; margin-top: 0.5rem; padding: 0.6rem 1rem; background: rgba(178,4,17,0.06); border-radius: 10px; font-size: 0.75rem; color: #b20411; font-weight: 500; }
.ag-v4-area-feedback.ag-active { display: flex; align-items: center; gap: 0.5rem; }

/* === V4: Bottom Sheet === */
.ag-bs-sheet { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; max-height: 90vh; }
.ag-bs-scroll-area { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom, 1.5rem); }
.ag-bs-handle-area { padding: 0.5rem; display: flex; flex-direction: column; align-items: center; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }

.ag-v4-swipe-hint { text-align: center; padding: 0.25rem 0 0.5rem; color: #999; font-size: 0.7rem; cursor: pointer; user-select: none; transition: color 0.2s; display: flex; align-items: center; justify-content: center; gap: 4px; }
.ag-v4-swipe-hint:hover { color: #b20411; }
.ag-v4-swipe-hint .ag-arrow { display: inline-block; transition: transform 0.3s; font-size: 0.6rem; }
.ag-bs-sheet.ag-is-expanded .ag-v4-swipe-hint .ag-arrow { transform: rotate(180deg); }
.ag-bs-sheet.ag-is-expanded .ag-v4-swipe-hint .ag-hint-text::after { content: "閉じる"; }
.ag-bs-sheet:not(.ag-is-expanded) .ag-v4-swipe-hint .ag-hint-text::after { content: "もっと見る"; }

.ag-bs-expanded-content { display: none; padding: 0 1rem 1rem; border-top: 1px solid #e8e8e3; margin-top: 0.25rem; animation: ag-fadeSlideIn 0.3s ease; }
.ag-bs-sheet.ag-is-expanded .ag-bs-expanded-content { display: block; }
@keyframes ag-fadeSlideIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* === V4: Primary Action === */
.ag-v4-primary-action { margin: 0.5rem 1rem; background: linear-gradient(135deg, #b20411 0%, #d62927 100%); color: white; border-radius: 14px; padding: 0.8rem; text-align: center; font-weight: 700; font-size: 0.88rem; box-shadow: 0 4px 14px rgba(178,4,17,0.3); display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none; transition: all 0.15s; }
.ag-v4-primary-action:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(178,4,17,0.4); color: white; }
.ag-v4-primary-action:active { transform: translateY(0); }

/* === V4: Modern Stats (4-column like production) === */
.ag-v4-stats { display: flex; justify-content: space-around; padding: 0.5rem 0; margin: 0.4rem 1rem 0; background: #f4f4ef; border-radius: 12px; }
.ag-v4-st { text-align: center; cursor: default; }
.ag-v4-st.ag-is-tap { cursor: pointer; }
.ag-v4-st-n { font-size: 1.05rem; font-weight: 700; color: #1a1c19; }
.ag-v4-st-n.ag-gold { color: #7c5a00; }
.ag-v4-st-n.ag-pink { color: #ec4899; }
.ag-v4-st-l { font-size: 0.6rem; color: #5b403d; margin-top: 1px; }

/* === V5: 3-button action bar (production layout) === */
.ag-bs-acts { display: flex; gap: 0.5rem; padding: 0.625rem 1rem 0.75rem; }
.ag-bs-b { flex: 1; padding: 0.625rem 0.5rem; border-radius: 1rem; font-size: 0.7rem; font-weight: 700; border: 1.5px solid #e8e8e3; background: #f9fafb; color: #1a1c19; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.ag-bs-b:active { transform: scale(0.97); }
.ag-bs-b.ag-p { background: linear-gradient(135deg, #1a1a1a, #333); border-color: transparent; color: #fff; }
.ag-bs-b.ag-o { background: linear-gradient(135deg, rgba(176,136,48,0.12), rgba(176,136,48,0.05)); border-color: rgba(176,136,48,0.4); color: #7c5a00; }
.ag-bs-b.ag-l { background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(236,72,153,0.06)); border-color: rgba(236,72,153,0.3); color: #ec4899; }

/* === V5: Oshi Barometer === */
.ag-oshi-baro { display: none; margin: 0 1rem 0.5rem; padding: 0.6rem 0.8rem; background: linear-gradient(135deg, rgba(176,136,48,0.08), rgba(176,136,48,0.03)); border: 1px solid rgba(176,136,48,0.2); border-radius: 14px; transition: max-height 0.4s ease, opacity 0.3s ease; }
.ag-oshi-baro.ag-is-visible { display: block; }
.ag-oshi-baro-label { font-size: 0.65rem; font-weight: 700; color: #7c5a00; margin-bottom: 0.3rem; display: flex; align-items: center; gap: 0.25rem; }
.ag-oshi-baro-track { height: 6px; background: #e8e8e3; border-radius: 3px; overflow: hidden; }
.ag-oshi-baro-fill { height: 100%; background: linear-gradient(90deg, #b08830, #c9a044); border-radius: 3px; transition: width 0.15s ease; width: 0%; }
.ag-oshi-baro-hint { font-size: 0.55rem; color: #999; margin-top: 0.2rem; text-align: right; }

/* === V5: Coach mark (oshi/like tooltip) === */
.ag-bs-tooltip { position: relative; }
.ag-bs-tooltip-bubble { display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: #1a1c19; color: #fff; font-size: 0.55rem; font-weight: 500; padding: 0.4rem 0.6rem; border-radius: 8px; white-space: nowrap; z-index: 100; box-shadow: 0 4px 12px rgba(0,0,0,0.2); animation: ag-tooltipFade 0.2s ease; pointer-events: none; }
.ag-bs-tooltip-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1c19; }
.ag-bs-tooltip-bubble.ag-is-show { display: block; }
@keyframes ag-tooltipFade { from { opacity: 0; transform: translateX(-50%) translateY(4px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* === V5: Oshi coach mark overlay === */
.ag-oshi-coach { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, #b08830, #c9a044); color: #fff; font-size: 0.6rem; font-weight: 600; padding: 0.5rem 0.75rem; border-radius: 10px; white-space: nowrap; z-index: 100; box-shadow: 0 4px 16px rgba(176,136,48,0.35); animation: ag-tooltipFade 0.3s ease; }
.ag-oshi-coach::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #c9a044; }
.ag-oshi-coach.ag-is-show { display: block; }

/* === V5: Checkin banner (production style) === */
.ag-checkin-banner { position: absolute; top: 0; left: 0; right: 0; padding: 0 0.75rem; transform: translateY(-100%); transition: transform 0.45s cubic-bezier(0.32,0.72,0,1); z-index: 600; }
.ag-checkin-banner.ag-is-visible { transform: translateY(0); }
.ag-cb-inner { margin-top: 0.5rem; background: #fff; border: 1.5px solid rgba(176,136,48,0.35); border-radius: 1.25rem; box-shadow: 0 6px 24px rgba(176,136,48,0.15); padding: 0.75rem 1rem; display: flex; align-items: center; gap: 0.75rem; cursor: pointer; transition: transform 0.15s; position: relative; }
.ag-cb-inner:active { transform: scale(0.98); }
.ag-cb-icon { width: 2.75rem; height: 2.75rem; border-radius: 0.875rem; background: linear-gradient(135deg, #c9a044, #b08830); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(176,136,48,0.25); position: relative; color: #fff; }
.ag-cb-icon::after { content: ''; position: absolute; inset: -6px; border-radius: 1.25rem; border: 2px solid rgba(176,136,48,0.3); animation: ag-cbRing 1.5s ease-out infinite; }
@keyframes ag-cbRing { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.35); opacity: 0; } }
.ag-cb-body { flex: 1; min-width: 0; }
.ag-cb-label { font-size: 0.5rem; font-weight: 700; color: #7c5a00; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.125rem; }
.ag-cb-name { font-size: 1rem; line-height: 1.2; color: #1a1c19; font-weight: 700; }
.ag-cb-dist { font-size: 0.5rem; color: #999; margin-top: 0.125rem; }
.ag-cb-btn { padding: 0.5rem 0.75rem; background: linear-gradient(135deg, #c9a044, #b08830); border: none; border-radius: 0.875rem; font-size: 0.625rem; font-weight: 900; color: #fff; cursor: pointer; font-family: inherit; flex-shrink: 0; }
.ag-cb-close { position: absolute; top: 0.625rem; right: 0.625rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: rgba(0,0,0,0.06); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #999; font-size: 0.75rem; }

/* === V5: BS Checkin area (production style, gold gradient) === */
.ag-bs-checkin-area { display: none; padding: 0 1rem 0.75rem; }
.ag-bs-checkin-btn { width: 100%; padding: 0.75rem; background: linear-gradient(135deg, #b08830, #c9a044); color: #fff; border: none; border-radius: 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; box-shadow: 0 4px 14px rgba(176,136,48,0.35); animation: ag-pulseGold 2s ease-in-out infinite; transition: all 0.15s; }
.ag-bs-checkin-btn:active { transform: scale(0.97); }
@keyframes ag-pulseGold { 0%, 100% { box-shadow: 0 4px 14px rgba(176,136,48,0.35); } 50% { box-shadow: 0 4px 24px rgba(176,136,48,0.55); } }
.ag-bs-checkin-hint { font-size: 0.55rem; color: #999; text-align: center; margin-top: 0.25rem; }

/* === V5: Fireworks celebration (production style) === */
#ag-checkinFireoverlay { position: fixed; inset: 0; z-index: 9999; pointer-events: all; display: none; }
#ag-checkinFireoverlay.ag-is-active { display: block; }
.ag-ci-confetti { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: ag-confettiFall 2.5s ease-out forwards; }
@keyframes ag-confettiFall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
.ag-ci-center-msg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; animation: ag-msgPop 0.5s cubic-bezier(0.2,0.8,0.2,1); }
.ag-ci-center-msg h2 { font-size: 1.5rem; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.ag-ci-center-msg p { font-size: 0.9rem; margin: 0.5rem 0 0; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }
.ag-ci-center-msg small { font-size: 0.7rem; color: rgba(255,255,255,0.7); }
@keyframes ag-msgPop { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

/* === V5: Inline SVG icon helper === */
.ag-sq-svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* === V4: Brewery Icon === */
.ag-v4-brewery-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; }
.ag-v4-brewery-icon.ag-status-u { background: linear-gradient(135deg, #EFEBE5 0%, #E8E0D8 100%); }
.ag-v4-brewery-icon.ag-status-n { background: linear-gradient(135deg, rgba(178,4,17,0.08) 0%, rgba(178,4,17,0.15) 100%); }
.ag-v4-brewery-icon.ag-status-c { background: linear-gradient(135deg, #ecfdf5 0%, #bbf7d0 100%); }

/* === V4: Status Chip === */
.ag-v4-status-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; font-size: 0.6rem; font-weight: 700; }
.ag-v4-status-chip.ag-status-u { background: #f3f4f6; color: #6b7280; }
.ag-v4-status-chip.ag-status-n { background: #fef2f2; color: #dc2626; }
.ag-v4-status-chip.ag-status-c { background: #ecfdf5; color: #16a34a; }

/* === V4: Expanded Content === */
.ag-v4-detail-section { margin-top: 1rem; }
.ag-v4-detail-section h4 { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 700; color: #1a1c19; display: flex; align-items: center; gap: 4px; }
.ag-v4-detail-section p { margin: 0; font-size: 0.76rem; color: #5b403d; line-height: 1.7; }
.ag-v4-sake-list { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.ag-v4-sake-tag { padding: 4px 10px; background: linear-gradient(135deg, #faf6f0, #F5F0EB); border-radius: 20px; font-size: 0.68rem; font-weight: 600; color: #5b403d; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display: flex; align-items: center; gap: 0.2rem; }
.ag-v4-sake-tag .ag-sq-svg { width: 0.85em; height: 0.85em; }
.ag-v4-secondary-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ag-v4-secondary-actions button { flex: 1; padding: 0.65rem; border-radius: 12px; font-size: 0.76rem; font-weight: 600; cursor: pointer; border: 1.5px solid #e8e8e3; background: white; color: #1a1c19; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 0.3rem; }
.ag-v4-secondary-actions button:hover { border-color: #b20411; color: #b20411; background: rgba(178,4,17,0.06); }
.ag-v4-secondary-actions button:active { transform: scale(0.97); }

/* === V4: Onboarding === */
.ag-v4-onboarding-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; animation: ag-fadeIn 0.3s ease; }
@keyframes ag-fadeIn { from { opacity:0; } to { opacity:1; } }
.ag-v4-onboarding-card { background: white; border-radius: 24px; padding: 2rem 1.5rem; max-width: 340px; width: 100%; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,0.15); animation: ag-slideUp 0.4s cubic-bezier(0.2,0.8,0.2,1); }
@keyframes ag-slideUp { from { opacity:0; transform: translateY(30px); } to { opacity:1; transform: translateY(0); } }
.ag-v4-onboarding-card h2 { margin: 0 0 0.35rem; font-size: 1.35rem; color: #1a1c19; }
.ag-v4-onboarding-card .ag-subtitle { color: #5b403d; font-size: 0.82rem; margin-bottom: 1.5rem; }
.ag-v4-onboarding-steps { text-align: left; margin-bottom: 1.5rem; }
.ag-v4-onboarding-step { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.ag-v4-onboarding-step .ag-step-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ag-v4-onboarding-step:nth-child(1) .ag-step-icon { background: rgba(178,4,17,0.06); }
.ag-v4-onboarding-step:nth-child(2) .ag-step-icon { background: #ecfdf5; }
.ag-v4-onboarding-step:nth-child(3) .ag-step-icon { background: #F5F0EB; }
.ag-v4-onboarding-step .ag-step-text { font-size: 0.8rem; color: #5b403d; line-height: 1.5; }
.ag-v4-onboarding-step .ag-step-text strong { color: #1a1c19; }
.ag-v4-onboarding-btn { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, #b20411, #d62927); color: white; border: none; border-radius: 14px; font-size: 0.95rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(178,4,17,0.3); transition: all 0.15s; }
.ag-v4-onboarding-btn:hover { box-shadow: 0 6px 20px rgba(178,4,17,0.4); }
.ag-v4-onboarding-btn:active { transform: scale(0.98); }
.ag-hidden { display: none !important; }

/* === V4: Cloud Hitokoto Messages (Yahoo Weather style) === */
.ag-v4-cloud {
    position: relative;
    background: white;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 0.68rem;
    color: #1a1c19;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    max-width: 160px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: ag-cloudFloat 3s ease-in-out infinite;
}
.ag-v4-cloud::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.ag-v4-cloud::before {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 16px;
    width: 7px;
    height: 7px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.ag-v4-cloud .ag-cloud-user {
    font-size: 0.55rem;
    color: #999;
    margin-top: 2px;
}
@keyframes ag-cloudFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* === V4: Hitokoto Posting FAB === */
.ag-v4-hitokoto-fab {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b08830, #c9a044);
    color: white;
    border: none;
    box-shadow: 0 4px 14px rgba(176,136,48,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 820;
    transition: all 0.2s;
}
.ag-v4-hitokoto-fab:hover { transform: scale(1.08); }
.ag-v4-hitokoto-fab:active { transform: scale(0.95); }

/* === V4: Hitokoto Posting Modal === */
.ag-v4-hitokoto-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9998;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 72px 0;
    animation: ag-fadeIn 0.2s ease;
}
.ag-v4-hitokoto-card {
    background: white;
    border-radius: 20px;
    padding: 1.5rem;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.12);
    animation: ag-slideUp 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.ag-v4-hitokoto-card h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.ag-v4-hitokoto-textarea {
    width: 100%;
    border: 1.5px solid #e8e8e3;
    border-radius: 12px;
    padding: 0.75rem;
    font-size: 0.85rem;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    min-height: 80px;
}
.ag-v4-hitokoto-textarea:focus { border-color: #b08830; }
.ag-v4-hitokoto-char {
    text-align: right;
    font-size: 0.65rem;
    color: #999;
    margin-top: 0.25rem;
}
.ag-v4-hitokoto-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
.ag-v4-hitokoto-actions button {
    flex: 1;
    padding: 0.75rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
}
.ag-v4-hitokoto-actions .ag-cancel {
    background: #F5F0EB;
    color: #5b403d;
}
.ag-v4-hitokoto-actions .ag-submit {
    background: linear-gradient(135deg, #b08830, #c9a044);
    color: white;
    box-shadow: 0 4px 10px rgba(176,136,48,0.3);
}
.ag-v4-hitokoto-actions .ag-submit:hover { box-shadow: 0 6px 16px rgba(176,136,48,0.4); }

}

/* #1383 Theme Toggle: トークンオーバーライドは :root 直後（@layer 内）に移動済み */

/* ─── Theme Toggle UI ─── */
.ag-theme-section{padding:12px 0;border-top:1px solid var(--md-border);}
.ag-theme-label{font-size:var(--fs-xs);color:var(--md-text-sub);margin-bottom:8px;font-weight:700;}
.ag-theme-options{display:flex;gap:8px;}
.ag-theme-btn{flex:1;display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;border:2px solid var(--md-border);background:transparent;color:var(--md-text);font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:var(--sq-transition);font-family:'Noto Sans JP',sans-serif;}
.ag-theme-btn.active{border-color:var(--md-gold);background:var(--md-gold-glow);}
.ag-theme-btn:hover{border-color:var(--md-gold);opacity:0.8;}
.ag-theme-swatch{width:20px;height:20px;border-radius:50%;border:2px solid var(--md-border);flex-shrink:0;}
.ag-theme-swatch--light{background:linear-gradient(135deg,#f4f4ef,#fff);}
.ag-theme-swatch--dark{background:linear-gradient(135deg,#111110,#1c1a17);}
.ag-theme-btn-label{font-size:var(--fs-xs);white-space:nowrap;}

/* ================================================================ */
/* #1406 FAB — のみログを書く (銘柄詳細)                            */
/* ================================================================ */
.ag-fab-nomilog{
  position:fixed;bottom:5rem;right:1rem;z-index:50;
  display:inline-flex;align-items:center;gap:0.375rem;
  padding:0.75rem 1.25rem;
  background:var(--md-accent, var(--sq-brand));
  color:#fff;font-size:var(--fs-sm, 0.8125rem);font-weight:700;
  font-family:'Noto Sans JP',sans-serif;
  border-radius:9999px;border:none;
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  text-decoration:none;cursor:pointer;
  transition:transform 0.15s ease,box-shadow 0.15s ease;
  -webkit-tap-highlight-color:transparent;
}
.ag-fab-nomilog:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.25);}
.ag-fab-nomilog:active{transform:scale(0.95);}
.ag-fab-nomilog .material-symbols-outlined{font-size:1.125rem;}

/* ═══════════════════════════════════════════════
   #1415 Museum Dark — マイページ (page_profile) 対応
   ═══════════════════════════════════════════════ */

/* ── カード背景（stats-card, bio-balloon, result-banner, badge-tile 等） ── */
html[data-theme="museum-dark"] .page_profile .stats-card,
html[data-theme="museum-dark"] .page_profile .bio-balloon,
html[data-theme="museum-dark"] .page_profile .result-banner,
html[data-theme="museum-dark"] .page_profile .badge-tile,
html[data-theme="museum-dark"] .page_profile .result-btn--ghost{
  background:var(--md-card);color:var(--md-text);
  box-shadow:0 2px 12px rgba(0,0,0,0.3);
  border:1px solid var(--md-border);
}

/* ── 吹き出しの矢印 ── */
html[data-theme="museum-dark"] .page_profile .bio-balloon::before{
  border-bottom-color:var(--md-card);
}

/* ── Rainbow Ring / Normal Ring 白背景 ── */
html[data-theme="museum-dark"] .page_profile .rainbow-ring > .inner{background:var(--md-card);}
html[data-theme="museum-dark"] .page_profile .normal-ring{border-color:var(--md-border);}

/* ── Badge Icon Level 白ボーダー ── */
html[data-theme="museum-dark"] .page_profile .badge-icon-mini__lv{border-color:var(--md-card);}

/* ── テキスト色 ── */
html[data-theme="museum-dark"] .page_profile .result-banner__sub,
html[data-theme="museum-dark"] .page_profile .result-lv-labels .next,
html[data-theme="museum-dark"] .page_profile .sq-progress-label,
html[data-theme="museum-dark"] .page_profile .result-close,
html[data-theme="museum-dark"] .page_profile .un_nameEdit_btn{color:var(--md-text-mute);}

/* ── Section Header ── */
html[data-theme="museum-dark"] .page_profile .sec-header-bar__title{color:var(--md-text);}

/* ── Grade Pill / Badge Levelup Tag ── */
html[data-theme="museum-dark"] .page_profile .grade-pill,
html[data-theme="museum-dark"] .page_profile .badge-levelup-tag{
  background:rgba(var(--md-gold-rgb,212,175,55),0.15);
}

/* ── Badge Type Label ── */
html[data-theme="museum-dark"] .page_profile .badge-type-label{
  background:rgba(255,255,255,0.06);color:var(--md-text-sub);
}

/* ── Badge Tile Locked ── */
html[data-theme="museum-dark"] .page_profile .badge-tile.is-locked{opacity:0.25;}
html[data-theme="museum-dark"] .page_profile .badge-tile__lv.no-lv{color:var(--md-text-mute);}

/* ── Result Stat ── */
html[data-theme="museum-dark"] .page_profile .result-stat{background:rgba(255,255,255,0.04);border-radius:10px;}

/* ── Result Banner Borders ── */
html[data-theme="museum-dark"] .page_profile .result-banner__header,
html[data-theme="museum-dark"] .page_profile .ar-badge-row,
html[data-theme="museum-dark"] .page_profile .result-actions{border-color:var(--md-border);}

/* ── Result Close Button ── */
html[data-theme="museum-dark"] .page_profile .result-close{background:rgba(255,255,255,0.06);}

/* ── Cropper Modal ── */
html[data-theme="museum-dark"] .page_profile .cropperModal_inner{background:var(--md-card);}

/* ── カバー画像ボタン ── */
html[data-theme="museum-dark"] .page_profile .un_coverArea_btn{
  background:rgba(0,0,0,0.6);color:var(--md-text);
}

/* ── 友達招待・呑みログ等の汎用カード ── */
html[data-theme="museum-dark"] .page_profile .un_card,
html[data-theme="museum-dark"] .page_profile .un_cardBox{
  background:var(--md-card);color:var(--md-text);
  border-color:var(--md-border);
}

/* ── 汎用テキスト ── */
html[data-theme="museum-dark"] .page_profile h2,
html[data-theme="museum-dark"] .page_profile h3,
html[data-theme="museum-dark"] .page_profile h4{color:var(--md-text);}

/* ── タブ・リンク ── */
html[data-theme="museum-dark"] .page_profile .tab-menu a{color:var(--md-text-sub);}
html[data-theme="museum-dark"] .page_profile .tab-menu a.is-active{
  color:var(--md-gold);border-bottom-color:var(--md-gold);
}

/* ── ichioshi (推し蔵) グリッド ── */
html[data-theme="museum-dark"] .page_profile .ichioshi-card{
  background:var(--md-card);border-color:var(--md-border);
}

/* =====================================================================
   #1441 御酒印コレクション v3 リニューアル
   ag-gv3-* prefix — Strangler Fig: goshuin_v3 Feature Flag
   ===================================================================== */

/* ── Rarity Token Variables (v3) ── */
.ag-gv3-rarity--common{background:var(--rarity-common-bg,rgba(255,255,255,0.06));color:var(--rarity-common-text,#999);}
.ag-gv3-rarity--uncommon{background:var(--rarity-uncommon-bg,rgba(34,197,94,0.1));color:var(--rarity-uncommon-text,#22c55e);}
.ag-gv3-rarity--rare{background:var(--rarity-rare-bg,rgba(59,130,246,0.1));color:var(--rarity-rare-text,#3b82f6);}
.ag-gv3-rarity--epic{background:var(--rarity-epic-bg,rgba(168,85,247,0.1));color:var(--rarity-epic-text,#a855f7);}
.ag-gv3-rarity--legendary{background:var(--rarity-legendary-bg,rgba(234,179,8,0.1));color:var(--rarity-legendary-text,var(--md-gold));}

/* ── SECTION 1: HERO ── */
.ag-gv3-hero{position:relative;padding:20px 16px 16px;overflow:hidden;
  background:linear-gradient(165deg,var(--md-card) 0%,var(--md-gold-glow,rgba(212,160,23,0.08)) 50%,var(--md-card) 100%);}
html[data-theme="classic-red"] .ag-gv3-hero{
  background:linear-gradient(165deg,#fff 0%,var(--md-brand-glow,rgba(178,4,17,0.04)) 50%,#fff 100%);}
.ag-gv3-hero-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;}
.ag-gv3-hero-label{font-size:var(--fs-xs,10px);color:var(--md-text-mute);font-weight:700;letter-spacing:1px;margin-bottom:4px;}
.ag-gv3-hero-title{font-family:'Noto Serif JP',serif;font-size:var(--fs-2xl,22px);font-weight:900;
  background:linear-gradient(135deg,var(--md-gold),var(--md-brand-lt,#e8b84a));-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;line-height:1.3;}
html[data-theme="classic-red"] .ag-gv3-hero-title{background:linear-gradient(135deg,var(--md-brand),var(--md-brand-lt));-webkit-background-clip:text;background-clip:text;}
.ag-gv3-hero-shougou{font-size:var(--fs-xs,10px);color:var(--md-text-sub);font-weight:700;margin-top:4px;
  display:flex;align-items:center;gap:4px;}
.ag-gv3-hero-lv{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 12px;
  background:var(--md-gold-glow);border:1px solid rgba(212,160,23,0.2);border-radius:var(--sq-radius-pill,999px);
  font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-sm,11px);font-weight:700;color:var(--md-gold);}
.ag-gv3-hero-streak{display:inline-flex;align-items:center;gap:4px;margin-top:6px;margin-left:4px;padding:3px 10px;
  background:var(--md-green-glow,rgba(34,197,94,0.10));border:1px solid rgba(34,197,94,0.2);border-radius:var(--sq-radius-pill,999px);
  font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xs,10px);font-weight:700;color:var(--md-green,#22c55e);}

/* ── Hero Showcase ── */
.ag-gv3-hero-showcase{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:4px;cursor:pointer;position:relative;right:40px;top:12px;}
.ag-gv3-hero-showcase:hover .ag-gv3-hero-showcase-img{border-color:var(--md-gold);transform:translateY(-4px) scale(1.08);}
.ag-gv3-hero-showcase-label{font-size:var(--fs-xxs,9px);color:var(--md-gold);font-weight:700;text-align:center;white-space:nowrap;}
.ag-gv3-hero-showcase-img{width:104px;height:104px;border-radius:16px;object-fit:contain;
  background:var(--md-card-2);padding:4px;border:2px solid rgba(212,160,23,0.4);
  box-shadow:0 4px 20px rgba(212,160,23,0.25),0 0 40px rgba(212,160,23,0.1);
  transition:var(--sq-transition,all 0.3s ease);animation:ag-gv3-float 3s ease-in-out infinite;}
@keyframes ag-gv3-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Hero Progress ── */
.ag-gv3-hero-progress{margin-top:4px;}
.ag-gv3-progress-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.ag-gv3-progress-count{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xl,18px);font-weight:900;color:var(--md-text);}
.ag-gv3-progress-count span{color:var(--md-gold);font-size:var(--fs-2xl,22px);}
.ag-gv3-progress-msg{font-size:var(--fs-xs,10px);color:var(--md-text-sub);font-weight:500;}
.ag-gv3-progress-bar-wrap{width:100%;height:8px;background:var(--md-card-2);border-radius:4px;overflow:hidden;position:relative;}
.ag-gv3-progress-bar-fill{height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--md-gold),var(--md-brand-lt,#e8b84a));transition:width 1.2s cubic-bezier(0.4,0,0.2,1);
  position:relative;overflow:hidden;}
.ag-gv3-progress-bar-fill::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:ag-gv3-shimmer 2s infinite;}
@keyframes ag-gv3-shimmer{100%{left:100%}}
html[data-theme="classic-red"] .ag-gv3-progress-bar-fill{background:linear-gradient(90deg,var(--md-brand),var(--md-brand-lt));}

/* ── Next Target Card ── */
.ag-gv3-next-target{margin-top:12px;padding:12px;background:var(--md-card-2);border:1px solid var(--md-border);
  border-radius:var(--sq-radius,12px);display:flex;align-items:center;gap:12px;cursor:pointer;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-next-target:hover{border-color:var(--md-gold);background:var(--md-gold-glow);}
.ag-gv3-next-target-img{width:48px;height:48px;border-radius:10px;object-fit:contain;flex-shrink:0;
  border:1.5px solid rgba(212,160,23,0.25);padding:2px;background:var(--md-card-2);}
.ag-gv3-next-target-info{flex:1;min-width:0;}
.ag-gv3-next-target-label{font-size:var(--fs-xs,10px);color:var(--md-gold);font-weight:700;display:flex;align-items:center;gap:4px;}
.ag-gv3-next-target-name{font-size:var(--fs-sm,11px);font-weight:700;color:var(--md-text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-gv3-next-target-hint{font-size:var(--fs-xs,10px);color:var(--md-text-sub);margin-top:2px;}
.ag-gv3-next-target-arrow{color:var(--md-text-mute);flex-shrink:0;}

/* ── Mini Daily Banner ── */
.ag-gv3-mini-daily{padding:8px 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.ag-gv3-mini-daily::-webkit-scrollbar{display:none;}
.ag-gv3-mini-daily-item{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--sq-radius-pill,999px);
  background:var(--md-card);border:1px solid var(--md-border);white-space:nowrap;flex-shrink:0;font-size:var(--fs-xs,10px);font-weight:700;
  cursor:pointer;transition:var(--sq-transition,all 0.3s ease);text-decoration:none;color:var(--md-text);}
.ag-gv3-mini-daily-item:hover{border-color:var(--md-gold);}
.ag-gv3-mini-daily-xp{font-family:'Spline Sans','Inter',sans-serif;color:var(--md-gold);margin-left:2px;}

/* ── Section Separator ── */
.ag-gv3-section-sep{height:6px;background:var(--md-card-2);}

/* ── SECTION 2: FILTER BAR ── */
.ag-gv3-filter-bar{padding:12px 16px 8px;display:flex;flex-direction:column;gap:8px;
  position:sticky;top:var(--ly-header-h,50px);z-index:50;background:var(--md-bg);}
.ag-gv3-category-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.ag-gv3-category-tabs::-webkit-scrollbar{display:none;}
.ag-gv3-cat-tab{white-space:nowrap;padding:6px 14px;border-radius:var(--sq-radius-pill,999px);font-size:var(--fs-sm,11px);font-weight:700;
  border:1.5px solid var(--md-border);background:transparent;color:var(--md-text-sub);cursor:pointer;transition:var(--sq-transition,all 0.3s ease);flex-shrink:0;}
.ag-gv3-cat-tab.is-active{border-color:var(--md-gold);background:var(--md-gold-glow);color:var(--md-gold);}
.ag-gv3-tab-count{font-size:var(--fs-xxs,9px);opacity:0.6;margin-left:2px;}
.ag-gv3-sort-bar{display:flex;justify-content:space-between;align-items:center;padding:0 2px;}
.ag-gv3-sort-label{font-size:var(--fs-xs,10px);color:var(--md-text-mute);}
.ag-gv3-sort-select{background:var(--md-card);border:1px solid var(--md-border);border-radius:8px;
  padding:4px 8px;font-size:var(--fs-xs,10px);color:var(--md-text);font-family:inherit;cursor:pointer;appearance:auto;}
.ag-gv3-sort-select option{background:var(--md-card);color:var(--md-text);}
.ag-gv3-view-toggle{background:none;border:1px solid var(--md-border);border-radius:8px;padding:6px 12px;
  cursor:pointer;color:var(--md-text-sub);display:flex;align-items:center;gap:4px;font-size:var(--fs-xs,10px);white-space:nowrap;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-view-toggle:hover{border-color:var(--md-gold);color:var(--md-gold);}

/* ── SECTION 3: GOSHUIN GRID ── */
.ag-gv3-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 16px 16px;}
.ag-gv3-grid.ag-gv3-grid--2col{grid-template-columns:repeat(2,1fr);gap:14px;}
.ag-gv3-tile{background:var(--md-card);border:1.5px solid var(--md-border);border-radius:20px;
  padding:12px 8px 10px;text-align:center;cursor:pointer;transition:var(--sq-transition,all 0.3s ease);position:relative;overflow:hidden;}
.ag-gv3-tile:hover{border-color:var(--md-gold);transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.2);}
.ag-gv3-tile:active{transform:translateY(0);}
.ag-gv3-tile.is-earned{border-color:rgba(212,160,23,0.3);}
.ag-gv3-tile.is-earned::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--md-gold),transparent);}
.ag-gv3-tile.is-locked .ag-gv3-tile-stamp{opacity:0.15;filter:grayscale(1) brightness(0.5);}
.ag-gv3-tile.is-locked:hover .ag-gv3-tile-stamp{opacity:0.35;}
.ag-gv3-tile-mystery{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);font-size:28px;color:var(--md-text-mute);opacity:0;pointer-events:none;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-tile.is-locked:hover .ag-gv3-tile-mystery{opacity:1;}
.ag-gv3-tile-hint-text{font-size:var(--fs-xxs,9px);color:var(--md-text-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ag-gv3-tile-stamp{width:96px;height:96px;margin:0 auto 6px;object-fit:contain;transition:var(--sq-transition,all 0.3s ease);border-radius:14px;display:block;}
.ag-gv3-grid.ag-gv3-grid--2col .ag-gv3-tile-stamp{width:140px;height:140px;margin-bottom:10px;border-radius:18px;}
.ag-gv3-tile-name{font-size:var(--fs-xs,10px);font-weight:700;color:var(--md-text);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;}
.ag-gv3-tile-rarity{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:var(--sq-radius-pill,999px);
  font-size:8px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;}
.ag-gv3-tile-progress{width:100%;height:3px;background:var(--md-card-2);border-radius:2px;margin-top:6px;overflow:hidden;position:relative;}
.ag-gv3-tile-progress-fill{height:100%;border-radius:2px;background:var(--md-gold);transition:width 0.6s ease;}
.ag-gv3-tile-progress-fill.complete{background:var(--md-green,#22c55e);}
.ag-gv3-tile-lv{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xxs,9px);
  font-weight:700;color:var(--md-text-sub);margin-top:4px;text-align:left;}

/* ── SECTION 4: ADVENTURE HINTS ── */
.ag-gv3-adventure-section{padding:0 16px 16px;}
.ag-gv3-adventure-header{display:flex;align-items:center;justify-content:space-between;padding:12px 0;cursor:pointer;}
.ag-gv3-adventure-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-md,14px);font-weight:900;color:var(--md-text);}
.ag-gv3-adventure-toggle{transition:transform 0.3s ease;color:var(--md-text-mute);}
.ag-gv3-adventure-toggle.collapsed{transform:rotate(-90deg);}
.ag-gv3-adventure-body{overflow:hidden;transition:max-height 0.4s ease,opacity 0.3s ease;max-height:600px;opacity:1;}
.ag-gv3-adventure-body.collapsed{max-height:0;opacity:0;}
.ag-gv3-daily-card{background:var(--md-card);border:1.5px solid var(--md-border);border-radius:var(--sq-radius,12px);
  padding:14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-daily-card:hover{border-color:var(--md-gold);}
.ag-gv3-daily-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--md-gold-glow);flex-shrink:0;}
.ag-gv3-daily-info{flex:1;min-width:0;}
.ag-gv3-daily-name{font-size:var(--fs-sm,11px);font-weight:700;color:var(--md-text);}
.ag-gv3-daily-desc{font-size:var(--fs-xs,10px);color:var(--md-text-sub);margin-top:2px;}
.ag-gv3-daily-xp{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xs,10px);font-weight:700;color:var(--md-gold);}
.ag-gv3-daily-btn{padding:6px 14px;border-radius:var(--sq-radius-pill,999px);border:none;font-size:var(--fs-xs,10px);font-weight:900;
  cursor:pointer;transition:var(--sq-transition,all 0.3s ease);white-space:nowrap;text-decoration:none;display:inline-block;}
.ag-gv3-daily-btn--primary{background:var(--md-gold);color:#111;}
.ag-gv3-daily-btn--primary:hover{background:var(--md-brand-lt,#e8b84a);transform:scale(1.05);}
html[data-theme="classic-red"] .ag-gv3-daily-btn--primary{background:var(--md-brand);color:#fff;}
html[data-theme="classic-red"] .ag-gv3-daily-btn--primary:hover{background:var(--md-brand-lt);}

/* ── Recommend Card ── */
.ag-gv3-recommend-card{background:linear-gradient(135deg,var(--md-card),var(--md-card-2));
  border:1.5px solid var(--md-border);border-radius:var(--sq-radius,12px);padding:14px;margin-bottom:8px;
  display:flex;align-items:center;gap:12px;}
.ag-gv3-recommend-badge{width:44px;height:44px;object-fit:contain;flex-shrink:0;}
.ag-gv3-recommend-info{flex:1;}
.ag-gv3-recommend-label{font-size:var(--fs-xs,10px);color:var(--md-gold);font-weight:700;}
.ag-gv3-recommend-name{font-size:var(--fs-sm,11px);font-weight:700;margin-top:2px;}
.ag-gv3-recommend-hint{font-size:var(--fs-xs,10px);color:var(--md-text-sub);margin-top:2px;}
.ag-gv3-recommend-progress{width:100%;height:4px;background:var(--md-card-2);border-radius:2px;margin-top:6px;overflow:hidden;}
.ag-gv3-recommend-progress-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--md-gold),var(--md-brand-lt,#e8b84a));}

/* ── SECTION 5: RANKING ── */
.ag-gv3-ranking-section{padding:0 16px 16px;}
.ag-gv3-ranking-header{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.ag-gv3-ranking-header .material-symbols-outlined{font-size:20px;color:var(--md-gold);}
.ag-gv3-ranking-header h3{font-size:var(--fs-md,14px);font-weight:900;}
.ag-gv3-my-rank{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;
  background:var(--md-card);border:1.5px solid var(--md-border);border-radius:var(--sq-radius,12px);margin-bottom:12px;}
.ag-gv3-my-rank-num{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xl,18px);font-weight:900;color:var(--md-gold);}
.ag-gv3-my-rank-total{font-size:var(--fs-xs,10px);color:var(--md-text-mute);}
.ag-gv3-podium{display:flex;align-items:flex-end;justify-content:center;gap:8px;padding:8px 0;}
.ag-gv3-podium-item{display:flex;flex-direction:column;align-items:center;gap:4px;width:80px;}
.ag-gv3-podium-avatar{width:36px;height:36px;border-radius:50%;background:var(--md-card-2);border:2px solid var(--md-border);
  display:flex;align-items:center;justify-content:center;font-size:16px;}
.ag-gv3-podium-item:nth-child(2) .ag-gv3-podium-avatar{width:44px;height:44px;border-color:var(--md-gold);
  box-shadow:0 0 12px var(--md-gold-glow);}
.ag-gv3-podium-name{font-size:var(--fs-xxs,9px);color:var(--md-text-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70px;}
.ag-gv3-podium-medal{font-family:'Spline Sans','Inter',sans-serif;font-size:12px;font-weight:900;width:22px;height:22px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;}
.ag-gv3-podium-medal.gold{background:linear-gradient(135deg,var(--md-gold),var(--md-brand-lt,#e8b84a));box-shadow:0 2px 8px rgba(212,160,23,0.4);}
.ag-gv3-podium-medal.silver{background:linear-gradient(135deg,#8e9aaf,#b0bec5);}
.ag-gv3-podium-medal.bronze{background:linear-gradient(135deg,#a0694b,#cd7f32);}
.ag-gv3-podium-xp{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-xxs,9px);color:var(--md-text-mute);}

/* ── SOCIAL FEED ── */
.ag-gv3-feed-section{padding:0 16px 20px;}
.ag-gv3-feed-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ag-gv3-feed-header .material-symbols-outlined{font-size:18px;color:var(--md-gold);}
.ag-gv3-feed-header h3{font-size:var(--fs-md,14px);font-weight:900;}
.ag-gv3-feed-more{font-size:var(--fs-xs,10px);color:var(--md-gold);font-weight:700;text-decoration:none;display:flex;align-items:center;gap:2px;white-space:nowrap;}
.ag-gv3-feed-more:hover{text-decoration:underline;}
.ag-gv3-feed-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--md-border);}
.ag-gv3-feed-item:last-child{border-bottom:none;}
.ag-gv3-feed-avatar{width:28px;height:28px;border-radius:50%;background:var(--md-card-2);display:flex;align-items:center;
  justify-content:center;font-size:12px;flex-shrink:0;}
.ag-gv3-feed-text{font-size:var(--fs-xs,10px);color:var(--md-text-sub);flex:1;}
.ag-gv3-feed-text strong{color:var(--md-text);font-weight:700;}
.ag-gv3-badge-name{color:var(--md-gold);}
.ag-gv3-feed-time{font-size:var(--fs-xxs,9px);color:var(--md-text-mute);white-space:nowrap;}

/* ── MODAL (Bottom Sheet) ── */
.ag-gv3-modal-overlay{position:fixed;inset:0;z-index:200;background:var(--sq-overlay,rgba(0,0,0,0.6));opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;display:flex;align-items:flex-end;justify-content:center;}
.ag-gv3-modal-overlay.is-open{opacity:1;pointer-events:all;}
.ag-gv3-modal-sheet{width:100%;max-width:430px;background:var(--md-card);border-radius:20px 20px 0 0;
  padding:8px 20px 36px;transform:translateY(100%);transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  max-height:85vh;overflow-y:auto;position:relative;}
.ag-gv3-modal-overlay.is-open .ag-gv3-modal-sheet{transform:translateY(0);}
.ag-gv3-modal-handle{width:36px;height:4px;border-radius:99px;background:var(--md-text-mute);margin:0 auto 16px;opacity:0.5;}
.ag-gv3-modal-close{position:absolute;top:12px;right:16px;background:none;border:none;cursor:pointer;color:var(--md-text-mute);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-modal-close:hover{background:var(--md-card-2);}
.ag-gv3-modal-stamp{width:240px;height:240px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--md-card-2);border-radius:28px;padding:8px;border:2px solid var(--md-border);}
.ag-gv3-modal-stamp img{width:100%;height:100%;object-fit:contain;border-radius:16px;}
.ag-gv3-modal-stamp.is-locked img{opacity:0.3;filter:grayscale(1);}
.ag-gv3-modal-rarity{display:inline-block;padding:3px 12px;border-radius:var(--sq-radius-pill,999px);
  font-size:var(--fs-xxs,9px);font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.ag-gv3-modal-name{font-family:'Noto Serif JP',serif;font-size:var(--fs-xl,18px);font-weight:900;text-align:center;margin-bottom:4px;}
.ag-gv3-modal-desc{font-size:var(--fs-sm,11px);color:var(--md-text-sub);text-align:center;margin-bottom:16px;}
.ag-gv3-modal-info{background:var(--md-card-2);border-radius:var(--sq-radius,12px);padding:12px;margin-bottom:12px;}
.ag-gv3-modal-info-label{font-size:var(--fs-xs,10px);color:var(--md-text-mute);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:4px;}
.ag-gv3-modal-info-val{font-size:var(--fs-sm,11px);color:var(--md-text);}
.ag-gv3-modal-info-val strong{color:var(--md-gold);}
.ag-gv3-modal-lv{font-family:'Spline Sans','Inter',sans-serif;font-size:var(--fs-sm,11px);color:var(--md-text-sub);text-align:center;margin-bottom:8px;}
.ag-gv3-modal-bar{width:100%;height:6px;background:var(--md-card-2);border-radius:3px;overflow:hidden;margin-bottom:4px;}
.ag-gv3-modal-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--md-gold),var(--md-brand-lt,#e8b84a));transition:width 0.6s ease;}
.ag-gv3-modal-bar-fill.complete{background:var(--md-green,#22c55e);}
.ag-gv3-modal-progress-text{font-size:var(--fs-xs,10px);color:var(--md-text-sub);text-align:center;margin-bottom:16px;}
.ag-gv3-modal-cta{display:flex;justify-content:center;margin-top:12px;margin-bottom:8px;}
.ag-gv3-modal-cta-btn{padding:12px 28px;border-radius:var(--sq-radius-pill,999px);border:none;font-size:var(--fs-sm,11px);font-weight:900;
  cursor:pointer;transition:var(--sq-transition,all 0.3s ease);background:var(--md-gold);color:#111;
  display:flex;align-items:center;gap:6px;box-shadow:0 2px 12px var(--md-gold-glow);text-decoration:none;}
.ag-gv3-modal-cta-btn:hover{background:var(--md-brand-lt,#e8b84a);transform:scale(1.05);box-shadow:0 4px 20px var(--md-gold-glow);}
html[data-theme="classic-red"] .ag-gv3-modal-cta-btn{background:var(--md-brand);color:#fff;box-shadow:0 2px 12px var(--md-brand-glow);}
html[data-theme="classic-red"] .ag-gv3-modal-cta-btn:hover{background:var(--md-brand-lt);}
.ag-gv3-modal-share{display:flex;gap:8px;justify-content:center;}
.ag-gv3-modal-share-btn{padding:8px 16px;border-radius:var(--sq-radius-pill,999px);border:1.5px solid var(--md-border);
  background:transparent;color:var(--md-text-sub);font-size:var(--fs-xs,10px);font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:4px;transition:var(--sq-transition,all 0.3s ease);}
.ag-gv3-modal-share-btn:hover{border-color:var(--md-gold);color:var(--md-gold);}

/* ── Confetti (v3) ── */
.ag-gv3-confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:300;overflow:hidden;}
.ag-gv3-confetti{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0.9;animation:ag-gv3-confetti-fall 2.5s ease-in forwards;}
@keyframes ag-gv3-confetti-fall{0%{transform:translateY(-10vh) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}


@layer components {
  /* Nomilog Detail Carousel */
  .ag-nomilog-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
  }
  .ag-nomilog-carousel::-webkit-scrollbar {
    display: none;
  }
  .ag-nomilog-carousel img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
  }
  .ag-nomilog-dots {
    position: absolute;
    top: 1rem;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 10;
  }
  .ag-nomilog-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
  .ag-nomilog-dot.is-active {
    background-color: #fff;
    transform: scale(1.3);
  }
  /* === Map v5: Tooltip === */
  .ag-bs-tooltip { position: relative; }
  .ag-bs-tooltip-bubble {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.65rem;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
  .ag-bs-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.85) transparent transparent transparent;
  }
  .ag-bs-tooltip-bubble.is-show { display: block; animation: tooltipFadeIn 0.2s ease forwards; }

  @keyframes tooltipFadeIn {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }

  /* === Map v5: Coach mark === */
  .ag-oshi-coach-inline {
    display: none;
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--orange), #ff6b00);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.4rem 0.75rem;
    border-radius: 20px;
    white-space: nowrap;
    z-index: 110;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(255, 126, 34, 0.4);
    animation: bounceCoach 1.5s infinite;
  }
  .ag-oshi-coach-inline::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--orange) transparent transparent transparent;
  }
  .ag-oshi-coach-inline.is-show { display: block; }
  
  @keyframes bounceCoach {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-6px); }
  }
}

/* ─── #1477 乾杯イベントバブル ────────────────────────────── */
@layer components {
  /* 実乾杯イベント用バブル（.vbubble.ag-kanpai）
     .vbubble の既存スタイルを継承し、視覚的差別化のみ追加 */
  .vbubble.ag-kanpai {
    background: linear-gradient(135deg, rgba(255, 126, 34, 0.12), rgba(255, 200, 80, 0.15));
    border: 1px solid rgba(255, 126, 34, 0.4);
    box-shadow: 0 2px 10px rgba(255, 126, 34, 0.18);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--orange, #c84c00);
  }

  /* ━━━ 近隣チェックインカード（マップカルーセル用） ━━━ */
  .ag-checkin-nearby-card {
    position: relative;
    min-width: 240px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #d4930a 0%, #f0b429 40%, #f8bd2a 60%, #e8a317 100%);
    color: #fff;
    box-shadow:
      0 4px 20px rgba(212, 147, 10, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    cursor: pointer;
    overflow: hidden;
    animation: ag-checkin-card-entrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .ag-checkin-nearby-card:active {
    transform: scale(0.97);
    box-shadow: 0 2px 12px rgba(212, 147, 10, 0.35);
  }
  /* パルスリング — 背景に輝くアニメーション */
  .ag-checkin-nearby-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    animation: ag-checkin-card-shimmer 3s ease-in-out infinite;
    pointer-events: none;
  }
  .ag-checkin-nearby-card__header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
  }
  .ag-checkin-nearby-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
    animation: ag-checkin-icon-pulse 2s ease-in-out infinite;
  }
  .ag-checkin-nearby-card__icon .material-symbols-outlined {
    font-size: 1.125rem;
    color: #fff;
  }
  .ag-checkin-nearby-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
  }
  .ag-checkin-nearby-card__title {
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  }
  .ag-checkin-nearby-card__name {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.3;
    margin: 0.25rem 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .ag-checkin-nearby-card__dist {
    font-size: 0.6875rem;
    opacity: 0.9;
    margin-bottom: 0.5rem;
  }
  .ag-checkin-nearby-card__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: background 0.2s ease;
  }
  .ag-checkin-nearby-card:active .ag-checkin-nearby-card__cta {
    background: rgba(255, 255, 255, 0.4);
  }
  /* チェックイン済み状態 */
  .ag-checkin-nearby-card--done {
    background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
    box-shadow: 0 2px 10px rgba(107, 114, 128, 0.3);
    animation: none;
  }
  .ag-checkin-nearby-card--done::before {
    display: none;
  }
  .ag-checkin-nearby-card--done .ag-checkin-nearby-card__cta {
    background: rgba(255, 255, 255, 0.15);
  }
  /* アニメーション */
  @keyframes ag-checkin-card-entrance {
    from {
      opacity: 0;
      transform: translateY(20px) scale(0.9);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  @keyframes ag-checkin-card-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.6; }
    50% { transform: translate(5%, 5%) rotate(3deg); opacity: 1; }
  }
  @keyframes ag-checkin-icon-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }

  /* ━━━ フローティングXP通知トースト ━━━ */
  .ag-xp-toast {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #d4930a, #f0b429);
    color: #fff;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 8px 32px rgba(212, 147, 10, 0.5), 0 0 0 2px rgba(255, 255, 255, 0.2) inset;
    animation: ag-xp-toast-anim 2.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
  }
  .ag-xp-toast__icon {
    font-size: 1.5rem;
  }
  .ag-xp-toast__text {
    letter-spacing: 0.05em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  @keyframes ag-xp-toast-anim {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
    25% { transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; transform: translate(-50%, -80%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -120%) scale(0.8); }
  }

  /* ━━━ エラー用トースト ━━━ */
  .ag-error-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    z-index: 9999;
    background: rgba(30, 30, 30, 0.9);
    color: #fff;
    padding: 0.8rem 1.25rem;
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: ag-error-toast-anim 3.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
  }
  @keyframes ag-error-toast-anim {
    0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
    10% { opacity: 1; transform: translateX(-50%) translateY(0); }
    90% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  }

  /* #1511 現在地マーカーの脈動アニメーション */
  .ag-geolocation-dot {
    animation: ag-geolocation-pulse 2s ease-in-out infinite;
  }
  @keyframes ag-geolocation-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  /* ━━━ #1513 マップ検索モーダル v2 ━━━ */
  .ag-search-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: var(--sq-bg, #ffffff);
    display: flex;
    flex-direction: column;
  }
  .ag-search-modal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--sq-border, #e5e7eb);
    background: var(--sq-bg, #ffffff);
    flex-shrink: 0;
  }
  .ag-search-modal-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1rem;
    font-weight: 500;
    color: var(--sq-text, #1a1a1a);
    background: transparent;
    padding: 0.5rem 0;
  }
  .ag-search-modal-input::placeholder {
    color: var(--sq-text-sub, #999999);
  }
  .ag-search-modal-close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: none;
    background: var(--sq-bg-sub, #f3f4f6);
    color: var(--sq-text-sub, #666666);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s;
  }
  .ag-search-modal-close:active {
    background: var(--sq-border, #e5e7eb);
  }
  .ag-search-modal-results {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .ag-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.15s;
  }
  .ag-search-result-item:active {
    background: var(--sq-bg-sub, #f3f4f6);
  }
  .ag-search-result-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--sq-bg-sub, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sq-text-sub, #666666);
  }
  .ag-search-result-icon .material-symbols-outlined {
    font-size: 1.25rem;
  }
  .ag-search-result-text {
    flex: 1;
    min-width: 0;
  }
  .ag-search-result-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sq-text, #1a1a1a);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ag-search-result-subtitle {
    font-size: 0.75rem;
    color: var(--sq-text-sub, #999999);
    margin-top: 0.125rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ag-search-result-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--sq-text-sub, #999999);
    font-size: 0.875rem;
  }

  /* ═══════════════════════════════════════════════════════
     #1521 SNS Share Modal
     ═══════════════════════════════════════════════════════ */
  .ag-sns-share__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }
  .ag-sns-share__overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  .ag-sns-share__card {
    background: white;
    width: 100%;
    max-width: 26rem;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(20px);
    transition: transform 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  .ag-sns-share__overlay.is-open .ag-sns-share__card {
    transform: translateY(0);
  }
  .ag-sns-share__header {
    background: var(--sq-red, #8a0303);
    border-bottom: 4px solid var(--sq-gold, #d69e2e);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .ag-sns-share__check {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: white;
    color: var(--sq-red, #8a0303);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  .ag-sns-share__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
  }
  .ag-sns-share__subtitle {
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.9);
    margin: 0;
  }
  .ag-sns-share__body {
    padding: 1.5rem;
    background: var(--sq-bg-sub, #f8fafc);
  }
  .ag-sns-share__buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .ag-sns-share__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-weight: 700;
    font-size: 0.9375rem;
    transition: background 200ms;
    border: none;
    cursor: pointer;
    text-decoration: none;
  }
  .ag-sns-share__btn--fb {
    background: #1877F2;
    color: white;
  }
  .ag-sns-share__btn--x {
    background: #000;
    color: white;
  }
  .ag-sns-share__btn--native {
    background: white;
    color: var(--sq-text, #334155);
    border: 1px solid #cbd5e1;
  }
  @media (hover: hover) {
    .ag-sns-share__btn--fb:hover { background: #166fe5; color: white; }
    .ag-sns-share__btn--x:hover { background: #1e293b; color: white; }
    .ag-sns-share__btn--native:hover { background: #f1f5f9; }
  }
  .ag-sns-share__preview-label {
    font-size: 0.75rem;
    color: #64748b;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.5rem;
    margin: 0 0 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .ag-sns-share__preview-hint--x {
    color: #334155;
  }
  .ag-sns-share__preview-hint--fb {
    font-weight: 400;
    font-size: 0.7rem;
    color: #94a3b8;
  }
  .ag-sns-share__preview {
    background: white;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
  }
  .ag-sns-share__photo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    aspect-ratio: 16/9;
    position: relative;
    background: #cbd5e1;
  }
  .ag-sns-share__photo-grid > div {
    position: relative;
    overflow: hidden;
  }
  .ag-sns-share__photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ag-sns-share__photo-sub {
    display: grid !important;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
  }
  .ag-sns-share__no-photo {
    aspect-ratio: 16/9;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ag-sns-share__no-photo img {
    max-height: 80%;
    max-width: 80%;
    object-fit: contain;
  }
  .ag-sns-share__rank {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255,255,255,0.95);
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    z-index: 10;
    color: var(--sq-text, #334155);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  .ag-sns-share__info {
    background: linear-gradient(to top, rgba(15,23,42,0.9), rgba(15,23,42,0.7), transparent);
    padding: 1rem;
    margin-top: -3.75rem;
    position: relative;
    z-index: 20;
    color: white;
  }
  .ag-sns-share__chip--context {
    background: rgba(51,65,85,0.8);
    border: 1px solid #475569;
    font-size: 0.625rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    display: inline-block;
    margin-bottom: 0.25rem;
  }
  .ag-sns-share__sake-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  .ag-sns-share__sake-type {
    font-size: 0.75rem;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
  }
  .ag-sns-share__excerpt {
    background: rgba(30,41,59,0.7);
    border-left: 2px solid #94a3b8;
    padding: 0.375rem 0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 0 0.25rem 0.25rem 0;
  }
  .ag-sns-share__excerpt p {
    font-size: 0.6875rem;
    color: #f1f5f9;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ag-sns-share__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
  }
  .ag-sns-share__chip--taste, .ag-sns-share__chip--food, .ag-sns-share__chip--mood {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 700;
  }
  .ag-sns-share__chip--taste { background: #b91c1c; color: white; }
  .ag-sns-share__chip--food { background: #1d4ed8; color: white; }
  .ag-sns-share__chip--mood { background: rgba(51,65,85,0.8); border: 1px solid #475569; color: white; }
  
  .ag-sns-share__footer {
    border-top: 1px solid rgba(148,163,184,0.3);
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.625rem;
    color: #cbd5e1;
  }
  .ag-sns-share__footer > span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .ag-sns-share__footer img {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
  }
  .ag-sns-share__lv {
    color: var(--sq-gold, #d69e2e);
    font-weight: 700;
  }
  .ag-sns-share__home-wrap {
    text-align: center;
  }
  .ag-sns-share__home {
    color: var(--sq-red, #8a0303);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
  }
}