/* =========================================
   1) THEME TOKENS
========================================= */
:root{
    --siteColor: #019894;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #15B5B0;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F1FFFE;
    --footerSiteNavColor: #444444;
}

[template-theme='red'] {
    --siteColor: #EA272F;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #CD0B13;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #FFF0EC;
    --footerSiteNavColor: #444444;
}

[template-theme='orange'] {
    --siteColor: #F49619;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #E5771B;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #FAECDC;
    --footerSiteNavColor: #444444;
}

[template-theme='yellow'] {
    --siteColor: #F5C317;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #E3B30C;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #FFF4DB;
    --footerSiteNavColor: #444444;
}

[template-theme='green'] {
    --siteColor: #1F5014;
    --siteNavColor: #F6F6E9;
    --siteNavHoverColor: #457D58;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #DDE6E0;
    --footerSiteNavColor: #444444;
}

[template-theme='blue'] {
    --siteColor: #222073;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #3D9BC5;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F0F4FF;
    --footerSiteNavColor: #444444;
}

[template-theme='indigo'] {
    --siteColor: #0F223E;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #27436C;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F4F7FF;
    --footerSiteNavColor: #444444;
}

[template-theme='violet'] {
    --siteColor: #50006C;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #BB84C8;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F7E9FF;
    --footerSiteNavColor: #444444;
}

[template-theme='mint'] {
    --siteColor: #019894;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #15B5B0;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F1FFFE;
    --footerSiteNavColor: #444444;
}

[template-theme='pink'] {
    --siteColor: #FF69BD;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #FF9FD4;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #FFDEEF;
    --footerSiteNavColor: #444444;
}

[template-theme='pastel-blue'] {
    --siteColor: #569FBE;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #4698DA;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #F4F8FF;
    --footerSiteNavColor: #444444;
}

[template-theme='gray'] {
    --siteColor: #969696;
    --siteNavColor: #FFFFFF;
    --siteNavHoverColor: #737373;
    --headerSiteColor: #FFFFFF;
    --headerSiteNavColor: #444444;
    --footerSiteColor: #E7E7E7;
    --footerSiteNavColor: #444444;
}

[template-theme='custom'] {
    --siteColor: {{ _SITE.siteColor }};
--siteNavColor: {{ _SITE.siteNavColor }};
--siteNavHoverColor: {{ _SITE.siteNavHoverColor }};
--headerSiteColor: {{ _SITE.headerSiteColor }};
--headerSiteNavColor: {{ _SITE.headerSiteNavColor }};
--footerSiteColor: {{ _SITE.footerSiteColor }};
--footerSiteNavColor: {{ _SITE.footerSiteNavColor }};
}


/* =========================================
   2) BASE
========================================= */
a[href^="tel"] {
    color: #222 !important;
    text-decoration: none;
}

a {
    color: inherit !important;
    text-decoration: none;
}

ul {
    padding: 0;
}

ul li {
    list-style-type: none;
}

body.addScroll {
    padding-top: 140px;
}


/* =========================================
   3) THEME HELPERS
========================================= */
.change-bg-header-color {
    background: var(--headerSiteColor);
}
.change-txt-nav-color {
    color: var(--siteNavColor);
}
.change-bg-nav-color {
    background: var(--siteColor);
}
.change-color:hover {
    background-color: var(--siteNavHoverColor);
    color: var(--siteNavColor);
}
.dropdown-item:hover {
    color: var(--siteNavColor);
    background-color: var(--siteNavHoverColor);
}


/* =========================================
   4) HEADER / LEGACY NAV
========================================= */
#header {
    transition: all .3s;
}

header.addScroll {
    top: -75px;
    box-shadow: 0 6px 10px rgba(48, 48, 48, 0.1);
}

.header-top {
    width: 100%;
    border-bottom: 1px solid #f7f7f7;
}

.header-top-gap {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    height: 70px;
}

.header-logo {
    display: inline-block;
}

.header-logo img {
    height: 35px;
}

.nav {
    padding: 0 15px;
}

