.scrlLock { overflow-y: hidden; }

#header { position: fixed; left: 0; top: 0; width: 100%; z-index: 10; backdrop-filter: blur(10px); background: rgba(0, 0, 0, .025); transform: translateY(0); transition: transform .5s; }
#header.on, #header.lockon { background: rgba(96, 27, 46, .5); }
#header.up { transform: translateY(-100%); }
#header .wrap { width: 90%; margin: auto; }
#header .logo { width: 20rem; }
#header.lockon .logo img { filter: invert(1) saturate(0) !important; }
#header .gnb { display: flex; justify-content: center; gap: 3.5rem; }
#header .gnb > li { position: relative; }
#header .gnb > li > span { display: inline-block; color: var(--subcolor); cursor: pointer; padding: 2.5rem 0; }
#header.on .gnb > li > span, #header.lockon .gnb > li > span { color: #fff !important; }
#header .gnb .point-font { letter-spacing: .5px; }
#header .lnb { display: block; position: absolute; left: 50%; top: 6.5rem; transform: translateX(-50%); width: 15rem; background: #fff; text-align: center; padding: 1rem; border-top: 2px solid var(--pointcolor); opacity: 0; visibility: hidden; transition: .5s; }
#header .lnb.on { opacity: 1; visibility: visible; }
#header .lnb li a { position: relative; display: block; color: #656565; padding: .75rem 0; font-weight: 400; transition: .5s; }
#header .lnb li a::after { position: absolute; content: ''; height: 1px; width: 0; background: var(--pointcolor); bottom: .5rem; left: 50%; transform: translateX(-50%); transform-origin: center; transition: .5s; }
#header .lnb li:hover > a { color: var(--pointcolor); font-weight: 700; }
#header .lnb li:hover > a::after { width: 75%; }
#header .lnb li.hasChild { position: relative; }
#header .depth3 { position: absolute; width: 100%; border-top: 2px solid var(--pointcolor); right: calc( -100% - 1.25rem ); top: 0; background: #fff; opacity: 0; visibility: hidden; transition: .5s; }
#header .depth3.on { opacity: 1; visibility: visible; }
#header .depth3 li a { display: block; padding: .75rem 0; color: #656565; }
#header .burger span { display: block; width: 30px; height: 3px; background: var(--subcolor); }
#header .burger span:not(:first-child, :last-child) { margin: .25rem 0; }
#header.on .burger span , #header.lockon .burger span { background: #fff !important; } 
@media(max-width:1500px){
    #header .wrap { width: 95%; }
}
@media(max-width:1420px){
    #header .wrap { width: 90%; margin: 2rem auto; }
    #header .gnb { display: none; }
}

