@charset "UTF-8";
/* =========================================================
   Salut, Mind 상담심리센터 — styles.css
   시안(main2.jpg) 기준 퍼블리싱
   ========================================================= */

:root{
  --green:      #3eb026;
  --green-dark: #4F8F26;
  --green-mid:  #62B02F;
  --orange:     #EE8A2C;
  --orange-dark:#E07C1E;
  --cream:   #F4EFE3;   /* 서비스 섹션 배경 */
  --form-bg: #F7F5EF;   /* 문의 섹션 배경 */
  --ink:     #2B2B2B;   /* 푸터 */
  --text:    #333333;
  --muted:   #8A8A8A;
  --line:    #E7E3D8;
  --serif: "Georgia", "Times New Roman", "Nanum Myeongjo", serif;
  --sans:  "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
           "Malgun Gothic", "맑은 고딕", sans-serif;
  --maxw: 1440px;
  --header-h: 88px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:#fff;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

.container{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:#fff;
  border-bottom:1px solid #f0f0f0;
  transition:background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* 히어로가 있는 페이지 : 최상단에서는 투명 오버레이 */
body:has(.hero, .sub-hero) .site-header{
  background:transparent;
  border-bottom-color:transparent;
}
/* GNB 텍스트 흰색은 데스크톱 전용 (모바일은 흰 배경 패널이라 적용 금지) */
@media (min-width:769px){
  body:has(.hero, .sub-hero) .site-header:not(.is-scrolled) .gnb-top{ color:#fff; }
}
/* 햄버거 : 히어로 위에서는 흰색, 메뉴 열리면(=헤더 불투명) 다시 어둡게 */
body:has(.hero, .sub-hero) .site-header:not(.is-scrolled) .nav-toggle span{ background:#fff; }
body:has(.hero, .sub-hero) .site-header:not(.is-scrolled):has(.gnb.open) .nav-toggle span{ background:#333; }

/* 스크롤 시 : 배경 등장 (모바일 메뉴 열림 시에도 불투명) */
body:has(.hero, .sub-hero) .site-header.is-scrolled,
.site-header:has(.gnb.open){
  background:#fff;
  border-bottom-color:#f0f0f0;
  box-shadow:0 4px 18px rgba(0,0,0,.06);
}


.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  height:var(--header-h);
  padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:inline-flex; align-items:center; }
.brand-img{ height:55px; width:auto; }

/* 로고 전환 : 최상단(투명 헤더)=logo_w.png / 스크롤 후(흰 헤더)=logo.png
   ※ 반드시 .brand-img 정의보다 뒤에 위치할 것 (순서 뒤바뀌면 로고 2개 노출) */
.brand-img--w{ display:none; }
.brand-img--c{ display:block; }

body:has(.hero, .sub-hero) .site-header:not(.is-scrolled) .brand-img--w{ display:block; }
body:has(.hero, .sub-hero) .site-header:not(.is-scrolled) .brand-img--c{ display:none; }

/* 모바일 메뉴가 열리면 헤더가 흰 배경이 되므로 컬러 로고로 되돌림 */
body:has(.hero, .sub-hero) .site-header:not(.is-scrolled):has(.gnb.open) .brand-img--w{ display:none; }
body:has(.hero, .sub-hero) .site-header:not(.is-scrolled):has(.gnb.open) .brand-img--c{ display:block; }

/* GNB 공통 구조 (데스크톱/모바일 공유) */
.gnb-list{
  display:flex; align-items:center; gap:44px;
  list-style:none; margin:0; padding:0;
}
.gnb-item{ position:relative; }
.gnb-top{
  display:block;
  position:relative;
  font-size: 20px;
  font-weight:600;
  color:#3a3a3a;
  transition:color .2s;
}
.gnb-sub{ list-style:none; margin:0; padding:0; }
.gnb-sub a{
  display:block; color:#555;
  transition:background .18s, color .18s;
}

/* ===== 데스크톱(769px 이상) : 호버 드롭다운 (모바일엔 절대 적용되지 않음) ===== */
@media (min-width:769px){
  .gnb-top{ padding:32px 2px; }
  .gnb-top::after{
    content:""; position:absolute; left:0; bottom:0;
    width:0; height:3px; background:var(--green); transition:width .25s;
  }
  .gnb-item:hover > .gnb-top{ color:var(--green); }
  .gnb-item:hover > .gnb-top::after{ width:100%; }

  .gnb-sub{
    position:absolute; top:100%; left:50%;
    transform:translateX(-50%) translateY(10px);
    min-width:190px; padding:10px 0;
    background:#fff; border-radius:10px;
    box-shadow:0 14px 34px rgba(40,40,30,.13);
    opacity:0; visibility:hidden;
    transition:opacity .22s, transform .22s, visibility .22s; z-index:120;
  }
  .gnb-item:hover > .gnb-sub{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .gnb-sub a{padding:11px 22px;font-size: 18px;white-space:nowrap;text-align:center;}
  .gnb-sub a:hover{ background:var(--cream); color:var(--green); }
}

.nav-toggle{
  display:none; flex-direction:column; gap:5px;
  width:40px; height:40px; align-items:center; justify-content:center;
}
.nav-toggle span{
  width:24px; height:2px; background:#333; border-radius:2px;
  transition:.25s;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  height:100vh;
  min-height:560px; max-height:760px;
  overflow:hidden;
  color:#fff;
}
.hero-slides{ position:absolute; inset:0; }
.hero-slide{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(30,45,20,.42), rgba(30,45,20,.05) 55%), var(--bg);
  background-color:#6c8a52;
  background-size:cover;
  background-position:center;
  opacity:0; transition:opacity 1.1s ease;
  z-index:0;
}
.hero-slide.is-active{ opacity:1; z-index:1; }

.hero-inner{
  position:relative; z-index:2;
  max-width:var(--maxw); height:100%;
  margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; justify-content:center;
}
.hero-rule{
  width:140px; height:2px; background:rgba(255,255,255,.85);
  margin-bottom:38px;
}
.hero-title{
  font-size:56px; font-weight:800; line-height:1.28;
  margin:0 0 26px; letter-spacing:-1px;
  text-shadow:0 2px 18px rgba(0,0,0,.28);
}
.hero-desc{
  font-size:20px; font-weight:400; margin:0;
  text-shadow:0 1px 12px rgba(0,0,0,.32);
}

.hero-dots{
  position:absolute; right:40px; top:50%; transform:translateY(-50%);
  z-index:3; display:flex; flex-direction:column; gap:14px;
}
.hero-dots .dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.45); transition:.25s;
}
.hero-dots .dot.is-active{
  background:#fff; transform:scale(1.35);
}

/* =========================================================
   SERVICES
   ========================================================= */
.services{
  position:relative;
  background:var(--cream);
  padding:96px 0 110px;
  overflow:hidden;
}
/* 배경 장식 곡선 */
.services::before,
.services::after{
  content:""; position:absolute; border-radius:50%;
  background:rgba(255,255,255,.35); pointer-events:none;
}
.services::before{ width:520px; height:520px; right:-160px; top:60px; }
.services::after{ width:360px; height:360px; left:-140px; bottom:-120px; background:rgba(95,168,46,.06); }

/* 섹션 헤더 : 좌측 타이틀 + 우측 화살표 */
.services-head{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin:0 0 44px;
}
.sec-head{
  font-size:30px; font-weight:800; color:#222;
  margin:0;
}
.sec-head-en{
  font-size:18px; font-weight:700; letter-spacing:3px;
  color:#b9b3a3; margin-left:6px;
}
/* 우측 상단 좌/우 화살표 (kpds .btn-arrow 스타일) */
.carousel-nav{ display:flex; gap:10px; }
.cnav-btn{
  width:48px; height:48px; border-radius:50%;
  background:#fff; color:#333;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(60,50,30,.10);
  transition:background .18s, color .18s, transform .18s, box-shadow .18s;
}
.cnav-btn:hover{ background:var(--green); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(60,120,30,.28); }
.cnav-btn:disabled{ opacity:.35; cursor:default; }
.cnav-btn:disabled:hover{ background:#fff; color:#333; transform:none; box-shadow:0 4px 14px rgba(60,50,30,.10); }

/* 캐러셀 컨테이너 (화살표 + 가로 스크롤 트랙) */
.service-carousel{ position:relative; z-index:1; }
.service-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 24px * 3) / 4);   /* 4개 = gap 3번 */
  gap:24px;
  overflow-x:auto; overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;                              /* 카드 hover 그림자 여유 */
  scrollbar-width:none;                            /* 스크롤바 숨김 (Firefox) */
}
.service-track::-webkit-scrollbar{ display:none; } /* Chrome/Safari */
.service-track .service-card{
  scroll-snap-align:start;
  min-width:0;                                     /* grid overflow 방지 */
}

