/* 메인 */ #contents {width:100% !important;max-width:100% !important;} #container #contents .xans-layout-mobileaction {display:none !important;} #container #contents > .section {max-width:1680px;} /* 스마트배너 */ .xans-smart-banner-admin {margin:0 auto 120px;} /* 메인 타이틀 */ .main_title {display:flex;flex-shrink:0;align-items:flex-end;} .main_title .main_title_txt01 {font-size:32px;font-weight:700;line-height:1;color:#111;} .main_title .main_title_txt02 {margin-left:20px;font-size:18px;font-weight:400;line-height:1;color:#999;} .main_title.ez-align-left {text-align:left;justify-content:flex-start;} .main_title.ez-align-center {text-align:center;justify-content:center;} .main_title.ez-align-right {text-align:right;justify-content:flex-end;} /* 메인 상품진열 */ .main_product_list {max-width:1680px !important;width:92%;margin:0 auto 120px;padding:0;} .main_product_list .main_title {margin-bottom:50px;} /* 이미지&텍스트갤러리 */ .main_image_text_gallery {max-width:1680px !important;width:92%;margin:0 auto 120px;padding:0;} .main_image_text_gallery .main_title {margin-bottom:50px;} .main_image_text_gallery .main_3dan_banner ul {display:flex;justify-content:flex-start;flex-wrap:wrap;margin:0 -10px;} .main_image_text_gallery .main_3dan_banner ul li {margin:0 0 30px;flex:1;max-width:566px;box-sizing:border-box;padding:0 10px;} .main_image_text_gallery .main_3dan_banner ul.ez-column-1 {flex-direction:column;align-items:center;} .main_image_text_gallery .main_3dan_banner ul.ez-column-2 {width:calc(66.66% + 13px);margin:0 auto;} .main_image_text_gallery .main_3dan_banner ul.ez-column-2 li {flex:0 1 50%;} .main_image_text_gallery .main_3dan_banner ul.ez-column-3 li {flex:0 1 33.3334%;} .main_image_text_gallery .main_3dan_banner ul.ez-column-4 li {flex:0 1 25%;} .main_image_text_gallery .main_3dan_banner ul.ez-column-5 li {flex:0 1 20%;} .main_image_text_gallery .main_3dan_banner .main_image_text_gallery_more {display:none;} .main_image_text_gallery .main_3dan_banner ul li a {font-size:0;display:block;position:relative;text-align:center;} .main_image_text_gallery .main_3dan_banner ul li a picture {overflow:hidden;width:100%;height:100%;font-size:0;position:relative;} .main_image_text_gallery .main_3dan_banner ul li a picture [data-ez-image='removed'] {width:100%;height:100%;object-fit:none;background-color:rgb(244, 245, 248);aspect-ratio:546/348;} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt {width:100%;margin-top:30px;text-align:left;} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt .main_3dan_banner_txt01 {font-size:32px;font-weight:700;line-height:1;color:#1a1a1a;} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt .main_banner_more {font-size:16px;font-weight:400;line-height:1.5;color:#1a1a1a;margin-top:15px;} .main_image_text_gallery .main_3dan_banner ul li a:hover .main_3dan_banner_txt .main_banner_more {text-decoration:underline;color:#333;} /* 메인 텍스트배너 */ .main_text {max-width:1680px !important;width:92%;margin:0 auto 120px;padding:0;background:#7f7f7f;} .main_text .main_title_inner {width:100%;} .main_text .main_title_inner .main_long_banner_txt {padding:37px 2%;} .main_text .main_title_inner .main_long_banner_txt .main_title_txt01 {font-size:24px;font-weight:500;color:#fff;line-height:1;margin-bottom:25px;} .main_text .main_title_inner .main_long_banner_txt .main_title_txt02 {font-size:16px;font-weight:300;color:#fff;line-height:1.5;} .main_text .main_text_link a {display:inline-block;font-size:15px;font-weight:300;line-height:1;padding:0 0 5px 0;margin-top:30px;border-bottom:1px solid #fff;color:#fff;} .main_text.ez-align-left {align-items:start;text-align:left;} .main_text.ez-align-center {align-items:center;text-align:center;} .main_text.ez-align-right {align-items:end;text-align:right;} .main_text.ez-textsize-large .main_long_banner_txt .main_title_txt01 {font-size:30px;} .main_text.ez-textsize-large .main_long_banner_txt .main_title_txt02 {font-size:20px;} .main_text.ez-textsize-large .main_text_link a {font-size:16px;} .main_text.ez-textsize-small .main_long_banner_txt .main_title_txt01 {font-size:22px;} .main_text.ez-textsize-small .main_long_banner_txt .main_title_txt02 {font-size:14px;} .main_text.ez-textsize-small .main_text_link a {font-size:12px;} /* 메인상품분류 슬라이드 상품진열 */ .main_product_slide {position:relative;max-width:1680px !important;width:92%;margin:0 auto 120px;padding:0;} .main_product_slide .main_title {margin-bottom:50px;} .main_product_slide .inner {width:100%; background-color: #7f7f7f;} .main_product_slide .swiper-container.special_slide {padding:0 0 50px 0;} .main_product_slide .swiper-container.special_slide .swiper-scrollbar {height:2px;left:0;width:100%;transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;} .main_product_slide .swiper-container.special_slide .swiper-scrollbar:hover {height:5px;} .main_product_slide .swiper-container.special_slide .swiper-scrollbar .swiper-scrollbar-drag {background:#1a1a1a;cursor:pointer;border-radius:0;} .main_product_slide .swiper-prev-special, .main_product_slide .swiper-next-special {width:50px;height:50px;top:36%;position:absolute;z-index:2;margin:0;cursor:pointer;} .main_product_slide .swiper-prev-special {background:url("/SkinImg/img/slide_ar_l.svg") no-repeat center; background-size:50px; left:-70px;} .main_product_slide .swiper-next-special {background:url("/SkinImg/img/slide_ar_r.svg") no-repeat center; background-size:50px; right:-70px;} .main_product_slide.section_full .swiper-prev-special {left:1%;} .main_product_slide.section_full .swiper-next-special {right:1%;} /* 메인 비디오배너 */ .main_video {width:100% !important;max-width:100% !important;position:relative;margin:0 auto 120px;padding:0;} .main_video .background_video {position:absolute;top:auto;bottom:0;right:0;z-index:-1;width:100%;height:60%;background-color:#7f7f7f;} .main_video .main_video_title {padding:50px 0 60px;max-width:1680px !important;width:92%;margin:0 auto;} .main_video .main_video_title .main_title_txt01 {font-size:48px;font-weight:700;color:#fff;line-height:1.5;text-align:center;position:relative;height:100%;word-break:keep-all;} .main_video .main_video_title .main_title_txt02 {font-size:20px;font-weight:300;color:#fff;line-height:1.8;text-align:center;position:relative;margin-top:10px;word-break:keep-all;} .main_video .main_video_box {position:relative;width:40%;padding-bottom:22.5%;height:0;overflow:hidden;max-width:100%;margin:0 auto;} .main_video .main_video_box iframe, .main_video .main_video_box object, .main_video .main_video_box embed {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;} .main_video.ez-align-left .main_video_title .main_title_txt01, .main_video.ez-align-left .main_video_title .main_title_txt02 {text-align:left;} .main_video.ez-align-right .main_video_title .main_title_txt01, .main_video.ez-align-right .main_video_title .main_title_txt02 {text-align:right;} /* 메인 탭상품 상품진열 */ .main_product_category {max-width:1680px !important;width:92%;margin:0 auto 120px;padding:0;} .main_product_category .main_title {flex:1 1 auto;} .main_product_category .main_product_inner {display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:50px;} .main_product_category .main_product_inner .main_product_tab {display:flex;} .main_product_category .main_product_inner .main_product_tab li {margin-left:25px;} .main_product_category .main_product_inner .main_product_tab li .button {font-size:16px;line-height:1;font-weight:400;color:#a3a3a3;white-space:nowrap;} .main_product_category .main_product_inner .main_product_tab li .button:after {content: "";position:relative;display:block;top:7px;width:100%;height:1px; background-color: #000;-webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0);-webkit-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0;-webkit-transition: -webkit-transform .3s cubic-bezier(.45,.46,.05,.96);-o-transition: transform .3s cubic-bezier(.45,.46,.05,.96);transition: transform .3s cubic-bezier(.45,.46,.05,.96);transition: transform .3s cubic-bezier(.45,.46,.05,.96),-webkit-transform .3s cubic-bezier(.45,.46,.05,.96);} .main_product_category .main_product_inner .main_product_tab li .button.active:after {-webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1);-webkit-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0;-webkit-transition: -webkit-transform .5s cubic-bezier(.45,.46,.05,.96);-o-transition: transform .5s cubic-bezier(.45,.46,.05,.96);transition: transform .5s cubic-bezier(.45,.46,.05,.96);transition: transform .5s cubic-bezier(.45,.46,.05,.96),-webkit-transform .5s cubic-bezier(.45,.46,.05,.96);} .main_product_category .main_product_inner .main_product_tab li .button.active {color:#1a1a1a;} .main_product_category .main_product_inner.ez-align-left .main_title {text-align:left;justify-content:flex-start;} .main_product_category .main_product_inner.ez-align-center .main_title {text-align:center;justify-content:center;} .main_product_category .main_product_inner.ez-align-right .main_title {text-align:right;justify-content:flex-end;} .main_product_category .tabcontent {display:none;} .main_product_category .tabcontent.active {display:block;} /* 메인 지도 */ .main_map {max-width:100% !important;width:100% !important;height:100%;padding:0;background-color:#7f7f7f;margin:0 auto 120px;} .main_map .main_map_banner {display:flex;justify-content:space-between;align-items:center;width:92%;max-width:1680px;margin:0 auto;position:relative;} .main_map.section_full .main_map_banner {max-width:100% !important;width:100% !important;} .main_map .main_map_banner picture {overflow:hidden;max-width:700px;width:100%;height:100%;font-size:0;position:relative;} .main_map .main_map_banner picture [data-ez-image='removed'] {width:100%;height:100%;object-fit:none;background-color:rgb(244, 245, 248);aspect-ratio:700/430;} .main_map .main_map_banner .main_map_box{width:42%;height:100%;max-width:700px;position:relative;text-align:center;} .main_map .main_map_banner .main_map_box .main_map_banner_txt01 {bottom:25%;left:4%;font-size:48px;font-weight:700;line-height:1;color:#fff;letter-spacing:1.5px;position: absolute;z-index:2;} .main_map .main_map_banner .main_map_box .main_long_banner_link {position:absolute;bottom:0px;background-color:#fff;} .main_map .main_map_banner .main_map_box .main_long_banner_link a {font-size:20px;font-weight:700;line-height:1;color:#1a1a1a;padding:22px 30px 22px 37px;display:flex;align-items:center;transition:all 0.3s;-webkit-transition:all 0.3s;-o-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;} .main_map .main_map_banner .main_map_box .main_long_banner_link a i {font-weight:400;margin-left:60px;font-style:normal;} .main_map .main_map_banner .main_map_banner_txt_box {padding:5% 0 5% 0;width:50%;height:100%;word-break:keep-all; display:flex;align-items:flex-start;flex-direction:column;justify-content:space-between;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-size:18px;color:#e8e8e8;} .main_map .main_map_banner .main_map_box .main_long_banner_link a:hover {background-color:#1a1a1a;color:#fff;} .main_map .main_map_banner .main_map_box .main_long_banner_link a:hover .icon[class*="icoPlus"]:before, .main_map .main_map_banner .main_map_box .main_long_banner_link a:hover .icon[class*="icoPlus"]:after {background:#fff;} .main_map.ez-align-left .main_map_banner .main_map_banner_txt_box {align-items:flex-start;} .main_map.ez-align-left .main_map_banner .main_map_banner_txt_box .main_map_banner_txt {text-align:left;} .main_map.ez-align-center .main_map_banner .main_map_banner_txt_box {align-items:center;} .main_map.ez-align-center .main_map_banner .main_map_banner_txt_box .main_map_banner_txt {align-items:center;text-align:center;} .main_map.ez-align-right .main_map_banner .main_map_banner_txt_box {align-items:flex-end;} .main_map.ez-align-right .main_map_banner .main_map_banner_txt_box .main_map_banner_txt {text-align:right;} @media all and (min-width:1025px) { /* 이미지&텍스트갤러리 */ .main_image_text_gallery .main_3dan_banner ul.fs_medium li a .main_3dan_banner_txt {margin-top:20px;} .main_image_text_gallery .main_3dan_banner ul.fs_medium li a .main_3dan_banner_txt .main_3dan_banner_txt01 {font-size:22px;} .main_image_text_gallery .main_3dan_banner ul.fs_small li a .main_3dan_banner_txt {margin-top:20px;} .main_image_text_gallery .main_3dan_banner ul.fs_small li a .main_3dan_banner_txt .main_3dan_banner_txt01 {font-size:20px;} .main_image_text_gallery[data-ez-item-length='2'] .main_3dan_banner ul {width:calc(66.66% + 13px);margin:0 auto;} } @media all and (max-width:1680px) { /* 메인 타이틀 */ .main_title .main_title_txt01 {font-size:calc(21px + (32 - 21) * ((100vw - 370px) / (1680 - 370)));} .main_title .main_title_txt02 {font-size:calc(13px + (18 - 13) * ((100vw - 370px) / (1680 - 370)));} /* 이미지&텍스트갤러리 */ .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt .main_3dan_banner_txt01 {font-size:calc(24px + (32 - 24) * ((100vw - 370px) / (1680 - 370)));} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt .main_banner_more {font-size:calc(13px + (16 - 13) * ((100vw - 370px) / (1680 - 370)));} /* 메인상품분류 슬라이드 상품진열 */ .main_product_slide .swiper-prev-special {left:-50px;} .main_product_slide .swiper-next-special {right:-50px;} /* 메인 비디오배너 */ .main_video .main_video_title .main_title_txt01 {font-size:calc(32px + (48 - 32) * ((100vw - 370px) / (1680 - 370)));} .main_video .main_video_title .main_title_txt02 {font-size:calc(16px + (20 - 16) * ((100vw - 370px) / (1680 - 370)));} /* 메인 지도 */ .main_map .main_map_banner .main_map_box .main_long_banner_link a {font-size:calc(13px + (20 - 13) * ((100vw - 370px) / (1680 - 370)));} .main_map .main_map_banner .main_map_banner_txt_box {font-size:calc(15px + (18 - 15) * ((100vw - 370px) / (1680 - 370)));} } @media all and (max-width:1024px) { /* 스마트배너 */ .xans-smart-banner-admin {margin:0 auto 80px;} /* 메인 상품진열 */ .main_product_list {margin:0 auto 80px;} .main_product_list .main_title {margin-bottom:35px;} /* 이미지&텍스트갤러리 */ .main_image_text_gallery {margin:0 auto 80px;} .main_image_text_gallery .main_3dan_banner ul {flex-direction:column;justify-content:flex-start;flex-wrap:nowrap;margin:0 !important;width:100% !important;} .main_image_text_gallery .main_3dan_banner ul li {margin:0 0 35px 0;padding:0;max-width:100%;width:100%;flex:1;} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt {margin-top:15px;} .main_image_text_gallery .main_3dan_banner ul li a .main_3dan_banner_txt .main_banner_more {margin-top:10px;} .main_image_text_gallery .main_3dan_banner ul li a picture img {width:100%;} /* 이미지&텍스트갤러리 슬라이드 */ .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-slide ul {scroll-snap-type:x mandatory;scroll-behavior:smooth;overflow-x:auto;flex-direction:row;justify-content:flex-start !important;align-items: flex-start;gap:10px;width:100%;} .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-slide ul::-webkit-scrollbar {display:none;} .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-slide ul li {scroll-snap-align:center;margin:0;max-width:100%;width:88%;flex:none;} .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-slide ul li a {overflow:hidden;} /* 이미지&텍스트갤러리 더보기 */ .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-more ul li {display:none;opacity:0.3;} .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-more ul li:nth-child(1), .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-more ul li:nth-child(2), .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-more ul li:nth-child(3) {display:block;opacity:1;} .main_image_text_gallery .main_3dan_banner.ez-mobile-layout-more .main_image_text_gallery_more {display:block;padding-bottom:20px;} /* 메인 텍스트배너 */ .main_text {margin:0 auto 80px;} /* 메인상품분류 슬라이드 상품진열 */ .main_product_slide {width:92%;margin:0 auto 80px;} .main_product_slide .main_title {margin-bottom:20px;} .main_product_slide .swiper-prev-special, .main_product_slide .swiper-next-special{display:none;} /* 메인 비디오배너 */ .main_video {margin:0 auto 80px;} .main_video .main_video_box {width:90%;padding-bottom:50.70%;} .main_video .main_video_title .main_title_txt02 {margin-top:10px;} /* 메인 탭상품 상품진열 */ .main_product_category {margin:0 auto 80px;} .main_product_category .main_title {margin-bottom:20px;} .main_product_category .main_product_inner {flex-direction:column;margin-bottom:30px;} .main_product_category .main_product_inner .main_product_tab {width:100%;margin-top:10px;overflow:hidden;overflow-x:auto;} .main_product_category .main_product_inner .main_product_tab li {margin-left:10px;} .main_product_category .main_product_inner .main_product_tab li:first-child {margin-left:0;} .main_product_category .main_product_inner .main_product_tab li .button {font-size:16px;line-height:1;font-weight:400;color:#8a8a8a;white-space:nowrap;padding:0px 0px 8px 0px;} .main_product_category .main_product_inner .main_product_tab li .button:after {display:none;} .main_product_category .main_product_inner .main_product_tab li .button.active {color:#1a1a1a;border-bottom:2px solid #1a1a1a;} .main_product_category .main_product_inner.ez-align-left {align-items:flex-start;} .main_product_category .main_product_inner.ez-align-center {align-items:center;} .main_product_category .main_product_inner.ez-align-right {align-items:end;} .main_product_category .tabcontent .ec-base-product .prdList.grid3.list_gallery > li, .main_product_category .tabcontent .ec-base-product .prdList.grid4.list_gallery > li, .main_product_category .tabcontent .ec-base-product .prdList.grid3 > li, .main_product_category .tabcontent .ec-base-product .prdList.grid4 > li {width:50%;} .main_product_category .tabcontent .ec-base-product .prdList.grid5 > li, .main_product_category .tabcontent .ec-base-product .prdList.grid5.list_gallery > li {width:33.33%;} .main_product_category .tabcontent .ec-base-product .prdList.grid3 .description {margin:10px 0 0 0;} /* 메인 지도 */ .main_map {width:100%;height:auto;padding:0;margin:0 auto 80px;} .main_map .main_map_banner {display:flex;flex-direction:column;margin:0 auto;} .main_map .main_map_banner .main_map_box {width:100%;margin:0 auto;} .main_map .main_map_banner .main_map_box .main_map_banner_txt01 {font-size:43px;bottom:42%;width:92%;text-align:center;} .main_map .main_map_banner .main_map_box .main_long_banner_link a {padding:12px 14px 12px 15px;} .main_map .main_map_banner .main_map_box .main_long_banner_link a i {margin-left:20px;} .main_map .main_map_banner .main_map_banner_txt_box {margin:5% auto;padding:0;width:100%;} } @media all and (max-width:767px) { /* 스마트배너 */ .xans-smart-banner-admin {margin:0 auto 50px;} /* 메인타이틀 */ .main_title .main_title_txt02 {margin-left:10px;} /* 메인 상품진열 */ .main_product_list {margin:0 auto 50px;} /* 이미지&텍스트갤러리 */ .main_image_text_gallery {margin:0 auto 50px;} .main_image_text_gallery .main_title {margin-bottom:35px;} /* 메인 텍스트배너 */ .main_text {margin:0 auto 50px;} /* 메인상품분류 슬라이드 상품진열 */ .main_product_slide {margin:0 auto 50px;} /* 메인 비디오배너 */ .main_video {margin:32% auto 50px;} /* 메인 탭상품 상품진열 */ .main_product_category {margin:0 auto 50px;} /* 메인 지도 */ .main_map {margin:0 auto 50px;} } /* ===== 2026-09-05 EZ 그릇+내용물 이식: 시안 CSS 통째 병합(카페24-프레임워크 G95) ===== 카페24 라이브 optimizer 번들이 새 @css() 참조 파일을 안 잡아, 이미 번들되는 이 파일에 시안 CSS 전체를 병합한다(SoyThree R6과 동일 조치, 템플릿_가이드 §9-4-3 4단계 1번). */ /* ---- css/layout.css (헤더/푸터 .main-layout-* 전체) ---- */ /* [SYSTEM RULE] 1. All Layout Components use 'main-layout-' prefix. 2. Hero Carousel uses 'mc-' prefix. 3. Promo Section uses 'ps-' prefix. 4. Quick Icons uses 'qi-' prefix. 5. Best Items uses 'bi-' prefix. 6. Notice & Community uses 'nc-' prefix. 7. Group Banner uses 'gb-' prefix. 8. Time Sale uses 'ts-' prefix. 9. Division Banner uses 'dv-' prefix. */ :root { /* [2026-08-07] SoyTwo 전역 브랜드 토큰 — SOYONE(--ml-accent 레드 #b63535)와 시각적으로 분리하기 위해, 벤치마크(COS)의 미니멀 모노톤 아이덴티티(강한 컬러 액센트 없이 흑백+ 상품사진 위주)를 참고해 accent를 뉴트럴 블랙 계열로 바꿨다. 버튼/링크/포커스 등 전역 UI가 이 변수 하나로 전부 갈리므로(Tier A 전역 테마) 이 한 줄만으로 두 템플릿이 시각적으로 구분된다 — 헤더/푸터 마크업 구조 자체는 아직 SOYONE 그대로(§SoyTwo.md §7-10 참고). */ --ml-bg: #ffffff; --ml-fg: #151515; --ml-muted: #888888; --ml-border: #eeeeee; --ml-accent: #1a1a1a; --ml-kakao: #fee500; --ml-max-width: 1440px; --ml-content-width: 1115px; --ml-font: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* body의 overflow-x:hidden만으론 부족함 - 캐러셀 슬라이드류(.ps-slide 등)가 overflow:hidden인 뷰포트 안에서도 자기 레이아웃 박스 자체는 페이지 밖까지 넘어가 있어서, 진짜 루트 스크롤 요소인 html에도 명시해야 가로 스크롤이 실제로 막힘(실측: 모바일에서 91px 가로 스크롤이 실제로 됐었음). */ html { overflow-x: hidden; } body { /* layout/basic/css/common.css(실제 카페24 원본 파일, 수정하지 않음)의 body{min-width:1480px} 규칙을 명시적으로 되돌림 — 이 속성을 다시 선언 안 하면 파일 로드 순서를 바꿔도 캐스케이드가 그 규칙을 계속 적용한다 (같은 프로퍼티를 재선언한 나중 규칙만 이긴다). 1200~1479px 폭에서 헤더 툴바가 화면 밖으로 잘려나가던 실제 버그의 근본 원인(실측 확인). */ min-width: 0; font-family: var(--ml-font); background: #fff; color: var(--ml-fg); line-height: 1.6; -webkit-font-smoothing: antialiased; /* [실측 확인] overflow-x: hidden → clip 로 교체. body에 overflow-x:hidden을 쓰면 CSS 스펙의 자동 보정 규칙(x/y 중 하나만 non-visible이면 나머지 visible도 auto로 바뀜)에 의해 body의 overflow-y가 강제로 auto가 되어 body 자신이 하나의 독립된 스크롤 컨테이너가 되어 버린다. 그런데 실제 문서 스크롤은 그 바깥의 html에서 일어나므로(위 html 규칙 참고) body 내부 스크롤 위치는 항상 0으로 고정 — position:sticky 자식 요소가 "가장 가까운 스크롤 컨테이너"로 이 움직이지 않는 body를 잡아버려 전혀 고정되지 않고 페이지와 함께 스크롤되어 사라지는 버그가 있었다(상단 메뉴 고정 실측 중 발견). overflow-x: clip은 가로 넘침을 그대로 잘라내면서도 스펙상 "스크롤 컨테이너"를 만들지 않아 sticky를 깨지 않는다(실측 확인: 고정도 되고 가로 스크롤도 0px로 완전 차단됨) — hidden→clip 교체만으로 두 요구사항이 동시에 해결됨. */ overflow-x: clip; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; transition: 0.2s; } img { max-width: 100%; height: auto; display: block; } button { background: none; border: none; cursor: pointer; font-family: inherit; } .container { max-width: var(--ml-content-width); margin: 0 auto; padding: 0 20px; position: relative; } /* --- [LAYOUT] 1. Header (Isolated) --- */ /* [2026-08-08] 재실측 정정: 벤치마크(COS, ecudemo131980.cafe24.com)의 #header는 sticky+흰 배경 상시 고정이 아니라 **position:fixed, background:transparent 상시 투명 오버레이**였다(실측: 홈 히어로 위뿐 아니라 흰 배경 카테고리 페이지에서도 클래스가 동일하게 bs_bg_off, 배경은 항상 rgba(255,255,255,0)). 로고/텍스트 색만 페이지별로 검정↔흰색 버전을 다르게 노출해 명도를 맞춘다(라이브는 페이지마다 수동 CSS로 지정하지만, 우리는 레이아웃 하나를 전 페이지가 공유하므로 대신 js/layout.js의 IntersectionObserver가 히어로 섹션(.ss-section 첫 번째, 홈 전용) 노출 여부를 보고 #header에 is-on-hero를 토글 — 히어로가 없는 서브페이지는 관찰 대상 자체가 없어 자동으로 기본(어두운 글자, 투명배경=사실상 흰 헤더처럼 보임) 상태를 유지한다. header가 flow 밖으로 빠지므로 #container에 헤더 높이만큼 padding-top을 주고, 홈 히어로(.ss-container)만 그 패딩을 음수 마진으로 상쇄해 투명 헤더 밑으로 파고들게 한다(아래 #container/.ss-container 규칙 참고). */ :root { --hd-h: 96px; } /* [2026-09-06] 실측 발견(대표님 지적 "저게 뭐가 틀린지 몰라?") — 라이브 CSS 번들에 `layout/basic/css/layout.css`(우리가 안 쓰는 줄 알았던 다른 파일, 그런데도 카페24가 자동으로 번들에 포함시킴 — main_supply.html/detail_layout.html 등 다른 템플릿 파일이 참조해서 번들 후보에 들어가는 것으로 추정)의 옛 `#header{background:#fff; position:relative;z-index:998}` 규칙이 캐스케이드에서 섞여 들어와, 우리 투명헤더 규칙과 동일 specificity(#header 단독)라 번들 내 등장 순서에 따라 배경색이 흰색으로 덮어써지고 있었다(히어로 위에 흰 띠가 떠 있는 것처럼 보이던 증상, 스크린샷 대조로 발견). `!important`로 순서와 무관하게 확정. */ /* [2026-09-06 2차 재발견 — 대표님 "틀린걸 잡아낸건 맞아?" 지적으로 스크린샷을 더 자세히 봐서 발견] background/position만 !important로 막고 border-bottom은 안 막아서, 라이브 CSS 번들에 섞여드는 그 옛 #header{border-bottom:1px solid #e8e8e8} 규칙이 여전히 새어나와 히어로 위에 가느다란 회색 선이 남아 있었다(skin1은 border-bottom:0). 원본 규칙의 전체 프로퍼티(width/margin/padding/background/position/z-index/ box-sizing/border-bottom)를 이번엔 전부 대조해 border-bottom도 명시적으로 무력화. */ #header { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent !important; border-bottom: 0 !important; color: var(--ml-fg); } /* [2026-09-06 3차 재발견 — 대표님 지적 "메뉴: 색상, 섹션이동시 고정안됨 / 스크롤 이동시 섹션 고정안됨"] 캐스케이드 충돌의 정체는 #header 단독 선택자 하나가 아니라 여러 개였다 — layout/basic/css/layout.css(참조 안 하는 줄 알았는데 실제로 라이브 번들에 섞여 들어오는 그 파일)에는 `#header.fixed{transform:translateY(-60px);border-bottom:1px solid #e8e8e8 !important}`도 있다. 이 "fixed" 클래스는 별개의 구형 스크립트 (layout/basic/js/layout.js의 fixedHeader(), scrollY>header.offsetTop이면 부여)가 계속 토글하는데, 그 스크립트 자신의 주석조차 "이 마진 보정은 죽은 전제라 필요 없다"고 적혀 있었다 — 즉 클래스는 계속 붙는데 그걸 위한 원래 처리 로직은 이미 제거된 상태였고, 거기에 옛 파일의 이 규칙만 남아 스크롤할 때마다 헤더가 -60px 위로 밀려 잘려 보이던 것 ("섹션이동시/스크롤 이동시 메뉴가 고정 안 된다"). border-bottom도 이 선택자에서 !important로 다시 살아나 색이 어긋나 보이는 원인이었다("메뉴 색상" 지적). 이 클래스 자체를 제거하기보다(다른 기능에 영향 줄 위험) 카페24-프레임워크 G100/G102가 확정한 패턴대로 해당 선택자의 모든 프로퍼티를 명시적으로 무력화한다. */ #header.fixed { transform: none !important; border-bottom: 0 !important; } /* [2026-08-09, 전달.md] "메뉴쪽도 안보이는데 최상단 그라데이션 적용해" — 로고/메뉴가 흰 글자로 바뀌는 구간(어두운/사진 배경 섹션 위, js/layout.js watchHeroSection)에만 상단에 옅은 검정 그라데이션을 깔아 배경이 밝아도(예: 잔디+흰 꽃) 대비를 보장한다. 흰 배경 섹션(프로덕트탭/후기 등)에서는 is-on-hero가 안 붙으므로 기존처럼 그라데이션 없이 어두운 글자 그대로 — 디자인을 해치지 않는다. */ #header::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 160px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)); z-index: -1; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } #header.is-on-hero { color: #fff; } #header.is-on-hero::before { opacity: 1; } /* [2026-08-10] 다크 섹션이 없는 서브페이지(js/layout.js watchHeroSection) — 투명 헤더가 서브페이지 상단 콘텐츠(카테고리 배너 이미지 등)와 부딪히지 않도록 명시적 흰 배경으로 고정한다. */ #header.is-subpage, #header.is-subpage #main-layout-header-root { background: #fff !important; color: #151515; } /* [2026-08-11, 전달.md] "상단 흰색에 살짝 그림자 효과로 가시성확보" — 기존 1px 헤어라인은 사실상 안 보여 살짝 퍼지는 그림자로 강화(js/layout.js에서 홈 스크롤 시에도 이 클래스를 재사용하므로 서브페이지·홈 스크롤 둘 다 적용됨). */ #header.is-subpage { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); } #main-layout-header-root { width: 100%; background: transparent; } #container { padding-top: var(--hd-h); } /* [2026-08-08] 재실측 정정: 실제 벤치마크(COS)의 띠배너는 마진을 준 독립 플로팅 캡슐이 아니라, #header 상단 정중앙에 **absolute로 붙어(top:0) 아래쪽 모서리만 둥근 반투명 유리 탭**이었다(실측: rgba(255,255,255,0.2), border-radius "0 0 22px 22px", 헤더 행 위에 겹쳐 얹힌다). color:inherit로 #header의 is-on-hero 상태(흰/검정 글자)를 그대로 물려받는다 — 홈 히어로 위에서는 흰 글자, 흰 배경 서브페이지에서는 어두운 글자로 자동 전환. height:40px· overflow:hidden·align-items:flex-start는 tb-track 롤링(js/layout.js startTopbannerRolling, translateY(-tIdx*40px))이 그대로 의존하므로 유지. */ .main-layout-topbanner { position: absolute; top: 0; left: 50%; z-index: 5; transform: translateX(-50%); background: rgba(255, 255, 255, 0.16); backdrop-filter: blur(6px); color: inherit; height: 40px; width: fit-content; max-width: calc(100vw - 40px); border-radius: 0 0 18px 18px; padding: 0 46px 0 22px; display: flex; align-items: flex-start; justify-content: center; font-size: 13px; font-weight: 500; letter-spacing: -0.02em; overflow: hidden; } .tb-close { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; font-size: 17px; line-height: 1; opacity: 0.65; cursor: pointer; } .tb-close:hover { opacity: 1; } /* [2026-08-02] 공지사항 최신 5개 세로 롤링 — js/layout.js의 startTopbannerRolling()이 아이템 높이(40px)만큼 translateY로 한 칸씩 밀어 올린다. */ .tb-track { display: flex; flex-direction: column; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); } .tb-item { height: 40px; list-style: none; display: flex; align-items: center; justify-content: center; } .tb-item a { color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* [2026-08-07] 시각 리디자인: 캡슐 배지가 메시지 길이에 상관없이 컴팩트한 폭을 유지하도록 90vw → 고정 상한으로 축소(벤치마크 COS 알림 배지 참고). */ max-width: min(90vw, 320px); } /* [2026-08-08] 재실측 정정: 상시 투명 오버레이로 바뀌며 흰 배경/보더/스크롤 축소 애니메이션(is-stuck)을 전부 제거 — 벤치마크는 스크롤해도 헤더가 줄어들지 않고 항상 같은 크기로 떠 있다(실측 확인, height 120px 고정). */ .main-layout-header-main { height: var(--hd-h); display: flex; align-items: center; background: transparent; } /* [2026-08-07] 시각 리디자인: 로고 중앙정렬 + GNB 별도 행(2행 구조) → 벤치마크(COS)처럼 로고+GNB가 좌측에 붙고 아이콘 묶음이 우측에 붙는 단일 행(flex) 구조로 전환. 모바일(1024px 이하)에서는 media query가 display:grid로 되돌려 기존 grid-column 기반 배치(햄버거/로고/검색)를 그대로 재사용한다 — 그 로직은 손대지 않았다. */ .main-layout-header-container { max-width: var(--ml-max-width); margin: 0 auto; padding: 0 24px; width: 100%; display: flex; align-items: center; gap: 24px; min-width: 0; } .main-layout-brand-group { display: flex; align-items: center; gap: 36px; min-width: 0; flex: 1 1 auto; } .main-layout-header-left { display: flex; align-items: center; gap: 20px; min-width: 0; /* 아이콘 묶음(검색+툴바)을 우측으로 고정 — brand-group은 줄어들 수 있어도 이 묶음과 그 뒤 toolbar는 원래 크기를 유지한다(COS 우측 아이콘 클러스터 참고). */ margin-left: auto; flex-shrink: 0; } .main-layout-search-trigger { position: relative; cursor: pointer; display: flex; align-items: center; color: inherit; } /* 실제 터치 히트영역을 44x44로 확대(아이콘 시각크기·레이아웃은 그대로 유지). 모바일 실측 결과 원래 24x24는 손가락 터치 기준(최소 44x44)에 못 미쳤다. */ .main-layout-search-trigger::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .main-layout-search-trigger svg { width: 24px; height: 24px; } .main-layout-search-rolling { height: 20px; overflow: hidden; width: 150px; position: relative; } .main-layout-rolling-wrap { transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1); } .main-layout-rolling-item { height: 20px; font-size: 13px; font-weight: 700; color: var(--ml-fg); display: flex; align-items: center; gap: 8px; } .main-layout-rolling-item em { font-style: normal; color: var(--ml-accent); font-size: 11px; } .main-layout-logo { text-align: left; flex-shrink: 0; } .main-layout-logo a { font-size: 26px; font-weight: 900; letter-spacing: 0.2em; text-transform: uppercase; color: inherit; } /* [2026-09-06] 대표님 지적 "메뉴 흰색으로" — 로고(.main-layout-logo a)만 color:inherit이 명시돼 있고 GNB(브랜드/스토어/갤러리/커뮤니티)·툴바(login/join/cart)의 는 이 규칙이 없어 카페24 네이티브 common.css의 전역 `a{color:var(--font-color-base)}`(#000)가 그대로 이겼다 — #header.is-on-hero가 흰색을 줘도
  • 까지만 상속되고 자체엔 안 먹힘. layout.css에 있던 범용 `a{color:inherit}`로 커버되는 줄 알았으나 홈 페이지 번들엔 그 규칙 자체가 안 실려 있었다(G95/G99와 동일 계열, layout.html 경유 참조). 로고와 동일하게 명시. */ .main-layout-gnb a, .main-layout-toolbar a { color: inherit; } .main-layout-toolbar { display: flex; justify-content: flex-end; align-items: center; min-width: 0; flex-shrink: 0; gap: 22px; } /* [2026-08-08] 재실측 정정: 벤치마크 실제 마크업은 "LOGIN"이 아니라 소문자 "login / join"이었다 — 대문자 볼드가 아니라 가벼운 소문자 텍스트. */ .main-layout-toolbar-item { cursor: pointer; display: flex; align-items: center; position: relative; font-size: 13px; font-weight: 500; text-transform: lowercase; color: inherit; } .main-layout-toolbar-item svg { width: 24px; height: 24px; stroke-width: 1.5px; color: inherit; } .main-layout-cart-count { position: absolute; top: -6px; right: -10px; background: var(--ml-fg); color: #fff; font-size: 10px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* [2026-08-07] 시각 리디자인: 구 header-bottom(54px 별도 행)은 main-layout-header-main으로 합쳐지며 제거됨 — 카테고리 토글은 이제 우측 아이콘 묶음(.main-layout-toolbar) 안의 평범한 flex 아이템이라 더 이상 absolute 배치가 필요 없다. 트리거 로직(js/layout.js megaToggle/megaMenu)은 손대지 않았다. */ .main-layout-category-toggle { width: 22px; height: 14px; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; } .main-layout-category-toggle span { display: block; width: 100%; height: 1.5px; background: currentColor; transition: 0.3s; } .main-layout-category-toggle.is-active span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); } .main-layout-category-toggle.is-active span:nth-child(2) { opacity: 0; } .main-layout-category-toggle.is-active span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); } .main-layout-gnb { display: flex; /* [텍스트 오버플로우 방지] GNB 항목은 어드민에서 이름을 자유롭게 바꿀 수 있다(§2-3). flex 기본값(nowrap)에서 항목이 길어지거나 개수가 늘면 메뉴줄이 조용히 옆으로 넘쳐버릴 수 있어, 넘칠 경우 다음 줄로 자연스럽게 줄바꿈되게 한다(가로 넘침보다 안전). */ flex-wrap: wrap; /* [2026-08-07] 시각 리디자인: 로고 옆 좌측정렬 배치로 전환되며 center → flex-start, 로고와 더 밀착되도록 gap도 40px → 30px로 축소(벤치마크 COS 참고). */ justify-content: flex-start; row-gap: 8px; gap: 30px; } .main-layout-gnb li { position: relative; font-size: 14px; font-weight: 700; color: inherit; cursor: pointer; white-space: nowrap; } /* [2026-08-10] li 전체가 아니라 직계 링크에만 걸어야 한다 — li 전체에 opacity를 걸면 그 안의 드롭다운(.main-layout-gnb-dropdown)까지 같이 반투명해진다(opacity는 자식이 값을 덮어써도 상쇄 안 되는 합성 속성이라 자식 규칙으로 못 되돌림). */ .main-layout-gnb li:hover > a { opacity: 0.6; } /* [2026-08-10] 벤치마크(ecudemo131980.cafe24.com) 실측 그대로 — 항목별 하위메뉴는 그 li 자신이 품고 있다가 li:hover에만 순수 CSS로 열린다(JS 불필요, 실제 사이트도 동일 패턴 `li:hover .bs_wrap { opacity:1; visibility:visible; }`). */ .main-layout-gnb-dropdown { position: absolute; top: 100%; left: 0; margin-top: 14px; min-width: 160px; background: #fff; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); padding: 18px 20px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; z-index: 1001; } .main-layout-gnb li:hover .main-layout-gnb-dropdown { opacity: 1; visibility: visible; } .main-layout-gnb-dropdown li { font-size: 13px; font-weight: 500; color: #666; padding: 6px 0; opacity: 1; } .main-layout-gnb-dropdown li a { color: inherit; } .main-layout-gnb-dropdown li:hover { opacity: 1; color: #000; font-weight: 700; } /* 모바일 전용 햄버거 (header-container 직계 자식, PC에서는 기본 숨김) */ .main-layout-hamburger { position: relative; display: none; width: 22px; height: 14px; padding: 0; border: 0; background: none; flex-direction: column; justify-content: space-between; cursor: pointer; } /* 실제 터치 히트영역을 44x44로 확대(아이콘 시각크기 22x14·그리드 레이아웃은 그대로 유지). 모바일 실측 결과 원래 22x14는 유일한 로그인/장바구니/전체메뉴 진입 경로인데 손가락 터치 기준(최소 44x44)에 크게 못 미쳐 "안 눌린다"고 느껴졌다. */ .main-layout-hamburger::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .main-layout-hamburger span { display: block; width: 100%; height: 1.5px; background: currentColor; transition: 0.3s; } .main-layout-hamburger.is-active span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); } .main-layout-hamburger.is-active span:nth-child(2) { opacity: 0; } .main-layout-hamburger.is-active span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); } /* --- [LAYOUT] Search Layer --- */ #main-layout-search-root { position: fixed; inset: 0; background: rgba(255, 255, 255, 0.98); z-index: 2000; visibility: hidden; opacity: 0; transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); display: flex; flex-direction: column; align-items: center; padding-top: 80px; backdrop-filter: blur(20px); } #main-layout-search-root.is-active { visibility: visible; opacity: 1; } .main-layout-search-close { position: absolute; top: 40px; right: 40px; font-size: 40px; cursor: pointer; color: var(--ml-fg); background: none; border: none; font-weight: 200; } .main-layout-search-form { width: 100%; max-width: 800px; border-bottom: 2px solid var(--ml-fg); padding: 10px 0; margin-bottom: 60px; display: flex; align-items: center; } .main-layout-search-form input { flex: 1; min-width: 0; border: none; font-size: 32px; font-weight: 700; outline: none; background: transparent; color: var(--ml-fg); } .main-layout-search-form input::placeholder { color: #ccc; } .main-layout-search-form svg { color: var(--ml-fg); } /* [2026-07-29] 검색 제출 버튼 — 실제 제출 가능한