@charset "utf-8";/* ===============================
BASE & RESET
=============================== */
* {font-family:'Pretendard';}
.container { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; } 
.ir_pm { overflow: hidden; text-indent: -9999px; display: block; } 
@media (max-width: 1480px){
.container { padding: 0 40px; } 
}
/* ===============================
 HEADER COMMON
=============================== */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background 0.3s ease; border-bottom: 0 !important;  } 
.h_nav { width: 100%;position: relative;} 
.h_flex { display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 0 60px; box-sizing: border-box;background:  rgba(255, 255, 255, 0.80);box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);backdrop-filter: blur(2px); } 
.header.is-white { background: #fff !important; } 

@media (max-width: 1480px){
.h_flex { padding: 0 40px;}
}

@media (max-width: 1279px){
.h_flex {height: 60px; padding: 0 40px;}
.h_archive .pc{display: none;}

}
@media (max-width: 767px){
.h_flex { padding: 0 20px;}
}
/* ===============================
 LOGO & ARCHIVE
=============================== */
.logo_wrap { display: flex; align-items: flex-end; z-index:1001 ; position: relative; } 
.logo_wrap a { display: flex; align-items: center; } 
.logo { display: inline-block;width: 130px; height: 40.625px; background: url(../images/common/logo.png) no-repeat center / cover; } 
.archive-wrap { margin-left: 16px; } 
.h_archive { background: none; border: 0; font-size: 16px; cursor: pointer; display: flex; align-items: center; font-weight:400;line-height: 18px;
letter-spacing: -0.36px; } 
.h_archive .vol { font-weight: 700; } 
.h_archive img { width: 28px } 

@media (max-width: 1480px){
    .logo { width: 110px; height: 30.625px;}
}

@media (max-width: 1023px){
    .logo { width: 89.6px;height: 28px;}
    .h_archive .vol{font-size: 15px;font-weight: 400;line-height: 22px; letter-spacing: -0.5px;}
    .h_archive img{width: 20px;}

}
/* ===============================
 SEARCH LAYER
=============================== */
.search { display: none; position: absolute; top: 80px; left: 0; width: 100%; height: 100vh; max-height: 600px; background: #fff; 
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);z-index: 200; text-align: center; } 
.header.open_srch  .search { display:flex; align-items: center;  justify-content: center; flex-direction: column; gap: 60px;} 
.search .input {  width: 90vw; max-width: 600px; height: 48px; border: 0; font-size: 16px; } 
.input_wrap {position: relative;;width: 90vw;max-width: 600px;height: 50px;border-bottom: 1px solid #222;}
.searchBtn{   position: absolute; right: 5px; bottom: 0px; }
.search .input:focus { outline: none; } 
.search-suggestions { width: 90vw; max-width: 620px; display: flex; flex-wrap: wrap; gap: 10px; } 
.search-suggestions .suggestion { color: #222; font-size: 18px; font-weight: 400; line-height: 32px; letter-spacing: -0.18px; cursor: pointer; padding: 10px 16px; border-radius: 8px;border: 1px solid #FFF; background:rgba(250, 241, 241, 0.95);  flex: 1 1 calc(25% - 10px);   } 
.searchBtn img{width: 48px;}
.search-suggestions .suggestion.auto {flex: 0 0 auto;  max-width: none; }

.srch_close { position: absolute; right: 45px; top: 45px; width: 19px; height: 19px; padding: 11px 11px 10px; display: block; z-index: 210; box-sizing: content-box; } 
.srch_close span { position: absolute; top: 50%; left: 50%; 
 width: 26.8px; height: 2px; background-color: #222; border-radius: 2px; } 
.srch_close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); } 
.srch_close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); } 

