/* ══════════════════════════════════════════
   DESIGN TOKENS (Maintained Original Style) test
══════════════════════════════════════════ */
:root {
  --c-bg:      #f7f3ec;
  --c-ivory:   #fdfaf5;
  --c-cream:   #ede8dd;
  --c-sage:    #3d5c35;
  --c-sage-lt: #73916b;
  --c-sage-xs: rgba(61,92,53,0.08);
  --c-earth:   #7a5c38;
  --c-ink:     #1a1a18;
  --c-muted:   #6b6560;
  --c-border:  rgba(61,92,53,0.14);
  --c-white:   #ffffff;

  --f-display: 'Nanum Myeongjo', 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Noto Sans KR', 'DM Sans', sans-serif;

  --shadow-sm: 0 2px 12px rgba(26,26,24,0.07);
  --shadow-md: 0 8px 40px rgba(26,26,24,0.1);
  --t: 0.38s cubic-bezier(0.4,0,0.2,1);

  --edit-ring: 2px dashed rgba(196,154,30,0.8);
  --edit-fill: rgba(255,240,120,0.18);
}

/* ══════════════════════════════════════════
Font style
══════════════════════════════════════════ */
.nanum-gothic-regular {
  font-family: "Nanum Gothic", sans-serif;
  font-weight: 400;
  font-style: normal;
}


/* ══════════════════════════════════════════
   BASE RESET
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--c-bg);
  color: var(--c-ink);
  overflow-x: hidden;
  line-height: 1.7;
}
img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: var(--f-body); }

/* ══════════════════════════════════════════
   ADMIN BAR
══════════════════════════════════════════ */
#admin-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  height: 48px;
  background: var(--c-ink);
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  letter-spacing: 0.03em;
  gap: 16px;
}
#admin-bar.on { display: flex; }
body.edit-mode { padding-top: 48px; }
body.edit-mode nav { top: 48px; }
/* 관리자 모드일 때 지도 박스 스타일 */
body.edit-mode #e-map-link {
  cursor: edit;
  position: relative;
}
body.edit-mode #e-map-link::after {
  content: '🔗 URL 수정 (클릭)';
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--c-sage);
  color: white;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 4px;
  z-index: 10;
}
.ab-badge {
  background: var(--c-sage); color: #fff;
  padding: 2px 10px; border-radius: 99px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  flex-shrink: 0;
}
.ab-hint { opacity: 0.5; font-size: 12px; }
.ab-actions { display: flex; gap: 10px; margin-left: auto; }
.ab-btn {
  padding: 5px 16px;
  border-radius: 3px;
  font-size: 12px;
  letter-spacing: 0.05em;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: #fff;
  transition: background var(--t);
}
.ab-btn:hover { background: rgba(255,255,255,0.18); }
.ab-btn.save {
  background: var(--c-sage);
  border-color: var(--c-sage);
}
.ab-btn.save:hover { background: var(--c-sage-lt); }

.fg  { display: flex; flex-direction: column; gap: 7px; }
.fg label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-sage); font-weight: 500;
}
.fg input, .fg textarea, .fg select {
  width: 100%; padding: 12px 15px;
  background: var(--c-ivory);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  font-family: var(--f-body); font-size: 15px; color: var(--c-ink);
  outline: none; appearance: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--c-sage);
  box-shadow: 0 0 0 3px rgba(61,92,53,0.1);
}
.fg textarea { height: 130px; resize: vertical; }

/* ══════════════════════════════════════════
   NAVIGATION
══════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 6vw;
  transition: background var(--t), padding var(--t), box-shadow var(--t);
  background: rgba(255, 255, 255, 0.94);
}
nav.stuck {
  background: rgba(247,243,236,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 13px 6vw;
  box-shadow: 0 1px 0 var(--c-border);
}

.nav-brand {
  display: flex; align-items: center; gap: 6px;

  font-family: var(--f-display);
  font-size: clamp(13px, 4vw, 21px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-ink); 
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.nav-logo {
  height: 7vw;
  width : auto;
  object-fit: contain;
}

.nav-brand span { color: var(--c-sage); }

.nav-list {
  display: flex; gap: 34px; list-style: none; align-items: center;
  font-family: nanum-gothic-regular, var(--f-body);

}
.nav-list a {
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink); opacity: 0.65;
  transition: opacity var(--t);
  position: relative;
}
.nav-list a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; right: 100%;
  height: 1px; background: var(--c-sage);
  transition: right var(--t);
}
.nav-list a:hover { opacity: 1; }
.nav-list a:hover::after { right: 0; }

.nav-mgr {
  font-size: 12px !important; opacity: 1 !important;
  background: var(--c-ink); color: #fff !important;
  padding: 8px 18px; border-radius: 2px;
  transition: background var(--t) !important;
}
.nav-mgr:hover { background: var(--c-sage) !important; }


.burger {
  display: none; 
  flex-direction: column; 
  gap: 5px;
  background: none; 
  border: none; 
  padding: 4px;
  position: relative;  
  z-index: 1000;       
}

.burger span { 
width: 22px; height: 1.5px; background: var(--c-ink); display: block; 
transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.burger.active span:nth-child(2) {
  opacity: 0;
}
.burger.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 760px) {
  .burger { display: flex; }
   .burger.active {
    position: fixed;    
    right: max(6vw, 16px);        
    top: 22px;          
  }

   body.edit-mode .burger.active {
    top: 70px;          
  }

  .nav-list {
    position: fixed; top: 0; right: -100%; width: 270px; height: 100vh;
    background: var(--c-ivory); flex-direction: column; justify-content: center;
    gap: 28px; padding: 48px 36px;
    box-shadow: -6px 0 28px rgba(0,0,0,0.08);
    transition: right var(--t); z-index: 799;
  }
  .nav-list.open { right: 0; }
}

/* ══════════════════════════════════════════
   SHARED UTILITIES
══════════════════════════════════════════ */
.wrap { max-width: 1340px; margin: 30vw auto; padding: 0 6vw;  }
.wrap.main-section{ max-width: 1340px; margin-top: 4vw; margin-bottom: 4vw; padding: 0 6vw;  }
.sec-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c-sage); font-weight: 500; margin-bottom: 16px;
}
.sec-tag::before { content: ''; width: 28px; height: 1px; background: var(--c-sage); }
.sec-h {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.5vw, 62px);
  font-weight: 700; line-height: 2.4; word-break: keep-all;
}
.sec-h em { font-style: normal; color: var(--c-sage-lt); font-weight: 600; font-family: nanum-gothic-regular, var(--f-body); }
.sec-sub { font-size: 16px; line-height: 1.85; color: var(--c-muted); font-weight: 300; word-break: keep-all; text-align: center; }

 .sr { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.sr.in { opacity: 1; transform: translateY(0); }
.sr.d1 { transition-delay: 0.1s; }
.sr.d2 { transition-delay: 0.22s; }
.sr.d3 { transition-delay: 0.34s; }

.sr-card{
  /* display: flex; */
  align-items: center;
  margin-bottom: 4vw;
 }

.sr-card .btn-solid {
    display: block;         /* inline-block에서 block으로 변경 */
    width: fit-content;    /* 버튼 내용물 너비만큼만 차지 */
    margin-left: auto;      /* 왼쪽 마진 자동 */
    margin-right: auto;     /* 오른쪽 마진 자동 -> 중앙 배치 */
    margin-top: 20px;
    text-align: center;
 }

.sr-card .diagram-img{
    display: block;         /* inline-block에서 block으로 변경 */
    width: fit-content;    /* 버튼 내용물 너비만큼만 차지 */
    margin-left: auto;      /* 왼쪽 마진 자동 */
    margin-right: auto;     /* 오른쪽 마진 자동 -> 중앙 배치 */
    margin-top: 20px;
    align-items: center;
}

.diagram-img{
  max-width: 60%;
}

#index_procedure-diagram-img{
  max-width: 100%;
}

 .sr-card.center-intro {
    display: flex;
    flex-direction: column; /* 세로로 나열 */
    align-items: center;    /* 가로축 중앙 정렬 */
    margin-bottom: 12px;
}

