@font-face {
    font-family: 'HsBombaram20';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/HSBombaram.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/UserData/bigtreech/Layouts/bigtreech_Layout/Contents/webfont/pretendard/PretendardVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/UserData/bigtreech/Layouts/bigtreech_Layout/Contents/webfont/Paperlogy/Paperlogy-8ExtraBold.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

/* 🚨 V1 원본 폰트 사이즈 완벽 복구 */
:root {
  --font-size: 16px;
  --nav-label: 1.125rem;
  --menu-title: 1.15rem;
  --menu-sub-heading: 0.88rem;
  --menu-item: 0.85rem;
  
  --section-title: 3rem;
  --section-sub: 1.5rem;
  --card-title: 1.25rem;
  --h3: 1.11rem;
  --p1: 1.33rem;
  --p2: 1rem;
  --p3: 0.95rem;
  --p4: 0.83rem;
  --caption: 0.8125rem;
  
  --accent-green: #5a7a5a;
  --bg-primary: #ffffff;
  --text-primary: oklch(0.145 0 0);
  --font-section-title: 'Paperlogy', 'Pretendard', sans-serif;
}

@media (min-width: 768px) {
  :root {
    --font-size: 18px;
    --nav-label: 1.111rem;
  }
}

html { font-size: var(--font-size); font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; -webkit-font-smoothing: antialiased; }
body { background-color: var(--bg-primary); color: var(--text-primary); margin: 0; padding: 0; word-break: keep-all; }
* { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
button { background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; }
ul, ol { list-style: none; padding: 0; margin: 0; }

.hidden { display: none !important; }
.block { display: block !important; }

/* Layout Base */
.cms-main-layout { width: 100%; min-height: 100vh; position: relative; }
.cms-container { max-width: 87.5rem; margin: 0 auto; padding: 0 1.5rem; }
.cms-container-fluid { max-width: 87.5rem; margin: 0 auto; padding: 0 1.5rem; }

/* ─── 🚨 Header / Desktop Nav (원본 V1 완벽 구현) ─── */
.cms-header { position: absolute; top: 0; left: 0; right: 0; z-index: 999; }
.cms-header-container { max-width: 87.5rem; margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 4.5rem; }
.cms-logo-link { display: flex; align-items: center; gap: 0.5rem; }
.cms-logo-img { height: 2.7rem; width: auto; }

.cms-desktop-nav { display: flex; align-items: center; gap: 3.5rem; }
.cms-nav-item-wrap { position: relative; }

/* 1뎁스 타이틀 */
.cms-nav-item {
    display: flex; align-items: center; gap: 0.25rem; color: #ffffff;
    font-size: var(--nav-label); font-weight: 700; letter-spacing: -0.01em; 
    padding-top: 1.2rem; padding-bottom: 1.2rem; transition: color 0.2s;
}

/* 2뎁스 드롭다운 박스 & 애니메이션 */
.cms-nav-dropdown {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    min-width: 11rem; padding-top: 0.4rem; opacity: 0; pointer-events: none; 
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.cms-nav-item-wrap:hover .cms-nav-dropdown { opacity: 1; pointer-events: auto; }

.cms-nav-dropdown-inner {
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.6rem 0;
}

/* 2뎁스 서브 헤딩 (진한색, 굵게) */
.cms-nav-sub-heading {
    display: block; padding: 0.55rem 1.4rem 0.2rem 1.4rem;
    font-size: var(--p3); font-weight: 600; color: #222222;
    white-space: nowrap; transition: color 0.15s ease;
}
.cms-nav-sub-heading:hover { color: #5a7a5a; }

/* 3뎁스 서브 아이템 (들여쓰기, 회색, 얇게) */
.cms-nav-sub-item {
    display: block; padding: 0.32rem 1.4rem 0.32rem 2rem;
    font-size: var(--p3); font-weight: 400; color: #999999;
    white-space: nowrap; transition: color 0.15s ease;
}
.cms-nav-sub-item:hover { color: #555555; }

/* Login & Hamburger */
.cms-header-actions { display: flex; align-items: center; gap: 0.25rem; }
.cms-login-btn { position: relative; padding: 0.75rem; color: #ffffff; }
.cms-login-tooltip { 
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); 
    margin-top: 0.25rem; padding: 0.25rem 0.75rem; background-color: #ffffff; 
    color: #374151; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    opacity: 0; pointer-events: none; transition: opacity 0.15s; font-size: var(--caption); font-weight: 500; white-space: nowrap; 
}
.cms-login-btn:hover .cms-login-tooltip { opacity: 1; }

.cms-hamburger-btn { padding: 0.75rem; color: #ffffff; transition: color 0.3s; z-index: 99; position: relative; }
.cms-hamburger-btn.is-active { color: #333333; }

/* ─── 🚨 Mobile Overlay Menu (원본 V1 완벽 구현) ─── */
.cms-mobile-overlay { position: fixed; inset: 0; background: #ffffff; z-index: 98; overflow-y: auto; animation: overlayFadeIn 0.35s ease forwards; }
@keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cms-overlay-container { display: flex; justify-content: center; padding: 5rem 2rem 3rem 2rem; min-height: 100vh; align-items: flex-start; }
.cms-overlay-grid { width: 100%; max-width: 75rem; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 2.5rem; row-gap: 2rem; }

/* 모바일 1뎁스 타이틀 */
.cms-mob-title {
    display: block; font-size: var(--menu-title); font-weight: 700; color: #333333; 
    letter-spacing: -0.01em; padding-bottom: 0.6rem; margin-bottom: 0.5rem; 
    border-bottom: 2px solid #333333; transition: color 0.2s ease;
}
.cms-mob-title:hover { color: #5a7a5a; }

.cms-mob-list-container { display: flex; flex-direction: column; }
.cms-mob-group + .cms-mob-group { margin-top: 0.7rem; } /* 그룹간 간격 */

/* 모바일 2뎁스 헤딩 */
.cms-mob-sub-heading {
    display: block; font-size: var(--menu-sub-heading); font-weight: 600; 
    color: #333333; padding: 0.2rem 0; letter-spacing: -0.01em; transition: color 0.15s ease;
}
.cms-mob-sub-heading:hover { color: #5a7a5a; }

/* 모바일 3뎁스 아이템 (들여쓰기) */
.cms-mob-sub-item {
    display: block; font-size: var(--menu-item); font-weight: 400; color: #999999; 
    padding: 0.22rem 0 0.22rem 0.75rem; transition: color 0.15s ease;
}
.cms-mob-sub-item:hover { color: #555555; }

/* 모바일 단독 메뉴 (하위 없을 경우) */
.cms-mob-standalone-item {
    display: block; font-size: var(--menu-item); font-weight: 400; color: #555555; 
    padding: 0.28rem 0; transition: color 0.15s ease;
}
.cms-mob-standalone-item:hover { color: #5a7a5a; }


/* Sub GNB / Content */
.sub-page-wrapper { padding-top: 12rem; padding-bottom: 4rem; }
#subgnb { margin-bottom: 2rem; padding-bottom: 1rem; }
.subTDM { display: flex; gap: 1rem; flex-direction: column; }
.subTD2 a h1 { font-size: 2rem; font-weight: 700; color: #1e1e1e; margin: 0; }
.subTD3 ul { display: flex; gap: 1.5rem; }
.subTD3 ul li h1 { font-size: 1rem; color: #666; transition: 0.2s; margin: 0; }
.subTD3 ul li.active h1, .subTD3 ul li:hover h1 { color: var(--accent-green); font-weight: 700; }
.depth4 { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.depth4 li a { display: block; padding: 0.75rem 1.5rem; color: #666; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: 0.2s; }
.depth4 li.active a, .depth4 li:hover a { color: #1e1e1e; border-bottom-color: var(--accent-green); font-weight: 700; }

/* Footer */
.cms-footer { background-color: #ffffff; border-top: 0.0625rem solid #d0d0d0; padding-top: 2rem; padding-bottom: 1.5rem; }
.cms-footer-logo-wrap {display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 1rem;}
.cms-footer-logo-wrap img {margin-bottom: 1rem; }
.cms-footer-logo { height: 3.3rem; width: auto; }
.cms-footer-bottom { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-end; gap: 1rem; }
.cms-footer-text { font-size: var(--p3); font-weight: 300; color: #888888; line-height: 1.5; }
.cms-footer-label { font-weight: 500; color: #555555; }
.cms-footer-spacer { display: inline-block; width: 1rem; }
.cms-footer-copyright { text-align: right; line-height: 1.7; }

/* Icons & Etc */
.cms-icon-sm { width: 0.8rem; height: 0.8rem; }
.cms-icon-md { width: 1.25rem; height: 1.25rem; }
.cms-icon-lg { width: 1.75rem; height: 1.75rem; }

/* ─── 🚨 Top Utilities (로그인/회원가입 텍스트 메뉴) ─── */
.cms-top-utils { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
    margin-right: 0.5rem; 
}
.cms-top-link { 
    color: rgba(255, 255, 255, 0.85); 
    font-size: 0.85rem; 
    font-weight: 500; 
    transition: color 0.2s ease; 
}
.cms-top-link:hover { 
    color: #ffffff; 
}
.cms-top-sep { 
    color: rgba(255, 255, 255, 0.3); 
    font-size: 0.75rem; 
}


/* Media Queries (메뉴 컬럼 조정) */
@media (max-width: 1499px) {
    .cms-desktop-nav{gap:2.5rem;}
    .cms-footer-logo-wrap{grid-template-columns: 3fr 2fr;}
}
@media (max-width: 1199px) {
    .cms-desktop-nav { gap: 1rem; }
    .cms-footer-logo-wrap {grid-template-columns: 1fr; gap:3vw;}
}
@media (max-width: 992px) {
    :root {--section-title: 2rem;}
  .cms-logo-img{height:inherit!important;}
  .cms-desktop-nav { display: none; }
  .cms-overlay-container { padding-top: 5rem; }
  .cms-overlay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cms-top-utils { gap: 0.8rem; margin-right: 1.5rem; }
  .cms-top-link { font-size: var(--p3); }
  .sub-page-wrapper {padding-top: 8rem;}
}
@media (max-width: 767px) {
  .cms-header-container { padding-left: 1rem; padding-right: 1rem; gap: 2rem;}
  .cms-overlay-container { padding-left: 1.25rem; padding-right: 1.25rem; }
  .cms-overlay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-footer-copyright { text-align: left; }
  .cms-top-utils {gap: 0.2rem;margin-right: 0.5rem;}
  .cms-hamburger-btn{padding:0;}
  #subgnb{margin:0!important;}
  .hidden-xs { display: none !important; }
  .visible-xs { display: block !important; }
}