.nav > ul > li {
    float: left;
    transition: all .3s;
}

.nav > ul > li > a {
    display: block;
    padding: 0 25px;
    font-size: 16px;
    line-height: 70px;
    font-weight: bold;
}

.nav-sub-title {
    font-size: 16px;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin: 0;
}

.dropdown-menu {
    width: 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    box-shadow: none;
}

.dropdown-menu > li > a {
    padding: 3px 0;
}

.dropdown-menu > li > a:focus,
.dropdown-menu > li > a:hover {
    text-decoration: none;
    background-color: transparent;
}


/* =========================================
   5) TIMER
========================================= */
.dDay span {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    padding: 0 10px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    background: #fff4dc;
    border-radius: 4px;
    color: #000 !important;
    font-size: 13px;
    font-weight: 700 !important;
}

.dDay span:nth-child(1)::after,
.dDay span:nth-child(2)::after,
.dDay span:nth-child(3)::after,
.dDay span:nth-child(4)::after {
    display: block;
    position: absolute;
    right: 0;
    bottom: -25px;
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.dDay span:nth-child(1)::after { content: '일'; }
.dDay span:nth-child(2)::after { content: '시간'; }
.dDay span:nth-child(3)::after { content: '분'; }
.dDay span:nth-child(4)::after { content: '초'; }


/* =========================================
   6) CB HEADER / NAVBAR
========================================= */
.cb-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: box-shadow .2s ease, background .2s ease;
}

.cb-header.is-scrolled {
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

.cb-titlebar {
    display: inline-block;
    width: 100%;
    margin-bottom: -10px;
    padding-bottom: 5px;
    background: var(--headerSiteColor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}

.cb-navbar {
    background: var(--siteColor);
}

.cb-logo img {
    display: block;
    width: auto;
    height: 50px;
}

.cb-navbar .nav-link,
.cb-navbar .dropdown-item {
    font-size: 1.3rem;
    color: var(--siteNavColor) !important;
    font-weight: 700;
    border-radius: .75rem;
}

.cb-navbar .nav-link:hover,
.cb-navbar .nav-link:focus,
.cb-navbar .dropdown-item:hover,
.cb-navbar .dropdown-item:focus,
.cb-navbar .nav-link.active,
.cb-navbar .dropdown-item.subActive {
    background: var(--siteNavHoverColor);
    color: var(--siteNavColor) !important;
}

.navbar .dropdown-menu {
    position: absolute;
    margin-top: .5rem;
    padding: .75rem;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.06);
    background: var(--siteColor);
    box-shadow:
            0 12px 28px rgba(0,0,0,.12),
            0 2px 6px rgba(0,0,0,.08);
}

.navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
}

.navbar .dropdown-item {
    margin-bottom: .25rem;
    padding: .6rem .9rem;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 500;
    color: #333;
    transition: background .15s ease, color .15s ease;
}

.navbar .dropdown-item:last-child {
    margin-bottom: 0;
}

.navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,.35);
}

.navbar-dark .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
}

.cb-header.is-scrolled .cb-titlebar {
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.cb-header.is-scrolled .cb-navbar {
    background: color-mix(in srgb, var(--siteColor) 90%, transparent) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .cb-header.is-scrolled .cb-titlebar {
        background: rgba(255,255,255,.92) !important;
    }
    .cb-header.is-scrolled .cb-navbar {
        background: var(--siteColor) !important;
    }
}


/* =========================================
   7) LAYOUT
========================================= */
#main .container.cb-wrap {
    max-width: 1400px;
}


/* =========================================
   8) HERO / MAINCUT
========================================= */
.cb-hero-card {
    border-radius: 24px;
    overflow: hidden;
    border-width: 0 !important;
}

.cb-hero-card .row {
    align-items: stretch;
}

.thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
}