/* 다이어그램 박스 및 이미지 설정 */
.diagram-box-center {
    width: 50%;            /* 부모 너비의 절반으로 설정 */
    margin: 12vw auto 0;   /* 위쪽 마진 20px, 좌우 자동(중앙), 아래 0 */
     display: flex;
    justify-content: center;
}

.logo-img-center-intro {
    display: block;
    width: 100%;           /* 부모인 .diagram-box 너비에 꽉 차게 설정 */
    height: auto;          /* 비율에 맞춰 높이 자동 조절 */
}

/* ══════════════════════════════════════════
   PROGRAM SLIDER — s1 섹션 수평 슬라이드
   · overflow: hidden  으로 트랙 클리핑
   · JS translateX 제어 + CSS transition 슬라이드
   · .field-card 는 기존 specialist.html 스타일 재사용
══════════════════════════════════════════ */
#fields.wrap{
      max-width: 1340px;
      margin: 24vw auto;
      margin-bottom: 0;
      padding: 0 6vw;
}

#specialist-wrap{
  padding: 4vw 6vw;
}

/* 뷰포트 창문: 트랙이 이 밖으로 나가면 보이지 않음
.program-slider {
    position: relative;
    overflow: hidden;              
    overflow-x: auto;              
    margin-top: 48px;
    width: 100%;
} */

/* 슬라이드 트랙: 카드를 가로로 한 줄에 배치
   JS 가 style.transform = 'translateX(Xpx)' 로 이동 제어
   transition 으로 슬라이드 애니메이션 부여 */
/* .program-track {
    display: flex;
    gap: 24px;
 
    will-change: transform;       
} */

/* 슬라이더 내부 field-card 너비 고정
   기존 fields-grid 의 grid 열 대신 flex item 으로 동작 */
/* .program-track .field-card {
    flex: 0 0 300px;               
    background: var(--c-bg);
    padding: 32px 28px;
    border-left: 3px solid var(--c-sage);
    transition: transform var(--t);
    box-sizing: border-box;
}
.program-track .field-card:hover {
    transform: translateY(-5px);
}
.program-track .field-card h4 {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--c-ink);
}
.program-track .field-card p {
    font-size: 14px;
    color: var(--c-muted);
    font-weight: 300;
    line-height: 1.65;
} */

/*인디케이터 기본 bar 비활성화*/
/* .program-slider::-webkit-scrollbar {
  display: none;
}
.program-slider {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
  
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100%;
} */

/* 인디케이터 점 */
/* .slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    margin-bottom: 24px;
}
.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c-border);
    transition: background var(--t), transform var(--t);
}
.dot.active {
    background: var(--c-sage);
    transform: scale(1.4);
} */

/* 반응형: 카드 너비 축소 */
/* @media (max-width: 760px) {
    .program-track .field-card { flex: 0 0 240px; }
    .sr-card.s1 {margin-top: 100px;}
    .wrap.main-section{ max-width: 1340px;
    margin-top: 8vw;
    margin-bottom: 4vw;
    padding: 0 6vw;}
} */


.program-slider {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  margin-top: 48px;
  width: 100%;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.program-slider::-webkit-scrollbar {
  display: none;
}

.program-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.program-track .field-card {
  flex: 0 0 300px;
  scroll-snap-align: start;
  background: var(--c-bg);
  padding: 32px 28px;
  border-left: 3px solid var(--c-sage);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
}

.program-track .field-card:hover,
.program-track .field-card.active {
  transform: translateY(-5px);
  background: var(--c-ivory);
  box-shadow: var(--shadow-sm);
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 24px 0;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--c-border);
  padding: 0;
  transition: background var(--t), transform var(--t);
}

.slider-dot:hover,
.slider-dot:focus-visible,
.slider-dot.active {
  background: var(--c-sage);
  transform: scale(1.45);
  outline: none;
}

@media (max-width: 760px) {
  .program-track .field-card {
    flex-basis: 240px;
  }
}





/* ══════════════════════════════════════════
   EXPERTS / HERO
══════════════════════════════════════════ */
/* Expert Grid: Max 3 columns */
/* .expert-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.expert-card {
  display: flex;
  gap: 20px;
  background: var(--c-ivory);
  padding: 20px;
  border: 1px solid var(--c-border);
  align-items: flex-start;
} */

/* 카드 그리드 컨테이너
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
   → 뷰포트에 따라 카드 수 자동 조정 (MDN: grid-template-columns) */
