@charset 'utf-8';
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;700&display=swap');

/* ===== 1. Modern Reset & Box-model ===== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 폰트 크기 조절 시 레이아웃 깨짐 방지 및 부드러운 스크롤 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: none; /* iOS 가로 모드 시 텍스트 크기 자동 변경 방지 */
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* ===== 2. Body: Typography & Rendering ===== */
body {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35; /* 가독성을 위해 1.5에서 1.6으로 소폭 상향 */
  background-color: #fff;
  color: #111;
  word-break: keep-all; /* 한글 가독성: 단어 단위 줄바꿈 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 3. Media & Elements ===== */
picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-style: italic; /* 대체 텍스트(alt) 표시 시 스타일 */
  shape-margin: 0.75rem;
}
img { vertical-align:middle; max-width: 100%; height: auto; } 

/* SVG 색상 제어를 위한 설정 */
svg {
  fill: currentColor;
}

/* ===== 4. Lists & Links ===== */
ul, ol { list-style: none; }

a {
  color: inherit;
  text-decoration: none;
  /* 터치 기기에서 클릭 시 하이라이트 색상 제거 */
  -webkit-tap-highlight-color: transparent;
}

/* ===== 5. Form Elements (Interactive) ===== */
/* 버튼 및 입력창의 기본 외형을 제거하여 커스텀하기 편하게 함 */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

button { cursor: pointer; }
button:disabled { cursor: default; }

textarea {
  resize: vertical;
  min-height: 4rem;
}

/* IE/Edge의 Input X 버튼 제거 */
input::-ms-clear, input::-ms-reveal { display: none; }

/* ===== 6. Table ===== */
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

/* ===== 7. Accessibility & Selection ===== */
/* 키보드 사용자에게만 포커스 표시 (최신 브라우저 지원) */
:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px solid #007BFF;
  outline-offset: 2px;
}

/* 숨김 콘텐츠 처리 (스크린 리더용) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 하이라이트 색상 */
::selection {
  background-color: rgba(0, 123, 255, 0.2); /* 부드러운 배경색 선호 */
  color: #007BFF;
}

html { scroll-behavior: smooth; }
body { overflow-x:hidden; }

.mobile-only,
.mobile-only-flex { display:none !important; }
.web-only { }



