/*테마정리*/
/*  템플릿 색상코드 정의 */
: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: #9DC7EA;
    --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 }};
}
/*테마정리*/

/*버튼테마*/
/* row가 늘어나게 */
.cb-hero-card .row { align-items: stretch; }

.cb-quick-tile{
    height: 100%;
    aspect-ratio: 1 / 1;   /* 정사각형 */
    display: flex;
}

/* 링크가 타일을 꽉 채우게 */
.cb-quick{
    width: 100%;
    height: 100%;
    min-height: auto;      /* 60px 고정 제거 */
    display:flex;
    align-items:center;
    justify-content:center;
}
/* row가 늘어나게 */
.cb-hero-card .row { align-items: stretch; }

/* 타일 자체 */
/* 1) 공통 */
.cb-quick-tile{
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    border-radius: 22px;
    overflow: hidden;
    align-items: center;     /* 세로 중앙 */
    justify-content: center; /* 가로 중앙 */
    /* 메인 컬러 베이스 */
    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: 0px 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::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-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;
}

@media (max-width: 575.98px){
    .cb-quick-tile{
        aspect-ratio: auto;
        height: auto;          /* 타일 높이 고정 */
        border-radius: 18px;
    }

    .cb-quick{ padding: 10px; }

    .cb-quick-text{
        margin: 0;
        font-size: clamp(1rem, 5vw, 1.5rem); /*최소 5, 화면너비의 5% 최대 1.5rem*/
        line-height: 1.2;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* 2) 변주: col 기준 nth-child */
.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;
}

/* 링크가 타일을 100% 채우고, 그 안에서 정중앙 */
.cb-quick{
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 3px;                 /* 눌림 영역/가독성 */
}


/* span도 100%로 늘려서 중앙 정렬이 흔들리지 않게 */
.cb-quick-text{
    width: 100%;
    text-align: center;
    font-weight: 700;
    color: var(--headerSiteNavColor);
    line-height: 1.2;
    word-break: keep-all;
    z-index: 9;
}
/*버튼테마*/

/*nav*/
/*템플릿 색상 변경*/
.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);
}
/*공통영역 시작*/
body.addScroll {
    padding-top: 140px;
}
/*body.addresize {*/
/*    padding-top: 0;*/
/*}*/
a {
    color: inherit !important
}
ul {
    padding:0;
}
ul li {
    list-style-type: none;
}
/* 공통영역 끝 */

/* header 시작 */
#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;
}
/* header 끝 */

/* 메인메뉴 시작 */
.nav {
    padding:0 15px;
}
.nav > ul > li {
    float:left;
    transition: all .3s;
}

.nav > ul > li > a {
    font-size:16px;
    line-height:70px;
    display: block;
    padding:0 25px;
    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;
}
/* 드롭다운 서브메뉴 끝 */
/* 타이머 시작 */
.dDay span {
    display:inline-block;
    padding: 0 10px;
    height:32px;
    line-height: 32px;
    text-align: center;
    background: #fff4dc;
    border-radius: 4px;
    margin: 0 5px;
    color: #000 !important;
    position: relative;
    font-weight: 700!important;
    font-size:13px;
}
.dDay span:nth-child(1):after{
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -25px;
    right: 0;
    content: '일';
    color: #999;
    font-size: 12px;
}
.dDay span:nth-child(2):after {
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -25px;
    right: 0;
    content: '시간';
    color: #999;
    font-size: 12px;
}
.dDay span:nth-child(3):after {
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -25px;
    right: 0;
    content: '분';
    color: #999;
    font-size: 12px;
}
.dDay span:nth-child(4):after {
    display: block;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: -25px;
    right: 0;
    content: '초';
    color: #999;
    font-size: 12px;
}
/* 타이머 끝 */
/* 반응형 시작 */
@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;
    }
}
/* 반응형 끝 */
/*nav*/
/* theme hooks */
.cb-header { position: sticky; top: 0; z-index: 1030; }
.cb-titlebar { background: var(--headerSiteColor); margin-bottom: -10px;}
.cb-navbar { background: var(--siteColor); }