.experts-grid { /**/
      grid-template-columns: 1fr;
      gap: 1px;    /* gap 색상 = 테두리처럼 표현 */
}

/* 개별 전문가 카드 */
.expert-card {
    display: grid;  
    grid-template-columns: 3fr 7fr; /* 사진과 텍스트 영역 2열 */
    align-items: center;
    background: var(--c-ivory);
    overflow: hidden;
    padding: 30px;
    border-radius: 8px;
    gap: 8px; 
    box-shadow: var(--shadow-sm);
}

.expert-card:hover {
    box-shadow: var(--shadow-md);
    z-index: 1;
    position: relative;
}


/* 전문가 소개 */
.exp_list{display:flex; flex-wrap:wrap; gap: 40px 0; justify-content:space-between; list-style-type: none;}
.exp_list li{width:48.7%; min-height:520px; border-radius: 30px; border: 1px solid #D9D9D9; background: #FFF; padding:40px; position:relative;}
.exp_list li:hover{border: 1px solid #538baa;}
.exp_list li .name{font-size: 30px; font-weight: 800; padding-bottom:25px; border-bottom:1px solid #E7E7E7;}
.exp_list li .bt_wrap{margin-top:25px;}
.exp_list li .bt_wrap .list{display:flex; align-items:flex-start; gap:20px; font-size: 22px;}
.exp_list li .bt_wrap .list + .list{margin-top:15px;}
.exp_list li .bt_wrap .list .left{width: 130px; line-height: 40px; font-weight: 800; color: #FFF; text-align: center; border-radius: 30px; background: #619f85;}
.exp_list li .bt_wrap .list .right{color: #8E8E8E; width:calc(100% - 150px); word-break:keep-all; line-height:1.3; margin-top:6px;}
.exp_list li .bt_wrap .list .right p{word-break:keep-all;}
.exp_list li .bt_wrap .list .right p + p{margin-top:7px;}


/*전문가 소개 글 내부 layout*/
	.exp_list{gap: 4.82vw 0;}
	.exp_list li{width:100%; min-height:auto; border-radius: 3.52vw; padding:4.82vw;}
	.exp_list li:before{width:34.51vw; height:34.51vw; bottom: 44%; transform:translate(-50%, 50%);}
	.exp_list li.first:before{width: 14.71vw; height: 14.71vw; bottom:4.82vw; right:4.82vw;}
	.exp_list li .name{font-size: 1.4vw; padding-bottom:1vw;}
	.exp_list li .bt_wrap{margin-top:1vw;}
	.exp_list li .bt_wrap .list{gap:1.84vw; font-size: 1.2vw; flex-direction:column;}
	.exp_list li .bt_wrap .list + .list{margin-top:1.8vw;}
	.exp_list li .bt_wrap .list .left{width: 12vw; line-height: 4vw;  border-radius: 2.4vw;}
	.exp_list li .bt_wrap .list .right{width:100%; margin-top:0;}
	.exp_list li .bt_wrap .list .right p + p{margin-top:0.78vw;}


/* 사진 영역
   aspect-ratio: 3/4 → 세로형 인물 사진 비율 고정 (MDN: aspect-ratio)
   overflow: hidden + img transform → hover 줌 */
.expert-photo {
  width: 100%;
}
.expert-photo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 6px; /* 이미지 모서리를 부드럽게 */
    display: block;
}
.expert-card:hover .expert-photo img {
    transform: scale(1.04);           /* GPU 가속 스케일 줌 */
}

/* 텍스트 정보 영역 */
.expert-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px; /* 내부 요소들(이름, 소개글, 태그) 사이의 간격 */
}

.expert-role {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-sage);
    font-weight: 500;
}

.expert-name {
    font-family: var(--f-display);
    font-size: clamp(22px, 2.5vw, 28px);
    font-weight: 700;
    color: var(--c-ink);
    line-height: 1.2;
}

.expert-summary {
    font-size: 14px;
    color: var(--c-muted);
    line-height: 1.75;
    font-weight: 300;
    word-break: keep-all;
}

/* 경력 태그 (기존 .cred-badge 패턴 참고) */
.expert-creds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.cred-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    letter-spacing: 0.03em;
    background: var(--c-sage-xs);
    color: var(--c-sage);
    padding: 4px 12px;
    border-radius: 99px;
    border: 1px solid var(--c-border);
    white-space: nowrap;
}

/* 프로필 링크 */
.expert-link {
    font-size: 13px;
    color: var(--c-sage);
    font-weight: 500;
    letter-spacing: 0.06em;
    margin-top: auto;              /* 카드 하단 고정 */
    transition: letter-spacing var(--t);
}
.expert-link:hover {
    letter-spacing: 0.12em;
}

/* 반응형: 760px 이하에서 1열로 */
@media (max-width: 760px) {

/* 전문가 소개 */
  .exp_list{display:flex; flex-wrap:wrap; gap: 40px 0; justify-content:space-between; list-style-type: none;}
  .exp_list li{width:48.7%; min-height:520px; border-radius: 30px; border: 1px solid #D9D9D9; background: #FFF; padding:40px; position:relative;}
  .exp_list li:hover{border: 1px solid #538baa;}
  .exp_list li .name{font-size: 30px; font-weight: 800; padding-bottom:25px; border-bottom:1px solid #E7E7E7;}
  .exp_list li .bt_wrap{margin-top:25px;}
  .exp_list li .bt_wrap .list{display:flex; align-items:flex-start; gap:20px; font-size: 22px;}
  .exp_list li .bt_wrap .list + .list{margin-top:15px;}
  .exp_list li .bt_wrap .list .left{width: 130px; line-height: 40px; font-weight: 800; color: #FFF; text-align: center; border-radius: 30px; background: #619f85;}
  .exp_list li .bt_wrap .list .right{color: #8E8E8E; width:calc(100% - 150px); word-break:keep-all; line-height:1.3; margin-top:6px;}
  .exp_list li .bt_wrap .list .right p{word-break:keep-all;}
  .exp_list li .bt_wrap .list .right p + p{margin-top:7px;}


  /*전문가 소개 글 내부 layout*/
    .exp_list{gap: 4.82vw 0;}
    .exp_list li{width:100%; min-height:auto; border-radius: 3.52vw; padding:4.82vw;}
    .exp_list li:before{width:34.51vw; height:34.51vw; bottom: 44%; transform:translate(-50%, 50%);}
    .exp_list li.first:before{width: 14.71vw; height: 14.71vw; bottom:4.82vw; right:4.82vw;}
    .exp_list li .name{font-size: 4.52vw; padding-bottom:3.99vw;}
    .exp_list li .bt_wrap{margin-top:3.99vw;}
    .exp_list li .bt_wrap .list{gap:1.84vw; font-size: 3.44vw; flex-direction:column;}
    .exp_list li .bt_wrap .list + .list{margin-top:3.82vw;}
    .exp_list li .bt_wrap .list .left{width: 21.49vw; line-height: 5.82vw;  border-radius: 3.52vw;}
    .exp_list li .bt_wrap .list .right{width:100%; margin-top:0;}
    .exp_list li .bt_wrap .list .right p + p{margin-top:0.78vw;}


    .experts-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .expert-photo {
      max-width: 200px;
      margin: 0 auto; 
     }
}

.exp-img-wrapper {
  width: fit-content;
  height: 435px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  cursor: default;
}

/* Image Hover Effect in Admin Mode */
body.edit-mode .exp-img-wrapper { cursor: pointer; }
body.edit-mode .exp-img-wrapper::after {
  content: '이미지 변경';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  opacity: 0;
  transition: 0.2s;
}
body.edit-mode .exp-img-wrapper:hover::after { opacity: 1; }

.exp-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }

.exp-info { flex: 1; }
.exp-name { font-family: var(--f-display); font-size: 19px; color: var(--c-sage); font-weight: 700; margin-bottom: 5px; }
.exp-bio { font-size: 14px; line-height: 1.6; color: var(--c-muted); white-space: pre-line; }

/* Responsive */
@media (max-width: 1024px) { .expert-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { 
  .expert-grid { grid-template-columns: 1fr; } 
  .expert-card { flex-direction: column; }
  .exp-img-wrapper { width: 100%; height: 250px; }
}

/* Delete button styling */
.delete-btn {
  margin-top: 10px;
  background: none;
  border: 1px solid #ff4d4d;
  color: #ff4d4d;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  transition: 0.2s;
}
.delete-btn:hover {
  background: #ff4d4d;
  color: white;
}

/* Image overlay for admin */
.img-edit-overlay {
  position: absolute;
  bottom: 0; width: 100%;
  background: rgba(61,92,53,0.8);
  color: white;
  text-align: center;
  font-size: 10px;
  padding: 4px 0;
  pointer-events: none;
}

/* Editable text visual cue */
body.edit-mode [contenteditable="true"] {
  outline: 1px dashed var(--c-sage);
  padding: 2px;
  background: rgba(255,255,255,0.5);
}

/* ══════════════════════════════════════════
   PROCESS / FIELDS (상담분야)
══════════════════════════════════════════ */
#fields { padding-bottom: 0px; background: var(--c-ivory); }
.fields-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.field-card { background: var(--c-bg); padding: 32px 28px; border-left: 3px solid var(--c-sage); transition: transform var(--t); }
.field-card:hover { transform: translateY(-5px); }
.field-card h4 { font-family: var(--f-display); font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.field-card p { font-size: 14px; color: var(--c-muted); font-weight: 300; line-height: 1.6; }

@media (max-width: 860px) { .fields-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════
   LOCATION & INFO (Updated Layout)
══════════════════════════════════════════ */
#location {
  padding-bottom: 8px;
  background: var(--c-cream); /* Maintained original section color */
}

#location-body{
  background: var(--c-cream);
}

.loc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: start;
}
.loc-body {
  font-size: 16px; line-height: 1.85;
  color: var(--c-muted); font-weight: 300;
  margin: 22px 0 40px; word-break: keep-all;
}
.loc-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.loc-item {
  display: flex; gap: 14px; align-items: flex-start;
}
.loc-ico {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--c-sage-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-sage); font-size: 17px; flex-shrink: 0;
}
.loc-meta { display: flex; flex-direction: column; gap: 3px; }
.loc-lbl {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-sage); font-weight: 700;
}
.loc-val {
  font-size: 15px; color: var(--c-ink); line-height: 1.6;
}

.map-box {
  width: 100%; height: 440px;
  border-radius: 2px; overflow: hidden;
  border: 1px solid var(--c-border);
  position: relative; /* 오버레이 배치를 위해 추가 */
}

.map-box a { display: block; width: 100%; height: 100%; }

/* 이미지 위에 나타나는 안내 문구 */
.map-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(26, 26, 24, 0.6);
  color: #fff; padding: 12px; text-align: center;
  font-size: 13px; letter-spacing: 0.05em;
  opacity: 0; transition: opacity var(--t);
}

.map-box:hover .map-overlay { opacity: 1; }

@media (max-width: 860px) {
  .loc-grid { grid-template-columns: 1fr; }
  .map-box { height: 280px; order: -1; }
  .map-overlay { opacity: 1; font-size: 11px; padding: 8px; } /* 모바일은 항상 보임 */
}

@media (max-width: 860px) {
  .loc-grid { grid-template-columns: 1fr; }
  .map-box  { height: 280px; order: -1; } /* Map on top for mobile */
}

/* ══════════════════════════════════════════
   FOOTER ENHANCED STYLE
══════════════════════════════════════════ */
#footer-wrap {
  margin: 10vw auto;
}

footer {
  color: var(--c-muted);
  padding: 0 0 24px;
  font-family: var(--f-body);
  max-height: 28vw; 
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.foot-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-sage);
  margin-bottom: 16px;
}