/* scroll */
body.scroll .site-header { background-color: rgba(255, 255, 255, 1.0); }
body.scroll .site-header  h1.site-header__logo a.site-header__logo-link { background-image:url('../img/common/logo_bk.png'); }
body.scroll .site-header .site-nav li.site-nav__item a.site-nav__link { color:#111; }
body.scroll .site-header .lang-switch { background-color:#111; }
body.scroll .site-header .site-header__user-btn { background-image:url('../img/icons/ic_user_bk.png'); }
body.scroll .site-header .menu-btn span { background-color:#111; }
body.scroll .site-header .menu-btn span { background-color:#111; }
body.scroll .langs a { color:#111; }

.wrap { min-width: 295px; }

/* header
* * * * * * * * * * * * * * * * * * * */
.site-header { position: fixed; left: 0; top: 0; right:0; background-color: rgba(0, 0, 0, 0); transition: background-color 0.25s ease; min-width: 295px; z-index: 1001; }
.site-header .site-header__inner { position: relative; height: 100px; }
.site-header h1.site-header__logo { position:relative; padding: 30px 0 0 70px; z-index:10; max-width:187px; box-sizing:content-box; }
.site-header h1.site-header__logo a.site-header__logo-link { display:block; width:187px; height:38px; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-image:url('../img/common/logo.png'); font-size:0; transition: background-image 0.55s ease; }

/* hover */
.site-header:hover { background-color: rgba(255, 255, 255, 1.0); }
.site-header:hover  h1.site-header__logo a.site-header__logo-link { background-image:url('../img/common/logo_bk.png'); }
.site-header:hover .site-nav li.site-nav__item a.site-nav__link { color:#111; }
.site-header:hover .lang-switch { background-color:#111; }
.site-header:hover .site-header__user-btn { background-image:url('../img/icons/ic_user_bk.png'); }
.site-header:hover .menu-btn span { background-color:#111; }
.site-header:hover .langs a { color:#111111; }


/* site-nav */
.site-nav { position: absolute; left:0; top: 0; right:0; width: 100%; z-index: 0; }
.site-nav .site-nav__list { position:relative; display: grid; grid-template-columns: repeat(6, auto); max-width: 1080px; width:100%; margin:0 auto; transition: max-width 0.55s ease; }
.site-nav li.site-nav__item { font-size: 24px; font-weight: 500; }
.site-nav li.site-nav__item a.site-nav__link { display: flex; cursor: pointer; width: 100%; height: 100px; color: #fff; align-items: center; justify-content: center; transition: color 0.55s ease; }
.site-nav li.site-nav__item.is-over a.site-nav__link { color:#eab334 !important; }

/* site-nav__submenu */
.site-nav__submenu { position: fixed; left: 0; top: 54px; right: 0; background-color: rgba(255,255,255,0.95); opacity: 0; visibility: hidden; }
.site-nav__submenu .site-nav__columns { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); height: 450px; }
.site-nav__submenu .site-nav__columns ul.site-nav__col { height: 100%;  padding-top: 35px; box-sizing: border-box; }
.site-nav__submenu .site-nav__columns ul.site-nav__col li.site-nav__subitem { text-align: center; font-size: 20px; margin-bottom: 15px; }
.site-nav__submenu .site-nav__columns ul.site-nav__col li.site-nav__subitem a.site-nav__sublink { color:#111111; transition: color 0.55s ease; }
.site-nav__submenu .site-nav__columns ul.site-nav__col li.site-nav__subitem a.site-nav__sublink:hover { color: #eab334; }

/* aside 열림 */
.site-aside { display: none; }
.site-aside.is-active { display: block; }

/* lang 패널 */
.lang-switch__panel[hidden],
.aside-nav__panel[hidden] { display: none; }

/* is-active */
.site-header.is-active { background-color: rgba(255, 255, 255, 1.0);  }
.site-header.is-active:after { content:""; position:absolute; left:0; right:0; bottom:0; display:block; height:1px; background-color:#e7e7e7; }
.site-header.is-active h1.header__logo a { background-image:url('../img/common/logo_bk.png'); }
.site-header.is-active .site-nav__list { max-width: 1200px; grid-template-columns: repeat(6, 1fr); }
.site-header.is-active .site-nav__list li.gnb__item a.gnb__link { color:#111111; }
.site-header.is-active .site-nav__submenu { opacity: 1; visibility: visible; top:100px; transition: opacity 0.55s ease, top 0.25s ease; box-shadow:0 1px 5px #ddd; }

/* langs */
.langs { position: absolute; right: 155px; top: 39px; display:flex; gap:20px; }
.langs a { position:relative; font-size: 18px; color: #fff; font-family: 'Montserrat', sans-serif; opacity:0.5; }
.langs a:after { content:""; display:block; width:1px; height:10px; background-color:#bebab5; position:absolute; right:-10px; top:50%; transform:translateY(-50%); }
.langs a:last-child:after { display:none; }
.langs a.langs__current { font-weight:700; opacity:1; }


/* lang */
.lang-switch { position: absolute; right: 210px; top: 37px; font-size: 14px; color: #fff; transition: all ease 0.5s; border-radius:10px; height:30px; overflow:hidden; z-index:10; }
.lang-switch:hover { background-color:#f60; }
.lang-switch .lang-switch__current { position: relative; padding:0 10px; padding-right: 30px; cursor: pointer; display:flex; align-items:center; height:30px; }
.lang-switch .lang-switch__current:after { content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #fff; transition: transform 0.25s ease; }

.lang-switch__panel .lang-switch__list { border-top:1px solid #fff; }
.lang-switch__panel .lang-switch__list { }
.lang-switch__panel .lang-switch__list li a { display:block; height:30px; line-height:30px; color: #fff; padding:0 10px; }

.lang-switch.is-open { height:60px; } 
.lang-switch.is-open .lang-switch__panel .lang-switch__current:after { transform: translateY(-50%) rotate(180deg); }


/* user__btn */
.site-header__user-btn { position: absolute; right: 147px; top: 50%; width: 36px; height: 36px; border: none; background: none; cursor: pointer; padding: 0; background-repeat:no-repeat; background-position:center; background-size:100% auto; background-image:url('../img/icons/ic_user.png'); transform: translateY(-50%); }

/* header__menu-btn */
.menu-btn { position: absolute; right: 86px; top: 50%; width: 36px; height: 36px; border: none; background: none; cursor: pointer; padding: 0; transform: translateY(-50%); }
.menu-btn span { position: absolute; left: 0; width: 100%; height: 4px; background-color: #fff; transition: all 0.3s ease; }
.menu-btn span:nth-child(1) { top: 50%; transform:translateY(-300%); }
.menu-btn span:nth-child(2) { top: 50%; transform:translateY(-50%); }
.menu-btn span:nth-child(3) { top: 50%; transform:translateY(200%); }
.menu-btn.is-active span:nth-child(1) { top: 16px; transform: rotate(45deg); }
.menu-btn.is-active span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
.menu-btn.is-active span:nth-child(3) { top: 16px; transform: rotate(-45deg); }

/* mobile */
.menu-btn.js-aside-open { display:none; }

/* gnb mobile */
.site-aside { position:fixed; right:-100%; top:0; width:29.5rem; height:100vh; background-color:#fff; transition: all 0.3s ease; display:none; opacity:0; z-index:10001; }
.site-aside.is-active { right:0; opacity:1; }
.site-aside .site-aside__inner { padding:0 1.0rem; }
.site-aside .site-aside__head { position:relative; height:min(4.0rem, 100px); display:flex; align-items:center; }
.site-aside .site-aside__head .site-aside__logo { width: min(9.5rem, 187px); height: 2.0rem; background-repeat: no-repeat; background-position: center;     background-image: url('../img/common/logo_bk.png'); background-size: 100% auto; }
.site-aside .site-aside__head .site-aside__user-btn { position:absolute; top:50%; right: 3.0rem; display:block; width: min(2.0rem, 36px); height: min(2.0rem, 36px); background-repeat: no-repeat; background-position: center; background-image: url('../img/icons/ic_user_bk@2x.png'); background-size: 95% auto; transform:translateY(-50%); }
.site-aside .site-aside__head .site-aside__langs { position:absolute; right:4.0rem; top:50%; transform:translateY(-50%); display:flex; gap:1.0rem; }
.site-aside .site-aside__head .site-aside__langs li { position:relative; font-size:0.983rem; font-weight:700; opacity:0.5; }
.site-aside .site-aside__head .site-aside__langs li:after { content:""; position:absolute; top:50%; right:-0.5rem; transform:translateY(-50%); display:block; width:1px; height:0.8rem; background-color:#ccc; }
.site-aside .site-aside__head .site-aside__langs li a { color:#111;  }
.site-aside .site-aside__head .site-aside__langs li.is-current { opacity:1; }
.site-aside .site-aside__head .site-aside__langs li:last-child:after { display:none; }

.site-aside .site-aside__close { position:absolute; right:0rem; top:50%; display:block; width:min(2.0rem, 36px); height:min(2.0rem, 36px); background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_close_bk@2x.png'); background-size:90% auto; outline:none; border:0; cursor:pointer; transform:translateY(-50%); }

.site-aside .site-aside__body { position:relative; margin-right:-1.2rem; padding-right:1.2rem; max-height:calc(100vh - 5.0rem); overflow-y:auto; }
.site-aside .aside-nav { }
.site-aside .aside-nav__list { }
.site-aside .aside-nav__list .aside-nav__item { border-bottom:1px solid #111111; }
.site-aside .aside-nav__list .aside-nav__item .aside-nav__toggle { position:relative; display:flex; align-items:center; font-size:min(1.639rem, 27px); width:100%; height:min(4.5rem, 100px); font-weight:700; border:0; cursor:pointer; padding-left:1.0rem; }
.site-aside .aside-nav__list .aside-nav__item .aside-nav__toggle:after { content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); display:block; width:min(1.5rem, 30px); height:min(1.5rem, 30px); background-repeat:no-repeat; background-position:center; background-image:url('../img/icons/ic_menu_open.png'); background-size:100% auto; outline:none; border:0; cursor:pointer; }
.site-aside .aside-nav__list .aside-nav__item.is-open .aside-nav__toggle { color:#eab334; }
.site-aside .aside-nav__list .aside-nav__item.is-open .aside-nav__toggle:after { background-image:url('../img/icons/ic_menu_close.png');  }

.site-aside .aside-nav__list .aside-nav__item .aside-nav__panel { overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.site-aside .aside-nav__list .aside-nav__item.is-open .aside-nav__panel { max-height: 600px; /* 충분히 큰 값 */ }

.site-aside .aside-nav__list .aside-nav__sublist { padding:min(1.0rem, 20px) min(2.0rem, 30px); border-top:1px solid #111; }
.site-aside .aside-nav__list .aside-nav__sublist li { font-size:min(1.475rem, 25px); }
.site-aside .aside-nav__list .aside-nav__sublist li a { display:inline-block; padding:0.5rem 0; }
.site-aside .aside-nav__list .aside-nav__sublist li a:hover { color:#eab334; }



/* site-footer
* * * * * * * * * * * * * * * * * * * */
.site-footer { position:relative; background-color:#111111; height:382px; box-sizing:border-box; padding:60px 70px; }
.site-footer__inner { position:relative; max-width:1780px; display:grid; grid-template-columns:76px 1fr; gap:50px; margin:0 auto; }
.site-footer__logo {  display:block; width:76px; height:85px; background-repeat:no-repeat; background-position:center; background-image:url('../img/common/beradel_emblem.png'); background-size:100% auto; }
.site-footer__content { position:relative; }
.site-footer__company-name { font-size:16px; font-weight:700; color:#fff; }
.site-footer__address { color:#fff; display:flex; gap:2px 35px; font-style:normal; margin-top:15px; }
.site-footer__contact .site-footer__meta { }
.site-footer__company .site-footer__meta { grid-template-columns:80px 1fr; }
.site-footer__meta { display:grid; grid-template-columns:40px 1fr; }
.site-footer__term,
.site-footer__desc { color:#fff; display:flex; align-items:center; font-size:16px; height:34px; }
.site-footer__term { font-weight:200; }
.site-footer__desc { font-weight:400; gap:24px; }
.site-footer__desc strong { font-size:24px; font-weight:700; }
.site-footer__copyright { color:rgba(255,255,255,0.5); font-weight:200; margin-top:15px; }
.site-footer__policy { margin-top:35px; display:flex; gap:10px; flex-wrap:wrap; }
.site-footer__policy-item { font-size:16px;  }
.site-footer__policy-link { display:flex; align-items:center; padding:0 18px; color:#fff; height:50px; border:1px solid #878583; border-radius:50px; }
.site-footer__policy-link span { display:inline-block; padding-right:40px; background-repeat:no-repeat; background-position:right center; background-image:url('../img/icons/ic_link_arrow.png'); background-size:18px auto; }

/* family */
.footer-family { position: absolute; right: 0; bottom: 0; z-index: 1001; }
.footer-family .footer-family__toggle { position: relative; display: flex; align-items: center; width: 160px; height: 50px; cursor: pointer; box-sizing: border-box; padding: 0 50px 0 20px; border:0; color: #fff; font-size:14px; background-color:#575757; border-radius:50px; overflow:hidden; z-index:10; }
.footer-family .footer-family__toggle:after { content: ""; position: absolute; right:20px; top: 50%; width: 11px; height: 7px; display: block; background-repeat: no-repeat; background-position: center; background-image: url("../img/icons/ic_select_arrow.png"); background-size: 100% auto; transform: translateY(-50%) rotate(0deg); transition: transform 0.3s ease; }
.footer-family.active .footer-family__toggle:after { transform: translateY(-50%) rotate(180deg); }
.footer-family .footer-family__panel { position: absolute; left: 0; bottom: 25px; right: 0; background-color: #f4f4f4; display: none; overflow: hidden; border-radius:20px 20px 0 0; z-index:1; }
.footer-family .footer-family__list { padding-bottom:25px; }
.footer-family .footer-family__list li.footer-family__item a.footer-family__link { display: flex; padding: 0 15px; width: 100%; height: 45px; align-items: center; box-sizing:border-box; color:#111; }
.footer-family .footer-family__list li.footer-family__item a.footer-family__link:hover { color: #ff6600; }



/* quick
* * * * * * * * * * * * * * * * * * * */
.quick { position:fixed; right:70px; top:200px; z-index:100; transition: right 0.3s ease; }
.quick .quick__title { display:block; width:70px; height:70px; background-repeat:no-repeat; background-position:right center; background-size:100% auto; background-image:url('../img/common/quick__title.png'); font-size:0; margin-bottom:10px; }
.quick .quick__menu { }
.quick .quick__item { margin-bottom:10px; }
.quick .quick__link { display:block; width:70px; height:70px; background-repeat:no-repeat; background-position:center; background-size:100% auto; font-size:0; overflow: hidden; transition: background-size 0.3s ease; border-radius:70px; background-color:#fcf8f4; border:1px solid #ddd; }
.quick .quick__link.quick__link--video { background-image:url('../img/common/beradel_video@2x.png'); }
.quick .quick__link.quick__link--riding { background-image:url('../img/common/bnr_riding_reservation@2x.png'); }
.quick .quick__link.quick__link--pension { background-image:url('../img/common/bnr_pension_reservation@2x.png'); }
.quick .quick__link.quick__link--camping { background-image:url('../img/common/bnr_camping_reservation@2x.png'); }
.quick .quick__link:hover { background-size: 110% auto; }

.quick .quick__top { }
.quick .quick__btn-top { display:block; width:70px; height:70px; background-repeat:no-repeat; background-position:right center; background-size:100% auto; background-image:url('../img/common/bnr_quick_btn_top.png'); cursor:pointer; outline:none; border:0; font-size:0; }

.quick__top { transition: opacity 0.3s ease, transform 0.3s ease; }
.quick__top.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }


/* popup
* * * * * * * * * * * * * * * * * * * */
.riding-reservation .modal__dialog { border-radius:20px; overflow:hidden; background-color:#fff; max-width: 820px; padding: 60px 60px 60px 60px; height: clamp(300px, calc(100vh - 120px), 1286px); }
.riding-reservation .modal__dialog .modal__body { height:calc(100vh - 268px); overflow-y:auto; }
.riding-reservation .modal__header .modal__title { font-size:32px; }
.riding-reservation .write-list.type-grid { grid-template-columns: 1fr 1fr; }
.riding-reservation .write-row .label { width:120px; }