/* ============================================================
   시술별 상세 페이지 (service.php)
   메인 사이트(style-v4.css)의 색·폰트 변수를 그대로 쓴다.
   ============================================================ */

.svc-body{background:var(--white,#fff);color:var(--ink,#1c1c1c);}

/* ── 헤더 ──────────────────────────────────────────────
   메인(style-v4.css)의 헤더는 "히어로 위에 겹치는" 전제로 만들어져 있다.
     · body 에 topbar(40px) 만큼 padding-top, .header{top:40px}
     · 스크롤 전(.header:not(.scrolled))에는 어두운 그라데이션 + 흰 글자,
       그리고 컬러 로고를 숨김
   상세페이지에는 topbar 도 히어로도 없어서 그대로 두면
   흰 배경 위에 흰 글자가 나오고 로고가 사라진다.
   그래서 여기서는 "항상 스크롤된 상태"처럼 보이게 되돌린다.
   (main-v4.js 가 scrollY<=20 이면 scrolled 를 떼므로 클래스에 기댈 수 없어,
    :not(.scrolled) 보다 높은 특이도로 덮어쓴다) */
.svc-body{padding-top:0;}
.svc-body .header{top:0;}
.svc-body .header:not(.scrolled){
	background:rgba(255,255,255,.96);
	backdrop-filter:blur(10px);
	box-shadow:0 1px 0 var(--line,#ebebeb);
}
.svc-body .header:not(.scrolled) .nav a{color:var(--ink-2,#555);}
.svc-body .header:not(.scrolled) .nav a:hover{color:var(--pink,#e8547a);}
.svc-body .header:not(.scrolled) .nav-cta{color:#fff;}
.svc-body .header:not(.scrolled) .menu-toggle span{background:var(--ink,#1c1c1c);}
.svc-body .header .logo-white{display:none;}
.svc-body .header:not(.scrolled) .logo-color,
.svc-body .header.scrolled .logo-color{display:block;}

.svc-main{padding-top:68px;}   /* 헤더 높이(.header-inner 68px) 만큼 */
.svc-wrap{max-width:940px;margin:0 auto;padding:0 22px;}

/* ── 이동 경로 ── */
.svc-crumb{max-width:940px;margin:0 auto;padding:18px 22px 0;
	font-size:13px;color:var(--ink-3,#888);}
.svc-crumb a{color:var(--ink-3,#888);text-decoration:none;}
.svc-crumb a:hover{color:var(--pink,#e8547a);}
.svc-crumb span{margin:0 7px;color:#ccc;}
.svc-crumb strong{color:var(--ink,#1c1c1c);font-weight:600;}

/* ── 상단 ── */
.svc-hero{position:relative;margin:18px 0 0;min-height:340px;
	background-size:cover;background-position:center;display:flex;align-items:center;}
.svc-hero::after{content:'';position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.55) 100%);}
.svc-hero-in{position:relative;z-index:1;max-width:940px;margin:0 auto;
	padding:56px 22px;width:100%;color:#fff;}
.svc-en{display:inline-block;font-size:12px;letter-spacing:.28em;
	color:rgba(255,255,255,.85);font-weight:600;margin-bottom:12px;}
.svc-h1{font-size:36px;font-weight:800;line-height:1.25;margin:0 0 14px;
	color:#fff;letter-spacing:-.01em;}
.svc-lead{font-size:16px;line-height:1.75;color:rgba(255,255,255,.92);margin:0 0 26px;}

/* ── 버튼 ── */
.svc-cta{display:flex;gap:10px;flex-wrap:wrap;}
.svc-btn{display:inline-block;padding:13px 26px;border-radius:6px;
	font-size:14.5px;font-weight:600;text-decoration:none;
	border:1px solid rgba(255,255,255,.55);color:#fff;transition:.2s;}
.svc-btn:hover{background:rgba(255,255,255,.14);}
.svc-btn.primary{background:var(--pink,#e8547a);border-color:var(--pink,#e8547a);color:#fff;}
.svc-btn.primary:hover{background:#d6446a;}

/* ── 본문 ── */
.svc-sec{padding:56px 0;}
.svc-sec-alt{background:var(--off,#fafafa);}
.svc-h2{font-size:24px;font-weight:800;color:var(--ink,#1c1c1c);
	margin:0 0 20px;letter-spacing:-.01em;}
.svc-intro{font-size:15.5px;line-height:1.95;color:var(--ink-2,#555);margin:0 0 34px;}
.svc-intro b{color:var(--ink,#1c1c1c);font-weight:700;}

/* 진행 항목 */
.svc-points{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
.svc-point{display:flex;gap:14px;align-items:flex-start;
	background:#fff;border:1px solid var(--line,#ebebeb);border-radius:10px;padding:20px;}
.svc-num{flex:0 0 30px;width:30px;height:30px;border-radius:50%;
	background:var(--pink-pale,#fdf0f3);color:var(--pink,#e8547a);
	font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.svc-point h3{font-size:15.5px;font-weight:700;margin:2px 0 7px;color:var(--ink,#1c1c1c);}
.svc-point p{font-size:14px;line-height:1.7;color:var(--ink-2,#555);margin:0;}

/* 자주 묻는 질문 */
.svc-faq{display:flex;flex-direction:column;gap:10px;}
.svc-q{background:#fff;border:1px solid var(--line,#ebebeb);border-radius:10px;
	padding:16px 18px;}
.svc-q summary{font-size:15px;font-weight:700;color:var(--ink,#1c1c1c);
	cursor:pointer;list-style:none;position:relative;padding-right:26px;}
.svc-q summary::-webkit-details-marker{display:none;}
.svc-q summary::after{content:'+';position:absolute;right:2px;top:-2px;
	font-size:20px;color:var(--pink,#e8547a);font-weight:400;}
.svc-q[open] summary::after{content:'−';}
.svc-q p{font-size:14.5px;line-height:1.85;color:var(--ink-2,#555);margin:12px 0 2px;}

/* 다른 시술 */
.svc-others{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.svc-other{position:relative;min-height:130px;border-radius:10px;overflow:hidden;
	background-size:cover;background-position:center;text-decoration:none;
	display:flex;flex-direction:column;justify-content:flex-end;padding:16px;}
.svc-other::after{content:'';position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.62) 100%);transition:.2s;}
.svc-other:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.72) 100%);}
.svc-other .so-en,.svc-other strong{position:relative;z-index:1;color:#fff;}
.svc-other .so-en{font-size:11px;letter-spacing:.22em;opacity:.85;margin-bottom:4px;}
.svc-other strong{font-size:16px;font-weight:700;}

/* 하단 유도 */
.svc-bottom{background:var(--pink-pale,#fdf0f3);padding:52px 0;text-align:center;}
.svc-bottom h2{font-size:22px;font-weight:800;color:var(--ink,#1c1c1c);margin:0 0 12px;}
.svc-bottom p{font-size:14.5px;line-height:1.8;color:var(--ink-2,#555);margin:0 0 22px;}
.svc-bottom .svc-cta{justify-content:center;}
.svc-bottom .svc-btn{border-color:#d8b8c2;color:var(--ink,#1c1c1c);}
.svc-bottom .svc-btn:hover{background:#fff;}
.svc-bottom .svc-btn.primary{border-color:var(--pink,#e8547a);color:#fff;}

/* 푸터 */
.svc-foot{text-align:center;padding:28px 0;}
.svc-foot p{font-size:13px;line-height:1.9;color:var(--ink-2,#555);margin:0;}
.svc-copy{color:var(--ink-3,#888) !important;font-size:12px !important;margin-top:8px !important;}

/* ── 모바일 ── */
@media (max-width:820px){
	.svc-points,.svc-others{grid-template-columns:1fr;}
	.svc-h1{font-size:27px;}
	.svc-hero{min-height:280px;}
	.svc-hero-in{padding:44px 22px;}
	.svc-sec{padding:42px 0;}
	.svc-h2{font-size:20px;}
	.svc-btn{padding:12px 20px;font-size:14px;}
}