/* [v1660] External Fonts - MUST BE AT TOP */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700&family=Noto+Sans+KR:wght@400;700&display=swap');

/* [v1660] Local Embedded Fonts - Fixes Android rendering issues */
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/NotoSansKR-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/NotoSansKR-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/Teko-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Teko';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/Teko-Bold.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/Inter-Regular.ttf') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/Inter-Bold.ttf') format('truetype');
    font-display: swap;
}

.hidden {
    display: none;
}

/* ==========================================
   CSS Variables - Production Build
   ========================================== */
:root {
    /* Card Dimensions */
    --card-width: 320px;
    --card-height: 440px;
    --card-radius: 24px;

    /* ===== Background Colors (Refactored) ===== */
    --bg-primary: #222328;
    --bg-secondary: #1a1a1a;
    --bg-gradient-center: #3a3a3a;
    --bg-gradient-edge: #1f1f1f;

    /* ===== UI Colors ===== */
    --color-border: #333;
    --color-border-light: #444;
    --color-border-dark: #555;
    --color-text-muted: #666;
    --key-color: #20d189;
    /* [v41] Emerald Green Key Color */
    --color-accent: var(--key-color);
    --color-gold: var(--key-color);

    /* Default Template Assets (None) */
    --template-frame: none;
    --template-back: none;
    --template-mask: none;
    --template-sparkle: none;

    /* Typography */
    --template-font: 'Teko', 'Noto Serif KR', 'Pretendard', 'Noto Sans KR', serif;
    --template-color: var(--key-color);
    --template-blend-mode: hard-light;
}

/* Preserve Template Fonts from System Overrides */
/* NOTE: removed to allow Editor inline font-family overrides */
.card,
.card__name,
.card__edition,
.card__grade,
.card__back-title,
.card__back-body,
.card__back-info,
.card__label,
.card__info {
    font-family: var(--template-font, 'Teko', sans-serif);
}

/* ==========================================
   v1.40: Dual-Mode Detail Modal Support
   Side cards are simplified to just thumbnails for stability.
   ========================================== */
.side-card-mode {
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
    position: relative;
    pointer-events: none; /* Side cards don't need interaction */
    box-shadow: none; /* Let parent .card handle shadow */
}

.side-card-mode .card__art.visible {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: none;
    left: 0;
    top: 0;
}

.card.side-card-mode:hover {
    transform: none; /* No tilt for side cards */
}

/* FIXED: Lock HTML for Mobile App Feel */
html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;

    /* [v26] Hide Scrollbars Globally */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

/* [v26] Hide Scrollbars Chrome/Safari */
*::-webkit-scrollbar {
    display: none;
}

/* [v26] Global App-like Tweak: Remove blue tap highlights and prevent accidental selection */
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

body {
    user-select: none;
    -webkit-user-select: none;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    touch-action: pan-y;
}

input,
textarea,
select,
button,
[contenteditable="true"],
.selectable {
    user-select: text;
    -webkit-user-select: text;
    font-family: inherit;
}

/* ==========================================
   Zero Layers Thumbnail Support
   ========================================== */
.card-thumb.baked {
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    overflow: hidden;
    position: relative;
    background: #000;
}

.baked-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================
   v3600/v3650: Mobile Export Safe-Mode
   Bypasses Android/iOS WebView Canvas bugs by simplifying blend modes and flattening 3D Z-index
   ========================================== */
.mobile-export-safe .card__shine,
.mobile-export-safe .holo,
.mobile-export-safe .card__glare,
.mobile-export-safe .card__back-glare,
.mobile-export-safe .card__coating,
.mobile-export-safe .card__back-coating,
.mobile-export-safe .card__shine-layer2 {
    /* Flatten Z-axis 3D translation which breaks html-to-image on mobile */
    transform: translateZ(0);
    /* [v4287] Restoration: Removed 'screen' forced downgrade to preserve user-tuned Glossy Light intensity */
    /* mix-blend-mode: screen; */
    /* v3650: Overbearing opacity:0.5 removed as it ruined opacity:0 base templates */
}

/* Controls Section */
.controls {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 10;
    padding-bottom: 0px;
}

/* Main Inputs Container */
.text-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Compact spacing */
    outline: none;
    width: 100%;
    max-width: 300px;
    /* Slightly narrower for internal padding look */
    margin: 0 auto;
    padding: 5px 0;
}

select {
    background: #333;
    border: 1px solid #555;
    color: white;
    padding: 5px;
    border-radius: 4px;
    height: 38px;
    width: 80px;
    /* Specific width for dropdown */
    font-size: 14px;
}

.input-group {
    display: flex;
    flex-direction: row;
    /* Horizontal */
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    border-top: 1px solid #333;
    /* Unified 1px Thickness */
    border-bottom: none;
    padding-top: 5px;
    padding-bottom: 8px;
    margin-bottom: 0;
}

/* Add bottom border to the last visible input group to close the grid */
.input-group:last-child {
    border-bottom: 1px solid #333;
}

/* ALL input-groups in front and back inputs get bottom border */
#frontInputs .input-group,
#backInputs .input-group {
    border-bottom: 1px solid #333;
}

/* Remove border-top from subsequent items leading with border-bottom */
#frontInputs .input-group+.input-group,
#backInputs .input-group+.input-group,
#labelModeFields .input-group+.input-group,
#textModeFields .input-group+.input-group {
    border-top: none;
}

.input-label {
    width: 30%;
    /* Reverted to 30% */
    color: #eee;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 0;
    font-family: 'Noto Sans KR', sans-serif;
    padding-right: 10px;
}

.text-inputs input,
.text-inputs textarea,
.text-inputs select {
    background: transparent;
    border: none;
    color: #4CAF50;
    padding: 0;
    padding-left: 0;
    font-size: 15px;
    flex: 1;
    /* Take remaining space */
    width: auto;
    /* Override fixed width */
    font-family: 'Noto Sans KR', sans-serif;
    text-align: left;
    font-weight: 500;
    outline: none;
}

.text-inputs input:focus,
.text-inputs textarea:focus,
.text-inputs select:focus {
    outline: none;
    color: #4CAF50;
}

.text-inputs input::placeholder,
.text-inputs textarea::placeholder {
    color: #454b53;
}

/* [NEW] Re-drop button placement refinement */
#refreshLogoBtn.refresh-btn {
    width: auto;
    height: auto;
    padding: 6px 12px;
    margin: 0;
    font-size: 12px;
    background: #444;
    border: 1px solid #555;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    margin-left: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}


/* Sticker Mode Button (Square Icon) */
#stickerModeBtn {
    flex: 0 0 auto;
    width: 44px;
    /* Square */
    padding: 0;
    /* Override padding */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: #333;
    border: 1px solid #555;
    color: var(--key-color);
    /* Key Color Smiley */
    border-radius: 6px;
    margin-right: 4px;
    /* Extra gap from flex gap */
    transition: background 0.2s, transform 0.1s;
}

#stickerModeBtn:hover {
    background: #444;
    transform: scale(1.05);
}

#stickerModeBtn:active {
    transform: scale(0.95);
}


#refreshLogoBtn.refresh-btn:hover {
    background: #555;
}

/* --- Sticker Mode Panel --- */
.sticker-panel {
    position: fixed;
    /* top set dynamically by JS; bottom flush to screen edge */
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: none;
    z-index: 10001;
    background: rgba(10, 10, 10, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px 20px 0 0;   /* 상단만 둥글게 — 하단은 화면 끝까지 */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin: 0;
    box-sizing: border-box;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.7);
    /* 팔레트 콘텐츠가 홈 인디케이터와 겹치지 않도록 */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    visibility: visible;
    pointer-events: auto;
}

.sticker-header {
    position: relative;
    display: flex;
    justify-content: flex-start; /* [v800] Left align */
    align-items: center;
    padding: 5px 15px; /* [v800] Reduced height by ~20% */
    background: #252525;
    border-bottom: 1px solid #333;
}

.sticker-close-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #20d189;
    /* Neon Green */
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.sticker-close-btn:hover {
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

.sticker-title {
    color: #888;
    /* More subtle */
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sticker-palette {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 12px;
    flex: 1;
    overflow-y: auto;
    touch-action: pan-y;
}

.sticker-palette .sticker-item {
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    padding: 5px;
    border-radius: 4px;
    transition: background 0.2s, transform 0.1s;
    user-select: none;
}

.sticker-palette .sticker-item:hover {
    background: #333;
    transform: scale(1.1);
}

.sticker-palette .sticker-item:active {
    transform: scale(0.9);
}

/* Remove legacy IDs that might interfere */
#refreshLogoBtn {
    margin-top: 0;
}

/* ... (upload btn code) ... */

/* Card Container (3D Space) */
.card {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    transform-style: preserve-3d;
    /* Enable 3D space */
    transition: transform 0.1s;
    /* Smooth movement for tilt, 0.6s for flip will be handled in JS or specific class if needed */
    /* PERFORMANCE: Remove global will-change to save memory */
    /* will-change: transform; */

    border-radius: var(--card-radius);
    /* PERFORMANCE: Reduce shadow blur radius */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    /* Indicate interaction */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Default background for empty template */
    background-color: #2a2a2a;

    /* NOTE: Do NOT use overflow:hidden here - it breaks 3D flip transform */
}

/* Enable hardware acceleration only when needed */
.card:hover,
.card.is-flipping {
    will-change: transform;
}

.card img {
    pointer-events: none;
    -webkit-user-drag: none;
}

/* Hide images with empty src to prevent broken icon */
img[src=""],
img:not([src]) {
    display: none;
}

/* Slower transition for the flip action */
.card.is-flipping {
    transition: transform 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Elastic-like smooth ease */
    pointer-events: none;
    /* Lock card */
}

/* Indicators Removed */
/* .carousel-indicators { display: none; } */

/* Mobile Adjustments for 3D Carousel */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
    }

    /* Bring side cards closer on mobile so they are visible */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-40%) translateZ(-150px) rotateY(15deg) scale(0.9);
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(40%) translateZ(-150px) rotateY(-15deg) scale(0.9);
    }

    /* Ensure touches pass through if needed, but we want click */
    .carousel-side {
        opacity: 0.6;
        /* More visible on mobile */
    }
}

/* --- Toast System --- */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30000; /* [v1.32] 최상위 알림 레이어 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Allow clicking through container */
}

.toast {
    background: rgba(30, 30, 30, 0.95);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: inherit;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 0.5px;
    border: 1px solid #444;

    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease-out;
    pointer-events: auto;
    /* Allow clicking toast (e.g. to dismiss if we added X) */
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-success {
    border-color: #69ce8f;
    color: #69ce8f;
}

.toast-error {
    border-color: #f44336;
    color: #f44336;
}

.toast-info {
    border-color: #888888;
    color: white;
}

.toast-icon {
    font-size: 20px;
}

.toast-message {
    color: white;
}


/* --- Custom Modal System --- */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.8);
    z-index: 11000; /* Above Detail Modal */
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* NON-BLOCKING when hidden */
    transition: opacity 0.3s, visibility 0.3s;
}

.custom-modal-overlay.active,
.custom-modal-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto; /* ENABLES CLICKS only when shown */
    z-index: 2000000; /* Forces system modals above EVERYTHING including fullscreen detail view */
}

/* ==========================================
   Card Status Overlays (Sold Out / Share Stopped)
   Only visible to guests before saving.
   ========================================== */
.card__sold-out-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* Dark semi-transparent background */
    z-index: 5000; /* Above everything except stickers and info */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--card-radius);
    pointer-events: none; /* Let clicks pass through if needed, though usually blocked by actions */
    overflow: hidden;
    backdrop-filter: blur(2px);
    transition: opacity 0.3s ease;
}

.card__sold-out-banner {
    width: 150%; /* Over-extend for diagonal */
    background: linear-gradient(
        45deg,
        #ff0000, 
        #ff7f00, 
        #ffff00, 
        #00ff00, 
        #0000ff, 
        #4b0082, 
        #8b00ff
    );
    color: white;
    font-family: inherit;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: rotate(-30deg);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    border: 3px solid rgba(255,255,255,0.3);
    border-left: none;
    border-right: none;
}

.card__sold-out-overlay.share-stopped .card__sold-out-banner {
    background: linear-gradient(45deg, #444, #666, #444);
    content: "SHARE STOPPED";
}

.card.is-sold-out .card__front {
    filter: grayscale(0.5);
}

/* Legacy detail-modal styles removed to prevent box-shadow and border leakage in fullscreen mode */

.custom-modal-overlay.visible .custom-modal {
    transform: scale(1);
    width: 85%;
    max-width: 256px;
    padding: 0;
    border-radius: 16px;
}

.custom-modal-content {
    padding: 24px;
    text-align: center;
}

.custom-modal-content h3 {
    margin: 0 0 10px 0;
    color: var(--key-color);
    font-size: 24px;
}

.custom-modal-content p {
    color: #ccc;
    font-size: 18px;
    margin: 0;
    font-family: sans-serif;
    /* Readable body text */
}

.custom-modal-actions {
    display: flex;
    border-top: 1px solid #333;
    overflow: hidden; /* [FIX] Prevent sub-pixel gaps at corners */
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.modal-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px;
    color: white;
    font-family: inherit;
    font-weight: 500;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.1s;
    /* [FIX] Strong misalignment prevention: extend background by 1px */
    margin: 0 -1px;
    position: relative;
    outline: none;
    z-index: 1;
}

.modal-btn:active, .modal-btn:hover {
    z-index: 5; /* Cover adjacent borders when active/hovered */
}

.modal-btn:active {
    /* [FIX] Prevent internal ghost lines by disabling scaling/box-shadow on press */
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
}

.modal-btn:hover {
    background: #333;
}

.modal-btn.confirm {
    border-left: 1px solid #333;
    color: #4CAF50;
    font-weight: bold;
}

.modal-btn.cancel {
    color: #888;
}

.modal-btn.cancel:hover {
    color: #fff;
}

/* --- Tutorial Modal System (Final Refinement) --- */
.tutorial-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 20000;
    display: none;
    flex-direction: column;
    justify-content: center; /* [v1659] Restore vertical center */
    align-items: center; /* [v1659] Restore horizontal center */
    backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow-y: auto;
    padding: 40px 0; /* [v1659] Protective padding for scrollable area */
}

.tutorial-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

.tutorial-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 316px; /* [v1658] 10% reduction from 352px */
    width: 81%; /* [v1658] 10% reduction from 90% */
    height: auto;
    margin: auto;
    /* Ensure centering */
    animation: tutorialBounce 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.tutorial-modal {
    position: relative;
    width: 100%;
    aspect-ratio: 440 / 700;
    background: transparent;
    border-radius: 20px;
    /* Reduced radius */
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
}

@keyframes tutorialBounce {
    0% {
        transform: scale(0.8) translateY(20px);
        opacity: 0;
    }

    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

/* Close Button (X) - Reduced 30% more & Right-aligned */
.tutorial-close {
    all: unset;
    position: absolute;
    top: 8px;
    right: 22px;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    border: 1.5px solid var(--key-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--key-color);
    background: transparent;
    cursor: pointer;
    z-index: 100;
    font-size: 14px;
    box-sizing: border-box;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    flex: none;
    margin: 0;
    padding: 0;
}

.tutorial-close:hover {
    background: var(--key-color);
    color: #000;
    transform: rotate(90deg) scale(1.1);
}

/* Slider Container */
.tutorial-content {
    flex: 1;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.tutorial-slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s cubic-bezier(0.45, 0, 0.55, 1);
}

.tutorial-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
}

.tutorial-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* [v1654] Withdraw Membership Link Style */
.btn-withdraw-link {
    background: none;
    border: none;
    color: #888;
    text-decoration: underline;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
    font-family: 'Noto Sans KR', sans-serif;
    transition: color 0.2s ease;
}

.btn-withdraw-link:hover {
    color: #bbb;
}

.btn-withdraw-link:active {
    color: #ff4444;
    text-decoration: underline;
}

/* Navigation Dots - Reduced 30% more */
.tutorial-nav {
    margin-top: 18px;
    /* ~30% reduction from 24px */
    display: flex;
    gap: 8px;
    /* ~30% reduction from 12px */
    z-index: 10;
}

.tutorial-dot {
    width: 7px;
    /* ~30% reduction from 10px */
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s;
}

.tutorial-dot.active {
    background: var(--key-color);
    transform: scale(1.3);
    box-shadow: 0 0 10px var(--key-color);
}

/* --- Group New Dot (v107) - Kept for reference but hidden --- */
.group-new-dot {
    display: none;
}



/* Lock Scene during flip to prevent jitter from mousemove/leave */
.scene.flipping-lock {
    pointer-events: none;
}

/* Common Face Styles */
.card__front,
.card__back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--card-radius);
    backface-visibility: hidden;
    /* Hide back when rotated */
    -webkit-backface-visibility: hidden;
    overflow: hidden;

    /* Mask for transparent cutouts (e.g. ticket notches) */
    -webkit-mask-image: var(--card-shape-mask, none);
    mask-image: var(--card-shape-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    /* SAFARI FIX: Force clipping when parent has preserve-3d */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    /* [v110] translateZ moved to specific face classes to prevent z-fighting */

    transform-style: flat;
    /* [v26] Explicitly flat faces to stabilize compositing */

    /* [v26] Isolate blending per face to preserve parent's 3D stacking context */
    isolation: isolate;
}

/* Front Face */
.card__front {
    z-index: 2;
    transform: translateZ(1px);
    /* [v110] Push front forward to fix z-fighting flicker */
    background-image: var(--template-back);
    /* Fill with Card Back texture */
    background-size: cover;
    background-position: center;
    background-color: var(--template-back-bg, #1f1f1f);
    /* Fallback */
    clip-path: inset(0 round var(--card-radius, 24px));
}

/* Back Face */
/* Back Face */
.card__back {
    transform: rotateY(180deg) translateZ(1px);
    /* [v110] Push back with Z-offset to fix z-fighting flicker */
    /* Initially flipped */
    background-image: var(--template-back);
    background-size: cover;
    background-position: center;
    background-color: var(--template-back-bg, #1f1f1f);
    overflow: hidden;
    /* Ensure blurred image doesn't leak */
}

/* Dynamic Blurred Background */
.card__back-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--template-back);
    /* Default Image */
    background-size: cover;
    background-position: center;
    /* Background color for notch areas - controlled by Transparent Background toggle */
    background-color: var(--template-back-bg, #1f1f1f);
    /* Dynamic Filter Chain */
    filter: blur(var(--back-blur, 10px)) brightness(var(--back-brightness, 50%)) grayscale(var(--back-grayscale, 0%)) var(--back-filter-url, opacity(1));
    transform: scale(1.0) translateZ(1px);
    z-index: 1;
    transition: background-image 0.3s;

    /* FIX: Rounded corners for templates with shaped cards */
    border-radius: var(--card-radius, 16px);
}

/* Halftone Effect Overlay */
.card__back-blur.fx-halftone {
    filter: grayscale(100%) contrast(150%) var(--back-filter-url, opacity(1));
}

.card__back-blur.fx-halftone::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dot Pattern */
    background: radial-gradient(circle, #000 2px, transparent 2.5px);
    background-size: 8px 8px;
    mix-blend-mode: hard-light;
    opacity: 0.8;
    pointer-events: none;
}

/* Golden Frame Overlay */
.card__back-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--template-back);
    background-size: cover;
    background-position: center;
    mix-blend-mode: var(--back-mask-blend, normal);
    z-index: 2;
    transform: translateZ(2px);
    /* NEW: User toggle for hiding template background */
    opacity: var(--template-back-opacity, 1);

    /* FIX: Rounded corners */
    border-radius: var(--card-radius, 16px);
}