.cb-maincut {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cb-maincut-dummy {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    background: #f2f4f8;
    box-shadow:
            10px 10px 24px rgba(0,0,0,.08),
            -10px -10px 24px rgba(255,255,255,.9);
}

.cb-maincut-dummy::before,
.cb-maincut-dummy::after {
    content: "";
    position: absolute;
    inset: -20%;
    filter: blur(28px);
    opacity: .85;
    pointer-events: none;
}

.cb-maincut-dummy::before {
    background:
            radial-gradient(closest-side at 20% 30%, rgba(255, 80, 80, .55), transparent 60%),
            radial-gradient(closest-side at 75% 25%, rgba(80, 140, 255, .55), transparent 60%),
            radial-gradient(closest-side at 60% 80%, rgba(120, 255, 180, .50), transparent 65%);
}

.cb-maincut-dummy::after {
    background:
            linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0) 55%),
            radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.35), transparent 70%);
    filter: blur(18px);
    opacity: .6;
}

.cb-maincut-dummy__label {
    position: relative;
    padding: .5rem 1rem;
    border-radius: 999px;
    background: rgba(255,255,255,.55);
    color: rgba(20,20,20,.60);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow:
            inset 2px 2px 6px rgba(0,0,0,.08),
            inset -2px -2px 6px rgba(255,255,255,.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cb-maincut-dummy__sub {
    position: relative;
    font-size: .9rem;
    color: rgba(20,20,20,.45);
}

.cb-hero-caption {
    padding: 14px 16px;
}

.cb-hero-caption .title {
    margin: 0;
    line-height: 1.2;
    font-weight: 800;
}

.cb-hero-caption .desc {
    margin: 4px 0 0;
    font-size: 13px;
    opacity: .75;
}


/* =========================================
   9) QUICK TILE
========================================= */
.cb-quick-card .row > div:nth-child(1) .cb-quick-tile::after {
    background:
            radial-gradient(60% 55% at 18% 22%, color-mix(in srgb, var(--siteNavHoverColor) 38%, transparent), transparent 62%),
            radial-gradient(55% 50% at 72% 30%, rgba(255,255,255,.35), transparent 60%);
    transform: rotate(6deg);
}

.cb-quick-card .row > div:nth-child(2) .cb-quick-tile::after {
    background:
            radial-gradient(65% 60% at 80% 24%, color-mix(in srgb, var(--siteColor) 34%, transparent), transparent 63%),
            radial-gradient(50% 45% at 28% 68%, rgba(255,255,255,.28), transparent 58%);
    transform: rotate(-8deg) scale(1.05);
    opacity: .70;
}

.cb-quick-card .row > div:nth-child(3) .cb-quick-tile::after {
    background:
            radial-gradient(58% 52% at 35% 78%, color-mix(in srgb, var(--siteNavHoverColor) 30%, transparent), transparent 60%),
            radial-gradient(70% 60% at 65% 22%, rgba(255,255,255,.42), transparent 62%);
    transform: rotate(12deg);
}

.cb-quick-card .row > div:nth-child(4) .cb-quick-tile::after {
    background:
            radial-gradient(62% 58% at 22% 32%, color-mix(in srgb, var(--siteColor) 26%, transparent), transparent 60%),
            radial-gradient(55% 50% at 78% 76%, rgba(255,255,255,.38), transparent 58%);
    transform: rotate(-14deg) scale(.98);
    opacity: .80;
}

.cb-quick-tile {
    position: relative;
    display: flex;
    height: 100%;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    overflow: hidden;
    background:
            radial-gradient(
                    120% 120% at 10% 0%,
                    color-mix(in srgb, var(--siteColor) 22%, transparent),
                    transparent 55%
            ),
            radial-gradient(
                    120% 120% at 90% 100%,
                    color-mix(in srgb, var(--siteNavHoverColor) 18%, transparent),
                    transparent 60%
            ),
            rgba(255,255,255,.14);
    backdrop-filter: blur(18px) saturate(185%);
    -webkit-backdrop-filter: blur(18px) saturate(185%);
    border: 0 solid rgba(255,255,255,.45);
    box-shadow:
            0 18px 40px rgba(10,20,60,.22),
            0 2px 10px rgba(10,20,60,.10);
}

.cb-quick-tile::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(
            70% 60% at 22% 18%,
            rgba(255,255,255,.75),
            rgba(255,255,255,.30) 55%,
            transparent 72%
    );
    pointer-events: none;
}

.cb-quick-tile::after {
    content: "";
    position: absolute;
    inset: -20%;
    border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
    background:
            radial-gradient(
                    60% 55% at 25% 25%,
                    color-mix(in srgb, var(--siteColor) 35%, transparent),
                    transparent 62%
            ),
            radial-gradient(
                    55% 50% at 70% 75%,
                    rgba(255,255,255,.35),
                    transparent 60%
            );
    filter: blur(14px);
    opacity: .65;
    pointer-events: none;
}

.cb-quick {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 3px;
    cursor: pointer;
    text-decoration: none;
}

.cb-quick-text {
    z-index: 9;
    width: 100%;
    margin: 0;
    color: var(--headerSiteNavColor);
    text-align: center;
    line-height: 1.2;
    font-weight: 700;
    word-break: keep-all;
    overflow-wrap: break-word;
}


/* =========================================
   10) QUICK ICON TYPE
   - 기존 .cb-quick과 충돌나서 별도 이름 권장
========================================= */
.cb-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 140px;
    border-radius: 24px;
    text-decoration: none;
    color: inherit;
}

