/* ============================================================
   pages.css — 서브페이지 공용 (style.css 뒤에 로드)
   /location/ /designers/ /cut/ /perm/ /color/ /clinic/ /faq/ /gallery/
   ============================================================ */

/* 서브페이지 헤더: 히어로가 없으므로 항상 진한 배경 */
.header--solid{
  background:rgba(26,18,13,.96);
  padding:16px 0;
  box-shadow:0 8px 30px rgba(0,0,0,.2);
}
.nav a.is-current{opacity:1;color:var(--copper-light);}

/* 페이지 헤드 */
.page-head{
  background:var(--espresso);
  color:var(--cream-text);
  padding:150px 0 70px;
  position:relative;
  overflow:hidden;
}
.page-head::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,rgba(177,96,47,.18),transparent 55%);
}
.page-head .container{position:relative;z-index:1;}
.page-head .section-eyebrow{margin-bottom:14px;}
.page-head h1{
  font-family:var(--font-display-kr);
  font-weight:700;
  font-size:clamp(30px,4.2vw,46px);
  line-height:1.35;
  margin-bottom:16px;
}
.page-head__sub{max-width:640px;font-size:15px;opacity:.82;line-height:1.8;}
.breadcrumb{
  margin-top:28px;
  font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:1.5px;
  color:var(--brass);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.breadcrumb a{color:var(--brass);}
.breadcrumb a:hover{color:var(--copper-light);}
.breadcrumb .sep{opacity:.5;}

/* 밝은 섹션 */
.section--light{background:var(--paper);color:var(--ink);padding:100px 0;}
.section--paper2{background:var(--paper-2);color:var(--ink);padding:100px 0;}
.section--dark{background:var(--espresso);color:var(--cream-text);padding:100px 0;}
.section--dark .section-title{color:var(--cream-text);}
.sec-head{margin-bottom:44px;}
.sec-head .section-sub{margin-top:14px;font-size:15px;opacity:.75;max-width:600px;}

/* 찾아오는 길 단계 */
.route-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.route-card{
  background:var(--paper);
  border:1px solid rgba(138,113,72,.35);
  padding:36px 30px;
  position:relative;
}
.route-card__tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--copper);
  display:block;margin-bottom:16px;
}
.route-card h3{
  font-family:var(--font-display-kr);font-size:20px;font-weight:700;margin-bottom:12px;
}
.route-card p{font-size:14px;line-height:1.8;color:#4a4039;}
.route-card strong{color:var(--copper);font-weight:600;}
.route-card ul{list-style:none;margin-top:10px;}
.route-card li{font-size:13.5px;line-height:1.8;padding-left:14px;position:relative;color:#4a4039;}
.route-card li::before{content:"·";position:absolute;left:0;color:var(--copper);}

/* 디자이너 */
.designer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px;}
.designer-card{
  background:var(--paper);
  border:1px solid var(--brass);
  padding:12px;
  display:grid;grid-template-rows:auto 1fr;
}
.designer-card__photo{
  aspect-ratio:4/5;
  overflow:hidden;
  position:relative;
  background:linear-gradient(160deg,var(--espresso-3),var(--espresso-2));
}
.designer-card__photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.96);}
.designer-card__photo--pending{
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;
  color:var(--brass);
}
.designer-card__photo--pending .initial{
  font-family:var(--font-display-en);font-size:96px;font-weight:500;line-height:1;color:var(--copper);opacity:.85;
}
.designer-card__photo--pending .pending-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:2.5px;opacity:.7;
}
.designer-card__body{padding:30px 22px 26px;}
.designer-card__role{
  font-family:var(--font-mono);font-size:11px;letter-spacing:2.5px;color:var(--copper);margin-bottom:12px;display:block;
}
.designer-card h3{
  font-family:var(--font-display-kr);font-size:26px;font-weight:700;line-height:1.3;margin-bottom:6px;
}
.designer-card h3 small{font-size:14px;font-weight:400;color:var(--brass);margin-left:8px;font-family:var(--font-body);}
.designer-card__field{font-size:14px;color:var(--copper);font-weight:500;margin-bottom:18px;}
.designer-card__desc{font-size:14px;line-height:1.85;color:#4a4039;margin-bottom:22px;}
.designer-card__tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.designer-card__tags span{
  font-size:12px;padding:6px 12px;border:1px solid rgba(138,113,72,.5);color:var(--brass);
}
.designer-card__actions{display:flex;gap:12px;flex-wrap:wrap;}

/* 시술별 추천 디자이너 표 */
.match-table{width:100%;border-collapse:collapse;font-size:14.5px;}
.match-table th,.match-table td{padding:18px 16px;text-align:left;border-bottom:1px solid rgba(138,113,72,.3);}
.match-table th{
  font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--copper);font-weight:500;
}
.match-table td:last-child{font-weight:600;}