.card__back-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Use Holo Gradient instead of Template Back for the SHINE effect */
    background-image: var(--holo-gradient, linear-gradient(115deg, transparent 25%, rgba(255, 0, 128, 0.7) 40%, rgba(0, 255, 255, 0.7) 45%, rgba(255, 215, 0, 0.7) 50%, transparent 60%));
    /* Fixed: Use --holo-scale for hybrid scaling logic (Tiling vs Calc) */
    background-size: var(--holo-scale, 200%);

    /* Dynamic Tilt Position */
    background-position: calc(var(--holo-pos-x, 50) * 1%) calc(var(--holo-pos-y, 50) * 1%);

    /* Ensure repeats work for Tiling Mode */
    background-repeat: repeat;

    mix-blend-mode: color-dodge;
    filter: brightness(1.1) contrast(1.1);
    z-index: 3;
    transform: translateZ(3px);
    /* Lift above frame/blur */
    pointer-events: none;

    /* FIX: Rounded corners */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* Gravity Logo Container */
.card__back-logo {
    position: absolute;
    width: 90px;
    height: 90px;
    top: 50%;
    left: 50%;
    /* Perfectly centered 90x90 box */
    z-index: 2800;
    transform: translate(-50%, -50%) translateZ(4px);
    pointer-events: none;
    mix-blend-mode: multiply;
    /* [v1.35] Multiply blend: White text becomes transparent windows to the card back */
}

/* Corrected Logic for Text Elements */

.card__name {
    position: absolute;
    bottom: 24px;
    left: 28px;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    line-height: 1;
    z-index: 10;
    transform: translateZ(5px);
    /* Auto-fit text support */
    max-width: calc(100% - 56px);
    white-space: nowrap;
    overflow: visible; /* [KO-SHADOW FIX] 한글 하단 그림자 클리핑 방지 — padding 없이 overflow만 */
}



.file-upload-btn {
    background: #333;
    padding: 10px 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    border: 1px solid #555;
    transition: background 0.2s;
    display: inline-block;
    color: white;
    font-family: sans-serif;
}

.file-upload-btn:hover {
    background: #444;
}

.file-upload-btn input {
    display: none;
}

.scene,
.side-card-scene {
    perspective: 1000px;
}

/* Duplicate .card definition removed - consolidated with main .card at line 119 */

.card__front {
    width: 100%;
    height: 100%;
    /* border-radius: var(--card-radius); */
    /* [v126 FIX] overflow: hidden + border-radius triggers iOS backdrop-filter bug. 
       Rely on clip-path (line 713) and parent .card rounding instead. */
    overflow: visible;
    position: relative;
    background: transparent;
    /* Transparent so frame shows through when no image */
    isolation: isolate;
    /* [v23] Isolate blending to prevent cross-container artifacts */
}

/* Glassmorphism Frame Wrapper - Creates frosted glass effect on frame only */
.card__frame-glass {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    /* Frame layer above art */
    pointer-events: none;

    /* Glassmorphism Effect */
    backdrop-filter: blur(var(--frame-glass-blur, 0px));
    -webkit-backdrop-filter: blur(var(--frame-glass-blur, 0px));

    /* [v126 FIX] Force discrete GPU layer for iOS stability with backdrop-filter */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: backdrop-filter;

    /* Frosted background tint */
    background: rgba(255, 255, 255, var(--frame-glass-opacity, 0));

    /* Mask - Blur only shows where frame is opaque */
    -webkit-mask-image: var(--template-frame, none);
    mask-image: var(--template-frame, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.card__frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 3;
    /* Frame sits ON TOP of glass effect (z-index 2) */
    pointer-events: none;
}

/* Art Container - Holds the images and masks overflow */
.card__art-container {
    position: absolute;
    /* Centered positioning with variable size */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--art-area-width, 100%);
    height: var(--art-area-height, 100%);

    border-radius: var(--card-radius, 16px);
    /* Matches Card Radius */
    overflow: hidden;
    z-index: 1;
    /* Behind Frame (z-index 2) */
    pointer-events: none;
    /* Default: click through to card (for tilt) */

    /* [v29] Mask applied directly to art container to prevent stickers from being clipped */
    -webkit-mask-image: var(--card-shape-mask, none);
    mask-image: var(--card-shape-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Edit Mode Active Class */
.card__art-container.interactive {
    pointer-events: auto;
    touch-action: none;
    /* [FIX] Prevent scroll interventions during drag/pinch */
    /* Edit Mode Grid Removed from here - moved to Body */
}

.card__art-container.interactive:active {
    cursor: grabbing;
}

/* Global Edit Mode Grid */
body.edit-mode-grid::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 8px 8px;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    pointer-events: none;
    z-index: 1;
}

/* Main Art & Overlay - Unified Positioning */
.card__grade,
.card__edition,
.card__label {
    position: absolute;
    z-index: 2100;
    white-space: nowrap;
    overflow: visible; /* [KO-SHADOW FIX] 한글 하단 그림자 클리핑 방지 */
    /* Required for autoFitText */
    /* Must beat z-index 2000 (sticker) */
}


/* Ensure masks work on mobile thumbnails */
.card-thumb .card__front {
    -webkit-mask-image: var(--card-shape-mask, none);
    mask-image: var(--card-shape-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.card__art {
    position: absolute;
    top: 50%;
    left: 50%;
    /* [FIX] Use flexible width (auto) and min-width: 100% to ensure landscape photos 
       maintain their real aspect ratio for panning/offsetting. 
       Fixed width: 100% caused left-side gaps when images were shifted. */
    height: 100%;
    width: auto;
    min-width: 100%;

    /* Transform is managed by JS, but start centered */
    transform: translate(-50%, -50%) translateZ(0);
    /* [Mobile Fix] Hardware Acceleration & Backface Hiding */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    /* will-change: transform; managed by JS */
    /* Hint for browser */
    transform-origin: center center;

    object-fit: cover;
    /* Fallback for safe rendering */
    transition: opacity 0.5s;
    /* Keep transition, remove transform transition for smooth Drag */

    /* Sharper image rendering - prevent subpixel blur */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* [v125] Improve color quality: subtly boost contrast and saturation to fix "washed-out" look */
    filter: contrast(1.1) saturate(1.3);
}

.card__art {
    opacity: 0;
    z-index: 1;
    /* Relative to container */
}

.card__art.visible {
    opacity: 1;
}


/*
   Holographic Foil Layer
   Mixed with 'color-dodge', 'overlay', 'hard-light' or 'soft-light'
*/
.card__shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Moved below stickers and text */
    pointer-events: none;

    /*
       THE SOLUTION:
       Background is either the Rainbow Gradient OR a Custom Map Image.
       The Texture is applied via MASK, utilizing Luminance (Black=Hide, White=Show).
    */
    background-image: var(--holo-bg-image, var(--holo-gradient, linear-gradient(115deg, transparent 25%, rgba(255, 0, 128, 0.7) 40%, rgba(0, 255, 255, 0.7) 45%, rgba(255, 215, 0, 0.7) 50%, transparent 60%)));
    background-size: var(--holo-scale, 200%);
    background-position: calc(var(--holo-pos-x, 50) * 1%) calc(var(--holo-pos-y, 50) * 1%);
    background-repeat: repeat;
    /* Ensure pattern tiles when scaled down */

    /* MASKING MAGIC - Simplified in v25 */
    /* Only 2 masks here instead of 3 (Shape mask moved to parent) */
    -webkit-mask-image: var(--template-mask), var(--holo-mask-texture, linear-gradient(#fff, #fff));
    mask-image: var(--template-mask), var(--holo-mask-texture, linear-gradient(#fff, #fff));

    -webkit-mask-size: 100% 100%, var(--holo-mask-size, cover);
    mask-size: 100% 100%, var(--holo-mask-size, cover);

    -webkit-mask-repeat: no-repeat, var(--holo-mask-repeat, repeat);
    mask-repeat: no-repeat, var(--holo-mask-repeat, repeat);

    /* Composition: Simplified for Blink engine */
    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    /* Mask Mode: Template=Alpha, Texture=Luminance */
    -webkit-mask-mode: alpha, luminance;
    mask-mode: alpha, luminance;

    /* Blend Mode for the layer vs Card */
    mix-blend-mode: var(--holo-blend-mode, color-dodge);

    /* Opacity */
    opacity: var(--holo-opacity, 0.6);

    /* Filter: Boost Contrast to remove 'Haze' and make sparkles pop */
    filter: brightness(1.2) contrast(1.5);
    /* Z-INDEX BOOST: User reported hiding issues. Ensure it stays ON TOP */
    z-index: 2600;

    /* OPTIMIZED FIX: Prevent Front Shine from bleeding to Back Face */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 5px);
    /* [v26] Force GPU with translate3d */
    /* will-change: background-position, opacity; managed by JS */

    /* FIX: Rounded corners to match card shape */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* Common fix for all overlay layers to prevent back-face visibility issues */
.card__glare,
.card__coating {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 9px);
    /* will-change: background-position, opacity; managed by JS */
}

.card__shine-layer2 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 7px);
    /* will-change: background-position, opacity; managed by JS */
}

/* --- HOLOGRAM LAYER 2 (Depth/Parallax) --- */
.card__shine-layer2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Same level, blends with Layer 1 */
    /* Moved below stickers and text */
    z-index: 11;
    pointer-events: none;

    /* Independent Variables */
    /* Fallback to Layer 1's gradient if Layer 2 is unset, effectively doubling it until changed */
    /* Independent Variables: No fallback to Layer 1 */
    /* Independent Variables: No fallback to Layer 1 */
    background-image: var(--holo2-bg-image, var(--holo2-gradient, none));
    background-size: var(--holo2-scale, 200%);
    background-repeat: repeat;
    /* Ensure pattern tiles */

    /* Position Logic: Static Offset + Parallax Movement */
    /* --parallax-x/y are set by JS during tilt (-50% to 50% range typically) */
    /* Note: This is overridden by JS during mouse move, but provides initial position */
    background-position: calc(var(--holo2-pos-x, 50) * 1%) calc(var(--holo2-pos-y, 50) * 1%);

    /* Masking: Same Texture Logic, distinct appearance */
    /* USER FIX: Allow Layer 2 to have its OWN mask (e.g., Full Card) instead of being clipped by Template Frame Mask */
    /* NUCLEAR FALLBACK: If --holo2-mask is missing, default to NONE (Visible), not Template Mask (Frame) */
    /* Masking: Independent. Default texture to visible (white) so valid gradients show up if Opacity > 0 */
    /* Added: Card Shape Mask for ticket-style notches */
    -webkit-mask-image: var(--card-shape-mask, none), var(--holo2-mask, none), var(--holo2-mask-texture, linear-gradient(#fff, #fff));
    mask-image: var(--card-shape-mask, none), var(--holo2-mask, none), var(--holo2-mask-texture, linear-gradient(#fff, #fff));

    /* FIX: Allow Layer 2 Mask to be controlled */
    -webkit-mask-size: 100% 100%, 100% 100%, var(--holo2-mask-size, cover);
    mask-size: 100% 100%, 100% 100%, var(--holo2-mask-size, cover);

    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-mode: alpha, alpha, luminance;
    mask-mode: alpha, alpha, luminance;

    /* KEY FIX: Lock Mask (Frame) - Force Static Center, but allow Texture Repeat */
    -webkit-mask-position: center center, center center, center center;
    mask-position: center center, center center, center center;

    -webkit-mask-repeat: no-repeat, no-repeat, var(--holo2-mask-repeat, repeat);
    mask-repeat: no-repeat, no-repeat, var(--holo2-mask-repeat, repeat);

    /* KEY FIX: Force Pattern to Tile - Prevent Cutoff */
    background-repeat: repeat;

    mix-blend-mode: var(--holo2-blend-mode, color-dodge);
    opacity: var(--holo2-opacity, 0);
    /* Default Hidden */

    filter: brightness(1.2) contrast(1.5);
    transition: transform 0.1s ease-out;
    /* For Parallax */

    /* FIX: Rounded corners to match card shape */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* 
   EMBOSS MODE (Physical Relief - Chisel/Offset Method)
   To create REAL 3D depth, we need distinct Highlights and Shadows offset from each other.
   1. Base: The Rainbow Gradient.
   2. ::before (Shadow): Texture shifted Down-Right (+1px), Dark Mode (Multiply).
   3. ::after (Highlight): Texture shifted Up-Left (-1px), Light Mode (Screen/Color Dodge).
*/
/* 
   EMBOSS MODE (Refined: Glossy & Vivid)
   1. Texture Overlay: Uses 'overlay' blend for a smooth, high-quality physical paper feel (No scribbles).
   2. Hologram Base: Uses 'color-dodge' + High Brightness to create the "Projected Light" look (Glossy).
*/
.card__shine.emboss-mode {
    /* BASE: The Rainbow Color - Boosted for Vibrancy */
    background-image: var(--holo-gradient, linear-gradient(115deg, transparent 25%, rgba(255, 0, 128, 0.9) 40%, rgba(0, 255, 255, 0.9) 45%, rgba(255, 215, 0, 0.9) 50%, transparent 60%));
    background-size: var(--holo-scale, 200%);

    /* Mask: Clip to Card Template */
    -webkit-mask-image: var(--template-mask);
    mask-image: var(--template-mask);

    /* BLEND: Color Dodge is KEY for the "Projected Light" feel */
    mix-blend-mode: color-dodge;
    opacity: 1;

    /* FILTER: High Brightness/Contrast makes it look "Jjang" (Vivid/Glossy) */
    filter: brightness(1.3) contrast(1.4) saturate(1.2);

    /* Reset default blend props */
    background-blend-mode: normal;
    -webkit-mask-composite: source-over;
    mask-composite: source-over;
}

/* TEXTURE OVERLAY (Physical Surface) */
.card__shine.emboss-mode::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background-image: var(--holo-mask-texture);
    background-size: var(--holo-scale, 200%);
    background-repeat: repeat;

    /* Static Center Position (Fixed Surface) */
    background-position: center;

    /* BLEND: Overlay creates the "Material" feel without destroying the light */
    mix-blend-mode: overlay;

    /* Soft Touch: Clean Paper Texture */
    filter: grayscale(100%) contrast(1.2);

    opacity: 0.6;
    /* Subtle texture, letting light dominate */
    z-index: 2;
    pointer-events: none;
}

/* Remove Shadow Layer (Source of Artifacts) */
.card__shine.emboss-mode::before {
    content: none;
    display: none;
}

/* Back Image with Mask Support */
.card__back-blur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Decoupled from template image. Now a Solid Color Layer for Pattern/Decal */
    /* FIX: Use transparent default so --template-back on .card__back shows through */
    background-image: none;
    background-color: var(--back-mask-color, transparent);

    /* Combined Filters (Blur, Brightness, Grayscale, SVG Filter) */

    /* Combined Filters (Blur, Brightness, Grayscale, SVG Filter) */
    filter: var(--back-filter-url, none) blur(var(--back-blur, 0px)) brightness(var(--back-brightness, 100%)) grayscale(var(--back-grayscale, 0%));
    z-index: 1;

    /* Support for Back Mask (hiding parts of the user image) */
    -webkit-mask-image: var(--back-mask, none);
    mask-image: var(--back-mask, none);

    /* Ensure Black = Hidden */
    -webkit-mask-mode: luminance;
    mask-mode: luminance;

    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-composite: source-over;
    mask-composite: add;

    /* User Controls */
    opacity: var(--back-mask-opacity, 1);
    mix-blend-mode: var(--back-mask-blend, normal);

    /* SAFARI FIX: Force hardware acceleration for backdrop-filter on card back */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* 
   GLOSSY COATING LAYER (Spot UV) 
   - Positioned above holograms but below/near text 
   - Uses a Mask to define where the Gloss appears
   - Uses a Radial Gradient that follows the mouse (via background-position)
*/
.card__coating {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    /* Top of card surface, below text (2500) and stickers (3000) */
    pointer-events: none;

    /* The Light Source: A tight, bright white radial gradient */
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.6) 20%, transparent 50%);
    background-size: 150% 150%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    /* Default enter */

    opacity: var(--coating-opacity, 0);
    mix-blend-mode: screen;
    /* Glossy feel */

    /* The Mask: User uploaded black/white image */
    /* KEY FIX: Use BOTH properites for cross-browser support */
    -webkit-mask-image: var(--coating-mask, none);
    mask-image: var(--coating-mask, none);

    /* Ensure mask covers entire card */
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    /* Ensure standard composite mode */
    -webkit-mask-composite: source-over;
    mask-composite: add;

    /* FIX: Rounded corners to match card shape */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* 
   BACK COATING LAYER (Spot UV for Back Face) 
   - Same effect as front coating but for the back of the card
*/
.card__back-coating {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
    /* Top of card surface, below text (2000) */
    pointer-events: none;

    /* The Light Source: A tight, bright white radial gradient */
    background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 20%, transparent 50%);
    background-size: 150% 150%;
    /* Larger than card so we can move it around */
    background-repeat: no-repeat;
    background-position: center;
    /* Set by JS */

    opacity: var(--back-coating-opacity, 0);
    mix-blend-mode: screen;
    /* Glossy feel */

    /* The Mask: User uploaded black/white image */
    -webkit-mask-image: var(--back-coating-mask, none);
    mask-image: var(--back-coating-mask, none);
    -webkit-mask-size: cover;
    mask-size: cover;
    -webkit-mask-composite: source-over;
    mask-composite: add;
}

/* Additional Glare for the surface reflection */
.card__glare {
    position: absolute;
    /* Static Layer covering the whole card - Mask stays fixed */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Removed transform: translate(-50%, -50%); - No longer moving the element */

    /* Smoother gradient with more stops for better anti-aliasing */
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.6) 15%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 70%);

    /* Size controlled by background-size now */
    background-size: var(--front-glare-size, 150%) var(--front-glare-size, 150%);
    background-position: 50% 50%;
    background-repeat: no-repeat;

    opacity: 0;
    /* Initial hidden, set by JS on mouse move */
    pointer-events: none;
    mix-blend-mode: screen;
    /* Screen blend for more visible light effect */
    /* Z-INDEX: Below stickers/text, but part of surface reflection */
    z-index: 21;
    /* No transition - instant mouse tracking */

    /* Apply Front Coating Mask (B/W) + Card Shape Mask for notches */
    -webkit-mask-image: var(--card-shape-mask, none), var(--coating-mask, none);
    mask-image: var(--card-shape-mask, none), var(--coating-mask, none);
    -webkit-mask-size: 100% 100%, 100% 100%;
    mask-size: 100% 100%, 100% 100%;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: center, center;
    mask-position: center, center;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;

    /* Image rendering for sharper mask */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* FIX: Rounded corners to match card shape */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* Text Overlays */
.card__info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2500;
    /* Ensure Container is above Sticker (2000) */
    pointer-events: none;
    /* Let clicks pass through to card for tilt */
    /* font-family: 'Helvetica Neue', Arial, sans-serif; <-- Removed this to inherit Teko */
}

/* Corrected Logic for Text Elements (Removing Duplicates) */

.card__name {
    position: absolute;
    bottom: 18px;
    /* Lowered 1px from 19px */
    left: 33px;
    /* Moved right 5px from 28px */
    font-size: 26px;
    /* Reduced 20% from 32px */
    font-weight: 700;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    line-height: 1;
    font-family: var(--template-font);
}

.card__grade {
    position: absolute;
    bottom: 12px;
    /* Raised 1px from 11px */
    right: 27px;
    /* Moved left 1px from 26px */
    width: 38px;
    height: 38px;
    aspect-ratio: 1 / 1; /* [FIX] Ensure perfect circle shape on mobile */

    /* Using block + line-height for better background-clip support than flex */
    /* [FIX] grade는 기본적으로 숨김. 필요한 템플릿만 --grade-display:block으로 활성화 */
    display: var(--grade-display, none);
    text-align: center;
    line-height: 38px;

    font-size: 26px;
    /* Reduced 10% from 29px */
    font-weight: 700;
    font-family: var(--template-font);

    z-index: 6;
    white-space: nowrap;
    overflow: visible; /* [FIX] Prevent clipping when using large fonts in Glassmorphism */
}

/* The Edition text at the very bottom */
.card__edition {
    position: absolute;
    bottom: 0px;
    /* Lowered 3px from 3px */
    width: 100%;
    text-align: center;
    font-size: 9px;
    /* Reduced ~20% from 11px */
    font-weight: 600;
    text-transform: uppercase;
    color: #000;
    letter-spacing: 0.5px;
    text-shadow: none;
    font-family: var(--template-font);
    white-space: nowrap;
    overflow: hidden;
}

/* Removing any rogue .card__name-container blocks or duplicates below this line */

/* --- NEW UI: Merged Carousel Stage --- */

.carousel-stage {
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1200px;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 24px;
    position: relative;
    gap: 40px;
    /* Space between cards */
}

/* Center Stage (The Active Card) */
.scene {
    /* Main card container buffer - Fixes flip jitter */
    width: 400px;
    height: 540px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    
    /* [v4410] Carousel Transition: Shrink Back Effect */
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
    will-change: transform, opacity;
}

/* Shrink & Recede state for template switching */
.scene.carousel-shrink {
    transform: scale(0.4) translateZ(-1000px);
    opacity: 0;
}

/* Side Cards (Prev/Next) */
.carousel-side {
    width: calc(var(--card-width) * 0.8);
    /* Slightly smaller visual */
    height: calc(var(--card-height) * 0.8);
    background-size: cover;
    background-position: center;
    border-radius: var(--card-radius);
    z-index: 1;
    z-index: 1;
}

/* Halftone Effect Overlay */
.card__back-blur.fx-halftone {
    filter: grayscale(100%) contrast(150%) var(--back-filter-url, opacity(1));
}



.carousel-side.prev {
    transform: scale(0.9) translateZ(-50px) rotateY(25deg);
    filter: grayscale(0.8) brightness(0.5);
}

.carousel-side.next {
    transform: scale(0.9) translateZ(-50px) rotateY(-25deg);
    filter: grayscale(0.8) brightness(0.5);
}

.carousel-side:hover {
    opacity: 0.6;
    transform: scale(0.95) translateZ(-20px) rotateY(0deg);
    filter: grayscale(0.5) brightness(0.7);
}

/* Logic: Active Content is injected via JS background-image */
.carousel-side.has-content {
    opacity: 0.8;
    filter: brightness(0.8) blur(0px);
    transform: translate(-50%, -50%) translateX(-300px) scale(0.9) rotateY(15deg);
    /* Slight pop on hover? */
}

.carousel-side.next:hover {
    transform: translate(-50%, -50%) translateX(300px) scale(0.9) rotateY(-15deg);
}

/* Ensure Main Card is Top */
.card {
    position: relative;
    z-index: 10;
    /* Main card styles handled elsewhere, but ensure it pops */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Hidden state */
.carousel-side:not(.has-content) {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.grade-selector {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 25px;
    /* GAP REDUCTION: Reduced from 10px to 5px */
    margin-top: 5px;
    /* STABILIZE: Reserve space so buttons below don't jump */
    min-height: 60px;
    align-items: center;
}

.grade-icon-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 2px solid #555;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 500;
    font-family: inherit;
    font-size: 18px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.grade-icon-btn:hover {
    transform: translateY(-3px);
    border-color: #888;
}

.grade-icon-btn.active {
    border-color: #4CAF50;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.5);
}

/* Editor UI */
/* 기본: 숨김, 관리자 모드에서만 표시 */
.editor-toggle-btn {
    display: none;
    /* 기본 숨김 */
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--key-color);
    color: #000;
    border: none;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    font-family: inherit;
    font-size: 18px;
    transition: transform 0.2s;
}

/* 관리자 모드: Editor 버튼 표시 */
body.is-admin .editor-toggle-btn {
    display: block;
}

.editor-toggle-btn:hover {
    transform: scale(1.05);
}

/* Hide default desktop fixed positioning which caused layout issues */
/* .editor-toggle-btn { ... } - Overridden in #app-container section */

.editor-panel {
    position: fixed;
    top: 100px;
    /* Moved down to avoid button overlap */
    /* Moved UP from 70px */
    right: 20px;
    width: 320px;
    max-height: 90vh;
    /* Increased height capacity */
    background: rgba(18, 18, 18, 0.95);
    border: 1px solid #333;
    border-radius: 12px;
    color: #fff;

    z-index: 10001;
    /* Higher than Bottom Nav (10000) */
    display: flex;
    flex-direction: column;
    box-shadow: -5px 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    transition: opacity 0.3s, transform 0.3s;
    font-family: sans-serif;
}

.editor-panel.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.editor-header {
    padding: 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.editor-header h3 {
    margin: 0;
    font-size: 16px;
    color: var(--key-color);
}

.editor-header button {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    cursor: pointer;
}

.editor-content {
    flex: 1;
    overflow-y: auto;
    touch-action: pan-y;
    padding: 8px 15px 15px 15px;
    /* Reduced TOP padding from 15px */
}

.editor-section {
    margin-bottom: 20px;
}

.editor-section h4 {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 5px;
}

.control-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
}

.control-row label {
    color: #aaa;
}

.control-row input[type="text"],
.control-row input[type="number"] {
    background: #333;
    border: 1px solid #444;
    color: white;
    padding: 4px;
    border-radius: 4px;
    width: 60px;
    text-align: right;
}

.control-row input[type="range"] {
    width: 100px;
}

.editor-footer {
    padding: 15px;
    border-top: 1px solid #333;
    text-align: center;
}

.action-btn {
    background: #333;
    color: white;
    border: 1px solid #555;
    padding: 8px 16px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

.action-btn:hover {
    background: #444;
    border-color: var(--key-color);
}

/* Removed duplicate active state to allow unified scale(0.95) from line 3190 */

/* [v91] Save button pressed/saving state — bouncy feel */
#saveCardBtn {
    transition: background 0.1s ease, opacity 0.1s ease;
}

#saveCardBtn.saving {
    background: #2e7d32;
    border-color: #1b5e20;
    opacity: 0.75;
    pointer-events: none;
}

/* Back Mode Toggle Radio */
.back-mode-toggle {
    display: none;
    /* Controlled by JS */
    justify-content: center;
    align-items: center;
    gap: 30px;
    font-family: 'Noto Sans KR', sans-serif;
    padding: 10px 0;
    margin-bottom: 0;
}

.mode-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.radio-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #555;
    background: transparent;
    position: relative;
    transition: all 0.2s ease;
}

.radio-circle.active {
    border-color: #fff;
}

.radio-circle.active::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
}