/* 하단 페이지 도트 */
.carousel-dots{
  display:flex; justify-content:center; gap:8px;
  margin-top:32px;
}
.carousel-dots .cdot{
  width:8px; height:8px; border-radius:50%;
  background:rgba(60,50,30,.18);
  transition:background .2s, transform .2s, width .2s;
  cursor:pointer;
}
.carousel-dots .cdot.is-active{
  background:var(--green); width:22px; border-radius:6px;
}

.service-card{
  background:#fff; border-radius:6px;
  padding:34px 28px 26px;
  display:flex; flex-direction:column;
  box-shadow:0 8px 30px rgba(60,50,30,.06);
  transition:transform .25s, box-shadow .25s;
}
.service-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(60,50,30,.12);
}
.pill{
  align-self:center;
  display:inline-block;
  padding: 4px 27px;
  border-radius:999px;
  font-size: 16px;
  font-weight:700;
  color:#fff;
  margin-bottom:22px;
}
.pill-green{ background:var(--green-mid); }
.pill-orange{ background:var(--orange); }

.service-title{
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  color:#222;
  margin:0 0 18px;
  word-break:keep-all;
  min-height:54px;
}
.service-body{
  font-size: 16px;
  color: #555;
  line-height: 1.2;
  margin:0 0 14px;
  word-break:keep-all;
}
.service-link{
  margin-top:auto; padding-top:20px;
  font-size:14px; color:#999; font-weight:500;
  transition:color .2s;
}
.service-link:hover{ color:var(--green); }

/* =========================================================
   ABOUT
   ========================================================= */
.about{
  background-color:var(--green);                          /* 폴백 : 배경 레이어 미로드 시 그린 유지 */
  color:#fff;
  padding:120px 0 124px;                                  /* 캠페인 밴드처럼 상하 여유 */
  position:relative; overflow:hidden;
}
/* 고정 배경 레이어 : kpds 캠페인식 패럴랙스 (스크롤 시 콘텐츠만 이동, 배경은 고정) */
.about-bg{
  position:absolute; inset:0; z-index:0;
  background-color:var(--green);                          /* 폴백 : 이미지 미로드/실패해도 그린 유지 */
  background-image:url('../images/about_bg.jpg');
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-attachment:scroll;                           /* 모바일/터치 기본 (iOS Safari fixed 버그 예방) */
}
/* 배경 위 그린 오버레이 (텍스트 가독성 확보 + 이미지 은은하게 노출) */
.about-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(50,105,25,.86) 0%, rgba(78,143,38,.64) 55%, rgba(95,168,46,.42) 100%);
}
/* 우측 장식 이미지 */
.about::before{
  content:"";
  position:absolute;
  right:6%;
  top:50%;
  width: 1310px;
  height: 509px;
  background:url('../images/about_bg.png') no-repeat center center;
  background-size:contain;
  transform:translateY(-50%);
  z-index:1;
}
/* 데스크톱(마우스 환경)에서만 배경 고정 → 패럴랙스. iOS/터치 기기는 위 scroll 폴백 사용 */
@media (min-width:769px) and (pointer:fine){
  .about-bg{ background-attachment:fixed; }
}
.about-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.about-text{ max-width:640px; }
.about-eyebrow{
  font-size:22px; font-weight:700; margin:0 0 34px;
}
.about-eyebrow span{
  font-size:18px; font-weight:700; letter-spacing:3px;
  color:rgba(255,255,255,.6); margin-left:12px;
}
.about-title{
  font-size:42px; font-weight:800; letter-spacing:-1px;
  margin:0 0 26px;
}
.about-desc{
  font-size:17px; line-height:1.85; color:rgba(255,255,255,.92);
  margin:0 0 34px;
}
.about-btn{
  display:inline-block;
  background:#fff; color:#333;
  font-size:16px; font-weight:700;
  padding:15px 40px; border-radius:999px;
  transition:transform .2s, box-shadow .2s;
}
.about-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.15);
}
.about-art{ flex:0 0 460px; max-width:46%; }
.about-art svg{ width:100%; height:auto; }

/* =========================================================
   INQUIRY
   ========================================================= */
.inquiry{
  background:var(--form-bg);
  padding:88px 0 96px;
}
.inquiry-head{
  text-align:center; font-size:32px; font-weight:800;
  color:#222; margin:0 0 6px;
}
.inquiry-en{
  text-align:center; font-size:15px; letter-spacing:4px;
  color:#b7b7b7; margin:0 0 48px;
}
.inquiry-form{ max-width:920px; margin:0 auto; }

