/*!
 * cellcorp-base.css — cellcorp.kr base scaffolding
 * (c) CELL Corp. 2026 — replaces Mazel style.css (no template dependencies)
 *
 * Scope: structural primitives that cellcorp.css does not provide.
 *   1) Body reset / wrapper
 *   2) Background image utility
 *   3) Section padding
 *   4) Header base layout (cellcorp.css overrides visuals with !important)
 *   5) Logo
 *   6) Navigation menu (desktop + mobile ≤1024px)
 *   7) Hamburger nav-menu-icon
 *   8) Preloader + spinner
 *
 * Bootstrap 3 supplies grid/typography reset; this file fills the gap.
 */

/* 1. Body / wrapper ---------------------------------------------------- */
body {
    color: #666666;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

a,
a:hover,
a:focus {
    text-decoration: none;
}

#page-wraper .wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 2. Background image utility ----------------------------------------- */
.bg-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* 3. Section padding -------------------------------------------------- */
.section-padding   { padding-top: 100px; padding-bottom: 100px; }
.section-padding-t { padding-top: 100px; }
.section-padding-b { padding-bottom: 100px; }

/* 4. Header base ------------------------------------------------------ */
.header {
    position: absolute;
    text-align: center;
    top: 0;
    left: 0;
    z-index: 1000;
    color: #fff;
    width: 100%;
    height: 99px;
    transition: background-color 200ms ease-in-out;
}

.header.header-fixed {
    display: block;
    margin-top: 0 !important;
    position: fixed;
    height: 65px;
}

.header-inner {
    padding-left: 30px;
    padding-right: 30px;
    position: relative;
}

/* 5. Logo ------------------------------------------------------------- */
.logo {
    float: left;
    text-align: left;
    display: inline-block;
}

.logo a {
    width: 180px;
    display: block;
    margin-top: 30px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
}

.logo a img {
    width: 100%;
    transition: all 0.3s ease;
}

.header-fixed .logo a {
    margin-top: 15px;
    margin-bottom: 15px;
    width: 160px;
}

/* 6. Navigation menu (desktop) --------------------------------------- */
.nav-menu {
    position: static;
    float: right;
    display: block;
}

.nav-menu.active { display: block; }

.nav-menu ul.nav-menu-inner {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu ul.nav-menu-inner > li {
    display: inline-block;
    list-style: none;
    text-align: center;
}

.nav-menu ul.nav-menu-inner > li > a {
    display: block;
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 43px 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.header-fixed .nav-menu ul.nav-menu-inner li a { padding: 26px 12px; }

.nav-menu-icon.active a,
.nav-menu-icon:hover a,
.nav-menu ul.nav-menu-inner li.active > a,
.nav-menu ul.nav-menu-inner li > a.active,
.nav-menu ul.nav-menu-inner li:hover > a,
.nav-menu ul.nav-menu-inner li > a:hover,
.header-fixed .nav-menu ul.nav-menu-inner li > a.current,
.header-fixed .nav-menu ul.nav-menu-inner li.current > a {
    color: #c7a674;
}

/* 7. Hamburger icon -------------------------------------------------- */
.nav-menu-icon {
    display: none;
    float: right;
}

.nav-menu-icon a {
    color: #fff;
    display: block;
    font-size: 17px;
    padding: 19px 0;
}

/* Mobile menu ≤1024px ------------------------------------------------ */
@media all and (max-width: 1024px) {
    .header { height: 65px; }

    .header .logo a {
        margin-top: 15px;
        margin-bottom: 15px;
        width: 160px;
    }

    .nav-menu {
        position: fixed;
        top: 65px;
        left: 0;
        float: none;
        width: 100%;
        background: #333;
        overflow-y: auto;
        display: none;
        z-index: 999;
    }

    .nav-menu ul.nav-menu-inner li {
        display: block;
        width: 100%;
    }

    .nav-menu ul.nav-menu-inner li a,
    .header-fixed .nav-menu ul.nav-menu-inner li a {
        padding: 20px 12px;
        border-top: 1px solid #444;
    }

    .nav-menu-icon,
    .header-fixed .nav-menu-icon {
        display: inline-block;
        float: right;
    }
}

/* 8. Preloader ------------------------------------------------------- */
#preloader {
    background-color: #fff;
    position: fixed;
    inset: 0;
    z-index: 99999999999;
    display: block;
}

.site-spinner {
    width: 44px;
    height: 44px;
    border: 2px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -22px 0 0 -22px;
    box-sizing: border-box;
    animation: site-spin 1s linear infinite;
}

@keyframes site-spin {
    to { transform: rotate(360deg); }
}