.mode-label {
    font-size: 13px;
    color: #eee;
    font-weight: 500;
}

.mode-radio:hover .radio-circle {
    border-color: #777;
}

/* Specialized Back Textarea */
.back-textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: #4CAF50;
    padding: 2px 0;
    font-family: 'Noto Sans KR', sans-serif;
    text-align: left;
    resize: none;
    font-size: 13px;
    /* Larger font for easier editing */
    outline: none;
    min-height: 60px;
    /* Increased height */
    margin-left: 10px;
}


/* My Cards Toggle Button */

/* My Cards Toggle Button */
.my-cards-toggle-btn {
    position: fixed;
    top: 20px;
    right: 140px;
    /* Left of Editor Btn */
    background: #222;
    color: white;
    border: 1px solid #555;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    font-family: inherit;
    font-size: 18px;
    transition: transform 0.2s;
}

/* --- Mobile Responsiveness --- */

@media (max-width: 99999px) {

    body {
        /* Mobile Layout: Vertical Stack */
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        height: auto;
        min-height: 100vh;
        padding-bottom: 80px;
        /* Space for Bottom Nav */
    }

    /* 1. Card Section (Top) */
    .carousel-stage {
        order: 1;
        /* Visually First */
        flex-direction: column;
        height: auto;
        gap: 20px;
        margin-top: 40px;
        margin-bottom: 20px;
        perspective: none;
        flex: none;
        /* Don't expand */
    }

    .scene {
        width: 100%;
        height: 460px;
        /* Increased to fit unscaled height + margins */
        perspective: 1000px;
        /* Scale down the 320px Card to fit mobile (approx 0.85x) */
        transform: scale(0.85);
        transform-origin: center top;
        margin-bottom: -40px;
        /* Compensate for empty space from scale */
    }

    /* Hide side cards on mobile */
    .carousel-side {
        display: none;
    }

    /* 2. Controls Section (Bottom) */
    .controls {
        order: 2;
        /* Visually Second */
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text-inputs {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    /* Conflicting grid styles removed to fix layout */

    /* Conflicting label width removed */

    /* Hide old Save Button if we want to move it? 
       Actually user design has "Save Card" button at bottom of inputs.
       The existing #saveCardBtn is inside .controls, so it will sit below inputs naturally.
    */
    #saveCardBtn {
        width: 100%;
        /* Full width button on mobile */
        margin-top: 30px;
    }

    /* Editor Panel Mobile */
    /* Editor Panel Mobile */
    .editor-panel {
        top: auto;
        bottom: 100px;
        /* Much higher to ensure Save button is above bottom-nav */
        right: 0;
        left: 0;
        width: 100%;
        max-height: calc(100vh - 150px);
        /* Avoid Nav (70px bottom) + extra space */
        border-radius: 20px 20px 0 0;
        transform: translateY(100%);
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    /* Ensure editor footer is fully visible */
    .editor-panel .editor-footer {
        padding-bottom: 20px;
    }

    .editor-panel:not(.hidden) {
        transform: translateY(0);
    }

    .editor-panel.hidden {
        transform: translateY(calc(100% + 150px));
        /* Ensure fully hidden regardless of content height */
        opacity: 0;
        pointer-events: none;
    }

    /* Hide Desktop Toggles if they conflict */
    .my-cards-toggle-btn {
        display: none;
        /* Replaced by Bottom Nav */
    }

    /* Gallery Grid */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 Columns like design */
        gap: 40px 10px;
        padding-bottom: 80px;
    }

    /* Detail Modal */
    .detail-content-wrapper {
        width: 95%;
        height: 90%;
        flex-direction: column;
    }

    .detail-scene {
        width: 100%;
        height: 60%;
        transform: scale(0.65);
        /* Reduced per user request (-20%) */
    }


    /* --- NEW UI OVERHAUL (Design Match) --- */

    /* 0. Editor Button: 기본 숨김, 관리자 모드에서만 표시 */
    .editor-toggle-btn {
        display: none;
    }

    body.is-admin .editor-toggle-btn {
        display: block;
    }

    /* 1. Background & General */
    body {
        background-color: var(--bg-primary);
        /* Darker Theme */
        background-image: none;
    }

    /* 2. Controls Area */
    .controls {
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
    }

    /* 3. Action Buttons Row (Adjust / Upload) */
    .button-row {
        display: flex;
        gap: 12px;
        margin-bottom: 5px;
        /* Reduced spacing */
    }

    .button-row .action-btn,
    .button-row .file-upload-btn {
        background: transparent;
        border: 1px solid #444;
        color: white;
        border-radius: 2px;
        /* Square styling */
        padding: 12px 0;
        font-family: 'Noto Sans KR', sans-serif;
        /* Minimalist font */
        font-size: 14px;
        font-weight: 500;
        text-transform: none;
        /* No CAPS */
        letter-spacing: 0;
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Removed duplicate scale suppression to allow unified feedback */

    /* Remove Emoji from button text if possible via CSS? No, text is in HTML. 
       I might need to change HTML text too? User said "CSS Only" implies I should try to make it work.
       The button text "📐 Adjust Image" is in HTML. 
       I can't change text content via CSS easily. 
       I will leave text as is for now, but style the box. */

    /* 4. Input Fields Grid System */
    .text-inputs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "name name"
            "group group"
            "rank label"
            "font refresh";
        /* Font/Refresh logic existing */
        gap: 20px 12px;
        width: 100%;
    }

    /* Mobile Input Overrides Removed to follow Global Style */

    /* 5. Save Button (Green, Large) */
    #saveCardBtn {
        background: #20d189;
        color: #000;
        border: none;
        font-weight: 700;
        font-size: 14px;
        padding: 0;
        height: 100%;
        border-radius: 0;
        width: 100%;
        flex: 1;
        margin: 0;
        text-transform: uppercase;
    }

    #saveCardBtn:active {
        background: #0d5c3b; /* Very dark green */
        color: #000;
        filter: brightness(0.8);
        transform: none;
    }

    /* 6. Bottom Nav */
    .bottom-nav {
        background: var(--bg-primary);
        border-top: 1px solid #333;
        height: 70px;
    }

    .nav-btn {
        color: #666;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        border: none;
    }

    .nav-btn.active {
        color: #20d189;
        border-top: 2px solid #20d189;
    }
}

/* End Mobile Override */

/* NOTE: .bottom-nav styles are defined at end of file (line ~5654) */

/* Card Label Style */
.card__label {
    position: absolute;
    bottom: 40px;
    /* Adjust position based on design */
    right: 28px;
    font-size: 12px;
    color: var(--text-color, #fff);
    font-family: var(--font-family, 'Teko'), sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
    white-space: nowrap;
}

/* Gallery Overlay */
.gallery-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.3s;
}

.gallery-overlay.hidden {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* Ensure it doesn't block clicks */
}

.gallery-container {
    width: 90%;
    height: 90%;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}

.gallery-header {
    padding: 20px 30px;
    background: #111;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gallery-header h2 {
    margin: 0;
    color: #fff;
    font-family: inherit;
    font-weight: 500;
    font-size: 32px;
    letter-spacing: 1px;
}

.gallery-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}

.gallery-close-btn:hover {
    color: white;
}

.gallery-content {
    flex: 1;
    padding: 0px 20px 20px; /* v4357: Removed top padding to move groups up */
    overflow-y: auto;
    touch-action: pan-y;
}

/* Label Grouping */
.gallery-section {
    margin-bottom: 40px;
    transition: margin-bottom 0.3s ease, opacity 0.3s ease;
}

.gallery-section.collapsed {
    margin-bottom: 15px;
    /* "Tucked away" feel */
}

.gallery-section-title {
    color: #4CAF50;
    /* Match SAVE CARD button */
    font-size: 14px;
    margin-bottom: 20px;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    font-family: 'Noto Sans KR', sans-serif;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: opacity 0.2s, margin-bottom 0.3s ease;
}

#galleryGrid.is-any-dragging .gallery-section:not(.is-dragging) {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.gallery-section.is-dragging {
    pointer-events: none;
    z-index: 10005;
}

.gallery-group-placeholder {
    width: 100%;
    background: transparent;
    border: none;
    margin-bottom: 20px;
    pointer-events: none;
}

.group-drag-handle {
    cursor: grab;
    padding: 8px 12px;
    margin-right: -10px;
    color: #444;
    font-size: 16px;
}

.group-drag-handle:hover {
    color: #20d189;
}

.group-drag-handle:active {
    cursor: grabbing;
}

.gallery-section.collapsed .gallery-section-title {
    margin-bottom: 0;
}

.gallery-section-title:hover {
    opacity: 0.8;
}

