/* =========================
   @font-face 정의
   ========================= */

/* NanumSquareNeo */
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/public/assets/fonts/NanumSquareNeo-aLt.ttf') format('truetype');
    font-weight: 300;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/public/assets/fonts/NanumSquareNeo-bRg.ttf') format('truetype');
    font-weight: 400;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/public/assets/fonts/NanumSquareNeo-cBd.ttf') format('truetype');
    font-weight: 700;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/public/assets/fonts/NanumSquareNeo-dEb.ttf') format('truetype');
    font-weight: 800;
}
@font-face {
    font-family: 'NanumSquareNeo';
    src: url('/public/assets/fonts/NanumSquareNeo-eHv.ttf') format('truetype');
    font-weight: 900;
}


@font-face {
    font-family: 'GumiRomance';
    src: url('/public/assets/fonts/GumiRomanceTTF.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('/public/assets/fonts/NotoSansKR-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


:root {
    --primary: white;
}



html{    font-family: 'NanumSquareNeo', sans-serif; }
/* ===== 기본 폼 컨트롤 초기화 ===== */
body, input, textarea, button, select {
    font-family: 'NanumSquareNeo', sans-serif;
}

html{font-size:62.5%;}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}



.btn{
    width:100%;
    height: 43px;
    border: none;
    color: white;
    font-size: 1.6rem;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1.5rem;

}

.btn-circle{border-radius: 100px;}

.btn-white{
    background: #ffffff;
    color: var(--primary);
}

.btn-sky{
    background: var(--primary);
    color: #ffffff;
}


.btn-yellow{
    background: #FEE500;
    color: var(--primary);
}


.font-gumiromance{font-family: 'GumiRomance', sans-serif;}




.outline-text {
    text-shadow:
            5px 5px 0 white,
            3px 3px 0 rgba(255,255,255,0.9);
}


.bg-black{background-color: #000000;}
.bg-white{background-color: #ffffff;}
.bg-blue-100{background-color: #08A6E0;}
.bg-blue-300{background-color: #00B4FF;}
.bg-blue-400{background-color: #0085FF;}
.bg-blue-500{background-color: #0099FF;}

.bg-blue{background-color: #008CFF;}
.bg-blue-dark{background-color: #005EFF;}
.bg-blue-600{background-color: #0061FF;}
.bg-blue-700{background-color: #004D98;}
.bg-yellow{background-color: #FF6800;}
.bg-yellow-400{background-color: #FFD300;}
.bg-yellow-500{background-color: #F4B70F;}



.bg-orange-dark{background-color: #DC821B;}
.bg-orange-100{background-color: #FFAB00;}
.bg-orange-200{background-color: #FFA600;}
.bg-orange-450{background-color: #FF5D00;}
.bg-orange-450-gradient-soft{
    background-image: linear-gradient(to top, #FF5D00 0%, #FF5D004D 99%);
}
.bg-red-900{background-color: #AF3204;}
.bg-orange-500{background-color:#FF8528;}
.bg-orange-550{background-color:#FF8800;}
.bg-orange-600{background-color: #FF8B00;}
.bg-orange-700{background-color: #FF6F00;}
.bg-orange-800{background-color: #FE7B00;}



.bg-brown-600{background-color: #7A6644;}

.bg-brown-700{background-color: #835D3B;}
.bg-brown-800{background-color: #814918;}

.bg-brown-900{background-color: #200E02;}



.bg-green-500{background-color: #59830B;}
.bg-gold {background-color: #C6A25A;}




.bg-sky-100{background-color: #EAF9FF;}
.bg-sky-200{background-color: #EBF9FF;}
.bg-sky{background-color: var(--primary);}

.bg-gray-050{background-color: #F6F6F6;}
.bg-gray-075{background-color: #F5F5F5;}
.bg-gray-080{background-color: #F3F3F3;}
.bg-gray-100{background-color: #DBDBDB;}



.bg-cream-100 { background-color: #FFF7E8; }
.bg-cream-150 { background-color: #FFF8D8; }
.bg-cream-200 { background-color: #FFF5B5; }
.bg-cream-050 { background-color: #FFFBE8; }












.only-pc { display: none; }
@media (min-width: 1024px) {
    .only-pc { display: block !important;}
    .only-mobile { display: none !important; }
    menu-pc.only-pc { min-height: 17rem; }
    .pc-container-1280 { max-width: 1280px;
        margin-left: auto;
        margin-right: auto; }
}



.slide-container {
    position: relative;
    overflow: hidden;
    font-family: 'GumiRomance', sans-serif; font-size: 1.6rem; color: #333333;
    padding-top: 10px; padding-bottom: 10px;
}


.slide-text {
    display: flex;
    gap:1.5rem;
}



/*격자무늬 */

.checkerboard-sky {
    height: 10px;
    background-color: white;
    background-image:
            linear-gradient(90deg, #00B4FF 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0, 10px 10px;
}
.checkerboard2-sky {
    height: 10px;
    background-color: #00B4FF;
    background-image:
            linear-gradient(90deg, white 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0;
}

.checkerboard-blue {
    height: 10px;
    background-color: white;
    background-image:
            linear-gradient(90deg, #0066ff 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0, 10px 10px;
}
.checkerboard2-blue {
    height: 10px;
    background-color: #0066ff;
    background-image:
            linear-gradient(90deg, white 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0;
}


.checkerboard-orange {
    height: 10px;
    background-color: white;
    background-image:
            linear-gradient(90deg, #FFAB00 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0, 10px 10px;
}
.checkerboard2-orange {
    height: 10px;
    background-color: #FFAB00;
    background-image:
            linear-gradient(90deg, white 50%, transparent 50%, transparent 100%);
    background-size: 20px;
    background-position: 0 0;
}


.text-highlight{ position: relative;
    z-index: 1;}
.text-highlight::before {
    content: "";
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    bottom: 0.1em;
    height: 0.6em;
    z-index: -1;
}

.text-highlight-white::before{
    background-color: #ffffff;
    }

.text-highlight-sky::before{
    background-color: #EAF9FF;
}

.page {
    padding: 30px;
    font-family: 'Pretendard', sans-serif;
    color: #333;
    background: #f5f6fa;
    min-height: 100vh;
}



/* 상단 제목 */
.page-header {
    margin-bottom: 22px;
}
.page-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
}


/*!* 콘텐츠 카드 *!*/
.card {
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}



.border {
    border-width: 1px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.15);
}

.border-blue {
    border-width: 1px;
    border-style: solid;
    border-color: #00B4FF;
}
.border-orange {
    border-width: 1px;
    border-style: solid;
    border-color: #FF8B00;
}



.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.15);
}

.border-b-blue {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #00B4FF;
}

.border-b-white {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: white;
}




@media (min-width: 1024px) {
    .lg-border-b-blue-3 {
        border-bottom-width: 3px;
        border-bottom-style: solid;
        border-bottom-color: #00B4FF;
    }
}




.back-link {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #00b0ff; /* 파란 원 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

    /* 터치 UX */
    -webkit-tap-highlight-color: transparent;
}

.back-link:active {
    transform: scale(0.95);
}

.back-link .arrow {
    width: 10px;
    height: 10px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(45deg);
    margin-left: 3px; /* 시각적 중앙 보정 */
}




/* opacity utilities */
.opacity-0   { opacity: 0; }
.opacity-5   { opacity: 0.05; }
.opacity-10  { opacity: 0.1; }
.opacity-20  { opacity: 0.2; }
.opacity-25  { opacity: 0.25; }
.opacity-30  { opacity: 0.3; }
.opacity-40  { opacity: 0.4; }
.opacity-50  { opacity: 0.5; }
.opacity-60  { opacity: 0.6; }
.opacity-70  { opacity: 0.7; }
.opacity-75  { opacity: 0.75; }
.opacity-80  { opacity: 0.8; }
.opacity-90  { opacity: 0.9; }
.opacity-95  { opacity: 0.95; }
.opacity-100 { opacity: 1; }



#global-sheet-dim {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 999; /* 시트보다 낮게 */
}

#global-sheet-dim.show {
    opacity: 1;
    pointer-events: auto;
}



/* vertical-align utilities
 * inline / inline-block / table-cell 전용
 * @author 박주병
 */

/* 기본 */
.align-baseline {
    vertical-align: baseline;
}

.align-middle {
    vertical-align: middle;
}

.align-top {
    vertical-align: top;
}

.align-bottom {
    vertical-align: bottom;
}

/* 텍스트 기준 */
.align-text-top {
    vertical-align: text-top;
}

.align-text-bottom {
    vertical-align: text-bottom;
}

/* 특수 */
.align-sub {
    vertical-align: sub;
}

.align-super {
    vertical-align: super;
}

/* Header menu utility surfaces */
.bg-header-soft { background-color: #fff9df; }
.bg-white-82 { background-color: rgba(255, 255, 255, 0.82); }
.bg-transparent { background-color: transparent; }

.border-y-header-line {
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.border-6 {
    border-width: 0.6rem;
    border-style: solid;
}

.border-8 {
    border-width: 0.8rem;
    border-style: solid;
}

.border-dotted {
    border-style: dotted;
}

.border-yellow-400 {
    border-color: #FFD300;
}

.border-brown-700 {
    border-color: #754913;
}

.border-b-header-yellow {
    border-bottom: 1px solid #f3cb2e;
}

.border-0 { border: 0; }

.pill-link {
    background-color: transparent;
    color: #ffb200;
    padding: 0;
    border-radius: 0;
}

@media (min-width: 768px) {
    .md-border-bottom-yellow-13 {
        border-bottom: 13px solid #ffd400;
    }
}

@media (min-width: 1024px) {
    .pill-link {
        background-color: #ffd300;
        color: #ffffff;
        padding: 0.42em 0.9em;
        border-radius: 9999px;
    }
}

.hover-opacity-85:hover,
.hover-opacity-85:focus-visible {
    opacity: 0.85;
}

/* Menu tab navigation */
.menu-tab-list {
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 10px;
}

.menu-tab-list::after {
    content: "";
    flex-basis: 100%;
    order: 1;
}

.menu-tab-list li:nth-child(n+3) {
    order: 2;
}

.menu-tab-list.no-mobile-break::after {
    content: none;
}

.menu-tab-list.no-mobile-break li:nth-child(n+3) {
    order: 0;
}

.menu-tab-link {
    text-decoration: none;
    transition: color .2s ease, font-weight .2s ease;
}

.menu-tab-link:hover,
.menu-tab-link:focus-visible,
.menu-tab-link.is-active {
    color: #FFD300;
    font-weight: 900;
}

@media (min-width: 1024px) {
    .menu-tab-list {
        flex-wrap: nowrap;
        row-gap: 0;
    }

    .menu-tab-list::after {
        content: none;
    }

    .menu-tab-list li:nth-child(n+3) {
        order: 0;
    }
}