@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════════
footer_tidy.css — PC 풋터 정돈(A안) · v1.0.0 (2026-09-03)
대상 = WEB-INF/jsp/frame/footer.jsp (PC 레이아웃 전용 풋터)
링크 = footer.jsp 가 이 파일을 직접 건다(commScripts.jsp 무접촉).
── 왜 새 파일인가 ────────────────────────────────────────────────────────
원본 규칙은 css/shop/style_v2.css(192~251행)에 있는데 style_v2 는 운영 분기
파일이라 손대면 전 사이트 위험이 커진다. 그래서 **덮어쓰기 전용 파일을 뒤에
로드**한다(같은/더 높은 특정도 + 문서상 나중 → 승리). 원본은 한 줄도 안 지운다.
★ 인라인 스타일 금지. 색·형태·간격 전부 이 파일에서만.
── 09-03 정돈 항목(팀장 지적 6건) ────────────────────────────────────────
① 좌우 baseline 불일치(상담실 아래 빈칸 79px) → .inner 를 3열 그리드로
(상담실 / 공지·안전성 / 바로가기). .right{display:contents} 로 마크업 무변경.
② 바로가기 버튼 4개가 3줄로 깨짐 → 3열 안에서 세로 균등 스택(폭 100%)
③ 상단 매장찾기 띠와 하단 매장찾기 버튼 중복 → 하단 버튼 제거(footer.jsp 1 hunk)
④ 하단 링크 줄이 2줄로 흐름 → 글자 14px·구분점 9px·패밀리 220px → 1줄
⑤ "제 2025-화성남양-0104호" 가 줄 중간 분리 → 항목마다 span.fi + white-space:nowrap
⑥ 소셜 아이콘만 원색이라 튐 → CSS mask 단색(회색 → hover 딥그린)
높이 목표 = 801px → 약 520px.
톤 = 순백 배경 / 1px 선 #e9e4d8·#efeade / 딥그린 포인트 #3d6041 / 상자 남발 금지
═══════════════════════════════════════════════════════════════════════════ */
/* ───────────────────────────────────────────────────────────────────────────
1. 상담·공지·바로가기 = 3열 그리드
구 규칙: .footer_customer{padding:100px 0 40px} .inner{display:table}
.left{table-cell;48%} .right{table-cell;52%}
→ 그리드로 바꾸면서 .right 를 display:contents 로 풀어 자식 2개
(.tabArea / .link_list)를 그대로 2·3열에 앉힌다(마크업 변경 0).
구형 브라우저에서 display:contents 미지원이면 .right 가 통째로 2열에 들어가
기존과 같은 2단 배치로 자연 폴백된다.
─────────────────────────────────────────────────────────────────────────── */
.footer_customer{ padding:44px 0 36px; }
.footer_customer .inner{
display:grid;
grid-template-columns:320px minmax(0,1fr) 260px;
column-gap:40px;
align-items:start;
}
.footer_customer .inner:after{ display:none; }
.footer_customer .left{ display:block; width:auto; grid-column:1; }
.footer_customer .right{ display:contents; }
.footer_customer .right .tabArea{ grid-column:2; }
.footer_customer .right .link_list{ grid-column:3; }
/* 세 열의 제목 높이를 맞춘다(공통 캡션 규격) */
.footer_customer .left .tt,
.footer_customer .right .tabArea .tab li a,
.footer_customer .right .link_list:before{
font-size:15px;
line-height:21px;
letter-spacing:-0.01em;
}
/* ── 1열: 쇼핑몰 상담실 ── */
.footer_customer .left .tt{ font-weight:700; color:#6b7268; margin-bottom:6px; }
.footer_customer .left .tel{
font-size:34px; line-height:44px; font-weight:700;
color:#3d6041; letter-spacing:-0.03em;
}
.footer_customer .left .open{
font-size:14px; line-height:22px; font-weight:400;
color:#6b7268; margin-top:6px;
}
.footer_customer .left .mail_link{
font-size:14px; line-height:20px; font-weight:500;
color:#3d6041; margin-top:8px;
}
.footer_customer .left .mail_link:hover{ text-decoration:underline; }
/* ── 1열: 소셜 아이콘 단색화(⑥) ──
원본은 원색 PNG를 감싼 .svg ![]()
. 색을 CSS로 못 바꾸므로
img 는 감추고 a 자체를 mask 로 그린다(이미지 요청 4건 → 0건).
회색 #9aa096 → hover 딥그린 #3d6041. */
.footer_customer .left .sns{ margin-top:18px; display:flex; gap:14px; }
.footer_customer .left .sns:after{ display:none; }
.footer_customer .left .sns li{ float:none; margin-right:0; }
.footer_customer .left .sns li a{
display:block; width:30px; height:30px; line-height:0;
background-color:#9aa096;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
-webkit-mask-size:24px 24px; mask-size:24px 24px;
transition:background-color .18s ease;
}
.footer_customer .left .sns li a:hover{ background-color:#3d6041; }
.footer_customer .left .sns li a img{ display:none; }
.footer_customer .left .sns li:nth-child(1) a{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.4' y='3.4' width='17.2' height='17.2' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3.4' y='3.4' width='17.2' height='17.2' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4.1'/%3E%3Ccircle cx='17.3' cy='6.7' r='1.15' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.footer_customer .left .sns li:nth-child(2) a{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.4 21.5v-8.4h2.8l.42-3.26h-3.22V7.76c0-.94.26-1.58 1.61-1.58h1.72V3.26c-.3-.04-1.33-.13-2.52-.13-2.5 0-4.2 1.52-4.2 4.32v2.39H7.2v3.26h2.81v8.4z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M13.4 21.5v-8.4h2.8l.42-3.26h-3.22V7.76c0-.94.26-1.58 1.61-1.58h1.72V3.26c-.3-.04-1.33-.13-2.52-.13-2.5 0-4.2 1.52-4.2 4.32v2.39H7.2v3.26h2.81v8.4z'/%3E%3C/svg%3E");
}
.footer_customer .left .sns li:nth-child(3) a{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2.4' y='5.4' width='19.2' height='13.2' rx='4'/%3E%3Cpath d='M10.4 9.4l5.1 2.6-5.1 2.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2.4' y='5.4' width='19.2' height='13.2' rx='4'/%3E%3Cpath d='M10.4 9.4l5.1 2.6-5.1 2.6z' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}
.footer_customer .left .sns li:nth-child(4) a{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2.8' y='4.4' width='18.4' height='15.2' rx='4.6'/%3E%3Cpath d='M9 7.6v8.8' stroke-linecap='round'/%3E%3Ccircle cx='12.6' cy='13.4' r='3.1'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='2.8' y='4.4' width='18.4' height='15.2' rx='4.6'/%3E%3Cpath d='M9 7.6v8.8' stroke-linecap='round'/%3E%3Ccircle cx='12.6' cy='13.4' r='3.1'/%3E%3C/svg%3E");
}
/* ── 2열: 공지사항 / 안전성 검사 ── */
.footer_customer .right .tabArea .tab li{ margin-right:18px; margin-bottom:12px; }
.footer_customer .right .tabArea .tab li a{ font-weight:600; color:#9aa096; }
.footer_customer .right .tabArea .tab li.on a{ font-size:15px; font-weight:700; color:#3d6041; }
.footer_customer .right .tabArea .tabBox li a{
font-size:15px; line-height:20px; color:#2f3a2f;
padding:10px 0; border-bottom:1px solid #f1ede2;
}
.footer_customer .right .tabArea .tabBox li:last-child a{ border-bottom:0; }
.footer_customer .right .tabArea .tabBox li a:hover{ color:#3d6041; }
/* ── 3열: 바로가기(②) ──
구 규칙 float:left + width:280px 가 3줄로 깨지던 자리.
열 안에서 폭 100% 세로 균등 스택으로 고정 = 고아 버튼 없음. */
.footer_customer .right .link_list{
margin-top:0;
display:grid;
grid-template-columns:1fr;
gap:10px;
}
.footer_customer .right .link_list:after{ display:none; }
.footer_customer .right .link_list:before{
content:"바로가기";
font-weight:700; color:#6b7268;
margin-bottom:1px;
}
.footer_customer .right .link_list a{
float:none; width:auto; height:44px; margin-right:0;
padding:0 14px;
display:flex; align-items:center; justify-content:space-between;
box-sizing:border-box;
border:1px solid #e0dccf; border-radius:8px; background:#fff;
font-size:15px; font-weight:500; color:#2f3a2f; letter-spacing:-0.02em;
transition:border-color .18s ease, color .18s ease;
}
.footer_customer .right .link_list a:hover{ border-color:#3d6041; color:#3d6041; }
.footer_customer .right .link_list a img{ float:none; margin-top:0; opacity:.45; }
/* ───────────────────────────────────────────────────────────────────────────
2. 하단 링크 줄 — 1줄로 고정(④)
구: 15px + 구분점 좌우 18px → 폭 초과로 "생활재 안내책자 / 사업자 정보" 가 2줄
신: 14px + 구분점 좌우 9px + 패밀리사이트 220px → 9개 링크가 한 줄에 들어감
─────────────────────────────────────────────────────────────────────────── */
.footer_link{ padding:11px 0; border-top:1px solid #efeade; }
.footer_link .inner{ padding-right:238px; }
.footer_link a{ font-size:14px; line-height:20px; color:#5a6157; }
.footer_link a:hover{ color:#3d6041; }
.footer_link .line{ width:1px; height:10px; background-color:#ded9cc; margin:0 9px; }
/* 마지막 링크("사업자 정보") 뒤에 붙어 홀로 떠 있던 구분점 제거 */
.footer_link .inner > i.line:last-of-type{ display:none; }
.familysite{
top:-8px; right:0; width:220px;
background-color:#faf8f2;
border:1px solid #eae5d8; border-radius:6px;
}
.familysite>a{ height:34px; padding-left:14px; font-size:14px; color:#5a6157; line-height:34px; }
.familysite ul{ width:220px; background-color:#faf8f2; }
.familysite .ico:before,
.familysite .ic:before{ border-top-color:#6b7268; border-left-color:#6b7268; }
/* ───────────────────────────────────────────────────────────────────────────
3. 사업자 정보(⑤)
footer.jsp 가 항목마다 로 감싸므로 항목 단위로만 줄이 바뀐다
("제 2025-화성남양-0104호" 가 중간에서 쪼개지지 않음).
는 여백 → 세로 구분선으로 승격.
─────────────────────────────────────────────────────────────────────────── */
.footer_info{
padding:22px 0 34px;
font-size:13.5px; line-height:22px; color:#5F6B62;
border-top:1px solid #efeade;
}
.footer_info .inner{ word-break:keep-all; }
.footer_info .fi{ display:inline-block; white-space:nowrap; }
.footer_info .mar{
display:inline-block; vertical-align:middle;
width:1px; height:10px; margin:0 10px;
background-color:#e2ddd0;
}
.footer_info a{ color:#5F6B62; }
.footer_info a:hover{ color:#3d6041; }
/* ============================================================================
[v1.1.0 2026-09-05] QC D55 — 푸터 우측 정렬선 1290 -> 1300 통일
매장 안내 밴드(.go_shop_wrap .inner)는 goshop_band.css 에서 이미 1160(140~1300)인데
그 아래 상담실(.footer_customer)·링크(.footer_link)·사업자정보(.footer_info) 세 단만
공용 .inner(style_v2 1140) 그대로라 1290 에서 끊겨 계단이 졌다.
표준 = 1160 콘텐츠 열(gnbp_flat4.css:19). PC(>=1025)만, 모바일 무접촉.
롤백 = 이 블록 삭제.
============================================================================ */
@media (min-width:1025px){
.footer_wrap .footer_customer .inner,
.footer_wrap .footer_link .inner,
.footer_wrap .footer_info .inner{ width:1160px; }
}
/* 2026-09-06 : DNS 가 사라진 회원생협 2곳 - 이름은 남기고 링크만 해제(.dead) */
.familysite_list_wrap .list .dead,
.familysite .list .dead{
color:#5F6B62; cursor:default;
}