@charset "utf-8";
/* 필요한 섹션(ex.스티키가 들어가는 섹션)에만 따로  overflow: unset; 추가하세요 */
#container > section {overflow: hidden; padding-block: 120px; display: flex; flex-direction: column; row-gap: 120px;}

/* header */
.site-header {position: sticky; top: 0; left: 0; width:100%; padding-block: var(--fs-18); border-bottom:1px solid var(--grayscale3); background-color:#fff; z-index:1000;}
.site-header .l-inner {height: 100%; display:flex; align-items:center; justify-content:space-between;}
.site-header .logo {flex:0 0 auto;}
.site-header .logo img {height: 28px;}

.gnb {}
.gnb-list {display:flex; align-items:center; gap: calc(var(--fs-24) + var(--fs-20));}
.gnb-list li a {padding: 10px; display:block; font-size:var(--fs-16); font-weight:500; line-height:1.4; color:var(--grayscale10); transition:color .2s ease;}
.gnb-list li.on a,
.gnb-list li a:hover {color:var(--color-main);}

.header-util {display:flex; align-items:center; gap: 14px;}
.header-util .login-btn {padding: 10px; transition:color .2s ease; font-size:var(--fs-16); color: var(--grayscale9); font-weight: 500;}
.header-util .login-btn:hover {color:var(--color-main);}

.mypage-menu {position:relative;}
.mypage-btn {display:block; font-size:var(--fs-16); font-weight:500; line-height:1.4; color:var(--grayscale10);}
.mypage-dropdown {display:none; min-width:150px; position:absolute; top:calc(100% + 18px); right:0; padding:10px; border:1px solid var(--grayscale3); border-radius:12px; background-color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08);}
.mypage-dropdown li a {display:block; padding:10px 12px; border-radius:8px; font-size:var(--fs-14); font-weight:500; color:var(--grayscale8);}
.mypage-dropdown li.on a,
.mypage-dropdown li a:hover {color:var(--color-main); background-color:var(--grayscale2);}
.mypage-menu.open .mypage-dropdown {display:block;}

.site-header .mobile-menu-btn {display:none; width:36px; height:36px; position:relative;}
.site-header .mobile-menu-btn span,
.site-header .mobile-menu-btn span:before,
.site-header .mobile-menu-btn span:after {display:block; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:var(--grayscale6); transition:all .3s;}
.site-header .mobile-menu-btn span {width:14px; left:10px; top:50%; transform:translate(0,-50%);}
.site-header .mobile-menu-btn span:before,
.site-header .mobile-menu-btn span:after {content:''; transform:translate(0,-50%);}
.site-header .mobile-menu-btn span:before {top:-4px;}
.site-header .mobile-menu-btn span:after {top:6px;}
.site-header .mobile-menu-btn.open span {background:transparent !important;}
.site-header .mobile-menu-btn.open span:before {top:0; transform:translate(0,-50%) rotate(45deg);}
.site-header .mobile-menu-btn.open span:after {top:0; transform:translate(0,-50%) rotate(-45deg);}

html:has(.site-header.open) {overflow-y:hidden;}
.site-header .mobile-menu {padding-bottom: calc(var(--fs-16) * 10); transition:right .3s; z-index:99999; display:flex; flex-direction:column; width: 100%; height:calc(100vh - var(--header-height)); position:fixed; top:var(--header-height); right:-100%; left:auto; overflow-y:auto; border-bottom:0; background-color:var(--color-white);}
.site-header.open .mobile-menu {right:0;}
.site-header .mobile-menu nav {width:100%;}
.site-header .mobile-gnb-list,
.site-header .mobile-mypage ul {display:flex; flex-direction:column;}
.site-header .mobile-gnb-list > li > a,
.site-header .mobile-mypage strong,
.site-header .mobile-mypage li a {width:100%; transition:background-color .2s, color .2s; padding: var(--fs-18) calc(var(--fs-14) * 2); display:flex; align-items:center; border:0; background:transparent; text-align:left; font-size:var(--fs-18); font-weight:500; line-height: 1.5; color:var(--grayscale9);}
.site-header .mobile-gnb-list > li.on > a,
.site-header .mobile-mypage li.on a {color:var(--color-main); background-color:var(--color-main-10);}
.site-header .mobile-gnb-list > li > a:hover,
.site-header .mobile-mypage li a:hover {color:var(--color-main);}
.site-header .mobile-mypage,
.site-header .btn-list {margin-top: calc(var(--fs-36) / 2); padding-top: calc(var(--fs-36) / 2); border-top:1px solid var(--grayscale3);}
.site-header .btn-list {display: none; padding: calc(var(--fs-14) / 2) calc(var(--fs-14) * 2);}
.site-header .btn-list .login-btn {transition: color .2s ease; width: 100%; padding-block: 10px; font-size: var(--fs-18); color: var(--grayscale9); font-weight: 500;}
.site-header .btn-list .join-btn {width: 100%;  font-size: var(--fs-18);}
.site-header .btn-list .login-btn:hover {color:var(--color-main);}