#fullMenu { position: fixed; top: -100vh; left: 0; width: 100%; height: 100vh; background-color: #190306; z-index: 100; background-image: url(/img/common/bg_fullmenu_logo.png); background-position: right bottom; background-size: auto; background-repeat: no-repeat; transition: .5s; opacity: 0; }
#fullMenu.on { top: 0; opacity: 1; }
#fullMenu.on .container_mini { padding: 100px 0; }
#fullMenu .fnb { --count: 6; }
#fullMenu .fnb > li { width: calc( 100% / var(--count) ); }
#fullMenu .fnb > li:nth-child(n+7) { margin-top: 3rem; }
#fullMenu .fnb > li > span { color: #fff; font-size: 1.5625rem; font-weight: 500; }
#fullMenu .fnb .lnb { margin-top: 1.25rem; }
#fullMenu .fnb .lnb > li > a { display: block; padding: .5rem 0; color: #fff; letter-spacing: .25px; }
#fullMenu .fnb .lnb > li:hover > a { display: block; text-decoration: underline; text-underline-offset: 5px; }
#fullMenu .depth3 { display: none; }
#fullMenu .line { width: 100%; height: 1px; background: rgba(255,255,255, .3); }
#fullMenu h2.logo img { filter: invert(1) saturate(0); }
#fullMenu .login a { padding: .75rem 2rem; border-radius: 2rem; border: 1px solid rgba(255,255,255, .3); }
#fullMenu .burger { position: absolute; right: 5%; top: 2rem; }
@media(max-width:990px){
    #fullMenu { background-size: 60%; overflow-y: auto; }
    #fullMenu .container_mini { display: none; }
    #fullMenu.on .container_mini { display: block; padding: 30px 0; margin-bottom: 60px; }
    #fullMenu .fnb .lnb { display: none; margin-top: .75rem; }
    #fullMenu .fnb > li { width: 100%; font-size: 1.75rem; border-bottom: 1px solid rgba(255,255,255, .3); cursor: pointer; }
    #fullMenu .fnb > li > span { position: relative; display: block; padding: 2rem 0; font-size: 2rem; font-weight: 700; }
    #fullMenu .fnb > li > span::after { position: absolute; content: url(/img/common/ico_fullmenu_arrow.png); transform: translateY(-50%) rotate(180deg); right: 1rem; top: 50%; transition: .5s; }
    #fullMenu .fnb > li.active > span::after { transform: translateY(-50%) rotate(0deg); }
    #fullMenu .fnb > li:nth-child(n+7) { margin-top: 0; }
    #fullMenu .fnb .lnb > li { display: inline-block; min-width: 45%; }
    #fullMenu .fnb .lnb > li:last-child { margin-bottom: 1.5rem; }
    #fullMenu .fnb .lnb > li > a { padding: 1rem 0; }
    #fullMenu .fnb .lnb > li.hasChild { position: relative; }
    /* #fullMenu .fnb .lnb > li.hasChild::after { position: absolute; content: url(/img/common/ico_fullmenu_arrow_sm.png); transform: translateY(-50%) rotate(180deg); right: 10%; top: 50%; transition: .5s; } */
    #fullMenu h2.logo img { max-width: 100px; }
    #fullMenu .burger { top: 1rem; }
    #fullMenu .mobile_logo { border-bottom: 1px solid rgba(255,255,255, .5); }
    #fullMenu .mobile_logo > * { padding: 1rem 5%; }
    #fullMenu .mobile_logo .login a { border: none; padding: 0 0 0 1.5rem; border-radius: 0; margin-left: 0; }
    #fullMenu .mobile_logo .login a:not(:last-child) { padding-right: 1.5rem; position: relative; }
    #fullMenu .mobile_logo .login a:not(:last-child)::after { position: absolute; content: ''; width: 1px; height: 50%; background: rgba(255,255,255, .75); right: 0; top: 50%; transform: translateY(-50%); }
    #fullMenu .mobile_logo .login span { margin-right: 0; font-size: 1.5rem; }
    #fullMenu .mobile_logo .login svg { display: none; }
}

#quick { display: block; position: fixed; right: 3.5rem; bottom: 3.5rem; z-index: 50; }
#quick ul { display: flex; align-items: flex-end; flex-direction: column; }
#quick ul li:not(:first-child) { margin-top: .5rem; }
#quick ul li[data-button="toggle"], #quick ul li[data-button="top"] { width: 57px; height: 57px; aspect-ratio: 1/1; border-radius: 50px; cursor: pointer; overflow: hidden; }
#quick ul li[data-button="toggle"] { background: #fff; }
#quick ul li[data-button="toggle"] .icon { transform: rotate(0); transition: .5s; }
#quick ul li[data-button="toggle"].opened .icon { transform: rotate(45deg); }
#quick ul li[data-button="top"] { background: var(--subcolor); z-index: 10; }
#quick ul li a { display: flex; align-items: center; justify-content: center; width: 57px; height: 57px; aspect-ratio: 1/1; border-radius: 50px; cursor: pointer; overflow: hidden; transition: .3s; }
#quick ul li[data-quick="tel"] a { background: var(--pointcolor); }
#quick ul li[data-quick="kakao"] a { background: #fae300; }
#quick ul li[data-quick="naver"] a { background: #00c73c; }
#quick ul li[data-quick="blog"] a { background: #32b44a; }
#quick ul li[data-quick="insta"] a { background: linear-gradient(to top, #fec663, #e8414c, #4e47d1); }
#quick ul li[data-quick="youtube"] a { background: #fff; }
#quick ul li[data-quick="directions"] a { background: #a51a3b; }
#quick ul li[data-quick="lapis"] a { background: #214175; }
#quick ul li[data-quick="lapis"] a img { filter: invert(1); }
#quick ul li .icon { display: flex; justify-content: center; align-items: center; width: 57px; height: 57px; }
#quick ul li span { display: none; white-space: nowrap; }
#quick ul li.active a { width: 200px; justify-content: flex-start; }
#quick ul li.active[data-quick="lapis"] a { width: 210px; }
#quick ul li.active span { display: inline-block; }

