/*
기본 CSS를 작성합니다
기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.
*/


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');

::selection {
    background-color: var(--brand-color);
    color: white;
}

* {
    font-family: 'Noto Serif KR', 'Noto Sans KR', sans-serif;
}


a {
    text-decoration: none;
}

.nav-title {
    font-size: 1.5rem;
    color: var(--brand-color);
    max-width: 15rem;
    height: 100%;
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-img {
    height: 100%;
    width: 100%;
}

.navbar{
    height: 128px;
    transition: height 0.3s ease;
}

.nav-container {
    width: 100%;
    position: relative;
}

.nav-top {
    height: 80px;
    align-items: center;
}

.navbar-toggler {
    position: absolute;
    right: 0;
}

.navbar-toggler-icon {
    background-image: url(/skin02/img/hbg.png);
    display: none;
}

.nav-link {
    font-family: "Noto Sans KR", sans-serif;
    margin-bottom: 1rem;
}

.nav-menu-section {
    width: 50%;
}

.nav-menu-link {
    font-family: "Noto Sans KR", sans-serif;
    color: var(--s2-ink, #212529);
}

.nav-link:hover, .nav-menu-link:hover {
    color: var(--brand-color);
    cursor: pointer;
}

.current-link {
    color: var(--brand-color);
}


/************** FOOTER **************/
.footer-section {
    /* 푸터 바탕은 본문 글자색과 별개 토큰이다 — 묶어 두면 다크 테마에서
       바탕이 밝아지면서 흰 글자가 사라진다 */
    background-color: var(--s2-footer-bg, #444444);
    color: var(--s2-footer-ink, #fff);
    width: 100%;
}

.footer-section .row {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding:  3rem 0;
    align-items: center;
}

.footer-title {
    font-family: "Noto Sans KR", sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
}
.footer-text-wrapper {
    text-align: end;
}
.footer-text {
    display: block;
    font-family: "Noto Sans KR", sans-serif;
    font-size: 0.8rem;
}
/************* FOOTER END *************/





/*테스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)*/
@media (max-width: 1199px) {
    .nav-menu-section {
        width: 75%;
    }
}

/*태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)*/
@media (max-width: 991px) {


}

/*가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)*/
@media (max-width: 767px) {
    .nav-menu-section {
        width: 80%;
    }

    .footer-title-wrapper {
        margin-bottom: 3rem;
    text-align: center;
    }

    .footer-text-wrapper {
        text-align: center;
    }

}

/*세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)*/
@media (max-width: 575px) {
    .navbar{
        height: 96px;
    }

    .navbar-toggler-icon {
        display: flex;
    }

    .nav-menu-section {
        display: none;
    }

}




/* ============================================================
   모바일 메뉴(offcanvas) iOS 가로 밀림 방지 — 2026-09-03
   ------------------------------------------------------------
   부트스트랩 offcanvas 는 닫힌 상태에서 position:fixed + translateX(100%)
   로 **화면 오른쪽 밖에 주차**된다. fixed 요소라 조상의 overflow:hidden 으로
   잘리지 않고, 크롬의 scrollWidth 검사는 통과하지만
   **iOS 사파리에서는 실제로 가로 스크롤이 생긴다.**
   (320px 폭에서는 크롬에서도 8px 밀렸다)

   → 완전히 닫힌 동안에는 아예 렌더 트리에서 빼서 화면 밖 점유를 없앤다.
     .showing / .hiding 은 남겨 두므로 여닫는 동작과 닫힘 애니메이션은 그대로다.
   되돌리려면 이 블록만 지우면 된다. 백업: /root/backup_skin02_css_20260903_0900
   ============================================================ */
.offcanvas:not(.show):not(.showing):not(.hiding) {
    display: none !important;
}

/* ═════════════════════════════════════════════════════════════
   skin02 색 토큰 + 업종별 테마 — 2026-09-03
   ─────────────────────────────────────────────────────────────
   · 원래 skin02 는 색이 9개 CSS 에 하드코딩돼 있었다(42곳).
     그걸 토큰으로 바꾸고 기본값을 **원래 색 그대로** 넣었다.
     → data-theme 이 없으면 예전과 1px도 다르지 않다.
   · 업체가 고른 --brand-color 는 그대로 포인트로 남는다.
   되돌리려면 이 블록과 body 규칙만 지우면 된다(토큰엔 원래 색이 fallback 으로 남아 있다).
   백업: /root/backup_skin02_css_20260903_0900
   ═════════════════════════════════════════════════════════════ */
:root {
    --s2-bg:        #ffffff;
    --s2-bg-2:      #ebebeb;
    --s2-surface:   #ffffff;
    --s2-line:      #C8C8C8;
    --s2-line-2:    #e5e5e5;
    --s2-ink:       #212529;
    --s2-ink-2:     #5D5D5D;
    --s2-ink-3:     #999999;
    --s2-footer-bg: #444444;
    --s2-footer-ink:#ffffff;
}

body { background-color: var(--s2-bg); }

/* warm — 크림·테라코타 (음식점·카페) */
html[data-theme="warm"] {
    --s2-bg:#FBF7F2; --s2-bg-2:#F3EBE1; --s2-surface:#FFFDFA;
    --s2-line:#D2BFA9; --s2-line-2:#E6D9C9;
    --s2-ink:#2A211A; --s2-ink-2:#5C4C3F; --s2-ink-3:#8B7967;
    --s2-footer-bg:#2A211A;
}
/* soft — 뉴트럴 소프트 (미용·네일) */
html[data-theme="soft"] {
    --s2-bg:#FAF9F9; --s2-bg-2:#F2EFEF; --s2-surface:#FFFFFF;
    --s2-line:#D6CDCD; --s2-line-2:#E8E2E2;
    --s2-ink:#241F21; --s2-ink-2:#574E51; --s2-ink-3:#8A8085;
    --s2-footer-bg:#241F21;
}
/* craft / wood — 내추럴 린넨·우드 (공방·클래스·숙박) */
html[data-theme="craft"], html[data-theme="wood"] {
    --s2-bg:#F7F5F1; --s2-bg-2:#EDE9E2; --s2-surface:#FFFFFF;
    --s2-line:#C6BDAD; --s2-line-2:#DED8CD;
    --s2-ink:#23211D; --s2-ink-2:#55504A; --s2-ink-3:#877F74;
    --s2-footer-bg:#23211D;
}
/* bloom — 파스텔 보태니컬 (꽃집) */
html[data-theme="bloom"] {
    --s2-bg:#FCFBF8; --s2-bg-2:#F1F0E8; --s2-surface:#FFFFFF;
    --s2-line:#C9CDBC; --s2-line-2:#E3E4DA;
    --s2-ink:#2C302A; --s2-ink-2:#5A6055; --s2-ink-3:#8A9084;
    --s2-footer-bg:#2C302A;
}
/* calm — 세이지 (요가·필라테스·웰니스) */
html[data-theme="calm"] {
    --s2-bg:#F6F7F3; --s2-bg-2:#E9EDE3; --s2-surface:#FFFFFF;
    --s2-line:#BEC7AE; --s2-line-2:#DCE1D3;
    --s2-ink:#232720; --s2-ink-2:#4F564A; --s2-ink-3:#808877;
    --s2-footer-bg:#232720;
}
/* bold — 다크 하이컨트라스트 (헬스·스포츠) */
html[data-theme="bold"] {
    --s2-bg:#0F1113; --s2-bg-2:#16191C; --s2-surface:#1C2024;
    --s2-line:#3A3F44; --s2-line-2:#2A2E32;
    --s2-ink:#F2F4F5; --s2-ink-2:#B6BDC2; --s2-ink-3:#868E94;
    --s2-footer-bg:#0A0C0E;
}
html[data-theme="bold"] .navbar,
html[data-theme="bold"] .offcanvas { background-color: var(--s2-bg) !important; color: var(--s2-ink); }
html[data-theme="bold"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="bold"] input,
html[data-theme="bold"] textarea,
html[data-theme="bold"] select { background-color: var(--s2-surface); color: var(--s2-ink); border-color: var(--s2-line); }

/* 다크 테마 썸네일 바탕 통일 (skin01v2 와 같은 이유) */
html[data-theme="bold"] .menu-a-img-wrapper,
html[data-theme="bold"] .gall-img-wrapper,
html[data-theme="bold"] .menu-c-img-wrapper { background-color: #FFFFFF; }