로 바꿈(가짜 링크였음).
클릭 대상은 안쪽 칩(.chip_bt)이므로 카드 자체의 hover 효과는 두지 않는다. */
.care_thumb {
display: block;
overflow: hidden;
height: 190px;
border-radius: 8px;
}
.care_img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease-in-out;
}
.care_name {
display: block;
padding: 16px 10px 8px;
font-size: 17px;
font-weight: 700;
line-height: 1.3em;
color: var(--ld_color_text);
}
.care_desc {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 0px 10px 0px;
font-size: 14px;
font-weight: 400;
line-height: 1.7em;
color: var(--ld_color_text_sub);
}
/* Leedohee - 진료 영역 END */
/* Leedohee - 병원 둘러보기 START */
.sec_tour {
padding-bottom: var(--ld_sec_padding);
background-color: var(--ld_color_bg_sub);
}
.tour_slider {
position: relative;
}
.tour_slide {
height: 210px;
}
.tour_img {
width: 100%;
height: 100%;
border-radius: 8px;
object-fit: cover;
}
.tour_bt {
position: absolute;
top: 50%;
z-index: 10;
width: 30px;
height: 30px;
transform: translateY(-50%);
}
.tour_bt::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 11px;
height: 11px;
border-top: 2px solid var(--ld_color_text_sub);
border-right: 2px solid var(--ld_color_text_sub);
transition: border-color 0.2s ease-in-out;
}
.tour_bt_prev {
left: -44px;
}
.tour_bt_prev::after {
transform: translate(-40%, -50%) rotate(-135deg);
}
.tour_bt_next {
right: -44px;
}
.tour_bt_next::after {
transform: translate(-60%, -50%) rotate(45deg);
}
.tour_bt:hover::after {
border-color: var(--ld_color_point);
}
.tour_pagination {
position: static;
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
/* dynamicBullets 사용 시 Swiper가 넣는 좌표값 해제 */
.tour_pagination.swiper-pagination-bullets-dynamic {
left: auto;
width: auto;
transform: none;
}
.tour_pagination .swiper-pagination-bullet {
margin: 0px 4px;
width: 8px;
height: 8px;
background-color: #C9C9C9;
opacity: 1;
}
.tour_pagination .swiper-pagination-bullet-active {
background-color: var(--ld_color_point);
}
/* Leedohee - 병원 둘러보기 END */
/* Leedohee - 관련 학회 START */
.sec_assoc {
padding-top: 0px;
padding-bottom: var(--ld_sec_padding);
background-color: var(--ld_color_bg_sub);
}
.sec_hours {
background-color: var(--ld_color_bg_sub);
}
.assoc_list {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
gap: 16px;
}
.assoc_item {
flex: 1 0 0;
}
.assoc_link {
width: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 14px 26px;
border: 1px solid var(--ld_color_line);
border-radius: 6px;
background-color: var(--ld_color_bg);
transition: all 0.2s ease-in-out;
}
.assoc_link:hover {
border-color: var(--ld_color_point);
}
.assoc_name {
font-size: 15px;
font-weight: 700;
line-height: 1.2em;
color: var(--ld_color_text);
}
.assoc_sub {
font-size: 13px;
font-weight: 400;
line-height: 1.2em;
color: var(--ld_color_text_sub);
}
.assoc_icon {
width: 14px;
height: 14px;
}
/* Leedohee - 관련 학회 END */
/* Leedohee - Quick menu START */
.quick {
position: fixed;
right: 30px;
bottom: 30px;
z-index: 90;
}
.quick_list {
display: flex;
flex-direction: column;
gap: 18px;
}
.quick_link {
display: block;
text-align: center;
}
.quick_icon {
display: flex;
align-items: center;
justify-content: center;
margin: 0px auto 6px;
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid var(--color_text_table_title);
background-color: #1E1E1E;
transition: background-color 0.2s ease-in-out;
}
.quick_link:hover .quick_icon {
background-color: var(--ld_color_point);
}
.quick_icon_img {
width: 24px;
height: 24px;
}
.quick_label {
display: block;
font-size: 13px;
font-weight: 500;
line-height: 1.2em;
white-space: nowrap;
color: var(--color_text_deco);
}
/* Leedohee - Quick menu END */
/* Leedohee - Footer START */
.footer {
padding: 44px 0px 40px;
background-color: var(--ld_color_bg_dark);
}
.footer_inner {
margin: 0px auto;
padding: 0px var(--ld_inner_padding);
max-width: var(--ld_inner_width);
text-align: center;
}
.footer_logo {
margin-bottom: 22px;
}
/* 로고 원본이 컬러라 푸터에서는 흰색으로 반전해 사용 */
.footer_logo_img {
margin: 0px auto;
width: 130px;
height: auto;
filter: brightness(0) invert(1);
}
.footer_info {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-bottom: 18px;
}
.footer_info_item {
display: flex;
align-items: center;
gap: 8px;
padding: 0px 26px;
font-size: 14px;
line-height: 1.6em;
color: var(--ld_color_text_light);
}
.footer_info_item + .footer_info_item {
border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.footer_icon {
width: 16px;
height: 16px;
}
.footer_label {
font-weight: 700;
}
.footer_value {
font-weight: 400;
opacity: 0.85;
}
.footer_value_link {
color: inherit;
}
.footer_copy {
font-size: 13px;
font-weight: 400;
line-height: 1.6em;
color: var(--ld_color_point);
}
.footer_link {
color: var(--ld_color_point);
transition: opacity 0.2s ease-in-out;
}
.footer_link:hover {
opacity: 0.75;
text-decoration: underline;
}
.footer_dot {
padding: 0px 6px;
color: var(--ld_color_point);
}
.footer_copy_text {
color: var(--ld_color_point);
}
/* Leedohee - Footer END */
/* Leedohee - 스크롤 효과 START */
/* 스크롤로 나타나는 요소의 시작 상태. 실제 움직임은 GSAP ScrollTrigger가 처리합니다.
내려가면 나타나고 올라가면 되돌아가며, 다시 내려오면 또 나타납니다. */
.ld_reveal,
.ld_reveal_foot {
opacity: 0;
transform: translateY(24px);
will-change: opacity, transform;
}
/* 번호 복사용 임시 요소 (화면에 보이지 않음) */
.ld_copy_helper {
position: fixed;
left: -9999px;
top: 0px;
opacity: 0;
}
/* 배너 카피 한 글자 */
.ld_char {
display: inline-block;
will-change: opacity, transform;
}
/* 운영체제에서 '동작 줄이기'를 켠 사용자에게는 애니메이션 없이 바로 보여줍니다 */
@media (prefers-reduced-motion: reduce) {
.ld_reveal,
.ld_reveal_foot,
.ld_char {
opacity: 1;
transform: none;
will-change: auto;
}
.main_visual_img {
transform: none;
will-change: auto;
}
}
/* Leedohee - 스크롤 효과 END */
/* Leedohee - 반응형 START */
@media all and (max-width: 1400px) {
:root {
--ld_inner_padding: 50px;
}
}
@media all and (max-width: 1200px) {
:root {
--ld_inner_padding: 50px;
--ld_visual_height: 560px;
--ld_sec_padding: 60px;
--ld_sec_gap: 60px;
--ld_title_gap: 40px;
--ld_care_banner_height: 320px;
--ld_map_height: 400px;
--ld_textarea_height: 300px;
--ld_sub_visual_height: 400px;
}
.gnb_list {
gap: 26px;
}
.tour_bt_prev {
left: 6px;
}
.tour_bt_next {
right: 6px;
}
}
@media all and (max-width: 1024px) {
:root {
--ld_inner_padding: 45px;
--ld_header_height: 66px;
--ld_visual_height: 460px;
--ld_sec_padding: 46px;
--ld_sec_gap: 46px;
--ld_title_gap: 34px;
--ld_care_banner_height: 260px;
--ld_map_height: 340px;
--ld_textarea_height: 260px;
--ld_sub_visual_height: 340px;
}
.header {
position: fixed;
top: auto;
bottom: 0;
width: 100%;
}
.header_logo_img {
height: 26px;
}
.quick {
right: 24px;
bottom: 90px;
}
.header_menu_bt {
display: block;
}
/* 헤더가 화면 아래에 있으므로 메뉴는 헤더 위쪽으로 열린다 */
.gnb {
position: absolute;
left: 0px;
right: 0px;
top: auto;
bottom: 100%;
overflow: hidden;
margin-left: 0px;
max-height: 0px;
visibility: hidden;
border-top: 1px solid var(--ld_color_line);
background-color: var(--ld_color_bg);
box-shadow: 0px -6px 14px rgba(0, 0, 0, 0.06);
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s;
}
.gnb.is_open {
max-height: 420px;
visibility: visible;
}
.gnb_list {
flex-direction: column;
align-items: stretch;
gap: 0px;
}
.gnb_item + .gnb_item {
border-top: 1px solid var(--ld_color_line);
}
.gnb_link {
display: block;
padding: 15px var(--ld_inner_padding);
}
.main_visual_copy {
bottom: 90px;
}
.quick_icon {
margin-bottom: 4px;
width: 48px;
height: 48px;
}
.quick_icon_img {
width: 20px;
height: 20px;
}
.quick_label {
font-size: 12px;
}
footer {
margin-bottom: var(--ld_header_height);
}
}
@media all and (max-width: 768px) {
:root {
--ld_inner_padding: 35px;
--ld_visual_height: 400px;
--ld_sec_padding: 50px;
--ld_sec_gap: 36px;
--ld_title_gap: 26px;
--ld_care_banner_height: 200px;
--ld_map_height: 280px;
--ld_textarea_height: 220px;
--ld_sub_visual_height: 260px;
}
.header_logo_img {
height: 24px;
}
.sec_title {
font-size: 24px;
}
.care_list {
/* 원래 `grid-template-columns: 1fr`만 있었으나 .care_list 는 flex 라 아무 효과가 없었다.
(기본틀의 오래된 잔재 — 의도는 「모바일에서 1열」이 맞다) 2026-09-10 */
flex-direction: column;
grid-template-columns: 1fr;
gap: 18px;
}
.care_thumb {
height: 180px;
}
.main_visual_text {
font-size: 18px;
}
.main_visual_text_point, .main_visual_em {
font-size: 22px;
}
.assoc_list {
flex-direction: column;
align-items: stretch;
}
.assoc_item {
width: 100%;
}
.assoc_link {
justify-content: center;
}
.footer_info_item {
padding: 4px 14px;
}
.footer {
padding: 36px 0px 32px;
}
}
@media all and (max-width: 480px) {
:root {
--ld_inner_padding: 25px;
--ld_visual_height: 360px;
--ld_sec_padding: 30px;
--ld_sec_gap: 30px;
--ld_title_gap: 22px;
--ld_care_banner_height: 160px;
--ld_map_height: 220px;
--ld_textarea_height: 180px;
--ld_sub_visual_height: 200px;
}
.header_logo_img {
height: 22px;
}
.main_visual_copy {
bottom: 76px;
}
.main_visual_text {
font-size: 16px;
line-height: 1.9em;
}
.main_visual_text br {
display: inline;
}
.main_visual_text_point, .main_visual_em {
word-break: keep-all;
font-size: 20px;
}
.care_thumb {
height: 160px;
}
.tour_slide {
height: 180px;
}
.footer_info {
flex-direction: column;
}
.footer_info_item + .footer_info_item {
border-left: 0;
}
.footer_copy {
font-size: 12px;
}
.quick_icon {
width: 44px;
height: 44px;
}
.footer {
padding: 30px 0px 26px;
}
}
/* Leedohee - 반응형 END */
/* Leedohee - 서브 비주얼 START */
/* 서브페이지 상단의 가로 전체 이미지 */
.sub_visual {
position: relative;
overflow: hidden;
}
.sub_visual_img {
width: 100%;
height: var(--ld_sub_visual_height);
object-fit: cover;
transform-origin: center center;
will-change: transform;
}
/* Leedohee - 서브 비주얼 END */
/* Leedohee - 병원소개 START */
/* 섹션 제목 아래 세로 구분선 */
.sec_line {
display: block;
margin: 0px auto 46px;
width: 1px;
height: 26px;
background-color: var(--ld_color_line);
}
.intro_body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.intro_text_area {
min-width: 0px;
}
.intro_lead {
margin-bottom: 26px;
font-size: 18px;
font-weight: 700;
line-height: 1.8em;
color: var(--ld_color_text);
}
.intro_text {
font-size: 15px;
font-weight: 400;
line-height: 2em;
color: var(--ld_color_text_sub);
}
.intro_text + .intro_text {
margin-top: 20px;
}
.intro_thumb {
min-width: 0px;
}
.intro_img {
width: 100%;
height: auto;
border-radius: 8px;
}
/* Leedohee - 병원소개 END */
/* Leedohee - 병원 사진 그리드 START */
.sec_gallery {
padding-top: 0px;
background-color: var(--ld_color_bg);
}
.gallery_list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
.gallery_item {
min-width: 0px;
overflow: hidden;
border-radius: 8px;
}
.gallery_img {
width: 100%;
height: 240px;
object-fit: cover;
transition: transform 0.35s ease-in-out;
}
.gallery_item:hover .gallery_img {
transform: scale(1.04);
}
/* Leedohee - 병원 사진 그리드 END */
/* Leedohee - 서브페이지 반응형 START */
@media all and (max-width: 1200px) {
.intro_body {
gap: 40px;
}
}
@media all and (max-width: 1024px) {
.gallery_img {
height: 200px;
}
}
@media all and (max-width: 768px) {
.sec_line {
margin-bottom: 32px;
height: 26px;
}
.intro_body {
grid-template-columns: 1fr;
gap: 30px;
}
/* 모바일에서는 사진을 글보다 먼저 보여줍니다 */
.intro_thumb {
order: -1;
}
.intro_lead {
font-size: 16px;
}
.gallery_list {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.gallery_img {
height: 170px;
}
}
@media all and (max-width: 480px) {
.gallery_img {
height: 130px;
}
}
/* Leedohee - 서브페이지 반응형 END */
/* Leedohee - 진료안내 START */
/* 진료안내(care.html) 전용 영역입니다. XD sample_web_05 기준. */
/* 진료안내 본문은 홈·병원소개보다 좁은 폭을 씁니다 (디자인 기준 내용폭 952px) */
.sec_inner_narrow {
max-width: 1200px;
}
/* 상단 타이틀 (사진 비주얼 없이 제목만) */
.sec_care_head {
padding-bottom: 0px;
}
.care_head_title {
margin-bottom: 14px;
}
.care_head_sub {
font-size: 20px;
font-weight: 400;
line-height: 1.4em;
text-align: center;
color: var(--ld_color_text);
}
.sec_care_head .sec_line {
margin: 16px auto 36px;
}
/* 서브 섹션 제목 */
.care_sub_title {
margin-bottom: var(--ld_title_gap);
font-size: 28px;
}
/* 진료대상 */
.sec_target {
background-color: var(--ld_color_bg_sub);
}
.target_body {
display: grid;
grid-template-columns: 464fr 452fr;
gap: 36px;
align-items: start;
}
/* 그리드 자식의 기본 min-width:auto 로 인한 가로 넘침 방지 */
.target_body > * {
min-width: 0px;
}
.target_thumb {
overflow: hidden;
border-radius: 8px;
}
.target_img {
display: block;
width: 100%;
aspect-ratio: 464 / 383;
object-fit: cover;
}
.target_label {
display: inline-block;
margin-bottom: 14px;
padding: 7px 20px;
border: 1px solid var(--ld_color_line);
border-radius: 4px;
background-color: var(--ld_color_bg);
font-size: 18px;
font-weight: 800;
line-height: 1.3em;
color: var(--ld_color_text);
}
.target_text { display:flex; flex-wrap:wrap; gap:8px;
margin-bottom: 30px;
font-size: 16px;
font-weight: 400;
line-height: 1.7em;
color: var(--ld_color_text);
}
.target_text:last-child {
margin-bottom: 0px;
}
/* 치료방법 */
.treat_text {
font-size: 16px;
font-weight: 400;
line-height: 1.7em;
text-align: center;
color: var(--ld_color_text);
}
/* 진료안내 배너 */
.care_banner {
overflow: hidden;
}
.care_banner_img {
display: block;
width: 100%;
height: var(--ld_care_banner_height);
object-fit: cover;
}
/* 배너 아래 문구 (명조) */
.care_lead {
font-size: 20px;
font-weight: 400;
line-height: 2em;
text-align: center;
color: #000000;
}
.care_lead_strong {
font-size: 24px;
font-weight: 800;
}
/* 진료 시간 */
.hours_badge {
display: inline-flex;
align-items: center;
gap: 7px;
margin-bottom: 18px;
padding: 9px 20px;
border-radius: 999px;
background-image: linear-gradient(96deg, #3644D5 0%, #52208B 100%);
}
.hours_badge_icon {
width: 16px;
height: 16px;
}
.hours_badge_text {
font-size: 18px;
font-weight: 800;
line-height: 1.2em;
color: var(--ld_color_text_light);
}
.hours_box {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 16px;
padding: 18px 24px;
border: 1px solid var(--ld_color_line);
border-radius: 8px;
}
.hours_time,
.hours_off {
font-size: 18px;
font-weight: 400;
line-height: 1.5em;
color: var(--ld_color_text);
}
.hours_off {
position: relative;
padding-left: 25px;
}
.hours_off::before {
content: "";
position: absolute;
top: 50%;
left: 0px;
transform: translateY(-50%);
width: 1px;
height: 15px;
background-color: var(--ld_color_line);
}
/* 예약 안내 문구 */
.hours_note {
margin-bottom: 36px;
}
.hours_note_item {
display: flex;
align-items: flex-start;
gap: 7px;
}
.hours_note_text {
font-size: 16px;
font-weight: 400;
line-height: 1.7em;
color: var(--ld_color_caution);
}
.hours_note_icon {
flex: 0 0 auto;
margin-top: 6px;
width: 16px;
height: 16px;
}
/* 예약 버튼 2종 */
.hours_bts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.hours_bts > * {
min-width: 0px;
}
.hours_bt {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
height: 56px;
border-radius: 10px;
transition: filter 0.3s;
}
.hours_bt:hover {
filter: brightness(1.07);
}
.hours_bt_icon {
flex: 0 0 auto;
width: 20px;
height: 20px;
}
.hours_bt_text {
font-size: 18px;
font-weight: 800;
line-height: 1.2em;
color: var(--ld_color_text_light);
}
.hours_bt_call {
background-image: linear-gradient(96deg, #36D580 0%, #20AB70 100%);
}
.hours_bt_mail {
background-image: linear-gradient(96deg, #3644D5 0%, #52208B 100%);
}
/* Leedohee - 진료안내 END */
/* Leedohee - 진료안내 반응형 START */
@media all and (max-width: 768px) {
.care_sub_title {
font-size: 24px;
}
.care_head_sub {
font-size: 18px;
}
.target_body {
grid-template-columns: 1fr;
gap: 26px;
}
.target_img {
aspect-ratio: 16 / 10;
}
.care_lead {
font-size: 17px;
}
.care_lead_strong {
font-size: 20px;
}
.hours_box {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 18px;
}
.hours_time,
.hours_off {
font-size: 16px;
}
.hours_off {
padding-left: 0px;
}
.hours_off::before {
display: none;
}
.hours_bts {
grid-template-columns: 1fr;
gap: 12px;
}
.hours_bt {
height: 52px;
}
.hours_bt_text {
font-size: 16px;
}
}
@media all and (max-width: 480px) {
.care_head_sub {
font-size: 16px;
}
.target_label {
padding: 6px 16px;
font-size: 16px;
}
.target_text,
.treat_text,
.hours_note_text {
font-size: 15px;
}
.care_lead {
font-size: 15px;
line-height: 1.9em;
}
.care_lead_strong {
font-size: 18px;
}
}
/* Leedohee - 진료안내 반응형 END */
/* Leedohee - 의료진 START */
/* 의료진(doctor.html) 전용 영역입니다. XD sample_web_06 기준. */
.sec_dr {
padding: var(--ld_sec_padding) 0px;
}
/* 원장소개 제목 (XD 24px ExtraBold · 왼쪽 정렬) */
.dr_title {
margin-bottom: var(--ld_title_gap);
font-size: 24px;
}
/* 사진 + 학력/약력 2단 (XD 358 : 570 · 간격 24) */
.dr_body {
display: grid;
grid-template-columns: 358fr 570fr;
gap: 24px;
align-items: start;
}
/* 그리드 자식의 기본 min-width:auto 로 인한 가로 넘침 방지 */
.dr_body > * {
min-width: 0px;
}
.dr_thumb {
overflow: hidden;
border-radius: 10px;
}
.dr_img {
display: block;
width: 100%;
aspect-ratio: 358 / 398;
object-fit: cover;
object-position: center center;
}
.dr_career {
padding-top: 20px;
}
/* 소제목 (국문 + 영문) */
.dr_sub_title {
margin-bottom: 7px;
font-size: 18px;
font-weight: 700;
line-height: 1.2em;
color: var(--ld_color_text);
}
.dr_sub_eng {
margin-bottom: 32px;
font-size: 13px;
font-weight: 400;
line-height: 1.1em;
letter-spacing: 0.02em;
color: var(--ld_color_text_gray);
}
/* 목록 */
.dr_list_item {
margin-bottom: 14px;
font-size: 16px;
font-weight: 400;
line-height: 1.5em;
color: var(--ld_color_text);
}
.dr_list_item:last-child {
margin-bottom: 0px;
}
/* 구분선 */
.dr_divider {
display: block;
margin: var(--ld_sec_gap) 0px;
width: 100%;
height: 1px;
background-color: var(--ld_color_line);
}
/* 현재 활동 및 소속 — 2단 배치 (XD 464 + 간격 24 + 464) */
.dr_list_col {
columns: 2;
column-gap: 24px;
}
.dr_list_col .dr_list_item {
break-inside: avoid;
}
/* Leedohee - 의료진 END */
/* Leedohee - 의료진 반응형 START */
@media all and (max-width: 1024px) {
.dr_body {
gap: 20px;
}
.dr_career {
padding-top: 0px;
}
}
@media all and (max-width: 768px) {
.dr_body {
grid-template-columns: 1fr;
gap: 26px;
}
.dr_img {
aspect-ratio: 4 / 3;
}
.dr_sub_eng {
margin-bottom: 20px;
}
.dr_list_col {
columns: 1;
}
}
@media all and (max-width: 480px) {
.dr_title {
font-size: 22px;
}
.dr_sub_title {
font-size: 17px;
}
.dr_list_item {
margin-bottom: 12px;
font-size: 15px;
}
}
/* Leedohee - 의료진 반응형 END */
/* Leedohee - 오시는 길 START */
/* 오시는 길(visit.html) 전용 영역입니다. XD sample_web_07 기준. */
/* 상단 타이틀 — 영문 라벨이 국문 제목 위에 가운데로 얹힙니다 (XD 기준) */
.sec_visit_head {
padding-bottom: 0px;
}
.visit_head {
display: inline-block;
text-align: center;
}
.visit_title {
margin-bottom: 15px;
font-size: 24px;
}
/* 지도 — 구글 지도 실지도 임베드 (전체 폭) */
.visit_map {
overflow: hidden;
font-size: 0px;
background-color: var(--ld_color_bg_sub);
}
.visit_map_frame {
display: block;
width: 100%;
height: var(--ld_map_height);
border: 0px;
}
/* 교통편 2단 */
.way_list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: stretch;
}
/* 그리드 자식의 기본 min-width:auto 로 인한 가로 넘침 방지 */
.way_list > * {
min-width: 0px;
}
.way_item {
display: flex;
flex-direction: column;
}
/* 주차시설 — 2단 아래 전체 폭 한 줄 */
.way_item_full {
grid-column: 1 / -1;
}
.way_title {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.way_icon {
flex: 0 0 auto;
width: 28px;
height: 28px;
}
.way_title_text {
font-size: 16px;
font-weight: 800;
line-height: 1.3em;
color: var(--ld_color_text);
}
.way_box {
flex: 1 1 auto;
padding: 24px;
border-radius: 10px;
background-color: var(--ld_color_bg_sub);
}
.way_text {
margin-bottom: 15px;
font-size: 16px;
font-weight: 400;
line-height: 1.7em;
color: var(--ld_color_text);
}
.way_text:last-child {
margin-bottom: 0px;
}
/* 진료 시간 — 오시는 길에서는 옅은 배경 띠 위에 놓입니다 */
.sec_hours_band {
background-color: var(--ld_color_bg_sub);
}
/* 진료시간 2단 (흰 박스 2개) */
.visit_hours {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 25px;
}
.visit_hours > * {
min-width: 0px;
}
.visit_hours_item {
display: flex;
align-items: center;
min-height: 36px;
padding: 6px 16px;
border-radius: 8px;
background-color: var(--ld_color_bg);
font-size: 18px;
font-weight: 400;
line-height: 1.5em;
color: var(--ld_color_text);
}
.visit_hours_off {
font-weight: 800;
}
/* Leedohee - 오시는 길 END */
/* Leedohee - 오시는 길 반응형 START */
@media all and (max-width: 1024px) {
.way_box {
padding: 20px;
}
}
@media all and (max-width: 768px) {
.way_list {
grid-template-columns: 1fr;
gap: 20px;
}
.way_title {
gap: 10px;
margin-bottom: 10px;
}
.way_icon {
width: 24px;
height: 24px;
}
.visit_hours {
grid-template-columns: 1fr;
gap: 10px;
}
.visit_hours_item {
font-size: 16px;
}
}
@media all and (max-width: 480px) {
.way_box {
padding: 16px;
}
.way_text {
margin-bottom: 12px;
font-size: 15px;
}
}
/* Leedohee - 오시는 길 반응형 END */
/* Leedohee - 문의 START */
/* 문의(contact.html) 전용 영역입니다. XD sample_web_08 기준. */
/* 상단 비주얼 위에 얹히는 명조 문구 */
.sub_visual_copy {
position: absolute;
top: 50%;
left: 50%;
z-index: 10;
padding: 0px 20px;
width: 100%;
transform: translate(-50%, -50%);
font-size: 20px;
font-weight: 400;
line-height: 2em;
text-align: center;
color: var(--ld_color_text_light);
}
.sub_visual_text {
display: block;
}
.contact_title {
margin-bottom: 44px;
font-size: 24px;
}
/* 이름 / 이메일 2단 */
.form_row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
margin-bottom: 26px;
}
/* 그리드 자식의 기본 min-width:auto 로 인한 가로 넘침 방지 */
.form_row > * {
min-width: 0px;
}
.form_field {
margin-bottom: 26px;
}
.form_row .form_field {
margin-bottom: 0px;
}
.form_label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 400;
line-height: 1.4em;
color: var(--ld_color_text);
}
.contact_form .form_input,
.contact_form .form_textarea {
display: block;
width: 100%;
height: 40px;
padding: 0px 18px;
border: 1px solid var(--ld_color_form_line);
border-radius: 6px;
background-color: var(--ld_color_bg);
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.4em;
color: var(--ld_color_text);
transition: border-color 0.3s;
}
.contact_form .form_textarea {
height: var(--ld_textarea_height);
padding: 14px 18px;
line-height: 1.7em;
resize: vertical;
}
/* 기본틀의 :focus / :hover 규칙보다 가중치를 높게 잡습니다 */
.contact_form .form_input:focus:not([disabled]):not([readonly]),
.contact_form .form_textarea:focus {
outline: none;
border-color: var(--ld_color_point);
}
.contact_form .form_input:hover:not([disabled]):not([readonly]):not(:focus):not(:active) {
border-color: var(--ld_color_form_line);
}
.contact_form .form_input::placeholder,
.contact_form .form_textarea::placeholder {
color: var(--ld_color_text_placeholder);
}
/* 개인정보 수집·이용 동의 */
.form_agree {
margin-bottom: 36px;
}
.form_agree_label {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
}
.form_agree_check {
flex: 0 0 auto;
width: 18px;
height: 18px;
margin: 0px;
}
.form_agree_text {
font-size: 15px;
font-weight: 400;
line-height: 1.4em;
color: var(--ld_color_text);
}
.form_agree_desc {
display: flex;
align-items: flex-start;
gap: 7px;
margin-top: 6px;
}
.form_agree_icon {
flex: 0 0 auto;
margin-top: 3px;
width: 14px;
height: 14px;
}
.form_agree_desc_text {
font-size: 13px;
font-weight: 400;
line-height: 1.6em;
color: var(--ld_color_text_gray);
}
/* 전송 버튼 (XD 464×56) */
.form_submit {
display: flex;
justify-content: center;
}
.form_bt {
width: 464px;
max-width: 100%;
border: 0px;
cursor: pointer;
}
/* Leedohee - 문의 END */
/* Leedohee - 문의 반응형 START */
@media all and (max-width: 768px) {
.sub_visual_copy {
font-size: 16px;
line-height: 1.9em;
}
.contact_title {
margin-bottom: 28px;
}
.form_row {
grid-template-columns: 1fr;
gap: 0px;
margin-bottom: 0px;
}
.form_row .form_field {
margin-bottom: 20px;
}
.form_field {
margin-bottom: 20px;
}
}
@media all and (max-width: 480px) {
.sub_visual_copy {
font-size: 14px;
}
.form_agree_text,
.form_input,
.form_textarea {
font-size: 14px;
}
.form_agree_desc_text {
font-size: 12px;
}
}
/* Leedohee - 문의 반응형 END */
/* ── 문의폼 전송 상태·스팸차단 (contact_form.js) 2026-09-09 ── */
.form_hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* 전송 상태 알림 — 로딩 · 성공 · 실패를 같은 자리에서 같은 방식으로 보여준다 (2026-09-15) */
.form_msg{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:14px 16px;
border:1px solid transparent;border-radius:8px;font-size:15px;line-height:1.6}
.form_msg::before{content:"";flex:0 0 auto;width:18px;height:18px;margin-top:2px;box-sizing:border-box;
background-repeat:no-repeat;background-position:center;background-size:18px 18px}
.form_msg.is-busy{background:var(--ld_color_bg_sub, #f4f7f9);color:var(--ld_color_text);border-color:var(--ld_color_form_line)}
.form_msg.is-busy::before{border:2px solid var(--ld_color_form_line);border-top-color:var(--ld_color_point);
border-radius:50%;animation:form_msg_spin 0.7s linear infinite}
.form_msg.is-ok{background:#eaf6ef;color:#1f7a4d;border-color:#bfe3cd}
.form_msg.is-ok::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8' fill='%231f7a4d'/%3E%3Cpath d='M5.2 9.3L7.8 11.8L12.8 6.4' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.form_msg.is-err{background:#fdecec;color:#b3261e;border-color:#f3c3c0}
.form_msg.is-err::before{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='9' cy='9' r='8' fill='%23b3261e'/%3E%3Cpath d='M9 4.8V10.2' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='12.9' r='1' fill='%23ffffff'/%3E%3C/svg%3E")}
@keyframes form_msg_spin{to{transform:rotate(360deg)}}
/* 전송 버튼 — 누른 뒤에도 「보내는 중」이 보이게 한다 */
.form_bt.is-busy{position:relative;opacity:.75;pointer-events:none}
.form_bt.is-busy::after{content:"";position:absolute;top:50%;right:24px;margin-top:-9px;
width:18px;height:18px;box-sizing:border-box;border:2px solid rgba(255,255,255,0.45);
border-top-color:#ffffff;border-radius:50%;animation:form_msg_spin 0.7s linear infinite}
/* 움직임을 줄이도록 설정한 방문자에게는 회전을 멈춘다 */
@media (prefers-reduced-motion: reduce){
.form_msg.is-busy::before,
.form_bt.is-busy::after{animation:none}
}
/* ///////////////////////////////////////////////////////////
Leedohee - 게시판 (정신건강상식) START
/////////////////////////////////////////////////////////// */
.sec_bbs { padding-bottom: calc(var(--ld_sec_padding) * 1.6); }
/* ── 검색 ── */
.bbs_search { display:flex; gap:8px; align-items:stretch; justify-content:flex-end;
padding-bottom:20px; border-bottom:1px solid var(--ld_color_line); }
.bbs_search_select { height:44px; padding:0px 34px 0px 14px; border:1px solid var(--ld_color_form_line);
border-radius:6px; background-color:var(--ld_color_bg); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 12px center;
font-family:inherit; font-size:15px; color:var(--ld_color_text);
-webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.bbs_search_input { width:260px; height:44px; padding:0px 16px; border:1px solid var(--ld_color_form_line);
border-radius:6px; background-color:var(--ld_color_bg);
font-family:inherit; font-size:15px; color:var(--ld_color_text); transition:border-color 0.3s; }
.bbs_search_input::placeholder { color:var(--ld_color_text_placeholder); }
.bbs_search_input:focus:not([disabled]):not([readonly]) { outline:none; border-color:var(--ld_color_point); }
.bbs_search_input:hover:not([disabled]):not([readonly]):not(:focus) { border-color:var(--ld_color_form_line); }
.bbs_search_bt { display:inline-flex; align-items:center; gap:6px; height:44px; padding:0px 22px;
border:0px; border-radius:6px; background-color:var(--ld_color_point);
font-family:inherit; font-size:15px; font-weight:600; color:var(--ld_color_text_light);
cursor:pointer; transition:opacity 0.3s; }
.bbs_search_bt:hover { opacity:0.85; }
.bbs_search_icon { display:block; width:18px; height:18px; background-color:#FFFFFF;
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='7.8' cy='7.8' r='5.6' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M11.9 11.9L16 16' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Ccircle cx='7.8' cy='7.8' r='5.6' stroke='%23ffffff' stroke-width='1.6'/%3E%3Cpath d='M11.9 11.9L16 16' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center center;
-webkit-mask-size:contain; mask-size:contain; }
/* ── 건수 ── */
.bbs_count { padding:18px 2px; font-size:15px; color:var(--ld_color_text_sub); }
.bbs_count_num { font-weight:700; color:var(--ld_color_point); }
/* ── 목록 ── */
.bbs_table_wrap { overflow-x:auto; }
.bbs_table { width:100%; border-collapse:collapse; table-layout:fixed; }
.bbs_col_no { width:80px; }
.bbs_col_date { width:120px; }
.bbs_thead th { padding:14px 10px; border-top:2px solid var(--ld_color_text);
border-bottom:1px solid var(--ld_color_line);
font-size:15px; font-weight:600; color:var(--ld_color_text); text-align:center; }
.bbs_row { border-bottom:1px solid var(--ld_color_line); transition:background-color 0.2s; }
.bbs_row:hover { background-color:var(--ld_color_bg_sub); }
.bbs_row td { padding:16px 10px; font-size:16px; color:var(--ld_color_text); vertical-align:middle; }
.bbs_no { text-align:center; font-size:15px; color:var(--ld_color_text_gray); }
.bbs_date { text-align:center; font-size:15px; color:var(--ld_color_text_sub); white-space:nowrap; }
.bbs_subject { text-align:left; }
.bbs_subject_bt { display:block; width:100%; padding:0px; border:0px; background:none;
font-family:inherit; font-size:16px; font-weight:500; line-height:1.5em; color:var(--ld_color_text);
text-align:left; cursor:pointer; transition:color 0.2s;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bbs_row:hover .bbs_subject_bt { color:var(--ld_color_point); }
.bbs_snippet { display:block; padding-top:6px; font-size:14px; line-height:1.6em; color:var(--ld_color_text_sub);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bbs_mark { padding:0px 2px; background-color:rgba(0,185,111,0.15); color:var(--ld_color_point); font-weight:600; }
/* ── 결과 없음 ── */
.bbs_empty { padding:70px 20px; border-bottom:1px solid var(--ld_color_line);
font-size:16px; color:var(--ld_color_text_sub); text-align:center; }
/* ── 페이지 ── */
.bbs_paging[hidden] { display:none; }
.bbs_paging { display:flex; gap:6px; align-items:center; justify-content:center; padding-top:40px; }
.bbs_page_bt { min-width:38px; height:38px; padding:0px 10px; border:1px solid var(--ld_color_line);
border-radius:6px; background-color:var(--ld_color_bg);
font-family:inherit; font-size:15px; color:var(--ld_color_text_sub);
cursor:pointer; transition:all 0.2s; }
.bbs_page_bt:hover:not([disabled]) { border-color:var(--ld_color_point); color:var(--ld_color_point); }
.bbs_page_bt.is_on { border-color:var(--ld_color_point); background-color:var(--ld_color_point);
color:var(--ld_color_text_light); font-weight:600; }
.bbs_page_bt[disabled] { opacity:0.35; cursor:default; }
/* ── 본문 ── */
.bbs_view_head { padding:8px 0px 24px; border-top:2px solid var(--ld_color_text);
border-bottom:1px solid var(--ld_color_line); }
.bbs_view_title { padding-top:26px; font-size:26px; font-weight:700; line-height:1.45em; color:var(--ld_color_text); }
.bbs_view_title:focus { outline:none; }
.bbs_view_meta { padding-top:12px; font-size:15px; color:var(--ld_color_text_sub); }
.bbs_view_body { padding:40px 4px 50px; font-size:16px; line-height:1.9em; color:var(--ld_color_text);
border-bottom:1px solid var(--ld_color_line); word-break:keep-all; overflow-wrap:break-word; }
.bbs_view_body p { padding-bottom:1.5em; font-size:inherit; line-height:inherit; color:inherit; }
/* ⚠️ 기본틀 331행에 `p { font-size:15px; line-height:1.3em; color:… }` 가 있어서, 여기서 inherit 로 되돌려 주지 않으면
①본문 글자가 15px 로 작아지고 ②줄간격이 1.3em 으로 좁아지고 ③`
` 밖의 글자만 컨테이너 크기로 남아 한 글 안에서 크기가 섞인다.
크기·줄간격은 `.bbs_view_body` 한 곳에서만 정한다 → 모바일 축소(768/480px)도 그대로 작동한다 (2026-09-10 I-42) */
.bbs_view_body strong, .bbs_view_body b { font-weight:700; }
.bbs_view_body ul, .bbs_view_body ol { padding:0px 0px 1.1em 1.2em; }
.bbs_view_body li { padding-bottom:0.4em; list-style:disc; }
.bbs_view_body ol li { list-style:decimal; }
.bbs_view_body a { color:var(--ld_color_point); text-decoration:underline; }
.bbs_view_img { display:block; max-width:100%; height:auto; margin:14px 0px; }
.bbs_view_body table { width:100%; border-collapse:collapse; margin-bottom:1.1em; }
.bbs_view_body td, .bbs_view_body th { padding:10px; border:1px solid var(--ld_color_line); font-size:16px; }
.bbs_view_none { padding:40px 0px; color:var(--ld_color_text_sub); text-align:center; }
/* ── 이전·다음 ── */
.bbs_view_nav { border-bottom:1px solid var(--ld_color_line); }
.bbs_view_nav_bt { display:flex; gap:20px; align-items:center; width:100%; padding:16px 4px;
border:0px; border-bottom:1px solid var(--ld_color_line); background:none;
font-family:inherit; text-align:left; cursor:pointer; transition:background-color 0.2s; }
.bbs_view_nav_bt:last-child { border-bottom:0px; }
.bbs_view_nav_bt:hover:not([disabled]) { background-color:var(--ld_color_bg_sub); }
.bbs_view_nav_bt[disabled] { cursor:default; }
.bbs_view_nav_label { flex:0 0 auto; width:64px; font-size:14px; font-weight:600; color:var(--ld_color_text_sub); }
.bbs_view_nav_title { flex:1 1 auto; font-size:16px; color:var(--ld_color_text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bbs_view_nav_bt[disabled] .bbs_view_nav_title { color:var(--ld_color_text_gray); }
.bbs_view_nav_bt:hover:not([disabled]) .bbs_view_nav_title { color:var(--ld_color_point); }
/* ── 목록으로 ── */
.bbs_view_foot[hidden] { display:none; }
.bbs_view_foot { display:flex; justify-content:center; padding-top:40px; }
.bbs_back_bt { height:48px; padding:0px 44px; border:1px solid var(--ld_color_text);
border-radius:6px; background-color:var(--ld_color_bg);
font-family:inherit; font-size:16px; font-weight:600; color:var(--ld_color_text);
cursor:pointer; transition:all 0.25s; }
.bbs_back_bt:hover { background-color:var(--ld_color_text); color:var(--ld_color_text_light); }
/* ── 게시판 반응형 ── */
@media all and (max-width:768px) {
/* 검색 : 선택박스 한 줄 + 입력·버튼 한 줄 */
.bbs_search { flex-wrap:wrap; gap:8px; }
.bbs_search_select { flex:1 1 100%; }
.bbs_search_input { flex:1 1 0px; width:0px; min-width:0px; }
.bbs_search_bt { flex:0 0 auto; padding:0px 20px; }
/* 표 → 카드형 목록 (모바일에서 가로 잘림 방지) */
.bbs_table_wrap { overflow-x:visible; }
.bbs_table, .bbs_tbody, .bbs_row, .bbs_row td { display:block; width:100%; }
.bbs_table { border-top:2px solid var(--ld_color_text); }
.bbs_thead { display:none; }
.bbs_row { padding:16px 4px; }
.bbs_row td { padding:0px; border:0px; }
.bbs_row td.bbs_no { display:none; } /* .bbs_row td(0,1,1) 를 이기도록 (0,2,1) — P-26 */
.bbs_subject_bt { font-size:16px; font-weight:600; line-height:1.5em; white-space:normal;
overflow:visible; text-overflow:clip; }
.bbs_snippet { padding-top:8px; white-space:normal;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.bbs_row td.bbs_date { display:block; padding-top:9px; font-size:13px;
color:var(--ld_color_text_gray); text-align:left; }
.bbs_count { padding:16px 4px; font-size:14px; }
.bbs_empty { padding:56px 16px; font-size:15px; }
.bbs_paging { padding-top:32px; }
.bbs_view_title { font-size:21px; }
.bbs_view_body { padding:30px 2px 36px; font-size:16px; line-height:1.85em; }
.bbs_view_nav_bt { gap:12px; padding:14px 2px; }
.bbs_view_nav_label { width:52px; font-size:13px; }
.bbs_view_nav_title { font-size:15px; }
}
@media all and (max-width:480px) {
.bbs_search_input { flex:1 1 auto; }
.bbs_search_bt { padding:0px 16px; }
.bbs_search_text { display:none; }
.bbs_subject_bt { font-size:15px; }
.bbs_page_bt { min-width:34px; height:34px; padding:0px 8px; font-size:14px; }
.bbs_back_bt { width:100%; padding:0px; }
.bbs_view_body { font-size:15px; }
}
/* ///// Leedohee - 게시판 (정신건강상식) END ///// */
/* ///////////////////////////////////////////////////////////
Leedohee - 항목 클릭 → 글 팝업 START
/////////////////////////////////////////////////////////// */
/* 진료대상 안에서 글이 연결된 항목 */
/* ── 칩(chip) : 진료대상·진료영역의 용어 표시 단위 ──────────────────
· .chip = 일반 용어 (표시만)
· .chip_bt = 연결된 글이 있어 누르면 팝업이 열리는 용어
· .chip_etc = 「등」처럼 용어가 아닌 꼬리말 */
.chip, .chip_bt, .chip_etc { display:inline-flex; align-items:center; height:32px;
padding:0px 13px; border:0px; border-radius:6px;
font-family:inherit; font-size:15px; font-weight:400; line-height:1; letter-spacing:-0.01em;
background-color:#F0F0F0; color:var(--ld_color_text); }
/* 배경이 흰색(홈 카드)일 때도, 연회색(#F9F9F9 진료대상)일 때도 읽히도록 한 단계 진한 회색 */
.chip_etc { padding:0px 4px; background-color:transparent; color:var(--ld_color_text_sub); }
/* 연결할 글이 없거나, 어느 글에 연결할지 원장님 확인이 필요한 용어 : 배경·커서·hover 없이 글자만 (2026-09-10) */
.chip_plain { display:inline-flex; align-items:center; height:32px; padding:0px 8px;
font-size:15px; font-weight:400; line-height:1; letter-spacing:-0.01em;
color:var(--ld_color_text); }
/* 글이 연결된 칩 : 색은 일반 칩과 똑같이 두고, 손가락 커서와 hover 로만 구분한다 (2026-09-10 대표님 지시) */
.chip_bt { cursor:pointer; transition:background-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) {
.chip_bt:hover { background-color:var(--ld_color_point); color:#FFFFFF; }
}
.chip_bt:focus-visible { outline:2px solid var(--ld_color_point); outline-offset:2px; }
body.is_pop_open { overflow:hidden; }
.art_pop { position:fixed; top:0px; left:0px; z-index:200; display:flex; align-items:center;
justify-content:center; width:100%; height:100%; padding:30px 20px; }
/* ⚠️ display:flex 는 hidden 속성을 덮어쓰므로 반드시 함께 둔다 (2026-09-09 I-34) */
.art_pop[hidden] { display:none; }
.art_pop_dim { position:absolute; top:0px; left:0px; width:100%; height:100%;
background-color:rgba(0,0,0,0.5); cursor:pointer; }
.art_pop_box { position:relative; display:flex; flex-direction:column;
width:100%; max-width:760px; max-height:100%; border-radius:10px;
background-color:var(--ld_color_bg); overflow:hidden;
box-shadow:0px 18px 50px rgba(0,0,0,0.22); }
.art_pop_head { flex:0 0 auto; padding:32px 60px 22px 34px; border-bottom:1px solid var(--ld_color_line); }
.art_pop_eng { padding-bottom:8px; font-size:13px; font-weight:600; letter-spacing:0.06em;
color:var(--ld_color_point); text-transform:uppercase; }
.art_pop_title { font-size:23px; font-weight:700; line-height:1.45em; color:var(--ld_color_text); }
.art_pop_date { padding-top:10px; font-size:14px; color:var(--ld_color_text_sub); }
.art_pop_close { position:absolute; top:22px; right:20px; width:38px; height:38px;
border:0px; border-radius:50%; background:none; cursor:pointer; transition:background-color 0.2s; }
.art_pop_close:hover { background-color:var(--ld_color_bg_sub); }
.art_pop_close::before, .art_pop_close::after { position:absolute; top:50%; left:50%;
width:17px; height:1.6px; background-color:var(--ld_color_text); content:""; }
.art_pop_close::before { transform:translate(-50%,-50%) rotate(45deg); }
.art_pop_close::after { transform:translate(-50%,-50%) rotate(-45deg); }
.art_pop_body { flex:1 1 auto; padding:30px 34px; overflow-y:auto;
font-size:16px; line-height:1.9em; color:var(--ld_color_text);
word-break:keep-all; overflow-wrap:break-word; -webkit-overflow-scrolling:touch; }
.art_pop_body p { padding-bottom:1.5em; font-size:inherit; line-height:inherit; color:inherit; } /* 같은 이유 — 크기·줄간격은 .art_pop_body 에서만 (I-42) */
.art_pop_body strong, .art_pop_body b { font-weight:700; }
.art_pop_body ul, .art_pop_body ol { padding:0px 0px 1.1em 1.2em; }
.art_pop_body li { padding-bottom:0.4em; list-style:disc; }
.art_pop_body ol li { list-style:decimal; }
.art_pop_body a { color:var(--ld_color_point); text-decoration:underline; }
.art_pop_foot { flex:0 0 auto; display:flex; justify-content:flex-end;
padding:16px 34px; border-top:1px solid var(--ld_color_line); background-color:var(--ld_color_bg_sub); }
.art_pop_more { font-size:15px; font-weight:600; color:var(--ld_color_point); }
.art_pop_more::after { padding-left:6px; content:"›"; }
.art_pop_more:hover { text-decoration:underline; }
@media all and (max-width:768px) {
.art_pop { padding:0px; }
.art_pop_box { max-width:none; height:100%; max-height:none; border-radius:0px; }
.art_pop_head { padding:24px 56px 18px 22px; }
.art_pop_title { font-size:19px; }
.art_pop_close { top:16px; right:12px; }
.art_pop_body { padding:24px 22px; font-size:15px; line-height:1.85em; }
.art_pop_foot { padding:14px 22px; }
}
/* ///// Leedohee - 항목 클릭 → 글 팝업 END ///// */
/* ///////////////////////////////////////////////////////////
Leedohee - GNB 드롭다운 (병원소개) START
/////////////////////////////////////////////////////////// */
.gnb_item_has { position: relative; }
/* 상위 항목 = 버튼 (링크가 아니라 펼침 버튼) */
.gnb_top { display:inline-flex; align-items:center; gap:6px;
border:0px; background:none; font-family:inherit; cursor:pointer; }
.gnb_top_text { line-height:1.2em; }
/* 화살표 : icon_arrow_down.svg 를 data URI 로 인라인 + 마스크 → 글자색(currentColor)을 그대로 따라감
(외부 svg 파일을 쓰지 않는 이유 : 이미지 파일로 저장·전송하면 C2PA 메타데이터가 붙어 233B → 8KB 로 불어남. 2026-09-09 I-36) */
.gnb_arrow { display:block; width:11px; height:7px; background-color:currentColor;
-webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center;
mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23777777' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center center;
-webkit-mask-size:contain; mask-size:contain;
transition:transform 0.3s ease; }
.gnb_item_has.is_open > .gnb_top .gnb_arrow { transform:rotate(180deg); }
/* 하위 목록 */
.gnb_sub { position:absolute; top:100%; left:50%; z-index:30;
min-width:150px; padding:10px 0px; margin-top:14px;
border:1px solid var(--ld_color_line); border-radius:8px;
background-color:var(--ld_color_bg); box-shadow:0px 10px 26px rgba(0,0,0,0.10);
opacity:0; visibility:hidden;
transform:translate(-50%, -6px);
transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; }
.gnb_item_has.is_open > .gnb_sub { opacity:1; visibility:visible; transform:translate(-50%, 0px); }
/* 마우스가 메뉴와 하위 사이 빈틈을 지나갈 때 닫히지 않도록 */
.gnb_sub::before { position:absolute; top:-14px; left:0px; width:100%; height:14px; content:""; }
.gnb_sub_link { display:block; padding:9px 20px; font-size:15px; font-weight:400;
line-height:1.4em; white-space:nowrap; color:var(--ld_color_text_sub);
transition:color 0.2s, background-color 0.2s; }
/* 마우스가 있는 기기에서만 hover — 터치 기기에서 색이 남는 것을 막는다 */
@media (hover: hover) {
.gnb_sub_link:hover { background-color:var(--ld_color_bg_sub); color:var(--ld_color_point); }
}
.gnb_sub_item.is_active .gnb_sub_link { font-weight:700; color:var(--ld_color_point); }
/* ── 모바일 : 아코디언 ── */
@media all and (max-width:1024px) {
.gnb_item_has { position:static; }
.gnb_top { justify-content:space-between; width:100%; }
.gnb_arrow { width:13px; height:8px; }
.gnb_sub { position:static; left:auto; top:auto;
min-width:0px; padding:0px; margin:0px;
border:0px; border-radius:0px; background-color:var(--ld_color_bg_sub);
box-shadow:none; opacity:1; visibility:visible; transform:none;
max-height:0px; overflow:hidden;
transition:max-height 0.3s ease; }
.gnb_item_has.is_open > .gnb_sub { max-height:300px; transform:none; }
.gnb_sub::before { display:none; }
.gnb_sub_link { padding:14px 16px 14px 34px; font-size:15px; }
.gnb_sub_item + .gnb_sub_item .gnb_sub_link { border-top:1px solid var(--ld_color_line); }
}
/* ///// Leedohee - GNB 드롭다운 (병원소개) END ///// */
/* ///////////////////////////////////////////////////////////
날짜 숨김 (2026-09-10 대표님 지시)
⚠️ 나중에 다시 쓸 수 있도록 HTML·JS 에서 제거하지 않고 여기서 숨기기만 한다.
되살리려면 이 블록만 지우거나 주석 처리하면 원래대로 돌아온다.
대상 = 게시판 목록의 「작성일」 칸 · 본문의 날짜 · 글 팝업의 날짜
/////////////////////////////////////////////////////////// */
.bbs_col_date { display:none; } /* colgroup 의 날짜 칸 */
.bbs_thead th:nth-child(3) { display:none; } /* 표 머리의 「작성일」 */
.bbs_thead th:nth-child(2) { text-align:left; } /* 날짜 칸이 빠져 제목 칸이 넓어지므로 머리글도 왼쪽 정렬 */
.bbs_row td.bbs_date { display:none; } /* 목록 행의 날짜 (모바일 카드형까지 함께 이김 · P-26) */
.bbs_view_meta { display:none; } /* 본문 보기의 날짜 */
.art_pop_date { display:none; } /* 글 팝업의 날짜 */
/* 글 본문 : 옛 에디터가 남긴 빈 줄 때문에 글이 아래로 밀리지 않도록 첫/끝 요소의 바깥여백을 없앤다 (2026-09-10 I-40) */
.art_pop_body > *:first-child, .bbs_view_body > *:first-child { margin-top:0px; padding-top:0px; }
.art_pop_body > *:last-child, .bbs_view_body > *:last-child { margin-bottom:0px; }
.art_pop_body > br:first-child, .bbs_view_body > br:first-child { display:none; }
/* ///////////////////////////////////////////////////////////
2026-09-11 원장님 수정 요청 반영분
/////////////////////////////////////////////////////////// */
/* 치료방법 : 칩 두 개(약물요법·정신치료) — 진료대상과 같은 간격 규칙
⚠️ 원래 .treat_text 는 text-align:center 한 줄 문단이었다. flex 로 바꾸면 text-align 이 안 먹으므로
justify-content:center 로 가운데 정렬을 되살려야 한다 (2026-09-11) */
.treat_text { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
/* 치료방법 칩은 진료대상 칩과 모양이 다르다 — 가운데 놓이는 큰 알약형 (대표님 시안 2026-09-11) */
.treat_text .chip_bt { height:48px; padding:0px 34px; border:1px solid var(--ld_color_form_line);
border-radius:999px; background-color:var(--ld_color_bg); font-size:16px; font-weight:500;
transition:border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
@media (hover: hover) {
.treat_text .chip_bt:hover { border-color:var(--ld_color_point);
background-color:var(--ld_color_point); color:#FFFFFF; }
}
@media all and (max-width: 768px) {
.treat_text { gap:10px; }
.treat_text .chip_bt { height:44px; padding:0px 26px; font-size:15px; }
}
/* ── 글 본문의 구조 (인격장애 글처럼 「유형 → 임상양상 → 치료」로 반복되는 글) ──
원장님이 붉은 글씨로 표시하신 용어 = .art_key
유형 하나가 어디서 시작해 어디서 끝나는지 보이도록 .art_group 으로 묶는다 (2026-09-11) */
.art_key { font-size:1.2em; font-weight:700; color:var(--ld_color_em); letter-spacing:-0.02em; }
.art_group { padding-top:calc(30px + 24px); margin-top:30px; border-top:1px solid var(--ld_color_line); }
.art_group:first-child { margin-top:0px; padding-top:0px; border-top:0px; }
.art_lead { padding-bottom:1.1em; }
.art_eng { padding-left:6px; font-size:0.92em; font-weight:400; color:var(--ld_color_text_sub); }
/* 임상양상 / 치료 — 유형 안에 속한 것이 보이도록 들여쓰고 왼쪽에 표시선을 둔다 */
.art_sub { position:relative; padding:2px 0px 6px 13px; margin-top:0.7em;
font-size:0.95em; font-weight:700; color:var(--ld_color_point); }
.art_sub::before { position:absolute; top:0.45em; left:0px; width:3px; height:1em;
border-radius:2px; background-color:var(--ld_color_point); content:""; }
.art_group .art_sub ~ p { padding-left:13px; }
/* (구) 소제목 클래스 — 남아 있는 데이터 호환용 */
.art_h { padding-top:0.6em; font-weight:700; color:var(--ld_color_point); }
/* 본문 안에서 다른 글로 보내는 링크 */
.art_pop_link { color:var(--ld_color_point); text-decoration:underline; }
/* 저서 및 역서 */
.dr_book_list { padding-top:6px; }
.dr_book_label { padding:14px 0px 6px; font-size:14px; font-weight:700; color:var(--ld_color_point); }
.dr_book_label:first-child { padding-top:0px; }
.dr_book_item { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; padding:5px 0px; }
.dr_book_name { font-size:16px; font-weight:600; font-style:normal; color:var(--ld_color_text); }
.dr_book_bt { padding:0px; border:0px; background:none; font:inherit; color:inherit;
text-decoration:underline; text-decoration-color:var(--ld_color_point); text-underline-offset:3px;
cursor:pointer; transition:color 0.25s ease; }
@media (hover: hover) { .dr_book_bt:hover { color:var(--ld_color_point); } }
.dr_book_bt:focus-visible { outline:2px solid var(--ld_color_point); outline-offset:2px; }
.dr_book_name::before { content:"\300E"; }
.dr_book_name::after { content:"\300F"; }
.dr_book_meta { font-size:14px; color:var(--ld_color_text_sub); }
@media all and (max-width: 768px) {
.dr_book_name { font-size:15px; }
.dr_book_meta { font-size:13px; }
}
/* ═══════════════════════════════════════════════════════════════
개인정보처리방침 (privacy.html) — 2026-09-14 신설
⚠️ 글자 크기·줄간격·색은 `.policy_body` 한 곳에서만 정한다.
자식 태그(p·li)는 inherit 로 되돌린다 — 기본틀 331행의
`p { font-size:15px; line-height:1.3em; color:… }` 가 이기기 때문 (P-48 · I-42)
═══════════════════════════════════════════════════════════════ */
.sec_policy_head { padding-bottom:0px; }
.policy_head { display:inline-block; text-align:center; }
.policy_title { margin-bottom:15px; }
.policy_body { padding:10px 4px 0px; font-size:16px; line-height:1.9em; color:var(--ld_color_text);
word-break:keep-all; overflow-wrap:break-word; text-align:left; }
.policy_body p { padding-bottom:1.1em; font-size:inherit; line-height:inherit; color:inherit; }
.policy_body p:last-child { padding-bottom:0px; }
.policy_body strong { font-weight:700; }
/* 머리글 */
.policy_lead { padding-bottom:1.4em; color:var(--ld_color_text_sub); }
/* 적용 범위 안내 상자 */
.policy_note { padding:20px 22px; margin-bottom:40px;
border:1px solid var(--ld_color_line); border-radius:8px; background-color:var(--ld_color_bg_sub); }
.policy_note_text { padding-bottom:0px; font-size:15px; line-height:1.8em; }
.policy_note_em { display:block; padding-bottom:4px; font-weight:700; color:var(--ld_color_point); }
/* 조문 묶음 */
.policy_group { padding-top:calc(30px + 24px); margin-top:30px; border-top:1px solid var(--ld_color_line); }
.policy_group:first-of-type { margin-top:0px; padding-top:0px; border-top:0px; }
/* 조 제목 */
.policy_sub { position:relative; padding:0px 0px 0.7em 13px; font-size:1.05em; font-weight:700;
color:var(--ld_color_text); letter-spacing:-0.02em; }
.policy_sub::before { position:absolute; top:0.35em; left:0px; width:3px; height:1em;
border-radius:2px; background-color:var(--ld_color_point); content:""; }
/* 목록 */
.policy_list { padding:0px 0px 1.1em 1.2em; }
.policy_item { padding-bottom:0.5em; list-style:disc; font-size:inherit; line-height:inherit; color:inherit; }
.policy_item:last-child { padding-bottom:0px; }
/* 주의 문구 */
.policy_warn { padding:14px 16px; margin-bottom:1em; border-left:3px solid var(--ld_color_em);
background-color:#FDF6F5; font-size:15px; line-height:1.8em; }
.policy_warn:last-child { margin-bottom:0px; }
/* 링크 */
.policy_link { color:var(--ld_color_point); text-decoration:underline; text-underline-offset:3px; }
/* 표 */
.policy_table { width:100%; margin-bottom:1.1em; border-collapse:collapse;
border-top:1px solid var(--ld_color_text); font-size:15px; line-height:1.7em; }
.policy_caption { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.policy_table th, .policy_table td { padding:12px 14px; border-bottom:1px solid var(--ld_color_line);
text-align:left; vertical-align:top; word-break:keep-all; }
.policy_table thead th { background-color:var(--ld_color_bg_sub); font-weight:700; }
.policy_table tbody th { width:170px; background-color:var(--ld_color_bg_sub); font-weight:600; }
.policy_col_1 { width:24%; }
.policy_col_2 { width:auto; }
.policy_col_3 { width:28%; }
/* 모바일 — 표를 카드형으로 (P-39) */
@media all and (max-width: 768px) {
.policy_body { font-size:16px; }
.policy_note { padding:16px 18px; margin-bottom:32px; }
.policy_group { padding-top:calc(24px + 20px); margin-top:24px; }
.policy_sub { font-size:1.02em; }
.policy_warn { padding:12px 14px; font-size:14px; }
.policy_table { border-top:0px; }
.policy_table colgroup, .policy_table thead { display:none; }
.policy_table tbody, .policy_table tr, .policy_table th, .policy_table td { display:block; width:auto; }
.policy_table tr { padding:14px 16px; margin-bottom:10px;
border:1px solid var(--ld_color_line); border-radius:8px; }
.policy_table tr:last-child { margin-bottom:0px; }
.policy_table th, .policy_table td { padding:3px 0px; border-bottom:0px; }
.policy_table tbody th { width:auto; padding-bottom:6px; background-color:transparent;
font-size:13px; font-weight:700; color:var(--ld_color_point); }
.policy_table td[data-label]::before { display:block; font-size:13px; font-weight:700;
color:var(--ld_color_point); content:attr(data-label); }
}
@media all and (max-width: 480px) {
.policy_body { font-size:15px; }
.policy_table { font-size:14px; }
}
/* 동의 문구 옆 「내용 보기」 · 푸터의 개인정보처리방침 링크 — 2026-09-14 */
.form_agree_more { display:inline-block; margin:2px 0px 0px 26px; font-size:14px; color:var(--ld_color_point);
text-decoration:underline; text-underline-offset:3px; }
.form_agree_more:focus-visible { outline:2px solid var(--ld_color_point); outline-offset:2px; }
@media all and (max-width: 480px) { .form_agree_more { margin-left:24px; font-size:13px; } }
/* ═══════════════════════════════════════════════════════════════════════════
♿ 키보드 초점 표시 (2026-09-15 신설 · 색상은 바꾸지 않습니다)
왜 필요한가 — 기본틀에 `outline: none` 이 28곳 있어, 마우스 없이 탭 키로
이동할 때 지금 어디에 있는지 화면에 보이지 않았습니다.
`:focus-visible` 은 **키보드로 이동할 때만** 나타납니다. 마우스 클릭에는
나타나지 않으므로 평소 화면은 지금과 똑같습니다.
색은 기본틀의 브랜드색 `--ld_color_point` 를 그대로 씁니다 (새 색 없음).
이 블록만 지우면 원래대로 돌아갑니다.
═══════════════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.contact_form .form_input:focus-visible,
.contact_form .form_textarea:focus-visible,
.bbs_search_input:focus-visible,
.gnb_link:focus-visible,
.gnb_top:focus-visible,
.gnb_sub_link:focus-visible,
.quick_link:focus-visible,
.footer_link:focus-visible,
.footer_value_link:focus-visible,
.bbs_subject_bt:focus-visible,
.bbs_page_bt:focus-visible,
.bbs_view_nav_bt:focus-visible,
.js_article:focus-visible,
.art_pop_close:focus-visible {
outline:2px solid var(--ld_color_point);
outline-offset:2px;
border-radius:3px;
}
/* ═══════════════════════════════════════════════════════════════════════════
접근성 보완 ② — 입력칸·검색칸의 키보드 초점 표시 (2026-09-15)
왜 필요한가 — 실측 결과
위쪽 입력칸 규칙들이 `outline: none` 을 쓰고 있고 가중치가 더 높아서,
①번 블록의 초점 테두리가 문의폼·게시판 검색칸·선택상자에서는
나타나지 않았습니다. 테두리 색만 바뀌는 상태였습니다.
KWCAG 2.2 「6.1.2 초점 이동과 표시」 를 위해 초점을 확실히 보이게 합니다.
무엇이 바뀌는가
키보드로 Tab 을 눌러 이동할 때만 테두리 바깥에 선이 하나 생깁니다.
마우스로 클릭할 때는 나타나지 않으므로 평소 화면은 지금과 똑같습니다.
색은 기본틀의 브랜드색 `--ld_color_point` 를 그대로 씁니다 (새 색 없음).
이 블록만 지우면 원래대로 돌아갑니다.
═══════════════════════════════════════════════════════════════════════════ */
.contact_form .form_input:focus-visible,
.contact_form .form_textarea:focus-visible,
.bbs_search_input:focus-visible,
.bbs_search_select:focus-visible,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
input[type="password"]:focus-visible,
input[type="checkbox"]:focus-visible,
select:focus-visible,
textarea:focus-visible,
.select2-container--default .select2-search--dropdown .select2-search__field:focus-visible {
outline: 2px solid var(--ld_color_point) !important;
outline-offset: 2px;
}