/* 비비드아트 모바일 전용 (768px 미만). PC 화면에는 적용되지 않습니다. */ .vd-m{display:none} @media (max-width:767.98px){ .vd-pc{display:none!important} .vd-m{display:inline} /* ── 공통: 섹션 여백·제목 ── */ #app section[data-screen-label]:not([data-screen-label="01 Hero"]):not([data-screen-label*="Reservation"]):not([data-screen-label*="Final CTA"]){padding-top:56px!important;padding-bottom:56px!important} #app section[data-screen-label*="Trust"],#app section[data-screen-label*="Selected Work"]{padding-top:0!important} #app section[data-screen-label]>div:first-child:has(>span>span:first-child){margin-bottom:22px!important} #app section[data-screen-label] h2{font-size:clamp(24px,7vw,28px)!important;line-height:1.36!important} #app section[data-screen-label] p{font-size:15px;line-height:1.75} /* 옆으로 넘기는 카드 공통 */ .vd-swipe{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-20px!important;margin-right:-20px!important;padding:0 20px 4px!important;scroll-padding-left:20px} .vd-swipe::-webkit-scrollbar{display:none} .vd-swipe>*{flex:0 0 74%!important;width:74%!important;max-width:none!important;min-width:0!important;margin:0!important;scroll-snap-align:start} /* ── 01 첫 화면: 로고 조금 크게 ── */ #app section[data-screen-label="01 Hero"] img{height:112px!important} #app section[data-screen-label="01 Hero"] h1{font-size:clamp(26px,7.6vw,30px)!important} /* ── 03 고민 목록: 번호 칸 좁게 ── */ #app section[data-screen-label*="Concern"] [style*="grid-template-columns"]{grid-template-columns:44px 1fr!important;padding:16px 0!important} #app section[data-screen-label*="Concern"] [style*="grid-template-columns"]>span:first-child{font-size:20px!important} #app section[data-screen-label*="Concern"] [style*="grid-template-columns"]>span:last-child{font-size:15.5px!important} #app section[data-screen-label*="Concern"] div:has(>[style*="aspect-ratio"]){margin-top:32px!important} /* ── 06 프로그램 3가지: 옆으로 넘기는 카드 ── */ #app section[data-screen-label*="Program"] div:has(>article){display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px!important;padding:0 20px 4px!important;scroll-padding-left:20px} #app section[data-screen-label*="Program"] div:has(>article)::-webkit-scrollbar{display:none} #app section[data-screen-label*="Program"] div:has(>article)>article{flex:0 0 76%!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:14px!important;scroll-snap-align:start} #app section[data-screen-label*="Program"] article>a{flex:none!important;width:100%} #app section[data-screen-label*="Program"] article>div{position:static!important;flex:none!important;gap:10px!important} #app section[data-screen-label*="Program"] article>div>span:first-child{font-size:30px!important;line-height:1!important} #app section[data-screen-label*="Program"] article h3{font-size:18px!important;line-height:1.45!important} #app section[data-screen-label*="Program"] article p{font-size:14px!important;line-height:1.7!important} #app section[data-screen-label*="Program"] div:has(>article){gap:12px!important} /* ── 07 디자인 방법 그림: 칸을 키워 글자가 겹치지 않게 ── */ #app section[data-screen-label*="Method"] div:has(>svg){aspect-ratio:1000/860!important} #app section[data-screen-label*="Method"] div:has(>svg)>div>span{font-size:11.5px!important} /* ── 10 선택하는 이유 4가지 / 12 신뢰 4가지: 2x2 ── */ #app section[data-screen-label*="Why Vivid"] [style*="grid-template-columns"], #app section[data-screen-label*="Trust"] [style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} #app section[data-screen-label*="Why Vivid"] [style*="grid-template-columns"]>div{padding:18px 14px!important;gap:8px!important} #app section[data-screen-label*="Why Vivid"] [style*="grid-template-columns"]>div>span:first-child{font-size:26px!important} #app section[data-screen-label*="Why Vivid"] [style*="grid-template-columns"]>div>span:nth-child(3){font-size:15.5px!important;line-height:1.4} #app section[data-screen-label*="Why Vivid"] [style*="grid-template-columns"]>div>span:last-child{font-size:13px!important;line-height:1.65!important} #app section[data-screen-label*="Trust"] [style*="grid-template-columns"]>div{padding:16px 12px!important} #app section[data-screen-label*="Trust"] [style*="grid-template-columns"]>div>span:first-child{font-size:20px!important} /* ── 11 대표원장: 사진 틀 크기만 줄임(모양 그대로) ── */ #app section[data-screen-label*="Director"] div:has(>div>[style*="border-radius: 50%"]), #app section[data-screen-label*="Director"] div:has(>div>[style*="border-radius:50%"]){max-width:270px!important;margin:0 auto} #app section[data-screen-label*="Director"] blockquote{font-size:21px!important} /* ── 13 후기 카드: 글자 조금 작게 ── */ #app section[data-screen-label*="Voices"] article{flex-basis:74%!important} #app section[data-screen-label*="Voices"] article p,#app section[data-screen-label*="Voices"] article span{font-size:13.5px;line-height:1.7} /* ── 14 공간: 옆으로 넘기기 ── */ #app section[data-screen-label*="Space"] div:has(>figure){display:flex!important;flex-wrap:nowrap!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -20px!important;padding:0 20px 4px!important} #app section[data-screen-label*="Space"] div:has(>figure)>figure{flex:0 0 74%!important;scroll-snap-align:start} /* ── 16 저널: 기기 테두리 걷어내기 ── */ #app section[data-screen-label*="Journal"] div:has(>div>[style*="border-radius:clamp(16px"]){padding:0!important;background:none!important;box-shadow:none!important;border:0!important} #app section[data-screen-label*="Journal"] div:has(>div>[style*="border-radius:clamp(16px"])>div:first-child:not(:last-child){display:none!important} /* ── 18 오시는 길 ── */ #app section[data-screen-label*="Location"] dl>div{padding:14px 0!important} /* ── 푸터: 메뉴·연락처 2열 ── */ #app footer [style*="grid-template-columns"]:has(>nav){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:28px 16px!important} #app footer [style*="grid-template-columns"]:has(>nav)>*:nth-child(n+3){grid-column:1 / -1} #app footer [style*="grid-template-columns"]:has(>nav) a[href^="tel:"]{font-size:18px!important;white-space:nowrap} #app footer>div:last-child{padding-top:48px!important} /* ── 15 이번 달 예약: 화면 한 장보다 짧게 ── */ #app section[data-screen-label*="Reservation"]{min-height:0!important;height:auto!important;padding:110px 20px!important} #app section[data-screen-label*="Reservation"] h2{font-size:40px!important;line-height:1.1!important} /* ── 하위 페이지 첫 화면: 화면 한 장보다 짧게 ── */ #app section[data-screen-label^="01 "][data-screen-label$="Hero"]:not([data-screen-label="01 Hero"]){min-height:600px!important;height:auto!important} #app section[data-screen-label^="01 "][data-screen-label$="Hero"]:not([data-screen-label="01 Hero"])>div{min-height:600px!important} }