a.ui-button:hover {
    color: #fff;
    text-decoration: none;
}

/*
Visual Studio-like style based on original C# coloring by Jason Diamond <jason@diamond.name>
*/
.hljs {
display: block;
overflow-x: auto;
background: white;
color: black;
}

.hljs-comment,
.hljs-quote,
.hljs-variable {
color: #008000;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
color: #00f;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
color: #a31515;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
color: #2b91af;
}

.hljs-doctag {
color: #808080;
}

.hljs-attr {
color: #f00;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link {
color: #00b0e8;
}


.hljs-emphasis {
font-style: italic;
}

.hljs-strong {
font-weight: bold;
}

.documentation-links {
position: relative;
float: right;
margin-inline-start: -100%;
padding-block-start: 0.5rem;
padding-inline-end: 1rem;
}

.documentation-links a {
text-decoration: none !important;
padding: 6px 0;
margin-inline-start: 24px;
display: inline-flex;
align-items: center;
}

.social-link {
margin-inline-end: 8px;
text-decoration: none;
}

/* next-demos */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    --rz-body-font-size: 1rem;
}

.light {
    padding-block-start: 3rem;
    padding-block-end: 6rem;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-size: 3000px;
    background-position: 50% -1600px;
}

.dark {
    padding-block-start: 6rem;
    padding-block-end: 3rem;
    background-color: #050A23;
    background-image: url("../images/background.svg");
    background-repeat: no-repeat;
    background-position: 50% 0;
}

.demos-home.dark,
.demos-home.dark h1,
.demos-home.dark h2,
.demos-home.dark h3,
.demos-home.dark h4,
.demos-home.dark h5,
.demos-home.dark h6,
.demos-home.dark p {
    color: #ffffff !important;
}

/* Top navigation links */
.nav-links a {
    color: var(--rz-text-title-color);
    transition: all 0.3s;
    text-decoration: none;
}

/* CTA Buttons

.cta-button {
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.25rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    padding: 1rem 2rem;
    border-radius: .75rem;
    border: 2px solid var(--rz-text-color);
    box-sizing: border-box;
    color: var(--rz-text-color) !important;
    transition: all 0.3s ease-in-out;
}

.dark .cta-button {
    border-color: rgba(255,255,255,.3);
    color: #ffffff !important;
}

.cta-button.primary {
    font-weight: 600;
    color: #ffffff !important;
    border-color: var(--rz-primary); /*#FF504D
    background: var(--rz-primary); /*§#FF504D
}

.cta-button:hover {
    text-decoration: none;
    color: var(--rz-text-contrast-color) !important;
    border-color: var(--rz-base-800);
    background: var(--rz-base-800);
}
.dark .cta-button:hover {
    text-decoration: none;
    color: #050A23 !important;
    border-color: #ffffff;
    background: #ffffff;
}

.cta-button:active {
    color: #c2c2c2 !important;
}
.dark .cta-button:active {
    color: #515256 !important;
}
 */
/* Updated layout */

