@charset "utf-8";

.lang {display:none;}

.banner_zone .bnWrap {width: calc(100% - 9rem);}

.top-bar .container::after {display: none;}

/* popBtn */
.popBtn { position:absolute; right:auto !important; left:0; top:10px !important; width:110px; height:30px; border-radius:19px; background:#444444; text-align:center; font-size:15px; letter-spacing: .5px; color:#fff; line-height:30px }
.popBtn:before { content:"\e99c"; font-family:"xeicon"; margin-right:3px; font-size:18px; vertical-align: bottom; }

.siteLink {width: auto; display:flex;}
.siteLink .wrap {width:11rem;}
.siteLink .wrap ~ .wrap {border-left: 1px solid #5A5B5B;}
.siteLink .wrap button {box-sizing: border-box !important;}

.footer_link {padding: 20px 0;}
.footer_link::before {display: none;}
.footer_link li a:before {border-color: rgba(255,255,255,0.2);}
.footer_link li a strong {color: #fff;}

/* 푸터 개인정보처리방침 링크 */
.footer_privacy {position:relative; left:530px; height:49px; overflow:hidden; z-index:10;}
.footer_privacy ul{ overflow:hidden;}
.footer_privacy li {float:left;}
.footer_privacy li a {display:block; position:relative; line-height:50px; padding-left:15px; margin-left:15px; font-size:18px; color:#c3fcfd;}
.footer_privacy li:first-child a{margin-left:0; padding-left:0; color:#98e2ff; background:none;}
.footer_privacy li:first-child a::before { display:none;}
.footer_privacy li a:hover {text-decoration:underline;}


/* 로고 반응형 추가 */
@media (max-width: 1520px) {
	/* popBtn */
	.popBtn { left: 80px;}
}

@media (max-width: 1240px) {
	/* popBtn */
	.popBtn { left: 50px;}
	
	.infoToday {display: none;}
}

@media (max-width: 1024px) {
	/* popBtn */
	.popBtn { margin-top: 5px;}
	
	.openPop #container {padding-top: 65px !important;}
}

@media (max-width: 860px) {
	.siteLink .wrap {width:50%;}
}

@media (max-width: 830px) {
	/* popBtn */
	.popBtn { left: 20px;}
	
	.openPop #container {padding-top: 70px !important;}
}

@media (max-width: 768px) {
	
}

@media (max-width: 480px) {
	.openPop #container {padding-top: 55px !important;}
	
	.siteLink {flex-direction: column;}
	.siteLink .wrap {width:100%;}
	.siteLink .wrap ~ .wrap {border-left: none; border-top: 1px solid #5A5B5B;}
}
@media (max-width: 430px) {
	#header h1 a img { height:30px !important; }
}
@media (max-width: 360px) {
	#header h1 a img { height:25px !important; }
}

@media (max-width: 340px) {
	
}

/* =============================================================
   [대분류] 디자인 토큰 (CSS 변수)
   - 1920px 기준 Figma 디자인에서 추출
   ============================================================= */
:root {
  /* [중분류] 컬러 - 메인 액센트 (Basic) */
  --sub-b-basic: #44b0ff; /* 블루 */
  --sub-o-basic: #ffb144; /* 오렌지 */
  --sub-g-basic: #64cc4f; /* 그린 */
  --sub-b2-basic: #4485ff; /* 딥블루 */

  /* [중분류] 컬러 - 그레이스케일 */
  --black100: #000000;
  --gray90: #1a1a1a;
  --gray80: #333333;
  --gray70: #4d4d4d;
  --gray60: #666666;
  --gray50: #808080;
  --gray40: #999999;
  --gray30: #b3b3b3;
  --gray20: #cccccc;
  --gray10: #e6e6e6;
  --gray3: #f7f7f7;
  --white0: #ffffff;

  /* [중분류] 컬러 - 블루 틴트 (밝은 쪽) */
  --sub-b-90: #57b9ff;
  --sub-b-80: #69c0ff;
  --sub-b-70: #7dc9ff;
  --sub-b-60: #8fd0ff;
  --sub-b-50: #a2d8ff;
  --sub-b-40: #b4e0ff;
  --sub-b-30: #c7e8ff;
  --sub-b-20: #daefff;
  --sub-b-10: #edf8ff;

  /* [중분류] 컬러 - 블루 셰이드 (어두운 쪽) */
  --sub-b-110: #2086e5;
  --sub-b-120: #1c77cc;
  --sub-b-130: #1968b2;
  --sub-b-140: #155999;
  --sub-b-150: #124a7f;
  --sub-b-160: #0e3c66;
  --sub-b-170: #0b2d4c;
  --sub-b-180: #071e33;
  --sub-b-190: #040f19;

  /* [중분류] 컬러 - 오렌지 틴트 (밝은 쪽) */
  --sub-o-90: #ffb957;
  --sub-o-80: #ffc169;
  --sub-o-70: #ffc97d;
  --sub-o-60: #ffd08f;
  --sub-o-50: #ffd8a2;
  --sub-o-40: #ffe0b4;
  --sub-o-30: #ffe8c7;
  --sub-o-20: #ffefda;
  --sub-o-10: #fff8ed;

  /* [중분류] 컬러 - 오렌지 셰이드 (어두운 쪽) */
  --sub-o-110: #e58422;
  --sub-o-120: #cc751e;
  --sub-o-130: #b2671b;
  --sub-o-140: #995817;
  --sub-o-150: #7f4913;
  --sub-o-160: #663b0f;
  --sub-o-170: #4c2c0b;
  --sub-o-180: #331d08;
  --sub-o-190: #190f04;

  /* [중분류] 컬러 - 그린 틴트 (밝은 쪽) */
  --sub-g-90: #74d261;
  --sub-g-80: #83d672;
  --sub-g-70: #93dc84;
  --sub-g-60: #a2e095;
  --sub-g-50: #b2e6a7;
  --sub-g-40: #c1ebb9;
  --sub-g-30: #d1f0cb;
  --sub-g-20: #e0f5dc;
  --sub-g-10: #f0faee;

  /* [중분류] 컬러 - 그린 셰이드 (어두운 쪽) */
  --sub-g-110: #2dbc10;
  --sub-g-120: #28a70e;
  --sub-g-130: #23920d;
  --sub-g-140: #1e7d0b;
  --sub-g-150: #196809;
  --sub-g-160: #145307;
  --sub-g-170: #0f3f05;
  --sub-g-180: #0a2a04;
  --sub-g-190: #051502;

  /* [중분류] 타이포그래피 - 헤드라인 (font-scale 연동) */
  --headline-l: calc(60px * var(--font-scale));
  --headline-m: calc(64px * var(--font-scale));
  --headline-s: calc(42px * var(--font-scale));

  /* [중분류] 타이포그래피 - 타이틀 (font-scale 연동) */
  --title-lg-b: calc(36px * var(--font-scale));
  --title-lg: calc(36px * var(--font-scale));
  --title-md-b: calc(30px * var(--font-scale));
  --title-md: calc(30px * var(--font-scale));
  --title-sm-b: calc(26px * var(--font-scale));
  --title-sm-m: calc(26px * var(--font-scale));
  --title-sm: calc(26px * var(--font-scale));
  --title-s-b: calc(22px * var(--font-scale));
  --title-s: calc(22px * var(--font-scale));

  /* [중분류] 타이포그래피 - 본문 (font-scale 연동) */
  --body-md-b: calc(20px * var(--font-scale));
  --body-md: calc(20px * var(--font-scale));
  --body-sm-b: calc(18px * var(--font-scale));
  --body-sm: calc(18px * var(--font-scale));
  --body-s-b: calc(16px * var(--font-scale));
  --body-s: calc(16px * var(--font-scale));

  /* [중분류] 타이포그래피 - 캡션 (font-scale 연동) */
  --caption-b: calc(14px * var(--font-scale));
  --caption: calc(14px * var(--font-scale));

  /* [중분류] 이펙트 */
  --background-blur: blur(8.1px);
  --drop-shadow: 0px 4px 250px rgba(0, 0, 0, 0.25);

  /* [중분류] 글자 크기 조절 (font-scale.js에서 동적 변경) */
  --font-scale: 1;
}

/* =============================================================
   [대분류] 레이아웃
   - 컨테이너 (1920px 기준, 최대 1520px)
   ============================================================= */
.container {
  width: 100%;
  max-width: 1520px; /* 1920 - 좌우 200px 여백 = 1520 (Figma 기준) */
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1520px) {
  .container {
    max-width: 100%;
    padding: 0 clamp(20px, 5vw, 80px);
  }
}

/* =============================================================
   [대분류] 상단바 (Top Bar)
   - 날씨, 시간, 미세먼지, 글자크기 조절 버튼
   ============================================================= */

/* [중분류] 상단바 - 컨테이너 */
.top-bar {
  position: relative;
  z-index: 101;
  background: var(--gray3);
  font-size: var(--caption);
  font-weight: 400;
  color: var(--gray70);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.top-bar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.top-bar--hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
.top-bar--hidden + .header {
  transform: translateY(-50px); /* top-bar 높이만큼 헤더 위로 이동 */
}
.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 50px;
  gap: 20px;
}

/* [중분류] 상단바 - 날씨 정보 */
.top-bar__weather {
  display: flex;
  align-items: center;
  gap: 16px;
}
.top-bar__today-weather {
  font-size: var(--body-s);
}
.top-bar__weather-item {
  font-size: var(--body-s);
}
.top-bar__temperature {
  color: var(--sub-o-basic);
}
.top-bar__temperature-value {
  font-size: var(--body-sm);
  font-weight: 400;
}
.top-bar__dust-value {
  color: var(--sub-g-basic);
}
.top-bar__air-quality-value {
  color: var(--sub-b-basic);
}
.top-bar__weather li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.top-bar__weather strong {
  font-weight: 600;
  color: var(--gray80);
}
.top-bar__time {
  color: var(--gray80);
  font-weight: 400;
}
.top-bar__good {
  color: #13cf94;
  font-weight: 600;
}

/* [중분류] 상단바 - 글자크기 조절 버튼 */
.top-bar__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.top-bar__actions a {display:flex; align-items:center;}
.top-bar__actions a ~ a::before {content: '|'; font-size: 10px; color: #ccc; margin: 0 6px;}
.top-bar__actions a + button {margin-left: 10px;}

.top-bar__actions button {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.4);
  padding: 0;
}
.top-bar__actions button:hover {
  border-color: var(--sub-b-basic);
  color: var(--sub-b-basic);
}
.top-bar__actions button:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 829px) {
  .top-bar__weather {
    display: none;
  }
}

/* =============================================================
   [대분류] 헤더 / GNB (Global Navigation Bar)
   - 로고, 메인 내비게이션, 검색, 모바일 메뉴
   ============================================================= */

/* [중분류] 헤더 - 기본 구조 */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  font-size: var(--body-s);
  color: var(--gray90);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(123px);
  transition: transform 0.3s ease;
}
.header.header--hidden {
  transform: translateY(-100%);
}
.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.header-inner::after {display: none;}
.header-hamburger {
  display: none;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  padding: 0;
}

/* [중분류] 헤더 - 모바일 메뉴 패널 (햄버거 메뉴) */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white0);
  padding: 30px;
  flex-direction: column;
  gap: 100px;
  overflow-y: auto;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-menu__head img {
  height: 36px;
  width: auto;
}
.mobile-menu__close {
  width: 24px;
  height: 24px;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu__group-line {
  height: 1px;
  background: var(--gray10);
}
.mobile-menu__group.open .mobile-menu__group-line {
  background: var(--sub-b-basic);
}
.mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: var(--body-sm-b);
  font-weight: 500;
  color: var(--gray90);
}
.mobile-menu__trigger svg {
  width: 24px;
  height: 24px;
}
.mobile-menu__links {
  display: none;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
  max-height: calc(20px * 6 + 16px * 6);
  padding-bottom: 30px;
  column-gap: 50px;
  width: fit-content;
}
.mobile-menu__group.open .mobile-menu__links {
  display: flex;
}
.mobile-menu__links a {
  font-size: var(--body-s);
  font-weight: 400;
  color: var(--gray50);
  white-space: nowrap;
}
.mobile-menu__links a:hover,
.mobile-menu__links a:focus {
  color: var(--gray90);
  text-decoration: underline;
}

/* [중분류] 헤더 - 로고 */
.logo {
  max-width: 290px;
  flex-shrink: 0;
}

.logo img {
	max-width: 100%;	
}

/* [중분류] 헤더 - 우측 영역 (검색 + GNB) */
.header-right {
  display: flex;
  align-items: center;
}
.gnb {
  transition:
    transform 0.35s ease,
    opacity 0.3s ease;
}

/* [중분류] 헤더 - 검색 기능 */
.header-search {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* 검색 아이콘/닫기 아이콘 토글 */
.header-search__btn .icon-search {
  display: block;
}
.header-search__btn .icon-close {
  display: none;
}
.header.search-open .header-search__btn .icon-search {
  display: none;
}
.header.search-open .header-search__btn .icon-close {
  display: block;
}

/* [중분류] 헤더 - 검색 드롭다운 패널 */
.header-search-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white0);
  border-top: 1px solid var(--gray10);
  padding: 20px 0;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.header.search-open .header-search-panel {
  display: block;
}
.header-search-panel__bar {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--gray20);
  border-radius: 12px;
  padding: 12px 24px;
  max-width: 1520px;
  margin: 0 auto;
}
.header-search-panel__bar svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--gray50);
}
.header-search-panel__bar input {
  flex: 1;
  max-width: calc(100% - 5.15rem);
  border: none;
  outline: none;
  font-size: var(--body-md);
  font-weight: 400;
  color: var(--gray90);
  background: transparent;
}
.header-search-panel__bar input::placeholder {
  color: var(--gray40);
}
.header-search-panel__bar button {
  padding: 10px 24px;
  border: 1px solid var(--gray20);
  border-radius: 8px;
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--gray90);
  background: var(--white0);
  cursor: pointer;
}
.header-search__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  padding: 0;
}

