@charset "utf-8";

body {width:100%; height:auto; -webkit-overflow-scrolling:touch;}
#wrap {min-width:320px; width:100%; height:100%; -webkit-overflow-scrolling:touch;}
.ly_wrap {overflow:hidden; overflow-y:scroll; -webkit-overflow-scrolling:touch;}

/*───────────────────────────────────────────────────────────

	 HEADER

───────────────────────────────────────────────────────────*/
#header_wrap {z-index:1000; }
#header_wrap header { width:100%; min-width:320px; background:#fff;  position:relative; /* box-shadow:0 0 5px #ddd */ }
#header_wrap header.h_on {position:fixed; top:0; left:0; z-index:1000}
#header_wrap header .header_box {}
#header_wrap header .header_top { display:flex; height:56px; padding:8px 20px; justify-content: space-between; }
#header_wrap header .header_box .h_logo { margin:auto 0;  }
#header_wrap header .header_box .h_logo a { display:block; width:32px; height:34px;   background:url(../images/common/header_logo.png) no-repeat 0 0 / 100% auto; font-size:0; line-height:0; }
#header_wrap header .header_box .h_logo img {width:100%;}
#header_wrap header .header_box .left_menu { position:absolute; top:0; left:5px; display:table;}
#header_wrap header .header_box .left_menu li {display:table-cell; vertical-align:top;}
#header_wrap header .header_box .right_menu { display:flex; margin:auto 0; gap:16px}
#header_wrap header .header_box .right_menu li:not(.byAppsPartsLi) {position:relative; display:table-cell; vertical-align:top;}

#header_wrap header .header_box .sub_top .right_menu { position:absolute; height:56px; top:0; right:20px; display:flex;align-items:center;  gap:16px; }
#header_wrap header .header_box .sub_top .right_menu li { display:block; margin:0; }

#header_wrap header .header_box .sub_top .right_menu li a.home { display:inline-block; width:24px; height:24px; overflow: hidden; text-indent: -100px; background:url(../images/common/ico_home2.png) no-repeat 50% 50% / 24px; }/* 퍼블수정 5016 */

#header_wrap header .header_box .sub_top .sub_top_left a.home { display:inline-block; width:24px; height:24px; padding:20px 0px; margin-left:5px; overflow: hidden; text-indent: -100px; background:url(../images/common/ico_home2.png) no-repeat 50% 50% / 24px; }


/* 좌측 메뉴
#header_wrap header .header_box .side_menu {display:inline-block; padding:16px 7px 15px 7px; vertical-align:top;}
#header_wrap eader .header_box .side_menu span {display:inline-block; width:20px; height:15px; font-size:0; background:url('../img/icon/icon_menu.png') no-repeat center; background-size:100%; vertical-align:top;}
*/
/* 검색
#header_wrap header .header_box .top_search {display:inline-block; padding:15px 7px 15px 7px; vertical-align:top; background:none; border:none;}
#header_wrap header .header_box .top_search span {display:inline-block; width:18px; height:17px;  font-size:0; background:url('../img/icon/icon_search.png') no-repeat center; background-size:100%; vertical-align:top;}
*/


/* 마이페이지 */
.byAppsPartsLi {display: none;}
.byAppsParts {display: none;}
#header_wrap header .header_box .alert span {display:inline-block; width:24px; height:24px; font-size:0; background:url('../images/icon/alarm.png') no-repeat center; background-size:100%; vertical-align:top;}
#header_wrap header .header_box .setting span {display:inline-block; width:24px; height:24px; font-size:0; background:url('../images/icon/setting2.png') no-repeat center; background-size:100%; vertical-align:top;}
#header_wrap header .header_box .mypage span {display:inline-block; width:24px; height:24px; font-size:0; background:url('../images/icon/b_mypage.png') no-repeat center; background-size:100%; vertical-align:top;}



/* 장바구니 */
#header_wrap header .header_box .cart {display:inline-block;  }
#header_wrap header .header_box .cart span {display:inline-block; width:24px; height:24px;  font-size:0; background:url('../images/icon/basket.png') no-repeat center; background-size:100%; vertical-align:top;}
#header_wrap header .header_box .cart span.cart_count {position:absolute; width:18px; height:18px; border:1px solid #fff;  top:-6px; right:-8px; display:block; padding:2px 0 1px 0; text-align:center; line-height:13px; border-radius:100%; color:#fff; background:#00B373;  vertical-align:middle; font-size:11px;}


