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

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


@font-face {
    font-family: 'GumiRomance';
    src: url('/assets/fonts/Gumi Romance.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSansKR';
    src: url('/assets/fonts/NotoSansKR-Bold.ttf') format('truetype');
    font-weight: 700;

}


:root {
    --primary: #00B4FF;
}



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

html{font-size:62.5%;}
/* 기본 (320px ~ 374px) → 초소형 기종 (옛 iPhone SE 등) */
@media (max-width: 374px) {  }

/** 최신 아이폰 기본/Pro */
@media (min-width: 390px) {
    html { font-size: 65%; } /* 1rem ≈ 10.4px */
}
/* 갤럭시 S 시리즈, 대다수 안드로이드 */
@media (min-width: 412px) {
    html { font-size: 68.75%; } /* 1rem = 11px */
}
/* 아이폰 Pro Max / Plus */
@media (min-width: 430px) {
    html { font-size: 71.25%; } /* 1rem ≈ 11.4px */
}
/* 대화면/폴더블/태블릿 세로 */
@media (min-width: 600px) {
    html { font-size: 75%; } /* 1rem = 12px */
}

/* 태블릿 가로 / 소형 노트북 */
@media (min-width: 768px) {
    html { font-size: 81.25%; } /* 1rem = 13px */
}


@media (min-width: 1024px) {
    html {
        font-size: clamp(87.5%, 0.85vw + 82%, 100%);
    }
}


.btn{
    width:100%;
    height: 43px;
    border: none;
    color: white;
    font-size: 1.6rem;
    font-weight: 900;
    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-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-yellow{background-color: #FF6800;}
.bg-yellow-500{background-color: #F4B70F;}
.bg-orange-dark{background-color: #DC821B;}
.bg-orange-100{background-color: #FFAB00;}
.bg-red-900{background-color: #AF3204;}
.bg-orange-500{background-color:#FF8528;}
.bg-orange-600{background-color: #FF8B00;}
.bg-orange-700{background-color: #FF6F00;}
.bg-orange-800{background-color: #FE7B00;}
.bg-brown-700{background-color: #835D3B;}
.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-100{background-color: #DBDBDB;}



.bg-cream-100 { background-color: #FFF7E8; }













.only-pc { display: none; }
@media (min-width: 1024px) {
    .only-pc { display: block !important;}
    .only-mobile { display: none !important; }
    .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-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(0, 0, 0, 0.15);
}







#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;
}