.group-title-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.group-toggle-btn {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.2s;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: rotate(90deg);
    /* Expanded: points DOWN */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.gallery-section.collapsed .group-toggle-btn {
    transform: rotate(0deg);
    /* Collapsed: points RIGHT (like image) */
}

.gallery-section.collapsed .gallery-grid {
    display: none;
}

/* Remove margin from the very first section to touch header */
.gallery-section:first-child {
    margin-top: 0;
}

.gallery-section:first-child .gallery-section-title {
    margin-top: 0px;
}

.group-delete-btn {
    background: #FF0000;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 9px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    transition: background 0.2s;
    height: auto;
}

.group-delete-btn:hover {
    background: #cc0000;
}

.group-drag-handle {
    color: #888;
    font-size: 14px;
    opacity: 0.6;
    margin-right: 5px;
    touch-action: none;
    /* [v37] Only prevent scrolling when actually touching the handle */
}

.group-name-text {
    user-select: none;
    -webkit-user-select: none;
}

/* Toggle Visibility Based on Collapsed State */
.gallery-section.collapsed .group-delete-btn {
    display: none;
}

.gallery-section:not(.collapsed) .group-drag-handle {
    display: none;
}

/* Main Grid Layout */
.gallery-grid {
    display: grid;
    /* Auto-fill columns based on available width */
    grid-template-columns: repeat(auto-fill, minmax(120px, 140px));
    gap: 35px 20px;
    /* Increased vertical gap for Share Count display */
    padding-bottom: 50px;
    justify-content: center;
}

/* Desktop: pull the card cluster toward the screen center by capping the
   grid width and centering the block (justify-content already centers tracks).
   Specificity raised (.gallery-section .gallery-grid) to win over any later
   single-class .gallery-grid rule regardless of source order. */
@media (min-width: 769px) {
    .gallery-section .gallery-grid,
    .gallery-section .gallery-section-title {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
}


.gallery-item {
    /* Slot size is fixed 160x220px driven by the grid */
    height: 220px;
    position: relative;
    cursor: pointer;
    z-index: 10;
}

/* Drag and Drop Reordering */
.gallery-section.ready-to-drag {
    z-index: 100;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    /* Neutral deep shadow */
    transform: scale(1.05);
    /* [v38] Scale up by 5% */
}

.gallery-section.dragging {
    opacity: 0.8;
    pointer-events: none;
    z-index: 1000;
    transform: scale(1.05);
    /* [v38] Maintain scale during drag */
}



.gallery-section.drag-over-top {
    border-top: 3px solid #aaa;
    margin-top: 10px;
}

.gallery-section.drag-over-bottom {
    border-bottom: 3px solid #aaa;
    margin-bottom: 50px;
}

/* Ghost Add Card Button */
.gallery-add-card {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Base dimensions - will be overridden by media queries */
    height: 180px;
    flex-shrink: 0;
    flex-grow: 0;
}

.add-card-ghost {
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.add-card-ghost:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
}

.add-card-icon {
    font-size: 48px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.25);
    transition: all 0.3s ease;
}

.add-card-ghost:hover .add-card-icon {
    color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

.gallery-item:hover {
    z-index: 100;
}

/* Scaling Wrapper */
.thumbnail-scale-wrapper {
    width: var(--card-width);
    /* Internal real size matching card */
    height: var(--card-height);
    transform: scale(0.5);
    /* Scale down to fit 160px */
    transform-origin: 0 0;
    overflow: hidden;
    position: relative;
    border-radius: 4.5% / 3.5%;
    background: transparent;
    /* REMOVED BLACK BG */
    pointer-events: none;
    /* Prevent interaction inside thumb */

    /* [ANDROID FIX] Removed preserve-3d + will-change to prevent GPU layer explosion.
       100 thumbnails × independent GPU layer = texture memory exhaustion on Android.
       Thumbnails don't use 3D transforms, so flat is correct. */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: flat;
    /* will-change removed — browser allocates GPU layers on-demand instead of 100 permanent ones */
}

/* [OPTIMIZATION] Structural 2D Thumbnail Card */
.card-thumb {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translateZ(0);
    /* GPU composition but fixed layout */
    transform-style: flat;
    /* FORCE 2D */
    background-color: #000;
    border-radius: var(--card-radius, 16px);
    overflow: hidden;

    /* Strict GPU isolation */
    isolation: isolate;
    contain: content;
    /* Isolate layout/paint */

    /* Performance: No filters or shadows */
    filter: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;

    /* Standard clipping fix */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Ensure child elements in thumbnails are strictly 2D and non-expensive */
.card-thumb .card__front,
/* .card__art-container removed to allow centering transform */
.card-thumb .card__frame,
.card-thumb .card__info {
    transform: none;
    transform-style: flat;
    backface-visibility: visible;
    filter: none;
}

/* Hide back side entirely for gallery thumbnails to save memory/processing */
.card-thumb .card__back {
    display: none;
}

/* Ensure child elements don't run expensive filters in thumbnails */
.card-thumb .card__art,
.card-thumb .card__frame,
.card-thumb .card__frame-glass {
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    will-change: auto;
}

/* Ensure .card__art has a default center transform for thumbs if no inline style */
.card-thumb .card__art {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Hide shine/glare in thumbnail - double safety */
.card-thumb .card__shine,
.card-thumb .card__shine-layer2,
.card-thumb .card__glare,
.card-thumb .card__coating {
    display: none;
}

/* Ensure Text scales and is visible */
.card-thumb .card__info {
    opacity: 1;
}

/* Hover Overlay */
.gallery-card-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Matches the 160x220 slot */
    background: rgba(0, 0, 0, 0.6);
    color: var(--key-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: inherit;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 2px;
    opacity: 0;
    transition: opacity 0.2s;
    border-radius: 4.5% / 3.5%;
    /* Match card radius approx */
}

.gallery-item:hover .gallery-card-hover-overlay {
    opacity: 1;
}

/* [OPTIMIZATION] Lazy Loading Fade-in */
.lazy-load {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.lazy-load.loaded {
    opacity: 1;
}

/* --- TRUE FULLSCREEN IMMERSION OVERRIDE --- */
body.detail-view-active .bottom-nav,
body.detail-view-active .header-container,
body.detail-view-active #createCardView,
body.detail-view-active #myCardsGallery,
body.detail-view-active .editor-toggle-btn,
body.detail-view-active .lp-footer,
body.detail-view-active .footer-nav,
body.detail-view-active #app-container {
    display: none;
}

/* Force body background to solid black when detail is active */
body.detail-view-active {
    background-color: #000;
    overflow: hidden;
}

.detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    z-index: 10000; /* [v1.32] 상세 모달 레이어 (1만 단위) */
    display: flex;
    justify-content: center;
    align-items: center;
    /* [CLIP FIX] Allow carousel Peeking without being cut by a smaller box */
    overflow: visible; 
    background: #13141a; 
    
    border: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    
    opacity: 1;
    transition: opacity 0.3s;
    transform-style: flat;
    
    /* Ensure all children can extend to screen edges if needed */
    flex-direction: column;
}

/* [BACKDROP] Blurred full-bleed copy of the center carousel card, behind the stage */
.detail-backdrop-blur {
    position: absolute;
    inset: 0;
    background-color: #000;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(40px) brightness(0.2) saturate(1.2);
    transform: scale(1.15);
    /* avoid blurred edge gaps */
    transition: background-image 0.25s ease;
    pointer-events: none;
    z-index: 0;
    /* Keep the far left/right thirds pure black (side cards sit on a solid black
       box); only the center, behind the focused card, shows the blurred image. */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 32%, black 68%, transparent 100%);
}

.detail-modal .detail-carousel-stage {
    position: relative;
    z-index: 1;
}

/* Desktop: constrain detail modal to the same column as #app-container/bottom-nav,
   with pure black filling the viewport outside that column. */
@media (min-width: 769px) {
    body.detail-view-active {
        background-color: #000;
    }

    .detail-modal {
        left: 50%;
        width: min(100%, 1200px);
        transform: translateX(-50%);
    }
}

/* [PAD/DESKTOP FIX] Center the entire UI package in the viewport */
/* [CENTRAL FIX] Gallery Detail View - Action Buttons (Delete, Export, Share, Edit) 
   Unified CSS to ensure perfect centering and equal widths across all devices. */
.detail-modal .detail-actions {
    position: fixed;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10002; /* [v1.32] 액션 버튼 레이어 (헤더보다 위) */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    pointer-events: auto;
}

/* Web only: hide video export (native-only feature), leaving 3 buttons */
html:not(.cap-native) .detail-modal #detailExportBtn {
    display: none;
}

.detail-modal .action-btn-group {
    display: flex;
    width: 100%;
    background: #1e1e1e;
    border: 1px solid #444;
    border-radius: 8px;
    overflow: hidden;
    gap: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.detail-modal .action-btn {
    flex: 1;
    min-width: 0;
    padding: 14px 4px;
    font-size: 13px;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 500;
    color: white;
    background: transparent;
    border: none;
    border-right: 1px solid #444;
    border-radius: 0; /* [FIX] Remove individual R-values to make divider lines straight */
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: none; /* [FIX] Remove forced capitalization to respect exact string casing */
    transition: background 0.2s, opacity 0.2s;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.detail-modal .action-btn:last-child {
    border-right: none;
}

.detail-modal .action-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.detail-modal .action-btn:active,
#detailShareBtn:active,
#detailExportBtn:active,
#detailEditBtn:active {
    background: rgba(32, 209, 137, 0.1);
    color: var(--key-color); /* [FIX] Force green color on click to match Export exactly */
    opacity: 0.8;
    transition: none; /* Instant feedback */
}

.detail-modal .action-btn.delete-btn:active {
    color: #ff4d4d; /* Keep delete red even when active */
}

.detail-modal .action-btn.delete-btn {
    color: #ff4d4d; /* Specific red for delete */
}

.detail-modal .view-header {
    z-index: 10001; /* [v1.32] 모달 내 상단 헤더 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between; /* BACK left, (0/1) right */
    align-items: center;
    padding: 0 20px;
    border-bottom: 1px solid #222;
    background: #13141a;
    box-sizing: border-box;
    transform: none;
}

.detail-modal .nav-back-btn {
    display: flex;
    background: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-modal .creator-banner {
    position: absolute;
    top: 18px;
    right: 20px;
    z-index: 1000002;
}

/* [CLIP FIX] Ensure the carousel stage doesn't hide overflowing peek cards */
.detail-modal .detail-carousel-stage {
    overflow: visible;
    z-index: 9500; /* [v1.33 FIX] 버튼(10002)보다 아래로 배치하여 클릭 차단 해제 */
    padding-top: 60px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y; /* [v1.11 FIX] Allow vertical scroll while handling horizontal swipes manually */
}

/* Desktop: keep carousel cards within the lit 1200px column — clip the
   off-column travel so entering/exiting cards slide in/out at the column edge
   instead of emerging from the black page area behind the modal.
   Placed after the [CLIP FIX] rule so it wins by source order. */
@media (min-width: 769px) {
    .detail-modal .detail-carousel-stage {
        overflow: hidden;
    }
}

.detail-modal .carousel-track {
    overflow: visible;
}

/* [v1.18] Unified Hidden State: Ensure the modal is physically removed from event tree */
.detail-modal.hidden {
    display: none;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    z-index: -1; /* Move behind everything when hidden */
}

/* [v1.19 FIX] Remove unwanted inner lines/outlines from buttons */
#cancelEditBtn, .action-btn {
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

/* [v18.41] Disable scale on click for primary action group to prevent border gap (the "hidden line" issue) */
#cancelEditBtn:active, 
#saveCardBtn:active {
    transform: none;
    filter: brightness(0.8);
}

.detail-modal-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* Darker opacity instead of blur */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Creator Banner - for shared cards / Share Management for Owners */
.creator-banner {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    right: 20px;
    left: auto;
    transform: none;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10002;
    color: #999;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 11px;
    font-weight: 500;
    pointer-events: auto;
    /* [v89] Enable for interaction */
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
}

.creator-banner:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    border-color: var(--key-color);
}

.creator-banner:active {
    transform: scale(0.95);
}

.creator-banner.hidden {
    display: none;
}

.creator-banner.read-only {
    cursor: default;
    background: none;
    border: none;
    backdrop-filter: none;
    pointer-events: none;
    color: #888;
    font-size: 11px;
}

.creator-banner.read-only:hover {
    transform: none;
    border-color: transparent;
}

.creator-banner .creator-icon {
    display: none;
}

.creator-banner .creator-text {
    white-space: nowrap;
}

/* --- NEW DETAIL CAROUSEL --- */
.detail-carousel-stage {
    position: relative;
    width: 100vw;
    height: 100dvh;
    /* Full height for centering */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    /* perspective: 1200px; -- [v24] Moved to track level */
    z-index: 100;
    /* Higher than Nav Areas */
    pointer-events: auto;
    /* Enable touch/swipe events on the stage */
    transform-style: flat;
    /* [v24] Flatten outer stage */
}

.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* transform-style: preserve-3d; -- REMOVED to fix z-fighting */
    transform-style: flat;
    transform: translateY(-5%);
    perspective: 1200px;
    /* [v24] Perspective on track for performance */
}

.detail-card {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
}

.detail-card .card__front,
.detail-card .card__back {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* FIX: Ensure rounded corners in detail modal */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

.detail-card .card__back {
    transform: rotateY(180deg);
}

.detail-card-wrapper {
    position: absolute;
    width: 320px;
    height: 440px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s, filter 0.5s;
    /* will-change removed - managed by JS for performance */
    /* perspective: 1200px; -- [v23] Removed redundant perspective */
    /* For Tilt/Flip */
    transform-style: flat;
    /* [v24] Flatten wrapper context */
    perspective: none;

    /* Mobile Interaction Fixes - NUCLEAR */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* Prevent Callout (Save Image etc) */
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}

/* NUCLEAR: Force all children to ignore native selection */
.detail-card-wrapper * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;
}

/* NUCLEAR V2: Explicitly Kill Image Interaction (Source of Blue Flash) */
.detail-card-wrapper img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* NUCLEAR V3: Kill ALL pointer events on card children - wrapper ONLY should receive events */
.detail-card-wrapper .card,
.detail-card-wrapper .card * {
    pointer-events: none;
}

/* Allow vertical scroll but prevent other gestures if needed, or 'none' if full control */


/* Carousel Positions */

/* Center: Full Size, Clear */
.detail-card-wrapper.pos-center {
    z-index: 200;
    /* Top Priority */
    transform: scale(0.85);
    /* 5% reduction from 0.9 */
    opacity: 1;
    filter: brightness(1) blur(0px);
    cursor: pointer;
    pointer-events: auto;
    /* FORCE CLICK */

    /* DEBUG BORDER - Remove later */
    /* border: 2px solid red; */
}

/* Sides: Smaller, Darker — slight inward tilt (subtle rotateY, not enough to distort) */
.detail-card-wrapper.pos-left {
    z-index: 10;
    transform: translateX(-70%) scale(0.62) rotateY(10deg);
    opacity: 0.85;
    filter: brightness(0.35);
    /* Lowered for better focus on center */
    pointer-events: none;
}

.detail-card-wrapper.pos-right {
    z-index: 10;
    transform: translateX(70%) scale(0.62) rotateY(-10deg);
    opacity: 0.85;
    filter: brightness(0.35);
    /* Lowered for better focus on center */
    pointer-events: none;
}

/* Far sides: second-tier context cards (5-card carousel) */
.detail-card-wrapper.pos-far-left {
    z-index: 5;
    transform: translateX(-132%) scale(0.44) rotateY(14deg);
    opacity: 0.25;
    filter: brightness(0.45);
    pointer-events: none;
}

.detail-card-wrapper.pos-far-right {
    z-index: 5;
    transform: translateX(132%) scale(0.44) rotateY(-14deg);
    opacity: 0.25;
    filter: brightness(0.45);
    pointer-events: none;
}

/* Exit: Pushed further along the navigation path */
.detail-card-wrapper.pos-out-left {
    transform: translateX(-220%) scale(0.3) rotateY(35deg);
    opacity: 0;
    z-index: 1;
}

.detail-card-wrapper.pos-out-right {
    transform: translateX(220%) scale(0.3) rotateY(-35deg);
    opacity: 0;
    z-index: 1;
}

/* [NUCLEAR OPTIMIZATION] Hide EXPENSIVE layers on side cards */
.detail-card-wrapper.pos-left .card__shine,
.detail-card-wrapper.pos-left .card__glare,
.detail-card-wrapper.pos-left .card__coating,
.detail-card-wrapper.pos-left .card__shine-layer2,
.detail-card-wrapper.pos-right .card__shine,
.detail-card-wrapper.pos-right .card__glare,
.detail-card-wrapper.pos-right .card__coating,
.detail-card-wrapper.pos-right .card__shine-layer2,
.detail-card-wrapper.pos-far-left .card__shine,
.detail-card-wrapper.pos-far-left .card__glare,
.detail-card-wrapper.pos-far-left .card__coating,
.detail-card-wrapper.pos-far-left .card__shine-layer2,
.detail-card-wrapper.pos-far-right .card__shine,
.detail-card-wrapper.pos-far-right .card__glare,
.detail-card-wrapper.pos-far-right .card__coating,
.detail-card-wrapper.pos-far-right .card__shine-layer2 {
    display: none;
    will-change: auto;
}

/* --- MOBILE DETAIL VIEW OVERRIDE --- */
@media (max-width: 500px) {
    .detail-card-wrapper.pos-left {
        /* Pull closer for narrow screens so edges are visible */
        transform: translateX(-45%) scale(0.52) rotateY(20deg);
        opacity: 0.25;
        filter: brightness(0.6);
    }

    .detail-card-wrapper.pos-right {
        /* Pull closer for narrow screens so edges are visible */
        transform: translateX(45%) scale(0.52) rotateY(-20deg);
        opacity: 0.25;
        filter: brightness(0.6);
    }
}

/* Exit States for Animation */
.detail-card-wrapper.pos-hidden-left {
    transform: translateX(-180%) scale(0.5) rotateY(45deg);
    opacity: 0;
    z-index: 0;
}

.detail-card-wrapper.pos-hidden-right {
    transform: translateX(180%) scale(0.5) rotateY(-45deg);
    opacity: 0;
    z-index: 0;
}

/* Side Card Simplification (Android/Perf optimization) */
.detail-card-wrapper.pos-left .card__shine,
.detail-card-wrapper.pos-left .card__glare,
.detail-card-wrapper.pos-left .card__shine-layer2,
.detail-card-wrapper.pos-left .card__back-shine,
.detail-card-wrapper.pos-left .card__back-glare,
.detail-card-wrapper.pos-right .card__shine,
.detail-card-wrapper.pos-right .card__glare,
.detail-card-wrapper.pos-right .card__shine-layer2,
.detail-card-wrapper.pos-right .card__back-shine,
.detail-card-wrapper.pos-right .card__back-glare {
    display: none;
}


/* Legacy detail-actions removed to prevent duplicate conflicts */

.action-btn:last-child {
    border-right: none;
}

.action-btn:active {
    transform: scale(0.96);
}

/* Specific Button Styles */

/* DELETE: Red Standalone */
.delete-btn {
    background: #FF0000;
    color: white;
    font-weight: 600;
    border-right: 1px solid #800000;
}

.delete-btn:hover {
    background: #cc0000;
}

.action-btn:hover {
    background: #333;
    filter: brightness(1.2);
}

/* Base active removal to use combined logic above */

.delete-btn:hover {
    background: #cc0000;
}

.html-export-btn {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.html-export-btn:hover {
    background: #333;
    color: #00d2ff;
    /* Cyan highlight */
}

.share-btn,
.edit-btn {
    background: transparent;
    border-right: 1px solid #444;
    min-width: 80px;
}

.edit-btn {
    border-right: none;
    /* Last item */
}

.share-btn:hover,
.edit-btn:hover {
    background: #333;
}

/* ── CTA 참여 완료 (업로드 질감 이미지) ───────────────── */
.card__back-cta.cta-completed {
    cursor: default;
    border-color: rgba(255,255,255,0.3);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    overflow: hidden;
}
.card__back-cta.cta-completed::before { opacity: 0.65; }
.card__back-cta.cta-completed::after  { opacity: 0.5; }
.card__back-cta.cta-completed span,
.card__back-cta.cta-completed { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.7); }
/* ─────────────────────────────────────────────────────── */