/* outro

<section class="outro-section">
    <div class="l-inner">
        <h2 class="hero-tit">
            복잡한 제작보다
            <b>운영에 집중하세요</b>
        </h2>
        <p class="hero-sub">예약•결제•운영까지 빠르게 시작하세요</p>
        버튼
    </div>
</section>

========================================================= */
.outro-section {background-color: var(--grayscale1); padding-block: 100px;}
.outro-section .l-inner {display: flex; flex-direction: column; align-items: center;}
.outro-section .hero-tit {text-align: center; color: var(--grayscale9);}
.outro-section .hero-tit b {color: var(--grayscale10); font-weight: 700;}
.outro-section .hero-sub {margin-top: 20px; color: var(--grayscale8); text-align: center;}
.outro-section .btn-wrap {margin-top: 80px; width: fit-content;}
.outro-section .round-btn {margin-top: 50px;}

/* footer */
.site-footer {padding-block: 80px; background-color:var(--grayscale10); color:#fff;}
.site-footer .l-inner {display:flex; flex-direction:column;}
.site-footer .footer-head {display:flex; flex-direction:column; align-items:flex-start;}
.site-footer .footer-logo a {display:inline-flex;}
.site-footer .footer-logo img {height: 28px;}
.site-footer .footer-desc {margin-top:24px; font-size:var(--fs-16); font-weight:400; line-height:1.6; color:rgba(255,255,255,.86);}
.site-footer .footer-info {display:flex; flex-wrap:wrap; gap: 16px; margin-top:40px;}
.site-footer .footer-info p {display:flex; align-items:center; gap:10px; font-size:var(--fs-16); font-weight:400; line-height:1.5; color:var(--grayscale1);}
.site-footer .footer-info p span {color:var(--grayscale4);}
.site-footer .footer-sns {display:flex; align-items:center; gap:20px; margin-top: 40px;}
.site-footer .footer-sns a {padding: 0.5px; transition: box-shadow 0.2s ease; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background-color: #D9D9D9;}
.site-footer .footer-sns a:hover {box-shadow: 0 0 0 3px #ADADAD4D;}
.site-footer .footer-sns a img {width: 100%; height: 100%; object-fit: cover;}
.site-footer .footer-bottom {display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top: 40px;}
.site-footer .copyright {font-size:var(--fs-16); font-weight: 500; line-height:1.5; color:var(--color-white);}
.site-footer .footer-policy {display:flex; align-items:center; gap:20px;}
.site-footer .footer-policy li a {position: relative; display:block; font-size:var(--fs-16); font-weight:500; line-height:1.5; color:var(--grayscale1); transition:color .2s ease, transform .2s ease;}
.site-footer .footer-policy li a::after {content: ''; width: 0; height: 1px; position: absolute; top: calc(100% + 2px); left: 1px; transition: width .2s ease; background-color: var(--color-white);}
.site-footer .footer-policy li a:hover {color: var(--color-white); transform: translateY(-2px);}
.site-footer .footer-policy li a:hover::after {width: 100%;}

@media screen and (max-width:1440px) {
    #container > section {padding-block: 120px; row-gap: 120px;}

    .gnb-list {gap: 20px;}
}

@media screen and (max-width:1024px) {
    #container > section {padding-block: 80px; row-gap: 80px;}

    .gnb {display:none;}
    .mobile-menu-btn {display:block;}
    .site-header .gnb {display:none;}
    .site-header .mobile-menu-btn {display:block;}

    .site-footer {padding-block:70px;}
    .site-footer .footer-info {gap:16px 20px;}
    .site-footer .footer-bottom {align-items:flex-start; flex-direction:column;}
    .site-footer .footer-policy {gap:20px;}
}

@media screen and (max-width:768px) {
    #container > section {padding-block: 60px; row-gap: 60px;}

    .site-footer {padding-block:56px;}
    .site-footer .footer-desc {margin-top:18px;}
    .site-footer .footer-info {flex-direction:column; gap:10px; margin-top:36px;}
    .site-footer .footer-info p {align-items:flex-start;}
    .site-footer .footer-info p span {flex:0 0 auto;}
    .site-footer .footer-sns {gap:12px; margin-top:34px;}
    .site-footer .footer-sns a {width:38px; height:38px;}
    .site-footer .footer-bottom {gap:22px; margin-top:38px;}
    .site-footer .footer-policy {flex-wrap:wrap; gap:10px 18px;}

    .outro-section .btn-wrap {margin-top: 50px;}
}

@media screen and (max-width:480px) {
    #container > section {padding-block: 40px; row-gap: 40px;}
    
    .site-header .logo img {height: 20px;}
    .header-util .login-btn,
    .header-util .join-btn {display: none;}
    
    .site-header.open .mobile-menu {right:0;}
    .site-header .btn-list {display: flex;}
    
    .outro-section .btn-wrap {width: 100%;}

    .site-footer .footer-info p {flex-direction:column; gap:2px;}
    .site-footer .footer-policy {flex-direction:column; align-items:flex-start;}
}