/* tskimchi 레거시 테마 ↔ 새 헤더/푸터 충돌 보정 */ /* 레거시 default.css 의 body{display:flex} 가 우리 레이아웃과 충돌하지 않도록 */ body{display:block;} /* 서브페이지 본문이 헤더 아래에서 시작 (레거시는 고정헤더 11rem 가정했음 → 우리 헤더는 in-flow라 추가 보정 불필요) */ #container{min-height:auto;} /* 목차(브레드크럼) 바: 원본은 position:sticky;top:11rem 로 고정헤더에 붙었으나 새 헤더와 높이가 달라 스크롤 시 어정쩡하게 따라붙음 → 고정 해제하여 함께 스크롤되도록 */ #path{position:static !important;top:auto !important;} /* 레거시 default.css 의 html{overflow:hidden;overflow-y:auto;height:100%} 이 을 스크롤 컨테이너로 만들어 헤더의 position:sticky 가 깨짐(서브페이지에서만 헤더가 따라 올라감). 일반 뷰포트 스크롤로 복구 → 상단 헤더(메뉴) 고정 유지 */ html{overflow-x:clip !important;overflow-y:visible !important;height:auto !important;} body{display:block !important;height:auto !important;overflow:visible !important;} .site-header{position:sticky !important;top:0 !important;z-index:600;} /* Bootstrap 그리드 복구 — 원본은 부트스트랩 로드, 새 사이트는 미로드 → 포팅 페이지의 .row/.col-lg-N 이 1열로 떨어지는 문제 해결. #container 범위 = content_wrap·msection04 등 모든 섹션에 적용(제품상세 2단 포함). */ #container .row{display:flex;flex-wrap:wrap;align-items:flex-start;margin-left:-12px;margin-right:-12px;} #container .row > [class*="col-"]{padding-left:12px;padding-right:12px;box-sizing:border-box;} /* width 는 아래 col-lg-N 이 지정 (여기서 width:100% 주면 특정성으로 col-lg-N 무력화됨) */ #container .col-lg-12{width:100%;} #container .col-lg-10{width:83.3333%;} #container .col-lg-7{width:58.3333%;} #container .col-lg-6{width:50%;} #container .col-lg-5{width:41.6667%;} #container .col-lg-4{width:33.3333%;} #container .col-lg-3{width:25%;} #container .col-lg-2{width:16.6667%;} /* 콘텐츠 배경 흰색 (회색 비침 제거) */ body, #container, #content_wrap, #msection04, .respond_x_scr, #txt, .location, .well{background-color:#fff;} /* 이미지·이미지칸(.well)·표 정리 */ #container img{max-width:100%;height:auto;} #container .well{padding:0;border:0;box-shadow:none;margin:0;} #container .well img{display:block;width:100%;height:auto;margin:0 auto 14px;} #container .tbl_wrap{overflow-x:auto;} #container table.tbl{width:100%;} /* 반응형: 제품상세 2단(7:5)은 태블릿 이하에서 1단, 제품목록 4열은 단계적 축소 */ @media(max-width:1024px){ #container .col-lg-5,#container .col-lg-7,#container .col-lg-6,#container .col-lg-10{width:100%;} } @media(max-width:900px){ #container .col-lg-2,#container .col-lg-3,#container .col-lg-4{width:50%;} } @media(max-width:560px){ #container .col-lg-2,#container .col-lg-3,#container .col-lg-4{width:100%;} } /* ===== 제품상세: 상단 타이틀 이미지 중앙정렬 + 우측 4장 사진 2×2 카드 그리드 ===== */ /* 좌측(col-lg-7) 상단 타이틀 이미지·제목 가운데 맞춤 (표는 그대로 좌측) */ #container .col-lg-7 > p:has(img){text-align:center;} #container .col-lg-7 > h4{text-align:center;} #container .col-lg-7 img{display:inline-block;margin-left:auto;margin-right:auto;} /* 우측(col-lg-5) 변형 사진 .well 만: 사진을 한 줄 2개 × 2줄 카드 그리드 (인증/지역 well 제외) */ #container .col-lg-5 .well{display:grid;grid-template-columns:1fr;gap:22px;background:transparent;padding:0;border:0;align-items:start;} /* 빈 단락(  등 이미지 없는 p) 은 카드로 만들지 않음 → '빈 박스' 제거 */ #container .col-lg-5 .well > p:not(:has(img)){display:none;} #container .col-lg-5 .well > p{ margin:0;text-align:center;font-weight:600;color:#2c4e30;font-size:16px;line-height:1.55; background:#fafbf8;border:1px solid #e7ece7;border-radius:16px;padding:16px 16px 18px; box-shadow:0 10px 24px -16px rgba(20,40,20,.4); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } #container .col-lg-5 .well > p:hover{transform:translateY(-6px);box-shadow:0 18px 34px -16px rgba(20,40,20,.45);border-color:#cfe2cf;} #container .col-lg-5 .well > p > img{display:block;width:100%;height:auto;border-radius:10px;margin:0 0 12px;} #container .col-lg-5 .well > p br{display:none;} /* 이미지 뒤 줄바꿈 제거 → 사진 위 / 타이틀 아래로 깔끔 분리 */ #container .col-lg-5 .well > p i{color:#42aa48;margin-right:5px;} @media(max-width:480px){ #container .col-lg-5 .well{grid-template-columns:1fr;gap:16px;} } /* 각 변형(포기/저염/보쌈/비건/매운)을 카드로 확실히 구분 (col-lg-7 포함 블록만) */ #container article:has(.col-lg-7){ background:#fbfdfb;border:1px solid #e4ebe4;border-radius:18px; padding:30px 32px;margin-bottom:34px; box-shadow:0 12px 34px -24px rgba(20,40,20,.4); } #container article:has(.col-lg-7) .c_tit_3{ display:inline-block;border-bottom:3px solid #42aa48;padding-bottom:6px;margin-bottom:14px; } /* HACCP / ISO9001 인증: 테두리 박스 + [로고 좌] [제목·설명 우] 가로 카드 */ #container .col-lg-12 .well:has(.col-lg-2){ background:#fff;border:1px solid #e2e2e2;border-radius:14px; padding:26px 32px;margin-bottom:22px;box-shadow:0 8px 24px -18px rgba(0,0,0,.22); } #container .col-lg-12 .well:has(.col-lg-2) > .row{align-items:center;} /* 로고-내용 세로 중앙 */ #container .col-lg-12 .col-lg-2{text-align:center;} #container .col-lg-12 .col-lg-2 img, #container .col-lg-12 center img{max-width:120px;height:auto;} #container .col-lg-12 .col-lg-10 h6, #container .col-lg-12 .col-lg-10 .c_tit_3{margin:0 0 8px;font-size:19px;font-weight:800;color:#222;border:0;padding:0;} #container .col-lg-12 .col-lg-10 p{margin:0;color:#555;font-size:15px;line-height:1.65;} /* 좁은 화면(≤600px)에서만 로고 위 / 내용 아래로 적층 */ @media(max-width:600px){ #container .col-lg-12 .col-lg-2{width:100%;margin-bottom:14px;} #container .col-lg-12 .col-lg-10{width:100%;text-align:center;} } /* 제품 타이틀 이미지(#content_tit > h3 > img : 고이담 ○○김치) 중앙정렬 */ #container #content_tit{text-align:center !important;} #container #content_tit > h3{text-align:center !important;display:block;} #container #content_tit img{display:inline-block !important;margin-left:auto !important;margin-right:auto !important;float:none !important;} /* ===== '주문할 때 참고하세요' 지역별 맛 4박스 (col-lg-3 + .txt_list) — SVG 핀 카드 ===== */ #container .row:has(.txt_list){align-items:stretch;} #container .col-lg-3 .well:has(.txt_list){ --acc:#42aa48;height:100%;position:relative;overflow:hidden; background:#fff;border:1px solid #e6ece6;border-radius:16px; padding:28px 22px 22px;box-shadow:0 12px 30px -20px rgba(20,40,20,.35); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } #container .col-lg-3 .well:has(.txt_list):hover{transform:translateY(-6px);box-shadow:0 20px 40px -18px rgba(20,40,20,.42);border-color:var(--acc);} #container .col-lg-3 .well:has(.txt_list)::after{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--acc);} /* 맵아이콘은 제목과 한 줄로 (아래 .c_tit_3::before 로 인라인 배치) */ #container .col-lg-3 .well:has(.txt_list) .c_tit_3::before{ content:"";flex:none;width:24px;height:24px;background-color:var(--acc); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center/contain; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") no-repeat center/contain; } #container .col-lg-3:nth-child(1) .well:has(.txt_list){--acc:#2f7fd1;} #container .col-lg-3:nth-child(2) .well:has(.txt_list){--acc:#2ea043;} #container .col-lg-3:nth-child(3) .well:has(.txt_list){--acc:#e8590c;} #container .col-lg-3:nth-child(4) .well:has(.txt_list){--acc:#d6336c;} #container .col-lg-3 .well:has(.txt_list) .c_tit_3{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;color:#222;margin:0 0 12px;border:0;padding:0;} #container .col-lg-3 .well:has(.txt_list) .txt_list{list-style:none;margin:0;padding:0;} #container .col-lg-3 .well:has(.txt_list) .txt_list li{position:relative;padding:7px 0 7px 18px;color:#566;font-size:15px;line-height:1.5;} #container .col-lg-3 .well:has(.txt_list) .txt_list li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--acc);}