.cb-quick-icon {
    display: grid;
    width: 110px;
    height: 110px;
    place-items: center;
    border-radius: 28px;
    overflow: hidden;
}

.cb-quick-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* =========================================
   11) FOOTER
========================================= */
#footer {
    position: relative;
    z-index: 1;
}

.cb-footer-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 12px;
}

.cb-footer-bar {
    border-top: 1px solid #d9d9d9;
    background: #fff;
    color: #323232;
}

.cb-footer-logos {
    background: #fff;
}

.cb-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.cb-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 18px;
    text-decoration: none;
    background: #fff;
}

.cb-logo-item img {
    display: block;
    width: auto;
    height: 48px;
    max-width: 220px;
    object-fit: contain;
}

.cb-footer-info {
    text-align: center;
}

.cb-footer-company {
    margin-bottom: 6px;
    line-height: 1.2;
    font-weight: 800;
}

.cb-footer-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.cb-footer-meta > span {
    position: relative;
    padding-left: 12px;
}

.cb-footer-meta > span:first-child {
    padding-left: 0;
}

.cb-footer-meta > span:not(:first-child)::before {
    content: "•";
    position: absolute;
    left: 0;
    opacity: .55;
}


/* =========================================
   12) RESPONSIVE
========================================= */
@media all and (max-width: 1200px) {
    .nav,
    .header-top {
        display: none !important;
    }

    header.addScroll {
        top: 0;
    }

    body.addScroll {
        padding-top: 0;
    }

    .row {
        display: flex;
        flex-wrap: wrap;
        margin-right: 0;
        margin-left: 0;
    }
}

@media (max-width: 575.98px) {
    .cb-quick-tile{
        aspect-ratio: auto;
        height: auto;
        min-height: 110px;
        border-radius: 18px;
    }

    .cb-quick{
        padding: 10px;
    }

    .cb-quick-text{
        margin: 0;
        font-size: clamp(1rem, 5vw, 1.5rem);
        line-height: 1.25;
        text-align: center;
        word-break: keep-all;
        overflow-wrap: anywhere;
        white-space: normal;
        display: block;
        overflow: visible;
    }

    .cb-quick-card .row{
        align-items: stretch;
    }

    .cb-quick-card .row > [class*="col-"]{
        display: flex;
    }

    .cb-logo img {
        height: 30px;
    }

    .cb-quick-tile {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        height: auto;
        border-radius: 18px;
    }

    .cb-footer-wrap {
        padding: 14px 10px;
    }

    .cb-logo-item {
        padding: 10px 12px;
        border-radius: 16px;
    }

    .cb-logo-item img {
        height: 44px;
        max-width: 180px;
    }

    .cb-footer-meta > span {
        padding-left: 0;
    }

    .cb-footer-meta > span::before {
        display: none;
    }
}