.foot-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
}

.foot-brand span { color: var(--c-sage); font-weight: 600; }

.foot-biz-info {
  font-size: 13px;
  line-height: 1.8;
  margin-bottom: 12px;
}

.foot-biz-info span { color: var(--c-sage-lt); font-weight: 500; }

.divider {
  display: inline-block;
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.1);
}

.foot-copy {
  font-size: 12px;
  opacity: 0.6;
}

/* 법적 고지 링크 스타일 */
.foot-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}

.foot-link-item {
  font-size: 14px;
  color: var(--c-muted);
  transition: color var(--t);
}

.foot-link-item:hover { color: var(--c-sage-lt); }

/* .privacy-link {
  color: var(--c-white);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
} */

.dot-divider::before {
  content: '·';
  color: var(--c-sage-lt);
}

.foot-security-note {
  border-top: 1px solid var(--c-sage-lt);
  padding-top: 25px;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.foot-security-note strong { color: var(--c-sage-lt); font-weight: 500; }

@media (max-width: 860px) {
  .foot-row { flex-direction: column; text-align: left; }
  .foot-links { flex-wrap: wrap; justify-content: flex-start; }
}

/* ══════════════════════════════════════════
   ANIMATIONS & EDIT TOOLS
══════════════════════════════════════════ */
@keyframes fadeUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform: translateY(0); } }
#toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(100px); background: var(--c-ink); color: #fff; padding: 12px 24px; border-radius: 4px; transition: 0.4s; z-index: 9999; }
#toast.show { transform: translateX(-50%) translateY(0); }
body.edit-mode [contenteditable="true"] { outline: 2px dashed #e0bc4a; background: rgba(255,240,120,0.1); }


/* ══════════════════════════════════════════
   EDIT MODE  – photo drag & drop zones
   참조: https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
══════════════════════════════════════════ */
.drop-zone { position: relative; cursor: default; }
.drop-zone .drop-overlay {
  display: none;
  position: absolute; inset: 0; z-index: 10;
  background: rgba(61,92,53,0.55);
  border: 3px dashed rgba(255,255,255,0.7);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 10px;
  color: #fff; pointer-events: none;
  transition: background 0.2s;
}
.drop-zone .drop-overlay .drop-icon { font-size: 38px; }
.drop-zone .drop-overlay .drop-txt  { font-family: var(--f-body); font-size: 14px; letter-spacing: 0.08em; }
body.edit-mode .drop-zone .drop-overlay { display: flex; }
body.edit-mode .drop-zone { cursor: copy; }
body.edit-mode .drop-zone.dragging .drop-overlay { background: rgba(61,92,53,0.75); }

/* EDIT MODE – text editable
   변경: contenteditable 활성화 시 시각적 피드백(outline + fill)
   참조: https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable */
body.edit-mode [contenteditable="true"] {
  outline: var(--edit-ring);
  background: var(--edit-fill);
  border-radius: 2px;
  cursor: text;
  transition: outline 0.2s, background 0.2s;
  display: inline-block;
}
body.edit-mode [contenteditable="true"]:focus {
  outline: 2px dashed rgba(196,154,30,1);
  background: rgba(255,240,120,0.3);
}
.edit-badge {
  display: none;
  position: fixed; bottom: 20px; right: 20px; z-index: 8999;
  background: #e0bc4a; color: var(--c-ink);
  padding: 8px 18px; border-radius: 4px;
  font-size: 12px; letter-spacing: 0.06em; font-weight: 500;
  box-shadow: var(--shadow-md);
  font-family: var(--f-body);
}
body.edit-mode .edit-badge { display: block; }

/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform: translateY(22px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ══════════════════════════════════════════
   TOAST
══════════════════════════════════════════ */
#toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(72px);
  background: var(--c-ink); color: #fff;
  padding: 11px 22px; border-radius: 4px;
  font-size: 14px; z-index: 99999;
  transition: transform 0.3s ease;
  white-space: nowrap; box-shadow: var(--shadow-md);
  font-family: var(--f-body);
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.ok   { border-left: 3px solid var(--c-sage); }
#toast.err  { border-left: 3px solid #e57373; }

/* ══════════════════════════════════════════
   CONSENT & DETAIL MODAL STYLE
══════════════════════════════════════════ */

/* 모달 배경 오버레이 */
.modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26, 26, 24, 0.7); /* --c-ink 기반 반투명 */
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 20px;
}