/* [SHARE END] 공유 기간 종료된 카드의 수정 버튼 — 비활성 표시 */
.edit-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.edit-btn.disabled:hover {
    background: transparent;
}


/* Invisible Hit Areas for Desktop/Touch navigation assistance */
.nav-hit-area {
    position: absolute;
    top: 0;
    height: 100%;
    width: 30%;
    z-index: 500;
    display: none;
    /* [NO_ARROWS] Hide hit areas */
    display: none;
    /* [NO_ARROWS] Remove hit areas */
}

.nav-hit-area.left {
    left: 0;
}

.nav-hit-area.right {
    right: 0;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.detail-close-btn {
    position: absolute;
    top: -50px;
    right: -50px;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    z-index: 20;
}

.detail-close-btn:hover {
    color: var(--key-color);
    transform: scale(1.1);
}

/* Detail Scene */
.detail-scene {
    width: var(--card-width);
    height: var(--card-height);
    position: relative;
    perspective: 1000px;
    transform: scale(1.2);
    /* Scale up for better view */
}



/* Modal Input */
.modal-input {
    display: block;
    width: calc(100% - 20px);
    box-sizing: border-box;
    padding: 10px;
    margin: 15px auto 0;
    background: #333;
    border: 1px solid #555;
    color: white;
    border-radius: 4px;
    font-size: 16px;
    outline: none;
    text-align: center;
}

.modal-input:focus {
    border-color: var(--key-color);
    background: #444;
}

/* Back Shine (Hologram Foil) */
.card__back-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;

    /* Reuse Front Hologram Variables */
    background-image: var(--holo-bg-image, var(--holo-gradient, linear-gradient(115deg, transparent 25%, rgba(255, 0, 128, 0.7) 40%, rgba(0, 255, 255, 0.7) 45%, rgba(255, 215, 0, 0.7) 50%, transparent 60%)));

    /* Use --holo-scale matching front */
    background-size: var(--holo-scale, 200%);
    background-position: 0% 0%;

    background-repeat: repeat;

    /* Masking - Use back-specific mask, NOT front template-mask */
    -webkit-mask-image: var(--back-mask, none), var(--holo-mask-texture);
    mask-image: var(--back-mask, none), var(--holo-mask-texture);
    -webkit-mask-size: cover, cover;
    mask-size: cover, cover;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-mode: alpha, luminance;
    mask-mode: alpha, luminance;

    /* Blend Mode */
    mix-blend-mode: var(--holo-blend-mode, screen);
    /* Opacity controlled by toggle - default enabled */
    opacity: var(--back-holo-opacity, var(--holo-opacity, 0.6));
    filter: brightness(1.0) contrast(2.0);
}

/* Hide back hologram when disabled */
.card__back-shine[data-disabled="true"],
.card__back.back-holo-disabled .card__back-shine {
    opacity: 0;
}

/* Back Glare (Surface Reflection) */
.card__back-glare {
    position: absolute;
    /* Fixed to card size - mask stays in place */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Light effect using background - moves via background-position set by JS */
    background: radial-gradient(circle at center,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.6) 15%,
            rgba(255, 255, 255, 0.3) 35%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 70%);
    background-size: var(--back-glare-size, 150%) var(--back-glare-size, 150%);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 1500;

    /* Mask fixed to card size */
    -webkit-mask-image: var(--back-coating-mask, none);
    mask-image: var(--back-coating-mask, none);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    /* FIX: Rounded corners */
    border-radius: var(--card-radius, 16px);
    overflow: hidden;
}

/* Refined Halftone (Blend Logic) */
/* Re-defining to be sure */
.card__back-blur.fx-halftone::after {
    mix-blend-mode: overlay;
    /* Better integration */
    background: radial-gradient(circle, #000 1.5px, transparent 2px);
    background-size: 6px 6px;
    opacity: 0.6;
}

/* --- Editor Toggle Button (Ensure Visibility) --- */
.editor-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #222;
    color: white;
    border: 1px solid #555;
    padding: 10px 20px;
    border-radius: 30px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    font-family: inherit;
    font-size: 18px;
    transition: transform 0.2s;
}

.editor-toggle-btn:hover {
    transform: scale(1.05);
    background: #444;
    border-color: var(--key-color);
}

/* Mobile Adjustment for Editor Toggle */
@media (max-width: 99999px) {
    .editor-toggle-btn {
        top: 15px;
        right: 15px;
        padding: 8px 16px;
        font-size: 16px;
        background: rgba(34, 34, 34, 0.9);
        backdrop-filter: blur(4px);
    }
}

/* --- NEW UI OVERHAUL (Design Match Refined) --- */

@media (max-width: 99999px) {

    /* Global Font Update */
    body,
    button,
    input,
    select,
    .input-label,
    .nav-btn,
    h1,
    h2,
    h3 {
        font-family: 'Outfit', sans-serif;
    }

    /* 0. Hide Admin Editor Button & Pagination */
    .editor-toggle-btn {
        display: none;
    }

    .carousel-indicators {
        display: none;
    }

    /* 1. Background & General */
    body {
        background-color: #13141a;
        /* Specific Dark BG */
        background-image: none;
    }

    /* 2. Controls Area - Centering Everything */
    .controls {
        width: 100%;
        padding: 0;
        /* Remove padding to handle % width items cleanly */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center children */
    }

    /* 3. Action Buttons Row (Joined Segmented Control) */
    .button-row {
        display: flex;
        gap: 0;
        /* Joined */
        width: 80%;
        /* Targeted Width */
        margin-bottom: 5px;
        /* Reduced spacing */
    }

    .button-row .action-btn,
    .button-row .file-upload-btn {
        background: transparent;
        border: 1px solid #454b52;
        color: #fff;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 500;
        flex: 1;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 0;
        /* Clear default radius */
    }

    /* Left Button Radius */
    .button-row .action-btn {
        border-right: none;
        /* Merge borders */
        border-top-left-radius: 2px;
        border-bottom-left-radius: 2px;
    }

    /* Right Button Radius */
    .button-row .file-upload-btn {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }


    /* 4. Input Fields Grid System - 80% Width */
    /* Conflicting grid styles removed */
    .text-inputs {
        width: 100%;
        max-width: 420px;
        /* Web Fix: Constrain width */
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* Desktop Input Overrides Removed to follow Global Style */

    .text-inputs input:focus {
        color: #20d189;
        outline: none;
    }

    .text-inputs input::placeholder {
        color: #454b52;
    }

    /* Dimmed Placeholder */

    /* 5. Save Button - Reset for Editor Container */
    #saveCardBtn {
        background: #20d189;
        color: #13141a;
        border: none;
        font-weight: 700;
        font-size: 14px;
        padding: 0;
        height: 100%;
        border-radius: 0;
        width: 100%;
        flex: 1;
        margin: 0;
    }

    /* 6. Bottom Nav */
    .bottom-nav {
        background: #13141a;
        border-top: 1px solid #454b52;
        height: 70px;
    }

    .nav-btn.active {
        color: #20d189;
        /* Green Key Color */
        border-top: 2px solid #20d189;
    }

    /* 7. Card & Icons Specifics */
    .scene {
        display: flex;
        justify-content: center;
        /* Center Card */
        margin-top: 0px;
        /* Reduced from 20px to 0px to decrease gap */
        /* Uniform Scaling: Reduce the entire card proportionally to fit screen. */
        transform: scale(0.85);
        transform-origin: top center;
    }

    /* Grade/Texture Selector Icons Adjustment */
    .grade-selector {
        /* User Req: Another 10% smaller (0.6), Another 20px higher (-40px) */
        transform: scale(0.6);
        margin-top: -40px;
        margin-bottom: 10px;
    }

    /* REMOVED: .card__grade overrides.
       Now using the exact same CSS as Desktop for internal card layout.
       "Web Standard" enforced. */

    /* 8. Tab View Architecture */
    .view-section {
        width: 100%;
        min-height: calc(100vh - 56px - env(safe-area-inset-bottom));
        padding-bottom: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--bg-primary);
    }

    .view-section.hidden {
        display: none;
    }

    /* Update Gallery Override for Tab View */
    #myCardsGallery {
        background: transparent;
        /* Let ::before handle background */
        position: static;
        z-index: 1;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        padding-top: 0;
    }

    #galleryContent {
        width: 100%;
        /* Revert to full width so header is full width */
        margin: 0;
        padding: 0;
    }

    /* Gallery Header Row - Stabilized Composite Layer */
    .gallery-header-row {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: fixed;
        top: var(--ios-top, 0px);
        left: 0;
        right: 0;
        z-index: 2147483640;
        /* Force priority */
        background: rgba(17, 18, 22, 1.0);
        /* Solid background - Blur removed per user request */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);

        /* [v27] Persist as own composite layer to prevent "evaporation" */
        transform: translateZ(9999px);
        will-change: transform;
        border-bottom: 1px solid rgba(80, 80, 80, 0.5);
        height: 56px;
        /* Fixed height - no calculations */
        box-sizing: border-box;
    }

    /* Safe-area background cover (for notch/dynamic island devices) */
    .gallery-header-row::before {
        content: '';
        position: absolute;
        top: calc(-1 * env(safe-area-inset-top, 0px));
        left: 0;
        right: 0;
        height: env(safe-area-inset-top, 0px);
        background: rgba(17, 18, 22, 0.9);
    }

    /* Title - simple centering */
    .gallery-header-row .gallery-main-title {
        margin: 0;
        padding: 0;
        font-size: 18px;
        font-weight: 600;
    }

    /* Wallpaper Button - centered vertically in 56px header */
    .wallpaper-btn {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        width: auto;
        min-width: 47px;
        height: 27px;
        padding: 0 10px;
        font-size: 11px;
        font-family: 'Noto Sans KR', sans-serif;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10001;
        pointer-events: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wallpaper-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.4);
    }

    /* Wallpaper Picker Popup */
    .wallpaper-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20000;
    }

    .wallpaper-popup {
        background: #1a1a1a;
        border-radius: 16px;
        padding: 20px;
        min-width: 280px;
        max-width: 90vw;
    }

    .wallpaper-popup-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        color: white;
        font-size: 16px;
        font-weight: 600;
    }

    .wallpaper-close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        cursor: pointer;
        padding: 0 5px;
    }

    .wallpaper-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .wallpaper-option {
        width: 80px;
        height: 80px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: all 0.2s ease;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wallpaper-option:hover {
        border-color: var(--key-color);
        transform: scale(1.05);
    }

    .wallpaper-option.upload-btn {
        background: rgba(255, 255, 255, 0.1);
        border: 2px dashed rgba(255, 255, 255, 0.3);
    }

    /* Main Title "Collections" - Text only, header handles layout */
    .gallery-main-title {
        color: white;
        font-family: inherit;
        font-weight: 500;
        font-size: 18px;
        margin: 0;
        padding: 0;
        /* Remove all layout/positioning - parent header handles it */
        background: transparent;
        border: none;
        position: static;
        height: auto;
        width: auto;
    }

    /* Group Section Style - Gallery Layout Fix */
    /* FIX: Gallery section full width, grid handles internal padding */
    .gallery-section {
        width: 100%;
        margin: 5px 0 25px 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* FIX: Title uses margin to match grid padding for edge alignment */
    .gallery-section-title {
        margin: 0 15px 12px 15px;
        padding: 0 0 10px 0;
        box-sizing: border-box;
    }

    /* ID Selector: The WRAPPER for Sections */
    #galleryGrid {
        display: block;
        /* Stack sections vertically */
        width: 100%;
        margin: 0;
        padding: 0;

        /* Add bottom space for nav */
        padding-bottom: 80px;
    }

    /* FIX: Gallery grid with 15px side padding to match title margin */
    /* [v1.30] Forced column-gap to prevent thumbnails from sticking together */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 10px;
        row-gap: 30px;
        gap: 30px 10px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
        justify-items: stretch;
        justify-content: start;
    }

    .gallery-item {
        width: 100%;
        min-width: 0;
        /* Allow shrinking */
        /* Fill the column */
        aspect-ratio: 320/440;
        height: auto;
        /* Match standard card ratio */
        position: relative;
        background: rgba(255, 255, 255, 0.001);
        border-radius: 0;
        overflow: visible;
        box-shadow: none;
        border: none;

        /* Ensure Clickable */
        cursor: pointer;
        pointer-events: auto;
        z-index: 10;

        /* Activate Container Query Logic */
        container-type: inline-size;
        container-name: card-slot;
    }

    /* FIX: Ghost add-card same size as gallery items */
    .gallery-add-card {
        width: 100%;
        height: auto;
        aspect-ratio: 320/440;
        max-width: none;
    }

    .add-card-ghost {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    /* Adjust Scale Wrapper for 3-column cell */
    .thumbnail-scale-wrapper {
        width: var(--card-width);
        /* Base 320px */
        height: var(--card-height);
        /* Base 440px */

        /*
           PERFECT FIT FORMULA:
           Scale = (New Width / Original Width)
           New Width = 100cqw (100% of container query width)
           Original Width = 320px

           Usage of 'cqw' allows us to decouple strictly from viewport units
           and respond to the actual grid column size perfectly.
        */
        transform: scale(calc(100cqw / 320));
        transform-origin: 0 0;

        /* Force GPU */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        will-change: transform;

        /* ENABLE CLICKS */
        pointer-events: auto;
    }

}

/* End Mobile Override */


/* --- SIMPLIFIED ARROW NAVIGATION --- */
/* Matches "My Card Expanded" Style with Arrows */

.carousel-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--card-height);
    perspective: 1200px;
    overflow: visible;
    transform-style: preserve-3d;

    /* GAP REDUCTION: Reduced from 40px to 20px (User Req: -30%) */
    margin-bottom: 20px;
}

/* Main Center Card - Matches .pos-center */
.card {
    position: relative;
    z-index: 200;
    /* Static Center State */
    transform: translateZ(0) scale(1.0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    transition: transform 0.1s ease-out;
    /* Fast tilt response only */
}

/* NAVIGATION ARROWS */
.nav-arrow {
    position: absolute;
    top: 50%;
    /* Center vertically relative to stage */
    transform: translateY(-50%);
    width: 35px;
    /* Reduced from 50px */
    height: 35px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    font-size: 14px;
    /* Reduced from 20px */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 300;
    /* Above card */
    backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nav-arrow:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.nav-arrow.left {
    left: 20px;
    /* Spacing from screen edge or container edge */
}

.nav-arrow.right {
    right: 20px;
}

/* Hide arrows if on mobile? Maybe make smaller */
@media (max-width: 999px) {
    .nav-arrow {
        width: 30px;
        height: 30px;
        font-size: 12px;
        background: rgba(0, 0, 0, 0.3);
        /* Darker for contrast on mobile bg */
    }

    /* ARROWS: Fixed position for mobile edge-to-edge layout */
    .nav-arrow {
        position: fixed;
        /* Centered relative to the scaled card height */
        top: calc(var(--ios-top, 0px) + 215px);
        transform: translateY(-50%);
        z-index: 2000;
        pointer-events: auto;
    }

    /* Arrows pushed to screen edges */
    .nav-arrow.left {
        left: 10px;
    }

    .nav-arrow.right {
        right: 10px;
    }

    /* --- MOBILE LAYOUT OPTIMIZATION (FANCY FIT) --- */

    /* Global Mobile Reset - NUCLEAR OPTION */
    html,
    body {
        padding: 0;
        margin: 0;
        overflow-x: hidden;
        justify-content: flex-start;
        /* CRITICAL FIX for vertical centering */
        align-items: stretch;
        /* Ensure full width */
        min-height: 100vh;
        height: auto;
    }

    /* Hide Desktop-Only Editor Toggle on Mobile */
    #editorToggleBtn {
        display: none;
    }

    /* Ensure Container is flush */
    #app-container {
        margin-top: 0px;
        padding-top: 0px;
    }

    /* Ensure View Section starts at the absolute top */
    /* This fixes the "vertical centering" issue causing 1/5th whitespace */
    .view-section {
        justify-content: flex-start;
        padding-top: 10px;
        /* Minimal safe area */
        margin-top: 0px;
        min-height: auto;
        /* Allow it to shrink if needed */
    }

    /* 0. Header Adjustment */
    #templateNameHeader {
        margin-top: 4vh;
        /* Reduced to 4% */
        padding-top: 0px;
        margin-bottom: 2vh;
        /* 2% Gap to Card */
        font-size: 18px;
        line-height: 1;
    }

    /* 1. Scale Down Card Stage Aggressively (0.65) - FIT ONE PAGE */
    .carousel-stage {
        transform: scale(0.68);
        transform-origin: center top;
        height: 430px;
        min-height: 430px;
        margin-top: 10px;
        margin-bottom: 20px;
        pointer-events: none;
        /* Fix Tilt */
    }

    .carousel-stage .card {
        pointer-events: auto;
        /* Fix Tilt */
    }

    /* 1.1 Grade Selector (Icon) - Widen Gap */
    .grade-selector {
        transform: scale(0.5);
        /* 0.5 Scale */
        margin-top: 1vh;
        /* 1% Gap from Card */
        margin-bottom: 5px;
    }

    /* 2. Controls - Tighten Up & Ensure Z-Index */
    .controls {
        margin-top: 0px;
        padding-bottom: 0;
        /* [v91] Removed 85px padding to prevent phantom scroll */
        gap: 2vh;
        /* 2% Gap (Inputs <-> Save) */
        position: relative;
        z-index: 201;
        /* Ensure on top of card bottom edge */
        pointer-events: none;
        /* Fix Tilt: Allow clicks to pass through */
    }

    /* Restore interactions for buttons/inputs */
    .controls>* {
        pointer-events: auto;
    }

    /* NEW: Sync Button Heights (Adjust & Upload) - AGGRESSIVE RESET */
    .button-row .action-btn,
    .button-row .file-upload-btn {
        height: 36px;
        min-height: 36px;
        max-height: 36px;
        /* Force exact height */
        line-height: normal;
        /* Reset line-height to let Flexbox centering work */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        box-sizing: border-box;
        border-width: 1px;
        /* Ensure border width is consistent */
        margin: 0;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 13px;
        appearance: none;
        -webkit-appearance: none;
    }

    /* 3. Stack Inputs Vertical (1 Column) - Ultra Compact */
    .text-inputs {
        grid-template-areas:
            "name name"
            "group group"
            "rank rank"
            "label label";
        gap: 4px;
        /* Tiny gap */
        width: 90%;
    }

    /* INCREASED SPECIFICITY for Alignment */
    #createCardView .text-inputs input,
    #createCardView .text-inputs select {
        width: 100%;
        text-align: left;
        /* Left Align */
        padding-left: 10px;
        /* Indent */
        font-size: 13px;
        padding-top: 2px;
        padding-bottom: 2px;
        height: 26px;
        /* Ultra thin inputs */
    }

    /* Fix Label Alignment (Left) */
    /* Conflicting label alignment removed */

    /* 4. Save Button */
    #saveCardBtn {
        padding: 8px 30px;
        font-size: 14px;
        margin-top: 5px;
    }

    /* 5. Bottom Nav - Ultra Compact */
    .bottom-nav {
        height: 40px;
        z-index: 9999;
        /* Ensure nav is always top */
    }

    .bottom-nav .nav-btn {
        font-size: 14px;
        line-height: 40px;
    }

    /* Ensure Label Reset button fits */
    /* Conflicting label centering removed */
}