.customers-logos {
    
    img {
        height: 20px;
        max-width: 100%;
    }

    .square img {
        height: 40px;
    }

    span {
        min-width: 100px;
        padding: 8px 12px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Radzen Features */

video {
    box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.5);
    background: rgba(0,0,0,.3) url("../images/play.svg") no-repeat 50% 50%;
}

.radzen-features ul {
    margin-block-start: 0;
    margin-block-end: 0;
    list-style-image: url("../images/checkmark.svg");
}

.radzen-features li {
    cursor: default;
    padding-block-start: 0.6rem;
    padding-block-end: 0.6rem;
    transition: all 0.3s ease-in-out;
}

/* Components List */
.components-list {
    --rz-link-hover-text-decoration: none;

    .rz-link-disabled
    {
        pointer-events: none;
        opacity: 0.5;
    }

    .rz-link {
        display: block;
        width: 100%;
        font-weight: 600;
        position: relative;
        border-radius: var(--rz-card-border-radius);

        .rz-badge {
            --rz-badge-font-size: 12px;
            --rz-badge-line-height: 12px;
            --rz-badge-padding: 1px 2px;
            --rz-badge-border-radius: var(--rz-border-radius-4);
            position: absolute;
            width: 16px;
            height: 16px;
            inset-inline-start: 32px;
            inset-block-start: -4px;
            overflow: hidden;
            text-align: start;
            transition: width .15s 0.1s linear;

            span {
                margin: 0 4px;
                text-transform: uppercase;
                font-size: 9px;
            }
        }

        .rz-link-text {
            display: flex;
            align-items: center;
            gap: 0.5rem;

            > .rzi {
                font-size: 28px;
                font-weight: 300;
                width: 12px;
                height: 12px;
                font-variation-settings: 'opsz' 40;
                background-color: var(--rz-primary-lighter);
                color: var(--rz-on-primary-lighter);
                border-radius: var(--rz-card-border-radius);
                width: 44px;
                height: 44px;
            }
        }
    }

    .rz-link:hover,
    .rz-link:focus-visible {
        .rz-badge.rz-badge-success {
            width: 46px;
        }

        .rz-badge.rz-badge-info {
            width: 66px;
        }
    }

    .rz-link:focus-visible {
        outline: var(--rz-outline-focus);
    }
}

/* Main Site Navigation on Product pages */

.site-main-top-nav {
    --rz-menu-item-icon-margin-inline: 0;
    --rz-menu-item-icon-color: var(--rz-on-primary-darker);
    --rz-menu-item-icon-hover-color: var(--rz-white);
    --rz-menu-background-color: var(--rz-base-darker);
    --rz-menu-top-item-color: var(--rz-on-base-darker);
    --rz-menu-top-item-background-color: var(--rz-base-darker);
    --rz-menu-top-item-hover-color: var(--rz-on-base-darker);
    --rz-menu-top-item-selected-color: var(--rz-on-base-darker);
    --rz-menu-item-color: var(--rz-on-base-darker);
    --rz-menu-item-background-color: var(--rz-base-darker);
    --rz-menu-item-hover-color: var(--rz-on-base-dark);
    --rz-menu-item-hover-background-color: var(--rz-base-dark);
    --rz-menu-item-selected-color: var(--rz-on-base-darker); 
    --rz-menu-item-selected-background-color: var(--rz-base-dark);
}

.rz-material3 .demos-nav,
.rz-material3-dark .demos-nav  {
    padding: 0.5rem;
}

/* Footer */

.copyright {
    margin-block-start: 6rem;
    opacity: .2;
    transition: all 0.4s ease-in-out;
}
.copyright:hover {
    opacity: 1;
}

.row.copyright p {
    font-size: 1rem;
    font-weight: 300;
    color: #ACAFB9;
}

/* Demos Content */

p code,
ul code {
    display: inline-block;
}

p code,
ul code,
pre {
    padding: 0 0.5rem;
    font-size: 0.8125em !important;
    line-height: 1.25rem;
    background: var(--rz-base);
    color: var(--rz-on-base);
    border-radius: var(--rz-card-border-radius);
    letter-spacing: -0.04em;
}

pre {
    overflow-x: auto;
}

.rz-sidebar {
    inset-block-end: 0 !important;
}

.rz-card.docu p,
.rz-card.docu ul {
    line-height: 1.6;
    margin-block-end: 1rem;
}

.docu img,
.docu svg {
    display: block;
    width: 100%;
    max-width: 700px;
    margin: 4rem auto;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.06);
}

svg.illustration {
    box-shadow: none;
    max-width: 300px;
    min-height: 220px;
}

.example-container {
    max-width: 1440px;
}

/* Demos Sidebar */

.demos-sidebar .rz-panel-menu .rz-badge {
    margin-inline-start: 0.5rem;
    font-size: 9px;
    line-height: 12px;
}

/* Demos Tabs */