/* 모달 컨텐츠 공통 박스 */
.modal-content {
  background: var(--c-ivory);
  padding: 40px;
  border-radius: 2px; /* 기존 디자인의 직선적인 느낌 유지 */
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 500px;
  position: relative;
  border: 1px solid var(--c-border);
}

.modal-content h2 {
  font-family: var(--f-display);
  font-size: 24px;
  color: var(--c-sage);
  margin-bottom: 24px;
  text-align: center;
}

/* 동의 폼 리스트 스타일 */
.consent-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}

/* 동의 항목 레이아웃 수정 */
.consent-form label {
  display: flex;
  align-items: flex-start; /* 체크박스를 텍스트의 첫 줄 높이에 맞춤 */
  gap: 12px;
  cursor: pointer;
  padding: 4px 0;
}

/* 체크박스 크기 고정 (Fixed Size) */
.consent-form input[type="checkbox"] {
  /* flex 환경에서도 크기가 줄어들지 않도록 고정 */
  flex-shrink: 0; 
  
  /* 구체적인 픽셀 값 지정 */
  width: 20px;
  height: 20px;
  
  /* 상단 텍스트와 정렬을 맞추기 위한 미세 조정 */
  margin: 0;
  margin-top: 2px; 
  
  appearance: none; /* 브라우저 기본 스타일 제거 후 커스텀할 경우 */
  border: 1.5px solid var(--c-sage);
  border-radius: 2px;
  background-color: var(--c-white);
  position: relative;
  cursor: pointer;
}

/* 체크 시 내부 표시 (선택 사항: 커스텀 스타일) */
.consent-form input[type="checkbox"]:checked {
  background-color: var(--c-sage);
}

.consent-form input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  color: white;
  font-size: 14px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 텍스트 영역 */
.consent-form label span {
  flex: 1; /* 남은 공간을 텍스트가 채우도록 설정 */
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-ink);
  word-break: keep-all; /* 한글 단어 끊김 방지 */
}

/* 상세보기 링크 스타일 */
.view-detail {
  font-size: 12px;
  color: var(--c-muted);
  text-decoration: underline;
  margin-left: auto;
  transition: color var(--t);
}

.view-detail:hover {
  color: var(--c-sage);
}

/* 진단 시작 버튼 (기존 .btn-solid 스타일 계승) */
#btn-start {
  width: 100%;
  background: var(--c-ink);
  color: #fff;
  padding: 16px;
  border: none;
  border-radius: 2px;
  font-size: 15px;
  letter-spacing: 0.1em;
  transition: var(--t);
}