/* Hidden if no content */
.carousel-side:not(.has-content) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* Previous (Desktop) - Matches .pos-left */
.carousel-side.prev {
    left: 50%;
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

/* Next (Desktop) - Matches .pos-right */
.carousel-side.next {
    left: 50%;
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}

/* Hover Effects - Opacity/Brightness ONLY */
.carousel-side:hover {
    opacity: 1.0;
    filter: brightness(1.0) blur(0px);
    /* Clear blur on hover */
    z-index: 25;
}

.carousel-side.prev:hover {
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

.carousel-side.next:hover {
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}


/* --- SYNCHRONIZED CAROUSEL ANIMATIONS (ID SELECTORS) --- */
/* 1. Center Card Animations */
.card.move-to-prev {
    /* Move to Left Position */
    transform: translateX(-105%) scale(0.7) rotateY(25deg);
    opacity: 0.8;
    filter: brightness(0.4) blur(3px);
    z-index: 100;
}

.card.move-to-next {
    /* Move to Right Position */
    transform: translateX(105%) scale(0.7) rotateY(-25deg);
    opacity: 0.8;
    filter: brightness(0.4) blur(3px);
    z-index: 100;
}

/* 2. Side Card Animations (USING ID for Nuclear Specificity) */

/* Next -> Center */
#carouselNext.move-to-center {
    /* Move to Center Position */
    /* SCALE FIX: 1.0 Match .card + Tilt */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.0);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;
    /* On Top */

    /* SEAMLESS SWAP FIXES */
    border: none;
    /* Remove 1px border */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    /* Match Main Card Shadow perfectly */
}

/* Prev -> Center */
#carouselPrev.move-to-center {
    /* SCALE FIX: 1.0 Match .card + Tilt */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.0);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;

    /* SEAMLESS SWAP FIXES */
    border: none;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Prev -> Out (Far Left) */
#carouselPrev.move-out {
    transform: translate(-50%, -50%) translateX(-200%) rotateY(45deg) scale(0.5);
    opacity: 0;
}

/* Next -> Out (Far Right) */
#carouselNext.move-out {
    transform: translate(-50%, -50%) translateX(200%) rotateY(-45deg) scale(0.5);
    opacity: 0;
}

/* UTILITY: NO TRANSITION (For Instant Snaps) */
.no-transition {
    transition: none;
}


/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
        overflow: visible;
    }

    /* Mobile Scale Bases */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
        z-index: 5;
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
        z-index: 5;
    }

    /* Mobile Movement Overrides */

    /* Center -> Mobile Side */
    .card.move-to-prev {
        transform: translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
    }

    .card.move-to-next {
        transform: translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
    }

    /* Mobile Side -> Center */
    #carouselNext.move-to-center,
    #carouselPrev.move-to-center {
        /* Mobile Main Card Scale is usually 1.0 or slightly less? Assume 1.1 matches desktop main for now or adjust */
        transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    }

    /* Mobile Side -> Out */
    #carouselPrev.move-out {
        transform: translate(-50%, -50%) translateX(-150%) translateZ(-300px) rotateY(45deg) scale(0.4);
        opacity: 0;
    }

    #carouselNext.move-out {
        transform: translate(-50%, -50%) translateX(150%) translateZ(-300px) rotateY(-45deg) scale(0.4);
        opacity: 0;
    }


    /* Extra generous hit area for mobile */
    .carousel-side::after {
        width: 300%;
        height: 200%;
    }

    .carousel-side {
        opacity: 0.5;
        filter: brightness(0.5) blur(1px);
    }

    /* --- MOBILE HOVER FIX --- */
    .carousel-side.prev:hover,
    .carousel-side.prev:active {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }

    .carousel-side.next:hover,
    .carousel-side.next:active {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }
}

/* Main Center Card - Matches .pos-center */
.card {
    position: relative;
    z-index: 200;
    /* High priority */

    /* SCALE FIX: Ensure exact match with Side Card's destination scale */
    transform: translateZ(0) scale(1.1);

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;

    /* DURATION: 0.4s (Master Timing) */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}



/* Hidden if no content */
.carousel-side:not(.has-content) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* Previous (Desktop) - Matches .pos-left */
.carousel-side.prev {
    left: 50%;
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

/* Next (Desktop) - Matches .pos-right */
.carousel-side.next {
    left: 50%;
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}

/* Hover Effects - Opacity/Brightness ONLY */
.carousel-side:hover {
    opacity: 1.0;
    filter: brightness(1.0) blur(0px);
    /* Clear blur on hover */
    z-index: 25;
}

.carousel-side.prev:hover {
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

.carousel-side.next:hover {
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}


/* --- SYNCHRONIZED CAROUSEL ANIMATIONS (ID SELECTORS) --- */
/* 1. Center Card Animations */
.card.move-to-prev {
    /* Move to Left Position */
    transform: translateX(-105%) scale(0.7) rotateY(25deg);
    opacity: 0.8;
    filter: brightness(0.4) blur(3px);
    z-index: 100;
}

.card.move-to-next {
    /* Move to Right Position */
    transform: translateX(105%) scale(0.7) rotateY(-25deg);
    opacity: 0.8;
    filter: brightness(0.4) blur(3px);
    z-index: 100;
}

/* 2. Side Card Animations (USING ID for Nuclear Specificity) */

/* Next -> Center */
#carouselNext.move-to-center {
    /* Move to Center Position */
    /* SCALE FIX: 1.1 Match .card */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;
    /* On Top */
}

/* Prev -> Center */
#carouselPrev.move-to-center {
    /* SCALE FIX: 1.1 Match .card */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;
}

/* Prev -> Out (Far Left) */
#carouselPrev.move-out {
    transform: translate(-50%, -50%) translateX(-200%) rotateY(45deg) scale(0.5);
    opacity: 0;
}

/* Next -> Out (Far Right) */
#carouselNext.move-out {
    transform: translate(-50%, -50%) translateX(200%) rotateY(-45deg) scale(0.5);
    opacity: 0;
}

/* UTILITY: NO TRANSITION (For Instant Snaps) */
.no-transition {
    transition: none;
}


/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
        overflow: visible;
    }

    /* Mobile Scale Bases */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
        z-index: 5;
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
        z-index: 5;
    }

    /* Mobile Movement Overrides */

    /* Center -> Mobile Side */
    .card.move-to-prev {
        transform: translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
    }

    .card.move-to-next {
        transform: translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
    }

    /* Mobile Side -> Center */
    #carouselNext.move-to-center,
    #carouselPrev.move-to-center {
        /* Mobile Main Card Scale is usually 1.0 or slightly less? Assume 1.1 matches desktop main for now or adjust */
        transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    }

    /* Mobile Side -> Out */
    #carouselPrev.move-out {
        transform: translate(-50%, -50%) translateX(-150%) translateZ(-300px) rotateY(45deg) scale(0.4);
        opacity: 0;
    }

    #carouselNext.move-out {
        transform: translate(-50%, -50%) translateX(150%) translateZ(-300px) rotateY(-45deg) scale(0.4);
        opacity: 0;
    }


    /* Extra generous hit area for mobile */
    .carousel-side::after {
        width: 300%;
        height: 200%;
    }

    .carousel-side {
        opacity: 0.5;
        filter: brightness(0.5) blur(1px);
    }

    /* --- MOBILE HOVER FIX --- */
    .carousel-side.prev:hover,
    .carousel-side.prev:active {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }

    .carousel-side.next:hover,
    .carousel-side.next:active {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }
}

/* Main Center Card - Matches .pos-center */
.card {
    position: relative;
    z-index: 200;
    /* High priority */
    /* scale 1.1 from gallery */
    transform: translateZ(0) scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* Match gallery ease */
}

/* Side Cards (Desktop Defaults) - Matches .pos-left/right */
.carousel-side {
    position: absolute;
    top: 50%;
    transform-origin: center center;
    width: var(--card-width);
    height: var(--card-height);
    background-size: cover;
    background-position: center;
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Base State */
    opacity: 0.8;
    /* Match gallery */
    filter: brightness(0.4) blur(3px);
    /* Match gallery */
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: block;
    pointer-events: auto;
}


/* Hidden if no content */
.carousel-side:not(.has-content) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* Previous (Desktop) - Matches .pos-left */
.carousel-side.prev {
    left: 50%;
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

/* Next (Desktop) - Matches .pos-right */
.carousel-side.next {
    left: 50%;
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}

/* Hover Effects - Opacity/Brightness ONLY */
.carousel-side:hover {
    opacity: 1.0;
    filter: brightness(1.0) blur(0px);
    /* Clear blur on hover */
    z-index: 25;
}

.carousel-side.prev:hover {
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

.carousel-side.next:hover {
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}


/* --- SYNCHRONIZED CAROUSEL ANIMATIONS --- */
/* 1. Center Card Animations */
.card.move-to-prev {
    /* Move to Left Position */
    transform: translateX(-105%) scale(0.7) rotateY(25deg);
    opacity: 0.8;
    filter: brightness(0.4);
    z-index: 100;
}

.card.move-to-next {
    /* Move to Right Position */
    transform: translateX(105%) scale(0.7) rotateY(-25deg);
    opacity: 0.8;
    filter: brightness(0.4);
    z-index: 100;
}

/* 2. Side Card Animations */
/* Next -> Center */
.carousel-side.next.move-to-center {
    /* Move to Center Position */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;
    /* On Top */
}

/* Prev -> Center */
.carousel-side.prev.move-to-center {
    /* Move to Center Position */
    transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    opacity: 1;
    filter: brightness(1) blur(0);
    z-index: 200;
}

/* Prev -> Out (Far Left) */
.carousel-side.prev.move-out {
    transform: translate(-50%, -50%) translateX(-200%) rotateY(45deg) scale(0.5);
    opacity: 0;
}

/* Next -> Out (Far Right) */
.carousel-side.next.move-out {
    transform: translate(-50%, -50%) translateX(200%) rotateY(-45deg) scale(0.5);
    opacity: 0;
}

/* UTILITY: NO TRANSITION (For Instant Snaps) */
.no-transition {
    transition: none;
}


/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
        overflow: visible;
    }

    /* Mobile Scale Bases */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
        z-index: 5;
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
        z-index: 5;
    }

    /* Mobile Movement Overrides */

    /* Center -> Mobile Side */
    .card.move-to-prev {
        transform: translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
    }

    .card.move-to-next {
        transform: translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
    }

    /* Mobile Side -> Center */
    .carousel-side.next.move-to-center,
    .carousel-side.prev.move-to-center {
        /* Mobile Main Card Scale is usually 1.0 or slightly less? Assume 1.1 matches desktop main for now or adjust */
        transform: translate(-50%, -50%) translateX(0) translateZ(0) rotateY(0) scale(1.1);
    }

    /* Mobile Side -> Out */
    .carousel-side.prev.move-out {
        transform: translate(-50%, -50%) translateX(-150%) translateZ(-300px) rotateY(45deg) scale(0.4);
        opacity: 0;
    }

    .carousel-side.next.move-out {
        transform: translate(-50%, -50%) translateX(150%) translateZ(-300px) rotateY(-45deg) scale(0.4);
        opacity: 0;
    }


    /* Extra generous hit area for mobile */
    .carousel-side::after {
        width: 300%;
        height: 200%;
    }

    .carousel-side {
        opacity: 0.5;
        filter: brightness(0.5) blur(1px);
    }

    /* --- MOBILE HOVER FIX --- */
    .carousel-side.prev:hover,
    .carousel-side.prev:active {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }

    .carousel-side.next:hover,
    .carousel-side.next:active {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }
}

/* Main Center Card - Matches .pos-center */
.card {
    position: relative;
    z-index: 200;
    /* High priority */
    /* scale 1.1 from gallery */
    transform: translateZ(0) scale(1.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* Match gallery ease */
}

/* Side Cards (Desktop Defaults) - Matches .pos-left/right */
.carousel-side {
    position: absolute;
    top: 50%;
    transform-origin: center center;
    width: var(--card-width);
    height: var(--card-height);
    background-size: cover;
    background-position: center;
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Base State */
    opacity: 0.8;
    /* Match gallery */
    filter: brightness(0.4) blur(3px);
    /* Match gallery */
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: block;
    pointer-events: auto;
}


/* Hidden if no content */
.carousel-side:not(.has-content) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* Previous (Desktop) - Matches .pos-left */
.carousel-side.prev {
    left: 50%;
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

/* Next (Desktop) - Matches .pos-right */
.carousel-side.next {
    left: 50%;
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}

/* Hover Effects - Opacity/Brightness ONLY */
.carousel-side:hover {
    opacity: 1.0;
    filter: brightness(1.0) blur(0px);
    /* Clear blur on hover */
    z-index: 25;
}

.carousel-side.prev:hover {
    transform: translate(-50%, -50%) translateX(-105%) rotateY(25deg) scale(0.7);
}

.carousel-side.next:hover {
    transform: translate(-50%, -50%) translateX(105%) rotateY(-25deg) scale(0.7);
}


/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
        overflow: visible;
    }

    /* "Mobile First": Force side cards to be VERY small to simulate distance */
    /* Scale reduced from 0.8 -> 0.55 */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
        z-index: 5;
    }

    /* Extra generous hit area for mobile */
    .carousel-side::after {
        width: 300%;
        height: 200%;
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
        z-index: 5;
    }

    .carousel-side {
        opacity: 0.5;
        filter: brightness(0.5) blur(1px);
    }

    /* --- MOBILE HOVER FIX --- */
    .carousel-side.prev:hover,
    .carousel-side.prev:active {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }

    .carousel-side.next:hover,
    .carousel-side.next:active {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }
}

/* Main Center Card */
.card {
    position: relative;
    z-index: 20;
    transform: translateZ(0);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}

/* Side Cards (Desktop Defaults) */
.carousel-side {
    position: absolute;
    top: 50%;
    transform-origin: center center;
    width: var(--card-width);
    height: var(--card-height);
    background-size: cover;
    background-position: center;
    border-radius: var(--card-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);

    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);

    opacity: 0.4;
    filter: brightness(0.5) blur(2px) grayscale(0.5);
    z-index: 10;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    display: block;
    pointer-events: auto;
}

/* EXPAND HIT AREA using pseudo-element */
.carousel-side::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    /* Double the hit area */
    height: 150%;
    transform: translate(-50%, -50%);
    /* Center it */
    background: transparent;
    z-index: 20;
    /* Ensure it catches mouse events */
    /* border: 1px solid red; /* Debugging - remove later */
}

/* Hidden if no content */
.carousel-side:not(.has-content) {
    display: none;
    pointer-events: none;
    opacity: 0;
}

/* Previous (Desktop: Push to left) */
/* Previous (Desktop: Push to left) */
.carousel-side.prev {
    left: 50%;
    transform: translate(-50%, -50%) translateX(-120%) translateZ(-150px) rotateY(25deg) scale(0.65);
}

/* Next (Desktop: Push to right) */
.carousel-side.next {
    left: 50%;
    transform: translate(-50%, -50%) translateX(120%) translateZ(-150px) rotateY(-25deg) scale(0.65);
}

/* Hover Effects - Opacity/Brightness ONLY (No Movement to prevent twitching) */
.carousel-side:hover {
    opacity: 1.0;
    filter: brightness(1.2) blur(0px) grayscale(0);
    z-index: 25;
    /* Do NOT change transform here to avoid hit-testing flicker loops */
}

.carousel-side.prev:hover {
    /* Keep exact same transform as non-hover */
    transform: translate(-50%, -50%) translateX(-120%) translateZ(-150px) rotateY(25deg) scale(0.65);
}

.carousel-side.next:hover {
    /* Keep exact same transform as non-hover */
    transform: translate(-50%, -50%) translateX(120%) translateZ(-150px) rotateY(-25deg) scale(0.65);
}


/* --- MOBILE SPECIFIC OVERRIDES --- */
@media (max-width: 99999px) {
    .carousel-container {
        perspective: 800px;
        overflow: visible;
        /* Allow hit area to extend beyond container */
        /* Note: Body overflow-x should handle page scroll prevention */
    }

    /* "Mobile First": Force side cards to be VERY small to simulate distance */
    /* Scale reduced from 0.8 -> 0.55 */
    .carousel-side.prev {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.55);
        /* Increase hit area even more for mobile thumbs */
        z-index: 5;
    }

    /* Extra generous hit area for mobile */
    .carousel-side::after {
        width: 300%;
        /* Triple width for easy thumb reach */
        height: 200%;
    }

    .carousel-side.next {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.55);
        z-index: 5;
    }

    .carousel-side {
        opacity: 0.5;
        filter: brightness(0.5) blur(1px);
    }

    /* --- MOBILE HOVER FIX --- */
    /* Maintain small scale on touch, just brighten */
    .carousel-side.prev:hover,
    .carousel-side.prev:active {
        transform: translate(-50%, -50%) translateX(-85%) translateZ(-200px) rotateY(25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
        /* Force click capture over anything */
    }

    .carousel-side.next:hover,
    .carousel-side.next:active {
        transform: translate(-50%, -50%) translateX(85%) translateZ(-200px) rotateY(-25deg) scale(0.6);
        opacity: 1.0;
        z-index: 50;
    }
}