#addQuick { display: block; position: fixed; left: 2.5rem; bottom: 20%; transform: translateY(-20%); z-index: 50; }
#addQuick ul { display: flex; align-items: flex-end; flex-direction: column; }
#addQuick ul li:not(:first-child) { margin-top: .5rem; }
#addQuick ul li a { display: flex; align-items: center; justify-content: center; height: 45px; aspect-ratio: 1/1; border-radius: 50px; cursor: pointer; overflow: hidden; transition: .3s; }
#addQuick ul li[quick-type="wide"] a { width: 150px; aspect-ratio: auto; border-radius: 2rem; background: var(--pointcolor); justify-content: space-between; transition: .5s; }
#addQuick ul li[quick-type="wide"]:hover a { background: #fff; color: var(--pointcolor); }
#addQuick ul li[quick-type="wide"] span { display: block; color: #fff; margin-left: 1.25rem; transition: .5s; }
#addQuick ul li .icon { display: flex; justify-content: center; align-items: center; width: 45px; height: 45px; }
#addQuick ul li[quick-type="wide"]:hover span { color: var(--subcolor); }
#addQuick ul li[quick-type="wide"]:hover svg { fill: var(--subcolor); }
@media(max-width:1420px){
    #quick { right: 3%; }
    #quick ul li.active a { width: auto; }
    #quick ul li.active span { display: none; }
    #quick ul li[data-button="toggle"], #quick ul li[data-button="top"], #quick ul li .icon, #quick ul li a { width: 60px; height: 60px; }
}
@media(max-width:990px){
    #addQuick { left: 3%; bottom: 3.5rem; transform: translateY(0); }
    #addQuick ul li[quick-type="wide"] { width: 100%; }
    #addQuick ul li[quick-type="wide"] a { width: 100%; height: auto; padding: 1.25rem; border-radius: 3rem; }
    #addQuick ul li[quick-type="wide"] span { margin-left: 0; }
    #addQuick ul li[quick-type="wide"] .icon { width: fit-content; height: auto; }
    #addQuick ul li[quick-type="wide"]:hover svg { width: 16px; height: 16px; }

}

#footer { padding: 5rem 0; border-top: 1px solid var(--pointcolor); }
#footer .order1 { order: 1; }
#footer .order2 { order: 2; }
#footer .order3 { order: 3; }
@media(max-width:990px){
    #footer .order1 { order: 3; margin-top: 1rem; text-align: center; }
    #footer .order2 { order: 1; }
    #footer .order3 { order: 2; margin-top: 1rem; }
    #footer .order3 ul { width: 75%; margin: auto; justify-content: space-between; }
}

/* === 헤더를 항상 '흰색 테마'로 고정 === */
#header { --subcolor: #fff; }                           /* 헤더 내부 변수 오버라이드 */
#header .gnb > li > span { color: var(--subcolor) !important; }  /* 메뉴 텍스트 */
#header .burger span { background: var(--subcolor) !important; } /* 햄버거 3줄 */
#header .logo img { filter: brightness(0) invert(1) !important; }/* 로고를 흰색화 */

/* === 헤더 항상 흰색 고정 === */
#header,
#header.on,
#header.lockon { --subcolor: #fff !important; } /* 내부 변수도 흰색으로 잠금 */

#header .gnb > li > span,
#header.on .gnb > li > span,
#header.lockon .gnb > li > span { color:#fff !important; }

#header .burger span,
#header.on .burger span,
#header.lockon .burger span { background:#fff !important; }

#header .logo img,
#header.on .logo img,
#header.lockon .logo img { filter: brightness(0) invert(1) !important; }