@charset "UTF-8";
/* ============================================================
고객보호 (/customerProtection) — 2026-08-12 신설
헤더 최상단 4번째 카테고리.
구조 원칙: 상단 배너만 관리자 교체 이미지이고, 그 아래는 전부 실제 마크업이다.
문자보내기 버튼을 이미지 위 좌표 오버레이로 두면 배너·시안이 바뀔 때마다
좌표를 다시 잡아야 하고 한 번 어긋나면 조용히 죽는다. 그래서 버튼은 DOM 요소로 두고
수신 번호는 protection_contact 테이블에서 읽는다.
============================================================ */
.cp_wrap{background:#fff;padding-bottom:120px;}
/* 콘텐츠 폭은 1200px 래퍼의 좌측선에 맞추고 우측만 59px 들여쓴다 → 실제 폭 1141px.
클라 기준선은 박스선이 아니라 헤더 마지막 메뉴('고객보호') 글자 오른쪽 끝이고,
같은 규칙을 이미 .saHero / .photoGallery_main / .od_wrap 이 쓰고 있다. (2026-08-19) */
.cp_container{width:1200px;margin:0 auto;padding-right:59px;box-sizing:border-box;}
/* ---------- 상단 배너 (관리자 교체) ---------- */
.cp_bannerBox{margin-top:40px;border-radius:26px;overflow:hidden;line-height:0;font-size:0;}
.cp_bannerBox a{display:block;}
.cp_bannerBox img{display:block;width:100%;height:auto;}
/* 홈 메인 배너와 동일하게 PC/Tablet/Mobile 3종을 미디어쿼리로 갈아끼운다.
숨김 규칙은 반드시 `.cp_bannerBox img.xxx` 형태로 쓸 것 — `.cp_banner_tab`(0,1,0)만으로는
바로 위 `.cp_bannerBox img`(0,1,1)를 못 이겨 3종이 세로로 전부 쌓인다. */
.cp_bannerBox img.cp_banner_tab, .cp_bannerBox img.cp_banner_mo{display:none;}
/* 2026-08-19: 배너 미등록 시 폴백을 텍스트 히어로에서 실제 배너 이미지로 바꿨다
(/resources/brandsite/img/subBanner/protection_pc|tab|mo.jpg — 클라 제공 원본).
.cp_bannerFallback / .cp_fbTitle / .cp_fbDesc 마크업은 제거됐다. */
/* ---------- 섹션 공통 ---------- */
.cp_sec{margin-top:96px;}
.cp_secTitle{font-size:24px;font-weight:700;color:#1a1a1a;line-height:1.35;letter-spacing:-0.02em;}
.cp_secDesc{margin-top:10px;font-size:15px;color:#666;line-height:1.6;word-break:keep-all;}
/* ---------- 고객보호 제도 4단계 ---------- */
.cp_stepList{display:flex;gap:22px;margin-top:52px;list-style:none;padding:0;}
.cp_stepCard{
position:relative;flex:1 1 0;min-width:0;
border:1px solid #e5e8ee;border-radius:10px;background:#fff;
padding:44px 18px 34px;text-align:center;
}
/* 번호 배지는 카드 상단 테두리에 걸치게 — 한글은 하강부가 없어 line-height 만으로는
위로 떠 보이므로 아래 패딩을 1px 더 줘서 광학적으로 가운데 맞춘다 */
.cp_stepNum{
position:absolute;top:-14px;left:50%;transform:translateX(-50%);
min-width:28px;height:28px;padding:0 8px;box-sizing:border-box;
background:var(--mBlue, #2D71EC);color:#fff;border-radius:6px;
font-size:14px;font-weight:700;line-height:28px;
}
.cp_stepName{font-size:17px;font-weight:700;color:#1a1a1a;}
.cp_stepTxt{margin-top:20px;font-size:14px;color:#666;line-height:1.75;word-break:keep-all;}
/* ---------- 부서별 책임자 ---------- */
.cp_deptList{display:flex;gap:22px;margin-top:52px;list-style:none;padding:0;}
.cp_deptCard{
flex:1 1 0;min-width:0;
border:1px solid #e5e8ee;border-radius:10px;background:#fff;
padding:30px 16px 26px;text-align:center;
}
.cp_deptIcon{height:38px;margin-bottom:18px;}
.cp_deptIcon svg{width:44px;height:38px;display:inline-block;}
.cp_deptName{font-size:16px;font-weight:700;color:#1a1a1a;word-break:keep-all;}
.cp_deptStaff{margin-top:18px;font-size:14px;font-weight:700;color:var(--mBlue, #2D71EC);}
.cp_deptPhone{margin-top:6px;font-size:15px;font-weight:700;color:#1a1a1a;letter-spacing:-0.01em;}
/* ---------- 문자 보내기 버튼 ---------- */
.cp_smsBtn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
margin-top:16px;padding:0 18px;height:36px;
background:var(--mBlue, #2D71EC);color:#fff;border:0;border-radius:5px;
font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
transition:background .2s;
}
.cp_smsBtn:hover{background:#1f5bd0;}
.cp_smsBtn:focus-visible{outline:3px solid #ffb400;outline-offset:2px;}
.cp_smsBtn .cp_arrow{font-size:13px;font-weight:400;line-height:1;}
/* 실번호가 아직 등록되지 않은 담당자 — 죽은 버튼을 누르게 두지 않는다 */
.cp_smsBtn[disabled]{background:#c9cfda;cursor:not-allowed;}
.cp_smsBtn[disabled]:hover{background:#c9cfda;}
/* ---------- 안내 스트립 ---------- */
.cp_notice{
display:flex;align-items:flex-start;gap:12px;
margin-top:34px;padding:18px 22px;border-radius:8px;
background:#eaf1ff;color:#33456b;font-size:14px;line-height:1.6;word-break:keep-all;
}
.cp_notice .cp_noticeIcon{flex:0 0 auto;width:18px;height:18px;margin-top:1px;}
/* ---------- 대표 섹션 ---------- */
.cp_ceoSec{margin-top:150px;}
.cp_ceoTxt{margin-top:34px;font-size:15px;color:#555;line-height:1.85;word-break:keep-all;}
.cp_ceoBtn{margin-top:44px;height:38px;padding:0 20px;}
/* 2026-08-20 클라 punch list 7: 버튼 위 44px 인데 아래가 34px 라 하늘색 바가 붙어 보였다.
.cp_notice 는 '부서별 책임자' 섹션 바와 공용이므로 반드시 .cp_ceoSec 로 스코프할 것 */
.cp_ceoSec .cp_notice{margin-top:60px;}
/* ---------- PC 폴백 팝업 ----------
sms: 스킴은 데스크톱 브라우저에서 아무 일도 일어나지 않는다(핸들러 없음).
버튼이 먹통으로 보이지 않도록 번호를 띄우고 복사할 수 있게 한다. */
.cp_smsPop{
display:none;position:fixed;inset:0;z-index:9999;
background:rgba(0,0,0,.45);
align-items:center;justify-content:center;padding:20px;
}
.cp_smsPop.on{display:flex;}
.cp_smsPopBox{
width:100%;max-width:380px;background:#fff;border-radius:12px;padding:28px 24px 22px;
box-shadow:0 12px 34px rgba(0,0,0,.2);text-align:center;position:relative;
}
.cp_smsPopTitle{font-size:17px;font-weight:700;color:#1a1a1a;}
.cp_smsPopDesc{margin-top:12px;font-size:13px;color:#777;line-height:1.65;word-break:keep-all;}
.cp_smsPopPhone{
margin-top:18px;padding:14px 10px;border-radius:8px;background:#f5f7fb;
font-size:20px;font-weight:700;color:#1a1a1a;letter-spacing:0.02em;
}
.cp_smsPopPreset{
margin-top:12px;padding:12px 14px;border-radius:8px;background:#f5f7fb;
font-size:13px;color:#555;line-height:1.6;text-align:left;word-break:keep-all;
}
.cp_smsPopBtns{display:flex;gap:8px;margin-top:20px;}
.cp_smsPopBtns button{
flex:1;height:42px;border:0;border-radius:6px;font-size:14px;font-weight:700;
font-family:inherit;cursor:pointer;
}
.cp_popCopy{background:var(--mBlue, #2D71EC);color:#fff;}
.cp_popClose{background:#eceff4;color:#444;}
.cp_smsPopX{
position:absolute;top:10px;right:14px;border:0;background:none;
font-size:22px;line-height:1;color:#aaa;cursor:pointer;
}
/* ============================================================
반응형
배너 3종 교체 지점은 홈 메인 배너와 동일하게 1199 / 767 로 맞춘다.
(main_index_res2.css 의 .main_banner_pc/tab/mo 규칙과 같은 경계)
============================================================ */
@media all and (max-width:1200px){
/* 1200 래퍼가 깨지면 59px 인셋도 의미가 없다 — 좌우 20px 로 되돌린다.
경계는 반드시 1200 이어야 한다. 1240 으로 두면 1201~1240 구간에서만 인셋이 먼저 풀려
같은 규칙을 쓰는 archive_home.css / operation_data.css 와 우측 기준선이 최대 59px 어긋난다. */
.cp_container{width:100%;padding:0 20px;box-sizing:border-box;}
}
@media all and (max-width:1199px){
.cp_bannerBox img.cp_banner_pc{display:none;}
.cp_bannerBox img.cp_banner_tab{display:block;}
.cp_stepList, .cp_deptList{gap:16px;}
.cp_stepCard{padding:40px 12px 28px;}
.cp_deptCard{padding:26px 10px 22px;}
.cp_stepTxt{font-size:13px;}
.cp_deptPhone{font-size:14px;}
}
@media all and (max-width:900px){
/* 4열을 2열로. 카드 안 문구가 3~4줄이라 900 아래에서 4열이면 글자가 세로로 무너진다 */
.cp_stepList, .cp_deptList{flex-wrap:wrap;}
.cp_stepCard, .cp_deptCard{flex:0 0 calc((100% - 16px)/2);}
.cp_stepList{margin-top:44px;row-gap:32px;}
.cp_deptList{row-gap:20px;}
.cp_sec{margin-top:72px;}
.cp_ceoSec{margin-top:100px;}
}
@media all and (max-width:767px){
.cp_bannerBox img.cp_banner_tab{display:none;}
.cp_bannerBox img.cp_banner_mo{display:block;}
.cp_bannerBox{margin-top:20px;border-radius:14px;}
.cp_wrap{padding-bottom:80px;}
.cp_secTitle{font-size:20px;}
.cp_secDesc{font-size:14px;}
.cp_stepName{font-size:15px;}
.cp_stepTxt{margin-top:14px;font-size:12.5px;line-height:1.7;}
.cp_deptName{font-size:14px;}
.cp_deptStaff{margin-top:14px;font-size:13px;}
.cp_deptPhone{font-size:13.5px;}
.cp_smsBtn{height:34px;padding:0 14px;font-size:13px;}
.cp_notice{padding:14px 16px;font-size:13px;gap:9px;}
.cp_ceoTxt{font-size:14px;line-height:1.8;}
/* 2026-09-01 클라 "줄바꿈 부자연스러움": PC 폭 기준으로 넣은
이 모바일에서는
이미 접힌 문장을 한 번 더 끊어 '있거나,' 한 어절만 남긴다(실기기 한글 폰트가
헤드리스보다 넓어 390px 렌더에서는 재현이 안 되고 실제 폰에서만 보인다).
모바일에서는
을 죽이고 word-break:keep-all 이 어절 경계에서 접게 둔다. */
.cp_ceoTxt br{display:none;}
/* 2026-09-04 클라 요청(모바일 2열)에 맞춰 단계 카드도 같은 처리를 한다.
문구의
은 PC 폭(카드 ~280px) 기준이라 2열 카드 안에서는 강제 개행이
이미 접힌 줄을 한 번 더 끊는다. JSP 쪽
뒤에는 공백을 한 칸 넣어뒀다
(PC 에서는 줄머리 공백이라 렌더에 영향 없음). */
.cp_stepTxt br{display:none;}
.cp_ceoBtn{margin-top:32px;}
.cp_ceoSec .cp_notice{margin-top:44px;}
}
@media all and (max-width:480px){
/* 2026-09-04 클라 punch list: 모바일도 한 줄에 2장.
1열로 떨어뜨렸던 이유(카드 문구가 세로로 무너짐)는 위 767 블록에서 강제 개행을
죽여 해소했다. 남은 건 폭 — 390px 에서 카드 내부는 gap 16 / padding 12 로 두면
141px 밖에 안 남아 '살피겠습니다.' 같은 한 어절도 아슬아슬하다.
gap 과 좌우 패딩을 줄여 내부 폭을 152px 로 벌리고 글자를 한 단계 줄인다. */
.cp_stepList, .cp_deptList{gap:10px;}
.cp_stepCard, .cp_deptCard{flex:0 0 calc((100% - 10px)/2);}
.cp_stepCard{padding:34px 8px 24px;}
.cp_deptCard{padding:22px 6px 20px;}
.cp_stepList{margin-top:38px;row-gap:30px;}
.cp_deptList{row-gap:12px;}
/* 이름은 어절 경계에서만 접는다. keep-all 이 없으면 한글은 아무 데서나 끊겨
'고객품질 혁' / '신팀' 처럼 쪼개진다 */
.cp_stepName{font-size:14px;word-break:keep-all;}
.cp_stepTxt{margin-top:12px;font-size:12px;}
.cp_deptName{font-size:13.5px;}
.cp_deptStaff{margin-top:12px;font-size:12.5px;}
.cp_deptPhone{font-size:12.5px;}
.cp_deptIcon{height:32px;margin-bottom:14px;}
.cp_deptIcon svg{width:37px;height:32px;}
/* 대표 버튼은 폭이 남으므로 카드 안 버튼만 줄인다 */
.cp_deptCard .cp_smsBtn{margin-top:12px;height:32px;padding:0 10px;font-size:12px;gap:5px;}
}