#btn-start:hover {
  background: var(--c-sage);
}

.dark-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(26,26,24,0.6); z-index: 9999;
}

.display-none { display: none; }

.display {display : block; }

/* ══════════════════════════════════════════
   SURVEY STYLE (KAKAO UI, CHAT BUBBLE) 
══════════════════════════════════════════ */
.survey-container {
    max-width: 600px;
    margin: 20px auto;
    font-family: 'Pretendard', sans-serif;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 진행 바 스타일 */
.survey-header { padding: 20px; border-bottom: 1px solid #eee; }
.progress-info { display: flex; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
.progress-track { width: 100%; height: 8px; background: #eee; border-radius: 4px; }
#progress-fill { width: 0%; height: 100%; background: #4A90E2; border-radius: 4px; transition: width 0.4s ease; }

/* 채팅창 스타일 */
.chat-window {
    height: 450px;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fdfdfd;
}

.bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 15px;
    line-height: 1.4;
    word-break: break-all;
}

.bot { align-self: flex-start; background: #f0f0f0; color: #333; border-bottom-left-radius: 2px; }
.user { align-self: flex-end; background: #4A90E2; color: white; border-bottom-right-radius: 2px; }

/* 입력창 및 버튼 */
.input-area { padding: 15px; display: flex; gap: 8px; border-top: 1px solid #eee; }
.input-area input { flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; outline: none; }
.input-area button { padding: 0 20px; background: #4A90E2; color: white; border: none; border-radius: 8px; cursor: pointer; }

/* 결과 영역 */
.hidden { display: none !important; }
.final-step { padding: 30px; text-align: center; background: #f9f9f9; }
.button-group { display: flex; flex-direction: column; gap: 10px; margin-top: 15px; }
.button-group button { padding: 12px; border: none; border-radius: 6px; color: white; cursor: pointer; font-weight: bold; }
.btn-pdf { background: #27ae60; }
.btn-info { background: #3498db; }
.btn-primary { background: #8e44ad; }

 /* ══════════════════════════════════════════
   SURVEY SELECTOR UI IMPROVEMENT
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   REDESIGNED SURVEY SELECTOR (Button Style)
══════════════════════════════════════════ */

.survey-selector-wrapper {
    max-width: 450px;
    margin: 120px auto 40px auto;
    padding: 0 20px;
    text-align: center;
}

.selector-label {
    font-family: var(--f-display);
    font-size: 20px;
    color: var(--c-ink);
    margin-bottom: 24px;
    font-weight: 700;
    display: block;
    word-break: keep-all;
}

/* .result_btn의 UI 속성을 이식한 셀렉트 박스 */
.custom-select {
    /* 레이아웃 & 크기 (result_btn 참조) */
    width: 100%;
    max-width: 320px;
    height: 54px; 
    padding: 0 45px 0 20px;
    
    /* 디자인 토큰 */
    background-color: var(--c-sage); /* 버튼과 동일한 세이지 컬러 */
    color: var(--c-white);
    font-family: var(--f-body);
    font-size: 14px;
    letter-spacing: 0.05em;
    
    /* 형태 */
    border: none;
    border-radius: 2px; /* 버튼과 동일한 반경 */
    
    /* 기능적 요소 */
    appearance: none;
    cursor: pointer;
    transition: var(--t);
    box-shadow: var(--shadow-sm);
    
    /* 화살표 아이콘 (흰색으로 변경) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 16px;
}

.custom-select:hover {
    background-color: var(--c-ink); /* 버튼 호버 시 변하는 색상 반영 */
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.custom-select:focus {
    outline: none;
    background-color: var(--c-ink);
}

/* 옵션 창 내부 텍스트 색상 (브라우저 기본 스타일 대응) */
.custom-select option {
    background-color: var(--c-white);
    color: var(--c-ink);
}

/* 설문 시작 시 부드럽게 사라짐 */
.survey-container:not(.display-none) ~ .survey-selector-wrapper {
    display: none;
}
 /* ══════════════════════════════════════════
 APPLY PAGE – CONTACT FORM STYLE
══════════════════════════════════════════ */
.policy-list { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.policy-item {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14px; color: var(--c-muted); line-height: 1.7; font-weight: 300;
}
.policy-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-sage); flex-shrink: 0; margin-top: 8px;
}

.crisis-banner {
  background: #fff8f0;
  border: 1.5px solid #e09060;
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 40px;
}
.crisis-banner h4 {
  font-family: var(--f-display); font-size: 18px; font-weight: 700;
  color: #a05020; margin-bottom: 8px;
}
.crisis-banner p { font-size: 14px; color: #6b4020; line-height: 1.75; }
.crisis-banner a { color: #a05020; text-decoration: underline; }

.con-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: start;
}
.con-body {
  font-size: 16px; line-height: 1.85;
  color: var(--c-muted); font-weight: 300;
  margin: 22px 0; word-break: keep-all;
}
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fg  { display: flex; flex-direction: column; gap: 7px; }
.fg label {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-sage); font-weight: 500;
}
.fg input, .fg textarea, .fg select {
  width: 100%; padding: 12px 15px;
  background: var(--c-ivory);
  border: 1px solid var(--c-border);
  border-radius: 2px;
  font-family: var(--f-body); font-size: 15px; color: var(--c-ink);
  outline: none; appearance: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.fg input:focus, .fg textarea:focus, .fg select:focus {
  border-color: var(--c-sage);
  box-shadow: 0 0 0 3px rgba(61,92,53,0.1);
}
.fg textarea { height: 130px; resize: vertical; }
.form-note { font-size: 12px; color: var(--c-muted); text-align: center; margin-top: 4px; font-weight: 300; }

@media (max-width: 860px) {
  .con-grid  { grid-template-columns: 1fr; }
  .form-row  { grid-template-columns: 1fr; }
}

#contact-form.wrap {    
    max-width: 1340px;
    margin: 12vw auto;
    padding: 0 6vw;
  }

.contact {
  padding: 100px 0;
  background: var(--c-cream);
}
.alt-contact-section {
  padding: 80px 0;
  background: var(--c-ivory);
}
.alt-contact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 40px;
}
.alt-card {
  background: var(--c-bg);
  padding: 28px 26px;
  border-left: 3px solid var(--c-sage);
  display: flex; flex-direction: column; gap: 10px;
}
.alt-card .a-icon { font-size: 26px; }
.alt-card h4 { font-family: var(--f-display); font-size: 18px; font-weight: 700; }
.alt-card p  { font-size: 14px; color: var(--c-muted); font-weight: 300; line-height: 1.65; }
.alt-card .a-link {
  font-size: 13px; color: var(--c-sage); font-weight: 500;
  letter-spacing: 0.06em;
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
}
.privacy-note {
  background: var(--c-ivory);
  border: 1px solid var(--c-border);
  padding: 18px 20px;
  margin-top: 0;
  font-size: 13px; color: var(--c-muted); line-height: 1.7; font-weight: 300;
}
@media (max-width: 760px) {
  .alt-contact-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════
   THERAPIST / HERO [센터소개]
══════════════════════════════════════════ */
.hero {width: 100%; max-height: 1.75vw; background: var(--c-cream); display: flex; align-items: center; justify-content: center; margin-bottom: 1.5vw;}
.hero-bg { width: 100%; height: auto; object-fit: cover; opacity: 0.4; z-index: -1;}
#therapist { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
section#therapist{margin-top: 16vw;}
.therapist-content { display: flex; flex-direction: column; justify-content: center; padding: 130px 4vw 54px 8vw; position: relative; z-index: 2; }
.therapist-eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-sage); font-weight: 500; margin-top: 8vw; margin-bottom: 8vw; display: flex; align-items: center; gap: 10px; animation: fadeUp 0.9s ease 0.1s both; }
.therapist-eyebrow::before { content:''; width:28px; height:1px; background:var(--c-sage); }
.therapist-h1 { font-family: var(--f-display); font-size: clamp(40px, 4.8vw, 72px); font-weight: 700; line-height: 1.15; word-break: keep-all; margin-top: 8vw; animation: fadeUp 0.9s ease 0.22s both; }
.therapist-h3 { font-family: nanum-gothic-regular; font-size: clamp(20px, 2.4vw, 36px); color:var(--c-sage); font-weight: 500; line-height: 1.15; word-break: keep-all; margin-bottom: 12px; animation: fadeUp 0.9s ease 0.22s both; }
.therapist-h1 em { font-family: var(--f-display); font-style: normal; color: var(--c-sage); font-weight: 400; }
.therapist-body { font-size: 17px; line-height: 1.85; color: var(--c-muted); font-weight: 300; max-width: 460px; margin-bottom: 32px; word-break: keep-all; animation: fadeUp 0.9s ease 0.34s both; }

.cred-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; animation: fadeUp 0.9s ease 0.42s both; }
.cred-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: 0.04em; background: var(--c-sage-xs); color: var(--c-sage); padding: 6px 14px; border-radius: 99px; border: 1px solid var(--c-border); }

.therapist-photo { position: relative; overflow: hidden; background: #eee; }
.therapist-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s ease; }
 

@media (max-width: 860px) {
  .hero-bg{height:64vw;}
  #therapist { grid-template-columns: 1fr; min-height: auto; }
  .therapist-content { padding: 120px 6vw 56px; }
  .therapist-photo { height: 60vw; }
  #cards-reverse {order:4}
  #contents-reverse {order:3}
}


/* ══════════════════════════════════════════
    SELF CHECK / SURVEY (설문조사) 
══════════════════════════════════════════ */
/* 자가진단 전용 커스텀 스타일 */

.test_wrap-wrap{
    max-width: 1340px;
    margin: 8vw auto;
    padding: 0 6vw;
}

/* 상단 타이틀 정렬 */
.sub_title_txt { text-align: center; padding: 180px 0 0px; }

/* 탭 메뉴 디자인 */
/* 탭 메뉴 디자인 */
.test_tabnav { 
    display: flex; 
    justify-content: center; 
    /* 화면 너비에 따라 간격 조절 (최소 4px ~ 최대 8px) */
    gap: clamp(4px, 1vw, 8px); 
    margin-bottom: 20px; 
    list-style-type: none;
    padding: 0; /* 기본 패딩 제거 */
}

.test_tabnav li a {
    /* 패딩 조절: 상하 12px 고정, 좌우는 화면 너비에 따라 15px에서 30px까지 가변 */
    padding: 12px clamp(15px, 3vw, 30px); 
    
    background: var(--c-cream); 
    border-radius: 50px;
    
    /* 폰트 크기: 최소 13px ~ 최대 15px 사이에서 자동 조절 */
    font-size: clamp(13px, 1.5vw, 15px); 
    
    color: var(--c-muted); 
    transition: var(--t);
    display: inline-block; /* 패딩 및 크기 적용을 위해 block 요소화 */
    white-space: nowrap;   /* 텍스트가 줄바꿈되지 않도록 설정 */
}

.test_tabnav li.active a {
    background: var(--c-sage); 
    color: var(--c-white); 
    font-weight: 600; 
}

/* 하위 카테고리 탭 (라인형) */
/* 하위 카테고리 탭 (라인형) */
.test_category_nav {
    display: flex; 
    justify-content: center; 
    /* 간격: 최소 15px ~ 최대 30px (화면 너비 4%에 비례) */
    gap: clamp(15px, 4vw, 30px); 
    margin-bottom: 50px;
    border-bottom: 1px solid var(--c-border);
    list-style-type: none;
    padding: 0;
}

.test_category_nav li { 
    position: relative; 
    /* 하단 여백도 화면에 따라 살짝 유동적으로 변경 (10px ~ 15px) */
    padding-bottom: clamp(10px, 1.2vw, 15px); 
    cursor: pointer;     
}

.test_category_nav li a { 
    /* 폰트 크기: 최소 14px ~ 최대 16px */
    font-size: clamp(14px, 1.8vw, 16px); 
    color: var(--c-muted); 
    text-decoration: none; /* 링크 밑줄 제거 */
    display: block;
    transition: color 0.3s ease;
}

.test_category_nav li.active a { 
    color: var(--c-sage); 
    font-weight: 700;     
}

.test_category_nav li.active::after {
    content: ''; 
    position: absolute; 
    bottom: -1px; 
    left: 0; 
    width: 100%; 
    /* 활성 라인 두께도 원하시면 조정 가능하지만, 보통 2px이 안정적입니다 */
    height: 2px; 
    background: var(--c-sage);
}

@media (max-width: 600px) {
    .test_category_nav {
        justify-content: flex-start; /* 왼쪽 정렬로 변경 */
        overflow-x: auto;           /* 가로 스크롤 허용 */
        white-space: nowrap;        /* 줄바꿈 방지 */
        padding-bottom: 5px;        /* 스크롤바 간격 */
    }
}

/* 설명 박스 */
.tp_box {
    background: var(--c-ivory); padding: 40px; border-radius: 4px;
    border: 1px solid var(--c-border); margin-bottom: 40px; text-align: center;
}
.info_header { margin-bottom: 15px; }
.info_header .badge {
    display: inline-block; padding: 4px 12px; background: var(--c-sage-xs);
    color: var(--c-sage); font-size: 12px; border-radius: 2px; margin-bottom: 10px;
}
.info_header h4 { font-family: var(--f-display); font-size: 24px; color: var(--c-ink); }

/* 테이블 스타일 현대화 */
.test_table_wrap table { width: 100%; border-spacing: 0; border-collapse: separate; }
.test_table_wrap th {
    background: var(--c-cream); padding: 20px 10px; font-size: 14px;
    color: var(--c-sage); border-top: 1px solid var(--c-sage);
}
.test_table_wrap td {
    padding: 25px 10px; border-bottom: 1px solid var(--c-border);
    text-align: center; font-size: 16px;
}
.test_table_wrap td:first-child { text-align: left; padding-left: 20px; font-weight: 500; }

/* 라디오 버튼 커스텀 */
input[type="radio"] {
    width: 22px; height: 22px; accent-color: var(--c-sage); cursor: pointer;
}

/* 결과 영역 디자인 */
.result_box {
    display: none; margin-top: 60px; padding: 60px 40px;
    background: var(--c-sage-xs); border: 1px dashed var(--c-sage); border-radius: 8px;
    animation: fadeUp 0.8s ease forwards;
}
.score_circle {
    width: 150px; height: 150px; border: 4px solid var(--c-sage); border-radius: 50%;
    margin: 0 auto 30px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; background: #fff;
}
.score_lbl { font-size: 13px; color: var(--c-muted); }
#my_score { font-size: 48px; color: var(--c-sage); line-height: 1; }
.unit { font-size: 16px; color: var(--c-sage); }
#my_res { font-size: 20px; color: var(--c-ink); font-weight: 500; margin-bottom: 30px; text-align: center; }

/* ══════════════════════════════════════════
   BUTTONS 
══════════════════════════════════════════ */
.btn-solid { display: inline-block; background: var(--c-ink); color: #fff;
   padding: 14px 32px; border-radius: 2px; font-size: 13px;
    letter-spacing: 0.1em; transition: 0.3s; }
.btn-solid:hover { background: var(--c-sage); transform: translateY(-2px); }


/* 버튼 그룹 */
/* Container for buttons */
.action_wrap { 
    display: flex;            /* Enables flexbox */
    justify-content: center;   /* Centers buttons horizontally */
    align-items: center;       /* Aligns buttons vertically */
    gap: 15px;                /* Consistent space between buttons */
    margin-top: 50px; 
    margin-bottom: 20px;
    flex-wrap: wrap;          /* Allows wrapping on small screens */
}

/* Base button styles */
.result_btn, .result_btn_black {
    /* Layout */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    
    /* Consistency settings */
    min-width: 160px;         /* Ensures a minimum consistent width */
    height: 54px;             /* Fixed height for vertical consistency */
    padding: 0 20px;          /* Small horizontal padding for text safety */
    box-sizing: border-box;   /* Includes padding in the width/height calculation */
    
    /* Visuals */
    border-radius: 2px; 
    font-size: 12px; 
    border: none; 
    cursor: pointer;
    transition: var(--t);
    color: #fff;
}

/* Specific Colors */
.result_btn {
    background: var(--c-sage);
}

.result_btn_black {
    background: var(--c-ink);
}

/* Hover States */
.result_btn:hover { 
    background: var(--c-ink); 
    transform: translateY(-3px); 
}

.result_btn_black:hover { 
    background: var(--c-sage); 
    transform: translateY(-3px); 
}

#result-area {
    text-align: center; 
    margin-bottom: 20px;

}

.reset_btn_text {
    background: none; border: none; color: var(--c-muted);
    text-decoration: underline; margin-top: 20px; cursor: pointer;
}

@media (max-width: 768px) {
    /* 1. 테이블 헤더(제목줄)를 완전히 숨깁니다. */
    .test_table_wrap thead {
        display: none;
    }

    /* 2. 각 행(TR)을 하나의 독립된 '카드'처럼 만듭니다. */
    .test_table_wrap tr {
        display: block;
        padding: 25px 15px;
        border-bottom: 8px solid var(--c-ivory); /* 문항 사이 구분 */
        background: #fff;
    }

    /* 3. 질문 내용이 담긴 첫 번째 칸(TD)을 강조합니다. */
    .test_table_wrap td:first-child {
        display: block;
        width: 100% !important;
        padding: 0 0 20px 0;
        text-align: left;
        font-size: 18px;
        line-height: 1.4;
        color: var(--c-ink);
        border: none;
    }

    /* 4. 라디오 버튼이 있는 칸들을 가로로 나열합니다. */
    .test_table_wrap td:not(:first-child) {
        display: inline-flex;
        flex-direction: column; /* 라벨을 버튼 아래에 배치 */
        align-items: center;
        width: 23%; /* 4개 문항이므로 약 25%씩 배분 */
        border: none;
        padding: 10px 0;
        font-size: 12px;
        gap: 8px;
    }

    /* 5. [핵심] 숨겨진 타이틀을 라디오 버튼 밑에 강제로 표시합니다. */
    .test_table_wrap td:not(:first-child)::after {
        content: attr(data-label); /* HTML의 data-label 값을 가져옴 */
        color: var(--c-muted);
        white-space: nowrap;
    }

    /* 라디오 버튼 크기 최적화 */
    input[type="radio"] {
        width: 24px;
        height: 24px;
        margin: 0;
    }
}