/* SH성형외과 한국어 홈페이지 — 피그마 «SH성형외과 2» (PC 1920 · 모바일 360) 그대로.
수치는 피그마 내보내기(export/b*.html)에서 옮겼다. PC 는 1200px 이상, 모바일은 768px 미만이 시안 그대로이고
그 사이는 같은 틀이 폭에 맞춰 줄어든다. 영어 제목은 Montserrat/Open Sans, 한글은 Wanted Sans(시안 글꼴). */
@font-face{font-family:"Wanted Sans";src:url("../fonts/WantedSans-Variable.woff2") format("woff2");font-weight:400 1000;font-display:swap}
@font-face{font-family:"Montserrat";src:url("../fonts/Montserrat-Variable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Variable.woff2") format("woff2");font-weight:300 800;font-display:swap}
:root{
--ink:#222;--ink7:rgba(34,34,34,.7);--ink3:rgba(34,34,34,.3);
--pink:#ffd8eb;--yellow:#ffffb5;--btn:#feffb5;--gray:#f3f4f9;--muted:#7d7286;
--ko:"Wanted Sans","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
--en:"Montserrat","Wanted Sans",sans-serif;
--os:"Open Sans","Wanted Sans",sans-serif;
--wrap:1440px;--gut:40px;--pad:140px;--hd:100px;--hdt:14px;--bar:85px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.5 var(--ko);letter-spacing:-.025em;
-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-wrap:break-word}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;letter-spacing:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:min(var(--wrap),calc(100% - var(--gut)*2));margin:0 auto}
.pc{display:block}.mo{display:none}
/* PC 시안 줄바꿈 — 모바일에선 풀어서 자연스럽게 흐르게 */
br.mbr{display:none}
@media (max-width:767px){br.pbr{display:none}br.mbr{display:inline}}
.cover{width:100%;height:100%;object-fit:cover}
/* 피그마 크롭 그대로(build.py crop()) — 변수가 없으면 cover */
.ph{position:absolute;left:var(--l,0);top:var(--t,0);width:var(--w,100%);height:var(--h,100%);max-width:none;object-fit:cover}
/* ── 공통 조각 ─────────────────────────────────────────── */
.sec{padding:var(--pad) 0}
.sec-t{font:700 40px/1.5 var(--en);color:var(--ink)}
.sec-d{margin-top:8px;font-size:18px;line-height:1.5;color:var(--ink7)}
.num{display:inline-block;min-width:33px;height:31px;padding:0 10px;border-radius:8px;background:var(--ink);
color:#fff;font:700 14px/31px var(--os);text-align:center}
.chip{display:inline-block;padding:5px 16px;border-radius:8px;background:var(--ink);color:#fff;font:600 18px/1.5 var(--ko)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ctrl{display:flex;align-items:center;gap:20px;flex:none}
.arrows{display:flex;gap:12px}
.arrows button{width:16px;height:23px;display:grid;place-items:center;color:inherit}
.arrows button:disabled{cursor:default}
.arrows svg{width:8px;height:16px}
.more{display:inline-flex;align-items:center;gap:4px;font:600 15px/1.5 var(--en);color:inherit;white-space:nowrap}
.more svg{width:16px;height:16px}
.tabs{display:flex;flex-wrap:wrap}
.tab{height:35px;padding:0 16px;border-radius:8px;font:400 14px/35px var(--ko);color:var(--ink7);white-space:nowrap;transition:background .2s,color .2s}
.tab[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:600}
.scroller{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.scroller::-webkit-scrollbar{display:none}
.scroller>*{scroll-snap-align:start;flex:none}
/* ── 머리말 ───────────────────────────────────────────── */
.hd{position:fixed;top:var(--hdt);left:20px;right:20px;z-index:60;height:calc(var(--hd) - var(--hdt));padding:0 60px;display:flex;align-items:center;justify-content:space-between;
border-radius:20px;background:#3b2749}
.logo{display:block;width:200px;height:50px;background:var(--ink);
-webkit-mask:url("../img/logo.png") center/contain no-repeat;mask:url("../img/logo.png") center/contain no-repeat}
.hd .logo{background:#fff}
.hd-r{display:flex;align-items:center;gap:40px}
/* 대메뉴(운영 중인 /ko/ 와 같은 항목·하위 메뉴) */
.gnb{--gp:clamp(12px,.94vw,18px);flex:1;min-width:0;align-self:stretch;display:flex;justify-content:center}
.gnb>ul{display:flex;height:100%}
.gnb>ul>li{position:relative;display:flex;align-items:center}
.gnb>ul>li>a{display:flex;align-items:center;height:100%;padding:0 var(--gp);font:400 clamp(17px,1.04vw,20px)/1 var(--ko);letter-spacing:-.3px;color:#e0d6d9;white-space:nowrap;transition:opacity .2s}
.gnb>ul>li>a::after{content:"";position:absolute;left:50%;bottom:calc(50% - 15px);width:0;height:1px;background:#d4842b;transform:translateX(-50%);transition:width .25s}
.gnb>ul>li:hover>a,.gnb>ul>li:focus-within>a{opacity:.7}
.gnb>ul>li:hover>a::after,.gnb>ul>li:focus-within>a::after{width:calc(100% - var(--gp) * 2)}
.gnb-sub{position:absolute;left:50%;top:100%;min-width:200px;padding:14px 8px;border-radius:20px;background:#ead3ef;
box-shadow:0 14px 40px rgba(0,0,0,.12);transform:translate(-50%,8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.gnb>ul>li:hover .gnb-sub,.gnb>ul>li:focus-within .gnb-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.gnb-sub a{display:block;padding:6px 16px;border-radius:7px;font:400 17px/25px var(--ko);letter-spacing:-.5px;color:#3b2749;white-space:nowrap;transition:background .2s,color .2s}
.gnb-sub a:hover{background:rgba(255,255,255,.6)}
.hd-mem{display:flex;align-items:center;font:300 14px/1 var(--ko);color:rgba(201,197,188,.67)}
.hd-mem a+a::before{content:"";display:inline-block;width:1px;height:13px;margin:0 12px;background:rgba(201,197,188,.34);vertical-align:middle}
.hd-mem a:hover{color:#e0d6d9}
.burger{position:relative;width:24px;height:24px}
.burger i{position:absolute;right:0;height:2px;background:#e0d6d9;transition:transform .3s,opacity .3s,width .3s}
.burger i:nth-child(1){top:4px;width:24px}.burger i:nth-child(2){top:11px;width:24px}.burger i:nth-child(3){top:18px;width:11px}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 10px;border-radius:22px;background:rgba(255,255,255,.12);color:#e0d6d9;font-size:14px;white-space:nowrap}
.lang-btn svg{width:12px;height:12px;transition:transform .2s}
.lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.lang-cur{display:flex;align-items:center;gap:6px}
.lang img,.nav-lang img{width:20px;height:20px;border-radius:50%;flex:none}
.lang-list{position:absolute;right:0;top:calc(100% + 8px);min-width:170px;padding:8px;border-radius:12px;background:#fff;
box-shadow:0 10px 30px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s}
.lang-list.open{opacity:1;visibility:visible;transform:none}
.lang-list a{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:15px;white-space:nowrap}
.lang-list a:hover,.lang-list a[aria-current]{background:var(--gray)}
/* 머리말은 지금 운영 중인 /ko/ 처럼 위·옆을 띄운 보라 둥근 막대(2026-10-20 병원 요청) — 메인·서브 모두 첫 화면 위에 얹는다 */
/* 전체 메뉴 */
.nav{position:fixed;inset:0;z-index:70;background:#fff;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.nav.open{opacity:1;visibility:visible}
.nav-top{position:sticky;top:0;height:var(--hd);padding:0 50px;display:flex;align-items:center;justify-content:space-between;background:#fff;z-index:1}
.nav-x{position:relative;width:24px;height:24px}
.nav-x::before,.nav-x::after{content:"";position:absolute;left:0;top:11px;width:24px;height:2px;background:var(--ink);transform:rotate(45deg)}
.nav-x::after{transform:rotate(-45deg)}
.nav-body{padding:60px 0 120px}
.nav-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:56px 40px}
.nav-g h2{font:700 22px/1.5 var(--ko);padding-bottom:14px;border-bottom:2px solid var(--ink)}
.nav-g h2 a:hover{opacity:.7}
.nav-g ul{margin-top:14px;display:grid;gap:8px}
.nav-g li a{font-size:16px;color:var(--ink7);transition:color .2s}
.nav-g li a:hover{color:var(--ink)}
.nav-mem{display:flex;gap:12px;margin-top:64px}
.nav-mem a{display:inline-flex;align-items:center;height:45px;padding:0 24px;border-radius:10px;background:var(--gray);font-weight:600}
.nav-mem a.on{background:var(--ink);color:#fff}
.nav-lang{display:none}
/* ── 메인 첫 화면(카드 3장 슬라이드) ───────────────────── */
.hero{padding:0 50px 60px;overflow:hidden}
.hero-vp{overflow:hidden}
.hero-track{display:flex;gap:40px;will-change:transform}
.hero-card{position:relative;flex:0 0 calc((100% - 80px)/3);aspect-ratio:1;border-radius:30px;overflow:hidden;background:#eee;container-type:inline-size}
/* 시안 580px 카드 기준 비율 그대로(카드가 줄면 글자·여백도 같이) */
.hero-cap{position:absolute;left:6.9cqw;right:6.9cqw;bottom:6.9cqw}
.hero-cap .chip{font-size:max(13px,3.1cqw);padding:.28em .89em}
.hero-tit{margin-top:2.76cqw;font:600 7.59cqw/1.3 var(--en);color:var(--ink)}
.hero-bar{position:relative;width:320px;height:4px;margin:40px auto 0;border-radius:2px;background:rgba(34,34,34,.2)}
.hero-bar i{position:absolute;left:0;top:0;width:80px;height:4px;border-radius:2px;background:var(--ink);transition:left .6s}
/* ── OUR SIGNATURE ──────────────────────────────────── */
.sign{background:var(--pink)}
.sign-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:50px}
.sign-img{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#e3e3e3}
.sign-img img{transition:transform .5s}
.sign-card:hover .sign-img img{transform:scale(1.04)}
.sign-img .num{position:absolute;left:20px;top:20px;z-index:1}
.sign-cap{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.sign-cap b{font:700 20px/1.5 var(--ko)}
.plus{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:#fff}
.plus::after{transform:rotate(90deg)}
/* ── SH Youtube ─────────────────────────────────────── */
.yt{background:var(--yellow)}
.yt .tabs{margin-top:50px}
.yt-panel{display:grid;grid-template-columns:740fr 660fr;gap:40px;margin-top:40px}
.yt-panel[hidden]{display:none}
.yt-main{position:relative;aspect-ratio:740/417;border-radius:15px;overflow:hidden;background:#000}
.yt-main button,.yt-main iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.yt-main button:hover img{transform:scale(1.03)}
/* 시안에는 재생 단추가 없다 — 마우스를 올렸을 때만 */
.play{position:absolute;left:50%;top:50%;width:72px;height:50px;margin:-25px 0 0 -36px;opacity:0;transition:opacity .2s}
.yt-main button:hover .play,.yt-main button:focus-visible .play{opacity:.95}
.yt-side{position:relative}
.yt-list{position:absolute;inset:0;overflow-y:auto;padding-right:40px;scrollbar-width:none}
.yt-list::-webkit-scrollbar{display:none}
.yt-sb{position:absolute;right:0;top:0;width:2px;height:calc(100% - 23px);border-radius:2px;background:#d7cfdf;pointer-events:none}
.yt-sb i{position:absolute;left:0;top:0;width:2px;height:62px;border-radius:2px;background:#000}
.yt-item{display:grid;grid-template-columns:240fr 360fr;gap:20px;align-items:center;width:100%;text-align:left}
.yt-item+.yt-item{margin-top:40px}
.yt-thumb{display:block;aspect-ratio:240/136;border-radius:15px;overflow:hidden;background:#ddd}
.yt-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.yt-item:hover .yt-thumb img{transform:scale(1.05)}
.yt-item b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:600 16px/1.5 var(--ko)}
.yt-item[aria-current="true"] b{text-decoration:underline;text-underline-offset:3px}
.yt-bar{display:none}
/* ── Shorts ─────────────────────────────────────────── */
.shorts{background:#000;color:#fff}
.shorts .sec-t{font-family:var(--os);color:#fff}
.shorts .sec-d{color:rgba(255,255,255,.7)}
.short-row{gap:20px;margin-top:50px}
.short{position:relative;width:calc((100% - 80px)/5);aspect-ratio:272/484;border-radius:20px;overflow:hidden;background:#222}
.short img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.short:hover img{transform:scale(1.04)}
/* ── SH PLASTIC SURGERY(후기 카드) ──────────────────── */
.rv-row{gap:20px;margin-top:50px;padding-left:max(var(--gut),calc((100% - var(--wrap))/2));padding-right:var(--gut);
scroll-padding-left:max(var(--gut),calc((100% - var(--wrap))/2))}
.rv{width:345px}
.rv-img{position:relative;aspect-ratio:1;border-radius:20px;overflow:hidden;background:#eee}
.rv-img img{transition:transform .5s}
.rv:hover .rv-img img{transform:scale(1.04)}
.rv h3{margin-top:20px;min-height:54px;font:700 18px/1.5 var(--ko)}
.rv-tags{display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 16px;min-height:46px;margin-top:16px;opacity:.7;color:#606060;font-size:14px;line-height:1.5}
/* ── Before & After ─────────────────────────────────── */
.ba{background:var(--gray);padding-bottom:104px}
.ba-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:50px}
.ba .tab{color:var(--muted)}
/* 메인·상세 갤러리: 1mm 처럼 한 줄에 카드 셋. 메인(.g3)은 셋(태블릿 둘·모바일 하나), 상세는 여섯(3×2 · 2026-10-21 병원 «6개 바로 노출») — 화살표는 보이는 장수만큼 넘긴다 */
.bac-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;margin-top:40px}
@media (max-width:1199px){.bac-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}.bac-grid.g3>[data-ba-slot="2"]{display:none}}
@media (max-width:767px){.bac-grid{grid-template-columns:1fr;margin-top:30px}.bac-grid.g3>[data-ba-slot="1"]{display:none}}
/* 전후사진 카드 — 나눠보기 ⇄ 겹쳐보기(/preview/ba-1mm/ 시안과 같은 모양, site.js cardHtml) */
.bac{margin:0;min-width:0}
.bac-tg{display:flex;align-items:center;justify-content:center;gap:14px;height:28px;margin-bottom:16px;font:400 16px/1 var(--ko)}
.bac-tl{color:#9a90a3;cursor:pointer;user-select:none;transition:color .2s}
.bac-tl.on{color:var(--ink);font-weight:500}
.bac-sw{position:relative;flex:none;width:54px;height:28px;padding:0;border:0;border-radius:28px;background:#c9b3d6;cursor:pointer;transition:background .25s}
.bac-sw i{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .25s}
.bac-sw[aria-checked="true"]{background:#715c88}
.bac-sw[aria-checked="true"] i{transform:translateX(26px)}
.bac-sw:focus-visible,.bac-knob:focus-visible{outline:3px solid #ea9e4a;outline-offset:3px}
.bac-bx{position:relative;overflow:hidden;aspect-ratio:466/275;border-radius:20px 20px 0 0;background:#efe7f0}
.bac.no-cap .bac-bx{border-radius:20px}
.bac-sp{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.bac[data-lay="stack"] .bac-sp{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
.bac-f,.bac-ow{position:relative;overflow:hidden}
.bac img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover}
.bac[data-lay="side"] .bac-fa::before,.bac[data-lay="stack"] .bac-fa::before{content:"";position:absolute;z-index:1;background:rgba(255,255,255,.85)}
.bac[data-lay="side"] .bac-fa::before{left:0;top:0;bottom:0;width:1px}
.bac[data-lay="stack"] .bac-fa::before{left:0;right:0;top:0;height:1px}
.bac-lb{position:absolute;top:14px;left:16px;z-index:2;font:500 14px/1 var(--en);color:#fff;opacity:.9;text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}
.bac-ov{position:absolute;inset:0;visibility:hidden}
.bac-of{position:absolute;overflow:hidden;cursor:ew-resize;touch-action:pan-y;user-select:none}
.bac-ow{position:absolute;inset:0}
.bac-of img{pointer-events:none;-webkit-user-drag:none}
.bac-ob{clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.bac-of .bac-lb-a{left:auto;right:16px}
.bac-line{position:absolute;z-index:3;top:0;bottom:0;left:var(--p);width:2px;transform:translateX(-1px);background:rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(59,39,73,.12)}
.bac-knob{position:absolute;top:50%;left:50%;width:44px;height:44px;padding:0;border:2px solid #fff;border-radius:50%;background:rgba(255,255,255,.18);transform:translate(-50%,-50%);
-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:inherit;touch-action:none}
.bac-knob::before,.bac-knob::after{content:"";position:absolute;left:50%;top:50%;border:6px solid transparent}
.bac-knob::before{border-right-color:#fff;transform:translate(-115%,-50%)}
.bac-knob::after{border-left-color:#fff;transform:translate(15%,-50%)}
.bac.is-over .bac-sp{visibility:hidden}
.bac.is-over .bac-ov{visibility:visible}
.bac-cap{padding:16px;border-radius:0 0 20px 20px;background:#f5f2f6;font:500 17px/1.45 var(--ko);color:#333;text-align:center;word-break:keep-all}
/* 한 줄의 카드는 캡션 줄 수가 달라도 같은 높이(2026-10-27 사용자 «같은 높이여야 해») — 짧은 캡션은 띠 가운데에 */
.bac-grid>[data-ba-slot]:not([hidden]){display:flex;flex-direction:column}
.bac-grid .bac{flex:1;display:flex;flex-direction:column}
.bac-grid .bac-cap{flex:1;display:flex;align-items:center;justify-content:center}
/* 전후사진 게시판(.sh-bap-card — 지금 /ko/ 게시판 화면, parts/board.css)도 같은 카드: 크게 보기 창 대신 카드 안에서 끌어 본다 */
.bd .sh-bap-card.has-bac{padding-top:16px;cursor:default}
.bd .sh-bap-card.has-bac:hover{transform:none}
.sh-bap-card .bac-tg{margin-bottom:14px;font-size:15px}
.sh-bap-card .bac-bx,.sh-bap-card .bac-cap{border-radius:0}
.sh-bap-card .bac-cap{padding:12px 14px;font-size:14.5px;font-weight:600}
.ba-note{margin-top:16px;font-size:13px;line-height:20px;color:var(--ink3)}
.ba-empty{padding:120px 0;text-align:center;color:var(--ink7)}
.ba-ctrl{display:flex;justify-content:center;align-items:center;margin-top:30px}
.ba-ctrl .more{display:none}
.ba-ctrl .arrows[hidden]{display:none}
/* ── 띠 문구(흐름) ─────────────────────────────────── */
.mq{height:72px;overflow:hidden;background:var(--ink);display:flex;align-items:center}
.mq-in{display:flex;flex:none;animation:mq 40s linear infinite}
.mq-in span{flex:none;padding-right:.6em;color:#fff;font:600 40px/1.2 var(--en);letter-spacing:.2em;white-space:nowrap}
@keyframes mq{to{transform:translateX(-50%)}}
/* 병원 PC 는 «애니메이션 효과» 끔(reduced-motion)이라 멈추면 고장처럼 보인다 — 끄지 않고 느리게만 */
@media (prefers-reduced-motion:reduce){.mq-in{animation-duration:80s}}
/* ── SH Special ─────────────────────────────────────── */
.sp{background:var(--pink);padding-bottom:188px}
.sp .sec-t{font-size:50px}
.sp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px}
.sp-img{aspect-ratio:464/320;border-radius:20px;overflow:hidden;background:#ddd}
.sp-img img{width:100%;height:100%;object-fit:cover}
.sp-body{padding:20px}
.sp-body h3{margin-top:12px;font:700 24px/1.5 var(--ko)}
.sp-body p{margin-top:12px;font-size:16px;line-height:1.5;color:var(--ink7)}
/* ── 꼬리말 ───────────────────────────────────────── */
.ft{background:#000;color:#fff;border-top:1px solid #d5d5d5}
.ft-top{display:grid;grid-template-columns:488px 440px 1fr;padding:60px 0 50px}
.ft-k{font:700 14px/1.2 var(--os);color:var(--pink)}
.ft-tel{display:block;margin-top:8px;font:600 60px/1.2 var(--en)}
.ft-time{width:360px;margin-top:30px;display:grid;gap:12px}
.ft-time div{display:flex;justify-content:space-between;font-size:16px;line-height:1.2}
.ft-time dt{font-weight:700}.ft-time dd{margin:0}
.ft-off{margin-top:16px;font-size:16px;line-height:1.2;color:rgba(255,255,255,.5)}
.ft-addr{margin-top:30px;display:grid;gap:8px;font-size:16px;line-height:1.2}
.ft-maps{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.ft-maps a{display:inline-flex;align-items:center;gap:12px;height:44px;padding:0 12px;border-radius:8px;background:rgba(255,255,255,.2);
font:500 16px/1.2 var(--ko);transition:background .2s}
.ft-maps a:hover{background:rgba(255,255,255,.3)}
.ft-maps img{width:auto;height:24px}
.ft-line{height:1px;background:rgba(255,255,255,.3)}
.ft-bot{display:grid;grid-template-columns:1fr auto;padding:60px 0 60px}
.ft .logo{background:#fff}
.ft-info{margin-top:30px;display:grid;gap:12px;font:500 14px/1.2 var(--ko)}
.ft-info p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.ft-info span{display:inline-flex;gap:12px}
.ft-info span+span::before{content:"";align-self:center;width:1px;height:12px;margin:0 12px 0 0;background:rgba(255,255,255,.6)}
.ft-info span+span{margin-left:12px}
.ft-info i{font-style:normal;color:rgba(255,255,255,.6)}
.ft-copy{margin-top:30px;font-size:14px;line-height:1.2;color:rgba(255,255,255,.6)}
.ft-links{display:flex;gap:40px;font:500 14px/1.2 var(--ko);justify-content:flex-end;padding-top:17px}
.ft-links a:hover{opacity:.7}
.ft-sns{display:flex;gap:24px;justify-content:flex-end;margin-top:46px}
.ft-sns a{width:24px;height:24px;color:#fff}
.ft-sns svg{width:24px;height:24px}
/* ── 빠른 상담(하단 고정 막대 · 1024 미만은 2줄 띠) ─── */
body{padding-bottom:var(--bar)}
.qc{position:fixed;left:0;right:0;bottom:0;z-index:55;height:var(--bar);background:var(--ink)}
.qc form{width:min(1394px,calc(100% - 40px));height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.qc-f{display:flex;align-items:center;gap:20px;min-width:0}
.qc input[type=text],.qc input[type=tel],.qc select{width:250px;height:45px;padding:0 20px;border:0;border-radius:10px;background:#fff;
font:500 16px/1.2 var(--ko);color:var(--ink);outline:none}
.qc input::placeholder{color:var(--ink3)}
.qc select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;
background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23222' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 20px center/16px no-repeat}
.qc select:invalid{color:var(--ink)}
.qc-agree{display:flex;align-items:center;color:#fff;font:500 16px/1.2 var(--ko);white-space:nowrap}
.qc-agree label{margin-left:12px;cursor:pointer}
.qc-agree input{appearance:none;-webkit-appearance:none;flex:none;width:24px;height:24px;margin:0;border-radius:50%;background:#fff;cursor:pointer;display:grid;place-items:center}
.qc-agree input:checked::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}
.qc-agree input:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.qc-agree a{margin-left:4px}
.qc-agree a:hover{text-decoration:underline}
.qc-send{flex:none;width:218px;height:45px;border-radius:10px;background:var(--btn);color:var(--ink);font:700 16px/1.2 var(--ko);transition:filter .2s}
.qc-send:hover{filter:brightness(.96)}
.qc-send:disabled{opacity:.6;cursor:wait}
/* 메인 팝업의 상담 버튼(/ko/ 와 같이 쓰는 sh-popup.js — 옛 하단 띠 색 #d4842b 를 !important 로 넣는다)을 이 사이트 하단 띠 버튼과 같게
(2026-10-27 사용자 «상담 신청 버튼 색은 하단에 상담 신청과 동일하게»). 1023 이하는 하단 띠도 주황 알약이라 그대로. 앞의 html body 는 그 !important 를 이기기 위한 무게 */
@media (min-width:1024px){
html body .sh-pop-box .sh-pop-send{background:var(--btn)!important;color:var(--ink);transition:filter .2s}
html body .sh-pop-box .sh-pop-send:hover{background:var(--btn)!important;filter:brightness(.96)}
}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* ── 퀵메뉴(PC 오른쪽) ─────────────────────────────── */
.qm{position:fixed;right:10px;top:max(calc(var(--hd) + 16px),calc((100vh - var(--bar))/2 - 258px));z-index:50;width:80px}
@media (max-height:680px){.qm{display:none}}
.qm ul{border-radius:8px;background:rgba(34,34,34,.7);overflow:hidden}
.qm li a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:80px;color:#fff;font:500 14px/1.5 var(--ko);transition:background .2s}
.qm li a:hover{background:rgba(255,255,255,.12)}
.qm li svg{width:24px;height:24px}
.qm-top{display:flex;align-items:center;justify-content:center;gap:4px;width:80px;height:28px;margin-top:8px;border-radius:8px;background:var(--ink);color:#fff;font:500 14px/1.5 var(--ko)}
.qm-top svg{width:10px;height:10px}
/* 알림(상담 접수 결과) */
.toast{position:fixed;left:50%;bottom:calc(var(--bar) + 24px);z-index:90;max-width:min(90vw,520px);padding:14px 22px;border-radius:12px;background:#111;color:#fff;
font-size:15px;line-height:1.5;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translate(-50%,20px);opacity:0;visibility:hidden;transition:.25s}
.toast.show{transform:translate(-50%,0);opacity:1;visibility:visible}
.toast.err{background:#b4232c}
/* ── 대메뉴: 좁아지면 글씨를 줄이고, 1280 미만은 햄버거만(시안 모바일과 같음) ── */
@media (max-width:1799px){.hd{padding:0 40px}.gnb{--gp:13px}.gnb>ul>li>a{font-size:17px}.hd-r{gap:28px}}
@media (max-width:1599px){.hd-mem{display:none}}
@media (max-width:1439px){.gnb{--gp:8px}.gnb>ul>li>a{font-size:15px}}
@media (max-width:1279px){.gnb{display:none}}
/* ── 폭 1200~1919: 같은 틀을 줄인다 ──────────────────── */
@media (max-width:1599px){
.ft-top{grid-template-columns:1.1fr 1fr 1.2fr}
.ft-time{width:auto;max-width:360px}
}
@media (max-width:1439px){
.qc input[type=text],.qc input[type=tel],.qc select{width:clamp(150px,13vw,250px)}
.qc-send{width:auto;padding:0 24px}
}
@media (max-width:1199px){
:root{--pad:110px;--gut:32px}
.hd,.nav-top{padding:0 32px}
.hero{padding:0 32px 60px}
.hero-track{gap:24px}
.hero-card{flex-basis:calc((100% - 24px)/2)}
.sign-grid{grid-template-columns:repeat(2,1fr)}
.yt-panel{grid-template-columns:1fr}
.yt-side{position:static}
.yt-sb{display:none}
.yt-list{position:static;padding-right:0;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.yt-item+.yt-item{margin-top:0}
.short{width:calc((100% - 40px)/3)}
.sp-grid{gap:16px}
.sp-body{padding:20px 4px}
.sp-body h3{font-size:20px}
.sp-body p{font-size:15px}
.ft-top{grid-template-columns:1fr 1fr;gap:40px}
.ft-top>div:first-child{grid-column:1/-1}
.nav-grid{grid-template-columns:repeat(3,1fr)}
.qm{display:none}
}
/* ── 1200 미만에도 오른쪽 퀵메뉴(2026-10-28 병원 «모바일 첫 화면에 전화하기·카톡상담 아이콘이 안 보임 — 너무 중요해서요»).
옛 /ko/ 모바일처럼 작은 세로 띠. 하트 배지는 js/parts/qb.js 가 그 위에 쌓는다(모바일 크기). 위 max-height:680 숨김보다 뒤라 이쪽이 이긴다(아이폰 SE 667 도 보임) ── */
@media (max-width:1199px) and (min-height:480px){
.qm{display:block;right:6px;width:56px}
.qm li a,.sh-qb-tight .qm li a{height:54px;gap:2px;font-size:11px;line-height:1.2}
html:not(:lang(ko)) body .qm li a{font-size:10px}
.qm li svg,.sh-qb-tight .qm li svg{width:20px;height:20px}
.qm-top{width:56px;height:24px;margin-top:6px;font-size:11px}
.sh-qb{right:6px}
/* 낮은 화면(아이폰 SE 등)에서 하트 3개가 다 들어가게 qb.js 가 한 단계 줄인다(html. 을 붙여 parts/qb.css 의 PC 용 60px 보다 앞선다) */
html.sh-qb-tight .qm li a{height:44px;font-size:10px}
html.sh-qb-tight .qm li svg{width:18px;height:18px}
}
/* ── 1024 미만: 운영 사이트(ksh-ps.com/ko/) 모바일과 같은 하단 고정 띠(2026-10-26 사용자 요청)
1줄 이름·연락처·상담 부위, 2줄 동의·신청 버튼. 높이 100px(= --bar, 쪽 아래 여백·첫 화면 높이에 쓰인다) ── */
@media (max-width:1023px){
:root{--bar:100px}
.qc{height:var(--bar);padding:10px;border-radius:20px 20px 0 0;background:#1c1220}
.qc form{width:auto;flex-wrap:wrap;align-content:space-between;gap:0 6px}
.qc-f{display:contents}
.qc input[type=text],.qc input[type=tel],.qc select{flex:1 1 calc((100% - 13px)/3);width:auto;min-width:0;height:32px;padding:0 10px;font-size:12px}
.qc input::placeholder{color:#777}
.qc select:has(option[value=""]:checked){color:#777}
.qc select{padding-right:24px;background-position:right 8px center;background-size:12px}
/* 동의 글이 길면(번역 쪽) 줄을 바꿔도 [자세히 보기]가 글 뒤에 이어지게 — 동그라미는 왼쪽 가운데에 */
.qc-agree{display:block;position:relative;flex:1 1 0;min-width:0;padding-inline-start:28px;font:400 12px/1.25 var(--ko);white-space:normal}
.qc-agree input{position:absolute;inset-inline-start:0;top:50%;width:20px;height:20px;margin-top:-10px}
.qc-agree input:checked::after{width:10px;height:10px;background:#1c1220}
.qc-agree label{margin-left:0}
.qc-agree a{margin-left:3px;color:rgba(255,255,255,.6);white-space:nowrap}
.qc-l{display:none}
.qc-send{width:auto;height:38px;padding:0 18px;border-radius:50px;background:#d4842b;color:#fff;font:600 15px/1 var(--ko);letter-spacing:-.5px}
}
@media (max-width:1439px) and (min-width:1024px){.qc-l{display:none}}
/* ── 모바일(시안 360) ─────────────────────────────── */
@media (max-width:767px){
:root{--pad:80px;--gut:20px;--hd:68px;--hdt:9px}
.pc{display:none}.mo{display:block}
body{font-size:15px}
.sec-t{font-size:28px}
.sec-d{font-size:15px}
.hd,.nav-top{padding:0 20px}
.hd{left:12px;right:12px;padding:0 16px}
.logo{width:128px;height:32px}
.hd .lang{display:none}
.burger i:nth-child(1){top:4px}.burger i:nth-child(2){top:11px}.burger i:nth-child(3){top:18px;width:16px}
.nav-body{padding:30px 0 80px}
.nav-grid{grid-template-columns:1fr;gap:0}
.nav-g{border-bottom:1px solid #eee}
.nav-g h2{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border:0;font-size:18px}
.nav-g h2 button{width:32px;height:32px;display:grid;place-items:center}
.nav-g h2 button svg{width:14px;height:14px;transition:transform .2s}
.nav-g.open h2 button svg{transform:rotate(180deg)}
.nav-g ul{display:none;margin:0 0 16px;gap:10px}
.nav-g.open ul{display:grid}
.nav-mem{margin-top:30px}
.nav-lang{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.nav-lang a{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;background:var(--gray);font-size:14px}
.nav-lang a[aria-current]{background:var(--ink);color:#fff}
.hero{padding:0 20px 80px}
.ph{left:var(--lm,0);top:var(--tm,0);width:var(--wm,100%);height:var(--hm,100%)}
.hero-track{gap:20px}
.hero-card{flex-basis:100%;aspect-ratio:320/480;border-radius:20px}
/* 모바일 시안 320px 카드 기준 */
.hero-cap{left:6.25cqw;right:6.25cqw;bottom:6.25cqw}
.hero-cap .chip{font-size:4.69cqw;padding:5px 16px}
.chip{font-size:15px}
.hero-tit{margin-top:3.75cqw;font-size:10cqw}
.hero-bar{width:200px;margin-top:20px}
.sign-grid{display:flex;gap:20px;margin:30px calc(var(--gut)*-1) 0;padding:0 var(--gut);scroll-padding-left:var(--gut)}
.sign-card{width:260px}
.sign-img .num{left:10px;top:10px}
.sign-cap{margin-top:8px}
.sign-cap b{font-size:17px}
.plus{width:24px;height:24px}
.plus::before,.plus::after{width:10px;margin-left:-5px}
.yt .tabs,.ba .tabs{flex-wrap:nowrap;overflow-x:auto;margin:30px calc(var(--gut)*-1) 0;padding:0 var(--gut);scrollbar-width:none}
.yt .tabs::-webkit-scrollbar,.ba .tabs::-webkit-scrollbar{display:none}
.yt-panel{display:block;margin-top:30px}
.yt-main{border-radius:8px}
.play{width:54px;height:38px;margin:-19px 0 0 -27px}
.yt-list{display:flex;gap:10px;margin:20px calc(var(--gut)*-1) 0;padding:0 var(--gut);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.yt-list::-webkit-scrollbar{display:none}
.yt-item{display:block;flex:none;width:120px}
.yt-item+.yt-item{margin-top:0}
.yt-thumb{aspect-ratio:120/68;border-radius:8px}
.yt-item b{margin-top:12px;font-size:15px}
.yt-bar{display:block;position:relative;width:100%;height:2px;margin-top:30px;background:transparent}
.yt-bar i{position:absolute;left:0;top:0;width:48px;height:2px;border-radius:1px;background:#000;transition:left .2s}
.head{flex-direction:column;align-items:stretch;gap:0}
.ctrl{justify-content:space-between;margin-top:30px}
.short-row{gap:24px;margin:30px calc(var(--gut)*-1) 0;padding:0 calc((100% + var(--gut)*2 - 272px)/2);scroll-padding-left:calc((100% + var(--gut)*2 - 272px)/2);scroll-snap-type:x mandatory}
.short-row .short{width:272px;scroll-snap-align:center}
.rv-row{gap:20px;margin-top:30px;padding:0 var(--gut);scroll-padding-left:var(--gut)}
.rv{width:280px}
.ba-bar{margin-top:0}
.ba-bar .more{display:none}
.bac-tg{gap:12px;margin-bottom:12px;font-size:15px}
.bac-lb{top:10px;left:12px;font-size:12px}
.bac-of .bac-lb-a{right:12px}
.bac-knob{width:38px;height:38px}
.bac-cap{padding:13px 12px;font-size:15px}
.ba{padding-bottom:44px}
.ba-ctrl{justify-content:space-between}
.ba-ctrl .more{display:inline-flex}
.mq{height:48px}
.mq-in span{font-size:20px}
.sp{padding-bottom:80px}
.sp .sec-t{font-size:28px}
.sp-grid{grid-template-columns:1fr;gap:30px;margin-top:30px}
.sp-img{aspect-ratio:320/220}
.sp-body h3{font-size:20px}
.sp-body p{font-size:15px}
.ft-top{display:block;padding:40px 0}
.ft-tel{font-size:32px}
.ft-top>div+div{margin-top:30px}
.ft-time{width:100%;max-width:none;margin-top:20px}
.ft-time div{font-weight:500}
.ft-addr{margin-top:30px}
.ft-k{font-family:var(--ko)}
.ft-bot{display:flex;flex-direction:column;align-items:flex-start;padding:40px 0}
.ft-brand,.ft-nav{display:contents}
.ft-bot .logo{order:0}
.ft-links{order:1;flex-direction:column;gap:8px;padding-top:20px}
.ft-sns{order:2;margin-top:20px}
.ft-info{order:3;margin-top:20px;gap:8px}
.ft-info p{display:grid;gap:8px}
.ft-info span+span{margin-left:0}
.ft-info span+span::before{display:none}
.ft-copy{order:4;margin-top:20px}
}
/* ════════════════════════════════════════════════════════════════
서브(시술) 페이지 — 시안 «03. pc_sub1 / 05. pc_sub2 · 04/06 mo_sub»
구간마다 부품(sub_parts.html 매크로)으로 만들어 모든 시술 페이지가 같이 쓴다.
════════════════════════════════════════════════════════════════ */
.ko-t{font-family:var(--ko)}
.t40{font:700 40px/1.5 var(--ko)}
.t50{font:700 50px/1.5 var(--ko)}
.p16{font-size:16px;line-height:1.5;color:var(--ink7)}
.p18{font-size:18px;line-height:1.5;color:var(--ink7)}
.ctr{text-align:center}
/* 확인 목록(회색 상자 · 2열) */
.checks{display:grid;grid-template-columns:320px 1fr;gap:20px 0;padding:30px;border-radius:20px;background:var(--gray)}
.checks li{display:flex;align-items:center;gap:12px;font:700 16px/1.5 var(--ko)}
.checks svg{flex:none;width:20px;height:20px}
.checks.w{background:#fff}
/* 첫 화면 */
.sh-hero{position:relative;height:clamp(640px,56.25vw,1080px);overflow:hidden;background:var(--hero-bg,#c3ddfe)}
.sh-hero::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.3)}
.sh-hero .ph{z-index:0}
.sh-hero-txt{position:absolute;left:20px;right:20px;top:50%;z-index:2;transform:translateY(-50%);text-align:center;color:#fff}
.sh-hero-lb{font:700 20px/1.2 var(--ko)}
.sh-hero-t{margin-top:20px;font:400 60px/1.5 var(--ko)}
/* 지금 /ko/ 의 배너 해시태그 */
.sh-hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:24px}
.sh-hero-tags li{padding:6px 14px;border-radius:20px;background:rgba(255,255,255,.2);font:500 15px/1.5 var(--ko);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@media (max-width:767px){.sh-hero-tags{margin-top:16px;gap:6px}.sh-hero-tags li{font-size:13px;padding:4px 10px}}
/* 소개 + 인용 */
.sh-intro{padding-top:140px}
.sh-wide{position:relative;height:300px;border-radius:20px;overflow:hidden;background:#eee}
.sh-intro-grid{display:grid;grid-template-columns:741px 1fr;margin-top:40px}
.sh-lbl{position:relative;font:700 18px/1.5 var(--ko);color:var(--ink)}
.sh-en{margin-bottom:12px;font:600 15px/1.5 var(--en);letter-spacing:.02em;color:var(--ink7)}
.chk-lb{margin-top:24px;font:700 15px/1.5 var(--en);color:var(--ink7)}
.chk-lb+.checks{margin-top:10px!important}
.sh-types .pg-head{margin-bottom:50px}
@media (max-width:767px){.sh-types .pg-head{margin-bottom:30px}}
.sh-lbl::before{content:"";position:absolute;right:calc(100% + 20px);top:50%;width:150px;height:1px;background:var(--ink)}
.sh-intro-r{padding-top:23px}
.sh-intro-r .p16{margin-top:20px}
.sh-intro-r .p16+.p16{margin-top:12px}
.sh-quote{position:relative;height:300px;margin-top:40px;padding:30px;border-radius:20px;background:#000;color:#fff}
.sh-quote blockquote{margin:0;font:700 24px/1.5 var(--ko)}
.sh-quote .wm{position:absolute;left:30px;bottom:30px;width:151px;height:136px;opacity:.1;
background:url("../img/logo.png") -.5px -26.44px/756px 188.9px no-repeat}
.sh-quote cite{position:absolute;right:30px;bottom:30px;font:400 16px/1.5 var(--ko);font-style:normal;color:rgba(255,255,255,.5)}
/* 전후 두 쌍(엇갈림) */
.sh-duo{padding:140px 0}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-items:start}
.duo-h{text-align:center}
.num40{display:inline-block;min-width:40px;height:40px;padding:0 8px;border-radius:8px;background:var(--ink);color:#fff;font:700 14px/40px var(--os);text-align:center}
.duo-h p{margin-top:20px;font:700 18px/1.5 var(--ko)}
.duo .ba-one{max-width:466px;margin:40px auto 0}
.duo-cap{margin-top:20px;text-align:center;font:700 24px/1.5 var(--ko)}
/* 글 + 확인목록 + 사진 */
.sh-ratio{padding-bottom:140px}
.sh-ratio .grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.sh-ratio h2{margin-top:0}
.sh-ratio h2+.p16{margin-top:20px}
.sh-ratio .checks{margin-top:30px}
.sh-ratio .checks+.p16{margin-top:30px}
.sh-ratio-img{position:relative;aspect-ratio:700/528;border-radius:20px;overflow:hidden;background:#eee}
.sh-ratio-img.gray img{filter:grayscale(1)}
/* 어두운 구조 배너 */
.sh-band{padding-bottom:var(--band-pad,130px)}
.sh-band>.lb{text-align:center;font:700 18px/1.5 var(--ko)}
.sh-band-box{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:670px;margin:50px 50px 0;padding:60px 40px;
border-radius:20px;overflow:hidden;text-align:center;color:#fff;
/* 2026-10-21 병원 «배경이 좀 더 보이게, 너무 까매요» — 검정 덮개 .8 → .5, 둘레 어둠 .7 → .45 */
background-image:radial-gradient(670px 1820px at 100% 0,rgba(0,0,0,0) 0%,rgba(0,0,0,.1125) 25%,rgba(0,0,0,.225) 50%,rgba(0,0,0,.3375) 75%,rgba(0,0,0,.45) 100%),
linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url("/ko/wp-content/uploads/2026/02/sub_DaVinci_img.png"),linear-gradient(120.9deg,#ebede5 .65%,#f7f5ed 100%);
background-size:100% 100%,100% 100%,auto 100%,100% 100%;background-position:0 0,0 0,center center,0 0; /* 다빈치 그림: 지금 /ko/ sub_DaVinci_img.png */background-repeat:no-repeat;
background-blend-mode:normal,multiply,normal,normal}
.sh-band-box h2{font:700 40px/1.5 var(--ko)}
.sh-band-box>*{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.sh-band-box p{margin-top:20px;font-size:16px;line-height:1.5}
.sh-band-box strong{display:block;margin-top:50px;font:700 24px/1.5 var(--ko)}
/* 전후사진 갤러리(노란 바탕 · 서버 전후사진) */
.sh-gal{background:var(--yellow);padding-bottom:112px}
.sh-gal-h{position:relative;text-align:center}
.sh-gal-h .more{position:absolute;right:0;bottom:6px}
.sh-gal .bac-grid{margin-top:50px}
.sh-gal .ba-note{margin-top:8px}
/* SH Difference(행이 겹쳐 쌓이며 올라온다) */
.sh-diff{background:var(--gray)}
.sh-diff .lb{font:700 18px/1.5 var(--ko)}
.sh-diff .sec-t{margin-top:8px}
.sh-diff hr{margin:30px 0 0;border:0;height:1px;background:#c5c7cf}
.diff-list{margin-top:50px;display:grid;gap:50px}
.diff-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;background:var(--gray)}
.diff-row:nth-child(even) .diff-img{order:2}
.diff-img{position:relative;min-height:363px;border-radius:20px;overflow:hidden;background:#ddd}
.diff-card{padding:40px;border-radius:20px;background:#fff}
.tag{display:inline-block;padding:7px 16px;border-radius:8px;background:var(--ink);color:#fff;font:700 14px/21px var(--ko)}
.diff-card h3{margin-top:12px;font:700 40px/1.5 var(--ko)}
.diff-card .p16{margin-top:20px}
.diff-card .checks{margin:20px -20px 0}
.diff-card .checks+.p16{margin-top:20px}
@media (min-width:1200px) and (min-height:760px){
.sh-diff .diff-row{position:sticky;top:calc(var(--hd) + 30px);box-shadow:0 -30px 0 var(--gray)}
/* 뒤에 쌓이는 칸이 앞 칸보다 낮으면 앞 칸 사진 끝이 아래로 비쳐 보였다(2026-10-21 병원 «이미지 잘림이 이상») —
각 칸 아래를 회색으로 덮고(다음 칸이 그 위에 그려진다), 목록 밖으로 나간 덮개는 자른다(overflow:clip 은 sticky 를 깨지 않는다) */
.sh-diff .diff-list{overflow:clip}
.sh-diff .diff-row:not(:last-child)::after{content:"";position:absolute;left:0;right:0;top:100%;height:100vh;background:var(--gray);pointer-events:none}
}
/* 수술 원칙 5 */
.sh-pr{padding:140px 0}
.pr-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.pr-head .p18{margin-top:8px}
.pr-head-r{display:flex;align-items:center;gap:30px;padding-bottom:0}
.pr-head-r::before{content:"";flex:none;width:150px;height:1px;background:var(--ink)}
.pr-head-r p{font-size:18px;line-height:1.5;text-align:right}
.pr-b{margin-top:80px}
.pr-b.tint{margin:80px 50px 0;padding:80px 0;border-radius:30px;background:var(--pink)}
.pr-b.tint.y{background:var(--yellow)}
.pr-b+.pr-b:not(.tint),.pr-b.tint+.pr-b{margin-top:80px}
.pr-h{text-align:center}
.pr-h h3{margin-top:12px;font:700 24px/1.5 var(--ko)}
.pr-body{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:50px}
.pr-img{position:relative;aspect-ratio:700/338;border-radius:20px;overflow:hidden;background:#ddd}
.pr-txt{padding-top:40px}
.pr-txt .checks{margin-top:28px}
.pr-txt .checks+.p16{margin-top:30px}
.pr-b.tint .checks{background:#fff}
/* 철학 배너 */
.sh-philo{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;height:clamp(560px,56.25vw,1080px);
padding:0 20px;overflow:hidden;text-align:center;color:#fff;background:#222}
.sh-philo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30.3%}
.sh-philo::before{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.675) 25%,rgba(0,0,0,.55) 50%,rgba(0,0,0,.425) 75%,rgba(0,0,0,.3) 100%)}
.sh-philo>div{position:relative;z-index:2}
.sh-philo h2{font:700 50px/1.5 var(--ko)}
.sh-philo p{margin-top:12px;font:500 18px/1.5 var(--ko)}
.sh-philo .philo-lb{margin:0 0 16px;font:600 15px/1.5 var(--en);letter-spacing:.2em;opacity:.8}
.sh-philo .philo-sm{margin-top:8px;font-size:16px;opacity:.8}
.pr-txt.nochk .p16+.p16{margin-top:30px}
/* 정밀진단 */
.sh-diag{position:relative;display:grid;grid-template-columns:807fr 1113fr;background:var(--pink);overflow:hidden}
.diag-img{position:relative;min-height:100%;overflow:hidden}
.diag-txt{padding:130px 40px 130px 50px;max-width:847px}
.diag-txt .sub{margin-top:16px;font:700 18px/1.5 var(--ko)}
.diag-txt .sub+.p18{margin-top:24px}
.diag-txt .p18+.p18{margin-top:12px}
.diag-card{max-width:700px;min-height:343px;margin-top:50px;padding:30px;border-radius:20px;background:#fff}
.diag-card .tag{font-weight:600}
.diag-card .p18{margin-top:12px}
.diag-card .tag+.p18{margin-top:30px}
.diag-card .p18.k{color:var(--ink)}
/* 수술 후 케어(검정 · 넘김) */
.sh-care{background:#000;color:#fff}
.care-h{position:relative;text-align:center}
.care-h p{margin-top:8px;font:500 18px/1.5 var(--ko);color:rgba(255,255,255,.7)}
.care-h .arrows{position:absolute;right:0;bottom:0;gap:10px}
.rnd{width:40px!important;height:40px!important;border-radius:50%;background:#fff;color:var(--ink)}
.rnd.dim{background:rgba(255,255,255,.3);color:#fff}
.rnd svg{width:8px!important;height:14px!important}
.care-row{gap:48px;margin-top:73px}
.care{position:relative;width:calc((100% - 96px)/3);aspect-ratio:448/581;border-radius:20px;overflow:hidden;background:#333}
.care img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.care::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.45) 75%,rgba(0,0,0,.6) 100%)}
.care-t{position:absolute;left:30px;right:30px;top:58.5%;z-index:1}
.care-t .pill{display:inline-block;margin-left:-10px;padding:4px 12px;border-radius:20px;background:var(--ink);font:500 18px/1.5 var(--ko)}
.care-t h3{margin-top:20px;font:700 24px/1.5 var(--ko)}
.care-t p{margin-top:12px;font:500 18px/1.5 var(--ko);color:rgba(255,255,255,.7)}
.care-bar{display:none}
/* 서브 유튜브(노랑 · 4장씩) */
.sh-yt{background:var(--yellow);padding:130px 0}
.sh-yt .sec-t{font-size:50px}
.syt-row{gap:20px;margin-top:50px}
.syt{width:calc((100% - 60px)/4)}
.syt a{display:block}
.syt-th{position:relative;aspect-ratio:345/194;border-radius:20px;overflow:hidden;background:#ddd}
.syt-th img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.syt a:hover .syt-th img{transform:scale(1.05)}
.syt p{margin-top:16px;font:500 16px/1.5 var(--ko);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.syt p.syt-sub{margin-top:4px;font-size:14px;color:var(--ink7);-webkit-line-clamp:2}
.prog{position:relative;height:2px;margin-top:50px;background:rgba(34,34,34,.2)}
.prog i{position:absolute;left:0;top:0;height:2px;background:var(--ink);transition:left .2s,width .2s}
.sh-care .prog{background:rgba(255,255,255,.2)}
.sh-care .prog i{background:#fff}
/* ── 서브: 폭 1200 미만 ── */
@media (max-width:1439px){
.sh-hero-t{font-size:clamp(34px,4.2vw,60px)}
.sh-intro-grid{grid-template-columns:1fr 1fr;gap:40px}
.sh-lbl::before{width:80px}
.checks{grid-template-columns:1fr 1fr}
.diff-card h3{font-size:32px}
}
@media (max-width:1199px){
.sh-band-box{margin:50px 32px 0}
.pr-b.tint{margin:80px 32px 0}
.diff-row{grid-template-columns:1fr}
.diff-row:nth-child(even) .diff-img{order:0}
.diff-img{min-height:0;aspect-ratio:16/9}
/* 통째로 보이는 사진(img.cover, 1.05~1.14:1)은 칸을 사진 비율로 — 16:9·320:220 칸은 턱을 잘랐다(2026-10-27 사진 점검) */
.diff-img:has(img.cover){aspect-ratio:auto}
.pr-head{flex-direction:column;align-items:flex-start}
.pr-body{grid-template-columns:1fr}
.pr-txt{padding-top:0}
.sh-diag{grid-template-columns:1fr}
.diag-img{aspect-ratio:807/915;max-height:620px;min-height:0}
.diag-txt{padding:60px 32px 110px}
.care{width:calc((100% - 48px)/2)}
.syt{width:calc((100% - 40px)/3)}
}
/* ── 서브: 모바일(시안 360) ── */
@media (max-width:767px){
.t40{font-size:28px}.t50{font-size:28px}
.p16{font-size:15px}.p18{font-size:16px}
.checks{grid-template-columns:1fr;gap:12px;padding:20px}
.checks li{font-size:15px}
.sh-hero{height:740px}
.sh-hero-lb{font-size:18px}
.sh-hero-t{margin-top:12px;font-size:24px}
.sh-intro{padding-top:80px}
.sh-wide{height:130px}
.sh-intro-grid{display:block;margin-top:20px}
.sh-intro-r{padding-top:0;margin-top:20px}
.sh-lbl{padding-top:20px}
.sh-lbl::before{right:auto;left:0;top:0;width:80px}
.sh-intro-r .p16{margin-top:16px}
.sh-intro-r .p16+.p16{margin-top:8px}
.sh-quote{height:auto;min-height:224px;margin-top:20px;padding:20px 20px 120px}
.sh-quote blockquote{font-size:18px}
.sh-quote .wm{left:20px;bottom:20px;width:89px;height:80px;background-size:445.6px 111.3px;background-position:-.3px -15.6px}
.sh-quote cite{right:20px;bottom:20px;font-size:15px}
.sh-duo{padding:80px 0}
.duo{grid-template-columns:1fr;gap:40px}
.num40{min-width:30px;height:30px;line-height:30px}
.duo-h p{margin-top:12px;font-size:16px}
.duo .ba-one{margin-top:20px}
.duo-cap{margin-top:16px;font-size:20px}
.sh-ratio{padding-bottom:80px}
.sh-ratio .grid2{grid-template-columns:1fr;gap:30px}
.sh-ratio h2{margin-top:0}
.sh-ratio h2+.p16{margin-top:12px}
.sh-ratio .checks{margin-top:20px}
.sh-ratio .checks+.p16{margin-top:20px}
.sh-ratio-img{aspect-ratio:320/220}
.sh-band{padding-bottom:80px}
.sh-band>.lb{font-size:16px}
.sh-band-box{min-height:480px;margin:30px 20px 0;padding:40px 20px;background-size:100% 100%,100% 100%,420px 554px,100% 100%;background-position:0 0,0 0,center -70px,0 0}
.sh-band-box h2{font-size:28px}
.sh-band-box p{margin-top:12px;font-size:15px}
.sh-band-box strong{margin-top:30px;font-size:20px}
.sh-gal-h{text-align:center}
.sh-gal-h .more{display:none}
.sh-gal .bac-grid{margin-top:30px}
.sh-gal{padding-bottom:44px}
.sh-diff .lb{font-size:16px}
.sh-diff hr{margin-top:20px}
.diff-list{margin-top:30px;gap:50px}
.diff-row{gap:10px}
.diff-img{aspect-ratio:320/220}
.diff-card{padding:20px}
.diff-card h3{font-size:28px}
.diff-card .p16{margin-top:12px}
.diff-card .checks{margin:12px 0 0}
.diff-card .checks+.p16{margin-top:12px}
.sh-pr{padding:80px 0}
.pr-head-r{flex-direction:column;align-items:flex-start;gap:20px;margin-top:40px}
.pr-head-r::before{width:100px}
.pr-head-r p{font-size:16px;text-align:left}
.pr-b{margin-top:60px}
.pr-b.tint{margin:30px 0 0;padding:30px 0;border-radius:0}
.pr-b.tint+.pr-b{margin-top:30px}
.pr-h h3{font-size:16px}
.pr-body{gap:0;margin-top:20px}
.pr-img{aspect-ratio:320/180}
.pr-txt{padding:20px;border-radius:20px;background:#fff}
.pr-b.tint .pr-txt{background:transparent;padding:20px 20px 0}
.pr-txt .checks{margin-top:12px}
.pr-txt .checks+.p16{margin-top:12px}
.sh-philo{height:740px}
.sh-philo h2{font-size:28px}
.sh-philo p{font-size:16px}
.diag-img{aspect-ratio:320/363;margin:0 20px}
.diag-txt{padding:30px 20px 80px}
.diag-txt .sub{font-size:16px}
.diag-txt .sub+.p18{margin-top:20px}
.diag-card{min-height:0;margin-top:42px;padding:20px}
.diag-card .tag+.p18{margin-top:20px}
.care-h .sec-t{font-size:32px}
.care-h p{font-size:16px}
.care-h .arrows{position:static;justify-content:flex-end;margin-top:20px}
.care-row{gap:21px;margin-top:30px}
.care{width:300px;aspect-ratio:300/481}
.care-t{left:20px;right:20px;top:47.8%}
.care-t h3{margin-top:10px;font-size:20px}
.care-t p{font-size:16px}
.care-bar{display:block;margin-top:30px}
.sh-yt{padding:80px 0}
.sh-yt .sec-t{font-size:32px}
.syt-row{margin-top:30px}
.syt{width:300px}
.syt-th{aspect-ratio:300/169}
.syt p{margin-top:23px}
.sh-yt .prog{margin-top:30px}
}
/* ── 서브2 부품 ─────────────────────────────────────── */
/* 카드 행만 있는 구간(회색/흰) */
.sh-cards{padding:140px 0}
.sh-cards.gray{background:var(--gray)}
.sh-cards .diff-list{margin-top:0}
.sh-cards.white .diff-row{background:#fff}
.sh-cards.white .diff-card .checks{background:var(--gray)}
/* 수술 방법(분홍 카드가 가운데로 넘어오는 무한 넘김) */
.sh-types{padding-top:140px;overflow:hidden}
.ty-vp{overflow:hidden;touch-action:pan-y}
.ty-track{display:flex;gap:80px;will-change:transform}
.ty{flex:0 0 min(1280px,calc(100% - 160px));padding:80px 40px;border-radius:20px;background:var(--pink);text-align:center;cursor:pointer;user-select:none}
.ty.cur{cursor:default}
.ty h3{font:700 40px/1.5 var(--ko)}
.ty .s{margin-top:8px;font-size:18px;line-height:1.5;color:var(--ink7)}
.ty .for{margin-top:40px;font:700 14px/1.5 var(--ko);color:#000}
.ty ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.ty li{display:flex;align-items:center;gap:12px;height:44px;padding:0 20px;border-radius:8px;background:#fff;font:700 16px/1.5 var(--ko)}
.ty li svg{width:20px;height:20px}
.ty-img{position:relative;width:min(710px,100%);aspect-ratio:710/420;margin:40px auto 0;border-radius:20px;overflow:hidden;background:#f2edf4}
.ty-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ty-img .ph{object-fit:fill}
.ty-ctrl{display:none}
/* 사진 반 · 어두운 글 반 */
.sh-split{display:grid;grid-template-columns:1fr 1fr}
.sp-l,.sp-r{position:relative;aspect-ratio:960/840;overflow:hidden}
.sp-r{background:#1c1a22;color:#fff}
.sp-r>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-in{position:absolute;inset:0;padding:100px;display:flex;flex-direction:column;justify-content:space-between}
.sp-in h2{font:700 40px/1.5 var(--ko)}
.sp-in .pk{margin-top:40px;font:700 16px/1.5 var(--ko);color:var(--pink)}
.sp-in .wt{margin-top:20px;font-size:16px;line-height:1.5;color:rgba(255,255,255,.7)}
.sp-end{text-align:right}
.sp-end p{font-size:16px;line-height:1.5;color:rgba(255,255,255,.7)}
.sp-end strong{display:block;margin-top:20px;font:700 24px/1.5 var(--ko)}
@media (max-width:1439px){
.sp-in{padding:60px}
.ty h3{font-size:34px}
}
@media (max-width:1199px){
.sh-split{grid-template-columns:1fr}
.sp-l{aspect-ratio:16/9}
.sp-r{aspect-ratio:auto;min-height:460px}
.sp-in{position:relative;min-height:460px}
}
@media (max-width:767px){
.sh-cards{padding:80px 0}
.sh-types{padding-top:80px}
.ty-track{gap:10px}
.ty{flex-basis:calc(100% - 40px);padding:40px 20px}
.ty h3{font-size:28px}
.ty .s{font-size:15px}
.ty .for{margin-top:24px}
.ty ul{flex-direction:column;gap:10px;margin-top:12px}
.ty li{height:43px;font-size:15px}
.ty-img{margin-top:20px}
.sp-l{aspect-ratio:360/315}
.sp-r,.sp-in{min-height:460px}
.sp-in{padding:40px 20px}
.sp-in h2{font-size:28px}
.sp-in .pk{margin-top:24px;font-size:15px}
.sp-in .wt{margin-top:12px;font-size:15px}
.sp-end p{font-size:15px}
.sp-end strong{margin-top:12px;font-size:20px}
}
/* ── 일반 페이지 공통(병원소개·게시판·상담·약관 …) ── */
.pg-hero{height:clamp(420px,29.2vw,560px)}
.pg-hero .sh-hero-t{font-size:clamp(28px,2.5vw,44px)}
.pg-sec{padding:140px 0}
.pg-sec.gray{background:var(--gray)}
.pg-sec.pink{background:var(--pink)}
.pg-sec.yellow{background:var(--yellow)}
.pg-head{text-align:center}
.pg-head .lb{font:700 18px/1.5 var(--ko);margin-bottom:8px}
.pg-head .p18{margin-top:12px}
.pg-head+*{margin-top:50px}
/* 첫 화면 글이 얼굴·눈에 얹히지 않게(2026-10-20 병원 요청, 상세 첫 화면과 같은 원칙)
PC: 얼굴 있는 배너는 얼굴 반대쪽에 글(퀵메뉴 .qm 피해 오른쪽 140px). 1280 미만: 사진은 위, 작은 제목 → 문구는 사진 아래 흰 바탕. */
@media (min-width:1280px){
/* 작은 제목(쪽 이름) — 20px 은 큰 문구(44px) 옆에서 너무 작았다(2026-10-28 사용자 «Why SH 가 너무 작아») → 큰 문구의 약 0.6배 */
.pg-hero .sh-hero-lb{font-size:clamp(20px,1.46vw,28px)}
.pg-hero-l .sh-hero-txt,.pg-hero-r .sh-hero-txt{max-width:34vw}
.pg-hero-l .sh-hero-txt{left:clamp(48px,6vw,120px);right:auto;text-align:left}
.pg-hero-r .sh-hero-txt{left:auto;right:140px;text-align:right}
}
@media (max-width:1279px){
.pg-hero{--ph:calc(var(--hd) + min(56vw,320px));height:auto;display:flex;flex-direction:column;background:#fff}
.pg-hero .ph{position:relative;left:0;top:0;width:100%;height:var(--ph);flex:none}
.pg-hero::before{display:none}
.pg-hero .sh-hero-txt{position:relative;left:auto;right:auto;top:auto;transform:none;padding:6px 20px 36px;color:var(--ink)}
.pg-hero .sh-hero-lb{font-size:15px;color:#3b2749}
.pg-hero .sh-hero-t{margin-top:8px}
}
@media (max-width:767px){
.pg-hero .sh-hero-t{font-size:22px}
.pg-sec{padding:80px 0}
.pg-head .lb{font-size:16px}
.pg-head+*{margin-top:30px}
}
/* ── parts/band.css ── */
/* 다빈치 띠 새 그림(2026-10-21 병원 카톡 «이걸로 적용해 봐 주세요, 줄였을 때는 가운데 그림만 보이도록» → 사용자 «모두 반영») — 상세 34쪽 모두.
그림: src/static/img/sub/davinci-band.jpg(병원이 준 2065×761). 칸을 꽉 채우고(cover) 가운데(인체 비례도)를 기준으로 — 좁은 화면에선 가운데만 보인다.
흰 글자가 읽히게 검정 40% 덮개. site.css 의 옛 다빈치 배경(sub_DaVinci_img.png·모바일 크기 지정)을 뒤에서 덮어쓴다(parts 는 site.css 뒤에 붙는다) */
.sh-band-box{background:linear-gradient(rgba(0,0,0,.4),rgba(0,0,0,.4)),url("../img/sub/davinci-band.jpg") center/cover no-repeat;background-blend-mode:normal}
/* ── parts/board.css ── */
/* 게시판(전후사진·후기·커뮤니티) — conv/board_css.py 가 만든다. 직접 고치지 말고 data/board/overrides.css 를 고친다.
1) 옛 shps.css 의 게시판 부품 규칙(.bd 안으로 가둠, 색만 새 디자인으로) 2) 새 디자인 덮어쓰기 */
.bd .sub_board_title p{font-family: "Roboto", sans-serif !important;
font-size: 21px;
line-height: 31px;
color: #222222;
padding-bottom: 20px !important;
font-weight: 500 !important;}
.bd .sh-mi{display: block; width: 100%; line-height: 0;}
.bd .sh-mi svg{width: 100%; height: auto; display: block; overflow: visible;}
.bd .sh-mi[class*="sh-mi-"] svg{stroke: #222222;}
.bd .sh-mi-chev svg, .bd .sh-mi-line svg, .bd .sh-mi-eye svg, .bd .sh-mi-wave svg, .bd .sh-mi-lift svg, .bd .sh-mi-ring svg, .bd .sh-mi-rise svg, .bd .sh-mi-diam svg{fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;}
.bd .sh-mi-chev .o-chev path{animation: shChev 2.6s ease-in-out infinite;}
.bd .sh-mi-chev .o-chev path:nth-child(1){animation-delay: .12s;}
.bd .sh-mi-chev .o-chev path:nth-child(3){animation-delay: .24s;}
@keyframes shChev {
0%, 55%, 100% { transform: translateY(0); opacity: 1; }
70% { transform: translateY(-4px); opacity: .55; }
85% { transform: translateY(1px); opacity: 1; }
}
.bd .sh-mi-line .o-dot{fill: #222222; stroke: none; transform-origin: 33px 10px; animation: shDot 2.8s ease-in-out infinite;}
@keyframes shDot {
0%, 60%, 100% { transform: scale(1); opacity: 1; }
75% { transform: scale(1.55); opacity: .5; }
88% { transform: scale(1); opacity: 1; }
}
.bd .sh-mi-eye .o-iris{fill: #222222; stroke: none; transform-origin: 32px 34px; animation: shIris 3.2s ease-in-out infinite;}
.bd .sh-mi-eye .o-lid, .bd .sh-mi-eye .o-under{transform-origin: 32px 34px; animation: shLid 3.2s ease-in-out infinite;}
@keyframes shLid { 0%, 8%, 100% { transform: scaleY(1); } 3% { transform: scaleY(.12); } }
@keyframes shIris { 0%, 8%, 100% { opacity: 1; transform: scale(1); } 3% { opacity: 0; transform: scale(.4); } }
.bd .sh-mi-wave .o-wave path{animation: shArch 3s ease-in-out infinite;}
.bd .sh-mi-wave .o-wave path:nth-child(2){animation-delay: .22s;}
@keyframes shArch { 0%, 60%, 100% { transform: translateY(0); } 78% { transform: translateY(-5px); } }
.bd .sh-mi-lift .o-lift path{animation: shLiftUp 2.6s ease-in-out infinite;}
.bd .sh-mi-lift .o-lift path:nth-child(2){animation-delay: .14s;}
.bd .sh-mi-lift .o-lift path:nth-child(3){animation-delay: .28s;}
@keyframes shLiftUp { 0%, 58%, 100% { transform: translateY(0); } 76% { transform: translateY(-6px); } }
.bd .sh-mi-ring .o-ring circle{transform-origin: 32px 32px;}
.bd .sh-mi-ring .o-ring circle:nth-child(2){animation: shRing 2.8s ease-out infinite;}
.bd .sh-mi-ring .o-ring circle:nth-child(3){animation: shRing 2.8s ease-out infinite .5s;}
@keyframes shRing { 0% { transform: scale(.55); opacity: .25; } 45% { opacity: 1; } 100% { transform: scale(1); opacity: .25; } }
.bd .sh-mi-rise .o-sag{animation: shSag 3s ease-in-out infinite;}
.bd .sh-mi-rise .o-arrow{animation: shArrow 3s ease-in-out infinite;}
@keyframes shSag { 0%, 55%, 100% { transform: translateY(0); } 78% { transform: translateY(-4px); } }
@keyframes shArrow { 0%, 55%, 100% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(-4px); opacity: .55; } 85% { transform: translateY(0); opacity: 1; } }
.bd .sh-mi-diam .o-diam{transform-origin: 32px 32px; animation: shDiam 9s linear infinite;}
.bd .sh-mi-diam .o-diam rect:nth-child(2){opacity: .5;}
@keyframes shDiam { to { transform: rotate(360deg); } }
.bd .sh-mi[class*="sh-mi-"]{transform: scale(1.22); transform-origin: center;}
@media (prefers-reduced-motion: reduce){
.bd .sh-mi-eye .o-lid, .bd .sh-mi-eye .o-under, .bd .sh-mi-eye .o-iris{animation-duration: 6s;}
.bd .sh-mi-chev .o-chev path, .bd .sh-mi-lift .o-lift path, .bd .sh-mi-wave .o-wave path, .bd .sh-mi-rise .o-sag, .bd .sh-mi-rise .o-arrow{animation-duration: 4.5s;}
.bd .sh-mi-ring .o-ring circle:nth-child(3){opacity: .35;}
}
.bd .sh-mi-intro{position: absolute; top: 95px; left: 71px; width: 122px; line-height: 0;}
@media only screen and (max-width: 999px){
.bd .sh-mi-intro{top: 14px; left: calc(6% - 10px); width: 95px;}
}
.bd .sh-mi.sh-mi-bloom{display:block;width:100%;line-height:0;transform:none}
.bd .sh-mi.sh-mi-bloom svg{width:100%;height:auto;display:block;overflow:visible;fill:none;stroke:#222222;stroke-linecap:round;stroke-linejoin:round}
.bd .sh-mi.sh-mi-bloom .shb-rot{transform-box:view-box;transform-origin:50px 50px;animation:shbloomSpin 8s linear infinite}
.bd .sh-mi.sh-mi-bloom .shb-p{stroke:#222222;stroke-width:1.8;transform-box:view-box;transform-origin:50px 50px;animation:shbloomBreathe 8s ease-in-out infinite}
.bd .sh-mi.sh-mi-bloom .shb-p:nth-child(2), .bd .sh-mi.sh-mi-bloom .shb-p:nth-child(5){animation-delay:-2.66667s}
.bd .sh-mi.sh-mi-bloom .shb-p:nth-child(3), .bd .sh-mi.sh-mi-bloom .shb-p:nth-child(6){animation-delay:-5.33333s}
@keyframes shbloomSpin{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@keyframes shbloomBreathe{0%,100%{transform:scale(1);stroke-opacity:1}50%{transform:scale(.74);stroke-opacity:.75}}
.bd #kboard-viewps-before-after-plus-list .kboard-viewps-before-after-plus-list-slide .kboard-viewps-before-after-plus-list .kboard-list-item{border: 1px solid rgba(59, 39, 73, .14);
border-radius: 20px;
overflow: hidden;
background: #fff;
box-shadow: 0 6px 18px rgba(59, 39, 73, .06);
transition: box-shadow .3s ease, transform .3s ease;}
.bd #kboard-viewps-before-after-plus-list .kboard-viewps-before-after-plus-list-slide .kboard-viewps-before-after-plus-list .kboard-list-item:hover{transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(59, 39, 73, .12);}
.bd #kboard-viewps-before-after-plus-list .kboard-viewps-before-after-plus-list-slide .kboard-viewps-before-after-plus-list .kboard-list-item .kboard-list-thumbnail:first-of-type{border-right: 1px solid rgba(59, 39, 73, .14);}
.bd #kboard-viewps-before-after-plus-list .kboard-viewps-before-after-plus-list-slide .kboard-viewps-before-after-plus-list .kboard-list-item .kboard-list-slide-toggle input{border-radius: 4px;}
.bd .nectar-carousel .cell .inner-wrap:has(.sh-insta-cap){display: flex;
flex-direction: column;}
.bd .sh-insta-cap{padding: 14px 2px 2px;
text-align: center;}
.bd .sh-insta-cap .sh-insta-txt{margin: 0 !important;
font-size: 16px;
line-height: 1.45;
font-weight: 600;
color: #222222;
letter-spacing: -0.4px;
word-break: keep-all;}
.bd .sh-insta-cap .sh-insta-tag{margin: 0 !important;
font-size: 13px;
line-height: 1.5;
font-weight: 400;
color: #222222;
letter-spacing: -0.3px;
word-break: keep-all;}
.bd .sh-insta-cap{display: flex;
flex-direction: column;
align-items: center;}
.bd .sh-insta-cap .sh-insta-tag{margin-top: 8px !important;}
@media only screen and (max-width: 999px){
.bd .sh-insta-cap{padding: 12px 2px 2px;}
.bd .sh-insta-cap .sh-insta-txt{font-size: 15px;}
.bd .sh-insta-cap .sh-insta-tag{font-size: 12px;}
}
@media only screen and (max-width: 690px){
.bd .sh-insta-cap .sh-insta-txt{font-size: 14px;}
.bd .sh-insta-cap .sh-insta-tag{font-size: 11.5px;}
}
.bd .sh-insta-cap .sh-insta-tag span{display: inline-block;
white-space: nowrap;
margin: 0 3px;}
.bd .sh-page{max-width: 1000px; margin: 0 auto;}
.bd .sh-page .sh-lead{margin: 0 0 54px !important;
font-size: 17px;
line-height: 1.85;
color: #222222;
letter-spacing: -0.4px;
word-break: keep-all;
padding-bottom: 34px;
border-bottom: 1px solid #e2e3ea;}
.bd .sh-page .sh-sec{display: flex;
align-items: baseline;
gap: 10px;
margin: 56px 0 20px !important;
padding-left: 14px;
font-size: 22px;
font-weight: 700;
color: #222222;
letter-spacing: -0.6px;
border-left: 3px solid #222222;}
.bd .sh-page .sh-sec:first-of-type{margin-top: 0 !important;}
.bd .sh-page .sh-sec em{font-style: normal;
font-size: 14px;
font-weight: 500;
color: #222222;}
.bd .sh-card-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;}
.bd .sh-card{display: flex;
flex-direction: column;
padding: 28px 26px 24px;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 24px;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;}
.bd .sh-card-grid > .sh-card:nth-child(even){border-radius: 24px;}
.bd .sh-card:hover{transform: translateY(-4px);
border-color: #222222;
box-shadow: 0 16px 34px rgba(59, 39, 73, .10);}
.bd .sh-card-t{margin: 0 0 12px !important;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
color: #222222;
letter-spacing: -0.5px;
word-break: keep-all;}
.bd .sh-card-x{margin: 0 0 22px !important;
flex: 1;
font-size: 14.5px;
line-height: 1.75;
color: #222222;
letter-spacing: -0.3px;
word-break: keep-all;}
.bd .sh-card-f{display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
border-top: 1px solid #e2e3ea;}
.bd .sh-card:hover .sh-more{color: #222222;}
.bd .sh-card:hover .sh-more i{transform: translateX(4px);}
.bd .sh-cta-note{display: block;
margin-top: 14px;
padding-top: 13px;
font-size: 14.5px;
color: #e2e3ea;
border-top: 1px solid rgba(234, 221, 236, 0.18);}
.bd .sh-cta{margin: 54px 0 0 !important;
padding: 30px 34px !important;
background: #222222;
color: #e2e3ea;
border-radius: 24px;
font-size: 16px;
line-height: 1.8;
letter-spacing: -0.4px;
word-break: keep-all;}
.bd .sh-acc-wrap{border-top: 1px solid #e2e3ea;}
.bd .sh-acc{border-bottom: 1px solid #e2e3ea;}
.bd .sh-acc > summary{display: flex;
align-items: flex-start;
gap: 12px;
padding: 24px 46px 24px 4px;
position: relative;
cursor: pointer;
list-style: none;
transition: background .2s ease;}
.bd .sh-acc > summary::-webkit-details-marker{display: none;}
.bd .sh-acc > summary:hover{background: #f3f4f9;}
.bd .sh-acc > summary::after{content: "";
position: absolute;
right: 12px; top: 30px;
width: 13px; height: 13px;
background: #222222;
transition: transform .3s ease, background .3s ease;
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13'%3E%3Cpath d='M6.5 0v13M0 6.5h13' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");}
.bd .sh-acc[open] > summary::after{transform: rotate(135deg); background: #222222;}
.bd .sh-acc-t{flex: 1;
font-size: 17px;
line-height: 1.6;
font-weight: 600;
color: #222222;
letter-spacing: -0.5px;
word-break: keep-all;}
.bd .sh-acc-s{display: block;
width: 100%;
margin-top: 8px;
font-size: 14px;
line-height: 1.7;
font-weight: 400;
color: #222222;
letter-spacing: -0.3px;
word-break: keep-all;}
.bd .sh-acc > summary > .sh-acc-t{display: block;}
.bd .sh-acc > summary{flex-wrap: wrap;}
.bd .sh-acc-b{padding: 4px 46px 34px 4px;}
.bd .sh-acc-b h4{margin: 26px 0 8px !important;
font-size: 15.5px;
font-weight: 700;
color: #222222;
letter-spacing: -0.4px;}
.bd .sh-acc-b h4:first-child{margin-top: 6px !important;}
.bd .sh-acc-b p{margin: 0 !important;
font-size: 15px;
line-height: 1.85;
color: #222222;
letter-spacing: -0.35px;
word-break: keep-all;}
.bd .sh-qa .sh-acc-b{padding-left: 4px; overflow: hidden;}
@media only screen and (max-width: 999px){
.bd .sh-card-grid{grid-template-columns: repeat(2, 1fr); gap: 18px;}
.bd .sh-page .sh-lead{font-size: 15.5px; margin-bottom: 40px !important;}
.bd .sh-page .sh-sec{font-size: 19px; margin-top: 44px !important;}
.bd .sh-acc-t{font-size: 15.5px;}
.bd .sh-acc-b{padding-right: 20px;}
.bd .sh-acc > summary{padding-right: 38px;}
}
@media only screen and (max-width: 690px){
.bd .sh-card-grid{grid-template-columns: 1fr;}
.bd .sh-card, .bd .sh-card-grid > .sh-card:nth-child(even){border-radius: 18px;}
.bd .sh-page .sh-lead{font-size: 14.5px;}
.bd .sh-acc-t{font-size: 15px;}
.bd .sh-acc-b p{font-size: 14.5px;}
.bd .sh-cta{padding: 24px 22px !important; font-size: 15px;}
}
.bd .sh-mi[class*="sh-mi-"] svg{stroke: #222222;}
.bd .sh-mi-line .o-dot, .bd .sh-mi-eye .o-iris{fill: #222222;}
.bd .sh-page .sh-sec{border-left-color: #222222;}
.bd .sh-page .sh-sec em{color: #222222;}
.bd .sh-card:hover{border-color: #222222;}
.bd .sh-card:hover .sh-more{color: #222222;}
.bd .sh-acc[open] > summary::after{background: #222222;}
.bd .sh-feed{margin: 0 0 8px;}
.bd .sh-feed-item{display: grid;
grid-template-columns: 300px 1fr;
gap: 30px;
align-items: start;
padding: 30px 0;
border-bottom: 1px solid #e2e3ea;}
.bd .sh-feed-item:first-child{padding-top: 6px;}
.bd .sh-feed-thumb{display: block;
position: relative;
overflow: hidden;
border-radius: 20px;
background: #f3f4f9;
aspect-ratio: 4 / 3;}
.bd .sh-feed-thumb img{width: 100%;
height: 100%;
object-fit: cover;
transition: transform .45s ease;}
.bd .sh-feed-item:hover .sh-feed-thumb img{transform: scale(1.05);}
.bd .sh-feed-thumb.is-empty::after{content: "SH";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 2px;
color: #e2e3ea;}
.bd .sh-feed-meta{display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;}
.bd .sh-feed-cat{padding: 5px 11px;
border-radius: 999px;
background: #e2e3ea;
font-size: 12.5px;
font-weight: 700;
color: #222222;
line-height: 1.4;}
.bd .sh-feed-best{padding: 5px 11px;
border-radius: 999px;
background: #222222;
font-size: 12.5px;
font-weight: 700;
color: #222222;
line-height: 1.4;}
.bd .sh-feed-date{font-family: "Roboto", sans-serif;
font-size: 13px;
color: #7d7286;}
.bd .sh-feed-t{margin: 0 0 10px !important;
font-size: 20px;
line-height: 1.5;
font-weight: 700 !important;
color: #222222;
letter-spacing: -.3px;}
.bd .sh-feed-t a{color: inherit; text-decoration: none; transition: color .2s;}
.bd .sh-feed-item:hover .sh-feed-t a{color: #222222;}
.bd .sh-feed-x{margin: 0 0 16px !important;
font-size: 15px;
line-height: 1.75;
color: #222222;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;}
.bd .sh-feed-more{display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
color: #222222;
text-decoration: none;
transition: color .2s;}
.bd .sh-feed-more::after{content: "→"; transition: transform .25s;}
.bd .sh-feed-item:hover .sh-feed-more{color: #222222;}
.bd .sh-feed-item:hover .sh-feed-more::after{transform: translateX(4px);}
.bd .sh-page .sh-sec + .sh-feed .sh-feed-item:first-child{padding-top: 10px;}
.bd .sh-feed-item.is-hidden{display: none;}
.bd .sh-feed-toggle{display: block;
width: 100%;
margin: 26px 0 0;
padding: 15px 20px;
border: 1px solid #e2e3ea;
border-radius: 16px;
background: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
color: #222222;
cursor: pointer;
transition: background .2s, border-color .2s;}
.bd .sh-feed-toggle:hover{background: #f3f4f9; border-color: #7d7286;}
@media only screen and (max-width: 999px){
.bd .sh-feed-item{grid-template-columns: 210px 1fr; gap: 22px; padding: 24px 0;}
.bd .sh-feed-t{font-size: 18px;}
.bd .sh-feed-x{font-size: 14.5px;}
}
@media only screen and (max-width: 690px){
.bd .sh-feed-item{grid-template-columns: 1fr; gap: 14px; padding: 22px 0;}
.bd .sh-feed-thumb{aspect-ratio: 16 / 9; border-radius: 16px;}
.bd .sh-feed-t{font-size: 17px;}
.bd .sh-feed-x{font-size: 14px; -webkit-line-clamp: 3;}
}
.bd .sh-page .shc-head{display: grid;
grid-template-columns: 1fr auto;
gap: 30px;
align-items: end;
margin: 0 0 30px;
padding-bottom: 26px;
border-bottom: 1px solid #e2e3ea;}
.bd .sh-page .shc-eyebrow{display: block;
margin-bottom: 12px;
font-family: "Roboto", sans-serif;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 3px;
color: #222222;}
.bd .sh-page .shc-head h2{margin: 0 0 14px !important;
padding: 0;
border: 0;
font-size: 31px;
font-weight: 800 !important;
line-height: 1.34;
letter-spacing: -1px;
color: #222222;
word-break: keep-all;}
.bd .sh-page .shc-head p{margin: 0 !important;
font-size: 15.5px;
line-height: 1.8;
color: #222222;
word-break: keep-all;}
.bd .sh-page .shc-src{display: flex;
flex-direction: column;
min-width: 232px;
padding: 16px 20px;
text-align: right;
text-decoration: none;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 16px;
transition: border-color .2s, transform .2s, box-shadow .2s;}
.bd .sh-page .shc-src:hover{border-color: #222222;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(59, 39, 73, .08);}
.bd .shc-srcs{display: flex;
flex-direction: column;
gap: 10px;}
.bd .shc-srcs .shc-src{min-width: 232px;}
.bd .shc-src-label{margin-bottom: 5px;
font-size: 12px;
letter-spacing: 2px;
color: #7d7286;}
.bd .shc-src-name{margin-bottom: 2px;
font-size: 15px;
font-weight: 700;
color: #222222;}
.bd .shc-src-arrow{align-self: flex-end;
width: 16px; height: 16px;
background: #222222;
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 11.8 11.8 4.2M6.2 4.2h5.6v5.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 11.8 11.8 4.2M6.2 4.2h5.6v5.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transition: transform .25s;}
.bd .sh-page .shc-src:hover .shc-src-arrow{transform: translate(2px, -2px);}
.bd .sh-page .shc-kw{display: grid;
grid-template-columns: repeat(var(--shc-kwcols, 4), 1fr);
margin: 0 0 36px;
overflow: hidden;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 6px;}
.bd .shc-kw button{display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 14px 10px;
font-family: inherit;
font-size: 13.5px;
font-weight: 600;
color: #222222;
background: #fff;
border: 0;
box-shadow: -1px -1px 0 #e2e3ea !important;
cursor: pointer;
transition: background .18s, color .18s;}
.bd .shc-kw button:hover{background: #f3f4f9; color: #222222;}
.bd .shc-kw button.is-on{background: #222222; color: #fff;}
.bd .shc-kw button.is-on .shc-kw-n{color: rgba(255, 255, 255, .68);}
.bd .shc-kw-fill{background: #fff;}
.bd .shc-kw-dot{flex: 0 0 auto;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--shc-c, #7d7286);}
.bd .shc-kw-n{font-family: "Roboto", sans-serif;
font-size: 12.5px;
font-weight: 500;
color: #7d7286;}
.bd .shc-tagbanner{display: flex;
align-items: center;
gap: 12px;
margin: 0 0 22px;
padding: 13px 18px;
background: linear-gradient(90deg, #f3f4f9 0%, #fff 100%);
border: 1px solid #e2e3ea;
border-radius: 14px;}
.bd .shc-tagbanner[hidden]{display: none;}
.bd .shc-tb-label{font-size: 12.5px;
font-weight: 700;
letter-spacing: 2px;
color: #7d7286;}
.bd .shc-tb-name{display: inline-flex;
align-items: center;
gap: 8px;
font-size: 17px;
font-weight: 800;
letter-spacing: -.3px;
color: #222222;}
.bd .shc-tb-name::before{content: "";
width: 8px; height: 8px;
border-radius: 50%;
background: var(--shc-c, #222222);}
.bd .shc-tb-clear{margin-left: auto;
padding: 7px 15px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
color: #222222;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 999px;
cursor: pointer;
transition: border-color .2s, color .2s;}
.bd .shc-tb-clear:hover{border-color: #222222; color: #222222;}
.bd .sh-page .shc-best{margin: 0 0 48px;}
.bd .shc-best-head{display: flex;
align-items: baseline;
gap: 12px;
margin: 0 0 20px;
padding-bottom: 12px;
border-bottom: 2px solid #222222;}
.bd .shc-best-eyebrow{font-family: "Roboto", sans-serif;
font-size: 13.5px;
font-weight: 800;
letter-spacing: 3px;
color: #222222;}
.bd .shc-best-sub{font-size: 13.5px;
font-weight: 500;
color: #7d7286;
letter-spacing: -.2px;}
.bd .shc-latest-head{margin: 0 0 18px;
padding-bottom: 12px;
border-bottom: 2px solid #f3f4f9;}
.bd .sh-page .shc-best-head h2, .bd .sh-page .shc-latest-head h2{display: block;
margin: 0 !important;
padding: 0;
border: 0;
font-size: 21px;
font-weight: 700 !important;
letter-spacing: -.4px;
color: #222222;}
.bd .shc-toolbar{display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 22px;}
.bd .shc-search{position: relative;
flex: 1;
max-width: 340px;}
.bd .shc-search input{width: 100%;
padding: 11px 15px 11px 40px !important;
font-family: inherit;
font-size: 14px;
color: #222222;
background: #fff url("data:image/svg+xml;utf8,") no-repeat 14px center;
border: 1px solid #e2e3ea;
border-radius: 10px;
transition: border-color .2s;}
.bd .shc-search input:focus{outline: 0; border-color: #222222;}
.bd .shc-search input::placeholder{color: #7d7286;}
.bd .shc-count{flex: 0 0 auto;
font-size: 13.5px;
font-weight: 500;
color: #222222;}
.bd .sh-page .shc-grid{display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;}
.bd .shc-card{position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
color: inherit;
text-decoration: none !important;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 18px;
transition: border-color .25s, transform .25s, box-shadow .25s;}
.bd .shc-card::before{content: "";
position: absolute;
top: 0; left: 0;
z-index: 2;
width: 4px; height: 100%;
background: var(--shc-c, #222222);
transform: scaleY(0);
transform-origin: top;
transition: transform .3s;}
.bd .shc-card:hover{border-color: #e2e3ea;
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(59, 39, 73, .10);}
.bd .shc-card:hover::before{transform: scaleY(1);}
.bd .shc-thumb{position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background: #f3f4f9;
border-bottom: 1px solid #f3f4f9;}
.bd .shc-thumb img{position: absolute;
inset: 0;
display: block;
width: 100% !important; height: 100% !important;
object-fit: cover;
transition: transform .45s ease;}
.bd .shc-card:hover .shc-thumb img{transform: scale(1.05);}
.bd .shc-thumb.is-empty{background: linear-gradient(135deg, #f3f4f9 0%, #e2e3ea 100%);}
.bd .shc-thumb.is-empty::after{content: "SH";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;
font-size: 28px;
font-weight: 700;
letter-spacing: 3px;
color: #e2e3ea;}
.bd .shc-body{display: flex;
flex-direction: column;
flex: 1;
padding: 19px 20px 17px;}
.bd .shc-meta{display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 12px;}
.bd .shc-cat{padding: 4px 10px;
font-size: 12px;
font-weight: 700;
line-height: 1.4;
color: #222222;
background: #f3f4f9;
border-radius: 999px;}
.bd .shc-date{font-family: "Roboto", sans-serif;
font-size: 12.5px;
color: #7d7286;}
.bd .sh-page .shc-t{margin: 0 0 10px !important;
font-size: 17px;
font-weight: 700 !important;
line-height: 1.5;
letter-spacing: -.3px;
color: #222222;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 51px;}
.bd .sh-page .shc-x{margin: 0 0 16px !important;
padding: 0 !important;
font-size: 13.5px;
line-height: 1.72;
color: #222222;
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;}
.bd .shc-foot{display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 13px;
font-size: 13px;
border-top: 1px solid #f3f4f9;}
.bd .shc-author{color: #7d7286;}
.bd .shc-more{font-weight: 600;
color: #222222;
transition: color .2s;}
.bd .shc-card:hover .shc-more{color: #222222;}
.bd .shc-best .shc-card{border-color: #222222;
box-shadow: 0 4px 18px rgba(234, 158, 74, .14);}
.bd .shc-best .shc-card:hover{border-color: #222222;}
.bd .shc-best .shc-thumb::after{content: "BEST";
position: absolute;
top: 10px; left: 10px;
z-index: 3;
padding: 4px 10px;
font-family: "Roboto", sans-serif;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 1.4px;
color: #222222;
background: #222222;
border-radius: 4px;
box-shadow: 0 2px 6px rgba(59, 39, 73, .18);}
.bd .shc-empty{grid-column: 1 / -1;
padding: 56px 20px;
font-size: 15px;
color: #7d7286;
text-align: center;}
.bd .shc-pager{display: flex;
justify-content: center;
margin-top: 36px;}
.bd .shc-pager-inner{display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 6px;}
.bd .shc-pager button{min-width: 38px;
height: 38px;
padding: 0 11px;
font-family: "Roboto", sans-serif;
font-size: 13.5px;
font-weight: 600;
color: #222222;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 10px;
cursor: pointer;
transition: background .18s, border-color .18s, color .18s;}
.bd .shc-pager button:hover:not(:disabled):not(.is-on){border-color: #222222; color: #222222;}
.bd .shc-pager button.is-on{color: #fff;
background: #222222;
border-color: #222222;
cursor: default;}
.bd .shc-pager button:disabled{opacity: .38; cursor: default;}
.bd .shc-pager .shc-gap{min-width: 20px;
color: #7d7286;
background: none;
border: 0;
cursor: default;}
@media only screen and (max-width: 999px){
.bd .sh-page .shc-head{grid-template-columns: 1fr; gap: 20px; align-items: start;}
.bd .sh-page .shc-head>*{min-width: 0;} /* 긴 낱말·주소가 격자 칸을 넓히지 않게(2026-10-27) */
.bd .sh-page .shc-head h2{font-size: 25px;}
.bd .sh-page .shc-src{flex-direction: row; align-items: center; gap: 12px; width: 100%; min-width: 0; text-align: left;}
.bd .shc-srcs{flex-direction: row; flex-wrap: wrap; width: 100%;}
.bd .shc-srcs .shc-src{flex: 1 1 240px; min-width: 0;}
.bd .shc-src-label{margin-bottom: 0;}
.bd .shc-src-arrow{margin-left: auto;}
.bd .sh-page .shc-grid{grid-template-columns: repeat(2, 1fr); gap: 18px;}
.bd .sh-page .shc-kw{grid-template-columns: repeat(3, 1fr);}
.bd .sh-page .shc-best-head h2, .bd .sh-page .shc-latest-head h2{font-size: 19px;}
}
@media only screen and (max-width: 690px){
.bd .sh-page .shc-grid{grid-template-columns: 1fr; gap: 16px;}
.bd .sh-page .shc-kw{grid-template-columns: repeat(2, 1fr);}
.bd .shc-kw button{padding: 12px 8px; font-size: 12.5px;}
.bd .shc-toolbar{flex-direction: column; align-items: stretch; gap: 10px;}
.bd .shc-search{max-width: none;}
.bd .shc-count{text-align: right;}
.bd .sh-page .shc-head h2{font-size: 22px;}
.bd .sh-page .shc-head p{font-size: 14.5px;}
.bd .sh-page .shc-t{font-size: 16.5px; min-height: 0;}
.bd .shc-thumb{aspect-ratio: 16 / 9;}
.bd .shc-tagbanner{flex-wrap: wrap; gap: 10px;}
.bd .shc-tb-clear{margin-left: 0;}
}
.bd .sh-page .shc-guide{margin: 54px 0 0;
padding-top: 34px;
border-top: 1px solid #e2e3ea;}
.bd .shc-guide-head{margin: 0 0 6px;}
.bd .sh-page .shc-guide-head h2{display: block;
margin: 0 0 8px !important;
padding: 0;
border: 0;
font-size: 21px;
font-weight: 700 !important;
letter-spacing: -.4px;
color: #222222;}
.bd .sh-page .shc-guide-head p{margin: 0 0 18px !important;
padding: 0 !important;
font-size: 14.5px;
line-height: 1.7;
color: #222222;}
.bd .shc-tblwrap{overflow-x: auto;
border: 1px solid #e2e3ea;
border-radius: 16px;
background: #fff;}
.bd .shc-tbl{width: 100%;
border-collapse: collapse;
font-size: 14px;}
.bd .shc-tbl th{padding: 13px 16px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: 1.2px;
color: #fff;
text-align: left;
white-space: nowrap;
background: #222222;}
.bd .shc-tbl td{padding: 14px 16px;
color: #222222;
line-height: 1.6;
vertical-align: middle;
border-top: 1px solid #f3f4f9;}
.bd .shc-tbl tbody tr:hover td{background: #f3f4f9;}
.bd .shc-tbl-cat{display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
color: #222222;
white-space: nowrap;}
.bd .shc-tbl-cat::before{content: "";
flex: 0 0 auto;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--shc-c, #7d7286);}
.bd .shc-tbl-why{min-width: 260px;}
.bd .shc-tbl-n{padding: 5px 12px;
font-family: inherit;
font-size: 12.5px;
font-weight: 700;
color: #222222;
white-space: nowrap;
background: #f3f4f9;
border: 1px solid #e2e3ea;
border-radius: 999px;
cursor: pointer;
transition: background .18s, border-color .18s, color .18s;}
.bd .shc-tbl-n:hover{background: #222222; border-color: #222222; color: #fff;}
.bd .shc-tbl-go{display: inline-flex;
align-items: center;
gap: 6px;
font-weight: 600;
color: #222222;
text-decoration: none;
white-space: nowrap;
transition: color .2s;}
.bd .shc-tbl-go::after{content: "→"; transition: transform .25s;}
.bd .shc-tbl-go:hover{color: #222222;}
.bd .shc-tbl-go:hover::after{transform: translateX(4px);}
.bd .shc-tbl-none{color: #7d7286;}
@media only screen and (max-width: 690px){
.bd .shc-tblwrap{border: 0; background: none; overflow-x: visible;}
.bd .shc-tbl thead{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);}
.bd .shc-tbl tr{display: block;
margin-bottom: 12px;
background: #fff;
border: 1px solid #e2e3ea;
border-radius: 14px;
overflow: hidden;}
.bd .shc-tbl td{display: flex;
align-items: center;
gap: 12px;
padding: 11px 15px;
border-top: 1px solid #f3f4f9;}
.bd .shc-tbl td:first-child{border-top: 0; background: #f3f4f9;}
.bd .shc-tbl td::before{content: attr(data-label);
flex: 0 0 76px;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .5px;
color: #7d7286;}
.bd .shc-tbl-why{min-width: 0;}
}
.bd .bd-hero{position: relative;
width: 100vw;
margin: 0 0 0 calc(50% - 50vw);
padding: 74px 20px 60px;
text-align: center;
background:
linear-gradient(180deg, rgba(45,28,60,.34) 0%, rgba(45,28,60,.52) 100%),
url(https://channel-static.rebeauty.co.kr/momaprs/ko/wp-content/uploads/2026/03/sub_abour_banner4.jpg) center 38% / cover no-repeat,
#222222;}
.bd .bd-hero-eyebrow{display: block;
font-size: clamp(28px, 4.2vw, 42px);
font-weight: 600;
line-height: 1.22;
letter-spacing: .28em;
color: rgba(255, 255, 255, .6);}
.bd .sh-page .bd-hero h1{margin: 16px 0 0 !important;
padding: 0;
font-size: clamp(28px, 4.2vw, 42px);
font-weight: 700 !important;
line-height: 1.22;
letter-spacing: -.02em;
color: #fff;}
.bd .bd-hero-rule{width: 34px; height: 1px;
margin: 20px auto 18px;
background: rgba(255, 255, 255, .32);}
.bd .sh-page .bd-hero p{margin: 0 !important;
padding: 0 !important;
font-size: 15px;
line-height: 1.7;
color: rgba(255, 255, 255, .82);}
.bd .sub_location_wrap{display: none;}
.bd .sh-page .shq-tbl{width: 100%;
margin: 0;
border-collapse: collapse;
border-top: 2px solid #222222 !important;}
.bd .sh-page .shq-tbl th, .bd .sh-page .shq-tbl td{padding: 14px 10px;
font-size: 14px;
text-align: left;
vertical-align: middle;
border-bottom: 1px solid #f3f4f9;}
.bd .sh-page .shq-tbl th{font-size: 12.5px;
font-weight: 600;
color: #7d7286;
background: none;}
.bd .sh-page .shq-tbl td.c, .bd .sh-page .shq-tbl th.c{text-align: center; white-space: nowrap;}
.bd .sh-page .shq-inline-a p{margin: 0 !important;
padding: 0 !important;
font-size: 14px;
line-height: 1.85;
color: #222222;
word-break: keep-all;}
@media only screen and (max-width: 999px){
.bd .bd-hero{padding: 56px 20px 46px;}
.bd .sh-page .shq-tbl th.c-go, .bd .sh-page .shq-tbl td.c-go{display: none;}
}
@media only screen and (max-width: 690px){
.bd .sh-page .shq-tbl th, .bd .sh-page .shq-tbl td{padding: 12px 6px;}
.bd .sh-page .shq-tbl th.c-badge, .bd .sh-page .shq-tbl td.c-badge{display: none;}
}
.bd .sh-art{max-width: 760px; margin: 0 auto;}
.bd .sh-art-meta{display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 14px;}
.bd .sh-art-cat{display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 700;
color: var(--shc-c, #222222);}
.bd .sh-art-cat::before{content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--shc-c, #7d7286);}
.bd .sh-art-date{font-family: "Roboto", sans-serif;
font-size: 13px;
color: #7d7286;}
.bd .sh-page .sh-art h2.sh-art-t{margin: 0 0 18px !important;
padding: 0;
border: 0;
font-size: 30px;
font-weight: 800 !important;
line-height: 1.4;
letter-spacing: -.8px;
color: #222222;
text-align: center;
word-break: keep-all;}
.bd .sh-art-head{padding-bottom: 22px;
margin-bottom: 34px;
border-bottom: 1px solid #e2e3ea;}
.bd .sh-art-by{font-size: 13.5px; color: #7d7286; text-align: center;}
.bd .sh-page .sh-art-body p{margin: 0 0 20px !important;
padding: 0 !important;
font-size: 16px;
line-height: 1.95;
color: #222222;
letter-spacing: -.3px;
text-align: center;
word-break: keep-all;}
.bd .sh-art-quote{max-width: 600px;
margin: 32px auto 20px;
padding: 16px 22px;
background: linear-gradient(180deg, #f3f4f9 0%, #fff 100%);
border-top: 2px solid #222222;
border-bottom: 2px solid #222222;
border-radius: 0;
text-align: center;}
.bd .sh-page .sh-art-quote::before{content: none; display: none;}
.bd .sh-page .sh-art-quote p{margin: 0 0 8px !important;
font-size: 16.5px;
font-weight: 600;
line-height: 1.85;
color: #222222;}
.bd .sh-page .sh-art-quote p:last-child{margin-bottom: 0 !important;}
.bd .sh-art-cite{display: block;
margin-top: 10px;
font-size: 13.5px;
color: #7d7286;}
.bd .sh-art-hr{height: 1px;
margin: 34px 0;
background: #e2e3ea;
border: 0;}
.bd .sh-art-fig{margin: 28px auto; text-align: center;}
.bd .sh-art-fig img{display: block;
width: auto;
max-width: 100%;
height: auto;
margin: 0 auto;
border-radius: 14px;}
.bd .sh-art-fig.is-group{display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 10px;}
.bd .sh-art-fig.is-group img{margin: 0; max-width: calc(50% - 5px);}
.bd .sh-art-embed{margin: 28px auto; max-width: 100%;}
.bd .sh-art-embed .sh-art-embed-wrap{position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 14px;
overflow: hidden;
background: #000;}
.bd .sh-art-embed iframe{position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;}
.bd .sh-art-cap{margin-top: 10px;
font-size: 13.5px;
line-height: 1.7;
color: #7d7286;
text-align: center;}
.bd .sh-art-video{display: block;
margin: 28px 0;
text-align: center;
padding: 16px 20px;
font-size: 15px;
font-weight: 600;
color: #222222;
text-decoration: none;
background: #f3f4f9;
border: 1px solid #e2e3ea;
border-radius: 14px;}
.bd .sh-art-video::before{content: "▶ ";
color: #222222;}
.bd .sh-art-src{display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin: 40px 0 0;
padding: 18px 22px;
background: #f3f4f9;
border-radius: 16px;
font-size: 14px;
color: #222222;}
.bd .sh-art-src b{color: #222222; font-weight: 700;}
.bd .sh-art-src a{margin-left: auto;
font-weight: 600;
color: #222222;
text-decoration: none;
border-bottom: 1px solid rgba(113, 92, 136, .38);
transition: color .2s, border-color .2s;}
.bd .sh-art-src a:hover{color: #222222; border-color: #222222;}
.bd .sh-art-nav{display: flex;
justify-content: center;
margin: 40px 0 0;}
.bd .sh-art-back{display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 30px;
font-size: 14.5px;
font-weight: 600;
color: #fff;
text-decoration: none;
background: #222222;
border-radius: 999px;
transition: background .2s;}
.bd .sh-art-back:hover{background: #222222;}
.bd .sh-art-rel{margin: 54px 0 0;
padding-top: 34px;
border-top: 1px solid #e2e3ea;}
.bd .sh-page .sh-art-rel h2{margin: 0 0 20px !important;
padding: 0;
border: 0;
font-size: 20px;
font-weight: 700 !important;
letter-spacing: -.4px;
color: #222222;}
@media only screen and (max-width: 690px){
.bd .sh-page .sh-art h2.sh-art-t{font-size: 23px;}
.bd .sh-page .sh-art-body p{font-size: 15.5px; line-height: 1.9;}
.bd .sh-art-fig{margin: 22px auto;}
.bd .sh-art-embed{margin: 22px auto;}
.bd .sh-art-fig.is-group{flex-direction: column; align-items: center;}
.bd .sh-art-fig.is-group img{max-width: 100%;}
.bd .sh-art-quote{padding: 16px 18px;}
.bd .sh-art-src a{margin-left: 0;}
}
.bd .sh-art-src a .sh-art-ext{display: inline-block;
width: 13px; height: 13px;
margin-left: 5px;
vertical-align: -1px;
background: currentColor;
-webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 11.8 11.8 4.2M6.2 4.2h5.6v5.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 11.8 11.8 4.2M6.2 4.2h5.6v5.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
transition: transform .25s;}
.bd .sh-art-src a:hover .sh-art-ext{transform: translate(2px, -2px);}
.bd .sh-rv{max-width: 1290px; margin: 0 auto;}
.bd .sh-rv-tabs{display: flex; flex-wrap: wrap; justify-content: center; gap: 0 30px; margin: 0 0 22px;}
.bd .sh-rv-tabs button{position: relative; display: inline-block; padding: 4px 0; margin: 10px 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font-family: inherit;
font-size: 20px; letter-spacing: -1px; line-height: 1.4; color: #464646; text-decoration: none !important; transition: color .2s;}
.bd .sh-rv-tabs button::after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: #242424;
transform: scaleX(0); transform-origin: left; transition: transform .25s;}
.bd .sh-rv-tabs button:hover{color: #242424;}
.bd .sh-rv-tabs button.active{font-weight: 600; color: #242424;}
.bd .sh-rv-tabs button.active::after{transform: scaleX(1);}
.bd .sh-rv .sh-rv-count{margin: 0 0 18px !important; padding: 0 !important; font-size: 14px; line-height: 1.6; color: #7d7286; text-align: right;}
.bd .sh-rv .sh-rv-count b{font-family: "Roboto", sans-serif; font-weight: 600; color: #222222;}
.bd .sh-rv-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 25px; align-items: stretch;}
/* 셀피후기 목록의 묶음 제목(사진 후기 N건 · 글 후기 N건) — 옛 /ko/ 쪽