/* Design Variables & Root Styles */
:root {
    --bg-dark: #0e0e10;
    --bg-light: #f7f6f5;
    --card-width: 560px;
    --card-ratio: 1.5858; /* 85.6mm / 53.98mm */
    --font-sans: 'Montserrat', 'Noto Sans KR', sans-serif;
    --scroll-progress: 0;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    min-height: 200vh; /* Allow scrolling down to show the back of the card */
    background-color: #000000;
    /* Dynamic background color transition using the JS scroll progress */
    background-image: radial-gradient(
        circle at center,
        color-mix(in srgb, #000000 calc((1 - var(--scroll-progress, 0)) * 100%), #ffffff) 0%,
        color-mix(in srgb, #000000 calc((1 - var(--scroll-progress, 0)) * 100%), #e8e6e3) 100%
    );
    color: color-mix(in srgb, #ffffff calc((1 - var(--scroll-progress, 0)) * 100%), #111111);
    overflow-x: hidden;
    transition: background-color 0.1s ease-out;
}



/* Page Layout & Section Wrappers */
.section-front {
    position: relative;
    width: 100%;
    height: 100dvh;
    background-color: #000000;
    overflow: hidden;
}

.card-portrait-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 6vh 0; /* Add nice vertical black padding to give image breathing room */
}

.card-portrait {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.card-brand {
    position: absolute;
    top: 8dvh;
    right: 8vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; /* Vertical gap between name and location in the same column */
}

.brand-name {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Noto Serif KR', serif;
    font-size: 28px;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: #ffffff;
    line-height: 1;
}

.brand-sub {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Noto Serif KR', serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

/* ==========================================
   RESPONDING WEB LAYOUT: SCREEN (DEFAULT)
   ========================================== */

.section-back {
    position: relative;
    width: 100%;
    min-height: 100dvh;
    background-color: #ffffff;
    color: #111111;
    z-index: 5;
    box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.05);
    padding: 30px 10% 50px 10%; /* Reduced top padding */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 35px;
}

.back-header {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally on screen */
    text-align: center;
    gap: 8px;
    width: 100%;
}

.header-main {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center horizontally on screen */
    text-align: center;
    gap: 4px;
    width: 100%;
}

.back-studio-name {
    font-family: 'Noto Serif KR', serif;
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.back-studio-name-en {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #888888;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

/* Contiguous stack of full-width rows */
.sections-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid #eaeaea; /* Enclose the stack on top */
}

.section-item {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center content */
    width: 100%;
    height: 85px; /* Shorter compact vertical height */
    border-bottom: 1px solid #eaeaea; /* Bottom border for each row */
    text-decoration: none;
    color: #111111;
    overflow: hidden;
    transition: border-color 0.25s ease;
}

.section-item:hover {
    border-color: #111111;
}

.item-left-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.item-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #111111;
    margin-bottom: 4px;
}

.item-title-en {
    font-size: 10px;
    font-weight: 400;
    color: #888888;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-left: 8px;
    font-family: 'Montserrat', sans-serif;
}

.item-tags {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    letter-spacing: -0.01em;
}

.item-tags-en {
    font-size: 10px;
    font-weight: 300;
    color: #888888;
    margin-left: 6px;
    font-family: 'Montserrat', sans-serif;
}

.item-right-image {
    width: 60px;
    height: 60px; /* Square aspect ratio */
    border-radius: 6px; /* Rounded corners */
    overflow: hidden;
    margin-left: 20px; /* Horizontal separation from text */
    align-self: center; /* Center vertically inside row */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.item-right-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-item:hover .item-right-image img {
    transform: scale(1.08);
}

/* Footer row */
.back-footer-row {
    padding-top: 0;
    width: 100%;
}

.footer-info-link {
    display: flex;
    justify-content: space-between; /* Place text on left, QR on right */
    align-items: center; /* Center QR code vertically relative to text block on screen */
    width: 100%;
    text-decoration: none;
    color: #333333;
}

.footer-left-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Left justify all text */
    gap: 5px;
}

.footer-right-group {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Right justify elements */
}

.footer-val {
    font-size: 12px;
    font-weight: 400;
    color: #666666;
    letter-spacing: -0.01em;
    text-align: left;
}

.footer-val-en {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 0.05em;
    text-align: left;
}

.address-full-width {
    display: block;
    width: 100%;
    margin-bottom: 6px;
    white-space: nowrap;
}

.footer-horizontal-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Wraps links to the next line if space gets tight */
    align-items: center;
    column-gap: 15px; /* Horizontal gap */
    row-gap: 5px; /* Vertical gap if wrapped */
}

.footer-qrcode {
    width: 68px; /* Four lines of text tall */
    height: 68px; /* Four lines of text tall */
    display: block;
    background: #ffffff;
    padding: 2px;
    border: 2px solid #cdcdcd; /* Thicker, more visible border around the quiet zone */
    border-radius: 4px; /* Rounded corners matching elements above */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* Scroll Indicator (Visual Hint Only) */
.scroll-divider {
    display: none;
}

/* ==========================================
   MOBILE WEB SCREEN RESPONSIVENESS (< 600px)
   ========================================== */
@media (max-width: 600px) {
    .section-back {
        padding: 25px 20px 40px 20px; /* Reduced top padding */
        gap: 25px;
        min-height: auto;
    }
    
    .card-brand {
        top: 4vh;
        right: 6vw;
        gap: 10px;
    }
    
    .brand-name {
        font-size: 24px;
    }
    
    .brand-sub {
        font-size: 13px;
    }
    
    .back-header {
        gap: 6px;
    }
    
    .header-main {
        gap: 2px;
    }
    
    .back-studio-name {
        font-size: 16px;
    }
    
    .back-studio-name-en {
        font-size: 9px;
    }
    
    .section-item {
        height: 70px; /* Shorter row height on mobile web screen */
    }
    
    .item-left-text {
        padding-right: 10px;
    }
    
    .item-title {
        font-size: 13px;
        margin-bottom: 4px;
    }
    
    .item-title-en {
        font-size: 9px;
        margin-left: 4px;
    }
    
    .item-tags {
        font-size: 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    
    .item-tags-en {
        font-size: 8px;
        margin-left: 0;
    }
    
    .item-right-image {
        width: 48px;
        height: 48px; /* Square aspect ratio on mobile screen */
        border-radius: 4px;
        margin-left: 10px;
    }
    
    .footer-info-link {
        justify-content: space-between;
    }
    
    .footer-val {
        font-size: 11px;
    }
    
    .footer-val-en {
        font-size: 10px;
    }
}

/* ==========================================
   EXHIBITION PAMPHLET SECTIONS (Page 3 & 4)
   ========================================== */
.section-exhibition-artwork {
    position: relative;
    width: 100%;
    height: auto;
    background: #f7f4eb; /* Sophisticated warm linen paper */
    padding: 0 8% 50px 8%; /* Top padding is 0 (handled by Curatorial), 50px bottom margin (single-column margin) */
    box-sizing: border-box;
}

.section-exhibition-poster {
    position: relative;
    width: 100%;
    height: auto;
    background: #f7f4eb; /* Sophisticated warm linen paper */
    padding: 0 8% 50px 8%; /* Top padding is 0, 50px bottom margin (single-column margin) */
    box-sizing: border-box;
}

.exhibition-link {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.exhibition-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    /* Zoom in by 1% to cleanly crop out any thin PDF border artifacts/lines at the image boundaries */
    transform: scale(1.01);
}

/* ==========================================
   EXHIBITION CURATORIAL & PROFILE SECTIONS
   ========================================== */
.section-exhibition-curatorial, .section-exhibition-profile {
    position: relative;
    width: 100%;
    height: auto;
    font-family: var(--font-sans);
    color: #111111;
    display: block;
}

.section-exhibition-curatorial {
    background: #f7f4eb; /* Sophisticated warm linen paper */
    padding: 50px 8% 50px 8%; /* Single-column layout: 50px top and bottom margin */
}

.section-exhibition-profile {
    background: #e9ebd3; /* Artistic warm pastel wasabi green */
    border-top: 1px solid #eaeaea;
    padding: 50px 8%; /* Single-column layout: 50px top and bottom margin */
}

/* Container structures for Curatorial and Profile (Mobile default: single column) */
.curatorial-header, .profile-header, .curatorial-paragraphs, .profile-container {
    display: block;
    width: 100%;
}

.curatorial-header, .profile-header {
    margin-bottom: 25px;
}

.info-title-main {
    font-family: 'Noto Serif KR', serif;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    color: #111111;
    margin-bottom: 6px;
}

.info-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.info-date-range {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 700;
    color: #1b3b1e; /* Dark green theme color */
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}

.info-quote {
    font-family: 'Noto Serif KR', serif;
    font-size: 17.5px;
    font-weight: 600;
    color: #1b3b1e;
    margin-bottom: 30px;
    padding-left: 15px;
    border-left: 3px solid #1b3b1e;
    line-height: 1.55;
}

.curatorial-p {
    font-size: 14px;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 20px;
    text-align: justify;
    word-break: keep-all;
}

.profile-section-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 20px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 8px;
}

.profile-section-title-en {
    font-size: 13px;
    font-weight: 500;
    color: #666666;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-sans);
}

.profile-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 25px;
    color: #1b3b1e;
}

.profile-name-en {
    font-size: 14px;
    font-weight: 500;
    color: #555555;
    font-family: var(--font-sans);
}

.profile-section-title-sub {
    font-family: 'Noto Serif KR', serif;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    margin-bottom: 12px;
    margin-top: 0;
}

.profile-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.profile-list li {
    font-size: 13.5px;
    line-height: 1.75;
    color: #555555;
    margin-bottom: 8px;
    word-break: keep-all;
}

.exhibition-source-links {
    margin-top: 12px; /* Tight vertical gap above divider */
    padding-top: 12px; /* Balanced gap below divider */
    border-top: 1px solid #eaeaea;
    display: inline-block; /* Treat as atomic block */
    width: 100%;
    box-sizing: border-box;
    break-inside: avoid; /* Prevent browser from splitting it across columns */
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.curatorial-paragraphs p:last-of-type {
    margin-bottom: 0;
}

.profile-container .profile-list:last-of-type {
    margin-bottom: 0;
}

.source-link-btn {
    display: inline-block;
    font-size: 13px;
    color: #1b3b1e;
    text-decoration: none;
    border-bottom: 1px solid #1b3b1e;
    margin-right: 25px;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.source-link-btn:hover {
    color: #4b8b54;
    border-color: #4b8b54;
}

.map-link-active, .footer-link-active {
    color: inherit;
    text-decoration: underline; /* Show underline by default on screen */
    transition: color 0.2s ease;
}

.map-link-active:hover, .footer-link-active:hover {
    color: #1b3b1e;
}

@media print {
    /* Exclude the interactive website exhibition panels from the physical business card print PDF */
    .section-exhibition-artwork, .section-exhibition-poster, .section-exhibition-curatorial, .section-exhibition-profile {
        display: none !important;
    }
    
    .map-link-active, .footer-link-active {
        color: #111111 !important;
        text-decoration: none !important;
        pointer-events: none !important;
        cursor: default !important;
    }
    
    .print-hide {
        display: none !important; /* Hide link arrows in print PDF */
    }
}

/* ==========================================
   DESKTOP & LANDSCAPE WEB RESPONSIVENESS (Aspect Ratio >= 1.2)
   ========================================== */
@media (min-aspect-ratio: 1.2) {
    body {
        min-height: 100vh;
        overflow-y: auto; /* Allow vertical scrolling on desktop to see the appended exhibition panels */
    }
    
    .card-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* Wrap pages in pairs */
        width: 100vw;
        height: auto;
    }
    
    .section-front {
        width: 50vw;
        height: auto;
        min-height: 100vh;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .section-front .card-portrait-wrapper {
        flex: 1;
        width: 100%;
        height: auto;
    }
    
    .section-back {
        width: 50vw;
        height: auto;
        min-height: 100vh;
        overflow-y: hidden; /* Unified page scroll only, no internal panel scrollbar */
        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.05);
        padding: 3vh 8% 5vh 8%; /* Reduced top padding */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .section-back .section-item {
        height: auto !important;
        padding: 1.8vh 0 !important; /* Flexible vertical gap between classes */
    }
    
    .section-exhibition-artwork {
        width: 50vw;
        height: auto;
        position: relative;
        box-sizing: border-box;
        background: #f7f4eb; /* Unified warm linen paper */
        padding: 0 0 100px 8%; /* Top padding is 0 (handled by Curatorial), 100px bottom padding, outer left grid margin */
    }

    .section-exhibition-artwork .exhibition-image {
        height: auto;
        object-position: right center;
    }

    .section-exhibition-poster {
        width: 50vw;
        height: auto;
        position: relative;
        box-sizing: border-box;
        background: #f7f4eb; /* Unified warm linen paper */
        padding: 0 8% 100px 0; /* Top padding is 0, 100px bottom padding, outer right grid margin */
    }

    .section-exhibition-poster .exhibition-image {
        height: auto;
        object-position: left center;
    }
    
    .section-exhibition-curatorial {
        width: 100vw;
        height: auto;
        position: relative;
        box-sizing: border-box;
        display: block;
        padding: 100px 8% 100px 8%; /* Double-column layout: 100px top and bottom margin */
        background: #f7f4eb; /* Unified warm linen paper */
    }

    .section-exhibition-profile {
        width: 100vw;
        height: auto;
        position: relative;
        box-sizing: border-box;
        display: block;
        padding: 100px 8%; /* Double-column layout: 100px top and bottom margin */
        border-top: 1px solid #eaeaea;
        background: #e9ebd3; /* Artistic warm pastel wasabi green */
    }

    /* Desktop layout styling for Curatorial and Profile containers using CSS Columns */
    .curatorial-header, .profile-header {
        max-width: 1200px;
        margin: 0 auto 35px auto;
        width: 100%;
        box-sizing: border-box;
    }

    .curatorial-paragraphs {
        column-count: 2;
        column-gap: 8%;
        text-align: justify;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .profile-container {
        column-count: 2;
        column-gap: 8%;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

}

/* ==========================================================
   PRODUCTION PRINTING ACCOMMODATION: PORTRAIT CARD (86x54mm)
   ========================================================== */
@media print {
    @page {
        size: 61mm 91mm; /* Gelato vertical card template (55x85mm trim + 3mm bleed on all sides) */
        margin: 0;
    }
    
    html, body {
        width: 61mm;
        height: 91mm;
        min-height: 91mm !important; /* Prevent body overflow in print mode */
        background: #ffffff !important;
        background-image: none !important; /* Disable scroll gradient in print */
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* Center the physical card cut bounds exactly in the printed page */
    .card-container.gelato-cards-55x85mm-400gsm {
        width: 61mm !important;
        height: 182mm !important; /* Stacked front & back card faces for single pass */
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .gelato-cards-55x85mm-400gsm .section-front,
    .gelato-cards-55x85mm-400gsm .section-back {
        position: relative !important;
        width: 61mm !important;
        height: 91mm !important;
        page-break-after: always;
        overflow: hidden !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
    }
    
    /* 1. FRONT CARD PRINT PRESETS (Extends background into bleed boundaries) */
    .gelato-cards-55x85mm-400gsm .section-front {
        background-color: #000000 !important;
    }
    
    .gelato-cards-55x85mm-400gsm .card-portrait-wrapper {
        padding: 4mm 0 !important;
    }
    
    /* Keep branding safely within the Safe Design Zone (margin 3mm + 3mm bleed) */
    .gelato-cards-55x85mm-400gsm .card-brand {
        top: 8.5mm !important;
        right: 9.5mm !important;
        gap: 1.5mm !important;
    }
    
    .gelato-cards-55x85mm-400gsm .brand-name {
        font-size: 16pt !important;
        letter-spacing: 0.1em !important;
    }
    
    .gelato-cards-55x85mm-400gsm .brand-sub {
        font-size: 8pt !important;
        letter-spacing: 0.05em !important;
    }
    
    /* 2. BACK CARD PRINT PRESETS (Enforces strict 49x79mm Safe Design Zone) */
    .gelato-cards-55x85mm-400gsm .section-back {
        /* Adjusted padding: 6mm + 1.5mm bleed top, 5mm + 1.5mm bleed bottom, 4mm + 2.5mm bleed sides */
        padding: 7.5mm 6.5mm 6.5mm 6.5mm !important; /* Reduced top margin from 10.5mm to 7.5mm (safe margin is 6.5mm) */
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        gap: 0 !important;
        min-height: 91mm !important;
        background-color: #ffffff !important;
    }
    
    .back-header {
        gap: 0.5mm !important;
    }
    
    .back-studio-name {
        font-size: 9.5pt !important;
        letter-spacing: 0.02em !important;
    }
    
    .back-studio-name-en {
        font-size: 5pt !important;
        letter-spacing: 0.04em !important;
    }
    
    /* Hide decorative components, taglines, and images to avoid layout fat */
    .item-right-image {
        display: block !important; /* Restore images in print mode */
        width: 6.5mm !important;
        height: 6.5mm !important;
        border-radius: 0.8mm !important;
        margin-left: 1.5mm !important;
        align-self: center !important;
        box-shadow: 0 0.5mm 1mm rgba(0, 0, 0, 0.05) !important;
    }
    
    .item-tags-en {
        display: none !important; /* Hide English tag details to prevent overflow wrapping */
    }
    
    .sections-stack {
        gap: 0 !important;
        margin-top: 1.5mm !important;
        border-top: 0.5px solid #eaeaea !important;
    }
    
    /* Restructure course row items into horizontally aligned typographic cards */
    .section-item {
        display: flex !important;
        flex-direction: row !important; /* Horizontal layout for text + image */
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        height: 9mm !important; /* Perfectly targets 85.6mm card height */
        border-bottom: 0.5px solid #eaeaea !important;
        padding: 0 !important;
    }
    
    .item-left-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* Left justified */
        text-align: left !important;
        width: 100% !important;
    }
    
    .item-title {
        font-size: 8.2pt !important; /* Scaled up from 7.5pt */
        margin-bottom: 0.1mm !important;
        letter-spacing: 0.02em !important;
    }
    
    .item-title-en {
        font-size: 5.5pt !important; /* Scaled up from 5pt */
        margin-left: 1mm !important;
        letter-spacing: 0.04em !important;
    }
    
    .item-tags {
        font-size: 5.0pt !important; /* Scaled up from 4.4pt */
        letter-spacing: -0.03em !important;
        color: #666666 !important;
    }
    
    .back-footer-row {
        margin-top: auto !important;
        padding-top: 1.5mm !important;
    }
    
    .footer-info-link {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-end !important;
        width: 100% !important;
    }
    
    .footer-left-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5mm !important;
    }
    
    .footer-horizontal-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5mm !important;
    }
    
    .footer-right-group {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }
    
    .footer-val {
        font-size: 5.8pt !important; /* Scaled up from 5pt */
        color: #666666 !important;
    }
    
    .footer-val-en {
        font-size: 5.2pt !important; /* Scaled up from 4.6pt */
        color: #666666 !important;
    }
    
    .footer-qrcode {
        width: 10.5mm !important;
        height: 10.5mm !important;
        display: block !important;
        background: #ffffff !important;
        padding: 0.4mm !important;
        border: 0.4mm solid #cccccc !important; /* Thicker, more visible border in print */
        border-radius: 0.8mm !important; /* Rounded corners in print */
        box-shadow: none !important;
    }
    
    .address-full-width {
        margin-bottom: 0.6mm !important;
        white-space: nowrap !important;
    }
}