/* ============================================================ treatment.css — 시술 서브페이지 **차이분만** ⚠ haneul.css 가 이미 시술 CSS 대부분을 갖고 있다(92KB). 그걸 모르고 정본에서 통째로 다시 뽑았다가 두 벌이 됐고, 히어로 배경이 엉뚱한 사진으로 나오는 사고가 났다. 그래서 이 파일에는 **haneul 과 다르거나 haneul 에 없는 규칙만** 둔다. 여기 있는 것 = 2026-08-19 디테일 확정 세션에서 바꾼 것들 (secC 중앙 배열 · secE 목록형 · secF 비율/여백 · 배경 변수화 등) 로드 순서: haneul → … → treatment (맨 뒤) ============================================================ */ .vv .bx-one{width:100%;aspect-ratio:2/1;height:auto;object-fit:cover;border-radius:16px;} /* ⚠ 차이분은 배경 변수 승격뿐이다(2026-08-19 수술). 예전엔 height·min-height· border-radius·position 까지 통째로 들고 있었는데, 그건 haneul 302행의 **옛 값**이라 haneul 뒤쪽의 확정 디자인(절반 높이 · 0 16px 16px 0)과 900px 모바일 오버라이드 (static·auto·0)를 전부 죽였다 — 실측으로 확인함. 같은 속성을 여기 다시 쓰지 말 것. */ .fz-photo{background-color:#222;background-image:var(--fz-bg,url('../img/0101_img_02.jpg'));background-position:center;background-size:cover;background-repeat:no-repeat;} .vv .atabs a,.vv .atabs span{font-size:14px;font-weight:500;padding:15px 22px;color:rgba(255,255,255,0.62);} .vv .atabs a.on,.vv .atabs span.on{color:#fff;font-weight:700;background:rgba(255,255,255,0.16);} .vv .atabs span:not(.on){color:rgba(255,255,255,0.38);cursor:default;} @media (hover:hover) and (pointer:fine){ .vv .atabs a,.vv .atabs span{transition:color .28s ease, background-color .28s ease;} .vv .atabs span:not(.on):hover{color:rgba(255,255,255,0.92);background:rgba(255,255,255,0.06);} } .vv .a1-hero{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;background:#0d0d0d url('../img/0402_header.jpg') center/cover no-repeat;} /* ⚠ 차이분은 배경뿐(이미지는 ::after 의 --a2-bg 로 이동). 나머지 속성은 haneul 679행과 같아서 뺐다 — 여기 다시 쓰면 haneul 1270행 모바일 min-height:55vh 가 죽는다(실제로 당함). */ .vv .a2-hero{background:#0d0d0d;} .vv .a2-en{display:block;font-size:14px;letter-spacing:0.4em;text-transform:uppercase;color:rgba(255,255,255,0.6);font-weight:300;margin-bottom:10.8px;} @media(max-width:768px){ .vv .a2-en{font-size:12px;letter-spacing:0.32em;margin-bottom:8.4px;} } .vv .c4-box{background:#F5F2EC;border-radius:14px;padding:26px 30px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;} /* ⚠ padding 은 뺐다(2026-08-19). 배경을 변수로 승격하면서 **옛 패딩값**(80/8vw/130)까지 함께 들고 왔는데, 정본 확정값은 뒤쪽의 clamp(120px,12vw,195px) 다. 뒤에 오는 이 선언이 그걸 덮어 사진 밴드가 115.2px/172.8px 로 어긋나 있었다(실측). 차이분만 둔다. */ .vv .d2-photo{position:relative;background-color:#222;background-image:var(--d2-bg,url('../img/0401_bg_01.jpg'));background-position:center;background-size:cover;background-repeat:no-repeat;} .vv .d2-card .h-blk + .bd{margin-top:20px;} .vv .a2-hero::after{content:'';position:absolute;inset:-2%;background-color:transparent;background-image:var(--a2-bg,url('../img/0401_header.jpg'));background-position:center;background-size:cover;background-repeat:no-repeat;z-index:0;animation:heroZoom 4.5s cubic-bezier(0.22,0.61,0.36,1) both;} .vv .a2-tabs{position:relative;z-index:2;} .vv .a2-tabs .atabs > *{animation:tabDomino 0.62s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay:calc(0.85s + var(--i,0) * 0.075s);} @keyframes tabDomino{ from{opacity:0;transform:translateY(9px);} to {opacity:1;transform:translateY(0);} } @media(prefers-reduced-motion:reduce){ .vv .a2-hero::after,.vv .a2-body{animation:none;} .vv .a2-tabs .atabs > *{animation:none;opacity:1;transform:none;} } .vv .bx{padding-bottom:clamp(104px,84px + 3.2vw,160px);} .vv .a2-tabs .atabs a.on,.vv .a2-tabs .atabs span.on{background:rgba(255,255,255,0.22);} @media(max-width:768px){ .vv.fz{padding:50px 0 256px;} .vv .a2-tabs .atabs a,.vv .a2-tabs .atabs span{flex:none;white-space:nowrap;font-size:11.2px;letter-spacing:-0.03em;padding:13px 12px;border-bottom:2px solid transparent;} .vv .a2-tabs .atabs a.on,.vv .a2-tabs .atabs span.on{background:transparent;border-bottom-color:#fff;} } #secC .vv .v0sec{padding-top:clamp(108px,84px + 3vw,165px); padding-bottom:clamp(108px,84px + 3vw,165px);} #secE .vv .wrap{max-width:1168px;} #secE .vv .e4b{max-width:1120px;margin-left:auto;margin-right:auto;} #secE .vv .e3-grid, #secE .vv .cx1-cols{max-width:1120px;margin-left:auto;margin-right:auto;} #secE .ec-rail{padding-left:max(24px,calc((100vw - 1120px)/2)); padding-right:max(24px,calc((100vw - 1120px)/2));} #secE .e8-ctl{padding-left:max(24px,calc((100vw - 1120px)/2)); padding-right:max(24px,calc((100vw - 1120px)/2));} #secE .ec-prev{left:max(6px,calc((100% - 1120px)/2 - 46px));} #secE .ec-next{right:max(6px,calc((100% - 1120px)/2 - 46px));} .cx1-head{max-width:760px;margin-left:auto;margin-right:auto;text-align:center;} .cx1-head .bd{margin-top:16px;} .cx1-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:clamp(44px,36px + 1.6vw,72px);} .cx1-c{padding-top:22px;border-top:1px solid #E3DED4;} .cx1-no{display:block;font-size:11px;font-weight:500;letter-spacing:0.14em;color:#A79E8E;} /* ⚠ `.vv` 를 붙여 특이도를 올렸다(2026-08-19). `.cx1-c h3`(0,1,1)는 Breakdance 의 `.breakdance h3{font-size:var(--bde-h3-font-size)}`(0,1,1)와 **동률**이라, 나중에 로드되는 Breakdance 가 이겨 19px → 31.25px 로 튀었다(실측). 값은 정본 그대로다. ※ 같은 함정: "클래스 + h태그" 형태 선택자는 전부 이 위험이 있다. */ .vv .cx1-c h3{margin-top:12px;font-size:19px;font-weight:700;color:#111;} .cx1-c p{margin-top:10px;font-size:15px;font-weight:400;line-height:1.75;color:#3D3D3D;} .cx2-aside .bd{margin-top:16px;} .cx3-head .bd{margin-top:16px;} .cx4-head .bd{margin-top:16px;} @media(max-width:768px){ .cx1-cols{grid-template-columns:1fr;gap:0;} .cx1-c{padding:22px 0;} } .ec-rail{display:grid;grid-auto-flow:column;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;margin:20px 0 0;} .ec-rail::-webkit-scrollbar{display:none;} .ec-rail .e5-card{scroll-snap-align:center;} .e7-rail .e5-card{opacity:1;transition:opacity .3s ease,transform .3s ease;} .e7-rail .e5-card img{height:270px;} @supports (animation-timeline: view(x)){ .e7-rail .e5-card{animation-name:ecFocus; animation-duration:auto; animation-timing-function:linear; animation-fill-mode:both; animation-timeline:view(x); animation-range:entry 0% exit 100%; transition:none;} @keyframes ecFocus{ 0% {opacity:.22;transform:scale(.93);filter:saturate(.6);} 42%,58% {opacity:1; transform:scale(1); filter:none;} 100% {opacity:.22;transform:scale(.93);filter:saturate(.6);} } } .e8-rail .e5-card img{height:280px;} #secE .vv .e3-grid{gap:clamp(14px,10px + 1vw,28px);} #secE .vv .e3-card .rno{display:none;} #secE .vv .e3-card .pad{padding:45px 48px 68px;} #secE .vv .v3 .wrap{max-width:944px;} #secE .vv .e3-grid{max-width:896px;margin-left:auto;margin-right:auto;} #secE .vv .e4b-nav{display:none;} #secE .vv .e4b{display:block;} #secF .fz-grid{column-gap:clamp(40px,3vw,72px);row-gap:clamp(40px,3vw,72px); grid-template-columns:calc(50% - 73px) 1fr;} @media(max-width:900px){ #secF .fz-grid{grid-template-columns:1fr;} } #secF .fz-left .in{padding-top:90px;padding-bottom:100px;padding-left:120px;} #secF .h3-rows .n{font-weight:400;} #secF .i4-list .chip{background:rgba(0,0,0,0.05);} #secF .gbox{background:transparent;border-radius:0;padding:0;} #secF .fz-cta .btn{position:relative;isolation:isolate; background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75); transition:color .45s ease,border-color .45s ease;} #secF .fz-cta .btn::before{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:inherit; background:#fff;opacity:0;transition:opacity .45s ease;} #secF.cta-down .fz-cta .btn:nth-of-type(1), #secF.cta-down .fz-cta .btn:nth-of-type(1)::before{transition-delay:0s;} #secF.cta-down .fz-cta .btn:nth-of-type(2), #secF.cta-down .fz-cta .btn:nth-of-type(2)::before{transition-delay:.18s;} #secF.cta-up .fz-cta .btn:nth-of-type(1), #secF.cta-up .fz-cta .btn:nth-of-type(1)::before{transition-delay:.18s;} #secF.cta-up .fz-cta .btn:nth-of-type(2), #secF.cta-up .fz-cta .btn:nth-of-type(2)::before{transition-delay:0s;} #secF.cta-solid .fz-cta .btn{color:#111;border-color:#fff;} #secF.cta-solid .fz-cta .btn::before{opacity:1;} #secF .fz-cta .btn:hover{border-color:#fff;} #secF.cta-solid .fz-cta .btn:hover::before{opacity:.88;} @media(max-width:900px){ #secF .fz-left .in{padding-left:30px;padding-top:60px;} } #secE .vv .e4b-dev + .e4b-dev{border-top:none;} #secE .vv .e4b-dev{padding:30px 0;} #secE .vv .rno{display:none;} #secE .vv .ec-rail .e5-card .pad{padding:42px 45px 64px;} .ec-stage{position:relative;} .ec-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:44px;height:44px;display:flex;align-items:center;justify-content:center; background:none;border:0;padding:0;cursor:pointer; opacity:.55;transition:opacity .25s ease;} .ec-arw:hover{opacity:1;} .ec-arw:disabled{opacity:.12;cursor:default;} .ec-arw i{display:block;width:13px;height:13px; border-left:1px solid #111;border-bottom:1px solid #111;} .ec-prev{left:max(6px,calc((100% - 1232px)/2 - 46px));} .ec-prev i{transform:rotate(45deg);margin-left:3px;} .ec-next{right:max(6px,calc((100% - 1232px)/2 - 46px));} .ec-next i{transform:rotate(-135deg);margin-right:3px;} #secE .e8-ctl{padding-left:max(24px,calc((100vw - 1232px)/2)); padding-right:max(24px,calc((100vw - 1232px)/2));max-width:none;} @media(max-width:900px){ .ec-arw{width:36px;height:36px;} .ec-arw i{width:11px;height:11px;} } #secE .vv .e3-card img{height:auto;aspect-ratio:528/340;} #secE .vv .e4b-dev{grid-template-columns:minmax(0,528px) minmax(0,528px);gap:64px;} #secE .vv .e4b-dev img{height:auto;aspect-ratio:528/340;} #secE .ec-rail{scroll-snap-type:x mandatory;} #secE .ec-rail .e5-card{scroll-snap-align:center;} #secE .vv .ec-rail .e5-card img{height:auto;aspect-ratio:528/340;} #secE .e8-rail{--cw:min(60vw,532px); grid-auto-columns:var(--cw);gap:28px; padding-left:calc((100% - var(--cw))/2); padding-right:calc((100% - var(--cw))/2);} #secE .e9-rail{--cw:min(30vw,412px);--gp:24px; grid-auto-columns:var(--cw);gap:var(--gp); padding-left:calc((100% - (var(--cw)*3 + var(--gp)*2))/2); padding-right:calc((100% - (var(--cw)*3 + var(--gp)*2))/2); scroll-snap-type:none;} #secE .e9-rail .e5-card{scroll-snap-align:none;opacity:1;transition:none;} #secE .e9-rail .e5-card.dim{opacity:.28;} #secE .e9-ctl{gap:0;display:flex;justify-content:center;align-items:center; margin-top:30px; padding-left:0;padding-right:0;max-width:none;} #secE .e9-line{position:relative;flex:0 0 auto; width:min(120px,14vw);height:2px; display:flex;align-items:center;} #secE .e9-line::before{content:'';position:absolute;left:0;right:0;top:50%; height:1px;transform:translateY(-50%);background:#111;opacity:.14;} #secE .e9-line i{position:absolute;top:0;height:2px;background:#111;opacity:.85; transition:transform .35s ease,width .35s ease;} #secE .ec-arw{width:66px;height:66px;} #secE .ec-arw i{width:20px;height:20px;border-left-width:1px;border-bottom-width:1px;} #secE .ec-prev{left:12px;} #secE .ec-next{right:12px;} @media(max-width:900px){ #secE .vv .e4b-dev{grid-template-columns:1fr;gap:16px;} #secE .e8-rail{--cw:60vw;} #secE .e9-rail{--cw:74vw;--gp:12px; padding-left:calc((100% - var(--cw))/2); padding-right:calc((100% - var(--cw))/2);} #secE .e9-line{width:20vw;} #secE .ec-arw{width:52px;height:52px;} #secE .ec-arw i{width:16px;height:16px;} } /* ============================================================ 모바일 타이포·간격 정리 (2026-08-20 확정 · 시술 9장 공통) 좁은 화면에서 실측·비교해 확정한 값이다. 임시 스위처로 14~18px 를 눌러 보고 **본문 14px** 로 정했다. 데스크톱은 정본과 일치시켜 둔 상태라 건드리지 않는다. 범위를 `body.butler-treatment` 로 가두는 이유 — `.vv .bd` 같은 선택자는 About 계열에도 걸린다. 시술 계열 표식은 functions.php 의 body_class 가 붙이고, 슬러그 목록은 inc/nav.php 단일 소스에서 온다. ⚠ 정적 원본(html 폴더의 시술 페이지들)에는 아직 반영돼 있지 않다 — 그쪽은 body 표식이 없어 스코프 방식이 다르다. 정본을 맞출 때 함께 정리할 것. ============================================================ */ @media (max-width: 768px) { /* ── 본문 계열: 기준 16px → 14px 로 한 단계 축소 ── 행간은 모두 배수(1.6~1.75)로 잡혀 있어 글자 크기만 바꾸면 함께 좁아진다. 라벨·안내문은 12px 를 하한으로 둔다(모바일 가독 하한). */ body.butler-treatment .vv .bd { font-size: 14px; } body.butler-treatment .bd-lg { font-size: 15px; } body.butler-treatment .cx1-c p { font-size: 13px; } body.butler-treatment .fz-photo .bd, body.butler-treatment .fz-left .bd, body.butler-treatment .fz-dark .bd { font-size: 12.5px; } body.butler-treatment #secF .fz-right .bd { font-size: 12px; } body.butler-treatment .vv .tag { font-size: 12px; } /* ── 섹션 제목 통일 ── 도입부 제목이 .h-int(28px)와 .h-blk(24px)로 섞여 있어 위계가 흔들렸다. C·D 를 B·E 와 **같은 계산식**으로 맞춰 폭이 변해도 함께 움직이게 한다. ⚠ 섹션 직속 h2 만 잡는다 — .h-blk 을 통째로 키우면 장비 카드 제목(h3)과 스티키 좌패널 제목까지 커져 계층이 무너진다. */ body.butler-treatment #secC h2.h-blk, body.butler-treatment #secD h2.h-blk { font-size: clamp(28px, 24px + 1.1vw, 42px); } /* ── 차별 포인트 번호(01·02·03) 숨김 ── 세로로 쌓이고 구분선도 있어 순서가 이미 읽힌다. 번호만 숨기면 제목 윗여백이 카드 패딩 위에 얹혀 떠 보이므로 함께 0 으로 정리한다. (데스크톱은 3열이라 번호가 순서 단서가 된다 — 그대로 둔다) */ body.butler-treatment #secC .cx1-no { display: none; } body.butler-treatment #secC .cx1-c h3 { margin-top: 0; } /* ── 특징 밴드 카드: 상하 여백 2배 (36px → 72px) ── 사진 위 카드라 글이 가장자리에 가까우면 답답하다. 좌우는 줄길이에 영향을 주므로 그대로 둔다. */ body.butler-treatment #secD .d2-card { padding-top: 72px; padding-bottom: 72px; } /* ── 장비 섹션: 제목~첫 이미지 간격 절반 (66px → 33px) ── 66px = 목록 윗여백 36px + 첫 카드 윗패딩 30px. ⚠ .e4b-dev 패딩을 줄이면 **장비 카드 사이 간격까지** 좁아진다(위아래 30px 씩이 카드 사이 60px 를 만든다). 첫 카드만 윗패딩을 0 으로 두고 여백으로 33px 를 만든다. ⚠ !important 가 필요한 자리다 — 이 여백은 정본 마크업에 인라인으로 박혀 있고 (`
`) 요소 twig 가 그대로 옮겼다. 인라인 선언은 특이도로 이길 수 없다. 인라인을 CSS 로 승격하면 걷어낼 수 있다. */ body.butler-treatment #secE .vv .e4b { margin-top: 33px !important; } body.butler-treatment #secE .vv .e4b-list > .e4b-dev:first-child { padding-top: 0; } }