.example-tabs > .rz-tabview-panels {
    border-inline-end: none;
    border-block-end: none;
    border-inline-start: none;
}

.example-tabs > .rz-tabview-nav {
    background-color: var(--rz-tabs-tab-background-color);
    border-radius: var(--rz-card-border-radius) var(--rz-card-border-radius) 0 0;
    padding: 0 1rem;
}

.rz-tabview-top.example-tabs > .rz-tabview-nav > li {
    z-index: 1;
    border-radius: 0;
    border-inline-start: none;
    border-inline-end: none;
    border-block-end: none;
    transition: none;
    overflow: hidden;
}

.rz-tabview-top.example-tabs > .rz-tabview-nav > li > a > .rz-tabview-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.monaco-editor .view-overlays .current-line {
    border: none !important;
}

.source-tab-item {
    margin: calc(-1 * var(--rz-tabs-padding));
    overflow: hidden;
}

/* Demos TOC */
.demos-right-nav {
    position: sticky;
    inset-block-start: 2rem;
}

/* Promo */

.promo-alert {
    background: linear-gradient(110deg, rgba(0,0,0,0.4) 100%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.4) 100%),linear-gradient(110deg, #000 20%, #AA01E4 75%, #534EEB 100%);
    background-size: cover;
    padding: 2rem !important;
}

/* Responsive */

@media (max-width: 1024px) {
    .documentation-links {
        float: none;
        margin-inline-start: 0;
        margin-block-end: 1rem;
    }
    .documentation-links a {
        display: flex;
        margin-inline-start: 0;
    }
}

@media (max-width: 767px) {
    .nav-links a {
        margin-inline-start: 1rem;
    }

    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-header,
    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-footer,
    .rz-layout .rz-layout:not(:has(>.rz-sidebar:nth-of-type(2))) .rz-body {
        width: initial;
    }
}

@media (max-width: 576px) {
    .all-components h4 {
        font-size: 1.25rem;
        font-weight: 700;
    }
    .all-components a {
        font-size: 1.25rem;
        font-weight: 400;
    }
    .popular-components a {
        width: 7rem;
        margin-block-end: 2rem;
    }
    .customers h3 {
        margin: 1rem 0 0;
    }
    .copyright {
        opacity: 1;
    }
}

#blazor-error-ui {
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    inset-block-end: 0;
    inset-inline-start: 0;
    padding-block: 0.6rem 0.7rem;
    padding-inline: 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    inset-inline-end: 0.75rem;
    inset-block-start: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding-block: 1rem;
    padding-inline: 3.7rem 1rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.rz-app-loading {
    position: fixed;
    inset: 0;
    background: var(--rz-base-background-color);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}

.logo-loading {
    width: 240px !important;
    height: 240px !important;
    position: relative;
    border-radius: 120px;
    animation: boxShadow 2s infinite alternate-reverse;
    animation-delay: 0ms;
}

