@charset "utf-8"; 
/* Info
 ========================================================================== */
/**
    * 1. Writer: Lee A Jin. (Weaverloft Corp.)
    * 2. Production Date: 2026-01
    * 3. Client: Krafton Olive Tree 
    * 4. Description: Common Style
 */

/*========== Import ==========*/
@import url("reset.css");
@import url("fonts.css");
@import url("include.css");
@import url("layout.css");

/*========== Root ==========*/
:root { 
    --key-color: #BED836; 
    --font-color: #404040; 
}

/*========== Base ==========*/
* { letter-spacing: 0; -webkit-font-smoothing: antialiased;scroll-behavior: smooth; } 
html { width: 100%; font-family: 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0; -webkit-tap-highlight-color: transparent; background-color: var(--bg-color); } 
body { width: 100%; min-width: 310px; margin: 0; font-size: 1rem; font-family: 'Poppins', sans-serif; line-height: 1.37; letter-spacing: 0; color:var(--font-color);} 
canvas * { font-family: 'Poppins', sans-serif; } 
a { display: block; width: 100%; text-decoration: none; cursor: pointer; font-family: 'Poppins', sans-serif; color:var(--font-color); } 
button {font-size: 1rem; font-family: 'Poppins', sans-serif; color:var(--font-color);}
span {display: inline-block; font-weight: inherit; font-family: inherit; letter-spacing: inherit;}
i {display: inline-block;}
* ::placeholder{ font-size: inherit; font-weight: 400; color: #777 !important;}
body.scroll-disable {overflow: hidden;}
.skip-to-content { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: -9999px; z-index: 1100; width: 180px; height: 50px;}
.skip-to-content:focus {left: 0;top: 0;background-color: var(--font-color);color: #fff;padding: 10px;font-size: 14px; font-weight: 500;text-align: center; outline: 2px dashed #111;}

/* 비활성화 */
.disabled { cursor: default; pointer-events: none; outline: none !important; }
:disabled { outline: none !important; } 
input:disabled, textarea:disabled {color: var(--gray_95) !important; background-color: #F8F8F8 !important;} 
.disabled input, .disabled textarea {color: var(--gray_95) !important; background-color: #F8F8F8 !important;} 

/* Scroll */
html::-webkit-scrollbar {width: 10px;height: 10px;background-color: #fff;border-radius: 6px;}
html::-webkit-scrollbar-thumb {background-color: #666666;border-radius: 6px;}
html::-webkit-scrollbar-track { background-color: #E5E5E5;}
body * ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #fff;} 
body * ::-webkit-scrollbar-thumb { background-color: #666; } 
body * ::-webkit-scrollbar-track { background-color: #E5E5E5;} 

/*========== lazyload ==========*/
.fade-in { opacity: 0; transition: opacity 500ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.fade-in.lazyloaded { opacity: 1; }
.fade-in.loaded { opacity: 1; }
/* Accessibility: Reduce Motion preference */
@media (prefers-reduced-motion: reduce) {
    .fade-in { transition: none; }
}

/*========== Loading ==========*/
.loading-spinner-wrapper {position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999;}
.loading-spinner {width: 40px;height: 40px;border: 5px solid #fff;border-top: 4px solid transparent;border-radius: 50%;animation: loadingRotate 1s linear infinite;}
.loading-text {margin-top: 15px; color: #fff; }
@keyframes loadingRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/*========== Custom Design - Button ==========*/
.btn-wrap { display: flex; gap: 8px; align-items: center; justify-content: center; line-height: 1; } 
.btn-wrap.left { justify-content: flex-start; } 
.btn-wrap.right { justify-content: flex-end; } 
.btn-wrap a { width: auto; } 
.basic-btn { display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; min-width: 260px; padding:20px 10px; border-radius: 30px; border: 1px solid var(--key-color); background-color: var(--key-color); color: var(--font-color);font-size: 18px; font-weight: 700; line-height: 1; white-space: nowrap; box-sizing: border-box; cursor: pointer; transition: background-color 300ms, border-color 300ms, opacity 300ms, color 300ms;letter-spacing: 0;} 
.basic-btn span {line-height: 1;}
.basic-btn:hover {background-color: #cfe944;} 
@media screen and (max-width: 1100px) {
    .basic-btn {min-width: 186px;padding: 14px 10px;font-size: clamp(15px,1.6364vw, 18px);}
}

/*========== List Style ==========*/
.list-style > li { display: flex; position: relative; padding: 0 0 0 10px; font-size: 16px; font-weight: 400; color: var(--font-color); line-height: 1.625; letter-spacing: -0.02rem;margin-left: 16px;} 
.list-style > li.block { display: block; } 
.list-style > li a {display: inline-block; width: fit-content; font-size: inherit;font-weight: inherit; color: inherit;line-height: 1.625; letter-spacing: -0.02rem; margin-left: 0; text-decoration: underline;text-underline-offset: 2px; }
.list-style > li p {display: inline-block; font-size: inherit;font-weight: inherit; color: inherit;line-height: 1.625; letter-spacing: -0.02rem;}
.list-style > li span {font-size: inherit;font-weight: inherit; color: inherit;line-height: 1.625; letter-spacing: -0.02rem;}
.list-style > li.list-tit {padding: 0; font-weight: 700; margin-left: 0;}
.list-style > li.list {padding: 0; font-weight: 400; margin-left: 0;}
.list-style > li.list-txt {padding: 0; margin-left: 0;}
.list-style > li.list-txt.bold {font-weight: 700;}
.list-style > li.list-tit span {margin-left: 16px;}
.list-style > li.list span {margin-left: 16px;}
.list-style > li.circle::before { content: ''; position: absolute; top: 9px; left: 0; width: 4px; height: 4px; background-color: var(--font-color); border-radius: 50%; } 
.list-style > li.dash::before { content: '-'; position: absolute; top: 0; left: 0; font-size: inherit; color: inherit; } 
.list-style > li.indent {margin-left: 5px;}
.list-style > li.sub-indent {margin-left: 25px;}
.list-style > li.sub-indent.dash {margin-left: 30px;}

@media screen and (max-width: 1100px) {
    .list-style > li {font-size: clamp(14px,1.454vw, 16px);margin-left: 12px;}
    .list-style > li.indent {margin-left: 2px;}
    .list-style > li.sub-indent {margin-left: 21px;}
    .list-style > li.sub-indent.dash {margin-left: 26px;}
}

/*========== Custom Design - Custom Select ==========*/
.custom-select-box { position: relative; width: auto; max-width: 260px; height: 50px; }
.custom-select-box .init { height: 100% }
.custom-select-box .init a { display: flex; align-items: center; position: relative; z-index: 2; height: 100%; padding: 8px 20px; background-color: #fff; border-radius: 30px; border: 1px solid #ccc; font-size: 14px; font-weight: 400; color: var(--font-color); transition: border-color 300ms, color 300ms;}
.custom-select-box .init .icon {position: absolute; position: absolute; top: 0; right: 18px; width: 14px; height: 100%; background-image: url('../images/common/icon-arrow-down.svg'); background-repeat: no-repeat; background-size: 100% auto; background-position: center center;}
.custom-select-box .init:hover a {border-color: var(--font-color);}
.custom-select-box.open .init .icon { transform: rotate(-180deg); }
.custom-select-box ul { opacity: 0; overflow: hidden; position: relative; z-index: 1; top: 10px; height: 0; width: 100%;min-width: 70px;border-radius: 10px;background-color: #fff; }
.custom-select-box ul li { width: 100%; height: auto; padding: 0; transition: background-color 300ms; }
.custom-select-box ul li a { opacity: 0.5; position: relative; z-index: 22; padding: 6px 20px;font-size: 14px; font-weight: 400; color: var(--font-color);line-height: 1;transition:all 300ms; }
.custom-select-box ul li:first-child a{padding: 16px 20px 6px;}
.custom-select-box ul li:last-child a {padding: 6px 20px 0;}
.custom-select-box ul li:first-of-type a {padding: 16px 20px 6px;}
.custom-select-box ul li:hover a {opacity: 1;}
.custom-select-box.open ul { opacity: 1; z-index: 22;overflow-y: auto;max-height: 140px; border: 1px solid #ccc;}

@media screen and (max-width: 768px) {
    .custom-select-box {height: 42px;}
    :lang(ko) .custom-select-box {max-width: 180px;}
}

/*========== Progress Bar ==========*/
.progress-area { display: flex; align-items: center; gap: 7px; } 
.progress-container { overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 28px; background-color: var(--key-color); border-radius: 30px;} 
.progress-inner {display: flex; align-items: center; width: calc(100% - 4px); height: calc(100% - 4px); background-color: #fff;border-radius: 30px;}
.progress-bar{ position: relative; left: 6px; width: 0; height: 16px; border-radius: 2px; background-color: var(--key-color); border-radius: 30px; transition: width 0.5s ease-in-out; font-size: inherit; --progress-width: 0%;} 
.progress-bar.animate { width: var(--progress-width); transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } 
.progress-bar.no-transition { transition: none; } 
@media screen and (max-width: 768px) {
    .progress-area {max-width: 88%;}
    .progress-container {height: 22px;}
    .progress-bar {left: 4px;height: 12px;}
}