@charset "utf-8";

/* 공통항목에 대한 css 파일입니다. */

/* bootstrap */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');
/* import : font */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* import : google icon -> 개별 html 페이지에 삽입 으로 변경 */
/* @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(https://festival.null-pointer-exception.com/public/font/MaterialIcons-Regular.woff2) format('woff2'),
        url(https://festival.null-pointer-exception.com/public/font/MaterialIcons-Regular.woff) format('woff'),
        url(https://festival.null-pointer-exception.com/public/font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-variation-settings: 'FILL' 0;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
  }

/* bootstrap : 메인 컬러칩 변경시 컬러 코드 변경해서 활용 */
:root { 
    --bs-primary: #ff6d96; /* 원하는 색상으로 변경 */
    --bs-primary1: #ff9191; /* 원하는 색상으로 변경 */
}

/*.btn-primary {*/
/*    background-color: var(--bs-primary);*/
/*    border-color: var(--bs-primary);*/
/*}*/

/*.btn-outline-primary {*/
/*    border-color: var(--bs-primary);*/
/*    color: var(--bs-primary);*/
/*}*/

/*.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {*/
/*    background-color: #ff6d96; !* 원하는 색상으로 변경 *!*/
/*    border-color: #ff6d96; !* 원하는 색상으로 변경 *!*/
/*}*/

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color:  var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

.btn-primary:disabled {
    background-color: #FFB6CA;
    border-color: #FFB6CA;
}
.bg-primary {
    background-color: var(--bs-primary) !important;
}
.text-primary {
    color: var(--bs-primary) !important;
}
.border-primary {
    border-color: var(--bs-primary) !important;
}
.form-check-input.checked-primary:checked {
    border-color: var(--bs-primary) !important;
    background-color: #ff6d96;
}

/* 서브컬러 1 */
.btn-primary1 {
    background-color: var(--bs-primary1);
    border-color: var(--bs-primary1);
}
.btn-outline-primary1 {
    border-color: var(--bs-primary1);
    color: var(--bs-primary1);
}
.btn-primary1:hover, .btn-primary1:focus, .btn-primary1:active, .btn-primary1.active, .open > .dropdown-toggle.btn-primary1 {
    background-color: #ff9191; /* 원하는 색상으로 변경 */
    border-color: #ff9191; /* 원하는 색상으로 변경 */
}
.bg-primary1 {
    background-color: var(--bs-primary1) !important;
}
.text-primary1 {
    color: var(--bs-primary1) !important;
}
.border-primary1 {
    border-color: var(--bs-primary1) !important;
}
.form-check-input.checked-primary1:checked {
    border-color: var(--bs-primary1) !important;
    background-color: #ff9191;
}

/* 폰트 : 숫자에 활용하는 폰트 */
.font-roboto { font-family: 'Roboto', sans-serif }

/* reset */
body, input, select, button { font-family: 'Noto Sans KR', sans-serif }
a {
    text-decoration: none;
    color: #212529 /* bootstrap 기본 텍스트 컬러 */
}
p { margin: 0 }
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* display */
.new-d-inline-block { display: inline-block }

/* button, input 태그 커스텀 제거 */
.new-input-none { border: none }
.new-btn-none {
    padding: 0;
    border: none;
    background: none;
}

/* 높이 */
.new-h-100 { height: 100px }
.new-h-150 { height: 150px }
.new-h-200 { height: 200px }

/* margin 추가 */
.new-mt-25 { margin-top: 0.75rem }
.new-mb-25 { margin-bottom: 0.75rem }
.new-my-25 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.new-mt-45 { margin-top: 2.25rem }
.new-mb-45 { margin-bottom: 2.25rem }
.new-my-45 {
    margin-top: 2.25rem;
    margin-bottom: 2.25rem;
}
.new-mx-25 {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
}

/* padding 추가 */
.new-p-25 {
    padding-top: 0.75rem;
    padding-right: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 0.75rem
}
.new-ps-25 { padding-left: 0.75rem;}
.new-pt-25 { padding-top: 0.75rem; }
.new-pb-25 { padding-bottom: 0.75rem; }
.new-px-25 {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}
.new-py-25 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.new-pt-45 { padding-top: 2.25rem }
.new-pb-45 { padding-bottom: 2.25rem }
.new-ps-45 { padding-left: 2rem;}
.new-py-45 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}
.new-py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.new-pb-50 { padding-bottom: 50% }
.new-pb-100 { padding-bottom: 100% }

/* 작은 폰트 사이즈 */
.new-fs-95 { font-size: 0.95rem }
.new-fs-9 { font-size: 0.9rem }
.new-fs-85 { font-size: 0.85rem }
.new-fs-8 { font-size: 0.8rem }
.new-fs-75 { font-size: 0.75rem }
.new-fs-7 { font-size: 0.7rem }

