@charset "UTF-8";
/*
 * GNB 공통 스타일 (단일 소스)
 * - views/reservation/camping/common/gnb.jsp 에서만 로드한다.
 * - 기준: 프로그램 화면(program/css) GNB. 다른 CSS 파일에 .gnb 규칙을 추가하지 말 것.
 */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');
@font-face {
  font-family: 'GangwonEduPowerExtraBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 페이지 CSS(캠핑 v1/v2, 홈페이지)와 무관하게 GNB가 같은 값을 쓰도록 변수·기본값을 GNB 범위에 고정 */
:where(.global, .gnb) {
  --white: #fff;
  --gray-light: #9ea3ab;
  --gray-mid: #6f737a;
  --gray-dark: #252d3a;
  --red-color: #fe5f57;
  --green-color: #009944;
  --main-color: #117ed0;
  --main-light: #22b2e9;
  --main-deep: #254e97;
  --type1: #364fc7;
  --type2: #00b3b3;
  --width: 1200px;
  --padding: 24px;
  --top-h: 80px;
  font-size: 16px;
}
:where(.global, .gnb),
:where(.global, .gnb) * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: -0.03em;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
:where(.gnb) li { list-style: none; }
:where(.gnb) a { color: inherit; text-decoration: none; transition: 0.4s; font-size: inherit; }
:where(.gnb) img { border: none; vertical-align: top; max-width: 100%; }
@media (max-width: 1200px) { :where(.global, .gnb) { --width: 1000px; font-size: 14px; } }
@media (max-width: 1000px) { :where(.global, .gnb) { --width: 850px; } }
@media (max-width: 900px) { :where(.global, .gnb) { --width: 720px; } }
@media (max-width: 812px) { :where(.global, .gnb) { --width: initial; --top-h: 60px; font-size: 13px; } }

/* ===== program/css/sub.css ===== */
.wrap.sub:not(:has(.gnb)) .contents {
  padding-top: var(--padding);
}
.wrap.sub:not(:has(.gnb)) .swiper-wrapper {
  flex-direction: column;
  gap: 10px;
}
/* ===== program/css/layout.css ===== */
.global .skip_nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 0;
  height: 0;
}
.skip_nav {
  font-size: 0;
}
.dimed .gnb {
  z-index: 1;
  /* opacity: 0; */
  /* transition: 0.2s; */
}
.gnb {
  position: fixed;
  width: 100%;
  z-index: 10;
  transition: 0.4s;
  top: 0;
  left: 0;
  z-index: 29;
}
.gnb .menu li {
  cursor: pointer;
}
.gnb:after {
  display: none;
}
.gnb .menu {
  max-width: var(--width);
  margin: auto;
  display: flex;
  align-items: center;
  font-weight: bold;
  height: var(--top-h);
  flex-wrap: nowrap;
  flex-direction: row;
  color: #fff;
  position: relative;
}
.scrolled .gnb .menu {
  color: var(--gray-dark);
}
.gnb .menu .menus {
  justify-self: center;
  flex-grow: 1;
  font-size: 18px;
  text-align: center;
  color: white;
  flex-grow: 1;
  display: flex;
}
.gnb .menu .menus .menu-n {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 70%;
  margin: auto;
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
}
.gnb .menu .menus .menu-n li {
  padding: 0 10px;
}
.gnb .menu li.logo {
  margin-left: 0;
  height: 100%;
  /* background: url(../images/logo/logo-w.svg) no-repeat left center; */
  background-size: auto 40px;
  position: relative;
  flex-grow: 0;
  width: 15%;
  display: flex;
  align-items: center;
  font-family: 'GangwonEduPowerExtraBold';
  position: relative;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  white-space: nowrap;
}
.gnb .menu li.logo .verified {
  border: 1px solid var(--main-color);
  font-family: '';
  display: flex;
  align-items: center;
  font-size: 0.7em;
  border-radius: 3px;
  margin-left: 6px;
  padding: 4px 6px;
  gap: 3px;
  display: none;
}
.gnb .menu li.logo .verified i {
  font-size: 1.2em;
}
.gnb .menu li .status {
  font-size: 11px;
  border: 1px solid var(--green-color);
  background-color: var(--green-color);
  color: #fff;
  border-radius: 30px;
  padding: 0 10px;
  line-height: 2;
}
.gnb .menu li .menu-n > li {
  position: relative;
}
.gnb .menu li .menu-n .status {
  padding: 0 0.8em;
}
.gnb .menu li .status.closed {
  background-color: var(--red-color);
  border-color: var(--red-color);
}
.gnb .menu li .status.disable {
  background-color: var(--red-color);
  color: #fff;
  border-color: transparent;
}
.gnb .menu li.logo .logo-w,
.scrolled .gnb .menu li.logo .logo-w,
.gnb .menu li.logo .logo-ori,
.sub .gnb .menu li.logo .logo-w {
  display: none;
}
.scrolled .gnb .menu li.logo .logo-ori,
.gnb .menu li.logo .logo-w,
.sub .gnb .menu li.logo .logo-ori {
  display: block;
}
.gnb .menu li.logo.none,
.sub .gnb .menu li.logo.none {
  background: none;
  display: flex;
  align-items: center;
  font-family: 'GangwonEduPowerExtraBold';
}
.gnb .menu li.logo img {
  width: auto;
  max-height: 48px;
  display: inline-block;
  margin-right: 8px;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.scrolled .gnb .menu li.logo.none,
.scrolled .sub .gnb .menu li.logo.none,
.sub .gnb .menu li.logo.none {
  background: none;
  color: var(--main-deep);
}
.gnb .menu .mirihae-menu,
.gnb .menu .menu-my {
  width: 15%;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
}
.gnb .menu .menu-my {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.gnb .menu .menu-my li a {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gnb .menu .menu-my li a i {
  font-size: 1.2em;
}
.gnb .menu .mirihae-menu > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.gnb .menu li.member {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: url(../images/icon/user-w.svg) no-repeat center;
  background-size: auto 22px;
  position: relative;
}
.gnb .menu .lang {
  font-size: 0.8rem;
}
.gnb .menu .lang .selector {
  display: flex;
  padding-right: 30px;
  height: 36px;
  padding-left: 10px;
  text-align: left;
  font-weight: normal;
  gap: 6px;
  width: max-content;
  align-items: center;
}
.gnb .menu .lang .selector > img {
  height: 20px;
}
.gnb .menu .lang .selector:hover {
  color: inherit;
}
.gnb .menu .lang .selectbox .selector::after {
  font-size: 0.85em;
  right: 10px;
}
.gnb .menu .lang .selectbox ul {
  width: 100%;
}
.gnb .menu .lang .selectbox ul li {
  text-align: left;
  width: 100%;
  padding: 10px;
  font-weight: normal;
  display: flex;
  gap: 6px;
  align-items: center;
}
.gnb .menu .lang .selectbox ul li > img {
  height: 20px;
}
.gnb .menu .lang .selectbox ul li:hover {
  background-color: var(--main);
  color: #fff;
}
.gnb .menu .lang .selectbox > ul li.on::after {
  display: none;
}
.gnb .menu li.member.logout {
  background-image: url(../images/icon/logout-w.svg);
  background-size: auto var(--padding);
}
.gnb .menu li.ch {
  background: url(../images/icon/kakao-channel-w.svg) no-repeat center;
  background-size: auto 22px;
  width: 26px;
  height: 26px;
}
.gnb .menu li.logo > a {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  align-items: center;
}
.gnb .menu li.logo > a img {
  max-height: 30px;
}
.gnb .menu a {
  display: flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
  gap: 0.4em;
}
.gnb .menu a .now {
  background-color: var(--main-color);
  color: #fff;
  font-size: 0.7em;
  padding: 0.4em 0.7em;
  border-radius: 0.3em;
}
.gnb .menu > {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
.gnb .menu a img {
  vertical-align: middle;
}
.gnb .menu a:hover {
  color: var(--main-light);
}
.sub .gnb .menu li.active:has(.closed) {
  color: var(--red-color);
}
.gnb .menu li.active,
.gnb .menu a:hover {
  color: var(--main-light);
}
.gnb .menu .menus .menu-n {
  display: flex;
}
.gnb .menu .menus .menu-n li.linkage .icon {
  position: relative;
  width: var(--padding);
  height: var(--padding);
  margin: 1px;
}
.gnb .menu .menus .menu-n li.linkage .icon::before,
.gnb .menu .menus .menu-n li.linkage .icon::after {
  content: '';
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: block;
  position: absolute;
  box-sizing: border-box;
  transition: 0.5s;
}
.gnb .menu .menus .menu-n li.linkage .icon::after {
  right: 0;
  bottom: 0;
}
.gnb .menu .menus .menu-n li.linkage + li.member {
  margin-left: 20px;
}
.gnb .menu .menus .menu-n li.linkage.unlink .icon::before,
.gnb .menu .menus .menu-n li.linkage.unlink .icon::after {
  opacity: 0.3;
}
.gnb .menu .menus .menu-n li.linkage.unlink .icon::after {
  width: 8px;
  height: 8px;
}
.gnb .menu .menus .menu-n li.linkage.unlink::before {
  content: 'LINK';
  padding: 5px 10px;
  border-radius: 30px;
  background-color: var(--main-light);
  font-size: 10px;
  line-height: 1;
  position: absolute;
  z-index: 2;
  top: -70%;
  left: -12px;
  letter-spacing: 0;
  color: #fff !important;
}
.gnb .menu .menus .menu-n li.linkage.unlink::after {
  position: absolute;
  border: 6px solid transparent;
  border-top: 8px solid var(--main-light);
  border-bottom: 0;
  content: '';
  top: 0px;
  left: 4px;
  z-index: 2;
}
.sub .gnb {
  background-color: #fff;
}
.scrolled .gnb,
.sub .gnb {
  background-color: rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.scrolled .gnb:after {
  content: '';
  width: 100%;
  height: 1px;
  transform-origin: left top;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--gray-dark);
  display: block;
}
.scrolled .has-tab .gnb:after {
  top: calc(var(--top-h) + var(--Tab-h));
}
.scrolled .gnb .menus,
.sub .gnb .menus {
  color: var(--gray-dark);
}
.scrolled .gnb .menu li.logo,
.sub .gnb .menu li.logo {
  /* background-image: url(../images/logo/logo.svg); */
  color: var(--main-deep);
}
.scrolled .gnb .menu li.member,
.sub .gnb .menu li.member {
  background-image: url(../images/icon/user-b.svg);
  font-size: 0;
  flex-shrink: 0;
}
.scrolled .gnb .menu li.member.logout,
.sub .gnb .menu li.member.logout {
  background-image: url(../images/icon/logout.svg);
  font-size: 0;
  flex-shrink: 0;
}
.scrolled .gnb .menu li.linkage .icon::before,
.scrolled .gnb .menu li.linkage .icon::after {
  border-color: var(--gray-dark);
  flex-shrink: 0;
}
.scrolled .gnb .menu li.ch,
.sub .gnb .menu li.ch {
  background-image: url(../images/icon/kakao-channel-b.svg);
  flex-shrink: 0;
}
/* ===== program/css/current.css ===== */
.gnb .menu li.logo img {
  height: 24px;
}
.gnb .menu .other {
  flex-shrink: 0;
  margin-left: 5%;
  margin-right: 15px;
  padding-left: 20px;
  transition: 0.3s ease-in-out;
}
.gnb .menu .other img {
  height: 40px;
  width: auto;
}
.gnb .menu .other:hover {
  transform: scale(1.1);
}
@media (max-width: 1000px) {
  .gnb .menu .other {
      margin-left: auto;
      padding-left: 0;
      margin-right: 55px;
    }
  .gnb .menu .other img {
      height: 30px;
    }
  }
@media (max-width: 475px) {
  .gnb .menu li.logo img,
  .sub .gnb .menu li.logo img {
      height: 20px;
    }
  }
.gnb {
  .menu {
  	max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    font-weight: bold;
    height: 80px;
    flex-wrap: nowrap;
    flex-direction: row;

    li.logo img {
      height: 24px;
      @media (max-width: 1000px) {
        height: 20px;
      }
    }
    .menus {
      .menu-n {
        margin: 0;
        width: 100%;
        justify-content: flex-end;
        gap: 20px;
        position: static;
        transform: none;
        font-size: 16px;

        @media (max-width: 1000px) {
          font-size: 13px;
          white-space: normal;
          gap: 12px;
        }
        @media (max-width: 1100px) {
          font-size: 15px;
        }

        li {
        position: relative;
          padding: 0;
          color: var(--menu-color);
          height: var(--top-h);
          display: flex;
          align-items: center;
          @media (max-width: 1000px) {
            white-space: normal;
            height: auto;
            font-size: 1.4em;
            padding: 5px 30px;
          }
          > a {
            @media (max-width: 1000px) {
              white-space: normal;
            }
            &.active {
	            &::after {
	              content: '';
	              position: absolute;
	              width: 100%;
	              bottom: 20%;
	              left: 0;
	              border-bottom: 3px solid var(--menu-color);
	              display: block;
	              transition: bottom 0.15s ease-in-out;
	              @media (max-width: 1000px) {
	                left: 0;
	                border-bottom: 0;
	                border-left: 3px solid var(--menu-color);
	                height: 100%;
	              }
	            }
	          }

	          &.cat1 {
            	--menu-color: var(--type2);
	          }
	          &.cat2 {
	            --menu-color: var(--type1);
	          }
	          &.cat3 {
	            --menu-color: var(--gray-mid);
	          }

          }
          a {
          	color: var(--menu-color);
          }
        }
      }
    }
  }
}
.scrolled {
  .gnb {
    .menu {
      .menus {
        .menu-n {
          li {
            &.active {
              &::after {
                bottom: 1px;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 414px) {
  .gnb .menu li {
          font-size: 1.08em !important;
      }
  }
/* ===== program/css/responsive.css ===== */
@media (max-width: 1000px) {
  .gnb {
        padding: 0 0 0 20px;
    }
  .gnb .menu {
        width: 100% !important;
    }
  .gnb .coll {
        position: absolute !important;
        right: 0px;
        top: 0px;
        width: 50px;
        height: 50px;
        display: block;
        text-align: center;
        line-height: 50px;
        padding: 20px 17px;
        z-index: 2;
    }
  .gnb .coll:before {
        content: "";
        width: 20px;
        height: 12px;
        display: block;
        border-top: 2px solid var(--gray-dark);
        border-bottom: 2px solid var(--gray-dark);
    }
  .gnb .coll:after {
        content: "";
        display: block;
        position: absolute;
        width: 20px;
        height: 2px;
        top: calc(50% + 2px);
        background-color: var(--gray-dark);
    }
  .gnb .menu li.menus {
        display: block;
        position: absolute;
        flex-direction: column;
        height: 100vh;
        padding-top: calc(20px + 50px);
        top: 0;
        right: -100%;
        z-index: 1;
        background-color: #252D3A;
        color: #fff;
        transition: .2s;
        min-width: 280px;
    }
  .gnb .menu .menus .menu-n {
    	display: block !important;
      width: 100%;
      position: static;
      left: 0;
      top: initial;
      transform: initial;
    }
  .gnb.active .coll {
        background-color: transparent;
    }
  .gnb.active .coll::before {
        border-color: #fff;
    }
  .gnb.active .coll::after {
        background-color: #fff;
    }
  .gnb.active .menu li.menus {
        right: 0;
    }
  }
@media (max-width: 812px) {
  .gnb {
      padding: 0 0 0 var(--padding);
    }
  .gnb .menu li.logo {
      flex-grow: 1;
      background-size: auto 30px;
    }
  .gnb .menu .menus .menu-n {
      display: block;
    }
  .gnb .coll {
      width: 50px;
      height: 50px;
      display: block;
      text-align: center;
      line-height: var(--top-h);
      padding: 20px 15px;
      z-index: 2;
      position: relative;
      margin-top: -4px;
    }
  .gnb .coll:before {
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      height: 12px;
      content: '';
      display: block;
    }
  .gnb .coll:after {
      content: '';
      display: block;
      position: absolute;
      width: 20px;
      height: 2px;
      top: calc(50% + 2px);
      background-color: #fff;
      right: 15px;
    }
  .sub .gnb {
      background-color: transparent;
    }
  .scrolled .gnb {
      background-color: var(--white);
    }
  .scrolled.paying .gnb,
  .paying .sub .gnb {
      z-index: 13;
    }
  .scrolled .gnb .menu {
      height: var(--top-h);
    }
  .scrolled .gnb:after {
      width: 300%;
      transform: scale(0.34);
      transform-origin: left bottom;
    }
  .scrolled .has-tab .gnb:after {
      top: calc(100% + 36px);
    }
  .scrolled .gnb .coll:before,
  .sub .gnb .coll:before {
      border-top: 2px solid var(--gray-dark);
      border-bottom: 2px solid var(--gray-dark);
    }
  .scrolled .gnb .coll:after,
  .sub .gnb .coll:after {
      background-color: var(--gray-dark);
    }
  .gnb .menu li.menus {
      display: block;
      position: absolute;
      flex-direction: column;
      height: 100vh;
      padding-top: calc(20px + 50px);
      top: 0;
      right: -100%;
      z-index: 1;
      background-color: var(--gray-dark);
      color: #fff;
      transition: 0.2s; /* 1000px 이하 패널(.2s)과 같은 속도 */
      min-width: 60%;
      text-align: left;
      box-shadow: -30px 0 60px rgba(0, 0, 0, 0.2);
    }
  .gnb.active .menu li.menus {
      right: 0;
    }
  .gnb .menu .mirihae-menu ul {
    }
  .gnb.active .coll {
      background-color: transparent;
    }
  .gnb.active .coll::before {
      border-color: #fff;
    }
  .gnb.active .coll::after {
      background-color: #fff;
    }
  .scrolled .gnb .menu a:hover,
  .scrolled .gnb .menu li.active,
  .sub .gnb .menu li.active,
  .gnb .menu a.active {
      color: var(--main-light);
    }
  .gnb .menu .menus .menu-n li {
      display: block;
      margin-left: 0;
      padding: 5px 30px;
    }
  .gnb .menu {
      height: var(--top-h);
    }
  .gnb .menu li.logo img {
      max-height: 50%;
      max-width: 60%;
    }
  .gnb .menu .menus .menu-n li.member {
      background: none !important;
      width: 100%;
      height: inherit;
    }
  .gnb .menu .mirihae-menu {
      width: initial;
      margin-top: 30px;
      color: var(--gray-light);
      font-size: 14px;
      transform: initial;
      position: static;
      top: initial;
    }
  .gnb .menu .menu-my {
      width: 100%;
      padding: 0 var(--padding);
    }
  .gnb .menu .mirihae-menu ul {
      display: block;
    }
  .gnb .menu .mirihae-menu ul li {
      width: auto;
      height: auto;
      padding: 5px 30px;
    }
  .gnb .menu .mirihae-menu ul li.ch,
  .gnb .menu .mirihae-menu ul li.member {
      background: none;
      margin-left: 0;
    }
  .gnb .menu .mirihae-menu li.ch::before {
      content: '카카오톡채널';
    }
  .gnb .menu .mirihae-menu li.member::before {
      content: '로그인';
    }
  .scrolled .gnb .menu a.active {
      color: var(--main-light);
    }
  .gnb .menu .menus .menu-n li.linkage {
      position: absolute;
      top: 3px;
      right: 30px;
      transform-origin: center center;
      transform: scale(0.7);
    }
  .scrolled .gnb .menu .menus .menu-n li.linkage .icon::before,
  .scrolled .gnb .menu .menus .menu-n li.linkage .icon::after {
      border-color: #fff;
    }
  .gnb .menu .menus .menu-n li.linkage + li.member {
      margin-left: 0;
    }
  .gnb .menu .mirihae-menu .lang {
      color: #fff;
      padding-top: 10px;
    }
  .gnb .menu .mirihae-menu .lang .selector {
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: 100%;
    }
  .gnb .menu .mirihae-menu .lang .selector:hover {
      color: #fff;
    }
  .gnb .menu .mirihae-menu .lang ul {
      display: none;
      width: 100%;
      background-color: transparent;
      margin: 10px 0;
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
  .gnb .menu .mirihae-menu .lang ul li {
      background-color: transparent;
    }
  .gnb .menu .mirihae-menu .lang .selectbox > ul li + li {
      border-color: rgba(255, 255, 255, 0.2);
    }
  .gnb .menu .menus .menu-n li.linkage.unlink::before {
      content: 'LINK';
      padding: 5px 10px;
      border-radius: 30px;
      background-color: var(--main-light);
      font-size: 10px;
      line-height: 1;
      position: absolute;
      z-index: 2;
      top: 80%;
      left: 8px;
      letter-spacing: 0;
      color: #fff !important;
    }
  .gnb .menu li.mirihae-menu ul {
      display: none;
    }
  .gnb.active .menu li.mirihae-menu ul {
      display: flex;
      position: absolute;
      z-index: 10;
      left: calc(50% + 30px);
      /* transform-origin: left center;
      transform: scale(0.8); */
      top: 20px;
    }
  .gnb.active .menu li.mirihae-menu ul li.member,
  .gnb.active .menu li.mirihae-menu ul li.ch {
      background: none;
      color: var(--gray-light);
      font-weight: bold;
    }
  .gnb.active .menu li.mirihae-menu ul li.member::before {
      content: '로그인';
    }
  .gnb.active .menu li.mirihae-menu ul li.member + .ch::before {
      content: '카카오채널';
    }
  .scrolled .gnb.active .menu li.mirihae-menu ul {
    }
  .gnb .menu li.mirihae-menu {
      display: block;
      width: initial;
    }
  .gnb .menu .menus .menu-n {
      width: 100%;
      position: static;
      left: 0;
      top: initial;
      transform: initial;
    }
  .gnb .menu li.logo .verified {
      display: flex;
    }
  }
@media (max-width: 812px) {
  .paying .gnb {
      transition: 0s;
    }
  .floating + .gnb .menu .menus .menu-n li.ch {
      bottom: 120px;
    }
  .gnb .menu .menu-my {
      padding: 0;
      position: static;
      transform: initial;
      justify-content: flex-start;
      align-items: flex-start;
    }
  .gnb .menu .menu-my li {
      padding: 5px 30px;
    }
  .gnb .menu .menu-my li a i {
      display: none;
    }
  .outlink .gnb {
      padding-left: 20px;
    }
  .gnb .mo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: var(--top-h);
    }
  .gnb .mo .left .back {
      display: flex;
      align-items: center;
      font-weight: bold;
      height: 100%;
      font-size: 1.4em;
      gap: 0.2em;
      user-select: none;
    }
  .gnb .mo .left .back .selectbox > ul {
      left: -15px;
      right: initial;
      border: 0;
    }
  .gnb .mo .left .back .selector {
      gap: 0.1em;
    }
  .gnb .mo .left .back .selectbox > ul li {
      padding: 15px;
    }
  .gnb .mo .left .back .selector::after {
      font-size: 0.8em;
    }
  .gnb .mo .left .back i {
      font-size: 1.2em;
    }
  .gnb .mo .right {
      padding-right: 16px;
      justify-content: flex-end;
    }
  .gnb .mo .selectbox .selector {
      border: 0;
      width: fit-content;
      padding: 0;
      gap: 0.3em;
    }
  .gnb .mo .selectbox img {
      max-width: 16px;
      min-width: 16px;
    }
  .gnb .mo .selectbox .selector::after {
      position: static;
      margin-left: 0.3em;
    }
  .gnb .mo .selectbox > ul {
      width: fit-content;
      margin: 0;
      right: 0;
    }
  .gnb .mo .selectbox > ul li {
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.2em;
      padding: 10px 10px;
      width: 100%;
    }
  .gnb .mo .selectbox > ul li.on::after {
      display: none;
    }
  .gnb:has(.mo)::after {
      display: none;
    }
  .gnb .menu li.logo img,
  .sub .gnb .menu li.logo img {
      height: 20px;
    }
  body:has(.ui-sect):where(.article, .gnb, .scrolled .gnb, .sub .gnb) {
      background-color: var(--white);
    }
  .scrolled .gnb:after {
      display: none;
    }
  .wrap:has(.tabs) .gnb {
      background-color: rgba(255, 255, 255, 1);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
  .scrolled .gnb {
      background-color: rgba(255, 255, 255, 0.7);
    }
  .paying:has(.ui-sect:only-child) .sub .gnb {
      background-color: transparent;
    }
  }

/* ===== 메인 페이지(mirihae/index.jsp, .wrap.main): 투명 헤더 대신 흰 배경 고정 (기존 index.jsp 인라인 스타일 이동) ===== */
:where(.main) .gnb {
  background-color: rgba(255, 255, 255, 1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
:where(.main) .gnb:after {
  content: "";
  width: 100%;
  height: 1px;
  transform-origin: left top;
  position: absolute;
  left: 0;
  bottom: 0;
  background-color: var(--gray-dark);
  display: block;
}
:where(.main) .gnb .menu .menus { color: #252d3a; }
:where(.main) .gnb .menu a:hover,
:where(.main) .gnb .menu a.active { color: var(--main-color); }
:where(.main) .gnb .menu li.logo { color: var(--main-deep); }
:where(.main) .gnb .menu li.logo .logo-w { display: none; }
:where(.main) .gnb .menu li.logo .logo-ori { display: block; }

/* ===== 기존 gnb.jsp <ul class="menu-n"> 인라인 스타일 이동 ===== */
.gnb .menu .menus .menu-n {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
}

/* ===== 좁은 화면에서 로고 찌그러짐 방지: 로고 칸은 줄이지 않고(비율 유지), 대신 메뉴 간격을 줄인다 ===== */
.gnb .menu li.logo {
  flex-shrink: 0;
  width: auto; /* 15% 고정 대신 로고 이미지 크기만큼만 차지 */
}
.gnb .menu li.logo > a {
  position: static; /* absolute면 li가 내용 크기를 알 수 없어 width:auto가 0이 됨 */
}
.gnb .menu li.logo img {
  object-fit: contain;
}
@media (max-width: 1200px) {
  .gnb .menu .menus .menu-n {
    gap: 12px;
  }
}

/* ===== 모바일 메뉴와 함께 나오는 온라인 인증 배너(.floating) =====
 * 통합 GNB는 1000px 이하에서 햄버거 메뉴가 나오지만, 배너의 모바일 모양은 camping/css/v2/component.css의
 * 812px 이하 규칙에만 있어 813~1000px에서는 PC 카드가 흰 글자로 깨져 보였다.
 * -> 812px 이하와 똑같이 보이도록 같은 규칙을 같은 순서(component.css 812px -> middle.css 1044px)로 이 구간에 적용한다. */
@media (min-width: 813px) and (max-width: 1000px) {
  /* camping/css/v2/component.css @media (max-width: 812px) */
  .has-tab .floating { top: 600px; }
  .scrolled .sub.has-tab .floating { top: 570px; }
  .scrolled.ui-fix .sub.has-tab .detail .reserv-ui, .scrolled.ui-fix .sub.has-tab .floating { top: initial !important; }
  .floating { position: fixed; width: 50%; height: auto; background-color: transparent; top: auto; left: auto; padding: 0; border: 0; box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.15); bottom: 0; right: -100%; cursor: pointer; z-index: 280; overflow: hidden; overscroll-behavior: none; white-space: nowrap; padding: 20px; }
  .floating.active { right: 0; transition: 0.6s; }
  .floating .icon { background: no-repeat top center; height: 46px; width: 46px; z-index: -1; background-size: auto 100%; margin: auto; margin-bottom: 16px; }
  .floating { top: auto !important; position: fixed; flex-direction: row; overflow-x: auto; }
  .floating .d-day { background-color: rgba(255, 255, 255, 0.1); }
  .floating > div { flex-shrink: 0; flex-grow: 0; width: 120px; color: #fff; white-space: normal; width: 100%; display: flex; flex-direction: column; text-align: center; padding: 15px 10px; }
  .floating > div p { display: none; }
  .floating .btns { color: var(--gray-light); }
  .floating > div .modal-call { flex-grow: 1; position: relative; z-index: 1; }
  .floating > div.float-el { background-color: rgba(255, 255, 255, 0.1); padding: 15px; z-index: 51; }
  .floating .btns input[type='checkbox'] + label { line-height: 1; }
  .scrolled .main .floating, .scrolled.ui-fix .sub .floating { top: auto !important; z-index: 51; }
  .paying .auth .floating { display: none; }
  .auth .floating { right: 0; left: 0; width: 100%; bottom: calc(var(--btn-h) + 20px); box-shadow: none; z-index: 2 !important; }
  .auth .floating > div.float-el { width: 100%; background-color: #fff; color: var(--gray-dark); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2); }
  .auth .floating .btns { position: absolute; right: 40px; top: 3px; z-index: 20; }
  .auth .floating .icon { margin: 0; }
  .auth .floating > div .modal-call { flex-direction: row; display: flex; align-items: center; gap: 10px; text-align: left; }
  /* camping/css/v2/middle.css @media (max-width: 1044px): 812px 이하에서도 component.css보다 뒤에 적용되므로 다시 둔다 */
  .floating.online-cert { max-width: 200px; width: 100%; }
  .floating { position: fixed; width: 50%; height: auto; background-color:transparent; top:auto; left:auto; padding: 0; border:0; box-shadow: 20px 20px 30px rgba(0,0,0,0.15); bottom: 0; right: -100%; cursor: pointer; z-index: 280; overflow: hidden; white-space: nowrap; padding: 20px; }
  .floating.active { right: 0; background-color: rgba(0,0,0,.3); transition: .6s; }
  .floating .icon { background: no-repeat top center; height: 36px; width: 36px; z-index: -1; background-size: auto 100% ; display: inline-block; float: right; }
  .floating .title { margin-bottom: 8px; position: relative; z-index: 1; color: #fff; display: inline-block; }
  .floating h1 {  }
  .floating p { font-size: 10px; line-height: 1.4; color: var(--Gray-Mid); white-space: normal; color: var(--Gray-Light); }
  .floating p span { color: var(--Main-light); }
  .scrolled .main .floating, .scrolled .sub .floating { top: auto; position: fixed; }
  .main .floating { top: auto; }
  .sub .floating { top: auto; }
}
/* 배너가 메뉴 패널(.2s)보다 늦게(.6s) 따라 들어와 메뉴가 느리게 열리는 것처럼 보이던 문제 */
@media (max-width: 1000px) {
  .floating,
  .floating.active {
    transition: right 0.2s;
  }
}