.header_gnb {}
.header_gnb .category_side {width:100%; margin:0; display:flex; overflow: scroll; padding:0 12px 0;  }
.header_gnb .category_side::-webkit-scrollbar {display: none; }
.header_gnb .category_side > li { padding:0 10px;}
.header_gnb .category_side > li > a {white-space: nowrap; color:#222; padding:8px 0 ; font-weight: 500;}
.header_gnb .category_side > li > a.active {border-bottom:2px solid #00B373}


/*───────────────────────────────────────────────────────────

	 중앙 위치

───────────────────────────────────────────────────────────*/

.sub_top {position:relative; padding:0 45px 0 43px; background:#fff;  }
/* 좌측 이전 */
.sub_top .sub_top_left {position:absolute; top:8px; left:20px;}
.sub_top h2 {overflow:hidden; display:block; height:56px; width:100%; padding:17px 0 17px; white-space:nowrap; text-overflow:ellipsis; font-size:15px; line-height:15px; text-align:center;}
.sub_top h2 a {line-height:22px; font-size:20px; font-weight:500;}
.ly_head h2 span {line-height:22px; font-size:20px; font-weight:500; display: block; padding:17px 0; font-weight: 700; }
/* 목록가기 글쓰기 위치 */
.sub_top .sub_top_right2 {position:absolute; top:5px; right:5px;}

/*───────────────────────────────────────────────────────────

	 네비게이터

───────────────────────────────────────────────────────────*/
.navi_g { background:#f9f9f9; border-top:1px solid #dbdcde; display:none; }
.navi_g ul {padding:6px 10px 6px 10px; font-size:0;}
.navi_g ul li {display:inline-block; font-size:12px; text-indent:17px; background:url('../img/icon/icon_arrow_next.png') no-repeat 5px center; background-size:7px 11px;}
.navi_g ul li:nth-child(1) {text-indent:0; background:none;}
.navi_g ul li a {font-size:12px; text-indent:15px;}

/*───────────────────────────────────────────────────────────

	 좌측 메뉴

───────────────────────────────────────────────────────────*/
#wrap nav .bg {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,1); z-index:1001;}
#wrap nav .nav_bg_box {position:relative;}
#wrap nav .nav_bg_box .nav_box .nav_iscroll_box {position:relative; overflow: hidden; width:100%; height:100%;}
#wrap nav .nav_bg_box .nav_box .nav_iscroll_box {position:absolute; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);}




/* 다국어 선택 */
.nav_language {display:table; position:relative; width:100%; background:#f3f3f3; }
.nav_language .tit {display:table-cell; width:30%; font-size:15px; padding:13px 15px 13px 15px; color:#262626; font-weight:bold; box-sizing:border-box;}
.nav_language .language_box {display:table-cell; width:70%; box-sizing:border-box;}

/* 배너 및 로그인 & 로그아웃 */
.nav_banner {position:relative; width:100%; margin:0 auto; padding:32px 0 12px 0; text-align:center;}
.nav_banner .login_txt { font-size:20px;text-align:left;  box-sizing:border-box; padding: 0 20px; line-height:26px; height:52px; color:#222;  }
.nav_banner .login_txt p.name {padding-bottom:4px; }
.nav_banner .login_txt p.name strong {overflow:hidden; display:inline-block; text-overflow:ellipsis; white-space:nowrap;  vertical-align:middle; color:#00B373; vertical-align:top; }

.nav_banner .nav_login { text-align:left; padding:0 20px; margin-top:12px;  }
.nav_banner .nav_login ul {display:flex; gap:8px; align-items: center; }
.nav_banner .nav_login ul li { }
.nav_banner .nav_login ul li.division { width: 1px; height: 16px; background-color: #ebebeb;; }
.nav_banner .nav_login ul li:first-child {background:none;}
.nav_banner .nav_login ul li a {display:inline-block; font-size:14px; color:#888;}

.nav_banner img {width:100%;}
.nav_banner .left_logo {position:absolute; top:50px; left:20px;}
.nav_banner .left_logo img {width:112px;}

/* 중앙 링크 (장바구니, Q&A, 최근본상품) */
.nav_link {padding:10px 0 20px 0 ;}
.nav_link ul {display:flex; width:100%; justify-content: center; gap:40px;  }
.nav_link ul li { width:74px; text-align:center;}
.nav_link ul li a {display:block; padding:0 0 0 0; color:#222; font-size:16px; text-align:center; position:relative;  }
.nav_link ul li a::before {content:""; display:block; margin:0 auto 6px; width:52px; height:52px; border-radius:50%; background-color:#F7F7F7 !important;  }
.nav_link ul li:nth-child(1) a::before  {background:url('../images/common/menu_icon_1.png') no-repeat 50%/32px; }
.nav_link ul li:nth-child(2) a::before  {background:url('../images/common/menu_icon_2.png') no-repeat 50%/32px; }
.nav_link ul li:nth-child(3) a::before  {background:url('../images/common/menu_icon_3.png') no-repeat 50%/32px; }

.category_side {}

nav {display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:5001;  background:#fff; }
nav .left_close {position:absolute; top:32px; right:20px; width:24px; height:24px; background:url('../images/icon/close.png') no-repeat 0 0/100%; z-index:1002;}
nav .nav_box {position:fixed; top:0; left:0; width:100%; height:100%;  background:#fff; z-index:5001; overflow:auto; overflow-x:hidden; }
nav .nav_category {   }
nav .nav_category .nav_tabmenu_box {   }
nav .nav_category .tab_menu0 {   }
nav .nav_category .tab_menu0 .lnbWrap {  }

.lnbWrap { display:flex; }
.lnbWrap .cateList { width:145px; height:calc(100vh - 49px); position:sticky; top:49px; background:#EBEBEB; overflow:auto; }
.lnbWrap .cateList::-webkit-scrollbar {display: none; }
.lnbWrap .cateList ul.left_main_menu { }
.lnbWrap .cateList ul.left_main_menu li {  }
.lnbWrap .cateList ul.left_main_menu li a { color:#888;   display:flex; height:48px; width:100%; padding:0 10px 0 20px; align-items:center; }
.lnbWrap .cateList ul.left_main_menu li.on  { background:#fff }
.lnbWrap .cateList ul.left_main_menu li.on a { color:#222;  }
.lnbWrap .main_menu { flex:1; padding:0 20px;  height:100%; overflow:auto; padding-bottom:85vh; }
.lnbWrap .main_menu ul { }


.nav-container {border-bottom:1px solid #F7F7F7;}
.nav-container h3 button { display:flex; width:100%; min-height:48px; padding:10px 0; font-size:16px; font-weight:600;  align-items:center; text-align:left; gap:8px;  }
.nav-container h3 button::after { content:""; width:24px; height:24px; transition:.3s; margin-left:auto; background:url(../images/common/gnb_icon_close.png) no-repeat 100% 50%/24px; }
.nav-container h3 button.none::after{ background:none }
.nav-container h3.on button::after { transform:rotate(180deg) }
.nav-container h3 button img { width:24px; height:24px; overflow:hidden }
.nav-container .nav { display:none;  }
.nav-container h3.on + .nav { display:block; }
.nav-container .nav ul.nav__list { }
.nav-container .nav ul.nav__list li {  padding: 0; }
.nav-container .nav ul.nav__list li a { font-size:14px; font-weight:300; background:none;  width: 100%; height: 48px; display: flex ; flex-direction: row; align-items: center;  }
.nav-container .nav ul.nav__list li a.icon_all { background:url(../images/common/gnb_icon_plus.png) no-repeat 100% 50% /24px; }
.nav-container .nav ul.nav__list2 li a{text-indent:10px}



ul.board_cate {padding:0 20px; }
ul.board_cate li {background:url(../images/common/gnb_icon_lnk.png) no-repeat 100% 50% / 24px;  }
ul.board_cate li + li {border-top:1px solid rgba(136, 136, 136, 0.1)}
ul.board_cate li a {display:flex; padding-left:36px; height:72px; align-items:center; position:relative; background:url(../images/common/gnb_icon_set.png) no-repeat 0 50% /28px;  }
ul.board_cate li a.공지사항 {  background:url(../images/common/gnb_icon_notice.png) no-repeat 0 50% /28px;  }/* 퍼블수정 0526 */
ul.board_cate li a.qna {  background:url(../images/common/gnb_icon_qna.png) no-repeat 0 50% /28px;  }/* 퍼블수정 0526 */
ul.board_cate li a.marketing {  background:url(../images/common/gnb_icon_marketing.png) no-repeat 0 50% /28px;  }/* 퍼블수정 0526 */



/* 네비 탭메뉴 */
.nav_tabmenu_box { border-top:8px solid #F7F7F7;  }
.nav_tabmenu_box .nav_tabmenu {display:flex; position:sticky; top:0; z-index:10; background:#fff; width:100%; gap:12px; height:48px; padding:0 20px; width:100%; box-sizing:content-box; border-bottom:1px solid rgba(136, 136, 136, 0.1);  }
.nav_tabmenu_box .nav_tabmenu li { border-bottom:2px solid transparent; display:flex; align-items:center; color:#333; font-size:16px; margin-bottom:-1px;  }
.nav_tabmenu_box .nav_tabmenu li.on { border-bottom:2px solid #00B373; color:#222; font-weight:600;   }
.nav_tabmenu_box .nav_tabmenu li span { }
.nav_tabmenu_box .nav_tabmenu li:nth-child(1) span { }
.nav_tabmenu_box .nav_tabmenu li:nth-child(2) span { }

/* 게시판 */
.nav_community_box {padding-top:25px;}
.nav_community_box .comm_tit {padding:10px 0 10px 10px; margin:0 10px 0 10px; font-size:18px; color:#272727; font-weight:bold; border-bottom:1px solid #000000;}
.nav_community_box .board_cate {}
.nav_community_box .board_cate li {padding:0 25px;}
.nav_community_box .board_cate li a {display:block; padding:12px 0; font-size:16px; color:#1c1c1c;}

/* 배너 2 */
.nav_banner2 {width:274px; margin:0 auto; padding:20px 0 50px 0; }
.nav_banner2 a img {width:100%;}

#container {width: 100%; padding-bottom:80px;  }
#contents_wrap { border-top:1px solid #EBEBEB; }
.main {overflow: hidden;}

/* 메인 위젯(상단 배너·비법레시피·추천테마)의 좌우 화살표 기본 숨김.
   이 위젯들은 메인 외 페이지에도 include된다(예: board/monosolution.php).
   숨김 규칙이 main2.css에만 있으면 그 페이지에서는 Swiper 기본 파란 화살표가 그대로 노출되므로
   공용 CSS에서 기본을 숨기고, 메인 PC에서만 main2.css가 다시 표시하도록 둔다. */
.main_slide .swiper-button-prev,
.main_slide .swiper-button-next,
.recipe_list .swiper-button-prev,
.recipe_list .swiper-button-next,
.mainTheme_wrap .swiper-button-prev,
.mainTheme_wrap .swiper-button-next {display:none;}

/*───────────────────────────────────────────────────────────

	 FOOTER

───────────────────────────────────────────────────────────*/
#footer {margin:15px 0 0 0;  padding-bottom:60px;  }
/* 고객센터 / PC화면 보기 */

#footer footer .ft_sns_btn li {display:inline-block; padding:10px 5px 10px 5px;}
#footer footer .ft_sns_btn li a {display:block; width:36px;}
#footer footer .ft_sns_btn li a img {width:100%;}
/* 카피라이터 */
#footer footer .ft_copy {padding:15px 0 30px 0; color:#e0e0e0; font-size:12px; text-align:center; font-style:normal;}
/* 바로가기 */
#footer footer .shortcut {text-align:center; background:#2f2f2f;}
#footer footer .shortcut a {display:block; padding:12px 0 12px 0;}
#footer footer .shortcut a span {position:relative; display:inline-block; color:#e0e0e0; height:36px; line-height:36px; padding:0 0 0 46px; background-size:36px; background-repeat:no-repeat;}
#footer footer .shortcut a span em {color:#ff353b; font-style:normal;}
/* 탑버튼 */
#footer footer .ft_btn_top a {display:inline-block; width:100%; height:46px; border-top:1px solid #505050; border-bottom:1px solid #787878; text-align:center; color:#ffffff; background:#5d5d5d; line-height:46px; font-size:13px; font-weight:bold;}
#footer footer .ft_btn_top a span {padding:0 0 0 15px; background:url('../img/icon/icon_top_arrow.png') no-repeat 0 center; background-size:10px 6px;}
.fixed_btn_top {position:fixed; right:10px; bottom:142px; z-index:10000001; } /* 채널톡(#ch-plugin z-index:100000 !important)보다 위로 — 가려지던 문제 2026-09-07 */
.fixed_btn_top span {display:inline-block; width:42px; height:42px; background:url('../img/btn/btn_top.png') no-repeat 0 0; background-size:42px 42px; font-size:0; text-indent:-9999px;}

/* 브랜드 검색 버튼 */
.btn_nav_brand_search {position:relative; display:block; padding-left:15px; margin:8px 8px 0 8px;; height:46px; line-height:46px; color:#1c1c1c; font-size:16px; font-weight:bold; letter-spacing:-1px; border:1px solid #e6e6e6;}
.btn_nav_brand_search:after {position:absolute; top:17px; right:17px; display:inline-block; content:''; width:6.5px; height:12px; background:url('../img/icon/icon_brand_arrow.png') no-repeat 0 0; background-size:6.5px 12px;}

/* 증명 마크 로고 영역 */
.foot_certify{padding:15px 7px 0; text-align:center; background:#fff;}
.foot_certify span{display:inline-block;margin-left:-4px;}
.foot_certify span:first-child{margin-left:0;}
.foot_certify img{height:45px; margin:0 7px 15px;}



.btNavi {position: fixed; bottom:0; width:100%; left:0; z-index:1000; border-top:1px solid #D9D9D9; background-color: #fff;  }
.btNavi ul {width:100%; display:flex; }
.btNavi ul li { width:100%; padding:7px 0; }
.btNavi ul li a { display:block; padding:26px 0 0; text-align: center; background:#fff; font-size: 12px; font-weight: 400; text-align: center;  }
.btNavi ul li a.order       { background:url(../images/icon/speed-order.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li a.direct      { background:url(../images/icon/direct-delivery.png) no-repeat 50% 0 / 24px auto  }

.btNavi ul li a.home        { background:url(../images/common/gnb_home_off.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li a.side_menu   { background:url(../images/common/gnb_menu_off.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li a.location    { background:url(../images/common/gnb_location_off.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li a.mypage      { background:url(../images/common/gnb_mypage_off.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li a.search      { background:url(../images/common/gnb_search_off.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li.on a.home        { background:url(../images/common/gnb_home_on.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li.on a.side_menu   { background:url(../images/common/gnb_menu_on.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li.on a.location    { background:url(../images/common/gnb_location_on.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li.on a.mypage      { background:url(../images/common/gnb_mypage_on.png) no-repeat 50% 0 / 24px auto  }
.btNavi ul li.on a.search      { background:url(../images/common/gnb_search_on.png) no-repeat 50% 0 / 24px auto  }



.selectLayerWrap {position: fixed; width:100%;  height:0; overflow: hidden;  bottom:0; left:0; right:0; z-index: 2000;   }
.selectLayerWrap::before { content:""; position: absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.5); opacity: 0; transition: 1s;}
.selectLayerWrap .layerBody { position: absolute; bottom:0; left:50% !important; width:100% ;  max-width: 500px; transform: translateX(-50%) translateY(100px) !important;  opacity: 0; transition: .4s; background:#fff; border-radius:8px 8px 0 0;  }
.selectLayerWrap.show {top:0; left:0; bottom:0; right:0; height:100%; z-index: 2000;  }
.selectLayerWrap.show  .layerBody { opacity: 1; transform: translateX(-50%) !important; }
.selectLayerWrap.show::before { opacity: 1;}
.selectLayerWrap .layerBody .layerHead { height:56px; display:flex; justify-content: center; align-items: center; position: relative; }
.selectLayerWrap .layerBody .layerHead .close {  position: absolute; right:16px; top:16px; width:24px; height:24px; background:url(../images/icon/close.png) no-repeat 0 0/ 100% }
.selectLayerWrap .layerBody .selectItem { max-height:250px; overflow: auto; padding:0 20px 20px; }
.selectLayerWrap .layerBody .selectItem button { display:block; width:100%; margin-bottom:8px; height:48px; border:1px solid #EBEBEB;   }



.btLayer {position: fixed; width:100%; height:0; overflow: hidden;  bottom:0; right:0; z-index: 2000;   }
.btLayer::before { content:""; position: absolute; left:0; top:0; right:0; bottom:0; background: rgba(0,0,0,0.5); opacity: 0; transition: 1s;}
.btLayer .layerBody { position: absolute; display:flex; flex-direction:column; bottom:0; left:0; width:100%; transform: translateY(100px);  opacity: 0; transition: .4s; background:#fff; border-radius:8px 8px 0 0;  }
.btLayer.show {top:0; left:0; bottom:0; right:0; height:100%; z-index: 2000;  }
.btLayer.show::before { opacity: 1;}
.btLayer.show .layerBody {transform: translateY(0);  opacity: 1;}
.btLayer .layerBody .layerHead { height:56px; display:flex; justify-content: center; align-items: center; position: relative; border-bottom:1px solid #EBEBEB;  }
.btLayer .layerBody .layerHead .close {  position: absolute; right:16px; top:16px; width:24px; height:24px; background:url(../images/icon/close.png) no-repeat 0 0/ 100% }
.btLayer .layerBody .layerCont { display:block; width:100%; } /* padding:16px 20px; background:#F7F7F7;  */
.btLayer .layerBody .layerBtns { padding:12px 20px; display:flex;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 20px);
	padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
}
.btLayer .layerBody .layerBtns button { width:100%; height:48px; color:#fff; background:#00B373;  }
.btLayer .layerBody .layerBtns button:disabled { color:#AAA; background:#EBEBEB;  }
.btLayer .layerBody .layerCont .couponLayer { padding:16px 20px;  min-height:400px; max-height:500px; background:#F7F7F7;   }
.btLayer .layerBody .layerCont .couponLayer.nodata {background:#fff;   }
.btLayer .layerBody .layerCont .layerInfoBox { padding:12px 16px 12px 44px; margin-bottom:16px; border:1px solid #EBEBEB; color:#888; background: rgba(247, 247, 247, 0.50) url(../images/icon/info_b.png) no-repeat 16px 50%/20px; border-radius:4px;   }
.btLayer .layerBody .layerCont .nodata_coupon { padding:147px 0 0; background:url(../images/icon/no_coupon.png) no-repeat 50% 48px/ 91px; text-align:center; color:#CCC; font-size:20px; }

.floating_btn {position:fixed; z-index:1000; width:100%; max-width: 500px; gap:8px; padding:16px 20px; display:flex; z-index: 2000; bottom:0; left:50%; transform: translateX(-50%); background-color: #fff; }
.floating_btn li { width:100% ;}
.floating_btn button { width:100%; }

hr {display:none; }
.ly_pop {height:100%}
.ly_pop .st-container {height:100%; padding-bottom:100px; overflow: auto; padding-top: 56px; }
.ly_pop .st-container .ly_head { position: fixed; top:0; width:100%; left:0; border-bottom:1px solid #EBEBEB;  }
.ly_pop .st-container .ly_head .h_tit {font-size:20px; }
.ly_pop .st-container .close_btn { display:block;  }
.ly_pop .st-container .lys_close_btn ,
.ly_pop .st-container .lys_close1_btn { position: fixed; z-index: 10; }

.ly_pop .st-container .write_wrap .btn_box      {position:fixed; z-index:1000; width:100%; gap:8px; padding:16px 20px; display:flex; bottom:0; left:0; background-color: #fff; }
.ly_pop .st-container .write_wrap .btn_box li { width:100% ;}
.ly_pop .st-container .write_wrap .btn_box button { width:100%; }

body    {background:#F3F3F3}
#wrap { max-width: 500px; background:#fff;  }
#container  {background:#fff;}
#wrap .detail_buy ,
#wrap .btNavi ,
#wrap #header_wrap header.h_on
{  max-width: 500px;  }

.ly_pop {  max-width: 500px; width: 100%;  }
#wrap .detail_buy, #wrap .btNavi, #wrap #header_wrap header.h_on,
.toastPopup,
.ly_show ~ .ly_overlay {  max-width: 500px;  }

#layerSearchArea        { left:0% !important; margin-left:0 !important }
@media screen and (min-width: 500px) {
    #wrap ,
    .ly_show ~ .ly_overlay,
    .ly_pop { position: absolute; left:50% !important; right:auto; margin-left:-250px }
    #wrap .detail_buy ,
    #wrap .btNavi ,
    #wrap #header_wrap header.h_on
    { width:500px; left:50% !important;  margin-left:-250px;  }
    .toastPopup.show  { width:500px; left:50% !important;  margin-left:-205px   }
    nav,
    nav .nav_box { position: fixed; max-width: 500px; left:50% !important; right:auto; margin-left:-250px }
    .selectLayerWrap.show .layerBody {transform: translateX(-50%)  translateY(0) !important;  opacity: 1;}

#layerSearchArea        {max-width: 500px; left:50% !important; margin-left:-250px !important;  }

#wrap .layerWrap            { position: fixed !important; max-width: 500px; left:50%; transform: translateX(-50%);  }

}
@media screen and (min-width: 900px) {
    #wrap ,
    .ly_show ~ .ly_overlay,
    .ly_pop { position: absolute; left:50% !important; right:auto; margin-left:-434px }
    #wrap .detail_buy ,
    #wrap .btNavi ,
    #wrap #header_wrap header.h_on
    { width:500px; left:50% !important;  margin-left:-434px;  }
    .toastPopup.show  { width:500px; left:50% !important;  margin-left:-434px   }
    nav,
    nav .nav_box { position: fixed; max-width: 500px; left:50% !important; right:auto; margin-left:-434px }
    .selectLayerWrap .layerBody {margin-left:-187px}

#layerSearchArea        {max-width: 500px; left:50% !important;   }
.ly_overlay {margin-left:-250px !important; }
#wrap .ly_pop .layerWrap            { margin-left:0; }
#wrap .floating_btn     {margin-left:-184px; }
#layerDim  {margin-left:-184px; }
#wrap .cite_layer {margin-left:-184px;  }
#wrap .ly_pop .floating_btn     {margin-left:0; }
#wrap .layerWrap   {margin-left:-184px;  }


.add_cart_layer, .add_wish_layer        {margin-left:-334px !important;}
.pg_gate .pg_buy_info   {margin-left:-184px !important; }

}
.passwordWrap ~ .btn_wrap li a {margin:0;}
/*
@media screen and (min-width: 1024px) {
    .toastPopup,
    #wrap,
    .ly_show ~ .ly_overlay,
    #wrap .detail_buy, #wrap .btNavi, #wrap #header_wrap header.h_on,
    .ly_pop { position: absolute; left:50%; margin-left:-250px; }
    #wrap .detail_buy ,
    #wrap .btNavi ,
}
    */


#selectGoodsBox {border-bottom:8px solid #f7f7f7}
#selectGoodsBox .selected_goods_wrap {border-bottom: unset;}
#selectGoodsBox .selected_goods_wrap .selected_goods    {position: relative; display: block; height:116px; overflow: hidden; padding-top:14px; }
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_img      { position: absolute; top:0; width:120px; padding:16px 20px; border:0; }
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_img .goods_img  {border:0; background:#f7f7f7; }
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_info     { font-size:16px; color:#222; margin-left:120px; width: 204px; display: block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_price    {  font-size:14px; color:#222; padding-left:120px; display: block; text-align:left; }

#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_delete button img {display: none;}
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_delete {position:absolute; right:10px; top:24px; }
#selectGoodsBox .selected_goods_wrap .selected_goods .goods_item_cell.cell_delete button  {width: 24px;height:24px;background: url(../images/icon/close_g.png) no-repeat 0 0/24px;}

#selectGoodsBox .selected_goods_wrap        {background:#fff; padding:0;}

#boardContent .view_box .selected_goods_wrap   {padding:0 20px;}


#wrap .soldout_img  { font-size:0; }
#wrap .soldout_img::after           {top:50%; left:50%; font-size:16px; background:none; color:#fff; margin:-10px 0 0 -20px;}

.detail_info_box iframe  {max-width: 100%;;}

/* ==========================================================================
   2026-08 리뉴얼 공통 헤더 (DESIGN_GUIDE.md + 헤더 시안 기준) @entwiz 2026-08-07
   ========================================================================== */
/* 상단 띠배너 */
.top_notice_bar {padding:8px var(--layout-margin, 20px); background:var(--color-green-40, #00B373); text-align:center;}
.top_notice_bar p {overflow:hidden; color:var(--color-common-100, #fff); font-size:12px; font-weight:700; line-height:16px; letter-spacing:var(--letter-spacing-base, -0.006em); white-space:nowrap; text-overflow:ellipsis;}
/* 상단 띠배너 비노출 (요청 2026-09-07) — 다시 켜려면 이 한 줄만 지우면 된다.
   마크업은 outline/_main_header.html / _pc_header.html 에 그대로 남아 있다. */
.top_notice_bar {display:none;}

/* 장바구니 수량 뱃지 (v2 시안: 초록) */
#header_wrap header .header_box .cart span.cart_count {border:0; background:var(--color-green-40, #00B373);}

/* GNB 강조 (v2: 빨강 → 초록) */
.header_gnb .category_side > li > a.accent {color:var(--color-green-30, #00A369); font-weight:700;}

/* --------------------------------------------------------------------------
   반응형: 기본(모바일)에서는 PC 전용 요소 숨김
   -------------------------------------------------------------------------- */
.pc_only {display:none !important;}


/* PC 유틸바 (모바일에서는 .pc_only로 숨김) */
.header_util {background:#fff;} /* v2: 유틸바 하단 구분선 제거 */
/* 폭 기준을 로고·아이콘 줄(.header_top)과 같게 맞춘다 — 패딩까지 더해야 우측 끝이 떨어진다 */
.header_util ul {display:flex; max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:10px var(--layout-margin, 20px); justify-content:flex-end; align-items:center;}
.header_util li {display:flex; align-items:center; font-size:14px; color:var(--color-neutral-10, #333); letter-spacing:var(--letter-spacing-base, -0.006em);}
.header_util li + li::before {content:''; display:inline-block; width:1px; height:12px; margin:0 var(--space-3, 12px); background:var(--color-neutral-70, #DFDFDF);}
.header_util li a {color:var(--color-neutral-30, #707070); font-weight:500;}
.header_util li.user_name {font-weight:700;}
.header_util li .btn_logout {padding:0; border:0; background:none; color:var(--color-neutral-20, #555);} /* v2: 테두리 없는 텍스트 링크 */

/* --------------------------------------------------------------------------
   PC 레이아웃 (1024px~) — 헤더 시안 기준
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .pc_only {display:block !important;}
    .mo_only {display:none !important;}

    /* --- 모바일 웹 프레임(500px + QR 패널) 해제: PC 전환 완료 페이지(#wrap.pcReady)에서만 ---
       ※ 페이지를 PC로 전환하면 outline/_header.html 상단의 pcReady 조건에 페이지명을 추가할 것.
          미전환 페이지는 기존 모바일 프레임(500px 중앙 + QR 패널) 그대로 노출됨 */
    #wrap.pcReady {position:static !important; max-width:none !important; left:auto !important; margin-left:0 !important; background:#fff;}
    #wrap.pcReady nav, #wrap.pcReady nav .nav_box,
    #wrap.pcReady .btNavi {display:none !important;}      /* 모바일 하단 내비게이션 */
    /* 앱형 서브 헤더 바만 숨김 — .subHeader 전체를 숨기면 안 됨!
       (header/standard.html이 #container를 .subHeader 안에서 열어서 페이지 본문이 .subHeader의 자식이 됨) */
    #wrap.pcReady .subHeader > #header_wrap {display:none !important;}
    #wrap.pcReady #header_wrap header.h_on {width:100% !important; max-width:none !important; left:0 !important; margin-left:0 !important;}
    #wrap.pcReady #contents_wrap {border-top:0;} /* GNB 밑선과 이중선 방지 */
    body:has(#wrap.pcReady) {background:#fff;}
    html:has(#wrap.pcReady) {overflow-x:hidden;} /* 100vw 풀블리드(배너)로 인한 가로 스크롤 방지 */
    body:has(#wrap.pcReady) .pc_side_content {display:none !important;} /* 우측 QR 패널(#wrap 밖에 있음) */

    /* 우편번호 찾기(#layerSearch) — gd_common.js 의 gd_make_layer_popup 이 만드는 레이어.
       position:absolute + top:0 + height:문서 전체 높이라 스크롤하면 같이 밀려 올라가고
       페이지 위에 흰 박스만 남는다. PC 에서는 화면 고정 딤 + 중앙 카드로 바꾼다.
       크기·위치가 인라인 style 로 박혀 있어 !important 로 덮어야 한다. @entwiz */
    /* 딤은 내용이 들어 있을 때만 — 닫은 뒤 껍데기(#layerSearch)만 남는 경로가 있어
       그대로 두면 화면이 어두운 채 클릭도 막힌다 */
    #wrap.pcReady #layerSearch {position:fixed !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; z-index:5000 !important; background:none; pointer-events:none;}
    #wrap.pcReady #layerSearch:has(#layerSearchArea) {background:rgba(0, 0, 0, .45); pointer-events:auto;}
    #wrap.pcReady #layerSearchArea {position:fixed !important; left:50% !important; top:50% !important; transform:translate(-50%, -50%); width:500px !important; max-width:calc(100% - 40px) !important; height:600px !important; max-height:calc(100vh - 80px) !important; margin:0 !important; border-radius:var(--radius-3, 12px); box-shadow:var(--shadow-strong, 0 2px 12px rgba(0, 0, 0, .15)); overflow:hidden;}
    #wrap.pcReady #layerSearchInner {height:100% !important;}
    #wrap.pcReady #layerSearchFrame {height:100% !important;}

    /* 레이어 팝업 공통 스크롤바 — PC 팝업은 카드 안에서 스크롤되는데,
       브라우저 기본 스크롤바(회색 트랙)가 카드 오른쪽 모서리를 덮어 radius 가 각져 보인다.
       트랙을 투명하게 두면 카드 배경이 그대로 보여 모서리가 살아난다.
       ※ 팝업을 새로 PC화할 때 따로 적을 필요 없다 — .ly_pop 안이면 여기서 다 걸린다. @entwiz */
    #wrap.pcReady .ly_pop,
    #wrap.pcReady .ly_pop * {scrollbar-width:thin; scrollbar-color:var(--color-neutral-70, #DFDFDF) transparent;}
    #wrap.pcReady .ly_pop::-webkit-scrollbar,
    #wrap.pcReady .ly_pop *::-webkit-scrollbar {width:10px; height:10px;}
    #wrap.pcReady .ly_pop::-webkit-scrollbar-track,
    #wrap.pcReady .ly_pop *::-webkit-scrollbar-track {background:transparent;}
    #wrap.pcReady .ly_pop::-webkit-scrollbar-thumb,
    #wrap.pcReady .ly_pop *::-webkit-scrollbar-thumb {border:3px solid transparent; border-radius:5px; background:var(--color-neutral-70, #DFDFDF); background-clip:padding-box;}
    #wrap.pcReady .ly_pop::-webkit-scrollbar-thumb:hover,
    #wrap.pcReady .ly_pop *::-webkit-scrollbar-thumb:hover {background:var(--color-neutral-50, #AAA); background-clip:padding-box;}

    /* 레이어 팝업: 래퍼(.ly_pop)는 전체 화면 반투명 딤, 내부 카드(.layerWrap/.ly_wrap)는 중앙 모달 */
    #wrap.pcReady .ly_pop {position:fixed !important; left:0 !important; top:0 !important; right:0 !important; bottom:0 !important; transform:none !important; margin:0 !important; width:100% !important; max-width:none !important; height:100% !important; max-height:none !important; background:rgba(0, 0, 0, .45) !important; border-radius:0; overflow:hidden;}
    /* 중간 래퍼(.ly_wrap)는 투명 통과 — 카드는 .layerWrap만 */
    #wrap.pcReady .ly_pop .ly_wrap {position:static !important; transform:none !important; margin:0 !important; width:auto !important; max-width:none !important; height:auto !important; max-height:none !important; background:transparent !important; border-radius:0; box-shadow:none; overflow:visible;}
    #wrap.pcReady .ly_pop .layerWrap {position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; margin:0 !important; width:440px !important; max-width:none !important; height:auto !important; border-radius:var(--radius-3, 12px); background:var(--color-common-100, #fff) !important; box-shadow:var(--shadow-strong, 0 2px 12px rgba(0,0,0,.15));}
    #wrap.pcReady .layerWrap::before {content:none !important;} /* layerWrap 내장 딤(gd_common:555) 제거 — 딤은 ly_overlay가 담당 */
    #wrap.pcReady .layerWrap {padding:0 !important;}
    #wrap.pcReady .layerWrap .layerBody {max-width:none !important;}
    /* 저장 등 하단 버튼: 고정바 해제 → 카드 안쪽 인셋 버튼 */
    #wrap.pcReady .layerWrap .detail_prd_btn {position:static !important; left:auto !important; bottom:auto !important; transform:none !important; width:auto !important; max-width:none !important; margin:0 !important; padding:var(--space-4, 16px) var(--space-5, 20px) var(--space-5, 20px); background:transparent;}

    /* 관심 업태 설정(#popupCateSetting) — 목록 <ul> 이 'goods_list type_2' 클래스를 달고 있어서
       main2.css 의 PC 상품목록 규칙(행 72px, 아래 구분선, 썸네일 자리)이 그대로 걸린다.
       업태 목록은 상품목록이 아니므로 여기서 되돌리고 카드 목록으로 정돈한다 (2026-09-04) */
    /* 카드가 화면보다 길어지면 translate(-50%,-50%) 로도 가운데에 놓이지 못하고 위가 잘린다.
       카드 높이를 화면 안으로 묶고, 남는 높이는 목록이 가져가게 해서 항상 세로 가운데에 둔다.
       (목록의 고정 max-height 는 아래에서 none 으로 푼다) */
    #wrap.pcReady #popupCateSetting .layerWrap {display:flex; flex-direction:column; max-height:calc(100vh - 80px) !important; overflow:hidden;}
    #wrap.pcReady #popupCateSetting .layerBody {display:flex; flex-direction:column; min-height:0; flex:1;}
    #wrap.pcReady #popupCateSetting .layerBody > div:not(.layerTit) {display:flex; flex-direction:column; min-height:0; flex:1;}   /* .layerTit 도 div 라 제외하지 않으면 헤더가 세로 flex 가 돼 제목·닫기가 쌓인다 */
    #wrap.pcReady #popupCateSetting .layerTit {flex:none;}
    #wrap.pcReady #popupCateSetting .cateSettingcontTit {flex:none;}
    #wrap.pcReady #popupCateSetting .cateScrollWrap {flex:1; min-height:0;}
    #wrap.pcReady #popupCateSetting .detail_prd_btn {flex:none;}
    #wrap.pcReady #popupCateSetting .layerTit {display:flex; align-items:center; justify-content:center; height:56px; padding:0 56px; border-bottom:1px solid var(--color-neutral-80, #EBEBEB); font-size:18px; line-height:1.4; font-weight:600; color:var(--color-neutral-5, #222);}
    #wrap.pcReady #popupCateSetting .cateSettingcontTit {padding:var(--space-5, 20px) var(--space-5, 20px) var(--space-4, 16px); font-size:14px; line-height:20px; font-weight:400; color:var(--color-neutral-40, #888);}
    #wrap.pcReady #popupCateSetting .cateScrollWrap {padding:0 var(--space-5, 20px);}
    /* 목록 — 상품목록 그리드 해제 후 8px 간격 카드로 */
    #wrap.pcReady #popupCateSetting #cateSettingSelectList {display:flex; flex-direction:column; gap:var(--space-2, 8px); margin:0; padding:0 var(--space-3, 12px) 0 0; max-height:none; height:100%; overflow-y:auto;}
    #wrap.pcReady #popupCateSetting #cateSettingSelectList > li {min-height:0; margin:0; padding:0; border:1px solid var(--color-neutral-80, #EBEBEB); border-bottom:1px solid var(--color-neutral-80, #EBEBEB); border-radius:var(--radius-1, 4px); background-position:right 12px center; cursor:grab;}
    #wrap.pcReady #popupCateSetting #cateSettingSelectList > li:first-child {padding-top:0;}
    #wrap.pcReady #popupCateSetting #cateSettingSelectList > li:hover {border-color:var(--color-neutral-70, #DFDFDF); background-color:var(--color-neutral-90, #F7F7F7);}
    #wrap.pcReady #popupCateSetting #cateSettingSelectList > li a {display:flex; align-items:center; height:48px; padding:0 44px 0 var(--space-4, 16px); font-size:14px; line-height:20px; color:var(--color-neutral-10, #333); cursor:grab;}
    /* 끌어 옮기는 중 자리표시 */
    #wrap.pcReady #popupCateSetting #cateSettingSelectList > li.placeholder {border-style:dashed; background-color:var(--color-neutral-90, #F7F7F7);}
    /* 커스텀 스크롤바 — 목록 오른쪽 여백(12px) 가운데로 */
    #wrap.pcReady #popupCateSetting .cateScrollWrap .cateScrollBar {top:0; bottom:0; right:23px; width:4px; border-radius:2px;}
    #wrap.pcReady #popupCateSetting .cateScrollWrap .cateScrollThumb {border-radius:2px; background:var(--color-neutral-60, #CCC);}
    /* 저장 버튼 */
    #wrap.pcReady #popupCateSetting .detail_prd_btn {padding:var(--space-5, 20px);}
    #wrap.pcReady #popupCateSetting .detail_prd_btn ul li a {display:flex; align-items:center; justify-content:center; height:48px; border-radius:var(--radius-1, 4px); font-size:16px; line-height:24px; font-weight:600;}

    /* 옵션 선택 레이어(#popupOption)
       내부가 .layerWrap이 아니라 .layer_option 구조라 위 모달 규칙이 하나도 걸리지 않는다.
       모바일 전체화면 방식 그대로 떠서 PC에서 화면 폭을 가득 채우던 것을 중앙 카드로 바꾼다. */
    #wrap.pcReady #popupOption .layer_option {position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; width:480px !important; max-width:calc(100% - 40px) !important; max-height:calc(100vh - 80px); margin:0 !important; padding-bottom:0 !important; border-radius:var(--radius-3, 12px); background:var(--color-common-100, #fff); box-shadow:var(--shadow-strong, 0 2px 12px rgba(0, 0, 0, .15)); overflow-y:auto; overscroll-behavior:contain;}
    /* 제목과 닫기(X)가 서로 다른 요소라 세로 기준이 어긋난다 — 헤더 높이를 정해 가운데로 맞춘다 */
    #wrap.pcReady #popupOption .layer_option .ly_head {position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:center; height:56px; padding:0 56px; border-bottom:1px solid var(--color-neutral-80, #EBEBEB); background:var(--color-common-100, #fff);}
    #wrap.pcReady #popupOption .layer_option .ly_head .h_tit {margin:0; font-size:18px; line-height:1.4;}
    #wrap.pcReady #popupOption .layer_option .close_btn {top:0; right:var(--space-4, 16px); display:flex; align-items:center; height:56px;}
    /* 하단 버튼: 화면 고정 해제 → 카드 안쪽으로 */
    #wrap.pcReady #popupOption .layer_option .popup_dn,
    #wrap.pcReady #popupOption .layer_option .ly_buy_dn {position:static !important; left:auto !important; bottom:auto !important; width:auto !important; padding:0 var(--space-5, 20px) var(--space-5, 20px);}
    #wrap.pcReady #popupOption .layer_option .popup_dn .btn_box2 span {margin:0 !important;}
    /* 옵션 목록이 길어도 카드 안에서만 스크롤 */
    #wrap.pcReady #popupOption .layer_option .js_option_scroll {max-height:none; overflow:visible;}

    /* 딤(#layerDim): 화면 전체 + 반투명(뒷배경 비침) — 구 모바일 규칙(500px 기둥, 불투명 0.8) 해제 */
    #wrap.pcReady #layerDim,
    body:has(#wrap.pcReady) #layerDim {left:0 !important; top:0 !important; transform:none !important; margin:0 !important; max-width:none !important; width:100% !important; height:100% !important; background:rgba(0, 0, 0, .45) !important;}
    /* 팝업 카드/딤이 .ly_pop 밖(형제)으로 렌더되는 경우 직접 타겟팅 */
    #wrap.pcReady .layerWrap {position:fixed !important; left:50% !important; top:50% !important; right:auto !important; bottom:auto !important; transform:translate(-50%, -50%) !important; margin:0 !important; width:440px !important; max-width:none !important; height:auto !important; border-radius:var(--radius-3, 12px); background:var(--color-common-100, #fff); box-shadow:var(--shadow-strong, 0 2px 12px rgba(0,0,0,.15)); z-index:3000;}
    #wrap.pcReady .ly_overlay,
    #wrap.pcReady .ly_show ~ .ly_overlay {position:fixed !important; left:0 !important; top:0 !important; width:100% !important; height:100% !important; max-width:none !important; margin:0 !important; background:rgba(0, 0, 0, .45) !important;}

    /* 앱 전용 알림 아이콘: PC 숨김 */
    #header_wrap header .header_box .right_menu li.byAppsPartsLi {display:none !important;}

    /* 띠배너 */
    .top_notice_bar {padding:10px var(--layout-margin, 20px);}
    .top_notice_bar p {font-size:14px; line-height:20px;}

    /* 로고 / 검색 / 우측 아이콘 열 */
    #header_wrap header .header_top {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); height:auto; margin:0 auto; padding:var(--space-3, 12px) var(--layout-margin, 20px) var(--space-2, 8px); align-items:center; gap:var(--space-8, 32px);}
    #header_wrap header .header_box .h_logo a {width:220px; height:28px; background:url(../images/renew/icon/logo.svg) no-repeat 0 50% / contain;}

    /* 검색창: 시안의 라인형 박스 + 돋보기 버튼 */
    #header_wrap header .header_box ._header_search {flex:1; max-width:560px; margin:0 auto 0 0;} /* 시안: 로고 옆 배치 */
    /* v2 시안: pill형 검색창 (연회색 테두리) */
    #header_wrap header .header_box .keyword_box input {height:42px; padding-right:56px; border:1px solid var(--color-neutral-70, #DFDFDF); border-radius:21px; text-indent:24px; font-size:16px; color:var(--color-neutral-5, #222);}
    #header_wrap header .header_box .keyword_box input::placeholder {color:var(--color-neutral-50, #AAA);}
    /* 검색 버튼: PC만 입력창 안쪽 돋보기형 (모바일은 기존 초록 버튼 그대로) */
    #header_wrap header .header_box ._header_search {position:relative;}
    /* 팝업 검색 위젯(proc/_header_search.html)의 인라인 <style>이 스코프 없이
       ._header_search .layer_search_box fieldset { float:right } 를 걸어서
       PC 헤더 검색창까지 float가 먹고, 부모 높이가 무너져 돋보기가 입력창 밖으로 튀어나왔다. */
    #header_wrap header .header_box ._header_search .layer_search_box fieldset {float:none; width:100%;}
    /* 부모 높이에 흔들리지 않도록 버튼 기준을 입력창을 감싼 dd로 둔다(dd 높이 = 입력창 높이) */
    #header_wrap header .header_box ._header_search dd {position:relative;}
    #header_wrap header .header_box ._header_search .h_search_btn {position:absolute; top:50%; right:20px; left:auto; width:24px; height:24px; margin-top:-12px; padding:0; border:0; background:url(../images/icon/search.png) no-repeat center / 24px; font-size:0;}

    /* GNB 이벤트 메뉴: PC만 미노출 (모바일은 그대로) */
    .header_gnb .category_side > li.gnb_event {display:none !important;}

    /* GNB 활성: 텍스트 폭만큼 초록 밑줄 */
    .header_gnb .category_side > li > a.active {border-bottom:2px solid var(--color-green-40, #00B373); color:var(--color-neutral-5, #222); font-weight:700;}

    /* 우측 메뉴: 아이콘 + 라벨 세로형 (매장안내/마이페이지/장바구니) */
    #header_wrap header .header_box .right_menu {gap:var(--space-4, 16px);} /* v2: 아이콘 간격 축소 */
    #header_wrap header .header_box .right_menu li a {display:block; text-align:center;}
    /* v2 시안: 아이콘만 (라벨 텍스트 숨김) */
    #header_wrap header .header_box .right_menu li a > span:first-child {display:block; width:28px; height:28px; padding:0; background-repeat:no-repeat; background-position:50% 50%; background-size:28px 28px; font-size:0; line-height:0;}
    #header_wrap header .header_box .right_menu li a.store > span:first-child {background-image:url(../images/renew/icon/pin-line.svg);}
    #header_wrap header .header_box .right_menu li a.mypage > span:first-child {background-image:url(../images/renew/icon/person-line.svg);}
    /* 장바구니만 예전 png 를 쓰고 있어 옆 아이콘들과 색이 달랐다 → 시안 SVG 로 교체.
       (지급 파일에는 초록 배지·숫자가 함께 들어 있는데, 숫자는 .cart_count 가 그리므로 바구니만 뺐다) */
    #header_wrap header .header_box .right_menu li a.cart > span:first-child {background-image:url(../images/renew/icon/basket-header.svg); background-size:24px 24px;}
    #header_wrap header .header_box .cart span.cart_count {top:-7px; right:-9px; left:auto;}

    /* GNB */
    .header_gnb {border-top:0; border-bottom:1px solid var(--color-neutral-80, #EBEBEB);} /* v2: 상단 구분선 제거 */
    /* GNB 메뉴와 아래 메가메뉴 열이 같은 규격을 써야 세로로 정확히 맞는다.
       한 곳에서만 값을 바꾸면 양쪽이 함께 움직이도록 변수로 뺀다.
       (1열은 '초밥/주먹밥/볶음밥' 같은 긴 카테고리명이 잘리지 않도록 더 넓게) */
    /* GNB는 글자 폭 + 일정 간격으로 좁게 둔다(시안).
       드롭다운 열 폭은 별도 값 — 긴 카테고리명이 잘리지 않을 만큼 필요해서 메뉴 간격과 같이 갈 수 없다.
       그래서 '카테고리' 메뉴 시작점에만 패널 왼쪽을 맞춘다.
       ※ 피그마 가이드 수치 수령 시 아래 두 줄만 교체 */
    .header_gnb {--gnb-gap:16px; --gnb-cols-panel:220px 200px 200px; --gnb-panel-gap:40px;}
    .header_gnb .category_side {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:0 var(--layout-margin, 20px); overflow:visible; display:flex; gap:var(--gnb-gap); justify-content:flex-start; align-items:flex-end;}
    .header_gnb .category_side > li {flex:none; padding:0;}
    /* 열 전체가 아니라 글자 폭만큼만 밑줄이 그려지도록 */
    .header_gnb .category_side > li > a {display:inline-block;}
    /* 시안: 기본 medium, 활성만 bold
       활성 밑줄(2px)이 GNB 회색 구분선 위에 정확히 얹히도록:
       - ul/li에는 하단 패딩을 두지 않고 a의 padding-bottom만으로 글자↔선 간격을 만든다
       - align-items:flex-end 로 모든 항목의 밑단을 회색선에 맞춘다 */
    .header_gnb .category_side {align-items:flex-end; padding-bottom:0;}
    .header_gnb .category_side > li {padding-bottom:0;}
    /* 비활성 항목에도 같은 두께의 투명 밑줄을 둬야 활성 항목만 2px 위로 뜨지 않는다 */
    .header_gnb .category_side > li > a {display:block; padding:14px 0 8px; border-bottom:2px solid transparent; font-size:16px; font-weight:500;}
    /* 메뉴끼리는 16px, '카테고리' 다음만 32px (시안) — gap 16 + 여기 16 */
    .header_gnb .category_side > li.gnb_all {position:relative; padding-left:0; margin-right:var(--space-4, 16px); border-right:0;}
    /* 햄버거 아이콘은 배경이라 '패딩 박스' 기준으로 세로 중앙(50%)에 놓이는데,
       a의 위/아래 패딩이 14px / 8px로 달라 글자 중심보다 (14-8)/2 = 3px 위에 뜬다.
       그 차이만큼 내려서 글자와 중심을 맞춘다. */
    .header_gnb .category_side > li.gnb_all > a {padding-left:32px; background:url(../images/renew/icon/menu-line.svg) no-repeat 0 calc(50% + 3px) / 24px auto; font-weight:500;}

    /* 전체 카테고리: GNB 아래 풀폭 메가메뉴 (호버) */
    .header_gnb {position:relative;}
    .header_gnb .category_side > li.gnb_all {position:static;}
    /* 레이어 자체는 위치만 잡고 배경을 두지 않는다 — 흰 띠가 화면을 가로질러 메인 배너를 덮지 않도록 */
    .header_gnb .gnb_cate_layer {display:none; position:absolute; left:0; right:0; top:100%; z-index:1200;}
    .header_gnb .gnb_cate_inner {max-width:calc(var(--layout-max, 1280px) + var(--layout-margin, 20px) * 2); margin:0 auto; padding:0 var(--layout-margin, 20px);}
    .header_gnb .category_side > li.gnb_all:hover .gnb_cate_layer,
    .header_gnb .category_side > li.gnb_all.open .gnb_cate_layer {display:block;} /* 호버 + 클릭 토글 겸용 */
    /* 메가메뉴 내부: 1뎁스 5열 그리드 + 2뎁스 아코디언(기본 접힘)
       multi-column(columns:5)을 쓰면 하나를 펼칠 때 나머지 그룹이 컬럼 사이로 재배치되며 좌우로 튄다.
       grid는 각 그룹이 제자리를 지키므로 아코디언에 적합하다. */
    /* GNB 메뉴별 5열 — 카테고리 / 특가상품 / 베스트 / 신상품 / 장사특강 순서로 위 메뉴와 맞춘다.
       목록 클래스는 gnb_cate_list (category_side를 쓰면 gd_ui.js의 클릭 핸들러에 걸려 아코디언이 망가진다) */
    /* 내용 폭만큼만 차지하는 흰 패널 (inline-grid). 열 규격은 GNB와 같은 값의 앞 3개만 쓴다 */
    .header_gnb .gnb_cate_layer .gnb_cate_cols {display:inline-grid; grid-template-columns:var(--gnb-cols-panel); column-gap:var(--gnb-panel-gap, 40px); align-items:start; max-width:100%; padding:var(--space-6, 24px) var(--space-6, 24px) var(--space-8, 32px); border:1px solid var(--color-neutral-80, #EBEBEB); border-radius:0 0 var(--radius-3, 12px) var(--radius-3, 12px); background:var(--color-common-100, #fff); box-shadow:0 12px 16px -8px rgba(0, 0, 0, .12); max-height:70vh; overflow-y:auto;}
    .header_gnb .gnb_cate_layer .gnb_cate_list {display:block; width:auto; padding:0; overflow:visible;}
    .header_gnb .gnb_cate_layer .cate_group {display:block; padding:0; margin:0;}
    /* 카테고리 구분선 자리 — 관리자에서 '구분' 항목으로 등록된 행은 여백으로만 표시 */
    .header_gnb .gnb_cate_layer .cate_division {height:var(--space-5, 20px); padding:0; border:0; list-style:none;}
    .header_gnb .gnb_cate_layer a {text-decoration:none;}
    /* 1뎁스: 클릭하면 하위가 펼쳐진다(우측 화살표로 상태 표시) */
    .header_gnb .gnb_cate_layer .cate1 {position:relative; display:block; padding:var(--space-2, 8px) var(--space-6, 24px) var(--space-2, 8px) var(--space-2, 8px); border:0; border-radius:var(--radius-1, 4px); font-size:14px; line-height:20px; font-weight:700; color:var(--color-neutral-5, #222); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;}
    .header_gnb .gnb_cate_layer .cate1::before {content:''; display:inline-block; width:4px; height:14px; margin-right:var(--space-2, 8px); border-radius:2px; background:var(--color-green-40, #00B373); vertical-align:-2px;} /* 그룹 포인트 바 */
    .header_gnb .gnb_cate_layer .cate1::after {content:''; position:absolute; right:var(--space-1, 4px); top:50%; width:20px; height:20px; margin-top:-10px; background:url(../images/renew/icon/chevron-up-gray.svg) no-repeat 50% 50% / 20px auto; transform:rotate(180deg); transition:transform .2s;}
    .header_gnb .gnb_cate_layer .cate_group.open > .cate1::after {transform:none;}
    .header_gnb .gnb_cate_layer .cate1:hover {background:var(--color-neutral-90, #F7F7F7); color:var(--color-green-20, #007F52);}
    /* 하위가 없는 그룹은 화살표를 빼고 링크 그대로 동작시킨다 */
    .header_gnb .gnb_cate_layer .cate_group:not(:has(.cate2)) > .cate1::after {display:none;}
    /* proc.css의 하위 목록 숨김은 .cate2를 이미 제외하고 있어, 여기서는 border만 정리한다 */
    .header_gnb .gnb_cate_layer .gnb_cate_list > li ul {border-top:0 !important;}
    .header_gnb .gnb_cate_layer .cate2 {display:none; border-top:0; margin:var(--space-1, 4px) 0 var(--space-3, 12px);}
    .header_gnb .gnb_cate_layer .cate_group.open > .cate2 {display:block;}
    .header_gnb .gnb_cate_layer .cate2 li {padding:0;}
    .header_gnb .gnb_cate_layer .cate2 li a {display:block; padding:4px var(--space-2, 8px) 4px var(--space-5, 20px); border:0; border-radius:var(--radius-1, 4px); font-size:13px; line-height:18px; font-weight:400; color:var(--color-neutral-30, #707070); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
    .header_gnb .gnb_cate_layer .cate2 li a:hover {background:var(--color-green-90, #E6F7F1); color:var(--color-green-20, #007F52); font-weight:500;}
    /* 대분류 전체 보기 — 하위 항목과 구분되게 한 단계 진하게 */
    .header_gnb .gnb_cate_layer .cate2 li.cate_all a {font-weight:500; color:var(--color-neutral-20, #555);}
    .header_gnb .gnb_cate_layer img {display:none;} /* 카테고리명에 섞인 이미지 제거(텍스트 전용) */

    /* 메가메뉴 스크롤바 (주의: scrollbar-width 표준 속성을 함께 쓰면 크로미움이 아래 웹킷 커스텀을 무시함)
       투명 보더 + background-clip으로 모서리와 4px 띄운 효과 */
    .header_gnb .gnb_cate_layer::-webkit-scrollbar {width:14px;}
    .header_gnb .gnb_cate_layer::-webkit-scrollbar-thumb {border:4px solid transparent; border-radius:8px; background-color:var(--color-neutral-60, #CCC); background-clip:padding-box;}
    .header_gnb .gnb_cate_layer::-webkit-scrollbar-thumb:hover {background-color:var(--color-neutral-40, #888);}
    .header_gnb .gnb_cate_layer::-webkit-scrollbar-track {background:transparent;}
    .header_gnb .gnb_cate_layer::-webkit-scrollbar-button {display:none; width:0; height:0;} /* ▲▼ 버튼 숨김 */

    /* 헤더 우측 아이콘 줄바꿈 방지 */
    #header_wrap header .header_box .right_menu {flex-wrap:nowrap; align-items:flex-start;}

    /* --------------------------------------------------------------------
       PC 푸터 (v2 시안) — 전체 폭 세로 스택 / 사업자 정보는 한 줄 펼침(아코디언 해제)
       -------------------------------------------------------------------- */
    #wrap.pcReady #footer {display:block; padding:var(--space-12, 48px) max(var(--layout-margin, 20px), calc((100% - var(--layout-max, 1280px)) / 2)) 64px; background:var(--color-neutral-90, #F7F7F7);}

    /* 1) 고객센터 + 운영시간 */
    #wrap.pcReady #footer .customer {padding-bottom:var(--space-5, 20px); border-bottom:1px solid rgba(136, 136, 136, .15);}
    #wrap.pcReady #footer .customer a.tel {font-size:20px; line-height:26px; font-weight:700; color:var(--color-neutral-5, #222);}
    #wrap.pcReady #footer .customer ul {display:flex; flex-wrap:wrap; gap:var(--space-8, 32px); margin-top:var(--space-2, 8px);}
    #wrap.pcReady #footer .customer ul li {width:auto; font-size:14px; line-height:20px; color:var(--color-neutral-20, #555);}

    /* 2) 약관/링크 */
    #wrap.pcReady #footer ul.ft_menu {gap:var(--space-6, 24px); padding:var(--space-4, 16px) 0; border-bottom:1px solid rgba(136, 136, 136, .15);}
    #wrap.pcReady #footer ul.ft_menu li.long {width:auto;}
    #wrap.pcReady #footer ul.ft_menu li a {font-size:14px; line-height:20px; color:var(--color-neutral-20, #555);}

    /* 3) 사업자 정보: 토글 숨기고 항상 펼침 + 표를 한 줄 인라인으로 */
    #wrap.pcReady #footer .ft_info {padding-top:var(--space-5, 20px);}
    #wrap.pcReady #footer .ft_info .tit_toggle {padding:0 0 var(--space-2, 8px);}
    #wrap.pcReady #footer .ft_info .tit_toggle strong {font-size:14px; line-height:20px; font-weight:700; color:var(--color-neutral-5, #222);}
    #wrap.pcReady #footer .ft_info .tit_toggle button.ft_btn {display:none;}
    #wrap.pcReady #footer .ft_info .ft_toggle,
    #wrap.pcReady #footer .ft_info .ft_toggle.show {display:block; padding:0; border-radius:0; background:none;}
    #wrap.pcReady #footer .ft_info .ft_toggle table,
    #wrap.pcReady #footer .ft_info .ft_toggle tbody,
    #wrap.pcReady #footer .ft_info .ft_toggle tr,
    #wrap.pcReady #footer .ft_info .ft_toggle th,
    #wrap.pcReady #footer .ft_info .ft_toggle td {display:inline; width:auto; padding:0; font-size:12px; line-height:20px; color:var(--color-neutral-40, #888); font-weight:400;}
    #wrap.pcReady #footer .ft_info .ft_toggle th::after {content:' : ';}
    #wrap.pcReady #footer .ft_info .ft_toggle tr + tr::before {content:' l '; color:var(--color-neutral-60, #CCC);}

    /* 4) 안내문 / 카피 */
    #wrap.pcReady #footer .ft_guide {padding-top:var(--space-1, 4px); font-size:12px; line-height:20px;}
    #wrap.pcReady #footer .copy {margin-top:var(--space-4, 16px);}
    #wrap.pcReady #footer .copy .ft_logo {padding:0 0 var(--space-1, 4px);}
    #wrap.pcReady #footer .copy .ft_logo img {width:120px;}
    #wrap.pcReady #footer .copy p {font-size:11px; color:var(--color-neutral-60, #CCC);}
}
/* ==========================================================================
   PC 브레드크럼 (1024px~) — 상품목록 / 장바구니 / 주문서 / 주문완료
   모바일에는 없는 요소라 pc_only 로 두고 PC에서만 보인다.
   ========================================================================== */
.pc_breadcrumb {display:none;}

@media (min-width: 1024px) {
    /* 시안 2026-09-01: 위아래 16px / 14px medium / 기본색 neutral-20 / 아이콘 간격 2px */
    #wrap.pcReady .pc_breadcrumb {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:2px; grid-column:1 / -1; margin:var(--space-4, 16px) 0; font-size:14px; line-height:20px; font-weight:500; color:var(--color-neutral-20, #555); letter-spacing:var(--letter-spacing-base, -0.006em);}
    #wrap.pcReady .pc_breadcrumb li {display:flex; align-items:center; gap:2px;}
    /* 구분 기호는 항목 사이에만 — 시안 지급 아이콘 */
    #wrap.pcReady .pc_breadcrumb li + li::before {content:''; flex:none; width:20px; height:20px; background:url(../images/renew/icon/chevron-right-breadcrumb.svg) no-repeat 50% 50% / 20px auto;}
    #wrap.pcReady .pc_breadcrumb a {color:var(--color-neutral-20, #555);}
    #wrap.pcReady .pc_breadcrumb a:hover {color:var(--color-neutral-20, #555); text-decoration:underline;}
    #wrap.pcReady .pc_breadcrumb .on {font-weight:500; color:var(--color-neutral-5, #222);}
}

/* ==========================================================================
   PC 우측 홍보 패널(.pc_side_content) 비노출 + 모바일 기둥 가운데 정렬
   ==========================================================================
   기본 스킨은 900px 이상에서 우측에 288px 패널(gd_common.css:637)을 띄우려고
   모바일 기둥(500px)을 왼쪽으로 184px 밀어 둔다(위 @media 900px 의 -434px = -250 - 184).
   패널을 숨기기로 했으므로(요청 2026-09-07) 그 이동을 전부 되돌려 화면 가운데에 세운다.
   ※ pcReady 페이지(반응형 PC)는 애초에 500px 기둥을 쓰지 않아 이 블록과 무관하다.
   ========================================================================== */
@media screen and (min-width: 900px) {
    .pc_side_content {display:none !important;}

    /* -434px → -250px : 500px 기둥을 화면 한가운데로 */
    #wrap,
    .ly_show ~ .ly_overlay,
    .ly_pop {margin-left:-250px;}
    #wrap .detail_buy,
    #wrap .btNavi,
    #wrap #header_wrap header.h_on {margin-left:-250px;}
    .toastPopup.show {margin-left:-250px;}
    nav,
    nav .nav_box {margin-left:-250px;}

    /* 위 이동에 맞춰 함께 밀어 둔 것들(-184px 계열) — 기둥이 제자리로 왔으므로 0 */
    #wrap .floating_btn,
    #layerDim,
    #wrap .cite_layer,
    #wrap .layerWrap,
    .pg_gate .pg_buy_info {margin-left:0 !important;}
    .selectLayerWrap .layerBody {margin-left:0;}
    .add_cart_layer,
    .add_wish_layer {margin-left:-150px !important;}   /* -334 = -184 - 150 */
    .member_only_tooltip {margin-left:-59px;}          /* -243 = -184 - 59 */
}

/* ==========================================================================
   회원전용 안내 — 옵션선택 팝업(#popupOption) 안
   ==========================================================================
   기본 스타일(.member_only_box / .member_only_tooltip)은 css/goods/goods.css:511~ 에만 있고
   그 파일은 상품 관련 페이지에서만 로드된다. 이 팝업은 메인·목록에서도 열리므로
   거기서는 스타일이 하나도 안 붙어 글자만 남는다(2026-09-07 겪음).
   → 팝업 스코프로 여기(어느 페이지에서나 로드되는 gd_layout.css)에 다시 정의한다.
   ※ 같은 이유로 view_pc.css 에는 두지 말 것 — 상품상세에서만 로드된다.

   말풍선은 PC·모바일 모두 [?] 버튼 바로 위에 붙인다.
   goods.css 원본은 화면 우하단 fixed(모바일 하단 고정버튼 기준)라, 팝업 안에서는
   엉뚱한 자리에 떠서 팝업 제목을 덮는다.
   ========================================================================== */
#popupOption .member_only_box {position:relative; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:16px 10px 0;}   /* 제목줄과 붙지 않게 위 여백 */
#popupOption .member_only_box .btn_member_only {flex:1; height:48px; border:0; border-radius:4px; background:#EBEBEB;}
#popupOption .member_only_box .btn_member_only span {display:inline-flex; align-items:center; justify-content:center; padding-left:26px; background:url('../images/common/ico_lock.svg') left center no-repeat; color:#AAA; font-size:16px; font-weight:600;}
#popupOption .member_only_box .btn_help {flex:none; width:40px; height:40px; border:0; background:url('../images/common/ico_help.svg') center no-repeat; font-size:0; cursor:pointer;}

/* [?] 버튼 위로 열린다 — 아래는 팝업 바닥이라 자리가 없다 */
#popupOption .member_only_tooltip {display:none; position:absolute; left:auto !important; right:0; top:auto; bottom:calc(100% + 10px); width:280px; max-width:calc(100vw - 40px); margin:0 !important; padding:16px 24px; border-radius:4px; background:#fff; box-shadow:-2px 2px 6px 0 rgba(0,0,0,.10), 2px 2px 6px 0 rgba(0,0,0,.10), 0 2px 12px 0 rgba(0,0,0,.10); text-align:center; z-index:1002;}
#popupOption .member_only_tooltip.on {display:block;}
#popupOption .member_only_tooltip .arrow {position:absolute; right:14px; top:auto; bottom:-6px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #fff; border-bottom:0;}
#popupOption .member_only_tooltip .arrow::before {content:''; position:absolute; left:-5px; top:auto; bottom:-3px; z-index:-1; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:8px solid rgba(0,0,0,.15); border-bottom:0;}
#popupOption .member_only_tooltip .btn_close {position:absolute; right:16px; top:16px; width:24px; height:24px; border:0; background:url('../images/common/ico_close.svg') center no-repeat; text-indent:-9999em; cursor:pointer;}
#popupOption .member_only_tooltip h3 {display:block; color:#222; font-size:16px; font-weight:700; line-height:150%;}
#popupOption .member_only_tooltip p {color:#222; font-size:14px; font-weight:400; line-height:150%;}
#popupOption .member_only_tooltip .btn_login {display:flex; align-items:center; justify-content:center; height:40px; margin:8px 0; border-radius:4px; background:#00B373; color:#fff; font-size:16px; font-weight:600;}
#popupOption .member_only_tooltip .join {color:#222; font-size:12px; font-weight:500; line-height:22px;}
#popupOption .member_only_tooltip .join a {margin-left:2px; color:#888; font-size:13px; font-weight:600; line-height:22px;}

/* 말풍선이 카드 위로 나가는데 팝업이 overflow 를 잘라 낸다.
   회원전용 상품은 고를 옵션이 없어 스크롤이 필요 없으므로 그때만 넘침을 허용한다. */
#popupOption .layer_option:has(.member_only_box) {overflow:visible;}

@media (min-width: 1024px) {
    #wrap.pcReady #popupOption .member_only_box {gap:var(--space-2, 8px); padding:var(--space-5, 20px) 0 0;}
    #wrap.pcReady #popupOption .member_only_box .btn_member_only {height:56px; cursor:default;}
    #wrap.pcReady #popupOption .layer_option:has(.member_only_box) {overflow:visible;}
}

/* 말풍선이 시트 위쪽으로 나가는데, 형제 요소(제목줄·옵션 영역)가 뒤에 그려져 아랫부분을 덮는다
   → 버튼 영역 자체를 위로 올려 그 안의 말풍선까지 함께 앞에 오게 한다. (모바일 2026-09-07) */
#popupOption .ly_buy_dn {z-index:20;}   /* position 은 건드리지 말 것 — 모바일에서 .popup_dn 이 fixed(bottom:0) 라 relative 로 덮으면 흐름에 들어가 아래 여백이 생긴다. 제목줄 .ly_head 가 z-index:10(gd_common.css:24) 이라 그보다 높여야 말풍선이 안 가린다. */

/* overflow:visible 로 바꾸면서 카드 위쪽 라운드가 사라진다 —
   sticky 제목줄의 흰 배경이 잘리지 않고 네모 모서리 그대로 덮기 때문. 제목줄에도 같은 라운드를 준다. */
@media (min-width: 1024px) {
    #wrap.pcReady #popupOption .layer_option .ly_head {border-radius:var(--radius-3, 12px) var(--radius-3, 12px) 0 0;}
}