/* VLAT Barber Shop — 서비스 상세 페이지 공용 스타일
   본 사이트(index.html)의 D9 모노크롬 토큰을 그대로 따릅니다. */
:root{
  --black:#0D0D0D; --white:#FFFFFF; --off:#F5F5F5;
  --gray:#8A8A8A; --line:#E3E3E3;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--white); color:var(--black);
  font-family:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  font-size:16px; line-height:1.7;
}
.serif{font-family:'Playfair Display',serif}
::selection{background:var(--black);color:var(--white)}
:focus-visible{outline:2px solid var(--black);outline-offset:3px}
.wrap{max-width:860px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ── 헤더 ── */
header{border-bottom:1px solid var(--line);background:var(--white)}
.nav{
  display:flex;align-items:center;gap:18px;
  max-width:1160px;margin:0 auto;padding:16px clamp(18px,4vw,40px);
}
.logo{font-weight:800;font-size:.82rem;letter-spacing:.14em;text-decoration:none;color:var(--black)}
.nav ul{display:flex;gap:26px;list-style:none;margin:0 auto;font-size:.85rem}
.nav ul a{color:var(--black);text-decoration:none;padding-bottom:5px;font-weight:500;position:relative}
.nav ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--black);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
.nav ul a:hover::after{transform:scaleX(1)}
@media(max-width:720px){.nav ul li:nth-child(n+3){display:none}}

/* ── 히어로 ── */
.s-hero{background:var(--black);color:var(--white);padding:clamp(48px,8vw,84px) 0}
.s-hero h1{
  font-family:'Playfair Display',serif;font-weight:500;
  font-size:clamp(1.75rem,4.2vw,2.7rem);line-height:1.3;
}
.s-hero .lede{color:#BDBDBD;font-size:.98rem;margin-top:18px;max-width:52ch}
.s-hero .price{margin-top:22px;font-size:.9rem;font-weight:700;letter-spacing:.06em}
.crumb{font-size:.75rem;color:#8F8F8F;margin-bottom:20px}
.crumb a{color:#8F8F8F;text-decoration:none}
.crumb a:hover{color:#fff}

/* ── 본문 ── */
main section{padding:clamp(44px,7vw,72px) 0}
main section + section{border-top:1px solid var(--line)}
h2{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(1.4rem,3vw,1.9rem);margin-bottom:8px;
}
.h2-ko{font-size:.8rem;color:var(--gray);letter-spacing:.1em;margin-bottom:24px}
h3{font-size:1.02rem;font-weight:700;margin:26px 0 8px}
p{margin-bottom:14px}
p:last-child{margin-bottom:0}
ul.plain{list-style:none;margin:12px 0}
ul.plain li{padding-left:16px;position:relative;margin-bottom:8px;font-size:.95rem}
ul.plain li::before{content:"—";position:absolute;left:0;color:var(--gray)}
.note{
  background:var(--off);border-left:2px solid var(--black);
  padding:16px 18px;font-size:.9rem;margin:22px 0;
}

/* ── 표 ── */
.tbl-scroll{overflow-x:auto;margin:20px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.88rem}
th,td{border:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top}
thead th{background:var(--off);font-weight:700}
tbody th{font-weight:600;background:#FAFAFA;white-space:nowrap}

/* ── FAQ ── */
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:.96rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+ ";color:var(--gray)}
.faq details[open] summary::before{content:"− "}
.faq details p{margin-top:12px;font-size:.93rem;color:#444}

/* ── CTA ── */
.cta-sec{background:var(--black);color:var(--white);text-align:center}
.cta-sec h2{color:var(--white)}
.cta-sec p{color:#BDBDBD;font-size:.92rem}
.btn-row{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.btn{
  display:inline-block;text-decoration:none;font-size:.88rem;font-weight:600;
  padding:13px 26px;transition:filter .2s,background .2s,color .2s;
}
.btn-white{background:var(--white);color:var(--black)}
.btn-white:hover{filter:brightness(.92)}
.btn-outline{border:1px solid var(--white);color:var(--white)}
.btn-outline:hover{background:var(--white);color:var(--black)}

/* ── 연관 시술 ── */
.rel{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
@media(max-width:620px){.rel{grid-template-columns:1fr}}
.rel a{
  border:1px solid var(--line);padding:18px;text-decoration:none;color:var(--black);
  transition:background .2s,color .2s;
}
.rel a:hover{background:var(--black);color:var(--white)}
.rel strong{display:block;font-size:.96rem;margin-bottom:4px}
.rel span{font-size:.82rem;color:var(--gray)}
.rel a:hover span{color:#BDBDBD}

.more{margin-top:18px;font-size:.86rem}
.more a{color:var(--black);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.more a:hover{border-color:var(--black)}

/* ── 허브 카드 ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:20px}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.cards a{
  display:flex;flex-direction:column;
  border:1px solid var(--line);padding:22px;text-decoration:none;color:var(--black);
  transition:background .2s,color .2s;
}
.cards a:hover{background:var(--black);color:var(--white)}
.cards strong{display:block;font-size:1rem;margin-bottom:10px}
.cards span{font-size:.85rem;color:var(--gray);line-height:1.65;flex:1}
.cards em{
  display:block;margin-top:16px;font-style:normal;
  font-size:.82rem;font-weight:700;letter-spacing:.05em;
}
.cards a:hover span{color:#BDBDBD}

/* ── 푸터 ── */
footer{background:var(--black);color:#CFCFCF;margin-top:0}
.f-logo{
  font-weight:800;font-size:.82rem;letter-spacing:.14em;color:var(--white);
  text-align:center;padding:36px 20px 18px;
}
.f-legal{text-align:center;font-size:.78rem;color:#8F8F8F;padding:0 20px 26px;line-height:1.9}
.f-bar{
  border-top:1px solid #2A2A2A;font-size:.75rem;color:#8F8F8F;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:16px clamp(18px,4vw,40px);max-width:1160px;margin:0 auto;
}