.form-row{ display:flex; gap:20px; margin-bottom:18px; }
.field{
  flex:1; display:flex; align-items:stretch;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  overflow:hidden;
}
.field-full{ width:100%; }
.field-label{
  flex:0 0 96px;
  display:flex; align-items:center; justify-content:center;
  background:#f1efe8; color:#555;
  font-size:15px; font-weight:600;
}
.field-label-top{ align-items:flex-start; padding-top:16px; }
.field input,
.field select,
.field textarea{
  flex:1; width:100%; border:none; outline:none;
  padding:16px 18px; font-size:15px; font-family:inherit; color:#333;
  background:#fff;
}
.field textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.field input::placeholder,
.field textarea::placeholder{ color:#b3b3b3; }
.field select{ color:#333; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field:focus-within{ border-color:var(--green); }

.agree{
  display:flex; align-items:center; justify-content:center;
  gap:8px; font-size:14px; color:#666; margin:28px 0 24px;
  flex-wrap:wrap;
}
.agree input{ width:16px; height:16px; accent-color:var(--green); }
.agree-link{ color:var(--green-dark); text-decoration:underline; margin-left:4px; }

.inquiry-submit-wrap{ text-align:center; }
.btn-submit{
  background:var(--green); color:#fff;
  font-size:17px; font-weight:700;
  padding:16px 60px; border-radius:999px;
  transition:background .2s, transform .2s;
}
.btn-submit:hover{ background:var(--green-dark); transform:translateY(-2px); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--ink); color:#cfcfcf;
  padding:56px 0 40px; position:relative;
}
.footer-inner{ position:relative; }
.footer-nav{
  display:flex; gap:28px; font-size:14px; margin-bottom:30px;
}
.footer-nav a{ color:#bdbdbd; transition:color .2s; }
.footer-nav a:hover{ color:#fff; }
.footer-nav .is-accent{ color:var(--green-mid); font-weight:600; }

.footer-brand{ display:inline-flex; align-items:center; margin-bottom:26px; }
.footer-brand-img{ display:block; height:55px; width:auto; }

.footer-info p{ margin:0 0 10px; font-size:14px; color:#a8a8a8; line-height:1.7; }
.footer-info strong{ color:#e6e6e6; font-weight:700; margin-right:6px; }
.footer-info .gap{ display:inline-block; width:22px; }
.copyright{ margin-top:20px !important; font-size:13px; color:#7c7c7c; }

/* 플로팅 버튼 */
.floating{
  position:fixed; right:28px; bottom:34px; z-index:90;
  display:flex; flex-direction:column; gap:12px; align-items:center;
}
.fab{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .2s, opacity .3s;
}
.fab:hover{ transform:translateY(-3px); }
.fab-chat{ background:#4b4b4b; }
.fab-top{ background:var(--green); }
.fab-top.hidden{ opacity:0; pointer-events:none; }

/* 서브페이지 / 게시판 공통 컨테이너 (메인 외 페이지에서 head.php 가 자동 적용) */
.sub-wrap{
  padding-top:calc(var(--header-h) + 60px);
  padding-bottom:80px;
  min-height:46vh;
}

/* =========================================================
   SUB PAGE — 히어로 · 브레드크럼 · 본문
   ========================================================= */

/* 서브 히어로 */
.sub-hero{
  position:relative;
  min-height: 500px;
  background:#7a8f52 center/cover no-repeat;
  color:#fff;
  overflow:hidden;
}
.sub-hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(20,35,15,.35) 0%, rgba(20,35,15,.12) 55%, rgba(20,35,15,0) 100%);
}
.sub-hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding: 180px 24px 196px;
}
.sub-hero-title{
  font-size:56px; font-weight:800; letter-spacing:-1px;
  margin:0 0 26px; line-height:1.2;
  text-shadow:0 2px 14px rgba(0,0,0,.22);
}
.sub-hero-desc{
  font-size:18px; margin:0;
  color:rgba(255,255,255,.94);
  text-shadow:0 1px 10px rgba(0,0,0,.28);
}

/* 브레드크럼 */
/* 브레드크럼 (kpds 스타일 : 홈 + 커스텀 드롭다운) */
.breadcrumb{
  position:relative; z-index:2;
  max-width:var(--maxw); margin:-32px auto 0;
  padding:0 24px;
}
.breadcrumb-inner{
  display:flex; align-items:stretch;
  background:#fff;
  box-shadow:0 12px 30px rgba(30,40,20,.10);
  max-width:420px;
  height:56px;
}
.bc-home{
  display:flex; align-items:center; justify-content:center;
  width:60px; flex:0 0 60px;
  background:var(--green); color:#fff;
  transition:background .18s;
}
.bc-home:hover{ background:var(--green-dark); }

/* 커스텀 드롭다운 */
.bc-item{
  position:relative; flex:1;
  min-width:0;
}
.bc-toggle{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 22px;
  font-size: 19px;
  font-weight:600;
  color:#333;
  background:#fff;
  border:none;
  cursor:pointer;
  text-align:left;
  letter-spacing:-.2px;
  transition:color .18s;
}
.bc-toggle:hover{ color:var(--green); }
.bc-toggle .bc-caret{
  flex:0 0 auto;
  width:12px; height:12px;
  border-right:2px solid #888;
  border-bottom:2px solid #888;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .25s, border-color .18s;
}
.bc-toggle:hover .bc-caret{ border-color:var(--green); }
.bc-item.is-open .bc-toggle .bc-caret{
  transform:rotate(-135deg) translateY(2px);
  border-color:var(--green);
}
.bc-toggle-label{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1;
}

/* 드롭다운 리스트 */
.bc-menu{
  position:absolute; top:100%; left:0; right:0;
  background:#fff;
  border:1px solid #e5e5e5; border-top:none;
  box-shadow:0 14px 30px rgba(30,40,20,.15);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s, transform .22s, visibility .22s;
  z-index:10; list-style:none; margin:0; padding:6px 0;
  max-height:0; overflow:hidden;
}
.bc-item.is-open .bc-menu{
  opacity:1; visibility:visible; transform:translateY(0);
  max-height:400px; overflow:auto;
}
.bc-menu a{
  display:block;
  padding:12px 22px;
  font-size: 18px;
  color:#555;
  font-weight:500;
  transition:background .15s, color .15s;
}
.bc-menu a:hover{ background:#f7f5ef; color:var(--green); }
.bc-menu a.is-current{
  color:var(--green); font-weight:700;
  background:#f4f5ee;
}

/* 서브 본문 */
.sub-body{ padding:90px 0 110px; position:relative; }
.sub-lead{
  text-align:center;
  font-size:36px; font-weight:700;
  color:#222; letter-spacing:-1.5px; line-height:1.5;
  margin:0 0 18px;
  word-break:keep-all;
}
.sub-lead-desc{
  text-align:center;
  font-size:20px; color:#666; line-height:1.6;
  margin:0 0 60px;
  word-break:keep-all;
}

/* --- 오시는 길 : 지점 카드 --- */
.branch-list{ display:flex; flex-direction:column; gap:60px; }
.branch{ display:grid; gap:24px; }
.branch-map{
  border-radius:2px; overflow:hidden;
  box-shadow:0 8px 24px rgba(30,40,20,.08);
  background:#eaeadf; min-height:220px; position:relative;
}
.branch-map img{ display:block; width:100%; height:auto; object-fit:cover; }
.branch-map-canvas{ width:100%; height:380px; }
.map-authfail{
  display:flex; align-items:center; justify-content:center; text-align:center;
  width:100%; height:100%; min-height:220px;
  color:#777; font-size:15px; line-height:1.6;
}
.map-links{
  position:absolute; right:20px; bottom:20px;
  display:flex; gap:10px;
}
.map-link{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#333; font-size:13px; font-weight:600;
  padding:10px 16px; border-radius:6px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .18s, box-shadow .18s;
}
.map-link:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.18); }
.map-link .dot{ width:16px; height:16px; border-radius:50%; display:inline-block; }
.map-link .dot-kakao{ background:#FFCD00; }
.map-link .dot-naver{ background:#03C75A; }

.branch-info{
  display:grid; grid-template-columns:200px 1fr; align-items:start;
  gap:16px 30px; padding:6px 4px 0;
}
.branch-name{
  font-size:30px; font-weight:800; color:#222;
  margin:0; letter-spacing:-.3px; line-height:1.3;
}
.branch-detail{ display:flex; flex-direction:column; gap:12px; }
.branch-addr{
  display:flex; align-items:flex-start; gap:10px;
  font-size:20px; font-weight:700; color:#333;
  line-height:1.5;
}
.branch-addr::before{
  content:""; flex:0 0 26px; height:26px; margin-top:2px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235FA82E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
  background-repeat:no-repeat; background-position:center;
  background-size:contain;
}
.branch-addr-text{ flex:1 1 auto; min-width:0; }
.branch-sub{
  display:block;
  margin-top:6px;
  font-size:16px; font-weight:400; color:#888;
  line-height:1.6; word-break:keep-all;
}
.branch-contact{ padding-left:36px; font-size:16px; color:#666; line-height:1.5; }
.branch-contact + .branch-contact{ margin-top:-8px; }   /* 연속된 안내 줄 간격 축소 */
.branch-contact strong{ color:#333; font-weight:700; margin-right:6px; }
.branch-contact .gap{ display:inline-block; width:22px; }

/* =========================================================
   REVIEWS PAGE — 증상 + 플레이스 스타일 리뷰 카드
   ========================================================= */
.cases{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:36px 28px;
}
.case{
  display:flex; flex-direction:column; gap:16px;
}
.case-symptom{
  background:var(--cream);
  border-radius:14px;
  padding:32px 30px 30px;
  position:relative;
}
.case-no{
  display:inline-block;
  font-family:var(--serif);
  font-size:16px; font-weight:800; letter-spacing:2px;
  color:var(--green); margin-bottom:10px;
}
.case-title{
  font-size:28px; font-weight:800; color:#222;
  margin:0 0 16px; letter-spacing:-.5px; line-height:1.45;
  word-break:keep-all;
}
.case-desc{
  font-size:18px; color:#555; line-height:1.7;
  margin:0; word-break:keep-all;
}

/* 플레이스 리뷰 카드 */
.place-review{
  background:#fff; border:1px solid #eaeaea; border-radius:12px;
  padding:20px 22px; position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}
.pr-head{
  display:flex; align-items:center; gap:12px; margin-bottom:12px;
}
.pr-avatar{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--green-mid), var(--green));
  display:flex; align-items:center; justify-content:center;
  flex:0 0 36px;
}
.pr-meta{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.pr-nick{ font-size:16px; font-weight:700; color:#222; }
.pr-stars{ display:inline-flex; gap:1px; align-items:center; }
.pr-badge{
  font-size:12px; font-weight:600; color:#03C75A;
  background:#f0fbf3; padding:5px 10px; border-radius:4px;
  border:1px solid #d6f2e0;
}
.pr-body{
  font-size:18px; color:#333; line-height:1.7;
  margin:0 0 16px; word-break:keep-all;
}
.pr-foot{
  display:flex; align-items:center; padding-top:14px;
  border-top:1px solid #f2f2f2;
}
.pr-visit{
  display:inline-flex; align-items:center; gap:4px;
  font-size:13px; color:#888;
}
.pr-visit svg{ color:var(--green); }

.reviews-notice{
  text-align:center; font-size:15px; color:#999;
  margin:60px 0 0; padding:24px;
  background:#f8f7f2; border-radius:8px;
}

/* =========================================================
   GREETING PAGE — 시안 기반 (탭 + 큰 이미지 + 본문)
   ========================================================= */

/* 페이지 상단 탭 */
.page-tabs{
  display:flex; justify-content:center;
  border-bottom:1px solid #e5e5e5;
  margin:0 0 80px;
}
.page-tab{
  min-width:200px;
  padding:18px 32px;
  font-size:16px; font-weight:600;
  color:#666; text-align:center;
  border-bottom:3px solid transparent;
  transition:color .18s, border-color .18s, background .18s;
}
.page-tab:hover{ color:#222; }
.page-tab.is-active{
  color:#fff; background:#222;
  border-bottom-color:#222;
}

/* 페이지 블록 (탭 하나에 해당하는 콘텐츠 세트) */
.page-block{
  margin:0 0 80px;
}

/* 블록 헤더 : 가운데 정렬 큰 h2 + 짧은 설명 */
.pb-head{
  text-align:center; margin:0 0 48px;
}
.pb-title{
  font-size: 36px;
  font-weight: 700;
  color:#222;
  letter-spacing: -1.5px;
  line-height:1.5;
  margin:0 0 18px;
  word-break:keep-all;
}
.pb-lead{
  font-size: 20px;
  color:#666;
  line-height: 1.6;
  margin:0;
  word-break:keep-all;
}

/* 큰 이미지 */
.pb-figure{
  margin:0 0 56px;
  border-radius:10px;
  overflow:hidden;
  background:none;          /* 배경 컬러 제거 */
  /* aspect-ratio:16/9; */
  position:relative;
}
.pb-figure img{
  width:100%; height:100%; display:block;
  object-fit:cover;
  position:relative; z-index:1;
}

/* 투명 배경 인포그래픽/일러스트용 : 배경·라운드·크롭 제거 */
.pb-figure.is-plain{
  background:none;
  border-radius:0;
  overflow:visible;
}
.pb-figure.is-plain::before{ content:none; }
.pb-figure.is-plain img,
.pb-figure img[src$=".png"]{      /* is-plain 미적용 시에도 확대 방지 (안전장치) */
  display:block;
  width:auto;                    /* 늘리지 않음 (확대 금지) */
  height:auto;
  max-width:min(100%, 1306px);   /* 원본 1306px 상한, 좁은 화면에서만 축소 */
  margin:0 auto;
  object-fit:contain;
}
.pb-figure:has(img[src$=".png"]){ background:none; border-radius:0; overflow:visible; }
.pb-figure picture{ display:block; }   /* <picture> 래퍼가 레이아웃을 막지 않도록 */

/* 본문 (좌측 정렬 h3 + p) */
.pb-body{
  max-width:100%;
}
.pb-h3{
  font-size: 30px;
  font-weight:800;
  color:#222;
  letter-spacing:-.3px;
  margin:0 0 20px;
  padding-top:8px;
}
.pb-body .pb-h3 + p{ margin-top:0; }
.pb-body .pb-h3:not(:first-child){ margin-top:40px; }
.pb-body p{
  font-size: 20px;
  color:#444;
  line-height: 1.6;
  margin:0 0 18px;
  word-break:keep-all;
}
.pb-body p strong{
  color:#222; font-weight:800;
  background:linear-gradient(180deg, transparent 62%, rgba(95,168,46,.22) 62%);
  padding:0 2px;
}
.pb-body p:last-child{ margin-bottom:0; }

/* 블록 사이 구분선 */
.pb-divider{
  border:0; border-top:1px solid #e5e5e5;
  margin:20px 0 80px;
}

/* =========================================================
   상담 상세 페이지 — 고민 칩 · 비용 박스
   (전문상담 / 특화상담 공통 컴포넌트)
   ========================================================= */

/* 고민 칩 리스트 (대상 나열용) */
.chip-list{
  list-style:none; margin:22px 0 8px; padding:0;
  display:flex; flex-wrap:wrap; gap:12px;
}
.chip-list li{
  padding:12px 22px; border-radius:999px;
  background:var(--cream); color:var(--ink);
  font-size:20px; font-weight:600; letter-spacing:-.3px;
  transition:background .18s;
}

/* 비용 안내 박스 */
.cost-box{
  max-width:820px; margin:8px auto 0; padding:44px 48px;
  background:var(--form-bg); border-radius:24px; text-align:center;
}
.cost-title{
  font-size:24px; font-weight:800; letter-spacing:-.6px;
  color:var(--green-dark); margin:0 0 24px;
}
.cost-grid{ margin:0; }
.cost-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 4px; border-bottom:1px solid rgba(0,0,0,.07);
}
.cost-row:last-of-type{ border-bottom:0; }
.cost-row dt{ font-size:17px; font-weight:600; color:#6b6b6b; }
.cost-row dd{ margin:0; font-size:19px; font-weight:600; color:var(--ink); }
.cost-row dd strong{ font-size:22px; font-weight:800; color:var(--green-dark); }
.cost-cta{
  display:inline-block; margin-top:32px; padding:15px 42px;
  background:var(--green); color:#fff; border-radius:999px;
  font-size:17px; font-weight:700;
  transition:background .2s, transform .2s;
}

/* 본문 하단 예약 CTA 래퍼 (심리검사 패키지 등 cost-box 밖에서 사용) */
.pb-cta-wrap{ margin-top:16px; text-align:center; }

/* hover 는 데스크톱에서만 (모바일 sticky hover 방지) */
@media (min-width:769px){
  .chip-list li:hover{ background:#ece5d4; }
  .cost-cta:hover{ background:var(--green-dark); transform:translateY(-2px); }
}

/* =========================================================
   프로세스 단계 (상담과정 · 검사 진행 절차)
   ========================================================= */
.process-steps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin:0;
}
.step-card{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:32px 28px; position:relative;
}
.step-no{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--green); color:#fff;
  font-family:var(--serif); font-size:18px; font-weight:800;
  margin-bottom:18px;
}
.step-title{
  font-size:24px; font-weight:800; color:#222;
  margin:0 0 10px; letter-spacing:-.3px; word-break:keep-all;
}
.step-desc{
  font-size:20px; color:#666; line-height:1.6; margin:0; word-break:keep-all;
}
.step-meta{
  display:inline-block; margin-top:14px;
  font-size:13px; font-weight:700; color:var(--green-dark);
  background:#f4f5ee; padding:5px 12px; border-radius:999px;
}

/* =========================================================
   심리검사 패키지 카드
   ========================================================= */
.pkg-list{ display:flex; flex-direction:column; gap:20px; margin:0; }
.pkg-card{
  background:var(--form-bg); border-radius:20px; padding:32px 36px;
  display:grid; grid-template-columns:1fr auto; gap:20px 28px; align-items:center;
}
.pkg-main{ min-width:0; }
.pkg-name{
  font-size:24px; font-weight:800; color:#222;
  margin:0 0 14px; letter-spacing:-.4px; word-break:keep-all;
}
.pkg-tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0; }
.pkg-tags li{
  font-size:14px; font-weight:600; color:var(--green-dark);
  background:#fff; border:1px solid #e2e6d6; border-radius:999px; padding:6px 14px;
}
.pkg-meta{ text-align:right; white-space:nowrap; }
.pkg-time{ font-size:17px; color:#888; margin:0 0 4px; }
.pkg-price{ font-size:24px; font-weight:800; color:var(--green-dark); margin:0; }

/* =========================================================
   안내 리스트 (상담예약 유의사항)
   ========================================================= */
.notice-list{
  list-style:none; margin:0 0 8px; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px 32px;
}
.notice-item{ display:flex; gap:16px; }
.notice-no{
  flex:0 0 auto; font-family:var(--serif);
  font-size:20px; font-weight:800; color:var(--green); line-height:1.5;
}
.notice-body h4{ font-size:24px; font-weight:800; color:#222; margin:0 0 8px; }
.notice-body p{ font-size:20px; color:#666; line-height:1.6; margin:0; word-break:keep-all; }

/* =========================================================
   FAQ 아코디언 (상담예약)
   ========================================================= */
.faq-group{ margin:0 0 44px; }
.faq-group:last-child{ margin-bottom:0; }
.faq-cat{
  font-size:30px; font-weight:800; color:#222;
  margin:0 0 8px; letter-spacing:-.4px;
  display:flex; align-items:center; gap:10px;
}
.faq-cat::before{ content:""; width:6px; height:22px; background:var(--green); border-radius:3px; }
.faq-item{ border-bottom:1px solid #eee; }
.faq-q{
  width:100%; text-align:left;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 4px; font-size:24px; font-weight:600; color:#333;
  background:none; cursor:pointer;
}
.faq-q .faq-icon{
  flex:0 0 auto; width:11px; height:11px; margin-right:4px;
  border-right:2px solid #999; border-bottom:2px solid #999;
  transform:rotate(45deg); transition:transform .25s, border-color .18s;
}
.faq-item.is-open .faq-q{ color:var(--green); }
.faq-item.is-open .faq-q .faq-icon{ transform:rotate(-135deg); border-color:var(--green); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 24px; font-size:20px; color:#666; line-height:1.7; word-break:keep-all; }

/* =========================================================
   상담사 프로필 카드
   ========================================================= */
.profile-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:32px; }
.profile-card{
  background:#fff; border:1px solid var(--line);
  border-radius:20px; overflow:hidden;
}
.profile-photo{ aspect-ratio:4/3; background:linear-gradient(135deg,#eef2e5,#e9efe0); }
.profile-photo img{ width:100%; height:100%; object-fit:cover; }
.profile-info{ padding:28px 30px; }
.profile-name{ font-size:24px; font-weight:800; color:#222; margin:0 0 4px; }
.profile-role{ font-size:15px; color:var(--green-dark); font-weight:700; margin:0 0 16px; }
.profile-desc{ font-size:15px; color:#666; line-height:1.75; margin:0; word-break:keep-all; }

/* 신규 컴포넌트 hover : 데스크톱 전용 */
@media (min-width:769px){
  .step-card{ transition:transform .2s, box-shadow .2s; }
  .step-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(60,50,30,.09); }
}

/* =========================================================
   상담사 상세 프로필 (상담사 소개)
   ========================================================= */
.counselor-list{ display:flex; flex-direction:column; }
.counselor-card{ padding:56px 0; border-top:1px solid var(--line); }
.counselor-card:first-child{ padding-top:8px; border-top:0; }

.counselor-top{ display:flex; gap:40px; align-items:center; margin-bottom:34px; }
.counselor-photo{
  /* flex:0 0 240px; */
  width: 402px;
  aspect-ratio:3/4;
  margin:0;
  border-radius:18px;
  overflow:hidden;
  background:linear-gradient(135deg,#eef2e5,#e6ecdb);
}
.counselor-photo img{ width:100%; height:100%; object-fit:cover; }
.counselor-head{ min-width:0; }
.counselor-name{
  font-size:34px; font-weight:800; color:#222; margin:0; letter-spacing:-.6px;
}
.counselor-name .counselor-role{
  font-size:21px; font-weight:700; color:var(--green-dark); margin-left:8px;
}
.counselor-edu{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:7px; }
.counselor-edu li{ position:relative; padding-left:16px; font-size:18px; color:#666; }
.counselor-edu li::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--green);
}

.counselor-body p{
  font-size:20px; line-height:1.7; color:var(--ink);
  margin:0 0 18px; word-break:keep-all;
}
.counselor-body p:last-child{ margin-bottom:0; }

/* 전문 분야 체크리스트 박스 */
.spec-block{
  background:var(--form-bg); border-radius:18px;
  padding:30px 34px; margin:26px 0;
}
.spec-title{
  font-size:30px; font-weight:800; color:var(--green-dark);
  margin:0 0 18px; letter-spacing:-.3px;
}
.spec-list{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.spec-list li{
  position:relative; padding-left:34px;
  font-size:20px; line-height:1.6; color:var(--ink); word-break:keep-all;
}
.spec-list li::before{
  content:"\2713"; position:absolute; left:0; top:4px;
  width:22px; height:22px; border-radius:50%;
  background:var(--green); color:#fff;
  font-size:12px; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.spec-list li strong{ color:#2c2c2c; font-weight:800; }

/* =========================================================
   상담예약 (reservation)
   ========================================================= */
.rsv-intro{ text-align:center; }
.rsv-hours{
  display:inline-block; margin:0 0 22px;
  font-size:18px; font-weight:700; color:var(--green-dark);
}
.rsv-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.rsv-cta a{
  display:inline-flex; align-items:center; gap:8px;
  padding:15px 34px; border-radius:999px;
  font-size:17px; font-weight:700; text-decoration:none;
  transition:background .2s, transform .2s;
}
.rsv-cta .cta-call{ background:var(--green); color:#fff; }
.rsv-cta .cta-online{ background:#fff; color:var(--green-dark); border:1.5px solid var(--green); }

/* 탭 */
.rsv-tabs{ display:flex; max-width:920px; margin:0 auto; }
.rsv-tab{
  flex:1; padding:18px; font-size:18px; font-weight:700;
  background:#f1efe8; color:#8a8a80; cursor:pointer; border:none;
  border-radius:12px 12px 0 0;
}
.rsv-tab.is-active{ background:var(--green); color:#fff; }

/* 폼 박스 */
.rsv-form{
  max-width:920px; margin:0 auto;
  background:#faf9f5; border:1px solid var(--line); border-top:none;
  border-radius:0 0 14px 14px; padding:38px 40px;
}
.rsv-panel{ display:none; }
.rsv-panel.is-active{ display:block; }

.rsv-field{ margin-bottom:22px; }
.rsv-two{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.rsv-label{ display:block; font-size:15px; font-weight:700; color:#444; margin-bottom:10px; }
.rsv-label .req{ color:var(--green); }
.rsv-label .req-desc{ font-size:13px; font-weight:500; color:#999; margin-left:4px; }
.rsv-input{
  width:100%; border:1px solid var(--line); border-radius:6px;
  padding:14px 16px; font-size:15px; font-family:inherit; color:#333; background:#fff;
}
.rsv-input:focus{ outline:none; border-color:var(--green); }
textarea.rsv-input{ min-height:120px; resize:vertical; line-height:1.6; }

/* 칩 선택 (라디오/체크박스) */
.chip-opts{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-opt{ cursor:pointer; margin:0; }
.chip-opt input{ position:absolute; opacity:0; width:0; height:0; }
.chip-opt span{
  display:inline-block; padding:11px 20px; border-radius:999px;
  border:1.5px solid var(--line); background:#fff;
  font-size:15px; font-weight:600; color:#555; transition:.15s;
}
.chip-opt input:checked + span{ background:var(--green); border-color:var(--green); color:#fff; }
.chip-opt input:focus-visible + span{ box-shadow:0 0 0 3px rgba(95,168,46,.25); }

/* 시간대 그리드 */
.timeslot .chip-opts{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.timeslot .chip-opt span{ display:block; text-align:center; padding:12px 8px; }

/* 동의 · 제출 */
.rsv-agree{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:8px; font-size:14px; color:#666; margin:30px 0 24px;
}
.rsv-agree input{ width:16px; height:16px; accent-color:var(--green); }
.rsv-submit{ text-align:center; }

@media (min-width:769px){
  .rsv-cta .cta-call:hover{ background:var(--green-dark); transform:translateY(-2px); }
  .rsv-cta .cta-online:hover{ background:#f4f5ee; }
  .chip-opt:hover input:not(:checked) + span{ border-color:var(--green); color:var(--green-dark); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .service-grid{ grid-template-columns:repeat(2,1fr); }
  .service-track{ grid-auto-columns:calc((100% - 24px) / 2); }  /* 태블릿: 2개 */
  .service-title{ min-height:auto; }
  .about-art{ flex-basis:340px; }
  .hero-title{ font-size:46px; }
  .sub-hero-title{ font-size:44px; }
  .branch-info{ grid-template-columns:170px 1fr; }
}

@media (max-width:768px){
  :root{ --header-h:70px; }

  .brand-img{ height:38px; }
  .footer-brand-img{ height:34px; }

  .gnb{
    position:absolute; top:var(--header-h); left:0; right:0;
    background:#fff; border-bottom:1px solid #eee;
    max-height:0; overflow:hidden; overflow-y:auto;
    transition:max-height .32s ease;
  }
  .gnb.open{ max-height:calc(100vh - var(--header-h)); box-shadow:0 12px 24px rgba(0,0,0,.08); }
  .gnb-list{ flex-direction:column; align-items:stretch; gap:0; padding:4px 0; }
  .gnb-item{ width:100%; border-bottom:1px solid #f1f1f1; }
  .gnb-top{ padding:16px 24px; font-size:16px; color:#333; }

  /* 펼침 화살표 (모바일 전용, 데스크톱 밑줄과 미디어쿼리로 완전 분리) */
  .gnb-top::after{
    content:""; position:absolute; right:22px; top:50%; left:auto; bottom:auto;
    width:9px; height:9px; margin-top:-6px; background:none;
    border-right:2px solid #b3b3b3; border-bottom:2px solid #b3b3b3;
    transform:rotate(45deg); transition:transform .25s;
  }
  .gnb-item.open > .gnb-top{ color:var(--green); }
  .gnb-item.open > .gnb-top::after{ margin-top:-2px; border-color:var(--green); transform:rotate(-135deg); }

  /* 서브: 아코디언 (기본 접힘, .open 일 때만 펼침) */
  .gnb-sub{
    background:#f7f7f4; max-height:0; overflow:hidden;
    transition:max-height .32s ease;
  }
  .gnb-item.open > .gnb-sub{ max-height:420px; }
  .gnb-sub a{ padding:14px 24px 14px 40px; font-size:15px; color:#5a5a5a; text-align:left; }
  .gnb-sub a:active{ background:#ebeee7; }
  .nav-toggle{ display:flex; }

  .hero{ min-height:480px; }
  .hero-rule{ width:90px; margin-bottom:24px; }
  .hero-title{ font-size:32px; margin-bottom:18px; }
  .hero-desc{ font-size:16px; }
  .hero-dots{ right:18px; }

  .services{ padding:64px 0 72px; }
  .services-head{ margin-bottom:24px; }
  .sec-head{ font-size:22px; }
  .sec-head-en{ font-size:13px; letter-spacing:2px; }
  .cnav-btn{ width:40px; height:40px; }
  .service-grid{ grid-template-columns:1fr; gap:18px; }
  .service-track{
    grid-auto-columns:calc(100% - 40px);  /* 모바일: 1개 + 다음 카드 살짝 */
    gap:14px;
    scroll-padding-left:0;
    padding-right:40px;                    /* 마지막 카드 스냅 여유 */
  }
  .carousel-dots{ margin-top:22px; }

  /* ABOUT (모바일) */
  .about{padding: 75px 0 60px;}
  .about::before{                      /* 우측 장식 이미지 : 모바일은 하단 우측 작은 악센트로 */
    width: 521px;
    height: 256px;
    right:-10px;
    top: 42%;
    bottom:16px;
    transform:none;
  }
  .about-inner{ flex-direction:column; align-items:flex-start; gap:0; }
  .about-text{ max-width:100%; position:relative; z-index:2; }
  .about-eyebrow{ font-size:16px; margin-bottom:18px; }
  .about-eyebrow span{ display:block; margin:6px 0 0; letter-spacing:1.5px; }
  .about-title{ font-size:27px; letter-spacing:-.6px; margin:0 0 18px; }
  .about-desc{ font-size:14.5px; line-height:1.75; margin:0 0 26px; }
  .about-desc br{ display:none; }
  .about-btn{ font-size:14.5px; padding:13px 32px; }

  .inquiry{ padding:60px 0 68px; }
  .inquiry-head{ font-size:26px; }
  .form-row{ flex-direction:column; gap:14px; }
  .field{ flex-direction:column; }
  .field-label{
    flex-basis:auto; justify-content:flex-start;
    padding:12px 16px; background:#f1efe8;
  }
  .field-label-top{ padding-top:12px; }

  .footer-info br{ display:none; }
  .footer-info .gap{ display:block; height:2px; width:auto; }
  .floating{ right:16px; bottom:20px; }
  .fab{ width:46px; height:46px; }

  /* 서브페이지 공통 */
  .sub-hero{ min-height:320px; }
  .sub-hero-inner{ padding:120px 20px 90px; }
  .sub-hero-title{ font-size:32px; margin-bottom:16px; }
  .sub-hero-desc{ font-size:14px; }
  .breadcrumb{ margin-top:-24px; padding:0 16px; }
  .breadcrumb-inner{ max-width:100%; height:48px; }
  .bc-home{ width:48px; flex-basis:48px; }
  .bc-toggle{ padding:0 16px; font-size:14px; }
  .bc-menu a{ padding:11px 16px; font-size:13.5px; }
  .sub-body{ padding:56px 0 72px; }
  .sub-lead{ font-size:22px; letter-spacing:-.8px; line-height:1.5; margin-bottom:14px; }
  .sub-lead-desc{ font-size:14px; margin-bottom:40px; }
  .sub-lead-desc br{ display:none; }

  /* 오시는 길 */
  .branch-list{ gap:44px; }
  .branch-map-canvas{ height:280px; }
  .branch-info{ grid-template-columns:1fr; gap:12px; padding:0; }
  .branch-name{ font-size:20px; }
  .branch-addr{ font-size:15px; }
  .branch-addr::before{ flex-basis:20px; height:20px; }
  .branch-contact{ padding-left:30px; font-size:13.5px; }
  .map-links{ right:12px; bottom:12px; gap:6px; }
  .map-link{ padding:8px 12px; font-size:12px; }

  /* 리뷰 페이지 */
  .cases{ grid-template-columns:1fr; gap:28px; }
  .case-symptom{ padding:24px 22px 22px; border-radius:10px; }
  .case-no{ font-size:13px; margin-bottom:8px; }
  .case-title{ font-size:18px; margin-bottom:12px; }
  .case-desc{ font-size:14px; line-height:1.7; }
  .place-review{ padding:18px 20px; }
  .pr-nick{ font-size:14px; }
  .pr-badge{ font-size:11px; padding:4px 8px; }
  .pr-body{ font-size:14.5px; line-height:1.7; }
  .pr-visit{ font-size:12px; }
  .reviews-notice{ margin-top:44px; font-size:13px; padding:18px; }

  /* 인사말 페이지 (시안 기반) */
  .page-tabs{ margin-bottom:52px; }
  .page-tab{
    flex:1; min-width:0;
    padding:14px 8px; font-size:13.5px;
  }
  .page-block{ margin-bottom:60px; }
  .pb-head{ margin-bottom:32px; }
  .pb-title{ font-size:22px; }
  .pb-lead{ font-size:14px; }
  .pb-lead br{ display:none; }
  .pb-figure{ margin-bottom:36px; border-radius:6px; }
  .pb-h3{ font-size:17px; margin-bottom:14px; }
  .pb-body .pb-h3:not(:first-child){ margin-top:32px; }
  .pb-body p{ font-size:14.5px; }
  .pb-divider{ margin:0 0 60px; }

  /* 상담 상세 : 칩 · 비용 박스 */
  .chip-list{ gap:8px; margin:18px 0 6px; }
  .chip-list li{ font-size:15px; padding:9px 16px; }
  .cost-box{ padding:32px 22px; border-radius:18px; }
  .cost-title{ font-size:19px; margin-bottom:20px; }
  .cost-row{ padding:13px 2px; }
  .cost-row dt{ font-size:14px; }
  .cost-row dd{ font-size:15px; }
  .cost-row dd strong{ font-size:17px; }
  .cost-cta{ font-size:15px; padding:13px 34px; }
  .cost-cta:active{ background:var(--green-dark); }

  /* 프로세스 단계 */
  .process-steps{ grid-template-columns:1fr; gap:16px; }
  .step-card{ padding:24px 22px; border-radius:12px; }
  .step-no{ width:38px; height:38px; font-size:16px; margin-bottom:14px; }
  .step-title{ font-size:18px; }
  .step-desc{ font-size:14.5px; }
  .step-meta{ font-size:12px; }

  /* 검사 패키지 카드 */
  .pkg-card{ grid-template-columns:1fr; gap:16px; padding:24px 22px; border-radius:14px; }
  .pkg-name{ font-size:18px; margin-bottom:12px; }
  .pkg-tags li{ font-size:12.5px; padding:5px 11px; }
  .pkg-meta{ text-align:left; }
  .pkg-time{ font-size:13px; }
  .pkg-price{ font-size:19px; }

  /* 안내 리스트 */
  .notice-list{ grid-template-columns:1fr; gap:20px; }
  .notice-no{ font-size:17px; }
  .notice-body h4{ font-size:18px; }
  .notice-body p{ font-size:14.5px; }

  /* FAQ */
  .faq-cat{ font-size:20px; }
  .faq-cat::before{ height:18px; }
  .faq-q{ padding:18px 2px; font-size:16.5px; gap:12px; }
  .faq-a-inner{ font-size:14.5px; padding:0 2px 20px; }

  /* 프로필 카드 */
  .profile-list{ grid-template-columns:1fr; gap:22px; }
  .profile-info{ padding:22px 22px; }
  .profile-name{ font-size:19px; }
  .profile-role{ font-size:13.5px; margin-bottom:12px; }
  .profile-desc{ font-size:13.5px; }

  /* 상담사 상세 프로필 */
  .counselor-card{ padding:40px 0; }
  .counselor-top{ flex-direction:column; align-items:flex-start; gap:22px; margin-bottom:26px; }
  .counselor-photo{flex-basis:auto;width: 100%;border-radius:14px;}
  .counselor-name{ font-size:26px; }
  .counselor-name .counselor-role{ font-size:16px; }
  .counselor-edu li{ font-size:13.5px; }
  .counselor-body p{ font-size:14.5px; line-height:1.75; margin-bottom:15px; }
  .spec-block{ padding:22px 20px; margin:20px 0; border-radius:14px; }
  .spec-title{ font-size:19px; margin-bottom:14px; }
  .spec-list{ gap:11px; }
  .spec-list li{ font-size:14.5px; padding-left:30px; }
  .spec-list li::before{ width:19px; height:19px; font-size:11px; }

  /* 상담예약 (모바일) */
  .rsv-hours{ font-size:15px; }
  .rsv-cta{ gap:10px; }
  .rsv-cta a{ font-size:15px; padding:13px 24px; }
  .rsv-tab{ font-size:15px; padding:14px; }
  .rsv-form{ padding:26px 20px; }
  .rsv-two{ grid-template-columns:1fr; gap:0; }
  .rsv-label{ font-size:14px; }
  .rsv-input{ font-size:14px; padding:13px 14px; }
  .chip-opt span{ font-size:13.5px; padding:9px 15px; }
  .timeslot .chip-opts{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .timeslot .chip-opt span{ padding:11px 6px; }
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
  .hero-slide{ transition:none; }
}


/* =========================================================
   CIRCLE STEPS — 원형 단계 인포그래픽 (심리검사 진행절차)
   ========================================================= */
.circle-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-top:48px;
}
.cstep{
  flex:0 1 300px;
  min-width:0;
}
.cstep-circle{
  position:relative;
  width:100%;
  max-width:300px;
  aspect-ratio:1 / 1;
  margin:0 auto;
  border-radius:50%;
  border:7px solid #dcdcdc;
  background:#fff;
  box-sizing:border-box;
  padding:28px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.cstep.is-accent .cstep-circle{ border-color:var(--green); }

.cstep-icon{
  display:block;
  margin-bottom:16px;
  color:var(--ink);
  line-height:0;
}
.cstep-icon svg{ width:52px; height:52px; }

.cstep-title{
  font-size:24px;
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
  margin:0 0 10px;
  letter-spacing:-0.5px;
  word-break:keep-all;
}
.cstep-desc{
  font-size:16px;
  line-height:1.55;
  color:#8a8a8a;
  margin:0;
  word-break:keep-all;
}

/* 단계 사이 화살표 */
.cstep-arrow{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  color:#2b2b2b;
}
.cstep-arrow svg{ width:24px; height:24px; }

@media (max-width:1180px){
  .circle-steps{ flex-wrap:wrap; gap:28px 0; }
  .cstep{ flex:0 0 calc(50% - 22px); }
  .cstep-arrow:nth-of-type(2){ display:none; }   /* 줄바꿈 지점 화살표 숨김 */
}
@media (max-width:768px){
  .circle-steps{ gap:24px 0; margin-top:32px; }
  .cstep{ flex:0 0 calc(50% - 14px); }
  .cstep-circle{ padding:18px 20px; border-width:5px; }
  .cstep-icon{ margin-bottom:10px; }
  .cstep-icon svg{ width:34px; height:34px; }
  .cstep-title{ font-size:16.5px; margin-bottom:6px; }
  .cstep-desc{ font-size:13px; }
  .cstep-arrow{ width:28px; }
  .cstep-arrow svg{ width:16px; height:16px; }
}


/* 패키지 하단 단독 CTA (심리검사 예약 등) */
.pkg-cta-wrap{
  margin-top:36px;
  text-align:center;
}


/* =========================================================
   MODAL — 공통 모달 (개인정보 수집·이용 동의 등)
   ========================================================= */
.sm-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.sm-modal[hidden]{ display:none; }

.sm-modal-dim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.45);
}
.sm-modal-panel{
  position:relative;
  width:100%; max-width:640px;
  max-height:calc(100vh - 48px);
  background:#fff;
  border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.22);
  display:flex; flex-direction:column;
  overflow:hidden;
}

.sm-modal-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:24px 28px;
  border-bottom:1px solid #eee;
}
.sm-modal-title{
  font-size:22px; font-weight:800;
  color:var(--ink);
  letter-spacing:-.5px;
  margin:0;
}
.sm-modal-close{
  flex:0 0 auto;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:0; background:none; cursor:pointer;
  color:#888; border-radius:8px;
}

.sm-modal-body{
  padding:24px 28px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  font-size:16px; line-height:1.7;
  color:#444;
}
.sm-modal-body h3{
  font-size:17px; font-weight:800;
  color:var(--ink);
  margin:24px 0 8px;
}
.sm-modal-body h3:first-child{ margin-top:0; }
.sm-modal-body p{ margin:0 0 12px; word-break:keep-all; }
.sm-modal-body ul{ margin:0 0 12px; padding-left:18px; }
.sm-modal-body li{ margin-bottom:6px; word-break:keep-all; }

.sm-modal-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  padding:18px 28px;
  border-top:1px solid #eee;
  background:var(--form-bg);
}
.sm-modal-link{
  font-size:15px;
  color:#777;
  text-decoration:underline;
}
.sm-modal-ok{
  border:0; cursor:pointer;
  padding:12px 32px;
  border-radius:999px;
  background:var(--green); color:#fff;
  font-size:15px; font-weight:700;
}

/* 동의문 안의 '자세히' 를 button 으로 바꿨으므로 링크처럼 보이게 */
button.agree-link{
  border:0; background:none; padding:0;
  cursor:pointer;
  font:inherit; color:inherit;
  text-decoration:underline;
}

@media (min-width:769px){
  .sm-modal-close:hover{ background:#f2f2f2; color:#333; }
  .sm-modal-ok:hover{ background:var(--green-dark); }
}
@media (max-width:768px){
  .sm-modal{ padding:16px; }
  .sm-modal-panel{ max-height:calc(100vh - 32px); border-radius:12px; }
  .sm-modal-head{ padding:18px 20px; }
  .sm-modal-title{ font-size:18px; }
  .sm-modal-body{ padding:18px 20px; font-size:14.5px; }
  .sm-modal-body h3{ font-size:15.5px; margin-top:20px; }
  .sm-modal-foot{ padding:14px 20px; }
  .sm-modal-link{ font-size:13px; }
  .sm-modal-ok{ padding:11px 24px; font-size:14px; }
}


/* 본문 가운데 정렬 (완료 페이지 등) */
.pb-body.is-center{ text-align:center; }
.pb-body.is-center p{ word-break:keep-all; }