.logo-loading:before {
    position: absolute;
    content: "";
    inset: 0;
    background: radial-gradient(circle at bottom, #FE9041 0%, #FF504D 33%, #BD00FF 66%, #534EEB 100%) top right/300% 400%;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 44.3294 6.9729 55.0303 17.1903 60.3741L17.2101 60L16.4699 46H24.9016C24.9016 46 24.0901 52.403 24.0901 60C24.0901 61.0352 24.1059 62.0482 24.1332 63.0258C26.65 63.662 29.2855 64 32 64ZM34.7165 21.1563C31.3677 23.0897 29.6006 26.3148 28.9123 27.8485L24.1052 31.7768C24.0954 31.1937 24.0901 30.6006 24.0901 30C24.0901 22.403 24.9405 16 24.9405 16H16.4699C16.4699 16 17.2101 22.403 17.2101 30C17.2101 37.597 16.4699 44 16.4699 44H24.9405C24.9405 44 24.3074 39.2329 24.1337 33.0449L24.9155 32.4061C25.6087 33.3444 27.4753 35.436 30.8322 36.2859C35.2237 37.3978 43.2636 36.6629 43.2636 36.6629C43.2636 36.6629 36.4332 32.6211 32.0416 31.5092C29.5122 30.8687 27.4277 31.108 26.1147 31.4261L29.3775 28.7599C30.9421 28.8081 34.5296 28.6878 38.0541 26.937C42.743 24.6078 51.9471 15.2096 51.9471 15.2096C51.9471 15.2096 39.2279 18.5516 34.7165 21.1563Z"/></svg>') center/contain;
    mask: url('data:image/svg+xml;utf8,<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M32 64C49.6731 64 64 49.6731 64 32C64 14.3269 49.6731 0 32 0C14.3269 0 0 14.3269 0 32C0 44.3294 6.9729 55.0303 17.1903 60.3741L17.2101 60L16.4699 46H24.9016C24.9016 46 24.0901 52.403 24.0901 60C24.0901 61.0352 24.1059 62.0482 24.1332 63.0258C26.65 63.662 29.2855 64 32 64ZM34.7165 21.1563C31.3677 23.0897 29.6006 26.3148 28.9123 27.8485L24.1052 31.7768C24.0954 31.1937 24.0901 30.6006 24.0901 30C24.0901 22.403 24.9405 16 24.9405 16H16.4699C16.4699 16 17.2101 22.403 17.2101 30C17.2101 37.597 16.4699 44 16.4699 44H24.9405C24.9405 44 24.3074 39.2329 24.1337 33.0449L24.9155 32.4061C25.6087 33.3444 27.4753 35.436 30.8322 36.2859C35.2237 37.3978 43.2636 36.6629 43.2636 36.6629C43.2636 36.6629 36.4332 32.6211 32.0416 31.5092C29.5122 30.8687 27.4277 31.108 26.1147 31.4261L29.3775 28.7599C30.9421 28.8081 34.5296 28.6878 38.0541 26.937C42.743 24.6078 51.9471 15.2096 51.9471 15.2096C51.9471 15.2096 39.2279 18.5516 34.7165 21.1563Z"/></svg>') center/contain;
    animation: colorChange 2s infinite alternate-reverse;
    animation-delay: 0ms;
}

@keyframes colorChange {
    to {
        background-position: bottom right;
    }
}

@keyframes boxShadow {
    0% {
        box-shadow: 0 0 0 20px rgba(97, 92, 237, 0.2), 0 0 0 40px rgba(97, 92, 237, 0.2);
    }
    100% {
        box-shadow: 0 0 0 20px rgba(255, 80, 77, 0.2), 0 0 0 40px rgba(255, 80, 77, 0.2);
    }
}

.embed-container {
    position: relative;
    padding-block-end: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 100%;
}

.code-editor {
    height: 500px; 
    width: 100%;
}


.playground .code-editor {
    height: 100%; 
    width: 100%;
}


/* ===== Family Home ===== */
/* 색은 모두 Radzen 테마 변수를 씁니다. 라이트/다크 어느 쪽에서도 읽힙니다. */

.fh-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Modern Card Overrides --- */
.fh-card {
    border-radius: 16px !important;
    border: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.12)) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.25s ease;
}

.fh-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
}

/* --- 히어로 --- */
.fh-hero {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: clamp(16rem, 32vw, 24rem);
    display: flex;
    align-items: flex-end;
    background-color: var(--rz-base-800);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fh-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05);
}

.fh-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.85) 100%);
}

.fh-hero__body {
    position: relative;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fh-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    width: fit-content;
}

.fh-hero__eyebrow {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}