/* Mobile Gallery: 3-column layout for small screens */
@media (max-width: 768px) {

    /* FIX: Gallery section full width, no extra padding */
    .gallery-section {
        width: 100%;
        margin: 5px 0 25px 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* FIX: Title uses SAME padding as grid so edges align */
    .gallery-section-title {
        margin: 0 15px 12px 15px;
        padding: 0 0 10px 0;
        box-sizing: border-box;
    }

    /* Grid with 15px side padding */
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-gap: 30px 10px;
        gap: 30px 10px;
        padding: 0 15px;
        box-sizing: border-box;
        width: 100%;
    }

    /* Gallery items fill their cell */
    .gallery-item {
        width: 100%;
        min-width: 0;
        /* Allow shrinking */
        height: auto;
        aspect-ratio: 320/440;
    }

    /* FIX: Ghost card SAME size as gallery items */
    .gallery-add-card {
        width: 100%;
        height: auto;
        aspect-ratio: 320/440;
        max-width: none;
    }

    .add-card-ghost {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
}

/* Desktop Gallery: Auto-fill for larger screens */
@media (min-width: 769px) {
    .gallery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, 130px);
        grid-gap: 45px 20px;
        gap: 45px 20px;
        padding: 0;
        justify-content: start;
    }

    .gallery-item,
    .gallery-add-card {
        width: 130px;
        max-width: 130px;
    }

    /* Match visual width of scaled thumbnail: 320px * 0.324 = ~104px */
    .gallery-add-card {
        display: flex;
        justify-content: flex-start;
    }

    .add-card-ghost {
        width: 104px;
        max-width: 104px;
        height: 143px;
        /* 440px * 0.324 = ~143px */
    }
}

.gallery-item {
    /* [v99] CSS default — JS overrides with setProperty('important') */
    height: 142px;
}

.thumbnail-scale-wrapper {
    /* [v99] CSS default — JS overrides with setProperty('important') */
    transform: scale(0.324);
}


/* =========================================
   FINAL DESKTOP LAYOUT & VISIBILITY FIXES
   ========================================= */

/* 1. Editor Button Visibility Logic */
/* DEFAULT (Desktop): Visible */
#editorToggleBtn {
    display: flex;
}

/* MOBILE/APP Override: Hidden on small screens */
@media (max-width: 1024px) {
    #editorToggleBtn {
        display: none;
    }
}

/* 2. Gallery Layout Width Fix (Desktop) */
/* Force full width on desktop to prevent "narrow mobile column" look */
/* DISABLED FOR MOBILE-FIRST WEB VIEW
@media (min-width: 769px) {

    #myCardsGallery .gallery-container,
    #myCardsGallery .gallery-content {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        align-items: center;
    }

    #myCardsGallery .gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
        justify-content: center;
        width: 100%;
    }

    .view-section {
        max-width: none;
        width: 100%;
    }
}
*/
/* ==========================================
   MOBILE APP CONTAINER (Force Mobile Look)
   ========================================== */
html body {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

body {
    background-color: var(--bg-secondary);
    display: flex;
    justify-content: center;
    align-items: center;

    /* Fixed Dimensions for Mobile App Shell */
    width: 100%;
    height: 100%;
    position: fixed;
    /* Prevents scroll bounce on iOS */

    overflow: hidden;
    overscroll-behavior: none;

    margin: 0;
    padding: 0;
}

#app-container {
    width: 100%;
    /* Full Screen Always */
    max-width: none;
    /* Remove Mobile Limit completely */
    height: 100dvh;
    /* [v26] Dynamic Viewport Height for Mobile */
    background-color: var(--bg-secondary);
    position: relative;
    overflow: hidden;
    /* CRITICAL: Prevent container itself from scrolling */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
    /* Mobile Shadow Restored */
    display: flex;
    flex-direction: column;

    /* [v48] Ensure font inheritance in the main container */
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

/* Desktop: Constrain content width, standard responsive web pattern */
@media (min-width: 769px) {
    #app-container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
    }
}

/* Ensure Editor Panel stays inside */
/* Ensure Editor Panel stays inside */
.editor-panel {
    position: absolute;
    /* Context is #app-container */
    z-index: 2000;
    /* Ensure on top */
    overflow-y: auto;
    touch-action: pan-y;
    /* Enable scrolling for overflow content */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll on iOS */
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
    /* Lifted shadow */
}

/* Mobile: Bottom Sheet */
@media (max-width: 768px) {
    .editor-panel {
        width: 100%;
        bottom: 80px;
        /* Sit above bottom-nav (70px height) */
        left: 0;
        right: 0;
        top: auto;
        border-radius: 20px 20px 0 0;
        max-height: calc(100vh - 150px);
        max-height: calc(100dvh - 150px);
        /* Dynamic Viewport Height */
        padding-bottom: 120px;
        /* Extra padding to clear bottom elements */
    }
}

/* Desktop: Right Sidebar */
@media (min-width: 769px) {
    .editor-panel {
        width: 400px;
        /* Fixed reasonable width */
        height: calc(100% - 160px);
        /* Full Height minus button space and bottom nav */
        top: 80px;
        right: 0;
        /* Stick to Right */
        bottom: 80px;
        /* Sit above bottom-nav */
        left: auto;
        border-radius: 0;
        /* Square corners */
        max-height: none;
        border-left: 1px solid #333;
        /* Visual separator */
        background: #1a1a1a;
        /* Ensure background */
    }
}

/* Bottom Nav: Fixed at Bottom of Viewport */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    border-top: 1px solid #333;
    background: #000; /* [FIX] Force black to cover safe area */
    z-index: 1000;
    /* Standardized for UI layering */
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom);
    transition: opacity 0.3s ease;
}

/* Desktop: match bottom-nav width to constrained #app-container */
@media (min-width: 769px) {
    .bottom-nav {
        left: 50%;
        width: min(100%, 1200px);
        transform: translateX(-50%);
    }

    /* Match the My Cards "Gallery" top bar to the same constrained width.
       Keep the existing translateZ compositing layer when re-centering. */
    .gallery-header-row {
        left: 50%;
        right: auto;
        width: min(100%, 1200px);
        transform: translateX(-50%) translateZ(9999px);
    }
}

/* [v226] Fold 4 Overlay Fix: Prevent ghost clicks through adjust image button */
body.edit-mode-grid .bottom-nav {
    pointer-events: none;
    opacity: 1; /* [FIX] Keep opaque to avoid gray box look when transparent */
    background: #000;
}

/* [v2.9] Pure CSS Sliding Indicator (No JS Transforms) */
.nav-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 2px;
    background-color: #20d189;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1005;
    pointer-events: none;
}

body.on-mycard-view .nav-indicator {
    left: 50%;
}


.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #888;
    padding: 0 20px;
    height: 100%;
    width: 50%;
    /* Equal width */
    cursor: pointer;
    border-top: 2px solid transparent;
    /* Prevent jump */
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
}

/* Vertical divider between nav buttons */
.nav-btn:first-child {
    border-right: 1px solid #333;
}

.nav-btn.active {
    color: #20d189;
    border-top: 2px solid transparent; /* Hide native border, use slider */
    background: transparent;
}


/* Buttons: Top Right */
.my-cards-toggle-btn {
    display: none;
    /* REDUNDANT: Exists in bottom nav */
}

/* Template Editor Toggle: Mobile First (Default Hidden) */
.editor-toggle-btn {
    display: none;
    /* Hidden by default on mobile */
    position: fixed;
    top: 20px;
    right: 20px;
    width: auto;
    z-index: 2147483647;
    /* MAX SAFE INTEGER */
    background: #222;
    color: white;
    border: 1px solid #555;
    padding: 10px 20px;
    border-radius: 30px;
    cursor: pointer;
}

/* Desktop Mode (769px+) */
@media (min-width: 769px) {

    /* Use ID selector for higher specificity to override class !important */
    #editorToggleBtn {
        display: flex;
    }
}

/* Ensure padding for content so it doesn't hide behind nav */
/* Scrollable Content Views */
#createCardView,
#myCardsGallery,
.view-section {
    height: calc(100% - 56px - env(safe-area-inset-bottom));
    box-sizing: border-box;
    /* [v91] Trigger scroll ONLY when content hits the tab bar boundary */
    overflow-y: auto;
    overscroll-behavior-y: contain;
    padding-bottom: 20px; /* v4365: Minimal padding, relying on button margin instead */
    padding-top: 0;
    /* USER REQUEST: Shift UI down 100px */
    -webkit-overflow-scrolling: touch;
    /* Smooth scroll iOS */
    touch-action: pan-y;
    overflow-x: hidden;
    /* FIXED: Prevent horizontal wobble in My Cards */
    overscroll-behavior-x: none;
    /* FIXED: Prevent swipe navigation/bounce */
    max-width: 100vw;
}

/* [v26] Only allow scrolling when content actually overflows (Handled by JS) */
.view-section.is-scrollable {
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* CRITICAL MOBILE OVERRIDE: Remove the 100px shift on mobile */
@media (max-width: 999px) {

    #createCardView,
    #myCardsGallery,
    .view-section {
        padding-top: 0px;
        /* Force removed on mobile */
    }
}

/* CREATE CARD Background - 20% darker than default */
#createCardView {
    background-color: #141414;
    padding-top: 40px; /* USER REQUEST: Shift entire UI group down */
}

/* [v130] Visual Card Resize: Scale by 5% as requested by user.
   We use transform: scale() to avoid breaking px-based sticker positions. */
#createCardView .scene {
    transform: scale(1.0);
    transform-origin: center center;
    margin: 0 auto; /* Force center */
}

/* [v1.26 FIX] Prevent horizontal clipping by hiding side elements in Creation View */
#createCardView .carousel-stage {
    gap: 0;
    overflow: visible;
    display: flex;
    justify-content: center;
}

#createCardView .carousel-side {
    display: none; /* Remove side interference */
}

/* [v135] Total Vertical Optimization:
   Aggressively collapse Gap 1, 2, and 3 to maximize screen usage. */
#createCardView .header-container {
    margin-bottom: 0;
    /* COLLAPSE Gap 1 (Name-Card) */
}

#createCardView .carousel-stage {
    margin-top: -3px;
    /* Visual ~50px gap (Buffer 52.5 - 2.5) */
    margin-bottom: -115px;
    /* COLLAPSE Gap 2 (Card-Icons) */
}

/* [v136] Web/Desktop Layout Refinement: 
   Reset scale to 1.0 for Web and ensure clear spacing. 
   Mobile (App) version maintains the 1.05x scale and tight layout. */
@media (min-width: 769px) {
    #createCardView .scene {
        transform: scale(1.0);
        /* Reset scale for Web */
    }

    #createCardView .carousel-stage {
        margin-bottom: 40px;
        /* Increase gap: Card -> Grade Icons (+30px) */
    }

    #createCardView .header-container {
        margin-bottom: 30px;
        /* Clean clearance from Template Name */
    }

    #createCardView .grade-selector {
        margin-bottom: 30px;
        /* Increase gap: Grade Icons -> Buttons (+30px) */
    }

    /* Match the Edit/Upload Image button row width to the Name/Group/Rank
       input fields below it (.text-inputs maxes out at 420px) instead of
       stretching to 80% of the full container width. */
    #createCardView .button-row {
        max-width: 420px;
        margin: 0 auto;
    }

}

/* Move the prev/next nav arrows beside the card on desktop.
   Gated at >=1000px so it never overlaps the mobile @media (max-width:999px)
   rule that forces position:fixed + top:215px (which would otherwise leave the
   arrows pinned to a viewport coordinate instead of next to the card).
   Card is 320px wide and centered in #app-container, so
   offset = half card (160) + gap (16) + arrow width (35) = 211px. */
@media (min-width: 1000px) {
    #createCardView .nav-arrow.left,
    #createCardView .nav-arrow.right {
        position: absolute;
        /* Anchor to the CARD's vertical center, not the container's.
           The card region (.carousel-stage) sits at a fixed offset from the
           top, so its center is a stable 315px regardless of viewport height.
           top:50% would drop the arrows down to the container midpoint (below
           the card). */
        top: 315px;
        transform: translateY(-50%);
    }

    #createCardView .nav-arrow.left {
        left: calc(50% - 259px);
        right: auto;
    }

    #createCardView .nav-arrow.right {
        right: calc(50% - 259px);
        left: auto;
    }
}

#createCardView .grade-selector {
    margin-top: 0;
    margin-bottom: 0;
    min-height: 40px;
    /* EXACT: User requested 40px min-height */
}

#createCardView .controls {
    margin-top: 0;
    gap: 8px;
    /* Balanced tightening for Gap 3 */
}

/* User Request Override: My Cards Header Optimization */
/* User Request Override: My Cards Header Optimization */
#myCardsGallery {
    padding-top: 0;
    /* Remove empty space above header */
    background-color: var(--bg-primary);
    /* Fallback color - can be overridden by background-image via JS */
    box-shadow: none;
    /* Ensure no container shadow */
    /* Force Full Width */
    padding-bottom: 0;
    /* Fix Gap: Allow background to reach bottom */
    position: relative;

    /* Wallpaper Variable Support */
    --gallery-bg: none;
    background-image: var(--gallery-bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Darken and blur effect for wallpaper background */
#myCardsGallery::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* Dynamic viewport height for mobile */
    /* Dynamic viewport height for mobile */
    /* [v82] Optimized background: 30% Darker + Vignette + No Blur for performance */
    background-image: radial-gradient(circle, transparent 20%, rgba(0, 0, 0, 0.85) 100%), var(--gallery-bg);
    background-size: cover, cover;
    background-position: center top, center top;
    background-attachment: scroll;
    /* [v83] 20% Darker than v82 (0.3 * 0.8 = 0.24) */
    filter: brightness(0.24);
    z-index: -1;
    pointer-events: none;
}

/* Ensure content clears the nav and header, but background persists */
#galleryContent {
    padding-top: calc(env(safe-area-inset-top, 0px) + 66px) !important;
    padding-bottom: 120px;
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Title border removed - handled by parent .gallery-header-row */



/* Ensure Toasts stay inside */
#toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 12000; /* Absolute top */
}

/* Ensure Modals stay inside */
/* Duplicate overlay removed to prevent conflicts */

/* Visual Tweak: Reduced Gap for Header */
/* Visual Tweak: Reduced Gap for Header */
.carousel-stage {
    margin-top: 0px;
    /* Removed extra space */
}

/* --- Global Broken Image Fix --- */
img {
    /* Attempt to hide alt text color */
    color: transparent;
}

img[src=""],
img:not([src]) {
    display: none;
}

/* Hide broken image icon if possible */
img:not([src]):not([srcset]) {
    visibility: hidden;
}

/* --- Updated Card Back Content --- */
.card__back-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    pointer-events: none;
    z-index: 20;
    word-break: normal;
    overflow-wrap: anywhere;
}

.card__back-body {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #ddd;
    font-size: 13px;
    line-height: 1.3;
    white-space: pre-wrap;
    pointer-events: none;
    z-index: 20;
    word-break: normal;
    overflow-wrap: anywhere;
}

.card__back-info {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #aaa;
    font-size: 12px;
    letter-spacing: 1px;
    pointer-events: none;
    z-index: 20;
    word-break: normal;
    overflow-wrap: anywhere;
}

/* 에디션 넘버 (#001 · 5/10) */
.card__back-edition {
    position: absolute;
    right: 14px;
    left: auto;
    transform: translateZ(5px);
    text-align: right;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    z-index: 25;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.card__back-edition .cta-edition-total {
    font-size: 0.82em;
    opacity: 0.7;
    margin-left: 4px;
}

/* 액션 버튼 (바로가기 >) */
.card__back-cta {
    position: absolute;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
    left: 50%;
    right: auto;
    width: auto;
    transform: translateX(-50%) translateZ(5px);
    cursor: pointer;
    z-index: 26;
    box-shadow: 0 2px 16px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: opacity 0.2s, transform 0.1s, background 0.2s;
    -webkit-tap-highlight-color: transparent;
    /* fallback: 템플릿에 ctaButton 레이아웃이 없을 때. 인라인 스타일이 있으면 덮어씀 */
    background: rgba(0, 0, 0, 0.65);
    padding: 12px 28px;
    min-width: 55%;
    top: 65%;
}
/* 자동 흐름 띠 — 왼쪽→오른쪽 한 방향 무한 반복 */
.card__back-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: linear-gradient(125deg,
        transparent 0%, transparent 30%,
        rgba(255,0,180,0.5) 35%,
        rgba(0,200,255,0.5) 42%,
        rgba(255,240,0,0.5) 48%,
        rgba(0,255,140,0.5) 54%,
        rgba(180,0,255,0.5) 60%,
        transparent 65%, transparent 100%);
    background-size: 300% 100%;
    background-position: -100% 0%;
    mix-blend-mode: screen;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
    animation: cta-holo-slide 3s linear infinite;
}
@keyframes cta-holo-slide {
    0%   { background-position: -100% 0%; }
    100% { background-position:  200% 0%; }
}

/* 기울임 반응 반대 방향 띠 */
.card__back-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background-image: linear-gradient(125deg,
        transparent 0%, transparent 30%,
        rgba(255,80,0,0.4) 35%,
        rgba(255,240,0,0.4) 42%,
        rgba(0,255,180,0.4) 48%,
        rgba(0,120,255,0.4) 54%,
        rgba(220,0,255,0.4) 60%,
        transparent 65%, transparent 100%);
    background-size: 300% 100%;
    background-position: calc(100% - var(--holo-x, 50%)) 0%;
    mix-blend-mode: screen;
    opacity: 0.45;
    pointer-events: none;
    z-index: 0;
}
.card__back-cta * { position: relative; z-index: 1; mix-blend-mode: normal; }
.card__back-cta .cta-geo {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    border-radius: inherit; overflow: hidden;
}
.card__back-cta .cta-geo canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.card__back-cta .cta-text { position: relative; z-index: 1; }
.card__back-cta.cta-pressing {
    background: rgba(255,255,255,0.22);
}
.card__back-cta.cta-disabled {
    cursor: default;
    box-shadow: none;
    border-color: rgba(255,255,255,0.25);
}
/* ── 직사각형 모양 ─────────────────────────────────────── */
.card__back-cta.cta-shape-rect {
    border-radius: 8px !important;
    min-width: 0 !important;
    white-space: pre-line !important;
}
.card__back-cta.cta-shape-rect .cta-text {
    white-space: pre-line;
    text-align: center;
    line-height: 1.3;
}
.card__back-cta.cta-shape-rect::before,
.card__back-cta.cta-shape-rect::after {
    border-radius: 8px !important;
}
/* rect 카운트다운 — 세로 스택 */
.cta-cd-rect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
}
.cta-cd-rect .cd-unit {
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1.15;
}
.cta-cd-rect .cd-val {
    font-size: 1.05em;
    font-weight: 800;
    letter-spacing: 1px;
}
.cta-cd-rect .cd-lbl {
    font-size: 0.65em;
    font-weight: 500;
    opacity: 0.72;
    letter-spacing: 0.2px;
}
.card__back-cta .cta-count {
    font-size: 0.82em;
    opacity: 0.8;
    margin-left: 5px;
}

/* [v27] Just-in-Time 3D: Side cards are strict 2D to save GPU */
.pos-left .card,
.pos-right .card,
.pos-far-left .card,
.pos-far-right .card,
.pos-hidden-left .card,
.pos-hidden-right .card {
    transform-style: flat;
    isolation: isolate;
    will-change: auto;
    /* Save memory */
}