/* ===============================
PC MENU (1281px ~)
=============================== */
.menu_wrap { display: flex; gap: 80px; height: 100%; align-items: center; position: absolute; left: 50%; transform: translateX(-50%);;justify-content: center; z-index: 300;} 
.menus {  display: flex; height: 100%; } 
.menus .menu { font-size: 20px; font-weight: 600; line-height: 28px; letter-spacing: -0.8px; width: 220px; cursor: pointer; height: 100%;  display: flex; align-items: center; justify-content: center;} 
.menu-area {width: 100vw; position: absolute; top: 80px; left:50%; transform: translateX(-50%); display: none; white-space: nowrap; padding:32px 20px 48px 20px;justify-content: center; background: rgba(255, 255, 255, 0.80);box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05);backdrop-filter: blur(2px);will-change: backdrop-filter; } 
.menus.open .menu-area { display:flex; } 
.menu-area .sub_menu { display: block; text-align: center; font-size: 18px; font-weight: 400; line-height: 26px; letter-spacing: -0.18px; padding: 11px  0px;width: 220px;  transition: ease-in-out 0.3s;} 
.menu-area .sub_menu:hover { color: #E04F42;  } 


.menus .menu:hover,
.menus .menu.active { color: #E04F42; }

/* ===============================
 UTIL BUTTONS
=============================== */
.h_util { display: flex; align-items: center; gap: 20px; } 
.mo_srch img { width: 48px; } 
@media (max-width: 1279px) { 
    .h_util {gap: 16px; flex-direction: row-reverse;}
}
/* ===============================
 MOBILE MENU & ACCORDION (~1279px)
=============================== */
/* 기본적으로 모바일 요소들은 숨김 */
.mo_btn, .mobile_gnb, .mo_srch_close { display: none; } 
@media (max-width: 1279px) { /* 1. PC 요소 숨기기 */
 .menu_wrap, 
 .gnb_bg { display: none !important; } 
 /* 2. 햄버거 버튼 스타일 (공통 및 애니메이션) */
 .mo_btn { display: block; position: relative; width: 24px; height: 18px; padding: 0; background: none; border: none; cursor: pointer; z-index: 1001; } 
 .mo_btn span { display: block; position: absolute; width: 100%; height: 2px; background: #222; /* 기본 색상 */
 border-radius: 2px; transition: top 0.35s, transform 0.35s, opacity 0.35s, left 0.35s; } 
 /* 막대 위치 설정 */
 .mo_btn span:nth-child(1) { top: 0; } 
 .mo_btn span:nth-child(2) { top: 9px; transition: none} 
 .mo_btn span:nth-child(3) { top: 18px; } 
 /* 버튼 활성화(X자 변형) 상태 */
 #wrap.onmenu .mo_btn span:nth-child(1) { top: 9px; transform: rotate(45deg); } 
 #wrap.onmenu .mo_btn span:nth-child(2) { opacity: 0; left: -60px; } 
 #wrap.onmenu .mo_btn span:nth-child(3) { top: 9px; transform: rotate(-45deg); } 
 /* 3. 모바일 GNB 레이아웃 */
 .mobile_gnb { display: none; position: fixed; top:0px; left: 0; width: 100%; height: 100vh !important; padding: 60px 0 0 0; background: #fff; z-index: 1000; box-sizing: border-box; overflow-y: auto;; } 
  .mobile_gnb >div{ border-top: 1px solid #F1F1F1;}
.input_wrap {  position: relative;;height: 56px;border-bottom: none; width: calc(100vw - 32px);margin: 12px 16px 0 16px; max-width: none; }
 .mobile_gnb .input{width: 100%; max-width:none; padding: 4px 4px 4px 14px; height: 56px; border: 0;color: #767676;font-size: 16px;font-weight: 400;line-height: 26px; 
 letter-spacing: -0.16px; border-radius: 6px;background:#F1F1F1;} 
.searchBtn{right: 4px; top:50%; transform: translateY(-50%); width: 48px; height: 48px;}
}

 /* GNB 열림 상태 */
 #wrap.onmenu .mobile_gnb { display: block; } 
 /* 4. 메뉴 리스트 스타일 */
 .mobile_menu { border-bottom: 1px solid #f1f1f1; } 
 .mobile_menu .menu { display: flex; justify-content: space-between; align-items: center; padding: 20px 16px; font-size: 17px;font-weight: 600;line-height: 31px; letter-spacing: -0.17px; color: #222; cursor: pointer; } 
 /* 아코디언 화살표 */
 .mobile_menu .arrow::after { content: "\e941"; font-family: 'xeicon'; display: inline-block; transition: transform 0.3s; color: #999 !important; font-weight: 400;} 
 .mobile_menu .menu.open .arrow::after { transform: rotate(180deg); } 

 /* 서브 메뉴 */
 .mobile_menu .submenu { display: none; } 
 .mobile_menu .submenu a { display: block; padding: 15px 16px; font-size: 15px;font-weight: 400;line-height: 22px;letter-spacing: -0.3px; color: #222; text-decoration: none; background: #F7F7F7;} 
 .mobile_menu .menu:hover,.mobile_menu .menu.open {color: #E04F42;}


/* 검색창 모바일 대응 */
@media (max-width: 1279px){
.mo_srch ,.header.open_srch .search{display: none;}
}







/* footer */
.footer { position: relative;  background-color: #ED6E62; } 
.footer .container { max-width: 1200px !important;display: flex; justify-content: space-between; padding: 36px 0px;} 

.footer .ft_logo { width: 155px; height: 38px; background: url(../images/common/ft_logo.png) no-repeat center center / 100% auto; } 

.footer .ft_txt p { margin-top: 20px;font-size: 16px; ;font-weight: 400;line-height: 22px; color: #fff; } 
.footer .ft_sns ul { font-size: 0; text-align: center; display: flex; gap: 24px;} 
.footer .ft_sns li a img{margin: 7px 0;}
.footer .ft_sns li .youtube img { width: 33.402px; } 
.footer .ft_sns li .blog img { width: 31px;} 
.footer .ft_sns li .facebook img { width: 13px; } 
.footer .ft_sns li .insta img { width: 26px;} 

.gray .footer{background: #F3C5C0;}
.gray  .footer .ft_logo {  background: url(../images/common/ft_logo_wh.png) no-repeat center center / 100% auto; } 
.gray .footer .ft_txt p{color: #1A1A1A;}
@media (max-width: 1279px){
    
    .footer .container {padding: 36px 40px; max-width: none; width: 100%;}
}


@media (max-width: 767px){
.footer .ft_logo { margin: 0 auto;} 
.footer .container {padding: 36px 20px; gap: 40px; flex-direction: column; justify-content: center;}
.footer .ft_wrap{width: fit-content; margin: 0 auto;}
.footer .ft_txt p {text-align: center;}
.footer .ft_sns{width: fit-content; margin: 0 auto;}

}


/* 지난호보기 */

.closeList{padding: 11px 40px; background:#F6EEEE ; z-index: 1000; text-align: right;}
@media screen and (max-width: 767px) { 
.closeList{padding: 11px 16px;}
}
  


/*고대비모드 버튼*/
@media screen and (max-width: 1279px) { 
.gray_btn{position: relative; z-index: 1001;}
}
.gray_btn img:nth-child(1) { display: inline-block; } 
.gray_btn img:nth-child(2) { display: none; } 
/* 고대비 모드 활성화 상태 */
body.gray .gray_btn img:nth-child(1) { display: none; } 
body.gray .gray_btn img:nth-child(2) { display: inline-block; } 

/* 아이콘 크기 정렬 (필요시 조절) */
.gray_btn img { vertical-align: middle; width: 48px; height: auto; } 
@media (max-width: 1023px){
    .gray_btn img{width: 36px;}
}


/*고대비모드*/
.gray { background-color: #1A1A1A; color: #fff !important; border-color: #fff !important; } 

.wh_on{display: none !important;}
.gray .wh_on{display: inline-block !important;}
.gray .wh_none{display: none !important;}

/*헤더부분*/
.gray .h_flex{background: rgba(255, 255, 255, 0.40) !important; }
.gray .menu-area{border-bottom: 1px  #FFF !important;background: rgba(255, 255, 255, 0.40) !important; color: #222 !important; backdrop-filter: blur(2px) !important;will-change: backdrop-filter !important; }
.gray  .menus .menu{color:#222}
.gray .mobile_gnb{background: #1A1A1A; margin-top: 60px; padding-top: 0;}
.gray .mobile_menu .menu{color:#fff}
.gray .mobile_menu .submenu a{background: #1E1E1E; color: #fff;}
.gray .mobile_menu .menu.open { color: #F2A8A2 !important; }
.gray  .mobile_menu .menu:hover { color: #F2A8A2 !important; }
.gray .mobile_menu .arrow::after{color:#fff}
.gray .mobile_menu{border-color: #333;}
.gray .mobile_gnb .input{background: #333;}
.gray .menus .menu:hover,.gray .menus .menu.active,.gray .menu-area .sub_menu:hover  { color: #F2A8A2 !important; }

/*서치부분*/
.gray .search{background: #1A1A1A;}
.gray .search *{color: #fff !important;}
.gray .search-suggestions .suggestion{background: #1A1A1A;}
.gray .srch_close span{background:#fff !important}
.gray .search .input{background: #1A1A1A !important; border-bottom: 1px solid #fff; color:#fff !important;}

.mt20 { margin-top:20px !important; } 
.fw_n { font-weight: normal; } 
.fw_b { font-weight: bold; } 
.fw_900 { font-weight: 900; } 

.ltsp_1 { letter-spacing: -0.01em !important; } 
.ltsp_2 { letter-spacing: 0 !important; } 
.ltsp_3 { letter-spacing: -0.035em !important; } 
.skew { transform: skew(-0.03deg); } 

.mt0 { margin-top:0 !important } 
.mt5 { margin-top:5px !important } 
.mt8 { margin-top: 8px !important; } 
.mt10 { margin-top: 10px !important; } 
.mt13 { margin-top: 13px !important; } 
.mt16 { margin-top: 16px !important; } 
.mt20 { margin-top:20px !important; } 
.mt120 { margin-top:120px !important; } 

.mb0 { margin-bottom: 0!important;; } 
.mb5 { margin-bottom: 5px!important;; } 
.mb10 { margin-bottom: 10px!important; } 
.mb24 { margin-bottom: 24px!important; } 
.mb40 { margin-bottom: 40px !important;; } 
.mb80 { margin-bottom: 80px !important;; } 
.pb5 { padding-bottom: 5px; } 


.pl40 { padding-left:40px !important } 
.pt20 { padding-top:20px !important; }