.fh-hero__title {
    margin: 0;
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(1.35rem, 3.2vw, 2.25rem);
    text-wrap: balance;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.fh-hero__lead {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    max-width: 46rem;
    line-height: 1.6;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.fh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.25rem;
}

.fh-btn-hero {
    border-radius: 12px !important;
    padding: 0.6rem 1.25rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(58, 128, 233, 0.4) !important;
}

.fh-btn-hero-sub {
    border-radius: 12px !important;
    backdrop-filter: blur(8px) !important;
}

/* --- 스마트 퀵 카트 바 (Quick Navigation Bar) --- */
.fh-quick-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.fh-quick-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    background: var(--rz-card-background-color, var(--rz-base-200));
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.2));
    border-radius: 16px;
    text-decoration: none !important;
    color: var(--rz-text-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.fh-quick-card:hover {
    transform: translateY(-4px);
    border-color: var(--rz-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.fh-quick-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.4rem;
}

.fh-quick-card__icon--primary {
    background: rgba(58, 128, 233, 0.15);
    color: var(--rz-primary);
}

.fh-quick-card__icon--warning {
    background: rgba(255, 179, 0, 0.15);
    color: #ffb300;
}

.fh-quick-card__icon--danger {
    background: rgba(255, 82, 82, 0.15);
    color: #ff5252;
}

.fh-quick-card__icon--success {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

.fh-quick-card__icon--info {
    background: rgba(0, 188, 212, 0.15);
    color: #00bcd4;
}

.fh-quick-card__icon--camera {
    background: rgba(156, 39, 176, 0.15);
    color: #ab47bc;
}

.fh-quick-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
    overflow: hidden;
}

.fh-quick-card__title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--rz-text-title-color, var(--rz-text-color));
}

.fh-quick-card__desc {
    font-size: 0.78rem;
    color: var(--rz-text-secondary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fh-quick-card__arrow {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color);
    transition: transform 0.2s ease;
}

.fh-quick-card:hover .fh-quick-card__arrow {
    transform: translateX(3px);
    color: var(--rz-primary);
}

/* --- 가족 이름 칩 --- */
.fh-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.fh-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.fh-chip__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* --- 섹션 --- */
.fh-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.fh-section__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
}

