body.top .header { background: rgba(255,255,255,.96); border-bottom: 1px solid rgba(36,31,31,.08); backdrop-filter: blur(12px); }
/* body{background:#f7f5f2;} */
figcaption{display:none;}
img{display:block;width:100%;object-fit:cover;}
.col{display:flex;gap:0 20px;align-items:center;position:relative;z-index:3;}
.col .picture{flex:1;}
.col .picture img{height:100%;}
.item_visual p{margin-top:40px;}

.visual {height: 100vh;  background: url('/img/business/166A8658.webp') no-repeat center / cover;display: flex; align-items: flex-start;justify-content: center;flex-direction: column;position:relative;overflow:hidden;isolation:isolate;padding:0 clamp(40px,7vw,156px);box-sizing:border-box;}
.visual::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;display:none;}
.visual .box{width:min(980px,100%);box-sizing:border-box;transform:translate3d(0,-53%,0);position:relative;z-index:1;}
.visual .box h1,
.visual .box h2 {font-size:120px;font-weight:600;font-family: "acumin-pro-wide", sans-serif;line-height: 1.1;margin-bottom: 40px;color: #241f1f;}
.visual .box h1 strong,
.visual .box h2 strong{display:block;transform:translateX(-.07em);}
.visual .box h1 span,
.visual .box h2 span {display:block;font-size:28px;font-family: "Pretendard Variable", Pretendard, sans-serif;}
/* 제품명이 위로 올라갔다 — 큰 글자와 붙지 않게 아래 여백을 준다. */
.visual .box h1 span{margin-bottom:.55em;}
.visual .box p { font-size:22px;letter-spacing:-.04em;line-height: 1.64;font-weight: 500;word-break:normal;overflow-wrap:normal;hyphens:none; }

.content_item h3{font-size:60px;font-weight:900;letter-spacing:-.03em;text-align: center;margin-bottom:16px;color:#241f1f;padding:0 16px;word-break:keep-all;}
.content_item h3+p{font-size:36px;text-align:center;line-height:1.78;letter-spacing:-.06em;font-weight:500;word-break:keep-all;padding:0 16px;}
.content_item h3+p span{background-color:#241f1f;color:#fff;font-weight:500;border-radius:.28em;padding:0 .15em;}
.content_item .inner{width:100%;max-width:1432px;margin:0 auto;padding:0 16px;box-sizing:border-box;} 

.content_item .shorts{flex:0 0 405px;aspect-ratio: 9/16;position: relative;overflow: hidden;border-radius:20px;}
.content_item .shorts iframe{position:absolute;top:0;left:0;width:100%;height:100%;}

/* ★〈출력물과 전달 방식〉(옛 「손님 손에 남는 것」)은 2026-08-25 에 `.content_item_kept` 카드로 옮겼다.
   아래 `.content_item_0` 블록은 이제 `src/pages/en/business.astro` 만 쓴다 — 50:50 분할과
   아이콘 `ul` 이 그쪽에 그대로 있다. EN 을 옮기면 통째로 죽는다. */
.content_item_0{max-width:100%;display:flex;min-height:100vh;padding-bottom:280px;background: linear-gradient(0deg, rgba(247,245,242,1) 0%, rgba(247,245,242,0) 100%);}
.content_item_0::before{display:block;content:'';flex:0 0 50%;background:url(/img/business/IMG_2831-Edit-1600.webp) no-repeat center / cover;}
.content_item_0 h3{margin-bottom:70px;text-align:left;margin-bottom:30px;}
.content_item_0 h3+p{text-align:left;padding-left:0;}
.content_item_0 .inner{display:flex;flex-direction:column;justify-content:center;padding-left:60px;}
.content_item_0 .inner p{font-size:22px;letter-spacing:-.06em;padding:0 16px;}
.content_item_kept .kept_cards p,
.content_item_0 .inner p,
.content_item_0 .inner p strong,
.content_item_1 > p,
.content_item_1 .item_visual p,
.content_item_1 article > p,
.content_item_1 .inner ol > li p,
.content_item_2 p,
.content_item_3 p,
.p_contact_wrap .content_item p {
    line-height:1.68 !important;
    letter-spacing:0 !important;
    word-break:keep-all !important;
}
.content_item_1 article > p + p,
.content_item_1 .item_visual p + p,
/* 이어지는 문단끼리도 사이를 띄운다 — 문단 넷이 붙으면 한 덩어리로 읽힌다.
   `.interval` 은 그보다 크게 잡아 블록(감열 / AI 보정 / 사진 전달 / 핑퐁샷)을 가른다. */
.content_item_0 .inner p + p{margin-top:1.35em;}
.content_item_0 .inner .interval{margin:64px 0 0;}
.content_item_0 .inner ul{display:flex;flex-wrap:wrap;gap:24px 40px;margin-top:80px;}
.content_item_0 .inner ul li{display:flex;flex-direction:column;font-size:22px;justify-content:center;gap:20px 0;flex:0 1 220px;min-width:160px;align-items:center;text-align:center;word-break:normal;overflow-wrap:normal;white-space:normal;hyphens:none;}
.content_item_0 .inner ul li::before{display:flex;content:'';width:120px;aspect-ratio:1;background-size:cover;background-repeat:no-repeat;}
.content_item_0 .inner ul li:nth-child(1):before{background-image:url(/img/business/icon_0.webp);}
.content_item_0 .inner ul li:nth-child(2):before{background-image:url(/img/business/icon_1.webp);}
.content_item_0 .inner ul li:nth-child(3):before{background-image:url(/img/business/icon_2.webp);}

.content_item_1{background-color: rgba(247,245,242,1);position:relative; }
.content_item_1 .bg{position:absolute;width:100%;height:81%;background-color:#f5f1eb;top:50%;left:0;transform: translate3d(0,-50%,0);z-index:1;}
.content_item_1 .bg::before{position:absolute;bottom:100%;left:0;width:100%;display:block;content:'';background: url(/img/business/pattern.webp) repeat;height:450px;}
.content_item_1 .bg::after{position:absolute;top:100%;left:0;width:100%;display:block;content:'';background: url(/img/business/pattern_reverse.webp) repeat;height:450px;}
.content_item_1::after{position:absolute;left:0;top:100%;width:100%;display:block;content:'';height:320px;background: linear-gradient(180deg, rgba(247,245,242,1) 0%, rgba(247,245,242,0) 100%);}
.content_item_1 h3+p{margin-bottom:78px;}
.content_item_1 .item_visual span{display:block;text-align:center;font-size:18px;}
.content_item_1 .inner{position: relative;z-index:10;}
.content_item_1 .inner ol{display:flex;flex-direction:column;gap:80px 0;}
.content_item_1 .inner ol>li{width:100%;background:#fff;border-radius: 20px;padding:62px 60px 70px; box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.06);box-sizing:border-box;}
.content_item_1 .inner ol>li h4{text-align:center;display:flex;align-items:center;font-size:46px;justify-content:center;margin-bottom:30px;}
.content_item_1 .inner ol>li h4::before{display:flex;flex:0 0 1.56em;height:1.56em;border-radius:50%;line-height:1.4em; background-color:#241f1f;color:#fff;font-size:.70em;justify-content:center;margin-right:.63em;font-family: "Pretendard Variable", Pretendard, sans-serif;}
.content_item_1 .inner ol>li:nth-child(1) h4::before{content:'1';}
.content_item_1 .inner ol>li:nth-child(2) h4::before{content:'2';}
.content_item_1 .inner ol>li:nth-child(3) h4::before{content:'3';}
.content_item_1 .inner ol>li:nth-child(4) h4::before{content:'4';}
.content_item_1 .inner ol>li:nth-child(5) h4::before{content:'5';}
.content_item_1 .inner ol>li p{font-size:22px;text-align:center;letter-spacing:-.044em;word-break: keep-all;}
.content_item_1 article h5{font-size:46px;text-align:center;color:#241f1f;}
.content_item_1 article .horizontal{display:flex;}
.content_item_1 article .vertical{display:flex;flex-direction:column;gap:40px 0;}
.content_item_1 .videos ul{display:flex;justify-content:space-between;}
.content_item_1 .videos ul li{flex:0 0 405px;}
.content_item_1 .videos ul li .shorts{width:100%;}

/*
이전 슬라이드 영역 css
.content_item.content_item_2{max-width:none;overflow:hidden;padding-bottom:254px;}
.content_item_2::before{display:block;content:'';height:320px;background: linear-gradient(180deg, rgba(247,245,242,1) 0%, rgba(247,245,242,0) 100%);}
.content_item_2>p{margin-bottom:60px;}
.content_item_2 .slider_show{max-width:1500px;}
.content_item_2 .swiper{margin-bottom:0;}
.content_item_2 .swiper-horizontal{overflow:visible;}
.content_item_2 .swiper-slide{background:none;padding:0 50px;box-sizing:border-box;}
.content_item_2 figure{display:flex;align-items:center;justify-content:center;flex-direction:column;position: relative;}
.content_item_2 figure::after{display:block;position:absolute;bottom:-58px;left:0;width:100%;content:'';border-radius:20px;background-color:#f5f1eb;height:93%;}
.content_item_2 figure img{max-width:1200px;width:100%;position: relative;z-index:10;}
.content_item_2 .small figure img{max-width:1086px;}
.content_item_2 figcaption{display:block;text-align:center;font-size:26px;margin-top:28px;position: relative;z-index:10;word-break:keep-all;}
*/

.content_item_2{padding-top:320px;}

.content_item_2.content_item h3+p{margin-bottom:73px;}
.content_item_2 .inner{position:relative;padding-bottom:80px;}
.content_item_2 .inner::after{display:block;content:'';width:calc(100% - 32px);height: calc(100% - 177px);background-color:#f5f1eb;border-radius: 20px;position: absolute;bottom:0;left:50%;transform: translateX(-50%);}
.content_item_2 .inner>figure{width:100%;max-width:1050px;margin:0 auto;position:relative;z-index:5;}
.content_item_2 .inner>figure figcaption{text-align:center;display:block;font-size:46px;letter-spacing: -0.04em;}
.content_item_2 .col{justify-content:center;padding:0 60px;}
.content_item_2 .col figcaption{display:none;}
.content_item_2 .col~figure{margin-top:54px;}
.content_item_2 .col+figure{margin-top:80px;}

.content_item_3{padding-top:200px; padding-bottom: 300px;}
.content_item_3 ol{display:flex;flex-direction:column;gap:120px 0;}
.content_item_3 ol li:nth-child(2n){align-self:flex-end;}
.content_item_3 ol li img{width:100%;max-width:1200px;}
.content_item_3 ol li p{font-size:26px;letter-spacing:-.06em;display:flex;align-items:center;margin-top:24px;color:#241f1f;}
.content_item_3 ol li p::before{color:#fff;display:flex;justify-content:center;line-height:1.5em;font-size:24px;width:40px;aspect-ratio:1;border-radius:50%;background-color:#241f1f;margin-right:16px;font-family: "Pretendard Variable", Pretendard, sans-serif;}
.content_item_3 ol li:nth-child(1) p::before{content:"1";}
.content_item_3 ol li:nth-child(2) p::before{content:"2";}
.content_item_3 ol li:nth-child(3) p::before{content:"3";}
.content_item_3 ol li:nth-child(4) p::before{content:"4";}
.content_item_3 ol li:nth-child(5) p::before{content:"5";}

.content_item.content_item_4{max-width:none;padding-top:0;padding-bottom:180px;}
.content_item_4 .container.gallery{width:100%;max-width:none;margin:0;padding:80px 20px 0;box-sizing:border-box;}
.content_item_4 .brand-marketing-masonry{display:block;width:100%;max-width:2520px;margin:0 auto;column-count:4;column-gap:20px;}
.content_item_4 .brand-marketing-masonry .masonry-item{display:block;width:100%;padding:0;margin:0 0 20px;break-inside:avoid;overflow:hidden;}
.content_item_4 .brand-marketing-masonry img{display:block;width:100%;height:auto;border-radius:20px;}
.site-contact-section{position:relative;z-index:120;background:#fff;isolation:isolate;overflow:hidden;}
.site-contact-section::before{content:'';position:absolute;inset:0;background:#fff;z-index:0;pointer-events:none;}
.site-contact-section>.container{position:relative;z-index:1;width:100%;height:auto;min-height:0;overflow:visible;background:#fff;}
.site-contact-section .p_contact_wrap{position:relative;z-index:1;}
.p_contact_wrap{max-width:1432px;margin:0 auto;padding:160px 20px 80px;box-sizing:border-box;}
.contact-heading{margin:0 0 48px;text-align:center;font-size:64px;font-weight:900;line-height:1.1;letter-spacing:0;color:#46312c;}
.p_contact_wrap .textarea{display:grid;grid-template-columns:minmax(320px,.92fr) minmax(420px,1.08fr);gap:48px;align-items:start;width:100%;padding:0;box-sizing:border-box;}
.contact-info-card{position:sticky;top:96px;min-width:0;min-height:620px;box-sizing:border-box;border-left:8px solid #46312c;border-radius:0 24px 24px 0;background:#f7f5f2;padding:96px 70px 84px;color:#46312c;}
.contact-info-panel{display:none;}
.contact-info-panel.active{display:block;}
.contact-info-panel h3{margin:0 0 42px;max-width:100%;font-size:44px;font-weight:900;line-height:1.22;letter-spacing:0;color:#46312c;overflow-wrap:anywhere;word-break:normal;line-break:strict;}
.contact-info-panel p{margin:0;max-width:100%;font-size:22px;font-weight:600;line-height:1.85;letter-spacing:0;color:#241f1f;overflow-wrap:break-word;word-break:normal;}
.contact-info-panel p+p{margin-top:28px;}
.business-contact{position:relative;}
.contact-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 28px;border:1px solid #241f1f;background:#f7f5f2;}
.contact-tabs:has(> button:nth-child(2):last-child){grid-template-columns:repeat(2,1fr);}
.contact-tabs button{height:58px;font-size:18px;font-weight:900;color:#241f1f;border-right:1px solid #241f1f;cursor:pointer;}
.contact-tabs button:last-child{border-right:0;}
.contact-tabs button.active{background:#241f1f;color:#fff;}
/*
 * 견적 전용 화면(`/inquiry`)의 변형.
 *
 * ★마크업을 지우지 않고 여기서 감춘다. 같은 문의 폼이 사이트 곳곳에 붙어 있어서, 요소를
 *   없애 버리면 다른 페이지의 폼까지 함께 바뀐다. 이 화면에서만 필요한 조정이다.
 */
[data-contact-variant="quote"] .contact-info-card{display:none;}
[data-contact-variant="quote"] .p_contact_wrap .textarea{grid-template-columns:minmax(0,1fr);gap:0;max-width:920px;margin:0 auto;}
/* 사업문의 탭과 그 패널을 뺀다 — 이 화면은 구매·단기렌탈 견적을 내는 곳이다. */
[data-contact-variant="quote"] .contact-tabs{grid-template-columns:repeat(2,1fr);}
/* 사업문의는 파트너 상담이라 견적을 낼 수 없다. 국내 견적 화면에서만 뺀다.
   ★해외는 다르다 — 탭이 사업문의·구매문의 둘뿐이라 사업문의를 빼면 하나만 남는다.
   해외 /inquiry 는 두 탭을 그대로 보여 준다(2026-08-24). */
[data-contact-variant="quote"][data-contact-language="ko"] .contact-tabs button[data-contact-tab="business"]{display:none;}
[data-contact-variant="quote"][data-contact-language="ko"] form[data-contact-form="business"]{display:none;}

.contact-pre-setup-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;box-sizing:border-box;margin:0 0 20px;padding:20px 22px;border:1px solid #c9c4bf;background:#fff;color:#241f1f;}
.contact-pre-setup-cta__copy{min-width:0;}
.contact-pre-setup-cta__eyebrow{margin:0 0 5px;font-size:12px;font-weight:900;line-height:1.3;letter-spacing:.02em;color:#6a625d;}
.contact-pre-setup-cta__title{margin:0;font-size:20px;font-weight:900;line-height:1.3;color:#241f1f;overflow-wrap:anywhere;}
.contact-pre-setup-cta__description{margin:6px 0 0;font-size:14px;font-weight:600;line-height:1.55;color:#6a625d;overflow-wrap:anywhere;}
.contact-pre-setup-cta__action{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:48px;padding:0 20px;border:1px solid #241f1f;background:#241f1f;color:#fff;font-size:15px;font-weight:900;line-height:1;text-align:center;text-decoration:none;white-space:nowrap;}
.contact-pre-setup-cta__action:hover{background:#46312c;border-color:#46312c;}
.contact-pre-setup-cta__action:focus-visible{outline:2px solid #241f1f;outline-offset:3px;}
.contact-form{display:none;background:#f8f8f8;padding:34px 30px 38px;}
.contact-form.active{display:grid;gap:20px;}
.contact-field{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;}
.contact-field--textarea{align-items:center;}
.contact-form [hidden]{display:none!important;}
.contact-field>span{display:block;padding-top:0;font-size:16px;font-weight:900;color:#241f1f;line-height:1.45;word-break:keep-all;}
.contact-field--textarea>span{padding-top:0;}
.contact-form input,
.contact-form select,
.contact-form textarea{width:100%;box-sizing:border-box;border:1px solid #c9c4bf;background:#fff;color:#241f1f;font-family:"Pretendard Variable",Pretendard, sans-serif;font-size:15px;font-weight:600;line-height:1.45;outline:none;text-indent:0;}
.contact-form input,
.contact-form select{height:46px;padding:0 10px;text-indent:0;}
.email-split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center;}
.email-split span{font-size:16px;font-weight:900;color:#241f1f;text-align:center;}
.setup-code-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;}
.setup-code-control a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:46px;padding:0 16px;border:1px solid #241f1f;background:#241f1f;color:#fff;font-size:14px;font-weight:900;line-height:1;white-space:nowrap;text-decoration:none;}
.setup-code-control a:focus-visible{outline:2px solid #241f1f;outline-offset:2px;}
/* 라벨 열(120px) + 간격(14px) 만큼 밀어 입력 칸·전송 버튼과 왼쪽을 맞춘다.
   같은 134px 을 `.contact-form button[type="submit"]` 도 쓴다 — 한쪽만 고치면 어긋난다. */
/*
 * 개인정보 수집 동의 체크박스. 라벨 열(134px) 오른쪽, 폼 입력칸과 같은 기준선에 맞춘다.
 * ★전역 폼 스타일이 모든 input 을 큰 상자로 만든다. 라디오와 같은 이유로 되돌린다.
 */
.contact-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0 134px;font-size:14px;line-height:1.6;color:#241f1f;word-break:keep-all;cursor:pointer;}
.contact-consent input[type="checkbox"]{appearance:auto!important;-webkit-appearance:checkbox!important;width:16px!important;min-width:16px!important;height:16px!important;min-height:0!important;margin:3px 0 0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;accent-color:#241f1f;flex:0 0 auto;cursor:pointer;}
.contact-consent b{font-weight:800;}
/* 라벨 안의 방침 링크. 링크라는 것이 보여야 눌린다 — 그 링크가 상세 고지로 가는 유일한 길이다. */
/*
 * 라벨 안의 방침 링크.
 *
 * ★이 링크가 수집 항목·이용 목적·보유 기간으로 가는 **유일한 길**이다(2026-08-26 에 상세
 *   고지를 화면에서 걷어내고 방침으로 옮겼다). 눌리지 않으면 손님은 아무 데도 못 간다.
 *   그래서 본문과 같은 색으로 밑줄만 긋는 정도로는 부족하고, 세 가지를 다 준다 —
 *   브랜드 색(#46312c), 두꺼운 밑줄, 그리고 **새 탭으로 열린다는 표시(↗)**.
 * ★`::after` 에 `display:inline-block` 을 주는 이유는 밑줄 때문이다. `text-decoration` 은
 *   자손으로 전파되고 자손 쪽에서 끌 수 없는데, `inline-block` 이면 전파가 끊겨 화살표에만
 *   밑줄이 안 걸린다.
 */
.contact-consent a{color:#46312c;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px;}
.contact-consent a::after{content:"\2197";display:inline-block;margin-left:2px;font-size:.85em;text-decoration:none;}
.contact-consent a:hover,
.contact-consent a:focus-visible{color:#241f1f;text-decoration-thickness:2px;}
/* 법정 보존은 동의와 근거가 다르다 — 전자상거래법 제6조 제2항은 동의를 철회해도 보존할 수
   있다고 정한다. 같은 덩어리로 읽히면 "동의하면 5년" 으로 오해되므로 선으로 끊는다. */
/* ★첫 `<b>` 만 제목이다. 전체 `b` 를 블록으로 잡으면 문장 안의 `<b>5년간</b>` 까지
   줄을 바꿔 "…제1항에 따라 / 5년간 / 보존합니다" 로 끊긴다(2026-08-26 실측). */
.p_contact_wrap .textarea .contact-form input:not([type="hidden"]):not([type="file"]),
.p_contact_wrap .textarea .contact-form select{height:46px;min-height:46px;padding:0 10px;text-indent:0;}
.contact-form textarea{min-height:128px;padding:12px 10px;resize:vertical;}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{border-color:#241f1f;box-shadow:0 0 0 2px rgba(36,31,31,.08);}
.contact-form select:disabled{background:#f1efec;color:#6a625d;}
.contact-form input[type="file"]{height:auto;padding:12px;background:#fff;}
.file-upload{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;width:100%;box-sizing:border-box;border:1px solid #c9c4bf;background:#fff;padding:7px 10px;min-height:46px;}
.file-upload__input{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none;}
.file-upload__button{display:flex;align-items:center;justify-content:center;height:30px;padding:0 13px;background:#241f1f;color:#fff;font-family:"Pretendard Variable",Pretendard,sans-serif;font-size:13px;font-weight:900;white-space:nowrap;cursor:pointer;}
.file-upload__name{min-width:0;color:#6a625d;font-size:14px;font-weight:800;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.contact-form small{display:block;grid-column:2;margin-top:-10px;font-size:13px;font-weight:600;color:#6a625d;line-height:1.45;}
.date-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.rental-address-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.4fr);gap:10px;}
/* 도로명주소 검색(2026-08-21). 우편번호는 팝업이 채우므로 직접 고치지 못하게 두고,
   버튼은 폼의 보조 버튼 표기(.contact-secondary-btn)와 같은 얼굴로 맞춘다. */
/* 선택한 모델의 사진. 폼 흐름을 끊지 않게 작게 두고, 없으면 자리째 사라진다. */
/*
 * 선택한 모델 사진 — 폼 위에 **떠 있는** 팝오버.
 *
 * ★블록으로 끼워 넣으면 모델을 바꿀 때마다 아래 항목이 밀려 입력 흐름이 끊긴다.
 *   제품 칸(.purchase-product-field)을 기준으로 띄우고 자리는 차지하지 않는다.
 * ★마우스를 올리거나 **키보드 초점이 그 칸에 들어올 때** 보인다 — 호버만 조건으로 두면
 *   키보드 사용자는 영영 못 본다.
 */
.purchase-product-field{position:relative;}
.purchase-thumb{
  /* 라벨 열(120px) + 간격(14px) 만큼 밀어 입력 칸과 왼쪽을 맞춘다. */
  position:absolute;left:calc(120px + 14px);top:calc(100% + 8px);z-index:20;
  width:240px;margin:0;padding:8px;box-sizing:border-box;
  background:#fff;border:1px solid #241f1f;box-shadow:0 12px 28px rgba(36,31,31,.18);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
  pointer-events:none;
}
.purchase-product-field:hover .purchase-thumb,
.purchase-product-field:focus-within .purchase-thumb{opacity:1;visibility:visible;transform:translateY(0);}
.purchase-thumb[hidden]{display:none;}
.purchase-thumb img{display:block;width:100%;height:150px;object-fit:contain;background:#f7f5f2;}
/* ★이 파일 3행이 `figcaption{display:none}` 으로 전부 감춘다 — 여기서 되살린다. */
.purchase-thumb figcaption{display:block;margin:8px 2px 2px;font-size:13px;font-weight:900;color:#241f1f;text-align:center;word-break:keep-all;overflow-wrap:break-word;}

/*
 * 호버가 없는 기기(터치)에서는 팝오버가 뜰 일이 없다 — 작은 사진으로 자리에 남긴다.
 * 여기서는 폼이 밀려도 상관없다. 안 보이는 것보다 낫다.
 */
/*
 * ★RTL(아랍어)은 라벨 열이 오른쪽으로 뒤집히고 폭도 150px 이다(아래 `html[dir="rtl"] .contact-field`).
 *   `left` 로 고정하면 아무 것에도 안 맞는 자리에 뜬다 — 방향을 바꿔 오른쪽 기준으로 건다.
 */
/*
 * ★RTL 은 `left` 를 그대로 두면 아무 것에도 안 맞는 자리에 뜬다. 그런데 기준 상자가
 *   LTR 과 달라(측정으로 확인) 라벨 열 폭을 빼지 않는다 — `right:0` 이 곧 입력 칸의
 *   오른쪽 끝이다. 숫자를 계산해 넣지 말 것.
 */
html[dir="rtl"] .purchase-thumb{left:auto;right:0;}

/*
 * QR 다운로드 안내 팝오버 (단기렌탈 문의, 2026-09-03).
 *
 * ★QR 다운로드는 촬영물을 서버에 올려 손님에게 전달한다 — 설치 현장에 인터넷이 없으면
 *   옵션 값을 치르고도 손님에게 아무것도 가지 않는다. 고르는 자리에서 알린다.
 * ★제품 사진 팝오버(.purchase-thumb)와 같은 방식이다: 폼을 밀지 않도록 칸 위에 띄우고,
 *   호버가 없는 기기나 좁은 화면에서는 자리에 놓는다(아래 미디어 쿼리).
 *   다른 점은 여는 계기다 — 호버가 아니라 **QR 옵션을 고른 순간** 스크립트가 연다.
 * ★★이 규칙은 아래 미디어 쿼리보다 **앞**에 있어야 한다. 특정도가 같아 나중에 온 쪽이
 *   이긴다 — 뒤에 두면 좁은 화면에서도 `position:absolute` 가 살아남는다(실측 확인).
 */
.rental-qr-field{position:relative;}
.rental-qr-note{
  /* 라벨 열(120px) + 간격(14px) 만큼 밀어 입력 칸과 왼쪽을 맞춘다. */
  position:absolute;left:calc(120px + 14px);top:calc(100% + 8px);z-index:30;
  width:min(380px,calc(100% - 134px));padding:14px 16px;box-sizing:border-box;
  background:#fff;border:1px solid #241f1f;box-shadow:0 12px 28px rgba(36,31,31,.18);
}
.rental-qr-note[hidden]{display:none;}
.rental-qr-note__title{margin:0 0 6px;font-size:14px;font-weight:900;line-height:1.45;color:#b00020;word-break:keep-all;}
.rental-qr-note__body{margin:0;font-size:13px;font-weight:600;line-height:1.55;color:#241f1f;word-break:keep-all;}
.rental-qr-note__close{height:32px;margin-top:12px;padding:0 14px;border:1px solid #241f1f;background:#241f1f;color:#fff;font-family:inherit;font-size:13px;font-weight:900;cursor:pointer;}
html[dir="rtl"] .rental-qr-note{left:auto;right:0;}

/*
 * 팝오버를 접고 자리에 놓는 경우가 둘 있다.
 *   1) 호버가 없는 기기(터치) — 띄울 계기가 없다.
 *   2) 좁은 화면 — 라벨 열이 사라져 `left` 가 맞출 기준을 잃는다.
 * 여기서는 폼이 조금 밀려도 괜찮다. 안 보이는 것보다 낫다.
 */
@media (hover: none), screen and (max-width: 600px) {
  .purchase-thumb{
    position:static;width:100%;max-width:200px;margin:10px 0 0;
    opacity:1;visibility:visible;transform:none;box-shadow:none;pointer-events:auto;
    grid-column:2;justify-self:start;
  }
  html[dir="rtl"] .purchase-thumb{right:auto;}
  .purchase-thumb img{height:130px;}
  /* 안내는 자리를 차지해도 된다 — 폼이 조금 밀리는 것보다 못 보는 쪽이 나쁘다. */
  .rental-qr-note{position:static;width:100%;max-width:none;margin:10px 0 0;box-shadow:none;grid-column:2;}
}
.address-field{display:grid;gap:10px;}
.address-field__search{display:grid;grid-template-columns:minmax(0,140px) auto;gap:10px;justify-content:start;}
/*
 * 할인 줄은 다른 색으로. 차감액이라 눈에 띄어야 한다.
 *
 * ★두 클래스가 나란히 있는 이유: 국내 견적은 `purchase-estimate-discount`, 해외 주문 화면은
 *   `brief-order-discount-row` 를 쓴다. 마크업을 만드는 곳이 다르다
 *   (국내는 ContactSectionKo·business.astro, 해외는 ContactSection<Xx> 17개).
 *
 * ★해외 규칙이 2026-08-24 까지 `ProductStickyCta.astro` 의 style 안에 있었다. 그래서 그
 *   컴포넌트를 마운트하지 않는 페이지에서는 색이 안 먹었다 — 17개 로케일 `/business` 전부가
 *   그랬다. 같은 클래스, 같은 마크업인데 페이지마다 결과가 달랐다. 전역으로 옮겨 고쳤다.
 */
.purchase-estimate .purchase-estimate-discount strong{color:#8a5a2b;}
.brief-order-discount-row strong{color:#8a5a2b;}
.address-field .address-field__zip{background:#f1eeea;color:#46312c;text-align:center;}
/* 도로명주소는 주소검색으로만 채운다 — 읽기 전용임이 보이게 같은 회색을 쓴다. */
.address-field input[data-rental-road]{background:#f1eeea;color:#46312c;}
.address-field__btn{height:46px;padding:0 18px;background:#fff;color:#241f1f;border:2px solid #241f1f;font-size:15px;font-weight:900;white-space:nowrap;}
.address-field__btn:hover{background:#241f1f;color:#fff;}
.address-field__btn[hidden]{display:none;}
/* 설치 주소 아래에 붙는 버튼. `.contact-field` 는 [라벨 120px | 입력] 2열 격자라,
   그냥 두면 다음 줄의 라벨 자리(1열)에 떨어진다 — 입력 열에 맞춘다. */
.address-field__btn--rental{grid-column:2;margin-top:10px;justify-self:start;}
/* 주소로 방문 지역을 못 찾았을 때만 나타나는 수동 선택. 평소에는 주소검색이 지역을 정한다. */
.rental-region-fallback{border:1px solid #c9c4bf;background:#fff;padding:14px 16px;}
.rental-region-fallback[hidden]{display:none;}
.rental-region-fallback__note{margin:0 0 10px;font-size:13px;font-weight:700;line-height:1.5;color:#b00020;}
.rental-address-grid--fallback{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.purchase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.purchase-sub-label{display:block;margin-bottom:7px;font-size:13px;font-weight:900;color:#6a625d;line-height:1.35;}
.purchase-estimate{border:1px solid #241f1f;background:#fff;padding:18px;}
.purchase-estimate-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #ded8d2;padding-bottom:14px;margin-bottom:12px;}
.purchase-estimate-head span{display:block;font-size:13px;font-weight:900;color:#6a625d;line-height:1.3;}
.purchase-estimate-head strong{display:block;margin-top:4px;font-size:30px;font-weight:900;color:#241f1f;line-height:1.12;letter-spacing:0;}
.purchase-estimate-head em{flex:0 0 auto;font-style:normal;font-size:13px;font-weight:900;color:#46312c;line-height:1.35;}
.purchase-estimate ul{display:grid;gap:8px;margin:0 0 16px;}
.purchase-estimate li{display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:800;color:#241f1f;line-height:1.45;}
.purchase-estimate li span{min-width:0;word-break:keep-all;}
.purchase-estimate li strong{flex:0 0 auto;font-weight:900;}
.purchase-estimate li strong .estimate-vat-note{display:block;text-align:right;font-size:.86em;line-height:1.25;}
.purchase-estimate li.muted{color:#6a625d;font-size:13px;}
.purchase-estimate li.purchase-estimate-section{margin-top:4px;padding-top:10px;border-top:1px solid #ded8d2;color:#46312c;}
.purchase-estimate-note{margin:0;font-size:13px;font-weight:600;line-height:1.55;color:#6a625d;word-break:keep-all;}
.purchase-estimate .rental-holiday-date{font-weight:900;}
.purchase-estimate .rental-holiday-date--saturday{color:#1f5fbf;}
.purchase-estimate .rental-holiday-date--sunday,
.purchase-estimate .rental-holiday-date--holiday{color:#d32f2f;}
.quote-date-toggle{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px;font-size:12px;font-weight:700;color:#6a625d;cursor:pointer;}
.quote-date-toggle input[type="checkbox"]{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;box-sizing:border-box!important;width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;max-width:14px!important;max-height:14px!important;flex:0 0 auto;margin:0!important;padding:0!important;border:2px solid #46312c;border-radius:2px;background:#fff;cursor:pointer;position:relative;}
.quote-date-toggle input[type="checkbox"]:checked{background:#46312c;}
.quote-date-toggle input[type="checkbox"]:checked::after{content:'';position:absolute;left:2px;top:-1px;width:4px;height:7px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.quote-date-toggle input[type="checkbox"]:focus-visible{outline:2px solid #46312c;outline-offset:2px;}
.purchase-estimate-actions{display:grid;gap:12px;margin-top:14px;}
.purchase-quote-button{display:flex;align-items:center;justify-content:center;width:100%;height:46px;background:#46312c;color:#fff;font-size:15px;font-weight:900;cursor:pointer;}
.purchase-statement-button{background:#fff;color:#46312c;border:1px solid #46312c;}
.purchase-international-notice>div{padding:18px;border:1px solid #241f1f;background:#fff;}
.purchase-international-notice strong{display:block;color:#241f1f;font-size:16px;font-weight:900;line-height:1.45;}
.purchase-international-notice p{margin:7px 0 14px;color:#6a625d;font-size:14px;font-weight:700;line-height:1.55;word-break:keep-all;}
.purchase-international-notice a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;background:#241f1f;color:#fff;font-size:14px;font-weight:900;line-height:1;text-decoration:none;}
.purchase-international-notice a:hover{background:#46312c;}
.purchase-international-notice a:focus-visible{outline:2px solid #241f1f;outline-offset:3px;}
.contact-form button[type="submit"]{display:flex;align-items:center;justify-content:center;width:calc(100% - 134px);height:54px;margin:6px 0 0 134px;background:#241f1f;color:#fff;font-size:17px;font-weight:900;cursor:pointer;}
.contact-form button[type="submit"]:disabled{opacity:.45;cursor:wait;}
/* 구매하기/예약하기 — 보내기(문의하기) 옆에 추가된 버튼 한 쌍. 위 단일 submit 규칙(0,1,1)보다
   높은 특이도(0,2,1)로 폭·여백을 다시 잡는다(가운데 정렬 flex 행). */
.contact-form-actions{display:flex;gap:10px;margin:6px 0 0 134px;}
.contact-form-actions button[type="submit"],
.contact-form-actions button[type="button"]{display:flex;align-items:center;justify-content:center;width:auto;flex:1 1 0;height:54px;margin:0;font-size:17px;font-weight:900;cursor:pointer;}
.contact-primary-btn{background:#241f1f;color:#fff;border:none;}
.contact-primary-btn:disabled{opacity:.45;cursor:wait;}
.contact-secondary-btn{background:#fff;color:#241f1f;border:2px solid #241f1f;}
.contact-secondary-btn:hover{background:#f1efec;}
/*
 * 해외 폼의 개인정보 처리 고지 — **일반 문의 패널만** 이 형태다(고지 경로, 체크박스 아님).
 * ★2026-08-27부터 구매문의 패널은 다르다 — 실제 결제(돈)가 걸린 패널이라 `.contact-consent`
 *   재사용 체크박스(`.contact-privacy-consent`, `ContactSection{En,De,...}.astro`)로 바꿨다.
 *   일반 문의는 그대로 안내문이다 — 근거법이 달라(해외는 한국어 폼과 달리 별도 동의를
 *   요구하지 않는 시장이 많다) 여전히 문단으로 충분하다는 판단은 안 바뀌었다.
 */
.contact-privacy-note{margin:4px 0 12px;font-size:13px;line-height:1.6;color:#6b5c52;word-break:keep-all;}
.contact-privacy-note a{color:#241f1f;text-decoration:underline;text-underline-offset:3px;}
.contact-status{min-height:1.5em;margin-top:16px;font-size:15px;font-weight:800;line-height:1.5;color:#241f1f;}
.contact-status.success{color:#116b38;}
.contact-status.error{color:#b00020;}
.contact-status.pending{color:#46312c;}
.quote-layer[hidden]{display:none!important;}
.quote-layer{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:32px;background:rgba(36,31,31,.62);}
.quote-layer__backdrop{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;}
.quote-layer__panel{position:relative;z-index:1;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(1180px,calc(100vw - 48px));max-height:calc(100vh - 48px);background:#f7f5f2;border:1px solid #241f1f;box-shadow:0 24px 80px rgba(0,0,0,.22);}
.quote-layer__head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border-bottom:1px solid #241f1f;background:#fff;}
.quote-layer__head h3{margin:0;font-size:22px;font-weight:900;color:#241f1f;line-height:1.25;}
.quote-layer__actions{display:flex;gap:8px;}
.quote-layer__actions button{height:40px;padding:0 16px;border:1px solid #241f1f;background:#fff;color:#241f1f;font-size:14px;font-weight:900;cursor:pointer;}
.quote-layer__actions button:first-child{background:#241f1f;color:#fff;}
.quote-layer__preview{overflow:auto;padding:22px;background:#e9e6e2;}
.quote-layer__preview .sheet{margin:0 auto!important;box-shadow:0 12px 34px rgba(0,0,0,.12);}
body.quote-layer-open{overflow:hidden;}
/* While the quote/거래명세서 preview modal is open, hide the fixed site header
   so its download/close buttons can never be covered by the top navigation. */
body.quote-layer-open .header{display:none!important;}
html[dir="rtl"] .p_contact_wrap .textarea,
html[dir="rtl"] .business-contact,
html[dir="rtl"] .contact-form,
html[dir="rtl"] .contact-info-card{direction:rtl;text-align:right;}
html[dir="rtl"] .contact-info-card{border-left:0;border-right:8px solid #46312c;border-radius:24px 0 0 24px;}
html[dir="rtl"] .contact-tabs button{border-right:0;border-left:1px solid #241f1f;}
html[dir="rtl"] .contact-tabs button:last-child{border-left:0;}
html[dir="rtl"] .contact-pre-setup-cta{direction:rtl;text-align:right;}
html[dir="rtl"] .contact-field{grid-template-columns:150px minmax(0,1fr);}
html[dir="rtl"] .contact-field>span{grid-column:1;text-align:right;}
html[dir="rtl"] .contact-field>:not(span):not(small){grid-column:2;}
html[dir="rtl"] .contact-field small{grid-column:2;text-align:right;}
html[dir="rtl"] .contact-form button[type="submit"]{width:auto;margin:6px 164px 0 0;}
html[dir="rtl"] .contact-form-actions{margin:6px 164px 0 0;}
html[dir="rtl"] .email-split{direction:ltr;}
html[dir="rtl"] .file-upload{direction:rtl;}
html[dir="rtl"] .file-upload__name{text-align:right;}
html[dir="rtl"] .purchase-estimate{direction:rtl;text-align:right;}
html[dir="rtl"] .purchase-estimate li strong,
html[dir="rtl"] .purchase-estimate-head strong{direction:ltr;unicode-bidi:isolate;}
@media screen and (max-width: 1800px){
    /* .visual .box h1,
.visual .box h2 {font-size:6.25vw;}
    .visual .box h1 span,
.visual .box h2 span {font-size: 1.4583vw;}
    .visual .box p{font-size:1.1458vw;} */
    .visual .box{transform: translate3d(0,-53%,0);}
    
}
@media screen and (max-width: 1432px){
    .visual .box{transform: translate3d(0,-53%,0);}
    .col .picture{flex:30;}
    .content_item .shorts{flex:14;}
    .content_item h3+p span{display:inline-block;margin-bottom:3px;}

    .content_item_0{flex-direction:column;padding-bottom:132px;}
    .content_item_0::before{flex: 0 0 600px;background-position:bottom 40% center;}
    .content_item_0 .inner{padding-left:0;padding-top:120px;}
    .content_item_0 h3,
    .content_item_0 h3+p,
    .content_item_0 .inner p{text-align:center;}
    .content_item_0 .inner ul{justify-content:center;}
    
    .content_item_1 .videos ul{gap:16px;}
    .content_item_1 .videos ul li{flex: 1;}
    .content_item_1 .inner ol>li{padding: 62px 30px 70px;}

    .content_item_2 .col{padding:0 30px;}
    .content_item_2 .col~figure{padding: 0 30px;box-sizing: border-box;}
    /*
    .content_item_2 figure img{width:90%;}
    .content_item_2::before{height:200px;}
    */
}
@media screen and (max-width: 1232px){
    .visual .box{transform: translate3d(0,-53%,0);}
    .content_item_3 ol li p{justify-content:center;flex-wrap:wrap;}
}
@media screen and (max-width: 1024px){
    .content_item_1 .inner ol>li h4{font-size:36px;}
    .container.gallery {padding-right: 16px;padding-left: 16px;}
    .content_item_0 .inner ul{gap:20px 16px;}
}
/*기준 360px*/
@media screen and (max-width: 600px){
    br:not(.mobile_br){display:none;}
    body.blue .header .h_question{display:none !important;}
    .visual{height:auto;min-height:75svh;padding:clamp(176px,28svh,236px) 7.7778vw 10.5556vw;align-items:flex-start;justify-content:flex-start;background-size:cover;background-position:64% center;}
    .visual::before{display:block;background:linear-gradient(90deg, rgba(247,245,242,.94) 0%, rgba(247,245,242,.78) 50%, rgba(247,245,242,.34) 100%),linear-gradient(180deg, rgba(247,245,242,.86) 0%, rgba(247,245,242,.48) 45%, rgba(247,245,242,.22) 100%);}
    .visual .box{transform:none;width:min(88.8889vw,520px);margin-left:0;padding-top:0;box-sizing:border-box;}
    .visual .box h1,
    .visual .box h2{font-size:min(15vw,64px);margin-bottom:4.4444vw;line-height:.98;letter-spacing:0;}
    .visual .box h1 span,
    .visual .box h2 span{font-size:min(5.2vw,22px);line-height:1.25;}
    .visual .box p{max-width:33em;font-size:min(4.2vw,17px);line-height:1.62;font-weight:700;letter-spacing:0;color:#241f1f;text-shadow:0 1px 14px rgba(247,245,242,.55);}

    .col{flex-direction:column;gap:5.5556vw 0;}
    .content_item .shorts{flex:0 0 100%;width:100%;}
    .content_item h3{font-size:7.7778vw;}
    .content_item h3+p{font-size:3.8889vw;}
    .content_item .shorts{border-radius:2.7778vw;}
    
    .content_item_0{min-height:auto;}
    .content_item_0::before{background-image:url(/img/business/IMG_2831-Edit-900.webp);}
    .content_item_0 .inner{align-items:center;padding-left:0;padding-right:0;}
    .content_item_0 h3{font-size: 7.7778vw;}
    .content_item_0 .inner p{font-size:3.8889vw;max-width:min(86vw,520px);margin-left:auto;margin-right:auto;padding:0;}
    .content_item_0 .inner ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5.0000vw 3.3333vw;width:100%;margin:12.2222vw 0 0;justify-items:stretch;box-sizing:border-box;}
    .content_item_0 .inner ul li{width:100%;min-width:0;flex:none;font-size:min(3.6111vw,15px);gap:2.7778vw 0;align-items:center;text-align:center;word-break:keep-all;overflow-wrap:normal;white-space:normal;}
    .content_item_0 .inner ul li::before{width: 19.4444vw;}
    
    .content_item_1::after{height:22.2222vw;}
    .content_item_1 h3+p{margin-bottom:9.4444vw;}
    .content_item_1 .item_visual span{font-size:2.7778vw;}
    .content_item_1 .inner ol{gap:11.1111vw 0;}
    .content_item_1 .inner ol>li{padding: 4.4444vw 3.8889vw 5.5556vw;border-radius:4.4444vw;}
    .content_item_1 .inner ol>li h4{font-size:5.0000vw;margin-bottom:3.3333vw;}
    .content_item_1 .inner ol>li h4::before{line-height:1.45em;}
    .content_item_1 .inner ol>li p{font-size:3.3333vw;margin-top:4.4444vw;font-weight:500;line-height:1.83;}
    .content_item_1 .inner ol>li h5+p{margin-top:1.6667vw;line-height:1.46;margin-bottom:3.8889vw;}
    .content_item_1 article h5{font-size:5.0000vw;}
    .content_item_1 .videos ul{flex-direction:column;justify-content:center;gap:5.5556vw 0;}
    
    /*
    .content_item.content_item_2{padding-bottom:27.7778vw;}
    .content_item_2>p{margin-bottom:8.3333vw;}
    .content_item_2 .swiper-slide{padding:0 4.4444vw;}
    .content_item_2 figcaption{font-size:3.3333vw;}
    .content_item_2 figure img{width:77.7778vw;}
    .content_item_2 figure::after{border-radius:2.7778vw;bottom:-7.7778vw;height:49.1667vw;}
    */
    .content_item_2 .col{padding:0 14px;}
    .content_item_2 .col~figure{margin-top:4.4444vw;}
    .content_item_2 .inner{padding:0 16px;;}
    .content_item_2 .inner>figure figcaption{font-size:3.8889vw;}
    .content_item_2 .inner::after{border-radius:5.5556vw;width: calc(100% - 8.8889vw);height: calc(100% + 8.8889vw);margin-bottom:-4.4444vw;}
    

    .content_item_3{padding-bottom:27.7778vw;padding-top: 22.2222vw;}
    .content_item_3 ol{gap:7.2222vw 0;}
    .content_item_3 ol li p{font-size:3.3333vw;line-height:1.33;margin-top:2.2222vw;justify-content:flex-start;position: relative;padding-left:8.3333vw;}
    .content_item_3 ol li p::before{width:6.6667vw;font-size:4.1667vw;margin-right:2.7778vw;position: absolute;top:50%;left:0;transform:translateY(-50%);}
    .content_item.content_item_4{padding-bottom:22.2222vw;}
    .content_item_4 .container.gallery{padding:10.0000vw 4.4444vw 0;}
    .content_item_4 .brand-marketing-masonry{column-count:2;column-gap:2.2222vw;}
    .content_item_4 .brand-marketing-masonry .masonry-item{padding:0;margin-bottom:2.2222vw;}
    .content_item_4 .brand-marketing-masonry img{border-radius:3.3333vw;}

    .container.gallery{margin-bottom:16.6667vw;}
    .p_contact_wrap{padding:22.2222vw 4.4444vw 16.6667vw;}
    .contact-heading{margin:0 0 8.8889vw;font-size:12.2222vw;line-height:1.1;}
    .p_contact_wrap .textarea{display:grid;grid-template-columns:1fr;gap:6.6667vw;padding:0;}
    .contact-info-card{position:relative;top:auto;min-height:auto;border-left:1.6667vw solid #46312c;border-radius:0 5.5556vw 5.5556vw 0;padding:12.2222vw 7.7778vw;}
    html[dir="rtl"] .contact-info-card{border-left:0;border-right:1.6667vw solid #46312c;border-radius:5.5556vw 0 0 5.5556vw;}
    .contact-info-panel h3{margin-bottom:8.8889vw;font-size:8.6111vw;line-height:1.22;}
    .contact-info-panel p{font-size:4.1667vw;line-height:1.78;}
    .contact-info-panel p+p{margin-top:5.5556vw;}
    .contact-tabs button{height:12.7778vw;font-size:3.6111vw;}
    .contact-pre-setup-cta{grid-template-columns:1fr;gap:3.3333vw;margin-bottom:4.4444vw;padding:4.4444vw;}
    .contact-pre-setup-cta__eyebrow{margin-bottom:1.1111vw;font-size:3.0556vw;}
    .contact-pre-setup-cta__title{font-size:4.4444vw;}
    .contact-pre-setup-cta__description{margin-top:1.6667vw;font-size:3.3333vw;}
    .contact-pre-setup-cta__action{width:100%;min-height:12.2222vw;padding:0 3.3333vw;font-size:3.8889vw;}
    .contact-form{padding:6.6667vw 4.4444vw 8.3333vw;gap:4.4444vw;}
    .contact-field{grid-template-columns:1fr;gap:2.2222vw;}
    html[dir="rtl"] .contact-field{grid-template-columns:1fr;}
    html[dir="rtl"] .contact-field>span,
    html[dir="rtl"] .contact-field>:not(span):not(small),
    html[dir="rtl"] .contact-field small{grid-column:1;}
    .contact-field>span{padding-top:0;font-size:3.8889vw;}
    .contact-form input,
    .contact-form select{height:12.2222vw;font-size:3.8889vw;}
    .email-split{gap:2.2222vw;}
    .email-split span{font-size:3.8889vw;}
    .setup-code-control{gap:2.2222vw;}
    .setup-code-control a{height:12.2222vw;padding:0 3.3333vw;font-size:3.6111vw;}
    .p_contact_wrap .textarea .contact-form input:not([type="hidden"]):not([type="file"]),
    .p_contact_wrap .textarea .contact-form select{height:12.2222vw;min-height:12.2222vw;font-size:3.8889vw;}
    .contact-form textarea{min-height:33.3333vw;font-size:3.8889vw;}
    .contact-form small{grid-column:1;margin-top:-1.1111vw;font-size:3.3333vw;}
    .date-grid{gap:2.2222vw;}
    .rental-address-grid{grid-template-columns:1fr;gap:2.2222vw;}
    .address-field{gap:2.2222vw;}
    .address-field__search{grid-template-columns:minmax(0,1fr) auto;gap:2.2222vw;}
    .address-field__btn{height:12.2222vw;padding:0 4.4444vw;font-size:3.8889vw;}
    .address-field__btn--rental{grid-column:1;margin-top:2.2222vw;width:100%;}
    .rental-region-fallback{padding:3.3333vw 3.8889vw;}
    .rental-qr-note{grid-column:1;margin-top:2.2222vw;padding:3.3333vw 3.8889vw;}
    .rental-qr-note__title{font-size:3.6111vw;}
    .rental-qr-note__body{font-size:3.3333vw;}
    .rental-qr-note__close{height:9.4444vw;margin-top:3.3333vw;padding:0 4.4444vw;font-size:3.6111vw;}
    .rental-address-grid--fallback{grid-template-columns:1fr;}
    .purchase-grid{grid-template-columns:1fr;gap:2.2222vw;}
    /*
     * ★썸네일을 전폭으로 돌린다. 위쪽 `(hover:none), (max-width:600px)` 블록이 `grid-column:2` 로 두는데,
     *   그건 라벨 열이 살아 있는 2열 배치(터치 태블릿)를 위한 값이다. 이 블록에서 필드는 `1fr` 한 열이라
     *   2번 열을 지정하는 순간 **없던 열이 생겨** 필드가 쪼개진다 — 390px 실측에서 라벨 112px + 썸네일 200px 로
     *   갈라져 제품 선택칸이 200px 로 눌렸다(2026-09-03 사장님 지적).
     */
    .purchase-thumb{grid-column:1 / -1;max-width:240px;}
    .purchase-sub-label{margin-bottom:1.6667vw;font-size:3.3333vw;}
    .purchase-estimate{padding:4.4444vw;}
    .purchase-estimate-head{gap:3.3333vw;padding-bottom:3.3333vw;margin-bottom:3.3333vw;}
    .purchase-estimate-head strong{font-size:7.2222vw;}
    .purchase-estimate-head span,
    .purchase-estimate-head em,
    .purchase-estimate li,
    .purchase-estimate li.muted{font-size:3.3333vw;}
    .purchase-estimate ul{gap:2.2222vw;margin-bottom:4.4444vw;}
    .purchase-estimate-note{font-size:3.3333vw;}
    .quote-date-toggle{gap:1.6667vw;margin-top:2.7778vw;font-size:3.0556vw;}
    .purchase-quote-button{height:12.2222vw;font-size:3.8889vw;}
    .purchase-international-notice>div{padding:4.4444vw;}
    .purchase-international-notice strong{font-size:3.8889vw;}
    .purchase-international-notice p{margin:1.6667vw 0 3.3333vw;font-size:3.3333vw;}
    .purchase-international-notice a{min-height:10vw;padding:0 3.3333vw;font-size:3.3333vw;}
    /* 모바일은 라벨이 입력 칸 위로 올라가 열이 하나뿐이라, 들여쓰기를 되돌린다. */
    .contact-consent{margin-left:0;font-size:3.6111vw;}
    .contact-form button[type="submit"]{width:100%;height:13.3333vw;margin-top:1.6667vw;margin-left:0;font-size:4.4444vw;}
    html[dir="rtl"] .contact-form button[type="submit"]{margin-right:0;}
    .contact-form-actions{width:100%;margin-top:1.6667vw;margin-left:0;flex-direction:column;}
    .contact-form-actions button[type="submit"],
    .contact-form-actions button[type="button"]{width:100%;height:13.3333vw;font-size:4.4444vw;}
    html[dir="rtl"] .contact-form-actions{margin-right:0;}
    .quote-layer{padding:3.3333vw;}
    .quote-layer__panel{width:100%;max-height:94vh;}
    .quote-layer__head{align-items:flex-start;flex-direction:column;padding:4.4444vw;}
    .quote-layer__head h3{font-size:5vw;}
    .quote-layer__actions{width:100%;display:grid;grid-template-columns:1fr 1fr;}
    .quote-layer__actions button{height:11.1111vw;font-size:3.6111vw;}
    .quote-layer__preview{padding:3.3333vw;}
    .quote-layer__preview .sheet{transform:none;}
    
}

@media screen and (min-width: 600px){
    .mobile_br{display:none;}
}

/* ──────────────────────────────────────────────────────────────
   산문 섹션 — 제품 / 앱 구독 / 시작 방법 / 운영 (2026-08-25)

   흐르는 문장 네 덩어리를 담는 자리다. 표나 카드로 쪼개지 않는 것이
   이 페이지의 문장 규율이라, 본문 폭만 읽기 좋게 잡아 준다.
   ★타이포는 `.content_item h3` · `.content_item h3+p` 공통 규칙을 그대로 쓴다.
     여기서 다시 정의하면 섹션마다 크기가 갈린다.
   ────────────────────────────────────────────────────────────── */
/* ★`.content_item_1 .bg::after` 의 패턴이 섹션 바깥 아래로 흘러나온다.
   산문 섹션이 그 밑에 깔리면 제목이 패턴에 덮여 흐려 보이므로 위로 올린다. */
.content_item_prose{position:relative;z-index:2;padding-top:120px;padding-bottom:160px;}
.content_item_prose .inner{margin-top:64px;}
.content_item_prose .inner > p{font-size:22px;line-height:1.68;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.content_item_prose .inner > p + p{margin-top:1.6em;}
.content_item_prose .inner > p strong{font-weight:800;}
.content_item_prose .inner a{color:#46312c;text-decoration:underline;text-underline-offset:.22em;}
.content_item_prose .inner a:hover{background-color:#241f1f;color:#fff;text-decoration:none;}

/* 섹션을 닫는 자리 — 마지막 문단과 버튼을 함께 가운데로 모은다. */
.section_close{margin-top:72px;text-align:center;}
.section_close p{font-size:22px;line-height:1.68;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.section_close p + .section_cta{margin-top:36px;}
.content_item_prose .section_close{margin-top:56px;}

/* ★버튼 안의 링크 색은 `.content_item_prose .inner a` 를 덮어써야 한다 — 밑줄이 남으면 버튼으로 안 읽힌다. */
.section_cta,
.content_item_prose .inner a.section_cta{display:inline-flex;align-items:center;justify-content:center;min-width:280px;padding:22px 44px;border-radius:999px;background-color:#241f1f;color:#fff;font-size:22px;font-weight:700;letter-spacing:-.02em;text-decoration:none;box-sizing:border-box;}
.section_cta:hover,
.content_item_prose .inner a.section_cta:hover{background-color:#46312c;color:#fff;text-decoration:none;}

@media screen and (max-width:1024px){
  .content_item_prose{padding-top:80px;padding-bottom:100px;}
  .content_item_prose .inner{margin-top:44px;}
  .content_item_prose .inner > p,
  .section_close p{font-size:18px;}
  .section_cta,
  .content_item_prose .inner a.section_cta{font-size:18px;min-width:240px;padding:18px 36px;}
}

@media screen and (max-width:461px){
  .content_item_prose{padding-top:13.3333vw;padding-bottom:18.8889vw;}
  .content_item_prose .inner{margin-top:8.3333vw;}
  .content_item_prose .inner > p,
  .section_close p{font-size:4.4444vw;}
  .content_item_prose .inner > p + p{margin-top:1.5em;}
  .section_close{margin-top:11.1111vw;}
  .section_cta,
  .content_item_prose .inner a.section_cta{font-size:4.4444vw;min-width:0;width:100%;padding:4.4444vw 6vw;}
}

/* ──────────────────────────────────────────────────────────────
   본문 레이아웃 — 줄글 대신 카드·그리드

   카피를 먼저 쓰고 `<p>` 로 흘려 넣었더니 22px 본문이 3,500px 이어졌다.
   문장은 그대로 두고 그릇을 바꾼다. 아래 넷은 모두 `.content_item_prose` 의
   여백·타이포·쌓임 순서를 그대로 쓰고, 안쪽 배치만 따로 잡는다.
   ────────────────────────────────────────────────────────────── */

/* 「손님 손에 남는 것」 소제목 — 문단 사이 여백만으로는 덩어리가 안 보였다. */
.content_item_0 .inner h4{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#46312c;padding:0 16px;margin:56px 0 14px;}
.content_item_0 .inner h4:first-of-type{margin-top:0;}
.content_item_0 .inner h4+p{margin-top:0;}

/* 브랜딩 출력물 샘플 — 말로 설명하던 자리를 실물로 대신한다. */

/* [B-9] 제품 3열 */
.product_cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.product_cards > li{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:28px 32px 40px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
.product_cards figure{margin:0 0 20px;border-radius:14px;overflow:hidden;background:#f5f1eb;}
.product_cards figure img{width:100%;height:auto;}
.product_cards h4{font-size:30px;font-weight:900;letter-spacing:-.03em;color:#241f1f;}
.product_cards .paper{margin-top:8px;font-size:17px;font-weight:700;letter-spacing:0;color:#8a7a6d;}
.product_cards li > p:last-child{margin-top:18px;font-size:19px;line-height:1.62;letter-spacing:0;word-break:keep-all;color:#241f1f;}

.wood_note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px;margin-top:56px;padding:36px 40px;border-radius:20px;background:#f5f1eb;}
.wood_note > p{flex:1 1 420px;font-size:19px;line-height:1.62;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.wood_swatches{display:flex;gap:28px;}
.wood_swatches li{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:0;color:#46312c;}
.wood_swatches .chip{display:block;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(36,31,31,.12);}
/* 원목 네 가지 — 제품 렌더에서 뽑은 근사색이다. 실물 색은 제작 로트마다 조금씩 다르다. */
.wood_swatches .chip_walnut{background:#5a3a28;}
.wood_swatches .chip_oak{background:#c49a5f;}
.wood_swatches .chip_maple{background:#e0cfa8;}
.wood_swatches .chip_cherry{background:#a85a32;}

/* [B-10] 구독 2열 */
.plan_cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;align-items:stretch;}
.plan_cards > li{background:#fff;border-radius:20px;padding:44px 44px 48px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
.plan_cards > li.plan_featured{background:#241f1f;color:#fff;}
.plan_cards h4{font-size:32px;font-weight:900;letter-spacing:-.03em;color:#241f1f;}
.plan_cards .plan_featured h4{color:#fff;}
.plan_cards .plan_for{margin-top:8px;font-size:17px;font-weight:700;letter-spacing:0;color:#8a7a6d;}
.plan_cards .plan_featured .plan_for{color:#c9b8a8;}
.plan_cards > li > ul{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.plan_cards > li > ul li{position:relative;padding-left:26px;font-size:19px;line-height:1.58;letter-spacing:0;word-break:keep-all;}
.plan_cards > li > ul li::before{position:absolute;left:0;top:.62em;display:block;content:'';width:8px;height:8px;border-radius:50%;background:#241f1f;}
.plan_cards .plan_featured > ul li::before{background:#fff;}
/* ★`consoleMain.ts` 의 승인 문구다. 문장을 넓히면 이용약관 3·4조와 충돌한다. */
.plan_cards .plan_note{margin-top:30px;padding-top:26px;border-top:1px solid rgba(255,255,255,.22);font-size:15px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#c9b8a8;}
.plan_cards .plan_note a{color:#fff;text-decoration:underline;text-underline-offset:.22em;}

/* [B-11] 시작 경로 3단 */
.path_cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:path;}
.path_cards > li{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:40px 36px 36px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
.path_cards > li::before{counter-increment:path;content:counter(path);display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:22px;border-radius:50%;background:#241f1f;color:#fff;font-size:19px;font-weight:700;font-family:"Pretendard Variable",Pretendard,sans-serif;}
.path_cards .path_when{font-size:16px;font-weight:700;letter-spacing:0;word-break:keep-all;color:#8a7a6d;}
.path_cards h4{margin-top:6px;font-size:30px;font-weight:900;letter-spacing:-.03em;color:#241f1f;}
.path_cards > li > p:not(.path_when){margin-top:18px;font-size:19px;line-height:1.62;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.path_cards a{margin-top:auto;padding-top:24px;font-size:18px;font-weight:700;color:#46312c;text-decoration:underline;text-underline-offset:.22em;}
.path_cards a:hover{color:#241f1f;}

/* 확장 구독이 있어야 쓰는 기능임을 제목 옆에서 알린다.
   ★배지는 눈으로만 읽히는 표시다. 조건은 반드시 본문 문장에도 적는다 —
     스크린리더에서는 제목이 「핑퐁샷 확장 구독」으로 한 덩어리로 읽힌다. */
.business_page .tier_badge{display:inline;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:.72em;font-weight:600;letter-spacing:-.01em;vertical-align:baseline;color:#8a7f78;white-space:nowrap;}

/* 사례 제목 아래 붙는 전시·행사 정식 명칭 */
.business_page .case_sub{display:block;margin-top:8px;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.5;word-break:keep-all;color:#8a7a6d;}

/* 인트로 제품 사진 — 문단 아래에 둔다(h3 + p 인접 규칙을 깨지 않기 위해서다) */
.business_page .intro_shot{width:100%;max-width:var(--measure);margin:44px auto 0;}
.business_page .intro_shot img{display:block;width:100%;height:auto;border-radius:20px;}

/* [B-12] 운영 문답 2열 */
.faq_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;}
/* 항목이 셋일 때는 3열 — 2열에 셋을 넣으면 빈 칸이 하나 남는다(2026-09-03). */
.business_page .faq_grid_3{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;}
.faq_grid dt{font-size:24px;font-weight:800;letter-spacing:-.02em;word-break:keep-all;color:#241f1f;}
.faq_grid dd{margin-top:14px;font-size:19px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.faq_grid dd a{color:#46312c;text-decoration:underline;text-underline-offset:.22em;}

/* 섹션을 닫는 한 문장 — 카드가 다루지 않는 예외를 여기서 받는다. */
.content_item_prose .inner .section_note{margin-top:48px;text-align:center;font-size:19px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#5d534f;}

@media screen and (max-width:1024px){
  .product_cards,
  .path_cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .product_cards > li:last-child,
  .path_cards > li:last-child{grid-column:1 / -1;}
  .plan_cards{grid-template-columns:minmax(0,1fr);gap:24px;}
  .faq_grid{gap:36px 40px;}
  .business_page .faq_grid_3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .product_cards h4,
  .path_cards h4{font-size:26px;}
  .plan_cards h4{font-size:28px;}
  .faq_grid dt{font-size:21px;}
  .product_cards li > p:last-child,
  .path_cards > li > p:not(.path_when),
  .plan_cards > li > ul li,
  .faq_grid dd,
  .wood_note > p,
  .content_item_prose .inner .section_note{font-size:17px;}
}

@media screen and (max-width:640px){
  .product_cards,
  .path_cards,
  .faq_grid{grid-template-columns:minmax(0,1fr);}
  .business_page .faq_grid_3{grid-template-columns:minmax(0,1fr);}
  .business_page .tier_badge{font-size:.72em;}
  .business_page .intro_shot{margin-top:8vw;}
  .business_page .intro_shot img{border-radius:14px;}
  .product_cards > li:last-child,
  .path_cards > li:last-child{grid-column:auto;}
  .content_item_0 .inner h4{text-align:center;}
  /* 세로로 쌓으면 `flex:1 1 420px` 이 문단을 늘려 스와치와 사이가 벌어진다. */
  .wood_note{flex-direction:column;align-items:flex-start;gap:28px;padding:28px 24px;}
  .wood_note > p{flex:0 1 auto;}
  .wood_swatches{gap:20px;align-self:center;}
  .plan_cards > li{padding:32px 26px 34px;}
  .path_cards > li{padding:30px 24px 28px;}
  .product_cards > li{padding:22px 22px 30px;}
}

/* [B-3] AI 필터 — 스물한 장을 한눈에 늘어놓고, 커스텀 화면은 옆에 붙인다. */
.filter_strip ul{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:20px;}
.filter_strip li{display:flex;flex-direction:column;gap:10px;}
.filter_strip img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#f5f1eb;}
.filter_strip span{font-size:16px;font-weight:700;letter-spacing:0;text-align:center;color:#46312c;}
.filter_strip figcaption{display:block;margin-top:32px;text-align:center;font-size:19px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#241f1f;}

.filter_custom{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:48px;align-items:center;margin-top:88px;padding:48px;border-radius:20px;background:#f5f1eb;}
.filter_custom figure img{width:100%;height:auto;border-radius:14px;}
.filter_custom h4{font-size:28px;font-weight:900;letter-spacing:-.03em;word-break:keep-all;color:#241f1f;}
.filter_custom p{margin-top:20px;font-size:19px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#241f1f;}

@media screen and (max-width:1024px){
  .filter_strip ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;}
  .filter_strip span{font-size:14px;}
  .filter_strip figcaption,
  .filter_custom p{font-size:17px;}
  .filter_custom{grid-template-columns:minmax(0,1fr);gap:32px;margin-top:64px;padding:36px;}
  .filter_custom h4{font-size:24px;}
}

@media screen and (max-width:640px){
  .filter_strip ul{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
  .filter_strip figcaption{margin-top:24px;}
  .filter_custom{margin-top:48px;padding:24px;}
  /* 좁은 단에 그대로 넣으면 설정 화면의 글씨가 안 읽힌다. 가로로 밀어 보게 둔다. */
  .filter_custom figure{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:14px;}
  .filter_custom figure img{min-width:560px;}
}

/* [B-2]·[B-4]·[B-5] 출력물과 전달 방식 — 셋 다 보여 줄 것이 있어 카드로 세운다.
   AI 필터를 빼내고도 남은 셋이 줄글이었고, 1024px 아래에서는 소제목만 왼쪽 정렬이라
   줄까지 어긋났다. 핑퐁샷은 정지 이미지로 「앞뒤로 반복」이 보이지 않아 영상을 쓴다. */
.content_item_kept{padding:180px 0 200px;background:linear-gradient(0deg,rgba(247,245,242,1) 0%,rgba(247,245,242,0) 100%);}
.content_item_kept .inner{margin-top:64px;}
.kept_band{width:100%;margin:0 0 72px;border-radius:20px;overflow:hidden;}
.kept_band img{width:100%;height:auto;aspect-ratio:12/5;object-fit:cover;object-position:center 42%;}
.kept_cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;}
.kept_cards > li{display:flex;flex-direction:column;background:#fff;border-radius:20px;padding:24px 28px 36px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
/* 셋의 원본 비율이 제각각이라(16:9 · 5:6 · 영상) 한 상자에 넣고 여백으로 받는다. */
.kept_cards figure{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;margin-bottom:22px;border-radius:14px;overflow:hidden;background:#f5f1eb;}
.kept_cards figure img{width:100%;height:100%;object-fit:cover;}
/* QR 인쇄물만 잘라내면 안 된다 — 잘린 QR 은 이 카드가 말하는 것을 못 보여 준다. */
.kept_cards .kept_print img{object-fit:contain;padding:14px;box-sizing:border-box;}
.kept_cards .kept_motion video{width:100%;height:100%;object-fit:cover;display:block;}
.kept_cards h4{font-size:26px;font-weight:900;letter-spacing:-.03em;color:#241f1f;}
.kept_cards p{margin-top:14px;font-size:19px;color:#241f1f;}

@media screen and (max-width:1024px){
  .content_item_kept{padding:120px 0 132px;}
  .content_item_kept .inner{margin-top:44px;}
  .kept_band{margin-bottom:48px;}
  .kept_cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}
  .kept_cards > li:last-child{grid-column:1 / -1;}
  .kept_cards h4{font-size:23px;}
  .kept_cards p{font-size:17px;}
}

@media screen and (max-width:640px){
  /* 12:5 를 390px 폭에 넣으면 162px — 무엇이 붙어 있는지 안 보인다. */
  .kept_band img{aspect-ratio:4/3;}
  .kept_cards{grid-template-columns:minmax(0,1fr);}
  .kept_cards > li:last-child{grid-column:auto;}
  .kept_cards > li{padding:20px 22px 30px;}
}

/* [B-7] 브랜드 활용 사례 — 셋을 한 틀에 맞춘다.
   옛 페이지에서는 사례마다 마크업이 달라(전폭 이미지 / 이미지+영상 / 거기에 영상 세 편 더)
   같은 성격의 셋이 서로 다르게 생겨 있었다. 왼쪽 설명 · 오른쪽 결과물로 통일하고,
   영상 수가 다른 것만 오른쪽 안에서 갈린다. */
.case_cards{display:flex;flex-direction:column;gap:32px;}
.case_cards > li{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:40px;align-items:start;background:#fff;border-radius:20px;padding:44px;box-shadow:6px 6px 20px 0 rgba(0,0,0,.06);box-sizing:border-box;}
.case_text h4{font-size:30px;font-weight:900;letter-spacing:-.03em;word-break:keep-all;color:#241f1f;}
.case_text p{margin-top:18px;font-size:19px;line-height:1.68;letter-spacing:0;word-break:keep-all;color:#241f1f;}
.case_media{display:grid;gap:20px;}
.case_media figure img{width:100%;height:auto;border-radius:14px;}
.case_media_pair{grid-template-columns:minmax(0,1fr) 210px;align-items:start;}
/* 사례마다 영상 수가 달라 열 수를 고정하지 않는다 — 한 칸 크기를 고정하고 늘어놓는다. */
.case_shorts{display:flex;flex-wrap:wrap;gap:16px;}
.case_shorts > div{flex:0 1 215px;}
.case_short{position:relative;aspect-ratio:9/16;border-radius:14px;overflow:hidden;background:#f5f1eb;}
.case_short iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}

@media screen and (max-width:1024px){
  .case_cards{gap:24px;}
  .case_cards > li{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px;}
  .case_text h4{font-size:26px;}
  .case_text p{font-size:17px;}
  .case_media_pair{grid-template-columns:minmax(0,1fr) 180px;}
}

@media screen and (max-width:640px){
  .case_cards > li{padding:24px 22px 28px;}
  /* 세로 영상을 좁은 폭에서 옆에 붙이면 둘 다 못 알아본다. 아래로 내린다. */
  .case_media_pair{grid-template-columns:minmax(0,1fr);}
  /* grid 항목에 margin:auto 만 주면 내용이 절대배치 iframe 뿐이라 폭이 0 으로 접힌다 — 폭을 준다. */
  .case_media_pair .case_short{width:100%;max-width:220px;margin:0 auto;}
  .case_shorts{gap:12px;}
  .case_shorts > div{flex:0 1 calc(50% - 6px);}
}

/* ──────────────────────────────────────────────────────────────
   본문 폭 — 1000px 하나

   섹션마다 980·1000·1080·1200·1280·1432 로 제각각이라 스크롤할 때마다 본문의
   시작점과 끝점이 흔들렸다. 여기 한 곳에서만 정한다.

   ★`.business_page` 스코프는 `src/pages/en/business.astro` 때문이다 — EN 은 아직
     옛 폭을 전제로 한 50:50 분할과 아이콘 `ul`, 번호 `ol` 을 쓴다. 공통 규칙을
     그대로 줄이면 EN 이 같이 찌그러진다. EN 을 옮길 때 이 스코프를 벗긴다.
   ────────────────────────────────────────────────────────────── */
.business_page{--measure:1000px;}
/* main 의 .visual .box h1 span{margin-bottom:.55em} 는 제품명이 Business 위에 오는 다른 로케일용이다. 이 페이지는 Business 가 위라 여백을 끈다. */
.business_page .visual .box h1 span{margin-bottom:0;}
.business_page .content_item .inner,
.business_page .content_item h3,
.business_page .content_item h3 + p,
.business_page .content_item_4 .brand-marketing-masonry{width:100%;max-width:var(--measure);margin-left:auto;margin-right:auto;box-sizing:border-box;}
/* 히어로도 같은 기둥에 세운다 — 혼자 화면 끝에서 시작하면 첫 인상부터 어긋난다. */
/* 갤러리는 폭이 줄었으니 열을 하나 줄인다. 1000px 에 넉 줄이면 사진이 너무 잘다. */
.business_page .content_item_4 .brand-marketing-masonry{column-count:3;}

/* 1000px 안에서 다시 잡는 배치 */
.business_page .kept_cards p,
.business_page .product_cards li > p:last-child,
.business_page .path_cards > li > p:not(.path_when){font-size:17px;}
.business_page .kept_cards h4,
.business_page .product_cards h4,
.business_page .path_cards h4{font-size:24px;}
/* 512px 오른쪽 단에 세로영상 넷은 못 들어간다. 설명 위 · 결과물 아래로 쌓는다. */
.business_page .case_cards > li{grid-template-columns:minmax(0,1fr);gap:28px;padding:36px;}
.business_page .case_text p{max-width:760px;}
/* 설정 화면의 글씨가 470px 짜리 단에서는 안 읽힌다. 2열을 버리고 전폭으로 둔다. */
.business_page .filter_custom{grid-template-columns:minmax(0,1fr);gap:32px;padding:40px;}

@media screen and (max-width:1024px){
  .business_page .content_item_4 .brand-marketing-masonry{column-count:2;}
}

@media screen and (max-width:640px){
  .business_page .content_item_4 .brand-marketing-masonry{column-count:2;}
  .business_page .case_cards > li{padding:24px 22px 28px;}
  .business_page .filter_custom{padding:24px;}
}

/* 부제를 뺐더니 패턴 띠 바로 아래에 제목이 붙었다. 다른 섹션과 같은 여백을 준다. */
.business_page .content_item_1{padding-top:180px;}
.business_page .content_item_1 .inner{margin-top:64px;}

@media screen and (max-width:1024px){
  .business_page .content_item_1{padding-top:120px;}
  .business_page .content_item_1 .inner{margin-top:44px;}
}

/* 경로 카드의 다음 행동은 링크가 아니라 버튼으로 보여야 한다.
   ★밑줄 링크로 두면 `.content_item_prose .inner a:hover` 의 검은 판이 그대로 덮어
     글자만 검은 블록이 됐다. 여기서 통째로 덮어쓴다. */
.business_page .path_cards > li > a{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border:1.5px solid #241f1f;border-radius:999px;background:#fff;color:#241f1f;font-size:16px;font-weight:700;letter-spacing:-.02em;text-decoration:none;box-sizing:border-box;}
.business_page .path_cards > li > a:hover{background:#241f1f;color:#fff;text-decoration:none;}
/* 여백은 본문이 갖는다 — 버튼에 `margin-top` 을 주면 `margin-top:auto` 를 덮어써
   버튼이 카드 바닥에서 떨어지고, 카드 셋의 버튼 높이가 어긋난다. */
.business_page .path_cards > li > p:not(.path_when){margin-bottom:26px;}

/* 본문 링크의 hover 도 검은 판을 쓰지 않는다 — 문장 한가운데가 블록으로 뒤집힌다. */
.business_page .content_item_prose .inner a:hover{background-color:transparent;color:#241f1f;text-decoration:underline;text-decoration-thickness:2px;}
.business_page .content_item_prose .inner a.section_cta:hover{background-color:#46312c;color:#fff;text-decoration:none;}
/* 검은 카드 위의 약관 링크는 어두워지면 안 보인다. */
.business_page .plan_cards .plan_note a:hover{color:#fff;}

/*
 * 조건 문구. 예전에는 `white-space:nowrap` 으로 한 줄에 묶어 제목 높이를 맞췄는데, 그 폭은
 * 한국어(122~141px)에만 맞았다 — 2026-09-03 실측에서 229px 칸 밖으로 삐져나갔다:
 * 러시아어 241/393/380, 독일어 229/293/330, 힌디어 241, 태국어 246. 줄바꿈을 허용하고
 * 자리(min-height)로 제목 높이를 맞춘다.
 */
.business_page .path_cards .path_when{font-size:15px;white-space:normal;word-break:keep-all;min-height:2.6em;}

/*
 * 카드 제목은 `common.css` 의 `body{word-break:break-all}` 을 물려받아 단어 중간에서 끊겼다
 * (러시아어 「Прокат на меропри/ятиях」, 영어 「Event rental busines/s」). 제목은 어느 언어에서도
 * 단어 중간에서 끊으면 안 된다 — 아주 긴 낱말만 `overflow-wrap` 으로 넘긴다.
 */
.business_page .path_cards h4,
.business_page .product_cards h4,
.business_page .plan_cards h4,
.business_page .kept_cards h4,
.business_page .case_text h4,
.business_page .faq_grid dt{word-break:keep-all;overflow-wrap:break-word;}

/* [B-1b] 무엇인지부터 답하는 첫 섹션. 다른 섹션의 부제는 한 문장이라 36px 로 세우지만
   여기는 두 문장이라 그 크기로는 표어처럼 읽힌다. 한 단으로 내려 잡는다. */
.business_page .content_item_intro{padding-bottom:120px;}
/* ★2026-09-03 사장님 지시: 모든 섹션의 제목·부제 크기를 인트로와 같게 맞춘다.
   36px 부제는 한 문장일 때만 표어로 읽혔고, 두 문단이 들어가면서 본문 크기(26px)로 내렸다.
   부제가 여러 문단이면 뒤따르는 문단(`h3 ~ p`, 섹션 직계 형제만)도 같은 폭·크기로 따라간다. */
.business_page .content_item h3 ~ p{width:100%;max-width:860px;margin-left:auto;margin-right:auto;box-sizing:border-box;font-size:26px;line-height:1.42;text-wrap:balance;letter-spacing:-.02em;font-weight:500;text-align:center;word-break:keep-all;padding:0 16px;}
.business_page .content_item h3 ~ p{margin-top:10px;}
.business_page .content_item h3 + p{margin-top:32px;}

/* 그리드 본문은 한 크기(17px) — 칸마다 글자 크기가 다르면 균형이 깨져 보인다(2026-09-03). */
.business_page .faq_grid dd{font-size:17px;}
/* 문단을 둘로 나눈 자리의 간격 — 본문 크기별로 한 단계씩 */
.business_page .kept_cards p + p,
.business_page .case_text p + p,
.business_page .filter_custom p + p{margin-top:10px;}
.business_page .section_close p + p{margin-top:12px;}
.business_page .faq_grid dd p{margin:0;line-height:1.65;}
.business_page .faq_grid dd p + p{margin-top:10px;}
/* AI 프로필 한 문단 — 필터 띠 아래, 커스텀 필터 위. 캡션과 같은 크기로 가운데 */
.business_page .filter_note{margin:28px auto 0;max-width:760px;text-align:center;font-size:19px;line-height:1.66;letter-spacing:0;word-break:keep-all;color:#241f1f;}

/* 사례 미디어 — 사장님 지시(2026-09-03): 컨테이너를 5:5 로 가르고 두 칸의 세로 크기를 같게.
   왼쪽 이미지는 텍스트가 든 합성 컷이라 잘라 낼 수 없고, 오른쪽은 9:16 세로 영상이라 늘릴 수 없다.
   그래서 두 칸을 같은 비율(3:4)의 판으로 고정하고 각 미디어를 그 안에 맞춰 넣는다.
   판 색은 합성 컷의 바탕색(#ddd5cd)이라 이미지 쪽은 이음새가 안 보인다. */
@media screen and (min-width:641px){
  .business_page .case_media_pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch;}
  .business_page .case_media_pair > figure,
  .business_page .case_media_pair > .case_short{aspect-ratio:3/4;margin:0;border-radius:14px;overflow:hidden;background:#ddd5cd;}
  .business_page .case_media_pair > figure{display:flex;align-items:center;justify-content:center;}
  .business_page .case_media_pair > figure img{width:100%;height:100%;object-fit:contain;border-radius:0;}
  .business_page .case_media_pair > .case_short{display:flex;justify-content:center;}
  .business_page .case_media_pair > .case_short iframe{position:static;width:auto;height:100%;aspect-ratio:9/16;}
  /* 세로 영상 둘도 같은 판에 5:5 */
  .business_page .case_shorts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;}
  .business_page .case_shorts > div{flex:none;aspect-ratio:3/4;display:flex;justify-content:center;background:#ddd5cd;}
  .business_page .case_shorts > div iframe{position:static;width:auto;height:100%;aspect-ratio:9/16;}
}

@media screen and (max-width:1024px){
  .business_page .content_item h3 ~ p{font-size:20px;margin-top:8px;}
  .business_page .content_item h3 + p{margin-top:24px;}
  .business_page .filter_note{font-size:17px;}
}

/*
 * 문의 섹션(Contact us)을 1200px 아래에서 한 칸으로 접는다.
 *
 * ★기준 레이아웃은 `minmax(320px,.92fr) minmax(420px,1.08fr)` 2열이고, 1열로 접히는 건
 *   600px 아래뿐이었다. 그 사이(601~1200px)에서는 오른쪽 문의폼이 라벨(성함·이메일·
 *   카테고리)과 입력칸을 가로로 함께 담아야 해서 입력칸이 눌린다. 이메일은 아이디·@·
 *   도메인 세 칸이라 더 심하고, 왼쪽 설명 문단도 한 줄에 열 몇 글자로 끊겨 읽기 나쁘다.
 *
 * ★`grid-template-columns` 만 덮는다. 600px 블록의 vw 기반 여백·글자 크기는 그대로 둔다.
 */
@media screen and (max-width:1200px){
    .p_contact_wrap .textarea{grid-template-columns:minmax(0,1fr);}
}

/* 본문 행간 — 부제(1.42)와 같이 조였다. 가운데 정렬 문단은 balance 로 줄 길이를 맞추고,
   카드 본문은 pretty 로 한 어절짜리 마지막 줄만 막는다(지원 안 하는 브라우저는 그냥 무시). */
.business_page .kept_cards p,
.business_page .product_cards li > p:last-child,
.business_page .path_cards > li > p:not(.path_when),
.business_page .faq_grid dd,
.business_page .wood_note > p{line-height:1.4;text-wrap:pretty;}
.business_page .filter_custom p{line-height:1;text-wrap:pretty;}
.business_page .case_text p{line-height:1;text-wrap:pretty;}
/* 위쪽 공용 블록(.content_item_kept .kept_cards p …)이 1.68 을 !important 로 박아 두어서 여기만 같은 무게로 덮는다 */
.business_page .kept_cards li p{line-height:1.4 !important;text-wrap:pretty;}
.business_page .section_close p,
.business_page .filter_note,
.business_page .filter_strip figcaption,
.business_page .content_item_prose .inner .section_note{line-height:1.5;text-wrap:balance;}
.business_page .content_item h3{text-wrap:balance;}

/* 도입 전 확인 3칸 — 칸마다 상자로 구분한다. 이 섹션은 배경이 흰색이라 흰 카드+그림자 대신
   kept 섹션과 같은 톤의 옅은 면으로 나눈다. */
.business_page .faq_grid_3{gap:24px;}
.business_page .faq_grid_3 > div{background:#f7f5f2;border-radius:20px;padding:32px 32px 36px;box-sizing:border-box;}
.business_page .faq_grid_3 dt{font-size:22px;}
@media (max-width:640px){
  .business_page .faq_grid_3 > div{padding:26px 24px 28px;}
}