/* selectwines.ca 정적 재구축 v2 — 23차 라이브 정밀 정합: 컨테이너 1100, 헤더 100px, 라이브 실측 타이포/버튼/메뉴 */
@font-face{font-family:'DMSans-Regular';src:url('/assets/fonts/DMSans-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:'DMSans-Bold';src:url('/assets/fonts/DMSans-Bold.ttf') format('truetype');font-display:swap}
@font-face{font-family:'AbrilFatface-Regular';src:url('/assets/fonts/AbrilFatface-Regular.ttf') format('truetype');font-display:swap}
:root{
--red:#c20f2f;
--dark:#252232;
--ink:#262626;
--gray:#565c61;
--gray2:#393939;
--body:'DMSans-Regular',sans-serif;
--bold:'DMSans-Bold',sans-serif;
--disp:'AbrilFatface-Regular',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);font-size:16px;line-height:1.65;color:#393939;background:#fff;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
h1,h2{font-family:var(--disp);font-weight:400;color:var(--ink);letter-spacing:1px}
h3{font-family:var(--disp);font-weight:400;color:#303030}
h4,h5,h6{font-family:var(--bold);font-weight:700;color:var(--ink)}
p{margin:0 0 20px}
[hidden]{display:none!important}
/* ---------- 콘텐츠 그리드 (29차 라이브 실측 = Bridge 계단, IVF와 동일: ≥1500 1400 / 1100 / ≤1200 950 / ≤1000 768 / ≤768 600 / ≤600 420 / ≤480 300 / ≤350 95%) ---------- */
:root{--gw:1100px}
@media(min-width:1500px){:root{--gw:1400px}}
@media(max-width:1200px){:root{--gw:950px}}
@media(max-width:1000px){:root{--gw:768px}}
@media(max-width:768px){:root{--gw:600px}}
@media(max-width:600px){:root{--gw:420px}}
@media(max-width:480px){:root{--gw:300px}}
/* ---------- 헤더 (29차 라이브 실측: 높이 100(FR ≤600 = 3행 300), 로고 182×90 y5 / ≤1000 162×80 y10,
내비 li>a lh100 패딩 0 10, 13px/600/ls1 #9d9d9d, FA 24px 글리프, 필 3px/30r 53 높이, 햄버거 13×2 ±4 #9d9d9d) ---------- */
header.site{position:relative;z-index:80;background:#fff}
.hwrap{width:var(--gw);margin:0 auto;height:100px;display:flex;align-items:center;justify-content:space-between;position:relative}
@media(min-width:1001px) and (max-width:1200px){.hwrap{width:100%;padding:0 45px}}
@media(min-width:1000px) and (max-width:1000px){.hwrap{width:100%}} /* sw-header-1000: 라이브 Bridge는 (min-width:1000px) and (max-width:1200px){.header_bottom .container_inner{width:100%}} 가 (max-width:1000px) 모바일 헤더 규칙과 정확히 1000px에서 겹친다 → 헤더 컨테이너만 100%·패딩 0(로고 x0, 햄버거 x972). 999 = 768 그리드, 1001 = 패딩 45. 본문·CTA·푸터는 1000에서도 768 */
.logo{display:flex;align-items:center;height:100px}
.logo img{height:90px;width:auto}
header.site .logo-w{display:none}
.topnav{display:flex;align-items:center;flex-wrap:wrap;margin-right:28px}
.topnav a{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#9d9d9d;padding:0 10px;line-height:100px;height:100px}
.topnav .lang{padding:0 14px 0 10px} /* 라이브 WPML: span 18 + 뒤 공백 ≈4 */
.topnav .soc{padding:0 17px 0 10px;display:flex;align-items:center}
.topnav .soc svg{width:20.57px;height:24px;margin:-10px 1px 0 0;fill:#9d9d9d;display:block}
.topnav .hbtn{height:auto;font-family:var(--bold);color:var(--red);border:3px solid var(--red);border-radius:30px;padding:15px 30px;line-height:17px;margin:23px 10px 24px;transition:.2s} /* 라이브 li 높이 100 안의 필 53 @y23 */
.topnav .hbtn:hover{background:var(--red);color:#fff}
.topnav a:hover{color:var(--red)}
.topnav a:hover svg{fill:var(--red)}
.burger{position:absolute;right:0;top:41.5px;background:none;border:0;cursor:pointer;width:28px;height:18px;padding:0 0 0 8px}
@media(min-width:1001px) and (max-width:1200px){.burger{right:45px}}
.burger .line{position:absolute;left:8px;width:13px;height:2px;background:#9d9d9d;transition:.25s}
.burger .line:nth-child(1){top:4.5px}.burger .line:nth-child(2){top:8.5px}.burger .line:nth-child(3){top:12.5px}
.burger:hover .line{background:var(--red)}
@media(max-width:1000px){
.logo img{height:80px}
html[lang=en] .topnav .hbtn,.topnav .hbtn.od{display:none} /* 라이브 인라인 CSS: EN 필 2개 + FR CONTACT 숨김, FR TÉLÉCHARGER 유지 */
}
@media(min-width:601px) and (max-width:768px){ /* 라이브 FR: 내비가 한 줄 유지, 햄버거 왼쪽 끝에서 왼쪽으로 넘쳐 로고와 겹침(768 로고 84 / 필 371) */
.logo{flex-shrink:0}
.topnav{flex-wrap:nowrap;position:absolute;right:28px;top:0;margin-right:0}
}
@media(max-width:600px){
.hwrap{width:420px;margin:0 0 0 max(45px, calc((100% - 420px) / 2));height:auto;min-height:100px;flex-wrap:wrap}
.topnav{flex-shrink:1}
}
@media(max-width:480px){.hwrap{width:calc(100% - 50px);margin:0 auto}}
@media(max-width:420px){.hwrap{width:calc(100% - 30px)}}
/* 메뉴 열림: 헤더가 오버레이 위로, 로고·내비 숨김, 햄버거 = 흰 X (라이브에는 별도 닫기 버튼 없음) */
body.menu-open header.site{z-index:95;background:transparent}
body.menu-open .logo,body.menu-open .topnav{visibility:hidden}
body.menu-open .burger .line{background:#fff}
body.menu-open .burger .line:nth-child(1){top:8.5px;transform:rotate(45deg)}
body.menu-open .burger .line:nth-child(2){opacity:0}
body.menu-open .burger .line:nth-child(3){top:8.5px;transform:rotate(-45deg)}
/* ---------- 팝업 메뉴 (29차 라이브 실측: 중앙 정렬, 로고 226, EST 380/#fff, 23px/lh55 ls2(≤768 .7em), 활성 색 없음,
spacer 380×40 하단 1px, 소셜 40 흰 원 18px #252232, 필 15px lh40 패딩 0 20 / 높이 ≤870 = 축소판) ---------- */
.popup-menu{position:fixed;inset:0;background:rgba(37,34,50,.95);z-index:90;display:none;overflow-y:auto}
body.menu-open .popup-menu{display:flex}
body.menu-open{overflow:hidden}
.popup-menu .inner{margin:auto;width:100%;display:flex;flex-direction:column;align-items:center;padding:50px 0}
.popup-menu .mlogo{width:226px;display:block}
.popup-menu .mest{border:0;border-top:1px solid #fff;width:380px;max-width:100%;margin:16px auto 40px;text-align:center}
.popup-menu .mest legend{font-family:var(--body);font-weight:400;font-size:14px;letter-spacing:normal;line-height:26px;padding:0 10px;margin:0 auto;color:#fff}
.popup-menu ul{list-style:none;text-align:center;width:100%}
.popup-menu .mlink{display:block;font-family:var(--bold);font-weight:500;font-size:23px;line-height:55px;letter-spacing:2px;text-transform:uppercase;color:#fff}
.popup-menu .mlink:hover{color:#d31145}
.popup-menu li{height:56.8px} /* 라이브 행 56.8 (a lh55 + 줄 상자 여분) */
.popup-menu .mspacer{width:380px;max-width:100%;height:41px;border-bottom:1px solid #fff}
.popup-menu .msocial{display:flex;margin:20px 0 0}
.popup-menu .msocial a{width:40px;height:40px;margin:0 10px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;transition:.2s}
.popup-menu .msocial a:hover{background:var(--red)}
.popup-menu .msocial svg{height:18px;fill:#252232}
.popup-menu .msocial svg.fb{width:10.29px}.popup-menu .msocial svg.ig{width:15.43px}
.popup-menu .msocial a:hover svg{fill:#fff}
.popup-menu .mpill{display:block;margin-top:10px;text-align:center;background:var(--red);color:#fff;font-family:var(--bold);font-size:15px;letter-spacing:1px;text-transform:uppercase;line-height:40px;padding:0 20px;border-radius:30px}
.popup-menu .mpill:hover{background:#a30d28}
@media(max-width:768px){.popup-menu .mlink{font-size:16.1px}}
@media(max-height:870px){
.popup-menu .mlogo{width:130px}
.popup-menu .mest{margin-bottom:10px}
.popup-menu .mlink{font-size:18px;line-height:26px}
.popup-menu li{height:27.5px}
.popup-menu .mspacer{height:21px}
.popup-menu .msocial{margin-top:10px}
.popup-menu .msocial a{width:28px;height:28px}
.popup-menu .msocial svg{height:12px}
.popup-menu .msocial svg.fb{width:6.86px}.popup-menu .msocial svg.ig{width:10.29px}
}
@media(max-height:870px) and (max-width:768px){.popup-menu .mlink{font-size:12.6px}}
/* ---------- back-to-top (라이브 Bridge #back_to_top: fixed r25 b65, 52 + 2px #e8e8e8 원, fa-arrow-up 22px #b0b0b0) ---------- */
#back_to_top{position:fixed;right:25px;bottom:65px;z-index:60;width:56px;height:56px;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
#back_to_top.on{opacity:1;visibility:visible}
body.menu-open #back_to_top{visibility:hidden!important}
#back_to_top span{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border:2px solid #e8e8e8;border-radius:52px;transition:background .3s}
#back_to_top:hover span{background:#e8e8e8}
#back_to_top svg{width:20.43px;height:22px;fill:#b0b0b0}
/* ---------- 공용 섹션 (컨테이너 1100 = 라이브 grid_section) ---------- */
.wrap{width:var(--gw);margin:0 auto}
section.content{padding:80px 0}
section.content p{font-size:18px;line-height:28px}
/* 섹션 제목 = 라이브 .htag h2: Abril 32/32 ls1 (≤1366 전 폭 동일, 1367–1440 45, ≥1441 60) + 구분선 100×4 위아래 40 (X7) */
.sec-title{position:relative;font-size:32px;line-height:32px;text-align:center;margin-bottom:84px}
.sec-title::after{content:"";position:absolute;left:50%;top:calc(100% + 40px);width:100px;height:4px;margin-left:-50px;background:#262626}
@media(min-width:1367px){.sec-title{font-size:45px;line-height:45px}}
@media(min-width:1441px){.sec-title{font-size:60px;line-height:60px}}
.qbutton{display:inline-block;font-family:var(--bold);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;padding:15px 30px;line-height:13px;border:3px solid var(--red);color:var(--red);border-radius:30px;transition:.2s;cursor:pointer;background:transparent}
.qbutton:hover{background:var(--red);color:#fff}
.qbutton.red{background:var(--red);color:#fff}
.qbutton.red:hover{background:#a30d28;border-color:#a30d28}
.qbutton.white{background:#fff;border-color:#fff;color:var(--red)}
.qbutton.white:hover{background:var(--red);border-color:var(--red);color:#fff}
.fltr{float:right}
.fltl{float:left}
/* ---------- 페이지 배너(서브페이지 공통) ---------- */
/* ---------- 내부 페이지 배너 (C3 X6 라이브 실측 = WPBakery 사진 행 + .blue-rect 띠) ----------
사진 행: 전폭(x −15…vw+15) cover, 오른쪽 가운데(contact ≤768 20%), 패딩 80(services·news ≤1366 40), 테두리 없음.
띠 #252232: 사진 뒤(z −1) absolute top 40·left 2vw−15·높이 500(≤768 400, ≤736 없음) → 사진 아래로 삐져나온 부분만 보임.
높이 = 패딩 + 제목 32 + 40 + 부제 줄×28 + 간격(100 / partners 180 / news 185) + 버튼 줄×85 + 패딩 (+ ≤767 빈 열마다 1). 배너 뒤 여백 40(partners 120, news 0). */
.page-banner{position:relative;padding:80px 0;margin-bottom:40px;overflow-x:clip}
.page-banner::before{content:'';position:absolute;top:0;bottom:0;left:-15px;right:-15px;background:var(--bg) 100% 50%/cover no-repeat}
.page-banner.nophoto::before{background:var(--dark)}
.page-banner::after{content:'';position:absolute;z-index:-1;top:40px;left:calc(2vw - 15px);width:calc(98vw + 15px);height:500px;background:#252232}
.pb-in{position:relative;width:var(--gw);margin:0 auto}
.pb-row{display:flow-root;margin:0 -15px}
.pb-col{min-height:1px;padding:0 15px}
.pb-in>.pb-row:first-child{margin-bottom:100px}
.page-banner h1{font-size:32px;line-height:32px;letter-spacing:1px;color:#fff;margin:0 0 40px}
.page-banner .sub{font-size:18px;line-height:28px;color:#fff;margin:0}
.page-banner .pb-t>*{margin-left:60px}
.page-banner.nomar .pb-t>*{margin-left:0}
.page-banner.g180 .pb-in>.pb-row:first-child{margin-bottom:0}
.page-banner.g180 .pb-t:first-child{padding-bottom:180px}
.page-banner.g185 .pb-in>.pb-row:first-child{margin-bottom:185px}
.page-banner.g180{margin-bottom:120px}
.page-banner.g185{margin-bottom:0}
.pb-btns{text-align:center}
.pb-b .ci{line-height:0;padding-bottom:40px}
.page-banner.cm5 .pb-b .ci{margin:5px;width:100%} /* 라이브 vc_column-inner width:100% 유지 */
.abtn{display:inline-block;vertical-align:top;box-sizing:content-box;width:200px;padding:15px;border:1px solid #262626;border-radius:20px;background:#fff;color:#565c61;font-family:var(--bold);font-size:13px;line-height:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;text-align:center;white-space:nowrap;transition:all .3s}
.abtn:hover{color:#fff;background:var(--red);border:none}
.page-banner.sus .abtn{width:95%;margin-left:60px}
@media(min-width:768px){
.pb-col{float:left;width:100%}
.pb-b{width:50%}
.page-banner.sus .pb-b{width:16.66666667%}
}
@media(min-width:992px){.pb-t,.pb-b{width:50%}.pb-b{width:25%}}
@media(max-width:1366px){.page-banner.p40{padding:40px 0}}
@media(min-width:1367px){.page-banner h1{font-size:45px;line-height:45px}}
@media(min-width:1441px){.page-banner h1{font-size:60px;line-height:60px}}
@media(max-width:768px){
.page-banner::after{height:400px}
.page-banner .pb-t>*,.page-banner.sus .abtn{margin-left:0}
#contact-banner::before{background-position:20% 50%}
}
@media(max-width:736px){.page-banner::after{display:none}}
/* services "for partners" (라이브 행 패딩 ≤1366 40 / 80, 제목 위 100(≤1366), 소개 = div 18/27 #393939 가운데) */
.svc-sec{padding:80px 0;overflow-x:clip} /* 769–797 .icons-grid −15 여백 가로 넘침 방지 */
@media(max-width:1366px){.svc-sec{padding:40px 0}.svc-a .sec-title{margin-top:100px}}
.svc-intro{text-align:center;font-size:18px;line-height:27px;color:#393939}
/* about 스토리 2컬럼 (라이브 col-6 535px) */
/* ---------- CTA 밴드 (라이브: 뱃지 158 + h2 32 + 레드 보더 버튼) ---------- */
.cta{background:var(--dark);padding:40px 0;margin-bottom:100px;color:#fff} /* 라이브: 밴드 뒤 흰 vc_empty_space 100 */
@media(min-width:1367px){.cta{padding:80px 0}}
/* 29차 라이브 실측: WPBakery 열 2|5|2|3 (열 패딩 15, 행 −15), 769–991 = sm-12 네 열이 flex로 균등 축소, ≤768 적층 */
.cta .in{width:calc(var(--gw) + 30px);margin:0 0 0 calc(50% - var(--gw) / 2 - 15px);display:flex;align-items:center} /* 행 −15: 뷰포트보다 넓을 때도 라이브처럼 왼쪽으로 삐져나감(780 x−9) */
section.cta,footer.site{overflow-x:clip}
.cta .in>div{padding:0 15px;flex:0 0 auto}
.cta .c-img{width:calc(100% * 2 / 12)}.cta .c-h{width:calc(100% * 5 / 12)}.cta .c-sp{width:calc(100% * 2 / 12)}.cta .c-btn{width:calc(100% * 3 / 12);text-align:right}
.cta img{width:auto;max-width:100%}
.cta .qbutton{white-space:nowrap} /* Bridge .qbutton 기본 = 한 줄(FR 홈 1292 버튼 261 > 열 252.5 넘침 그대로) */
.cta h2{color:#fff;font-size:60px;line-height:60px;letter-spacing:1px;text-transform:none}
@media(max-width:1440px){.cta h2{font-size:45px;line-height:45px}}
@media(max-width:1366px){.cta .in>.c-h{padding-top:40px;padding-bottom:40px}.cta h2{font-size:32px;line-height:32px}}
@media(max-width:1210px){.cta:not(.nb) .qbutton{display:block;width:100%;line-height:110%;white-space:normal}} /* 라이브 #cta-section 한정(.nb = id 없는 밴드) */
@media(max-width:991.98px){.cta .in>div{flex:0 1 100%;width:100%}}
@media(max-width:768px){
.cta .in{flex-direction:column;align-items:stretch;text-align:center}
.cta .c-btn{text-align:center}
.cta img{margin:0 auto}
.cta:not(.nb) img{width:100px}
}
@media(min-width:768px){.c-sm-9{width:75%}}
.sp80{height:80px}
/* ---------- 파트너 페이지 (C3 라이브 실측 = WPBakery 행/열 미러, 스펙 = phaseB/specs/sw-partners/SPEC.md) ----------
배너(여백 120) → 검색 행(sm-9 입력+드롭다운 2 | sm-3 RESET·SEARCH, z 50 — 라이브는 행 999가 .content(100) 안이라 팝업 메뉴(105) 아래. 여기서는 메뉴 90·헤더 80·back-to-top 60보다 낮게) → 100 → #partners-search-result(국가 h3 행 + 카드 3열 행 반복) → 80 → CTA.
클래스·id는 라이브 그대로(search_title, search-dropdowns, selected-dropdown, country-name, partner-list …) — 측정 도구가 라이브·정적 양쪽에 같은 선택자를 쓴다. */
.ptn-search{position:relative;z-index:50}
#search_title{display:block;width:100%;font-family:var(--bold);font-size:15px;font-weight:400;line-height:19px;letter-spacing:normal;padding:15px 20px;border:2px solid #262626;border-radius:30px;outline:none;color:#000;background:#fff}
.search-dropdowns{list-style:none;display:flow-root;margin:20px 0 0;font-size:18px;line-height:26px}
.search-dropdowns>li{width:48%}
.search-dropdowns>li:first-child{float:left}
.search-dropdowns>li:last-child{float:right}
.selected-dropdown{position:relative;padding:20px;margin:0 0 30px;border:2px solid #262626;border-radius:30px;background:#fff;cursor:pointer}
.selected-dropdown:hover{border-color:#999}
.selected-field>span{display:block;width:100%;font-family:var(--bold);font-size:15px;font-weight:400;line-height:15px;text-align:left;color:#393939}
.selected-field>i{position:absolute;top:18px;right:10px;width:10.29px;height:18px} /* FA caret-down 18px */
.selected-field>i svg{display:block;width:100%;height:100%;fill:#393939}
.selected-dropdown>ul{display:none;position:absolute;top:58px;left:0;width:100%;z-index:999;list-style:none;padding:10px;border:1px solid #262626;border-radius:10px;background:#fff;overflow:hidden;text-align:left;color:#393939}
.selected-dropdown>ul>li:hover{background:#fafafa}
.region-option{display:none}
.region-option.default,.region-option.open{display:block}
#search_reset,#search_submit{display:table;width:170px;min-width:150px;font-family:var(--bold);font-size:15px;font-weight:400;line-height:21px;padding:15px 20px;border-radius:30px;margin:0 0 20px auto;text-align:center;cursor:pointer;transition:all .3s}
#search_reset{border:2px solid #262626;background:#fff;color:#565c61}
#search_reset:hover{background:#262626;color:#fff}
#search_submit{border:2px solid #c20f2f;background:#c20f2f;color:#fff}
#search_submit:hover{background:#fff;color:#c20f2f}
.country-name{font-family:var(--disp);font-size:42px;line-height:62px;letter-spacing:2px;font-weight:400;text-transform:uppercase;color:#262626;padding:0 0 10px;margin:0 0 30px;border-bottom:1px dashed #393939}
.no-partners{font-family:var(--body);font-style:italic;font-size:17px;line-height:1.30435em;font-weight:400;letter-spacing:1px;text-transform:none;color:#c20f2f} /* 검색 결과 0건 (라이브 AJAX 응답) */
.np-col{padding:0 15px} /* 국가 선택 + 0건: 라이브 AJAX는 메시지를 15px 패딩 열 안에 출력(국가 헤딩 아래) */
.no-partners i{display:inline-block;width:17px;height:17px;margin-right:1px;vertical-align:-2.43px} /* FA warning 17px: em 상자 = 기준선 위 14.57 / 아래 2.43, 글자 간격 1 */
.no-partners i svg{display:block;width:100%;height:100%;fill:#c20f2f}
.partner-list{list-style:none;margin:0 0 30px;font-size:18px;line-height:26px}
.partner-list>li{display:block;width:100%;text-align:center}
.partner-list>li:first-child{padding:0 0 15px}
.partner-list>li:first-child>a{display:table;width:200px;margin:0 auto} /* 열이 200보다 좁으면(768: 180) 라이브처럼 오른쪽으로 20 넘침 */
.partner-list>li:first-child>a>img{width:100%;display:block}
.partner-list-name{display:none} /* 라이브: 이름은 DOM에만 있고 숨김 */
.partner-region,.partner-country,.partner-website{font-family:var(--body);font-size:16px;line-height:32px;text-transform:uppercase;color:#393939}
.partner-region>span,.partner-country>span,.partner-website>a{font-family:var(--bold)}
.partner-website>a{color:#303030;transition:color .3s}
.partner-website>a:hover{color:#c20f2f}
@media(max-width:767px){
#search_reset{float:left}
#search_submit{float:right}
.selected-dropdown{margin-bottom:20px}
}
@media(max-width:600px){.search-dropdowns>li{width:100%}}
@media(max-width:480px){#search_reset,#search_submit{float:none;display:block;width:100%;margin:0 0 30px}}
/* ---------- 푸터 (라이브: 컨테이너 1100, 링크 3열 188px, 뉴스레터 441) ---------- */
footer.site{background:#fff}
/* 29차 라이브 실측: 열 6|1|5 (Bootstrap, 행 −15), 내비 안쪽 4|4|4 + 빈 공간 40, 소셜 = 내비 블록 안(FA 28px #000),
뉴스레터 441 = h3 24/22 + p 18/18(br) + CF7(폼 상단 20 = EN 뉴스레터가 첫 폼일 때만, 그 외 5), 저작권 40/40 좌측 */
.ftop{width:calc(var(--gw) + 30px);margin:0 0 0 calc(50% - var(--gw) / 2 - 15px);display:flex;flex-wrap:wrap}
body:not(:has(section.cta,.nf404)) footer.site{padding-top:70px} /* CTA 없는 페이지(법률·포스트): 라이브 본문 끝→푸터 180 = 로컬 구조 110 + 70. 페이지 템플릿 정합은 C3 */
.ftop>div{padding:0 15px}
.fnavblk{width:50%}.fspace{width:calc(100% / 12)}.fnews{width:calc(100% * 5 / 12)}
.fnav{display:flex;margin:0 -15px}
.fnav>div{width:33.3333%;padding:0 15px 40px}
.ftop h3{font-family:var(--bold);font-size:24px;line-height:22px;letter-spacing:1px;color:#303030;margin-bottom:20px}
.ftop h4{font-family:var(--bold);font-size:13px;font-weight:400;line-height:12px;letter-spacing:1px;text-transform:uppercase;color:#303030;margin-bottom:20px}
.fnav p{margin:0;font-size:14px;line-height:28px}
.fnav a{color:#393939;font-size:14px;line-height:24px}
.fnav a:hover{color:var(--red)}
.fsocial{display:flex;height:32px}
.fsocial a{margin:0 6px;display:block}
.fsocial svg{width:24px;height:28px;fill:#000;display:block}
.fsocial a:hover svg{fill:#d31145}
.fnews>p{font-size:18px;line-height:18px;margin:0;color:#393939}
.f-form{margin:5px 0 20px}
.lang-en:not(.page-contact) .f-form{margin-top:20px}
.f-form select,.f-form input{display:block;width:280px;max-width:100%;height:54px;font-family:var(--body);font-size:16px;line-height:24px;padding:15px 30px;border:0;border-radius:30px;margin:0;background:rgba(57,57,57,.14);color:#393939}
.f-form select{margin-top:23px;background:#e3e3e3;-webkit-appearance:none;appearance:none} /* 라이브 화살표 이미지는 깨진 호스트 → 화살표 없음 */
.f-form button{display:block;margin-top:30px;height:48px;font-family:var(--bold);font-size:13px;font-weight:400;line-height:48px;letter-spacing:1px;text-transform:uppercase;background:var(--red);color:#fff;border:0;padding:0 30px;border-radius:30px;cursor:pointer;min-width:150px;transition:all .1s linear} /* 라이브 실측 36차 */
.f-form button:hover{background:#a30d28}
.fbottom .in{width:var(--gw);margin:0 auto;padding:40px 0;font-size:14px;line-height:24px;color:#393939;text-align:left}
.fbottom a{color:var(--gray2)}
.fbottom a:hover{color:var(--red)}
@media(max-width:768px){
.fnavblk,.fnews{width:100%}
.fspace{display:none}
#footer-area br{display:none} /* 라이브 전역 @768 br 숨김 */
.ftop h4{letter-spacing:0}
.f-form select{margin-top:5px}
.f-form button{margin-top:50px}
}
@media(max-width:480px){
.fnav{flex-direction:column}
.fnav>div{width:100%;text-align:center}
#footer-area .fnav br{display:inline}
.fsocial{height:38px}
}
/* ---------- 뉴스 ---------- */
/* ---------- 뉴스 목록 (/news/, /fr/news/) — live = WPBakery grid_section row #news-list + Content Views(pt-cv) 2-col grid ----------
Row = 80 spacer + cards + 100 spacer; the following Instagram row (feed empty on live, token expired) still occupies 1px
(vc_col min-height 1px) → margin-bottom 1.
Cards = same plugin markup/CSS as the post pages' "Related Posts" → .rel-* classes; font context 18/26 (as .post) so .rel-btn .67em = 12.06px.
Thumbnails: live serves 345×198 hard crops; local news-N.jpg are the 1199×800 originals → same centre crop via aspect-ratio + object-fit. */
.news-list{padding:80px 0 100px;margin-bottom:1px;font-size:18px;line-height:26px;color:#393939}
.news-list .rel-thumb img{aspect-ratio:345/198;object-fit:cover}
.news-list .rel-cw h4 a{font-weight:600;transition:color .1s linear} /* live computed 600 here (700 on post pages; same DMSans-Bold face) */
.news-list .rel-cw h4 a:hover{color:#d31145} /* live title hover rgb(211,17,69), color .1s linear */
@media(max-width:479px){.news-list .rel-cw{margin-bottom:0;word-break:normal}} /* live list ≤479: colwrap block, margin 0 (post pages: 10), word-break normal */
/* ---------- 뉴스 포스트 (C3 라이브 실측 = Bridge blog_single + 사이트 커스텀 CSS: 992 제목·본문 패딩 / 768 썸네일 여백 / 480 카드 / h4 768·600) ----------
상단 = 헤더 뒤 스페이서 80 + post_text_inner 23. 하단 = yarpp mb 18 + 스페이서 100 +
26 − 푸터 상단 70(CTA 없는 페이지) = 74 */
.post{padding:103px calc(50% - var(--gw) / 2) 74px;font-size:18px;line-height:26px;color:#393939;overflow-x:clip} /* 전폭 + 패딩으로 그리드 폭: 라이브 .wrapper overflow:hidden처럼 화면 가장자리에서 잘림(PG 긴 URL), 레이아웃 뷰포트 확장 없음 */
.news-title{font-size:1.75em;line-height:1.2em;letter-spacing:1px;text-transform:uppercase;color:#262626;padding:0}
.news-image{margin-top:60px}
.news-content{margin-top:60px}
.news-content p{font-size:18px;line-height:28px;margin:0 0 22px}
.news-content p a{color:#303030}
.rel{padding-top:30px}
.single-tags{margin-top:26px}
.tags-text{font-size:14px;font-style:italic}
.tags-text h5{display:inline-block;font-family:var(--body);font-size:14px;line-height:22px;font-weight:400;letter-spacing:1px;text-transform:capitalize;color:#303030;margin:0 0 10px}
.tags-text a{letter-spacing:1px;color:#303030}
.rel-h{font-family:var(--bold);font-weight:700;font-size:1.33em;line-height:1.33em;letter-spacing:0;text-align:center;text-transform:uppercase;color:#565c61;margin:40px 0;padding:10px 0;border-top:2px dashed #ccc;border-bottom:2px dashed #ccc}
.rel-row{display:flow-root;margin:0 -15px} /* Bootstrap 행 −15 + 부동 열(col-md-6 / sm·xs-12) */
.rel-item{float:left;width:100%;min-height:1px;padding:0 15px 15px;overflow:hidden}
.rel-thumb img{float:left;margin:0 0 10px} /* 1199×800 원본 → width 345(max 100%)·height auto */
.rel-cw{display:table-cell;word-break:break-word} /* 표 셀 = 썸네일 옆 공간이 최소 폭(버튼) 이상일 때만 옆에, 아니면 아래로 (라이브 동작 그대로) */
.rel-cw h4{font-family:var(--body);font-size:18px;line-height:19.8px;font-weight:500;letter-spacing:1px;margin:0 0 10px}
.rel-cw h4 a{font-family:var(--bold);font-weight:700;font-size:26px;line-height:32px;letter-spacing:1px;color:#717171}
.rel-btn{display:inline-block;vertical-align:middle;white-space:nowrap;margin:10px 0 20px;padding:4px 20px;border:2px solid var(--red);border-radius:100px;background:var(--red);color:#fff;font-family:var(--body);font-weight:700;font-size:.67em;line-height:2em;letter-spacing:0;text-transform:uppercase;text-align:center}
.rel-btn:hover{background:#fff;color:var(--red);transition:all .3s}
@media(min-width:992px){
.news-title{font-size:4em;padding:0 40px}
.news-content{padding:0 40px}
.rel-h{font-size:2.33em;letter-spacing:14px;margin:80px 0}
.rel-item{width:50%}
}
@media(min-width:768px){.rel-thumb img{margin-right:40px}}
@media(max-width:768px){
.post{padding-bottom:48px} /* 라이브 전역 ≤768 br{display:none!important} → 글 끝
26 사라짐 */
.post br{display:none}
.rel-cw h4{letter-spacing:0}.rel-cw h4 a{font-size:20px;line-height:26px;letter-spacing:0}
}
@media(max-width:600px){.rel-cw h4 a{font-size:18px;line-height:24px}}
@media(max-width:480px){.single-tags{margin-top:35px}}
@media(max-width:479px){.rel-cw{display:block;clear:both;margin-bottom:10px}}
/* ---------- 반응형 ---------- */
/* ---------- v1.2: 서브페이지 공통 ---------- */
.wrap.narrow{max-width:960px}
.wrap.center,.center{text-align:center}
/* services 원형 행 (라이브 vc_col-sm-4|1|7, consumers 7|1|4): 행 패딩 80(≤1366 40), 이미지 407×402 max 100%(retailers·restaurateurs 오른쪽 정렬),
구분선 열 높이 68 = 3px #565c61 @35, 제목 32/32(blue #252232 / brown 오른쪽), 40, 본문 p 18/28(consumers div 18/27, ≤768 16/24), 40, 버튼. ≤767 적층(consumers는 이미지→선→글) */
.svc-row{padding:80px 0;overflow-x:clip} /* .sr −15 행 넘침 방지(라이브 .wrapper_inner overflow:hidden) */
@media(max-width:1366px){.svc-row{padding:40px 0}}
.sr{display:flow-root;margin:0 -15px}
.sr>div{min-height:1px;padding:0 15px}
.sr-img img{margin-left:auto}
.sr.rev .sr-img img{margin-left:0}
.sr .sr-sep{height:68px;padding-top:34.5px} /* 라이브 20 스페이서 + separator margin 10 + 줄 상자 ≈ 34.5 */
.sr-sep i{display:block;height:3px;background:#565c61}
.sr-txt h2{font-size:32px;line-height:32px;margin-bottom:40px;color:var(--ink)}
.sr-txt h2.blue{color:var(--dark)}
.sr.rev .sr-txt h2,.sr.rev .cp{text-align:right}
.sr-txt p{font-size:18px;line-height:28px;color:#393939;margin:0 0 40px}
.sr-txt .cp{font-size:18px;line-height:27px;color:#393939;margin-bottom:40px}
@media(min-width:768px){.sr>div{float:left}.sr-img{width:33.33333333%}.sr-sep{width:8.33333333%}.sr-txt{width:58.33333333%}}
@media(min-width:1367px){.sr-txt h2{font-size:45px;line-height:45px}}
@media(min-width:1441px){.sr-txt h2{font-size:60px;line-height:60px}}
@media(max-width:768px){.sr-txt .cp{font-size:16px;line-height:24px}}
@media(max-width:736px){.sr.rev{display:flex;flex-direction:column-reverse}} /* 라이브 역순 ≤736만(737–767 정순) */
/* .header-dashed: 위아래 1px 점선 #565C61, 패딩 20, h2 24/33.23 600 ls1, 뒤 스페이서 100 */
.hdash{padding:20px 0;border-top:1px dashed #565c61;border-bottom:1px dashed #565c61;text-align:center;margin-bottom:100px}
.hdash h2{font-family:var(--body);font-weight:600;font-size:24px;line-height:33.2308px;letter-spacing:1px;text-transform:uppercase;color:var(--ink)}
/* about 팀 */
/* services 아이콘 */
/* 아이콘 = q_icon_with_title: 아이콘 박스 111(img 104 + 줄 상자) + 13, h5 15/1.5714 600 ls1 #303030 mb .35em, 하단 18.
열: EN lg-2|md-4|sm-4|xs-12 → ≥1200 6 / 992–1199 3 / 768–991 3 / ≤767 1, FR sm-6 → 768–991 2. FR(.services-icons) h5 20px·최소 높이 100 */
.icons-grid{display:flow-root;margin:0 -15px;text-align:center} /* 부동 열(라이브 Bootstrap) — 높이가 다른 카드 뒤 끼임 배치까지 동일 (EN 991) */
.icard{float:left;width:100%;min-height:1px;padding:0 15px 18px}
@media(min-width:768px){.icard{width:33.33333333%}.icons-grid.fr .icard{width:50%}}
@media(min-width:992px){.icons-grid.fr .icard{width:33.33333333%}}
@media(min-width:1200px){.icard,.icons-grid.fr .icard{width:16.66666667%}}
.icard .ih{height:111px;margin-bottom:13px}
.icard img{width:104px;height:104px;margin:0 auto}
.icard h5{font-family:var(--body);font-weight:600;text-transform:uppercase;font-size:15px;letter-spacing:1px;line-height:1.5714;color:#303030;margin-bottom:.35em}
.icons-grid.fr h5{font-size:20px;min-height:100px}
/* ==== 공용 추가 제안 (site.css "C3 about·contact" 블록의 열 폭 규칙에 합칠 것) ====
c-sm-4 / c-sm-10 은 현재 어떤 페이지도 쓰지 않음(src/sw grep 0건) → 기존 페이지 영향 없음. 기존 공용 클래스 변경 없음. */
@media(min-width:768px){.c-sm-4{width:33.33333333%}.c-sm-10{width:83.33333333%}}
/* ---------- sustainability 본문 (C3 라이브 실측 = WPBakery 행/열 미러, 스펙 = SPEC_SUSTAINABILITY.md) ----------
행: environment(pd 80/80) → 이니셔티브(#fafafa) → offset(#252232) → projects → community(#fafafa) → gallery(#252232, 위 80·아래 0, 뒤 480).
열 = 공용 .vrow/.vgrid/.vin/.vc + c-sm-N(≥768 부동, ≤767 적층). 본문 p = 공용 .vrow p 18/28 #393939 여백 0, ≤768 br 숨김(공용). */
.vc.p0{padding:0} /* vc_custom …290517/…554901/…429238: column-inner 좌우 0 */
.vc.pl0{padding-left:0} /* vc_custom …561228667: 세 번째 아이콘 열 왼쪽 0 */
.sus-dark{background:#252232}
.sus-grey{background:#fafafa}
.sus-dark .sec-title,.sus-gal .sec-title{color:#fff}
.sus-dark .sec-title::after,.sus-gal .sec-title::after{background:#fff}
/* 텍스트 열(font-size-18 dark-grey): 소제목 h3 = DMSans 17/1.3043em 600 대문자 ls1 #303030 */
.sus-h{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.304347826em;letter-spacing:1px;text-transform:uppercase;color:#303030;margin:0}
.sus-h b{font-weight:900} /* FR "Défi plein air" = bolder(600→900) */
.sus-sub{margin-top:40px;padding-top:40px;border-top:1px dashed #80878d} /* subheader-dashed-top */
/* 로고 행: EN 열 안쪽 패딩 5(4면), FR 행 위 20 + 기본 열 패딩 0 15. 이미지 = min(원본 194, 열 안쪽 폭), 가운데 */
.sus-logos{text-align:center}
.sus-logos .vc.c-sm-2{padding:5px}
.sus-logos.fr{padding-top:20px}
.sus-logos.fr .vc.c-sm-2{padding:0 15px}
.sus-logos img{display:block;margin:0 auto;max-width:100%;height:auto}
/* 이니셔티브(grey_area + q_icon_list): h3 24/30 700 ls1 대문자 #565c61, 항목 mb21, 원 27 #c20f2f(FR #d31145) + FA check 18, p 15/27 pl38 #303030 (≤768 lh37 pl45) */
.sus-ini{font-family:var(--body);font-weight:700;font-size:24px;line-height:30px;letter-spacing:1px;text-transform:uppercase;color:#565c61;margin:0}
.sus-chk{margin-bottom:21px}
.sus-chk i{float:left;position:relative;width:27px;height:27px;border-radius:36px;background:#c20f2f}
html[lang=fr] .sus-chk i{background:#d31145}
.sus-chk svg{position:absolute;left:4.5px;top:4.5px;width:18px;height:18px;fill:#fff}
.vrow .sus-chk p{position:relative;font-size:15px;line-height:27px;color:#303030;padding-left:38px}
@media(max-width:768px){.vrow .sus-chk p{line-height:37px;padding-left:45px}}
/* offset(black_area): 등식 열 2|3|2|3|2 (가운데 3열 안쪽 패딩 0) */
.sus-thin h3{font-family:var(--body);font-weight:300;font-size:60px;line-height:60px;letter-spacing:1px;color:#fff;margin:0}
.sus-eq h3{font-family:var(--body);font-weight:600;font-size:45px;line-height:50px;letter-spacing:1px;color:#fff;text-align:center;margin:0}
.sus-thick h3{font-family:var(--body);font-weight:600;font-size:100px;line-height:90px;letter-spacing:1px;color:#fff;margin:0}
.sus-thick h4{font-family:var(--body);font-weight:300;font-size:40px;line-height:50px;letter-spacing:1px;color:#fff;margin:0}
@media(max-width:768px){.sus-thick h4{letter-spacing:normal}}
/* header-dashed-top: 행 위 80 + 열 패딩 80/80, 위 1px 점선 #80878d, h3 24/30 600 ls1 대문자 흰색 가운데 */
.sus-dash{padding-top:80px}
.sus-dash>div{padding:80px 0;border-top:1px dashed #80878d;text-align:center}
.sus-dash h3{font-family:var(--body);font-weight:600;font-size:24px;line-height:30px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
/* icon-box 행: margin 0 6%(뷰포트 기준) 안에 그리드 — 6% 여백 폭이 그리드보다 좁은 구간(769–872·601–681·1001–1079)은 라이브처럼 그리드가 가운데 대신 6% 지점에서 시작(오른쪽으로 최대 +32 밀림, 오른쪽 넘침은 .vrow clip) */
.sus-ib{margin:0 6%}
/* q_icon_with_title: 아이콘 부동(small 52 / medium 78 / very_large 130 폭), 글 박스 패딩 왼쪽 72/110/150 + 안쪽 10 0.
offset 행은 black_area 상속 lh90 → 아이콘 칸 높이 90·이미지 기준선 79, community는 칸 116·이미지 위 0 */
.qi{display:flow-root}
.qi-h{float:left;position:relative;height:90px}
.qi-h img{position:absolute;left:0;bottom:11px;height:auto}
.qi.s .qi-h,.qi.s .qi-h img{width:52px}
.qi.m .qi-h,.qi.m .qi-h img{width:78px}
.qi.xl .qi-h{width:130px;height:116px}
.qi.xl .qi-h img{width:130px;top:0;bottom:auto}
.qi-t{padding:10px 0 10px 72px}
.qi.m .qi-t{padding-left:110px}
.qi.xl .qi-t{padding-left:150px}
.qi h5{font-family:var(--body);font-weight:600;font-size:24px;line-height:37.7143px;letter-spacing:1px;text-transform:uppercase;color:#fff;margin:0}
.vrow .qi p{font-size:24px;line-height:28px;font-weight:300;color:#fff}
.sus-grey .qi h5,.sus-grey .qi p{color:#262626}
/* gallery(section-gallery): 위 80·아래 0, 뒤 480. 제목 뒤 70. 캐러셀 칸 높이 ≥992 500(아래 −200) / 200(−100) → 캐러셀이 어두운 띠 아래 흰 여백으로 삐져나옴 */
.sus-gal{background:#252232;padding:80px 0 0;margin-bottom:480px}
.sus-gal .sec-title{margin-bottom:114px}
.sus-gal .vgrid{display:flow-root}
.gal-box{height:200px;margin-bottom:-100px}
@media(min-width:992px){.gal-box{height:500px;margin-bottom:-200px}}
/* carousel-slider(Owl): 폭 = 그리드, 항목 폭 = (W+10)/n−10, 간격 10, 3:4 이미지, 점 margin-top 10·줄 26, 화살표 48 바깥(−48) hover 때만 */
.gcar{position:relative}
.gcar-outer{overflow:hidden;touch-action:pan-y}
.gcar-stage{display:flex;will-change:transform}
.gcar-item{flex:0 0 auto;margin-right:10px}
.gcar-item a{display:block;cursor:pointer}
.gcar-item img{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.gcar-nav button{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;padding:0;border:0;background:none;color:#80878d;opacity:0;cursor:pointer;transition:all .3s ease-in-out}
.gcar-nav svg{display:block;width:48px;height:48px;fill:currentColor}
.gcar-prev{left:-48px}.gcar-next{right:-48px}
.gcar:hover .gcar-nav button{opacity:1}
.gcar-nav button:hover{color:#870024}
.gcar-dots{margin-top:10px;height:26px;padding-top:1px;display:flex;justify-content:center}
.gcar-dots button{width:26px;height:18px;padding:0;border:0;background:none;cursor:pointer}
.gcar-dots span{display:block;width:10px;height:10px;margin:4px 8px;border-radius:9999px;background:#80878d;transition:opacity .2s ease}
.gcar-dots button.active span,.gcar-dots button:hover span{background:#870024}
/* 라이트박스(magnific-popup 미러): 배경 rgb(11,11,11) .8, 이미지 위아래 40, × 오른쪽 위, 좌우 화살표, 카운터 */
html.glb-on{overflow:hidden}
.glb,.glb-x{cursor:zoom-out}.glb-fig{cursor:pointer}
.glb{position:fixed;inset:0;z-index:1000;background:rgba(11,11,11,.8);display:flex;align-items:center;justify-content:center;padding:0 8px}
.glb[hidden]{display:none}
.glb-fig{position:relative;padding:40px 0}
.glb-fig img{display:block;max-width:100%;max-height:calc(100vh - 80px);width:auto;height:auto;margin:0 auto}
.glb-x{position:absolute;top:0;right:-6px;width:100%;height:44px;text-align:right;padding:0 6px 0 0;border:0;background:none;color:#fff;font:28px/44px Arial,Baskerville,monospace;opacity:.65;cursor:zoom-out}
.glb-x:hover,.glb-x:focus{opacity:1}
.glb-cnt{display:none}
.glb-a{position:absolute;top:50%;margin-top:-55px;width:90px;height:110px;border:0;background:none;opacity:.65;cursor:pointer}
.glb-a::before,.glb-a::after{content:"";display:block;width:0;height:0;position:absolute;left:0;top:0;margin-top:35px;margin-left:35px;border:medium inset transparent}
.glb-a::after{border-top-width:13px;border-bottom-width:13px;top:8px}
.glb-a::before{border-top-width:21px;border-bottom-width:21px;opacity:.7}
.glb-l{left:0}.glb-l::after{border-right:17px solid #fff;margin-left:31px}.glb-l::before{margin-left:25px;border-right:27px solid #3f3f3f}
.glb-r{right:0}.glb-r::after{border-left:17px solid #fff;margin-left:39px}.glb-r::before{border-left:27px solid #3f3f3f}
.glb-a:hover,.glb-a:focus{opacity:1}
@media(max-width:900px){.glb{padding:0 6px}.glb-a{transform:scale(.75)}.glb-l{transform-origin:0 50%}.glb-r{transform-origin:100% 50%}}
/* contact */
.contact-form{padding:0 15px} /* 라이브 폼은 vc_column-inner(좌우 15) 안 → 폼 폭 = 그리드 폭 */
.contact-form .hpf{position:absolute;left:-9999px;height:0;width:0;padding:0;border:0}
/* 폼 검증 UI = 라이브 CF7 실측(32차): 필드 팁 14/14 #f00 좌 20(contact 우측 정렬·푸터 좌측), 결과 박스 15/18 500 ls1 대문자 흰 글자 #f1c40f(오류)/#1abc9c(성공), 패딩 17 30 17 55, FA f12a/f087 15px left 10 top 17 */
.fld-tip{display:block;margin:0 0 0 20px;font-size:14px;line-height:14px;color:#f00;text-align:left}
.contact-form .fld-tip{text-align:right}
.form-out{position:relative;clear:both;margin:0;padding:17px 30px 17px 55px;font-family:var(--body);font-size:15px;line-height:18px;font-weight:500;letter-spacing:1px;text-transform:uppercase;text-align:center;color:#fff;background:#f1c40f}
.form-out[hidden]{display:none}
.form-out.ok{background:#1abc9c}
.form-out svg{position:absolute;left:17.3px;top:17.5px;width:5.36px;height:15px;fill:#fff}
.form-out.ok svg{left:13.6px;width:12.86px}
.f-form .form-out{margin:20px 0 -20px}
/* ---------- 법률 본문 /privacy/ · /terms/ · /fr/privacy-policy/ · /fr/terms-and-conditions/ (spec: phaseB/specs/sw-privacy-terms) ----------
라이브 = text-page 행(80/80) + 100 빈 행 › 그리드(공용 .vgrid) › wpb_text_column.font-size-18.dark-grey. 본문 마크업은 라이브 원문 그대로(인라인 style·빈 p·앵커 div 포함).
여백은 전부 padding(라이브 margin 0): p 10/10 · h3·h4 15/15 · h1 0. 목록 간격 0, ol = decimal outside + padding-left 20, ul = disc inside.
하단 110 = 라이브 180(80 + 빈 행 100) − 공용 푸터 보정 70(body:not(:has(section.cta)) footer.site). */
.legal-page{padding:80px 0 110px}
.legal{font-size:18px;line-height:27px;color:#393939}
.legal h1{font-family:var(--body);font-weight:700;font-size:30px;line-height:37.5px;letter-spacing:normal;color:#303030;margin:0}
.legal h3{font-family:var(--body);font-weight:600;font-size:18px;line-height:1.3043478em;letter-spacing:1px;text-transform:uppercase;color:#303030;margin:0;padding:15px 0}
.legal h4{font-family:var(--bold);font-weight:400;font-size:18px;line-height:32px;letter-spacing:1px;color:#303030;margin:0;padding:15px 0}
.legal p{font-size:18px;line-height:28px;color:#393939;margin:0;padding:10px 0}
.legal ol{margin:0;padding:0 0 0 20px;list-style:decimal outside}
.legal ul{margin:0;padding:0;list-style:disc inside}
.legal li{font-size:18px;line-height:27px;color:#393939;margin:0}
.legal a{color:#303030}
.legal a:hover{color:#d31145}
@media(max-width:768px){.legal h4{line-height:26px;letter-spacing:normal}}
@media(max-width:600px){.legal h4{line-height:24px}}
/* lifford 독립 레이아웃 (라이브: 로고 305px 센터, 디스플레이 태그라인, 풀폭 인트로, 흰 다이얼로그) */
body.page-lifford header.site,body.page-lifford footer.site,body.page-lifford .popup-menu{display:none}
.lifford{min-height:100vh;display:flex;flex-direction:column;background:#111}
.lf-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:16px 44px;background:#fff}
.lf-logo{grid-column:2;height:127px;width:auto}
.lf-lang{grid-column:3;justify-self:end;display:flex;gap:10px;font-family:var(--bold);font-size:14px}
.lf-lang a{color:var(--ink)}
.lf-lang a.on,.lf-lang a:hover{color:var(--red)}
.lf-hero{flex:1;background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:70px 20px}
.lf-tag{font-family:var(--disp);font-weight:400;font-size:18px;line-height:26px;letter-spacing:1px;color:#fff;text-align:center;margin:0;max-width:535px;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.lf-intro{max-width:1100px;margin:0 auto;color:#fff;text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.lf-intro p{font-size:18px;line-height:28px}
.lf-box{background:#fff;color:#303030;max-width:367px;width:100%;padding:30px 26px;text-align:center}
.lf-box .age{font-size:18px;line-height:26px;color:#303030;margin-bottom:16px}
.lf-province{width:100%;font-family:var(--bold);font-size:14px;letter-spacing:1px;padding:12px;border:2px solid #303030;background:#fff;color:#303030}
.lf-foot{background:#fff;text-align:center;padding:22px 20px}
.lf-foot p{margin:0 auto;font-size:18px;line-height:28px;max-width:535px;color:var(--gray2)}
@media (max-width:700px){
.lf-box{padding:26px 20px}
.lf-head{padding:12px 16px}
.lf-logo{height:72px}
.lf-tag{font-size:18px}
}
/* ---------- 포트폴리오 페이지 (SharePoint 리스트 연동) ---------- */
.pf{background:#fafafa;padding-bottom:60px}
.pf-tabs-row{background:var(--dark);padding:0 20px 22px;margin-top:-1px}
.pf-tabs{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px}
.pf-tabs button{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:25px;padding:8px 18px;font-family:var(--bold);font-size:12px;letter-spacing:1px;cursor:pointer;transition:.2s}
.pf-tabs button.on,.pf-tabs button:hover{background:#fff;color:var(--red)}
.pf-toolbar{background:#fff;border-bottom:1px solid #eee;padding:14px 20px;position:sticky;top:0;z-index:10;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.pf-twrap{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pf-twrap input[type=search]{flex:1 1 260px;min-width:0;padding:10px 14px;border:1px solid #ddd;border-radius:8px;font-family:var(--body);font-size:14px;background:#fafafa;color:var(--ink)}
.pf-twrap select{padding:9px 12px;border:1px solid #ddd;border-radius:8px;background:#fff;font-family:var(--body);font-size:13px;color:var(--ink);max-width:190px}
.pf-clear{font-family:var(--bold);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--red);white-space:nowrap}
.pf-count{font-size:12.5px;color:#767676;margin-left:auto;white-space:nowrap}
.pf-main{max-width:1180px;margin:0 auto;padding:10px 20px 30px}
.pf-country{margin:34px 0 10px}
.pf-country h2{font-family:var(--disp);font-size:24px;color:var(--dark);letter-spacing:2px;text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:8px;display:flex;justify-content:space-between;align-items:baseline}
.pf-country h2 small{font-family:var(--body);font-size:12px;color:#767676;letter-spacing:0}
.pf-producer{background:#fff;border:1px solid #e8e8e8;border-radius:10px;margin:16px 0;overflow-x:auto}
.pf-phead{padding:13px 18px 11px;border-bottom:1px solid #eee;background:#fdfdfd}
.pf-pname{font-family:var(--bold);font-size:16px;letter-spacing:.5px;color:var(--dark);text-transform:uppercase}
.pf-pregion{font-size:12px;color:var(--red);letter-spacing:1px;text-transform:uppercase;margin-top:2px}
.pf-tbd{color:#999;font-style:italic;text-transform:none}
.pf table{width:100%;border-collapse:collapse;font-size:13.2px}
.pf th{font-family:var(--bold);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#767676;text-align:left;padding:9px 10px;border-bottom:1px solid #eee}
.pf td{padding:8px 10px;border-bottom:1px solid #f3f3f3;vertical-align:top;color:#393939}
.pf tr:last-child td{border-bottom:0}
.pf tr:hover td{background:#faf6f4}
.pf .code{color:#767676;font-size:12px;font-variant-numeric:tabular-nums}
.pf .nm{font-family:var(--bold)}
.pf .price{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf-lt{font-size:11px;background:#f2f2f2;border-radius:4px;padding:2px 7px;white-space:nowrap;color:#555}
.pf-cat{font-size:11px;background:#f5ecee;border-radius:4px;padding:2px 7px;white-space:nowrap;color:#8c2f42}
.pf .acc{font-size:11px;color:#767676}
.pf .acc b{color:var(--red);font-weight:700}
.pf .note{font-size:11px;color:var(--red);font-weight:700}
.pf-empty{text-align:center;color:#767676;padding:70px 0;font-size:15px}
.pf-foot{max-width:1180px;margin:0 auto;padding:0 20px;font-size:12px;color:#767676;text-align:center}
@media(max-width:720px){
.pf th.hide-m,.pf td.hide-m{display:none}
.pf-count{flex-basis:100%;margin-left:0}
}
/* ---------- C3 about·contact (30차 라이브 실측 = WPBakery 행/열 미러, 스펙 SESSION_LOG 30차) ----------
.vrow = vc_row(.pd = section-padding-desktop 80/80) · .vgrid = 콘텐츠 그리드 · .vin = section_inner_margin(−15) · .vc = 열(패딩 15, min-height 1)
열 클래스 = Bootstrap/js_composer: sm ≥768 부동, md ≥992, lg ≥1200, xs-12 항상 부동 100%. 본문 p 18/28 #393939 여백 0, ≤768 br 숨김(라이브 전역 규칙) */
.vrow{overflow-x:clip} /* −15 행 넘침 방지(601–629·769–797, 라이브 .wrapper_inner overflow:hidden) */
.vrow.pd{padding:80px 0}
.vgrid{width:var(--gw);margin:0 auto}
.vin{display:flow-root;margin:0 -15px}
.vc{position:relative;min-height:1px;padding:0 15px}
.vc.c-xs-12{float:left;width:100%}
@media(min-width:768px){.vc[class*="c-sm-"]{float:left}.c-sm-2{width:16.66666667%}.c-sm-3{width:25%}.c-sm-6{width:50%}.c-sm-8{width:66.66666667%}.c-sm-12{width:100%}}
@media(min-width:992px){.vc[class*="c-md-"]{float:left}.vc.c-md-3{width:25%}.vc.c-md-5{width:41.66666667%}.vc.c-md-6{width:50%}.vc.c-md-10{width:83.33333333%}.vc.c-push-1{left:8.33333333%}}
@media(min-width:1200px){.vc[class*="c-lg-"]{float:left}.vc.c-lg-3{width:25%}.vc.c-lg-6{width:50%}}
.vrow p{font-size:18px;line-height:28px;color:#393939;margin:0}
.sec-sub{text-align:center}
.sec-title.s3::after{background:#303030}
.sp20{height:20px}.sp40{height:40px}.sp100{height:100px}
@media(max-width:768px){.vrow br{display:none}}
/* 스토리 행: flex 가운데 정렬(769–991에서도 50/50으로 줄어듦), 위 행 패딩 0(라이브 클래스 오타), 아래 행 80, p 패딩 15 0, ≤768 적층(아래 행은 역순) */
.story .vin{display:flex;align-items:center}
.story .vc{float:none}
.st-img img{display:block;width:auto;max-width:100%;height:auto}
.st-txt p{padding:15px 0}
@media(max-width:768px){.st-top .vin{flex-direction:column}.st-bot .vin{flex-direction:column-reverse}.story .vc{width:100%}}
/* 팀 카드(q_team): 흰 카드, 정사각 이미지 100%, 글 박스 패딩 23 16 최소 120, 이름 17/1.3043 600 대문자 ls1 #303030 mb7, 직함 18/26, 카드 뒤 30 */
.band-team{background:#e3e7ee}
.qt{background:#fff;overflow:hidden;margin-bottom:30px}
.qt>img{display:block;width:100%;height:auto;aspect-ratio:1}
.qt-text{box-sizing:content-box;padding:23px 16px;min-height:120px}
.qt-th{text-align:center;margin-bottom:9px;font-size:18px;line-height:26px} /* 라이브 .q_team_title_holder 18/26 (부모 strut) */
.qt-th h3{font-family:var(--body);font-weight:600;font-size:17px;line-height:1.304347826em;letter-spacing:1px;text-transform:uppercase;color:#303030;margin-bottom:7px}
.qt-th span{font-size:18px;line-height:26px;color:#393939}
/* 연락 폼: 행 text-align right, 필드 = md-5/md-10 push-1, 알약 입력 69(패딩 25, 1px #262626, r30, 16px #717171), 여백 5 0 30, p mb20, textarea 222 */
.cform .vgrid{text-align:right}
.contact-form p{margin:0 0 20px}
.contact-form input:not(.hpf),.contact-form textarea{display:block;width:100%;height:69px;margin:5px 0 30px;padding:25px;border:1px solid #262626;border-radius:30px;background:#fff;font-family:var(--body);font-size:16px;line-height:17px;color:#717171;outline:0;-webkit-appearance:none;appearance:none;text-align:left}
.contact-form textarea{height:222px;resize:none}
.contact-form ::placeholder{color:#757575;opacity:1}
.csub{display:inline-block;vertical-align:baseline;min-width:150px;height:48px;margin:0 0 30px;padding:0 30px;border:0;border-radius:30px;background:var(--red);color:#fff;font-family:var(--bold);font-size:13px;line-height:48px;letter-spacing:1px;text-transform:uppercase;cursor:pointer}
.cspin{display:inline-block;width:24px;height:24px;margin:0 24px;visibility:hidden;vertical-align:middle}
.empty3{height:1px}
@media(max-width:768px){.empty3{height:3px}}
/* 사무소: 지도 틀 #f7f7f7 패딩 5(327), iframe 317 비활성, 40, 이름 p>strong, 주소 p, 40. FR p 16px */
.gmap{background:#f7f7f7;padding:5px}
.gmap iframe{display:block;width:100%;height:317px;border:0}
.fr16 p{font-size:16px}
/* 채용: sm-2|sm-8|sm-2 가운데 */
.careers .vgrid{text-align:center}
/* 404 (31차 라이브 WP page_not_found 미러, 배너 없음): 그리드 폭 가운데, 패딩 80/80, 뒤 83. h2 32/32 → 46 → 100×4 #d5c9b1 → 51 → p 18/28 → 51 → 버튼 p(h49) → 46.
푸터는 CTA 있는 페이지와 같은 높이(상단 70 임시 규칙 제외) */
.nf404{width:var(--gw);margin:0 auto 83px;padding:80px 0 126px;text-align:center}
.nf404 h2{font-size:32px;line-height:32px;margin:0}
.nf-sep{display:block;width:100px;height:4px;background:#d5c9b1;margin:46px auto 51px}
.nf404 p{font-size:18px;line-height:28px;color:#393939;margin:0 0 51px}
.nf404 p.nf-btn{line-height:0;margin:0}
.nf404 .qbutton{white-space:nowrap} /* 라이브 nowrap — FR 세리프 390·480에서 열(300) 넘어 한 줄 w311, 화면 안 */
/* ==== SW home page body — replacement block for site.css (spec = phaseB/specs/sw-home/SPEC.md) ====
APPLY: tools/apply.py does both steps (delete list below + append this file).
DELETE from site.css (all home-only — grep of src/sw/pages + layout.html on 2026-10-01 found no other user):
- block "홈 히어로": .hero, .hero-grid, .hero-values (+ img, img+img), .hero-center .hlogo/.est/.est legend/h2/.qbutton/.qbutton:hover, .hero .values-horizontal
- block "홈 원형 섹션": every .circle-row … rule (incl. .ctext.ta-r leftovers) [keep .svc-sec/.svc-intro that follow]
- block "스트라이빙 밴드": .band, .band .wrap, .band .binner, .band h2, .band h2 .out, .band p, .band .qbutton, .band.dark [NOT .band-team]
- block "코스트 투 코스트": .coast-left (+ .wrap, h2), .coast-map, .coast-strip (+ .fill, .fill p), .coast-mobile (+ h2, img)
- block "테스티모니얼": .testimonials, .testimonials .qmark, .tcarousel, .tslide (+ .active, .tquote, h2, .quote, .quote:first-child, .author), .tnav, .tnav button(.active), .tarrow(.prev/.next)
- @media(max-width:1160px): .hero-grid, .tarrow.prev/.next lines (block becomes empty → remove)
- @media(max-width:1000px): .hero-grid, .hero-values, .hero, .hero .values-horizontal, .circle-row (5 lines), .band (2 lines), .coast-* (2 lines) [keep .pgrid, .news-list]
- @media(max-width:700px): .hero, .hero-center (3 lines), ".circle-row .ctext h2,.band h2", .circle-row .ind-l/.ind-r, .tslide (3 lines), .testimonials .qmark [keep .partners-list/.pfilter/.pgrid/.news-list]
SHARED selectors used but NOT modified: .vrow .vgrid .vin .vc .c-sm-2 .c-sm-4 .c-sm-12 .sp20 .qbutton .fltl .fltr .cta (+ "@media(max-width:768px){.vrow br{display:none}}").
site.js: delete the "테스티모니얼 캐러셀 (홈)" block (old .tcarousel code) — the new carousel is in the page's EXTRA_JS (home.js). */
/* ---- shared additions (WPBakery column widths not yet in site.css; no existing page uses these classes) ---- */
@media(min-width:768px){.c-sm-1{width:8.33333333%}.c-sm-5{width:41.66666667%}.c-sm-9{width:75%}.c-sm-11{width:91.66666667%}}
@media(min-width:992px){.vc.c-md-9{width:75%}}
/* ---------- 홈 본문 (C3 라이브 실측 = WPBakery 행/열 + 라이브 커스텀 CSS 미러) ----------
공통: 제목 = .htag h2 (Abril 32/32 ls1, 1367–1440 45, ≥1441 60), 본문 p 18/28, 버튼 nowrap, ≤768 br 숨김(라이브 전역 규칙) */
.hm p{font-size:18px;line-height:28px;margin:0}
.hm .qbutton{white-space:nowrap}
.hm-h2{font-size:32px;line-height:32px;letter-spacing:1px;color:#262626;margin:0}
.hm-h2.blue{color:#252232}
.hm-h2.r{text-align:right}
@media(min-width:1367px){.hm-h2{font-size:45px;line-height:45px}}
@media(min-width:1441px){.hm-h2{font-size:60px;line-height:60px}}
@media(max-width:768px){.hm br{display:none}}
/* red-solid-button: hover = 흰 바탕·흰 테두리·빨간 글자 (공용 .qbutton.red hover와 다름) */
.qbutton.hm-solid{background:#c20f2f;border-color:#c20f2f;color:#fff}
.qbutton.hm-solid:hover{background:#fff;border-color:#fff;color:#c20f2f}
.page-home .qbutton{transition:all .3s} /* 라이브 홈 버튼 전환 .3s (공용 .qbutton은 .2s) */
/* R1 배너: 패딩 80/80, 배경 #222 + 사진 cover 가운데. 열 sm-2(밸류 3개, ≤991 숨김) | sm-12·md-9(로고·EST·h2·버튼) — 3번째 열 없음 → 로고는 화면 중앙보다 오른쪽
로고(EN 300×225 / FR 200×96) → 20 → EST 280(위 2px 선, legend 14/26 600 ls1) → h2(위 패딩 80, ≤768 0) → 20 → [가로 밸류 300, ≤768만] → 40 → 버튼 49 → 30(≥992만) */
.hm-hero{padding:80px 0;background:#222 url('/assets/img/banner-home.jpg') 50% 50%/cover no-repeat;text-align:center}
.hm-vals img{margin-left:auto}
.hm-vals img+img{margin-top:-40px}
.hero-center .hlogo{margin:0 auto}
.hero-center .est{width:280px;margin:20px auto 0;border:0;border-top:2px solid #fff}
.hero-center .est legend{font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:1px;line-height:26px;padding:0 10px;margin:0 auto;color:#fff}
.hero-center h2{color:#fff;padding-top:80px}
.hero-center .values-horizontal{display:none;width:300px;margin:20px auto 0}
.hero-center .qbutton{margin-top:60px}
@media(min-width:992px){.vc.hero-center{padding-bottom:30px}}
@media(max-width:991px){.hm-vals{display:none}.hero-center .b-md{display:none}}
@media(max-width:768px){.hero-center h2{padding-top:0}.hero-center .values-horizontal{display:block}.hero-center .qbutton{margin-top:40px}}
@media(min-width:1441px){html[lang=fr] .hero-center h2{font-size:50px}} /* .fr-header-copy h2 50px (lh 60) — ≤1440은 .htag 규칙이 이김 */
/* R2·R3·R5 원형 행: 열 sm-5 | sm-2 | sm-5 (≤767 적층). 행 패딩 40(≤1366)/80, trust는 항상 80. about만 위 50 스페이서.
이미지 = 열 폭까지(원본 474/696), about·integrity 가운데 / trust 오른쪽. 구분선 열 67.5 = 3px #565c61 @34.5.
글: h2 → 40 → p #898989 (왼쪽 60 들여쓰기 / integrity는 오른쪽 정렬·오른쪽 60, ≤768 0) → 40 → 버튼(float).
≤736: about = flex column, integrity = column-reverse(이미지→선→글). 737–767은 DOM 순서(integrity = 글→선→이미지) */
.hm-row{padding:40px 0}
.hm-trust{padding:80px 0}
@media(min-width:1367px){.hm-row{padding:80px 0}}
.hm-sp50{height:50px}
.hm-ci{margin:0 auto}
.hm-ci.r{margin-right:0}
.vc.hm-sep{height:67.5px;padding-top:34.5px}
.hm-sep i{display:block;height:3px;background:#565c61}
.hm-txt{display:flow-root}
.hm-txt .hm-h2{margin-bottom:40px}
.hm .hm-txt p{color:#898989;margin-bottom:40px}
.hm-txt .ml60{margin-left:60px}
.hm-txt .mr60{margin-right:60px;text-align:right}
@media(max-width:768px){.hm-txt .ml60{margin-left:0}.hm-txt .mr60{margin-right:0}}
@media(max-width:736px){.hm-about .vin{display:flex;flex-direction:column}.hm-integ .vin{display:flex;flex-direction:column-reverse}}
/* R4 excellence (parallax_section_holder): flex 세로 가운데, 높이 500(+패딩 40 ≤1366, >1366 패딩 0), ≤768 auto.
배경 = 고정(fixed) cover 오른쪽 가운데 — 라이브 패럴랙스 JS의 위치 값은 !important 규칙에 덮여 무효. 터치 기기(html.touchevents) = 높이 auto·배경 scroll·위 가운데.
열 sm-9(글) | sm-3(빈 열). 글 왼쪽 300(≤768 0), "striving" span −100 내어쓰기·≤1000 숨김(FR은 제목 전체가 이 span → ≤1000 제목 없음) */
.hm-exc{display:flex;align-items:center;box-sizing:content-box;height:500px;overflow:hidden;background:100% 50%/cover no-repeat fixed}
.hm-exc .hm-h2{color:#fff;margin:0 0 40px 300px}
.hm-exc .dsk{margin-left:-100px}
.hm.hm-exc p{color:#fff;margin:0 0 40px 300px}
.hm-exc .qbutton{margin-left:300px}
@media(max-width:1366px){.hm-exc{padding:40px 0}}
@media(max-width:1000px){.hm-exc .dsk{display:none}}
@media(max-width:768px){.hm-exc{height:auto}.hm-exc .hm-h2,.hm.hm-exc p{margin-left:0}.hm-exc .qbutton{margin-left:0}}
.touchevents .hm-exc,.touchevents .hm-coast-l{height:auto;background-attachment:scroll;background-position:50% 0}
@media(min-width:1367px){.touchevents .hm-exc{min-height:300px}}
/* R6–8 coast (≥737): 왼쪽 띠(고정 배경, 높이 80+패딩 140×2 = 360 / >1366 500, ≤768·터치 auto) → 지도 행(z2, 높이 440+패딩 200×2 = 840, 위 −420 겹침 / >1366 360·−680)
→ 아래 띠(위 −20 / −80, 왼쪽 절반 #252232 패딩 40, p 왼쪽 180 / >1366 300 / ≤768 60). 지도·아래 행은 좌우 −15(라이브 vc_row) */
.hm-coast{overflow-x:clip}
.hm-coast-l{position:relative;z-index:1;display:flex;align-items:center;box-sizing:content-box;height:500px;min-height:500px;overflow:hidden;background:50% 0/cover no-repeat fixed}
.hm-coast-l .hm-h2{color:#fff}
.hm-coast-r{position:relative;z-index:2;box-sizing:content-box;height:360px;padding:200px 0;margin:-680px -15px 0;background:50% 50%/cover no-repeat}
.hm-coast-b{display:flow-root;margin:-80px -15px 0}
.hm-coast-b .fill{min-height:1px;padding:40px 0;background:#252232}
.hm-coast-b .e{min-height:1px}
.hm-coast-b p{color:#fff;margin-left:300px}
@media(min-width:768px){.hm-coast-b .fill,.hm-coast-b .e{float:left;width:50%}}
@media(max-width:1366px){
.hm-coast-l{height:80px;min-height:0;padding:140px 0}
.hm-coast-r{height:440px;margin-top:-420px}
.hm-coast-b{margin-top:-20px}
.hm-coast-b p{margin-left:180px}
}
@media(max-width:768px){.hm-coast-l{height:auto}.hm-coast-b p{margin-left:60px}}
/* R9–10 coast 모바일(≤736): 녹색 배경 행(패딩 40, h2 가운데 + 지도 449 max 100%) + #252232 행(패딩 40, p 가운데) */
.hm-cm{display:none;padding:40px 0;text-align:center}
.hm-cm1{background:50% 50%/cover no-repeat}
.hm-cm1 .hm-h2,.hm.hm-cm2 p{color:#fff}
.hm-cm1 img{margin:0 auto}
.hm-cm2{background:#252232}
@media(max-width:736px){.hm-coast{display:none}.hm-cm{display:block}}
/* R11 테스티모니얼 (slick 미러): 행 패딩 120/120. 따옴표 행 sm-1|sm-11 = 160(이미지 68×150; 라이브 캐시본 = img baseline → 160. 쿼리스트링으로 캐시를 우회하면 middle → 150이므로 정식 URL로 잴 것). 슬라이드 = sm-1 | sm-5 인용(p DMSans-Bold 18/30 #9f9f9f 여백 20 0) | sm-5 제목(40/46 ls1.5 소문자 #252232,
1001–1210 = 50/56, ≤1000 br 숨김). ≤767 적층(인용 → 제목). 높이 = 가장 긴 슬라이드. 뒤 30. 점 = 슬라이더 아래 5–25(20×20, 지름 5 점 검정 .25/.75(hover 1)), 화살표 40×40 세로 가운데(≤767 바깥 −40) */
.hm-tst{padding:120px 0}
.hm-tst .tq .c-sm-11{height:160px}
.tcarousel{position:relative;margin-bottom:30px}
.tlist{overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.ttrack{display:flex;align-items:flex-start}
.ttrack>div{flex:0 0 100%;min-width:0}
.tquote{display:flow-root}
.hm .tquote p{font-family:var(--bold);font-weight:400;font-size:18px;line-height:30px;color:#9f9f9f;margin:20px 0}
.tquote em{font-style:italic}
.ttrack h2{font-size:40px;line-height:46px;letter-spacing:1.5px;text-transform:lowercase;color:#252232;margin:0}
@media(min-width:1001px) and (max-width:1210px){.ttrack h2{font-size:50px;line-height:56px}}
@media(max-width:1000px){.ttrack h2 br{display:none}}
.tarrow{position:absolute;top:50%;z-index:9;width:40px;height:40px;padding:0;border:0;background:none;transform:translateY(-50%);color:#000;font-size:0;line-height:0;cursor:pointer}
.tarrow svg{display:inline-block;width:14.2857px;height:40px;fill:currentColor}
.tarrow.prev{left:0}.tarrow.next{right:0}
@media(max-width:767px){.tarrow.prev{left:-40px}.tarrow.next{right:-40px}}
.tnav{position:absolute;left:0;right:0;bottom:-25px;display:flex;justify-content:center}
.tnav button{position:relative;width:20px;height:20px;margin:0 5px;padding:0;border:0;background:none;cursor:pointer}
.tnav button::before{content:"";position:absolute;left:7.5px;top:7.5px;width:5px;height:5px;border-radius:50%;background:#000;opacity:.25}
.tnav button:hover::before{opacity:1}
.tnav button.active::before{opacity:.75}
/* ---------- 파트너 상세 /partners// (라이브 실측 2026-10-01, 스펙 = phaseB/specs/sw-partner-detail/SPEC.md) ----------
헤더 → 80 → 카드 #partner-details-area(로고 25% | 정보 75%, ≤1000 적층) → 60 → BACK TO RESULTS → 80 → CTA 밴드(.pd-cta: 뒤 여백 80) → 푸터.
id·클래스는 라이브 그대로(partner-details-*, partners-social-media-links) — 측정 도구가 양쪽에 같은 선택자를 쓴다.
새 선택자는 전부 .pd-* / #partner-details-area / .partner-details-* / .partners-social-media-links 범위 — 기존 페이지에 영향 없음.
재사용(수정 없음): --gw 그리드 계단, .qbutton, .qbutton.hm-solid(red-solid-button 호버), .cta 밴드 일체. */
.pd-wrap{width:var(--gw);margin:80px auto}
@media(max-width:600px){.pd-wrap{width:calc((100% + 30px) * .9)}} /* 라이브 .full_in_mobile 90% × (뷰포트 + 행 −15 양쪽) → 390: 378, x6 */
@media(max-width:350px){.pd-wrap{width:calc((100% + 30px) * .9 - 30px)}} /* 라이브 ≤350: 행 −15 여백이 없어져 열 패딩 30만큼 좁아짐 (350: 312, 340: 303, 320: 285) */
#partner-details-area{display:flow-root;padding:40px;box-shadow:0 0 10px #ccc;margin-bottom:60px;font-size:18px;line-height:26px}
.pd-logo,.pd-main{padding:0 15px;min-height:1px}
.partner-details-logo{display:table;margin:0 auto;max-width:100%;color:#303030}
.partner-details-logo img{display:inline;vertical-align:baseline} /* 라이브: 인라인 이미지(줄 상자 하단 여백 포함) */
.partner-details-title{display:none} /* 라이브: 이름 h1은 DOM에만 있고 숨김 */
.partner-details-info{list-style:none;display:flow-root;width:100%}
.partner-details-info>li{float:left;width:30%;padding:10px 20px;border-bottom:1px dashed #9f9f9f;font-family:var(--body);font-size:18px;font-weight:400;line-height:18px;color:#c20f2f;text-transform:uppercase}
.partner-details-info>li:last-child{width:70%;color:#9f9f9f}
.partner-details-info>li.w{width:100%}
.partner-details-info>li>a{color:#9f9f9f;transition:all .3s}
.partner-details-info>li:hover>a{color:#c20f2f}
.pd-desc{display:flow-root;margin-top:30px} /* flow-root: 라이브 열(clearfix)처럼 p 여백·빈 설명(maison-champy)이 밖으로 병합되지 않음 → 빈 설명이어도 30 + 소셜 20 */
#partner-details-area p{font-size:18px;line-height:28px;color:#393939;margin:0}
.partners-social-media-links{display:table;margin:20px 0 0;list-style:none}
.partners-social-media-links>li{display:table-cell;padding:0 5px}
.partners-social-media-links>li>a{display:block;width:36px}
.partners-social-media-links>li>a>img{display:block;width:100%}
.qbutton.pd-back{white-space:nowrap;text-align:left;transition:all .3s}
.cta.pd-cta{margin-bottom:80px} /* 상세 페이지: 밴드 뒤 vc_empty_space 80 (다른 페이지 100) */
@media(min-width:1001px){
#partner-details-area{display:flex;align-items:flex-start}
.pd-logo{width:25%;align-self:center} /* 라이브 jQuery(로고 열 margin-top = (정보 열 − 로고 열)/2)와 같은 결과; 로고 열이 더 높으면 위 정렬 그대로 */
.pd-main{width:75%}
.partner-details-logo{display:block} /* 라이브 jQuery가 붙이는 display:block — 열보다 좁은 로고(gusbourne-estate·twins·vacheron)는 왼쪽 정렬 */
}
@media(max-width:768px){#partner-details-area br{display:none}} /* 라이브 전역 규칙: ≤768 br 숨김 (paco-lola 설명의 br 3개) */
@media(max-width:767px){
.partner-details-info>li,.partner-details-info>li:last-child,.partner-details-info>li.w{width:50%;text-align:center}
#partner-details-area p{text-align:center;margin-top:30px}
.qbutton.pd-back{display:table;margin:0 auto}
.partners-social-media-links{margin:20px auto 0}
}
@media(max-width:600px){.partner-details-info>li,.partner-details-info>li:last-child,.partner-details-info>li.w{width:100%}}
/* ---------- /thank-you/ · /fr/thank-you/ (phaseB/specs/sw-thank-you, 라이브 실측 2026-10-02) ----------
라이브 = section-padding-desktop 행(배경 #252232, 80/80) › 그리드 › h2(흰색) · 40 · 구분선 100×4 흰색 · 40 · p 18/28 흰색 · 40 · red-solid 버튼, 그 뒤 빈 행 100.
재사용(수정 없음): .vgrid, .sec-title(32/45/60 계단 + ::after 구분선, 아래 84 = 40+4+40), .qbutton.hm-solid(호버 = 흰 바탕·빨간 글자).
푸터: CTA 없는 페이지 공용 보정(padding-top 70)을 이 페이지에서만 끔 → 밴드 끝→푸터 rect = 라이브 100 그대로. */
.tnx{background:#252232;padding:80px 0;margin-bottom:100px;text-align:center}
.tnx .sec-title{color:#fff}
.tnx .sec-title::after{background:#fff}
.tnx p{font-size:18px;line-height:28px;color:#fff;margin:0 0 40px}
.tnx .qbutton{white-space:nowrap;transition:all .3s}
body.page-thank-you footer#footer-area{padding-top:0}
/* >>> sw-narrow-350 */
/* ---------- SW ≤350 공용 층 (phaseB/specs/sw-narrow-350, 라이브 실측 2026-10-02) ----------
헤더(≤420, EN): 라이브 Bridge = 로고 absolute + 내비·햄버거 float right → 내비가 로고와 겹쳐도 한 줄(높이 100). 로컬 flex는 351–357에서 2줄(200)이었음.
358–420은 원래도 한 줄(오른쪽 정렬, 햄버거 28 앞) → 위치 변화 없음.
헤더(≤420, FR): 내비는 둘째 줄부터 컨테이너 전폭을 쓴다(라이브 float이 햄버거 아래로 내려감) → 오른쪽 28 여백 없음, 필 줄바꿈 없음.
그리드(≤350): 라이브 = 행 −15(vw+30) › section_inner 95% › section_inner_margin 여백 0 › 열 패딩 15 → 본문 = 0.95(vw+30) − 30 = 95% − 1.5px.
푸터·저작권(≤350): footer_bottom 패딩 15 › 행 −15(= vw) › 95% › 열 패딩 15 → 내용 = 95% − 30, 가운데. */
@media(max-width:420px){
html[lang=en] .logo{position:absolute;left:0;top:0}
html[lang=en] .topnav{margin-left:auto}
html[lang=fr] .topnav{margin-right:0}
}
/* FR 필이 두 줄이 되는 폭(필 274.9 + 여백 20 > 컨테이너 vw − 30): 라이브 = 100 높이 li 안 inline-block 필의 마지막 줄 기준선 정렬 → 필 위 6(한 줄일 때 23), 행 높이 100 유지 */
@media(max-width:324.8px){html[lang=fr] .topnav .hbtn{margin-top:6px}}
@media(max-width:350px){
:root{--gw:calc(95% - 1.5px)}
.post{padding-left:2.5%;padding-right:2.5%} /* 포스트 = container_inner 95%(행·열 없음) */
.nf404{width:95%} /* 404 = container_inner 95% */
.ftop{width:95%;margin-left:2.5%}
.fbottom .in{width:calc(95% - 30px)}
.f-form select,.f-form input{max-width:none} /* 라이브 CF7 입력 280 고정 — 열(274 @320)보다 넓어도 줄이지 않음(화면 안) */
/* sustainability 아이콘 행(.sus-ib = margin 0 6% 행, −15 없음): 라이브 section_inner = 그 행의 95%, section_inner_margin 여백 0 → 열 내용 = 95% − 30 */
.sus-ib .vgrid{width:95%}
.sus-ib .vin{margin:0}
/* 홈 히어로 로고: 라이브는 중첩 행 안(열 = 95% − 1.5px)이라 320에서 286×214 @x17(배너 700) — 340·350은 원본 300 그대로 */
.hm-hero .hero-center .hlogo{max-width:calc(95% - 1.5px)}
/* 세 원 이미지(300): 라이브 x = 로고 x = max(중첩 열 왼쪽 정렬, 가운데) — 336 미만은 왼쪽 정렬로 오른쪽 넘침(320: x17.1, 화면 안 r317), 336 이상은 가운데 */
.hm-hero .hero-center .values-horizontal{margin-left:max(calc(2.5% + .75px), calc((100% - 300px) / 2));margin-right:auto}
}
/* <<< sw-narrow-350 */
/* >>> sw-menu-modal */
/* ---------- SW popup menu ≤379 + portfolio modal (phaseB/specs/sw-menu-modal, live measured 2026-10-02) ----------
Menu: live Bridge .popup_menu_holder is display:table → never narrower than its 380px EST fieldset / spacer. Below 380 the menu content
keeps a 380 box at x0 (centre 190), the outer layer clips the rest (overflow hidden, no horizontal scroll). FR pill r340.4 @320 = cut.
Modal: live #portfolio-overlay (bridge-child) — fixed 100%, rgba(37,34,50,.95), z 99999; box = absolute top 50% translateY(-50%), full width
(≤767 padding 0 20); WPBakery row −15 › col 4/12 offset 4/12 (≤920: 80% offset 10%) › inner padding 0 15 › wrapper relative.
CLOSE ✖ = DMSans 18/26 white, absolute top −60 right 0; h2 Abril 64/60 ls 3 (≤767 44/40, margin-bottom 60 → 30);
province box = white pill (padding 20, r30, 1px #262626; hover 2px #999), label DMSans-Bold 15/15 centred, FA caret 18px top 18 right 10;
list = absolute top 57, full width, white r30 1px #262626, 18/26 rows, hover #fafafa (no animation; NB/NL/NS/PEI look the same as the others);
DOWNLOAD = 15/20 ls 1, padding 15 30, 3px #c20f2f r30, display table margin 20 auto 0 (collapses with the box margin 30); hover white.
iPhone UA (live JS /iPhone/i): box top 40, no transform; CLOSE top 0, 14px. Scroll lock = live html.no-scroll/auto-scroll classes. */
.popup-menu{overflow-x:hidden}
.popup-menu .inner{min-width:380px}
#portfolio-modal{position:fixed;top:0;left:0;width:100%;height:100%;margin:0;background:rgba(37,34,50,.95);z-index:99999;display:none;font-family:var(--body);font-size:18px;line-height:26px;color:#393939}
#portfolio-modal.open{display:block}
#portfolio-modal.pm-noscroll,html.pm-noscroll{overflow:hidden!important}
#portfolio-modal.pm-autoscroll,html.pm-autoscroll{overflow:auto!important} /* live: .auto-scroll comes after .no-scroll → wins when both are set (2nd open no longer locks) */
#portfolio-modal .pm-in{position:absolute;top:50%;left:0;width:100%;margin:0;transform:translateY(-50%)}
#portfolio-modal .pm-in.iphone{top:40px;transform:none}
#portfolio-modal .pm-row{margin:0 -15px}
#portfolio-modal .pm-col{width:33.33333333%;margin-left:33.33333333%;padding:0 15px;text-align:left}
#portfolio-modal .pm-wrap{position:relative}
#portfolio-modal .mclose{position:absolute;top:-60px;right:0;display:block;color:#fff;font-size:18px;line-height:26px;transition:color .3s}
#portfolio-modal .mclose:hover{color:#d31145}
#portfolio-modal .mclose svg{display:inline-block;width:.78571429em;height:1em;vertical-align:-.14285714em;fill:currentColor}
#portfolio-modal .pm-in.iphone .mclose{top:0;font-size:14px}
#portfolio-modal h2{font-family:var(--disp);font-weight:400;font-size:64px;line-height:60px;letter-spacing:3px;text-transform:none;text-align:center;color:#fff;margin:0 0 60px}
#portfolio-modal .pm-dd{position:relative;background:#fff;padding:20px;border:1px solid #262626;border-radius:30px;margin:0 0 30px}
#portfolio-modal .pm-dd:hover{cursor:pointer;border:2px solid #999}
#portfolio-modal .pm-sel span{display:block;width:100%;font-family:var(--bold);font-weight:400;font-size:15px;line-height:15px;text-align:center}
#portfolio-modal .pm-sel svg{position:absolute;top:18px;right:10px;width:10.29px;height:18px;fill:currentColor}
#portfolio-modal .pm-sel:focus{outline:0}
#portfolio-modal .pm-sel:focus-visible,#portfolio-modal .pm-dd li:focus-visible{outline:2px solid #c20f2f;outline-offset:2px}
#portfolio-modal .pm-dd ul{display:none;position:absolute;top:0;left:0;width:100%;box-sizing:content-box;padding:0;margin:0;list-style:none;text-align:center;background:#fff;border:1px solid #262626;border-radius:30px;z-index:999;overflow:hidden;transition:top .3s}
#portfolio-modal .pm-dd.open ul{display:block;top:57px}
#portfolio-modal .pm-dd li:hover{background:#fafafa}
#portfolio-modal .qbutton{display:table;margin:20px auto 0;padding:15px 30px;font-family:var(--bold);font-weight:700;font-size:15px;line-height:20px;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;color:#fff;background:#c20f2f;border:3px solid #c20f2f;border-radius:30px;text-align:left;transition:.3s}
#portfolio-modal .qbutton:hover{color:#c20f2f;background:#fff;border-color:#fff}
@media(max-width:920px){#portfolio-modal .pm-col{width:80%;margin-left:10%}}
@media(max-width:767px){
#portfolio-modal .pm-in{padding:0 20px}
#portfolio-modal h2{font-size:44px;line-height:40px;margin:0 0 30px}
}
/* <<< sw-menu-modal */