.fh-section__icon-wrapper {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.fh-section__icon-wrapper--primary { background: rgba(58, 128, 233, 0.15); color: var(--rz-primary); }
.fh-section__icon-wrapper--info { background: rgba(0, 184, 212, 0.15); color: #00b8d4; }
.fh-section__icon-wrapper--success { background: rgba(0, 200, 83, 0.15); color: #00c853; }
.fh-section__icon-wrapper--danger { background: rgba(255, 82, 82, 0.15); color: #ff5252; }

.fh-section__count {
    color: var(--rz-text-secondary-color);
    font-size: 0.875rem;
    font-weight: 400;
}

/* --- 미디어 그리드 --- */
/* 가로/세로 사진이 각자 제 비율로 보이도록 컬럼(masonry) 방식을 씁니다.
   grid + 고정 aspect-ratio 로는 세로 사진이 가로로 잘려 보입니다. */
.fh-grid {
    columns: 9.5rem;
    column-gap: 0.875rem;
}

.fh-grid--wide {
    columns: 13.5rem;
}

.fh-tile {
    /* inline-block + break-inside 로 타일이 컬럼 경계에서 잘리지 않게 합니다. */
    display: inline-block;
    width: 100%;
    margin-bottom: 0.875rem;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    text-decoration: none;
    color: inherit;
    border-radius: var(--rz-border-radius, 8px);
    overflow: hidden;
    background: var(--rz-base-200);
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.25));
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.fh-tile:hover,
.fh-tile:focus-visible {
    transform: translateY(-2px);
    border-color: var(--rz-primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.fh-tile__frame {
    position: relative;
    overflow: hidden;
    background: var(--rz-base-300);
    /* 높이는 사진이 정합니다. 세로 사진은 세로로, 가로 사진은 가로로 보입니다. */
    line-height: 0;
    /* 아직 안 받아온 사진은 높이가 0이라 타일이 실선처럼 납작해집니다.
       최소 높이를 줘서 자리를 잡아 두고, 사진이 오면 제 높이로 늘어납니다. */
    min-height: 6rem;
}

.fh-tile__img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s ease;
}

.fh-tile:hover .fh-tile__img {
    transform: scale(1.05);
}

.fh-tile__play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.fh-tile__play .rzi {
    font-size: 2.75rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.fh-tile--locked {
    cursor: pointer;
}

.fh-tile__lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

.fh-tile--locked:hover .fh-tile__lock-overlay {
    opacity: 1;
}

.fh-tile__lock-overlay .rzi {
    font-size: 2.2rem;
    color: #ffb300;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.fh-tile__caption {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
    color: var(--rz-text-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 로딩 스켈레톤 --- */
.fh-skeleton .fh-tile__frame {
    aspect-ratio: 3 / 4;
    background: linear-gradient(90deg, var(--rz-base-300) 25%, var(--rz-base-200) 37%, var(--rz-base-300) 63%);
    background-size: 400% 100%;
    animation: fh-shimmer 1.4s ease infinite;
}

@keyframes fh-shimmer {
    from { background-position: 100% 50%; }
    to { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-skeleton .fh-tile__frame { animation: none; }
    .fh-tile, .fh-tile__img { transition: none; }
    .fh-tile:hover { transform: none; }
    .fh-tile:hover .fh-tile__img { transform: none; }
}

/* --- 빈 상태 --- */
.fh-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
    border: 1px dashed var(--rz-border-color, rgba(128, 128, 128, 0.35));
    border-radius: var(--rz-border-radius, 8px);
}

.fh-empty .rzi {
    font-size: 2rem;
    opacity: 0.6;
}

/* --- 영상 플레이어 --- */
.fh-player {
    width: 100%;
    max-width: 56rem;
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--rz-border-radius, 8px);
    overflow: hidden;
    border: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.25));
}

.fh-player iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}


/* ===== Family Picture timeline ===== */

/* 탭 패널이 스크롤 컨테이너가 되면 월 제목의 sticky 기준이 이 패널로 잡혀
   화면 상단에 붙지 않습니다. 이 페이지에서는 바깥 스크롤을 기준으로 쓰게 풀어 줍니다. */
.fp-tabs .rz-tabview-panels {
    overflow: visible;
}

.fp-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.fp-month {
    margin-bottom: 1.75rem;
}

/* 월 제목이 스크롤 중에도 위에 붙어 있어 지금 보는 시기를 놓치지 않습니다. */
.fp-month__head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.25rem;
    background: var(--rz-card-background-color, var(--rz-base-background-color));
    border-block-end: 1px solid var(--rz-border-color, rgba(128, 128, 128, 0.25));
}

.fp-month__count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--rz-text-secondary-color);
}

.fp-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--rz-text-secondary-color);
}

.fp-more {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.5rem;
}

/* ===== Mobile Bottom Navigation Bar ===== */
.mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 62px;
        background-color: var(--rz-body-background-color, #1a1a1a);
        border-top: 1px solid var(--rz-border-color, rgba(255, 255, 255, 0.15));
        justify-content: space-around;
        align-items: center;
        z-index: 9999;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
        padding: 0 0.5rem;
    }

    .mobile-bottom-nav .mobile-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--rz-text-secondary-color, #a0a0a0);
        text-decoration: none;
        font-size: 0.75rem;
        font-weight: 500;
        gap: 2px;
        flex: 1;
        height: 100%;
        transition: color 0.2s ease, transform 0.1s ease;
    }

    .mobile-bottom-nav .mobile-nav-item .rzi {
        font-size: 1.35rem !important;
    }

    .mobile-bottom-nav .mobile-nav-item.active {
        color: var(--rz-primary, #3a80e9);
        font-weight: 600;
    }

    .mobile-bottom-nav .mobile-nav-item:active {
        transform: scale(0.95);
    }

    /* Prevent bottom navigation bar from covering page content on mobile */
    .rz-body {
        padding-bottom: 72px !important;
    }
}