/* 예약 배너 */
.booking-banner{
  background:var(--copper);
  color:#fff;
  padding:80px 0;
  text-align:center;
}
.booking-banner h2{
  font-family:var(--font-display-kr);font-size:clamp(24px,3.2vw,34px);font-weight:700;line-height:1.5;margin-bottom:16px;
}
.booking-banner p{font-size:14.5px;opacity:.9;margin-bottom:30px;}
.booking-banner .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn--white{background:#fff;color:var(--copper);border-color:#fff;}
.btn--white:hover{background:var(--paper);}
.btn--outline-light{color:#fff;border-color:rgba(255,255,255,.7);}
.btn--outline-light:hover{background:rgba(255,255,255,.14);}

/* FAQ 아코디언 (공용) */
.faq-list details{
  border-bottom:1px solid rgba(138,113,72,.35);
}
.faq-list summary{
  cursor:pointer;list-style:none;
  padding:22px 40px 22px 0;
  font-family:var(--font-display-kr);font-size:17px;font-weight:700;
  position:relative;
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-family:var(--font-display-en);font-size:24px;color:var(--copper);font-weight:400;
}
.faq-list details[open] summary::after{content:"−";}
.faq-list .faq-a{padding:0 0 24px;font-size:14.5px;line-height:1.85;color:#4a4039;}

/* 확장 푸터 */
.footer__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:13px;}
.footer__nav a{color:rgba(239,230,216,.7);}
.footer__nav a:hover{color:var(--copper-light);}
.footer__sns{display:flex;justify-content:center;gap:18px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:1.5px;}
.footer__sns a{color:var(--brass);}
.footer__sns a:hover{color:var(--copper-light);}
.footer__biz{font-size:12px;line-height:1.8;opacity:.55;}

/* 모바일 하단 고정바 (전화 / 네이버 예약 / 인스타 DM) */
.fixed-bar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:1200;
  background:rgba(26,18,13,.97);
  border-top:1px solid rgba(138,113,72,.4);
  backdrop-filter:blur(8px);
}
.fixed-bar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:11px 6px calc(11px + env(safe-area-inset-bottom));
  color:var(--cream-text);font-size:11.5px;letter-spacing:.3px;
}
.fixed-bar a svg{width:20px;height:20px;}
.fixed-bar a.primary{background:var(--copper);color:#fff;}
@media (max-width:820px){
  .fixed-bar{display:flex;}
  body{padding-bottom:64px;}
  .route-grid,.designer-grid{grid-template-columns:1fr;}
  .page-head{padding:120px 0 56px;}
  .section--light,.section--paper2,.section--dark{padding:70px 0;}
}
@media (max-width:640px){
  .match-table th,.match-table td{padding:14px 10px;font-size:13.5px;}
}

/* FAQ 분류 점프 */
.faq-jump{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px;}
.faq-jump a{
  font-size:13px;padding:9px 18px;border:1px solid rgba(138,113,72,.5);color:var(--brass);
  font-family:var(--font-mono);letter-spacing:1px;transition:all .25s;
}
.faq-jump a:hover{background:var(--espresso);color:var(--cream-text);border-color:var(--espresso);}
.faq-group{margin-bottom:72px;scroll-margin-top:100px;}
.faq-group:last-child{margin-bottom:0;}

/* 생활권별 오시는 길 */
.area-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.area-card{
  background:var(--paper);border:1px solid rgba(138,113,72,.35);padding:34px 30px;
}
.area-card__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--copper);display:block;margin-bottom:14px;}
.area-card h3{font-family:var(--font-display-kr);font-size:21px;font-weight:700;margin-bottom:10px;}
.area-card p{font-size:14px;line-height:1.85;color:#4a4039;}
.area-card p strong{color:var(--copper);font-weight:600;}
@media (max-width:820px){ .area-grid{grid-template-columns:1fr;} }

/* 네이버 예약 혜택 박스 (홈 예약안내) */
.benefit-box{
  margin-top:56px;
  background:var(--espresso);
  color:var(--cream-text);
  padding:56px 48px;
  position:relative;overflow:hidden;
}
.benefit-box::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 100% 0%,rgba(177,96,47,.22),transparent 55%);}
.benefit-box > *{position:relative;z-index:1;}
.benefit-box__head h3{font-family:var(--font-display-kr);font-size:clamp(22px,2.6vw,28px);font-weight:700;line-height:1.45;margin-bottom:10px;}
.benefit-box__sub{font-size:14px;opacity:.75;margin-bottom:34px;}
.benefit-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:18px 40px;margin-bottom:28px;}
.benefit-list li{display:flex;flex-direction:column;gap:4px;padding-left:18px;border-left:2px solid var(--copper);}
.benefit-list strong{font-size:17px;font-weight:600;color:#fff;}
.benefit-list span{font-size:13.5px;opacity:.7;}
.benefit-box__note{font-size:12px;opacity:.55;margin-bottom:26px;}
.menu__deal-name small{font-size:11.5px;color:var(--brass);margin-left:6px;font-weight:400;}
@media (max-width:820px){ .benefit-box{padding:40px 26px;} .benefit-list{grid-template-columns:1fr;} }