.infoToday{
	margin-left:20px;
	
}
/* [중분류] 헤더 - GNB 1depth 메뉴 */
.gnb .depth01 > ul {
  display: flex;
  margin-right: 12px;
}
.gnb .depth01 {
  position: static;
}
.gnb .depth01 > ul > li > a  {
  display: block;
  padding: 31px 15px;
  font-size: var(--body-md);
  font-weight: 400;
  color: var(--gray90);
}

/* [중분류] 헤더 - GNB 호버 시 드롭다운 배경 패널 */
/* 헤더 호버시 헤더(header)부분 투명이아닌 배경 흰색으로 변경 */
.header:has(.depth01:hover) {
  background: var(--white0);
  backdrop-filter: none;
}
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0;
  background: var(--white0);
  transition: height 0.2s ease;
  pointer-events: none;
  z-index: -1;
}
.header:has(.depth01:hover)::after {
  height: var(--gnb-dropdown-h, 300px);
  pointer-events: auto;
}
/* 헤더 호버시 헤더(드롭다운 포함) 아래 페이지 영역 블러 처리 */
.header::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: -2;
}
.header:has(.depth01:hover)::before {
  opacity: 1;
}

/* [중분류] 헤더 - GNB 2depth 서브메뉴 */
.gnb .depth01 > ul {
  position: relative;
}
.gnb .depth01 > ul > li > .depth02 {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 30px 0 44px 0;
  min-width: 100%;
  min-height: 270px;
}