/* 폰트 컬러 */
.new-text-white { color: #f8f8f8 }
.new-text-gray { color: #656565 }
.new-text-gray2 { color: #5d5d5d }
.new-text-black { color: #2e2e2e }
.new-text-red { color: firebrick }
.new-text-light-gray { color: #9f9f9f }


.new-club-text-red{ color: #F53535;}

.new-club-text-grey{ color:rgb(153, 155, 155)}

.new-text-bg-secondary {
    color: #f8f8f8;
    background-color: #a1a1a1;
}

.new-text-bg-primary {
    color: #f8f8f8;
    background-color: var(--bs-primary);
}

.new-text-bg-primary1 {
    color: #f8f8f8;
    background-color: var(--bs-primary1);
}

/* 폰트 굵기 : 아이콘용 */
.new-fw-thin { font-weight: 200; }

/*.material-symbols-outlined {*/
/*    font-variation-settings:*/
/*         'FILL' 0,*/
/*         'wght' 400,*/
/*         'GRAD' 0,*/
/*         'opsz' 24*/
/*}*/

/* 아이콘 채우기 */
.fill-1 { font-variation-settings: 'FILL' 1 }

/* 버튼 */
.new-btn-gray {
    color: #f8f8f8;
    background-color: #adadad;
    border-color: #adadad;
}

/* 버튼 hover */
.btn-outline-dark:hover {
    background-color: transparent;
    color: #343a40; /* 텍스트 색상 유지 */
    border-color: #343a40; /* 테두리 색상 유지 */
}

/* 회색 배경 : 컬러  */
.new-bg-gray { background: #f6f6f6 }
.new-bg-darkgray { background: #f1f1f1 }
.new-bg-darkgray2 { background: #dedede }

/* 검정색 배경 : 컬러  */
.new-bg-dark { background-color: #353535;}

/* 회색 배경 */
.new-bg-gray-translucent { background: rgba(210, 193, 193, 0.19)
}

/* 흰 배경 : 컬러 */
.new-bg-white { background: #f8f8f8 }

/* 흰 배경 투명도 */
.new-bg-white-translucent { background: rgba(248, 248, 248, 0.88) }

/* 테스트 배경 : 컬러 */
.new-bg-test, .new-bg-test:focus, .new-bg-test:active
{ background-color: #FF9191 !important;}

/* border */
.new-border-gray { border-color: #afafaf !important; }
.new-border-darkgray { border-color: #919191 !important; }
.new-border-top-gray { border-top: 1px solid #555; }

.basic-border-gray{border-color: #DEE2E6;}

/* 말줄임  */
.ellipsis { /* 텍스트 한 줄 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ellipsis-line-one { /* 텍스트 한 줄 ver2 */
    /*white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; 
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical; 
    word-wrap: break-word; 
    line-height: 1.3em;
    height: 1.3em
}
.ellipsis-line-two { /* 텍스트 두 줄 노출 후 말줄임 */
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    word-wrap: break-word; 
    line-height: 1.3em;
    height: 2.6em
}
.new-break-space { /* 단어별 줄내림 */
    white-space: break-spaces; 
}

/* 이미지 작을때!! 꽉차게 만들기 (대신 넘어가는 부분은 잘립니다) div에 height 정해줘야함! */
.image-thumbnail {
    width:100%;
    height:100%;
    object-fit:cover;
}

/* 스크롤 커스텀 : overflow-auto 들어가는 스크롤 태그에 custom-scroll 클래스를 넣으면 됩니다.. 미쳐따 */
.custom-scroll::-webkit-scrollbar { height: 6px; }
.custom-scroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px; 
}
.custom-scroll:hover::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); }
.custom-scroll::-webkit-scrollbar-track { background-color: transparent; }
.custom-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
.custom-scroll:hover { scrollbar-color: rgba(0, 0, 0, 0.3) transparent; }

@media (max-width: 480px) {
    .custom-scroll::-webkit-scrollbar { height: 0; }
}

/* 웹 레이아웃 */
html, body, #root { height: 100% }
body { padding-right: 0 !important;}
.wrapper {
    overflow: hidden;
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    background-color: #fff;
    min-height: 100%;
    box-shadow: 0 0 10px #0000000d;
}

#root .offcanvas { position: absolute }
#root .offcanvas-backdrop {
    position: fixed;
    right: 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}
#root .offcanvas.offcanvas-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 520px;
    margin: 0 auto;
}

@media (max-width: 500px) {
    .wrapper { overflow: initial; }
    #root .offcanvas { position: fixed; }
}

/* new position : 웹에서 너비 제한을 걸었기 때문에 position 적용시 제한되는 부분들이 있습니다. position 활용시 유의 필요 */
.new-fixed-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    max-width: 520px;
}

/* 상단 고정형으로 변경 */
.new-fixed-top {
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 520px;
}

/* 배경이미지 */
.bg-pattern-pink { 
    background: #ff6d96 no-repeat center url("/public/img/bg_pattern_pink.png"); 
    background-size: contain;
    background-attachment: fixed;
    -webkit-background-attachment: fixed;
}
.bg-pattern-pink2 { 
    background: #ff6d96 no-repeat center url("/public/img/bg_pattern_pink2.png"); 
    background-size: contain;
    background-attachment: fixed;   
}
.bg-pattern-black { 
    background: #2E2E2E no-repeat center url("/public/img/bg_pattern_black.png"); 
    background-size: contain;
    background-attachment: fixed;
}

/* @media (max-height : 890px ){ 배경 반복일 경우 변환을 위한
    .bg-pattern-pink { background-size: cover; }
    .bg-pattern-black { background-size: cover; }
} */

/* 배경 test */
.bgPatternBlack { 
    background: #ff6d96 repeat top url("/public/img/bgPatternBlack.png"); 
    background-size: contain;
}
.bgPatternPink { 
    background: #ff6d96 repeat top url("/public/img/bgPatternPink.png"); 
    background-size: contain;
}
.bgPatternWhite { 
    background: #f5f5f5 repeat-y top url("/public/img/bgPatternWhite.png");
    background-size: contain;
}

.bgPatternWhiteOpacity20{
    background: #f5f5f5 repeat-y top url("/public/img/bgWhiteOpacity20.png");
    background-size: contain;
}

.bgPatternBlackAndWhite{
    background: #2E2E2E repeat-y top url("/public/img/bgPatternBlack2.png");
    background-size: contain;
}

/* 헤더 */
.header .header-box { padding: 8px 0;}
.header .logo-box img { height: 34px;}

/* 전체 메뉴 */
.all-menu .category-title { position: relative}
.all-menu .category-title::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -3px;
    z-index: -1;
    width: calc(100% + 6px);
    height: 45%;
    background: rgba(255, 145, 145, 20%);
}

/* 푸터 */


/* 퀵 */
/* .wrapper { padding-bottom: 50px;} */
.quick-navi {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* box-shadow: rgba(0, 0, 0, 0.06) 0px -3px 5px 0px; */
}
.quick-navi a { 
    padding: 3px 0 7px;
    /* color: #555; */
}
.quick-navi .new-mt { margin-top: 3px;}
.quick-navi .text-box { color: #555;}

/* main */
/* .main-bg { 
    background: no-repeat center url("/public/img/main_bg.png"); 
    background-size: cover;
} */

/* 사이드바 */
.sidebar {
    position: fixed;
    left: 3em;
    top: 3em;
    width: 15em;
    height: 35em;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px
}
.sidebar-container { padding: 1rem }
.sidebar .logo-box { padding: 2.25rem .5rem}
.sidebar .qr-box { margin: 2.25rem 1.5rem;}

@media (max-width: 1120px) {
    .sidebar {
        left: 1em;
        width: 8em;
        height: 32em;
    }
    .sidebar-container { padding: 0.5rem }
    .sidebar .logo-box { padding: 2.25rem 0;}
    .sidebar .qr-box { margin: 2.25rem 0;}
}
@media (max-width: 900px) {
    .sidebar { display: none;}
}

/* 관리자 페이지 */
.admin-container { min-width: 1320px }
.admin-wrapper .page-left { 
    z-index: 1;
    width: 250px;
    background-color: #353535;
}
.admin-wrapper .page-left .left-menu {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}
.admin-wrapper .page-right { 
    width: calc(100% - 250px);
    margin-left: 250px 
}
.admin-wrapper .page-right .header { border-color: #555 !important; }
.admin-wrapper .page-right .header a { 
    border-color: #353535 !important;
    border-radius: 2px;
    font-size: .85rem;
}
.admin-wrapper .logo a { color: #fff ;}

.admin-wrapper .left-menu .menu-list * { border-color: #555 !important;}
.admin-wrapper .left-menu .menu-list a { 
    color: #fff;
    font-weight: 400 !important;
    font-size: .9rem;
}
.admin-wrapper .left-menu .menu-list .new-text-white { color: #ccc}
/* 페이지 */
.active>.page-link, .page-link.active {
    z-index: 3;
    color: #ffffff;
    background-color: var(--bs-primary1);
    border-color: var(--bs-primary1);
}

/* error 페이지 */
.error-wrapper { height: 100%; }
.error-wrapper .main {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
}