/* Hide back face on side cards */
.pos-left .card .card__back,
.pos-right .card .card__back,
.pos-far-left .card .card__back,
.pos-far-right .card .card__back,
.pos-hidden-left .card .card__back,
.pos-hidden-right .card .card__back {
    display: none;
}

/* Center card gets full 3D capabilities */
.pos-center .card {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Fixed Z-Index for Gallery Carousel */
.pos-center {
    z-index: 100;
}

.pos-left,
.pos-right {
    z-index: 50;
}

.pos-far-left,
.pos-far-right {
    z-index: 25;
}

/* ==========================================
   Social Login System Styles
   ========================================== */
/* [v1.32] 상세 모달 실행 시 프로필 숨김 (사용자 요청) */
/* Hide auth status ONLY in detail view, but allow it to reappear in editor */
body.detail-view-active:not(.edit-mode-grid) .user-auth-status {
    display: none;
}

/* User Auth Status - Top Left Corner (Aligns with 56px header) */
/* Default hidden - only shown on MY CARD tab via JS */
.user-auth-status {
    position: fixed;
    /* safe-area + 10px to center 36px button in 56px header */
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 15px;
    z-index: 9000; /* [v1.32] 평상시 노출 (9000), 상세 모달(10000)보다 낮음 */
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* [v2.3] Transparent Container Fix: Let children manage shapes */
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    transform: translateZ(10000px);
    backface-visibility: hidden;
}

/* Always show login UI for quick access */
.user-auth-status {
    display: flex;
}

/* Desktop: align with constrained #app-container left edge instead of viewport edge.
   Below 1200px the container still fills the viewport, so default left:15px applies. */
@media (min-width: 1200px) {
    .user-auth-status {
        left: calc(50vw - 600px + 15px);
    }
}


/* Login Button */
.login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 31px; /* 27 + 4 from old container */
    padding: 0 12px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px; /* From old container */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* From old container */
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.login-btn:hover {
    background: #222;
    border-color: rgba(255, 255, 255, 0.3);
}

.login-btn i {
    font-size: 11px;
}

/* User Info (Logged In State) */
.user-info {
    display: flex;
    align-items: center;
    justify-content: center; /* [v2.2] Centering Fix */
    gap: 0;
    padding: 2px;
    background: #111; /* Matches auth container */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%; /* Circle when collapsed */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* From old container */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* [v2.1] Interactive Profile Toggle (Pill Expansion Fix) */
    cursor: pointer;
    overflow: hidden;
    width: auto; /* Allow content to define width */
    max-width: 36px; /* Initial circle state (reduced from 38px) */
    height: 36px; /* Reduced from 38px per user request */
    border-radius: 99px; /* Perfect circle/pill at all times */
    transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s, gap 0.4s;
    box-sizing: border-box;
    white-space: nowrap;
}

.user-info.expanded {
    max-width: 280px; /* Animate to this size */
    padding: 2px 14px 2px 2px;
    gap: 10px;
    border-color: rgba(255, 255, 255, 0.2);
    justify-content: flex-start;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0; /* Never shrink avatar */
}

.user-name {
    color: #fff;
    font-size: 14px;
    font-family: 'Noto Sans KR', sans-serif;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
    /* Hidden by default, shown when expanded */
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.user-info.expanded .user-name {
    display: block;
    opacity: 1;
}

.logout-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
    
    /* Hidden by default, shown when expanded */
    display: none;
    opacity: 0;
}

.user-info.expanded .logout-btn {
    display: flex;
    opacity: 1;
}

.logout-btn:hover {
    color: #f44336;
    background: rgba(244, 67, 54, 0.1);
}

/* Login Modal */
.login-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 20000; /* [v1.32] 시스템 팝업 레이어 (2만 단위) */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

#loginModal.login-modal.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.login-modal-content {
    background: linear-gradient(145deg, #1e1e1e 0%, #2a2a2a 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px;
    width: 90%;
    max-width: 320px;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7);
    transform: translateY(20px) scale(0.95);
    transition: transform 0.3s ease;
}

.login-modal.active .login-modal-content {
    transform: translateY(0) scale(1);
}

.close-modal-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #888;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
}

.close-modal-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.login-title {
    text-align: center;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px 0;
    font-family: 'Noto Sans KR', sans-serif;
}

.login-subtitle {
    text-align: center;
    color: #888;
    font-size: 14px;
    margin: 0 0 32px 0;
    font-family: 'Noto Sans KR', sans-serif;
}

/* Social Login Buttons Container */
.social-login-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Social Login Button Base */
.social-login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Noto Sans KR', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.social-login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.social-login-btn:hover::before {
    opacity: 1;
}

.social-login-btn:active {
    transform: scale(0.98);
}

.social-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.social-icon.fab {
    font-size: 22px;
    width: auto;
    height: auto;
}

/* Google Button */
.social-login-btn.google {
    background: #fff;
    color: #333;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.social-login-btn.google:hover {
    background: #f5f5f5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.social-login-btn.google .social-icon path:nth-child(1) {
    fill: #4285F4;
}

.social-login-btn.google .social-icon path:nth-child(2) {
    fill: #34A853;
}

.social-login-btn.google .social-icon path:nth-child(3) {
    fill: #FBBC05;
}

.social-login-btn.google .social-icon path:nth-child(4) {
    fill: #EA4335;
}

/* Apple Button */
.social-login-btn.apple {
    background: #000;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.social-login-btn.apple:hover {
    background: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

/* Kakao Button */
.social-login-btn.kakao {
    background: #FEE500;
    color: #191919;
    box-shadow: 0 2px 10px rgba(254, 229, 0, 0.3);
}

.social-login-btn.kakao:hover {
    background: #FFEB3B;
    box-shadow: 0 4px 15px rgba(254, 229, 0, 0.4);
}

.social-login-btn.kakao .social-icon {
    color: #191919;
}

/* Naver Button */
.social-login-btn.naver {
    background: #03C75A;
    color: #fff;
    box-shadow: 0 2px 10px rgba(3, 199, 90, 0.3);
}

.social-login-btn.naver:hover {
    background: #04D361;
    box-shadow: 0 4px 15px rgba(3, 199, 90, 0.4);
}

/* Login Terms */
.login-terms {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 24px;
    line-height: 1.5;
    font-family: 'Noto Sans KR', sans-serif;
}

.login-terms a {
    color: #888;
    text-decoration: underline;
}

.login-terms a:hover {
    color: #4CAF50;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .user-auth-status {
        top: 10px;
        left: 10px;
    }

    .login-btn {
        height: 36px;
        width: 36px;
        padding: 0;
        font-size: 14px;
        border-radius: 50%;
    }

    .login-btn span {
        display: none;
    }
    .user-info {
        padding: 4px; /* Center fix */
        font-family: 'Noto Sans KR', sans-serif;
    }

    .user-avatar {
        width: 28px;
        height: 28px;
    }

    .user-name {
        display: none;
    }

    .login-modal-content {
        padding: 30px 24px;
        margin: 20px;
        border-radius: 20px;
    }

    .login-title {
        font-size: 24px;
    }

    .social-login-btn {
        padding: 12px 16px;
        font-size: 15px;
    }
}

/* Sticker Selection UI */
.sticker-item {
    box-sizing: border-box;
    border: none;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sticker-item.selected {
    z-index: 5000;
}

/* Twemoji SVG images inside stickers */
.sticker-item img.emoji,
.sticker-item>img {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    pointer-events: none;
    /* [v65] Performance and Quality Fixes */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    transform: translateZ(0);
    /* Force GPU */
    backface-visibility: hidden;
}

.sticker-delete-btn {
    position: absolute;
    top: -10px;
    /* Adjusted fore smaller size */
    right: -10px;
    width: 20px;
    /* Reduced by ~20% */
    height: 20px;
    background: #ff4444;
    border: 2px solid #fff;
    border-radius: 50%;
    color: white;
    font-size: 12px;
    /* Smaller font */
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    pointer-events: auto;
    /* Counter-scale applied via JS, but base size is fixed here */
}

.sticker-delete-btn::before {
    content: '×';
    line-height: 1;
    margin-bottom: 1px;
    /* Visual center adjustment */
}

/* Allow Overflows for Stickers */
.card__sticker-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 3000;
    /* Topmost (Above card__info 2100) */
    pointer-events: none;
    transform: translateZ(15px); /* [v4428] 15px > glare(9px) → 스냅샷 캡처 시에도 홀로그램 위로 렌더링 보장 */
}

/* [v118] Fix B: Only block interaction for stickers on the card by default */
.card__sticker-layer .sticker-item {
    pointer-events: none;
}

/* [v118] Enable sticker interactivity only when active */
.card__sticker-layer.interaction-enabled .sticker-item {
    pointer-events: auto !important;
}

/* [v29] Note: Parent masks were removed to prevent sticker clipping, 
   but images must stay clipped to their container. */

/* Note: .card__front or .card-3d-wrapper might still clip. 
   If so, we might need to check them, but usually they are the boundary. 
   If user wants "beyond card", we need to unclip parents. */
/* --- Card Share Count (v2.1) --- */
.card-share-count {
    position: absolute;
    bottom: -18px;
    /* Slightly lowered for spacing */
    left: 50%;
    transform: translateX(-50%);
    /* Center horizontally */
    color: #fff;
    /* Brighter for dark background contrast */
    font-size: 8px;
    /* Maintained per user request */
    font-weight: 600;
    white-space: nowrap;
    z-index: 9999;
    /* Max priority to avoid grid clipping */
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 1);
    font-family: 'Inter', sans-serif;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

/* [v1.33] Shared Link UI Enhancement */
.action-btn.green-black {
    background: var(--key-color, #20d189);
    color: #000;
    font-weight: 700;
    border: none;
}

.action-btn.disabled-gray {
    background: #444;
    color: #888;
    cursor: not-allowed;
    pointer-events: none;
    border: 1px solid #555;
}

.creator-banner.pill {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 14px;
}

.creator-banner.pill .creator-text {
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.creator-banner.created-by {
    background: transparent;
    border: none;
    pointer-events: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.creator-banner.created-by .creator-text {
    color: #888;
    font-size: 11px;
}

/* [NEW] Shared-card member avatar stack + settings gear — single pill, no overlap hack */
.creator-banner-group {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    right: 20px;
    left: auto;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
}

.creator-banner-group.hidden {
    display: none;
}

.creator-banner-group .creator-banner {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
}

/* cb (.creator-banner.pill) is the ONE pill — avatars and count text are both children of it */
.creator-banner.pill {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-avatar-stack {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: -8px;
}

.member-avatar-stack.hidden {
    display: none;
}

/* Base circle look shared by the pill stack and the full member-list modal */
.avatar-circle {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #444;
    color: #eee;
    font-size: 10px;
    font-weight: 500;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    flex-shrink: 0;
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-circle.guest {
    background: #555;
    color: #ccc;
}

.member-avatar-stack .avatar-circle {
    width: 22px;
    height: 22px;
    border: 1.5px solid rgba(0, 0, 0, 0.55);
    margin-right: -8px;
}

.member-avatar-stack .avatar-circle:last-child {
    margin-right: 0;
}

.member-avatar-stack .avatar-circle.guest {
    font-size: 12px;
}

.member-avatar-stack .avatar-track-mask {
    width: 96px;
    height: 22px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black 10px, black calc(100% - 10px), transparent 100%);
}

.member-avatar-stack .avatar-track {
    position: absolute;
    top: 0;
    left: 10px;
    display: flex;
    gap: 6px;
    animation: slideAvatars 8s linear infinite;
}

.member-avatar-stack .avatar-track .avatar-circle {
    margin-right: 0;
}

@keyframes slideAvatars {
    0% { transform: translateX(0); }
    100% { transform: translateX(var(--slide-distance, -150px)); }
}

.creator-settings-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
}

.creator-settings-btn.hidden {
    display: none;
}

/* [NEW] Member list modal — opened by tapping the avatar stack */
.member-list-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-list-modal {
    width: 85%;
    max-width: 320px;
    max-height: 70vh;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.member-list-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid #333;
    flex-shrink: 0;
}

.member-list-modal-header span {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.member-list-modal-close {
    background: none;
    border: none;
    color: #888;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
}

.member-list-modal-body {
    overflow-y: auto;
    padding: 8px 0;
}

.member-list-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
}

.member-list-row .avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    margin-right: 0;
    flex-shrink: 0;
}

.member-list-row .avatar-circle.guest {
    font-size: 16px;
}

.member-list-row .member-name {
    color: #ddd;
    font-size: 13px;
}

.member-list-modal-loading {
    text-align: center;
    color: #666;
    font-size: 12px;
    padding: 14px 0;
}

.member-list-empty {
    text-align: center;
    color: #888;
    font-size: 13px;
    padding: 28px 18px;
}

/* [v4379] DEEP LINK MODE: Prevent homepage/landing from showing during card load */
body.deep-link-mode #landing-page,
body.deep-link-mode #createCardView,
body.deep-link-mode #galleryView,
body.deep-link-mode .bottom-nav,
body.deep-link-mode .header-container,
body.deep-link-mode #wallpaperView,
body.deep-link-mode #exhibitionView {
    display: none;
}

body.deep-link-mode {
    background: #000;
    background-color: #000;
}

/* Ensure the detail modal (card view) can still show even if body is deep-link-mode */
body.deep-link-mode #cardDetailModal {
    display: flex;
    visibility: visible;
    opacity: 1;
}
/* [v800] Sticker Tabs System - Unified Text Style */
#stickerPanel .sticker-tabs { 
    display: flex; 
    gap: 0; 
    justify-content: flex-start; 
    align-items: center;
    margin-left: -5px;
}

#stickerPanel .sticker-tab {
    padding: 10px 18px; 
    border: none;
    background: transparent; 
    color: #888; 
    font-size: 13px; 
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.5px;
    position: relative;
    display: flex;
    align-items: center;
}

/* Subtle separator ONLY between tabs */
.sticker-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    height: 10px; /* Slightly shorter for a cleaner look */
    width: 1px;
    background: rgba(255, 255, 255, 0.2); /* Slightly more visible as requested */
    top: 50%;
    transform: translateY(-50%);
}

#stickerPanel .sticker-tab.active {
    color: #20d189; 
    font-weight: bold;
    background: transparent;
    box-shadow: none;
}

/* PNG Palette - Optimized Grid without !important */
#stickerPanel .png-palette {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: auto;
    gap: 12px 8px; 
    padding: 15px 20px 40px; 
    box-sizing: border-box;
    height: auto;
    max-height: none;
}

#stickerPanel .png-palette .sticker-item {
    aspect-ratio: 1 / 1; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 4px; 
    border-radius: 8px; 
    cursor: pointer;
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    min-width: 0;
    height: auto;
}

.png-palette .sticker-item img {
    width: 75%; /* Visually smaller stickers */
    height: 75%;
    object-fit: contain;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.png-palette .sticker-item:hover { 
    background: rgba(255, 255, 255, 0.08); 
    transform: scale(1.05); 
    border-color: rgba(32, 209, 137, 0.4);
}

.png-palette .sticker-item:active { 
    transform: scale(0.95); 
}

/* Tab Panel Visibility */
.sticker-tab-panel {
    animation: fadeInSticker 0.3s ease-out;
}

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

/* CTA fields: 첫 번째 input-group border-top 제거 (Info border-bottom과 중복 방지) */
.cta-fields .input-group:first-child {
    border-top: none;
}

/* datetime-local 달력 아이콘 밝게 */
input[type="datetime-local"] {
    color-scheme: dark;
}

/* ════════════════════════════════════════════════════════════
   [LIVE] 갤러리 상단 캐러셀 — 24h 내 온에어/진행중 카드
   ════════════════════════════════════════════════════════════ */
.live-carousel {
    display: flex;
    flex-wrap: nowrap;
    /* [FIX] 세로 flex 컨테이너(#galleryContent) 안에서 압축되지 않게 고정.
       flex-shrink 기본값(1)이면 그리드 카드가 많을 때 캐러셀이 세로로 줄어들고
       overflow-x:auto가 overflow-y까지 auto로 강제해 카드가 잘림. */
    flex: 0 0 auto;
    gap: 14px;
    width: 100%;
    max-width: 720px;
    margin: 4px 0 18px;
    padding: 8px 16px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* mandatory 스냅이 첫 카드를 컨테이너 끝에 붙여 좌측 패딩을 삼키는 것 방지 */
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

.live-carousel.hidden {
    display: none;
}

.live-carousel::-webkit-scrollbar {
    display: none;
}

.live-carousel {
    scrollbar-width: none;
    /* Firefox */
}

.live-carousel-item {
    position: relative;
    flex: 0 0 auto;
    width: 180px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 캐러셀 내부 카드 슬롯: 그리드 사이징 무력화 (높이는 JS fluidHeight 인라인) */
.live-carousel-item .gallery-item {
    width: 180px !important;
    margin: 0 !important;
}

/* 카드 아래 카운트(흐름 요소) — absolute share-count 대체, 잘리지 않음 */
.live-foot {
    margin-top: 7px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ── 상태 헤더 (카드 위·중앙) ─────────────────────────── */
.live-item-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 22px;
    margin-bottom: 7px;
    font-family: 'Teko', sans-serif;
    line-height: 1;
    white-space: nowrap;
}

/* On Air — 녹색 pill (기본 서체) + 알약 안 깜박이는 원 */
.live-onair {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #fff;
    background: #4CAF50;
    border-radius: 999px;
}

.live-onair::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 5px;
    border-radius: 50%;
    background: #fff;
    animation: liveDotBlink 1s ease-in-out infinite;
}

@keyframes liveDotBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.15; }
}

/* 카운트다운 텍스트 (시작/마감 공용) — 앱 기본 서체로 통일 */
.live-cd {
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffd66b;
}

.live-cd--soon {
    color: #9fd0ff;
}

/* ── 카드 박스 + 홀로그램 스윕 ────────────────────────── */
.live-card-box {
    position: relative;
    width: 180px;
}

/* 살아있는 듯한 은은한 홀로그램 — 카드 위를 천천히 지나감 (height 는 JS 인라인) */
.live-holo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 40;
    border-radius: 4.5% / 3.5%;
    background: linear-gradient(115deg,
        transparent 28%,
        rgba(255, 255, 255, 0.18) 42%,
        rgba(120, 250, 255, 0.22) 48%,
        rgba(190, 130, 255, 0.20) 53%,
        rgba(255, 120, 200, 0.18) 58%,
        transparent 72%);
    background-size: 220% 100%;
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: liveHoloSweep 4s linear infinite;
}

@keyframes liveHoloSweep {
    0%   { background-position: 160% 0; }
    100% { background-position: -60% 0; }
}