/* depth02안 strong 숨김 */
.gnb .depth01 .depth02 .depth02_tit  {
  display: none;
}

.gnb .depth02:hover {
  display: flex;
  justify-content: space-between;
}
.gnb .depth01 ul li:hover .depth02{
  display: flex;
}
.gnb .depth02 ul {
  display: flex;
  /* flex-direction: column; */
  flex-wrap: wrap;
  white-space: nowrap;
  flex-shrink: 0;
  width: 90%;
  /* max-height: 220px; */
  gap: 1rem 0.5rem;
}
.gnb .depth02 a {
  flex-shrink: 0;
  display: block;
  font-size: var(--body-s);
  font-weight: 400;
  color: var(--gray50);
  margin-left: 12px;
  padding: 10px 1rem;
  width: 10rem;
  background: #fff;
  border-radius: 0.5rem;
  border: 2px solid #ddd;
}
.gnb .depth02 a:hover {
  color: var(--black100);
  text-decoration: underline;
}

/* [중분류] 헤더 - GNB 호버 시 카테고리 이미지 */
.nav-image {
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  height: 270px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.header:has(.depth01 ul li:nth-child(1):hover) .nav-image--1,
.header:has(.depth01 ul li:nth-child(2):hover) .nav-image--2,
.header:has(.depth01 ul li:nth-child(3):hover) .nav-image--3,
.header:has(.depth01 ul li:nth-child(4):hover) .nav-image--4,
.header:has(.depth01 ul li:nth-child(5):hover) .nav-image--5 {
  opacity: 1;
}

/* depth03 toggle - 웹 */
.gnb .depth02 > ul > li > .depth03 { display: none; padding: 0 20px;}
.gnb .depth02 > ul > li.dep.active > .depth03 { display: block; }
.gnb .depth02 > ul > li.dep > a { position: relative; padding-right: 1.5rem; }
.gnb .depth02 > ul > li.dep > a::after { content: '\e941'; font-family: 'xeicon'; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(199, 232, 255, 0.5); font-size: 0.65rem; color: #999; transition: transform .15s; }
.gnb .depth02 > ul > li > a:hover,
.gnb .depth02 > ul > li.dep.active > a {border-color: var(--sub-b-basic); text-decoration: none; color: var(--sub-b-basic); }
.gnb .depth02 > ul > li.dep.active > a::after { content: '\e944'; }
.gnb .depth03 > ul { display: block; max-height: none; flex-wrap: unset; white-space: normal; padding: .35rem 0; gap: 0; width: auto; }
.gnb .depth03 > ul > li > a { position: relative; display: block; margin-left: 0; padding: .25rem 0 .25rem 1rem; font-size: .8rem; color: #888; border: none; width: auto; }
.gnb .depth03 > ul > li > a::before { content: ''; position: absolute; left: .25rem; top: .6rem; width: 4px; height: 4px; border-radius: 50%; background: #bbb; }
.gnb .depth03 > ul > li > a:hover { color: var(--sub-b-basic); text-decoration: none; }

#mNav {padding: 0 1rem;}
#mNav h4 {border-bottom: none;}
#mgnb {margin-top: 2rem;}
#mgnb .depth01 > ul > li.dep:first-child > a {border-top: 1px solid #e3e3e3;}
#mgnb .depth01 > ul > li.dep.active > a {border-top: 1px solid var(--sub-b-basic); background: none; color: var(--sub-b-basic); font-weight: 600;}
#mgnb .depth01 > ul > li:has(+ li.active) {border-bottom: none;}
#mgnb .depth02 > ul {padding: 0.5rem 1rem;}

.subCntBody {max-width: 1560px;}

/* =============================================================
   [대분류] 푸터 (Footer)
   - 하단 브랜드, 내비게이션 링크, 저작권
   ============================================================= */

/* [중분류] 푸터 - 컨테이너 및 배경 */
.footer {
  position: relative;
  min-height: 350px;
  font-size: var(--caption);
  overflow: hidden;
  isolation: isolate;
  background-blend-mode: multiply;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
}
.footer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
.footer .container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

/* [중분류] 푸터 - 브랜드명 + 내비게이션 */
.footer-inner {
  display: flex;
  align-items: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 80px;
}
.footer-brand {
  font-size: var(--title-sm-b);
  font-weight: 400;
  color: var(--white0);
  flex: 1;
}
.footer-nav {
  display: flex;
  gap: 96px;
}

/* [중분류] 푸터 - 컬럼 (연락처, 주소 등) */
:where(.footer-col) h4 {
  font-size: var(--body-s-b);
  font-weight: 500;
  color: var(--white0);
  margin-bottom: 24px;
}
:where(.footer-col) p {
  font-size: var(--body-s);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
  opacity: 0.6;
}

/* =============================================================
   [대분류] 반응형 (Responsive)
   - Desktop : 1280px 이상 (1920 기준 디자인)
   - Tablet  : 830px ~ 1240px
   - Mobile  : 829px 이하
   ============================================================= */

/* ------- [중분류] 태블릿 (1240px ~ 830px) ------- */
@media (max-width: 1240px) {
  /* 레이아웃 */
  .container {
    padding: 0 50px;
  }

  /* 헤더: GNB 숨기고 햄버거+검색만 표시 */
  .header-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .header-inner {
    height: 80px;
    justify-content: space-between;
  }
  .gnb {
    display: none;
  }
  .nav-image {
    display: none;
  }
  .header::after {
    display: none;
  }
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 상단바 */
  .top-bar__inner {
    padding: 0 50px;
  }
  .top-bar__weather {
    font-size: var(--body-s);
  }
  .top-bar__temperature-value {
    font-size: var(--body-sm);
  }

  /* 검색 패널 */
  .header-search-panel {
    padding: 30px 50px;
  }
  .header-search-panel__bar {
    padding: 14px 20px;
  }
  .header-search-panel__bar input {
    font-size: var(--body-sm);
  }
  .header-search-panel__bar button {
    padding: 8px 20px;
    font-size: var(--body-s);
  }

  /* 푸터 */
  .footer-inner {
    display: flex;
    align-items: flex-start;
    gap: 96px;
    padding-top: 80px;
  }
  .footer-brand {
    font-size: var(--title-sm-b);
    font-weight: 400;
    flex: none;
  }
  .footer-nav {
    display: flex;
    gap: 70px;
  }
  
  .footer-col:first-child p {
  	max-width: 11rem; word-break: keep-all;
  }
}

@media (max-width: 1240px) {
  .top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    transition: all 0.3s;
  }
  
  .openPop .top-bar {top: 140px;}

  .header {
    position: fixed;
    top: 50px; /* top-bar 높이만큼 아래로 */
    width: 100%;
    transition: all 0.3s;
  }
  
  .openPop .header {top: 190px;}

  #sub_container {
    margin-top: 130px; /* top-bar + header 높이만큼 패딩 추가 */
  }
}

/* ------- [중분류] 모바일 (829px 이하) ------- */
@media (max-width: 829px) {
  /* 레이아웃 */
  .container {
    padding: 0 20px;
  }

  body {
    font-size: var(--caption);
  }

  /* 헤더 */
  .header-inner {
    height: 60px;
  }
  .header-search-panel {
    padding: 20px;
  }
  .header-search-panel__bar {
    padding: 12px 16px;
    gap: 10px;
    border-radius: 8px;
  }
  .header-search-panel__bar svg {
    width: 20px;
    height: 20px;
  }
  .header-search-panel__bar input {
    font-size: var(--body-s);
  }
  .header-search-panel__bar button {
    padding: 8px 16px;
    font-size: var(--body-s);
  }
  .logo {
    font-size: var(--body-md-b);
  }

  /* 푸터 */
  .footer-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-top: 30px;
    padding-bottom: 3cap;
  }
  .footer-brand {
    flex: none;
    font-size: var(--title-sm-b);
    font-weight: 600;
  }
  .footer-nav {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .footer-col:first-child p {max-width: 100%;}

  #sub_container {
    margin-top: 110px; /* top-bar + header 높이만큼 패딩 추가 */
  }
}

@media (max-width: 768px) {
	.popBtn {right: 1rem !important; left: auto; margin-top: 2rem;}
}

@media (max-width: 480px) {
	.openPop .top-bar {top: 110px;}
  
  	.openPop .header {top: 160px;}
}