/* 1행 제목 */
/* 기본(PC) */
.cb-titlebar{
    display: inline-block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    padding-bottom: 5px;
}

/* 2행 로고 */
.cb-logo img { height: 50px; width: auto; display:block; }

/* menu style */
.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 {
    background: var(--siteNavHoverColor);
    color: var(--siteNavColor) !important;
}
.cb-navbar .nav-link.active {
    background: var(--siteNavHoverColor);
    color: var(--siteNavColor) !important;
}


/* 드롭다운 전체 */
.navbar .dropdown-menu{
    margin-top: -30px;
    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-item{
    padding: .6rem .9rem;
    margin-bottom: .25rem;
    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;
}


.cb-navbar .dropdown-item.subActive{
    background: var(--siteNavHoverColor);
    color: var(--siteNavColor);
}

.navbar .dropdown-menu{
    position: absolute;
    margin-top: .5rem; /* mt-2 같은 효과 */
}

/* 토글~메뉴 사이 빈틈을 메우는 투명 브릿지 */
.navbar .dropdown-menu::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-12px;          /* 빈틈 높이(대충 10~14px) */
    height:12px;
}


/* 모바일 토글 버튼(가독성용) */
.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);
}
/* blur 모드: 스크롤 내려갔을 때만 적용 */
.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);
}

/* 경계선/입체감 살짝 */
.cb-header{
    transition: box-shadow .2s ease, background .2s ease;
}
.cb-header.is-scrolled{
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
}

/* backdrop-filter 미지원 브라우저 대비(그냥 반투명으로만) */
@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; }
}

/* 모바일 */
@media (max-width: 575.98px){
    .cb-titlebar{
        display: -webkit-box;
        -webkit-line-clamp: 2;      /* 최대 2줄 */
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        line-height: 1.2;
    }
    .cb-logo img { height: 30px;}
}

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

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

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

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

.cb-maincut-dummy{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    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;
    font-weight:800;
    letter-spacing:.12em;
    color: rgba(20,20,20,.60);
    text-transform:uppercase;
    padding:.5rem 1rem;
    border-radius:999px;

    /* 네오 캡슐 */
    background: rgba(255,255,255,.55);
    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{
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.cb-hero-caption .desc{
    margin: 4px 0 0 0;
    font-size: 13px;
    opacity: .75;
}

/* ===== Quick buttons ===== */
/* 버튼 전체 */
.cb-quick{
    display: flex;
    align-items: center;
    justify-content: center;

    height: 140px;              /* ★ 버튼 크기 핵심 */
    border-radius: 24px;
    text-decoration: none;
    color: inherit;
}

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

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

/*푸터화면*/
/* ===== Footer Base ===== */
#footer{
    position: relative;
    z-index: 1;
}
.cb-footer-wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 12px;
}

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

/* ===== Logo strip ===== */
.cb-footer-logos{
    background: #fff;
}

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

/* 로고 카드(neo-soft) */
.cb-logo-item{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 14px;
    border-radius: 18px;
    text-decoration: none;
    background: #fff; /* neo-soft가 배경을 잡는 구조면 여기 생략 가능 */
}
.cb-logo-item img{
    width: auto;
    height: 48px;          /* 기본 높이 */
    max-width: 220px;      /* 너무 긴 로고 제한 */
    object-fit: contain;
    display: block;
}

/* ===== Info bar ===== */
.cb-footer-info{
    text-align: center;
}
.cb-footer-company{
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 6px;
}
.cb-footer-meta{
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* 구분자(dot) */
.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;
}

/* ===== Responsive ===== */
@media (max-width: 575.98px){
    .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; } /* 모바일은 구분자 제거(가독성) */
}