/* ═══════════════════════════════════════════════════════════
인테리어 업체 랜딩 · 템플릿 스타일 (v2 — 섹션 구성까지 실측)
출처: vaciodesign.co.kr — getComputedStyle + 뷰포트 캡처 픽셀 (ref/vacio-sec-*.png, ref/vacio-sections.json)
바꿔도 되는 것: --accent 하나. 나머지 수치는 전부 실측값이다.
═══════════════════════════════════════════════════════════ */
:root{
/* ── 컬러 조합 · 기본(흑백). data-theme 으로 갈아끼운다 ── */
--bg:#ffffff; /* 페이지 바탕 */
--band:#f5f5f5; /* 소개 띠 */
--dark:#111111; /* 헤더(채움) · 푸터 · 시공사례 띠 · 버튼 */
--dark-2:#333333; /* 버튼 hover */
--on-dark:#ffffff; /* 어두운 면 위 글자 */
--soft:#eeeeee; /* 사진 자리 */
--ink:#000000; /* 글자 */
--rule:#bcbcbc; /* 얇은 선 */
--foot:var(--dark);
--accent:var(--dark);
--gold:var(--dark);
--ink-2:var(--ink);
--ink-3:var(--ink);
--serif:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif; /* 시스템 기본 고딕. 웹폰트 없음 */
--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",sans-serif;
--wrap:950px; /* 실측 · 라벨 x245 ~ 선 끝 x1196 */
--gap:100px; /* 실측 · 블록 사이 */
}
:root[data-theme="warm"]{ /* 웜 그레이 */
--bg:#faf9f7; --band:#efece7; --dark:#2b2926; --dark-2:#46433e; --soft:#e7e3dc; --ink:#1c1a18; --rule:#cfc9c0;
}
:root[data-theme="navy"]{ /* 네이비 */
--bg:#ffffff; --band:#f1f4f8; --dark:#16233a; --dark-2:#27385a; --soft:#e4e9f0; --ink:#16233a; --rule:#c2cbd8;
}
:root[data-theme="green"]{ /* 딥 그린 */
--bg:#fcfcfa; --band:#edf1ec; --dark:#1d2a22; --dark-2:#33473a; --soft:#e2e8e1; --ink:#1b241e; --rule:#c4cec6;
}
:root[data-theme="brown"]{ /* 브라운 */
--bg:#fdfbf8; --band:#f2ece4; --dark:#2a221b; --dark-2:#463a2e; --soft:#e9e0d4; --ink:#241d17; --rule:#d2c6b6;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
section,footer{scroll-margin-top:72px}
body{margin:0;background:var(--bg);color:var(--ink-3);font-family:var(--serif);font-weight:400;font-size:15px;line-height:1.85;
letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
/* ── 타입 · 실측 ──
라벨 28px w400 ls7px lh53 #111111
문장 24px ExtraLight ls4.2px lh63 #111111 (파일이 ExtraLight라 굵게 안 보인다)
리드 17px w400 ls1.4px lh29.4
불릿 15px Bold ls1.4px lh28 · "· " 접두
버튼 17px · 알약 30 · pad 17/40 · #111111 위 흰 글자 */
.t-label{font-size:28px;font-weight:400;letter-spacing:0;line-height:53px;color:var(--ink-3);white-space:nowrap}
.t-line{font-size:24px;font-weight:200;letter-spacing:4.2px;line-height:63px;color:var(--ink-3)}
.t-lead{font-size:17px;font-weight:400;letter-spacing:1.4px;line-height:29.4px;color:var(--ink-3)}
.t-bul{font-size:15px;font-weight:700;letter-spacing:1.4px;line-height:28px;color:var(--ink-3)}
.t-bul li::before{content:"· "}
.btn{display:inline-block;font:inherit;font-size:17px;font-weight:400;letter-spacing:0;line-height:35px;
background:var(--accent);color:var(--on-dark);border:0;border-radius:30px;padding:17px 40px;cursor:pointer;white-space:nowrap;transition:filter .16s ease}
.btn:hover{background:var(--dark-2)}
.btn::after{content:" >"}
/* ── 내비 · 실측: 높이 125(내비 51 + 여백) · 상호 x15 18px Bold 검정 · 메뉴 x359~ 18px #111111 · 고정 아님 ── */
/* 헤더 · 항상 고정. 메인 위에선 투명·흰 글자, 메인을 벗어나면 색이 채워진다(내려오지 않음). 서브페이지는 처음부터 채워짐 */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:100px;display:flex;align-items:center;padding:0 72px 0 24px;
background:rgba(255,255,255,0);color:#fff;border-bottom:1px solid rgba(255,255,255,.1);
transition:background .35s ease,height .35s ease,border-color .35s ease}
.nav a{transition:color .35s ease}
.nav .nav__brand,.nav .nav__menu a{color:#fff}
.nav.is-in{height:72px;background:var(--dark);border-bottom-color:rgba(255,255,255,.12)}
.nav.is-in .nav__brand,.nav.is-in .nav__menu a{color:var(--on-dark)}
.nav__menu a.is-cur{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:2px}
.page{padding-top:72px;flex:1 0 auto}
.nav__brand{font-size:18px;font-weight:700;letter-spacing:0;color:var(--ink);white-space:nowrap}
.nav__menu{display:flex;gap:30px;margin-left:auto;font-size:17px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
/* ── 히어로 · 16:9 (데스크톱) / 4:5 (모바일). 받는 사진이 4:3이라 2:1은 못 쓴다 · 헤드라인 검정 28px · 베일 없음 ── */
.hero{position:relative;width:100%;height:min(56.25vw, 100vh);overflow:hidden;background:var(--soft) center/cover no-repeat} /* 16:9. 화면이 낮으면 높이만 깎인다 */
.hero__track{position:absolute;inset:0;display:flex;transition:transform 1s cubic-bezier(.65,0,.35,1);will-change:transform}
.hero__slide{position:relative;flex:0 0 auto;height:100%}
.hero__slide img{width:100%;height:100%;object-fit:cover}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){.hero__video{display:none}} /* 움직임을 끈 사람에겐 포스터만 */
.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18);pointer-events:none}
.hero__in{z-index:1}
.hero__in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:0 24px 15%}
.hero__h1{font-size:22px;font-weight:300;line-height:1.6;color:#fff;letter-spacing:var(--h1-ls,1.5em);text-indent:var(--h1-ls,1.5em)}
.hero__sub{margin-top:8px;font-size:13px;letter-spacing:.12em;text-indent:.12em;color:rgba(255,255,255,.85)}
.hero__cta{margin-top:22px}
.hero__cta .btn{font-size:14px;padding:11px 28px;font-weight:400}
.hero__cta .btn{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.hero__cta .btn:hover{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px #fff;filter:none}
.hero__dots{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:14px}
.hero__dots i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.45}
.hero__dots i.is-on{opacity:1;background:#fff}
/* ── 블록 리듬 · 실측: 히어로 끝→라벨 100 · 라벨→내용 50 · 블록 사이 100 · 푸터 앞 141 ── */
.blk{margin-top:var(--gap)}
.blk__head{display:flex;align-items:center;justify-content:center;margin-bottom:50px}
.blk__head--r{justify-content:center}
.blk--band{background:var(--band);padding:64px 0}
.blk--band + .blk{margin-top:var(--gap)}
/* ── 사진 + 글 행 · 실측 ──
콜라주 864×600, 뷰포트 가장자리에 붙음 (x0 또는 x576) · 큰 사진 498×600 · 작은 사진 326×290 두 장 · 간격 20
글 칼럼 547, 가운데 정렬, 반대편 절반의 중앙 · 사진 하나짜리는 720×500 */
.row{display:grid;grid-template-columns:60% 40%;align-items:center}
.row--r{grid-template-columns:40% 60%}
.row__text{padding:0 24px;text-align:center}
.row__text > *{max-width:547px;margin-left:auto;margin-right:auto}
.row__text .btn{margin-top:40px}
.row__text .t-lead + .t-line{margin-top:0}
.row__text .t-line + .t-lead{margin-top:36px}
.row__text .t-line + .t-bul{margin-top:8px}
.row__text .t-bul + .btn{margin-top:42px}
.collage{display:grid;grid-template-columns:498px 326px;grid-template-rows:290px 290px;gap:20px;width:864px;height:600px;padding:0 10px}
.collage--r{justify-self:end}
.collage > *{overflow:hidden;background:var(--soft)}
.collage > :first-child{grid-row:1/3}
.collage img{width:100%;height:100%;object-fit:cover}
.single{width:720px;height:500px;overflow:hidden;background:var(--soft)}
.single--r{justify-self:end}
.single img{width:100%;height:100%;object-fit:cover}
/* ── 시공사례 · 사진 왼쪽 | 설명 오른쪽 · 자동 진행 ── */
.blk--cinema{background:var(--dark);padding:40px 0;margin-top:0}
.gal{max-width:1380px;margin:0 auto;padding:0 24px}
.gal__stage{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:center}
.gal__frame{position:relative;aspect-ratio:16/9;height:min(100%, calc(100vh - 300px));overflow:hidden;background:#000}
.gal__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.gal__slide.is-on{opacity:1}
.gal__slide img{width:100%;height:100%;object-fit:cover}
.gal__side{color:#fff}
.gal__title{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.5;color:#fff}
.gal__sub{margin-top:14px;font-size:15px;line-height:1.85;color:rgba(255,255,255,.7);min-height:3.7em}
.gal__n{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.2);display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.gal__arw{font:inherit;font-size:20px;line-height:1;width:26px;height:26px;display:flex;align-items:center;justify-content:center;
background:none;border:0;color:rgba(255,255,255,.55);cursor:pointer;transition:color .2s ease}
.gal__arw:hover{color:#fff}
.gal__i{min-width:44px;text-align:center}
.gal__list{display:flex;gap:14px;margin:28px 0 0;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.gal__list::-webkit-scrollbar{display:none}
.gal__list button{flex:0 0 124px;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;opacity:.45;transition:opacity .25s ease}
.gal__list button img{width:100%;aspect-ratio:4/3;object-fit:cover;background:rgba(255,255,255,.12);outline:1px solid transparent;outline-offset:-1px}
.gal__list button span{display:block;margin-top:8px;font-size:12.5px;letter-spacing:0;line-height:1.5;color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gal__list button.is-on{opacity:1}
.gal__list button.is-on img{outline-color:rgba(255,255,255,.7)}
.gal__list button:hover{opacity:1}
/* ── 시안 설정 패널 (gallery:'both' 일 때만. 납품 시 제거) ── */
.tools{position:fixed;left:18px;bottom:18px;z-index:40;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.tools__t{font:inherit;font-size:12px;letter-spacing:.08em;padding:9px 14px;border-radius:20px;border:0;cursor:pointer;
background:var(--dark);color:var(--on-dark);box-shadow:0 3px 14px rgba(0,0,0,.2)}
.tools__box{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid rgba(0,0,0,.12);padding:14px;box-shadow:0 6px 24px rgba(0,0,0,.14)}
.tools.is-closed .tools__box{display:none}
.tools__box label{display:flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.04em;color:#111;white-space:nowrap}
.tools__box select{font:inherit;font-size:13px;padding:6px 10px;border:1px solid rgba(0,0,0,.2);background:#fff;color:#111;border-radius:0;cursor:pointer}
@media(max-width:900px){.tools{left:12px;bottom:70px}}
/* ── 시공사례 · 블록형(C안) · 정사각·가로·세로가 섞인 불규칙 배치 ── */
.bk{padding:56px 0 72px;background:var(--bg)}
.bk__in{max-width:1380px;margin:0 auto;padding:0 24px}
.bk__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;grid-auto-flow:dense;gap:10px}
.bk__cell{position:relative;display:block;padding:0;border:0;background:var(--soft);cursor:pointer;overflow:hidden}
.bk__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
/* 6칸 주기: 큰 정사각 → 가로 → 정사각 → 정사각 → 세로 → 정사각 */
.bk__cell:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.bk__cell:nth-child(6n+2){grid-column:span 2}
.bk__cell:nth-child(6n+5){grid-row:span 2}
.bk__cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:18px;text-align:center;color:#fff;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease}
.bk__cap b{font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.bk__cap i{font-style:normal;font-size:12.5px;opacity:.75}
.bk__cell:hover img{transform:scale(1.04)}
.bk__cell:hover .bk__cap,.bk__cell:focus-visible .bk__cap{opacity:1}
@media(max-width:900px){
.bk{padding:32px 0 48px}.bk__in{padding:0 16px}
.bk__grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:6px}
.bk__cell:nth-child(6n+2){grid-column:span 2}
.bk__cap{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72));justify-content:flex-end;padding:12px}
.bk__cap b{font-size:13px}.bk__cap i{font-size:11.5px}
}
/* ── 시공사례 · 격자형 + 모달 ── */
.gr{padding:56px 0 72px;background:var(--bg)}
.gr__in{max-width:1380px;margin:0 auto;padding:0 24px}
.gr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gr__cell{position:relative;display:block;padding:0;border:0;background:var(--soft);cursor:pointer;overflow:hidden;aspect-ratio:4/3}
.gr__cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .3s ease}
.gr__cap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
padding:18px;text-align:center;color:#fff;background:rgba(0,0,0,.55);opacity:0;transition:opacity .28s ease}
.gr__cap b{font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.gr__cap i{font-style:normal;font-size:12.5px;opacity:.75}
.gr__cell:hover img{transform:scale(1.04)}
.gr__cell:hover .gr__cap,.gr__cell:focus-visible .gr__cap{opacity:1}
.md{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:32px}
.md[hidden]{display:none}
.md__box{width:min(1180px,100%);max-height:90vh;display:grid;grid-template-columns:1fr 280px;gap:0;background:var(--dark)}
.md__x{position:absolute;top:14px;right:18px;z-index:2;width:44px;height:44px;border:0;background:none;color:#fff;font-size:30px;cursor:pointer;opacity:.8}
.md__x:hover{opacity:1}
.md__frame{position:relative;aspect-ratio:4/3;max-height:90vh;background:#000;overflow:hidden}
.md__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.md__frame img.is-on{opacity:1}
.md__nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;background:none;color:#fff;font-size:38px;font-weight:200;cursor:pointer;opacity:.65;z-index:1}
.md__nav:hover{opacity:1}
.md__nav--prev{left:4px}.md__nav--next{right:4px}
.md__info{padding:32px 28px;color:var(--on-dark);display:flex;flex-direction:column;min-width:0}
.md__t{font-size:19px;font-weight:700;line-height:1.5}
.md__cap{margin-top:12px;font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.72);min-height:3.6em}
.md__n{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.5)}
.md__thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px;overflow-y:auto}
.md__thumbs button{width:56px;height:42px;padding:0;border:0;background:rgba(255,255,255,.12);cursor:pointer;opacity:.45;transition:opacity .2s ease;outline:1px solid transparent;outline-offset:-1px}
.md__thumbs button img{width:100%;height:100%;object-fit:cover}
.md__thumbs button.is-on{opacity:1;outline-color:rgba(255,255,255,.8)}
.md__thumbs button:hover{opacity:1}
@media(max-width:900px){
.gr{padding:32px 0 48px}.gr__in{padding:0 16px}.gr__grid{grid-template-columns:1fr 1fr;gap:6px}
.gr__cap{opacity:1;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.72));justify-content:flex-end;padding:12px}
.gr__cap b{font-size:13px}.gr__cap i{font-size:11.5px}
.md{padding:0}.md__box{grid-template-columns:1fr;max-height:100vh;height:100%;align-content:start}
.md__frame{aspect-ratio:1/1;max-height:60vh}
.md__info{padding:18px 16px 24px}.md__cap{min-height:0}
.md__nav{width:40px;font-size:32px}
}
/* ── 소개 · inapiece 구조 실측: 가운데 한 칼럼 · 라벨 16 + 상호 26 · 사진 600×400 · 본문 14~15 ── */
.ab{padding:96px 0 104px;background:var(--band)}
.ab__in{max-width:760px;margin:0 auto;padding:0 24px;text-align:center}
.ab__eyebrow{font-size:26px;font-weight:400;letter-spacing:-.01em;color:var(--ink);line-height:1.3}
.ab__eyebrow span{font-size:16px;margin-right:10px;opacity:.6}
.ab__pic{width:min(600px,100%);margin:40px auto 0;aspect-ratio:3/2;overflow:hidden;background:var(--soft)}
.ab__pic img{width:100%;height:100%;object-fit:cover}
.ab__text{margin-top:40px}
.ab__text p{font-size:15px;line-height:1.85;color:var(--ink);letter-spacing:-.01em}
.ab__text p + p{margin-top:22px}
.ab__lead{font-weight:700}
.ab__contact{margin-top:64px;padding-top:40px;border-top:1px solid rgba(0,0,0,.12)}
.ab__tel{display:block;font-size:28px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.ab__info{margin:24px 0 0;display:inline-block;text-align:left}
.ab__info div{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:7px 0;font-size:14.5px;line-height:1.7}
.ab__info dt{color:var(--ink);opacity:.5}
.ab__info dd{margin:0;color:var(--ink)}
.ab__info a{border-bottom:1px solid rgba(0,0,0,.4)}
.ab__contact .btn{margin-top:32px}
@media(max-width:900px){
.ab{padding:64px 0 72px}.ab__in{padding:0 20px}
.ab__eyebrow{font-size:21px}.ab__eyebrow span{font-size:14px}
.ab__pic{margin-top:28px}.ab__text{margin-top:28px}.ab__text p{font-size:14.5px}
.ab__contact{margin-top:44px;padding-top:32px}.ab__tel{font-size:24px}
.ab__info div{grid-template-columns:66px 1fr;gap:10px;font-size:14px}
}
/* ── 연락 수단 3개 (문의 페이지 상단) ── */
.ways{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.way{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:8px;font:inherit;font-size:14.5px;font-weight:700;
border:0;cursor:pointer;text-align:left;transition:filter .18s ease,transform .12s ease}
.way:hover{background:var(--dark-2)} .way:active{transform:scale(.985)}
.way::before{content:"";width:18px;height:18px;flex:0 0 18px;background:currentColor;
-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.way--kakao{background:var(--dark);color:var(--on-dark)}
.way--kakao::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.way--insta{background:var(--dark);color:var(--on-dark)}
.way--insta::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.way--tel{background:var(--dark);color:var(--on-dark)}
.way--tel::before{-webkit-mask-image:url("data:image/svg+xml;utf8,");mask-image:url("data:image/svg+xml;utf8,")}
.way.is-copied{background:var(--dark-2)}
/* ── 팝업 · 이미지 + 오늘 하루 보지 않기 + 닫기 ── */
.pop{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.pop[hidden]{display:none}
.pop__row{display:flex;gap:16px;align-items:flex-start;max-width:100%;overflow-x:auto;padding:4px;scrollbar-width:none}
.pop__row::-webkit-scrollbar{display:none}
.pop__box{flex:0 0 min(340px,80vw);display:flex;flex-direction:column;background:var(--bg)}
.pop__box[hidden]{display:none}
/* 세로형 3:4 */
.pop__img{display:block;aspect-ratio:3/4;max-height:calc(85vh - 48px);overflow:hidden;background:var(--soft)}
.pop__img img{width:100%;height:100%;object-fit:cover;display:block}
.pop__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;font-size:12.5px;background:var(--dark);color:var(--on-dark)}
.pop__foot label{display:flex;align-items:center;gap:7px;cursor:pointer}
.pop__foot button{font:inherit;font-size:13px;font-weight:700;background:none;border:0;cursor:pointer;color:#fff}
/* ── 우측 하단 동그란 버튼 · 누르면 연락 방법 3개가 펼쳐진다 ── */
.fab{position:fixed;right:20px;bottom:84px;z-index:28;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.fab__list{display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.fab__b{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:21px;border:0;cursor:pointer;
font:inherit;font-size:13.5px;font-weight:700;white-space:nowrap;box-shadow:0 3px 14px rgba(0,0,0,.18);
opacity:0;transform:translateY(10px) scale(.94);transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1)}
.fab.is-open .fab__list{pointer-events:auto}
.fab.is-open .fab__b{opacity:1;transform:none}
.fab.is-open .fab__b:nth-child(1){transition-delay:.02s}
.fab.is-open .fab__b:nth-child(2){transition-delay:.07s}
.fab.is-open .fab__b:nth-child(3){transition-delay:.12s}
.fab__b--kakao{background:var(--dark);color:var(--on-dark)}
.fab__b--insta{background:var(--dark);color:var(--on-dark)}
.fab__b--tel{background:var(--dark);color:var(--on-dark)}
.fab__t{width:54px;height:54px;border-radius:50%;border:0;cursor:pointer;background:var(--dark);color:var(--on-dark);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 16px rgba(0,0,0,.22);transition:transform .25s ease}
.fab__t i{width:18px;height:2px;background:var(--on-dark);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.fab.is-open .fab__t{transform:rotate(90deg)}
.fab.is-open .fab__t i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.fab.is-open .fab__t i:nth-child(2){opacity:0}
.fab.is-open .fab__t i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:900px){.fab{right:14px;bottom:70px}.fab__t{width:48px;height:48px}}
/* ── 리뷰 ── */
.rv{padding:88px 0 96px;background:var(--bg)}
.rv__in{max-width:1180px;margin:0 auto;padding:0 24px}
.rv__head{text-align:center;margin-bottom:44px}
.rv__head h2{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.rv__head p{margin-top:10px;font-size:13.5px;color:var(--ink);opacity:.6}
.rv__head a{border-bottom:1px solid var(--rule)}
.rv__list{columns:3;column-gap:20px}
.rv__c{break-inside:avoid;margin:0 0 20px;padding:22px;background:var(--band);display:inline-block;width:100%}
.rv__pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:6px;margin-bottom:14px}
.rv__pics img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--soft);display:block}
.rv__pics a{position:relative;display:block}
.rv__pics a.is-video::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);width:0;height:0;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.rv__star{font-size:14px;letter-spacing:.12em;color:var(--ink)}
.rv__star span{opacity:.22}
.rv__body{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--ink)}
.rv__meta{margin-top:14px;font-size:12.5px;color:var(--ink);opacity:.5}
@media(max-width:1000px){.rv__list{columns:2}}
@media(max-width:700px){.rv{padding:56px 0 64px}.rv__in{padding:0 16px}.rv__list{columns:1}.rv__head h2{font-size:21px}}
/* ── 자주 묻는 질문 ── */
.fq{padding:88px 0 96px;background:var(--bg)}
.fq__in{max-width:820px;margin:0 auto;padding:0 24px}
.fq__in h2{font-size:26px;font-weight:700;letter-spacing:-.02em;text-align:center;margin-bottom:40px;color:var(--ink)}
.fq__list details{border-top:1px solid var(--rule)}
.fq__list details:last-child{border-bottom:1px solid var(--rule)}
.fq__list summary{cursor:pointer;list-style:none;padding:20px 0;font-size:16px;font-weight:700;color:var(--ink);display:flex;justify-content:space-between;gap:18px}
.fq__list summary::-webkit-details-marker{display:none}
.fq__list summary::after{content:"+";font-weight:400;opacity:.45}
.fq__list details[open] summary::after{content:"–"}
.fq__a{padding:0 0 22px;font-size:15px;line-height:1.85;color:var(--ink);opacity:.8}
@media(max-width:700px){.fq{padding:56px 0 64px}.fq__in{padding:0 16px}.fq__in h2{font-size:21px;margin-bottom:26px}.fq__list summary{font-size:15px}}
/* ── 인스타그램 ── */
.ig{padding:88px 0 96px;background:var(--bg)}
.ig__in{max-width:1180px;margin:0 auto;padding:0 24px}
.ig__head{text-align:center;margin-bottom:40px}
.ig__head h2{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ig__go{display:inline-block;margin-top:12px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--rule)}
.ig__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ig__t{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.ig__t img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ig__t:hover img{transform:scale(1.05)}
.ig__t::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;transition:opacity .4s;z-index:1}
.ig__t:hover::before{opacity:.12}
.ig__t.is-reel::after{content:"";position:absolute;top:12px;right:12px;z-index:2;width:0;height:0;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.ig__grid--embed{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;justify-items:center}
.ig__grid--embed .instagram-media{margin:0!important;min-width:0!important;max-width:100%!important}
@media(max-width:700px){.ig{padding:56px 0 64px}.ig__in{padding:0 16px}.ig__head h2{font-size:21px}}
/* ── 문의 · katehomestyling 구조: 왼쪽 제목·안내 | 오른쪽 폼 ── */
.cf{padding:96px 0 104px;background:var(--bg)}
.cf__in{max-width:1080px;margin:0 auto;padding:0 32px;display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start}
.cf__side h2{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cf__intro{margin-top:18px;font-size:14.5px;line-height:1.85;color:var(--ink);opacity:.7}
.cf__info{margin-top:32px}
.cf__info div{padding:10px 0;border-top:1px solid rgba(0,0,0,.1);font-size:14px;line-height:1.7}
.cf__info dt{font-size:12.5px;opacity:.5;margin-bottom:2px}
.cf__info dd{margin:0}
.cf__form{display:flex;flex-direction:column;gap:22px}
.fld{display:flex;flex-direction:column;gap:7px;border:0;padding:0;margin:0;min-width:0}
.fld > label,.fld legend{font-size:13.5px;font-weight:700;color:var(--ink);padding:0}
.fld b{color:var(--dark)}
.fld input,.fld select,.fld textarea{font:inherit;font-size:15px;width:100%;padding:11px 13px;background:var(--bg);
border:1px solid rgba(0,0,0,.14);border-radius:0;color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:0;border-color:var(--ink)}
.fld textarea{resize:vertical;line-height:1.7}
.fld input + input{margin-top:6px}
.fld .row{display:flex;align-items:center;gap:10px}
.fld .row input{max-width:140px}
.unit{font-size:13.5px;opacity:.6;white-space:nowrap}
.chk{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 16px;margin-top:2px}
.chk label{display:flex;align-items:center;gap:8px;font-size:14.5px;cursor:pointer}
.chk input{width:16px;height:16px;padding:0;accent-color:var(--dark)}
.agree{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:var(--ink);opacity:.8}
.agree input{margin-top:2px;width:16px;height:16px;accent-color:var(--dark)}
.agree b{color:var(--dark)}
.cf__form .btn{align-self:flex-start;margin-top:6px}
.cf__done{font-size:15.5px;line-height:1.7;padding:18px 0}
@media(max-width:900px){
.cf{padding:56px 0 72px}
.cf__in{grid-template-columns:1fr;gap:36px;padding:0 20px}
.cf__side h2{font-size:23px}
.chk{grid-template-columns:1fr 1fr}
.cf__form .btn{align-self:stretch;text-align:center}
}
/* ── 푸터 · 검정. 위 3~4열(연락처·영업시간·바로가기), 아래 사업자 정보 작게 ── */
/* 헤더(72)와 만나 화면을 꽉 채운다 */
.footer{margin-top:auto;background:var(--dark);color:var(--on-dark);padding:80px 0 40px;min-height:calc(100vh - 72px);display:flex;flex-direction:column}
.footer__in{max-width:1280px;width:100%;margin:0 auto;padding:0 40px;flex:1;display:flex;flex-direction:column;justify-content:center}
.footer__cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:64px}
.footer__logo{font-size:26px;font-weight:700;letter-spacing:-.01em;color:#fff}
.footer__tag{margin-top:10px;font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.5)}
.footer__col h3{font-size:15px;font-weight:700;color:#fff;margin-bottom:22px}
.footer__col ul{display:flex;flex-direction:column;gap:12px}
.footer__col li{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.7)}
.footer__col a{color:rgba(255,255,255,.7);transition:color .2s ease}
.footer__col a:hover{color:#fff}
.footer__legal{margin-top:auto;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.footer__legal p{font-size:12.5px;line-height:1.9;color:rgba(255,255,255,.4)}
.footer__legal a{color:rgba(255,255,255,.55)}
.footer__legal a:hover{color:#fff}
.footer__note{margin-top:8px;color:rgba(255,255,255,.28)!important}
@media(max-width:900px){
.footer{padding:48px 0 28px;min-height:calc(100vh - 56px)}.footer__in{padding:0 20px}
.footer__cols{grid-template-columns:1fr 1fr;gap:32px 24px}
.footer__brand{grid-column:1/3}.footer__logo{font-size:21px}
.footer__col h3{margin-bottom:14px;font-size:14px}.footer__col ul{gap:9px}.footer__col li{font-size:13.5px}
.footer__cols{margin-bottom:40px}
}
/* ── 스크롤 등장 · 한 번만 ──
zoom : 시공사례 — 작게(0.86) 시작해서 커지며 나타남
left : 소개·문의 — 왼쪽 80px 밖에서 들어옴
기본 : 아래에서 올라옴 */
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
[data-reveal="zoom"]{transform:scale(.86)}
[data-reveal="left"]{transform:translateX(-64px)}
[data-reveal="right"]{transform:translateX(64px)}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}
/* ── 위로 · 실측: 우하단 원형 흰 ── */
.top{position:fixed;right:24px;bottom:20px;z-index:25;width:50px;height:50px;border-radius:50%;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.12);
display:flex;align-items:center;justify-content:center;color:var(--ink-2);font-family:var(--sans);font-size:18px}
/* ── 모바일 · 레퍼런스는 슬라이드가 1600×1600 정사각 ── */
.dock{display:none}
@media(max-width:900px){
:root{--gap:72px;--wrap:100%}
.nav{height:64px;padding:0 16px}.nav.is-in{height:56px}.page{padding-top:56px}.nav__menu{display:none}.nav__brand{font-size:15px}
.hero{height:125vw} /* 4:5 */
.hero__in{padding:0 20px 18%}.hero__h1{font-size:17px;letter-spacing:.12em!important;text-indent:.12em!important;line-height:1.7}.hero__sub{font-size:12px}
.t-label{font-size:22px;letter-spacing:5px;line-height:40px}.t-line{font-size:19px;letter-spacing:2.5px;line-height:44px}
.blk__head{gap:20px;margin-bottom:28px;padding:0 16px}
.row,.row--r{grid-template-columns:1fr;gap:36px}
.row--r .row__text{order:2}
.collage{width:100%;height:auto;padding:0;grid-template-columns:1fr 1fr;grid-template-rows:auto;}
.collage > :first-child{grid-column:1/3;grid-row:auto;aspect-ratio:4/3}
.collage > :not(:first-child){aspect-ratio:1/1}
.single{width:100%;height:auto;aspect-ratio:4/3}
.blk--cinema{padding:32px 0}.gal{padding:0}
.gal__stage{grid-template-columns:1fr;gap:18px}.gal__frame{height:auto}
.gal__side{padding:0 16px}.gal__title{font-size:17px}.gal__sub{margin-top:8px;font-size:14px;min-height:0}.gal__n{margin-top:14px;padding-top:12px}
.gal__list{margin:18px 16px 0;gap:12px}.gal__list button{flex-basis:120px}
.footer{padding:24px 0}
.footer__in{padding:0 16px}
.footer__line span{display:block;margin-right:0}
.dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(0,0,0,.08);padding-bottom:env(safe-area-inset-bottom)}
.dock a{display:flex;align-items:center;justify-content:center;height:56px;font-size:15px;letter-spacing:.04em}
.dock a:first-child{background:#fff;color:var(--ink-2)}
.dock a:last-child{background:var(--accent);color:#fff}
body{padding-bottom:56px}.top{bottom:70px}
}