/* 화면 폭 손질 (2026-09-27) — 원장 «모바일 중심으로 · 사진이랑 텍스트랑 뭉쳐져 있어 · 예약버튼을 모바일에서도 따로 · 화면폭이 달라져도 자연스럽게 안 겹치게». 기존 꾸밈 파일은 건드리지 않고 이 파일을 맨 뒤에 붙인다. A. 모든 폭 — 오른쪽 빠른 메뉴의 예약 칸 B. 1025px 이상 — 첫 화면: 글자 칸과 사진이 폭에 맞춰 같이 줄어 겹치지 않게 (아주 넓은 화면은 지금 그대로) C. 1024px 이하 — 첫 화면: 글자 → 사진 위아래로 (태블릿·폰) D. 768px 이하 — 폰 전용: 아래 고정 띠·떠 있는 메뉴·의료진·표·탭·바닥글 */ /* ── A. 오른쪽 빠른 메뉴의 예약 칸(네이버 → 우리 「예약 신청」) — 컴퓨터에서도 눈에 띄게 ── */ .quick_wrap .quick_list > li > a.quick_reserve{background:#0a2540;border-radius:16px;padding:12px 8px} .quick_wrap .quick_list > li > a.quick_reserve .icon_img .icon{color:#fff} .quick_wrap .quick_list > li > a.quick_reserve > span{color:#fff;font-weight:700} .quick_wrap .quick_list > li > a.quick_reserve:hover{background:#1a7ba8} /* 첫 화면 원장님 사진을 가벼운 WebP 로 감쌌다() — 감싼 틀은 배치에 끼지 않게 */ #mainVisual .doctors_photo picture{display:contents} /* 폰 첫 화면 메뉴 단추(≡) — 세 줄이 흰색이라 밝은 첫 화면에서 안 보였다(내리면 위아래 두 줄만 검게) → 원장 19:2x «검은색» = 내렸을 때와 같은 #000. 원장 09-27 «오른쪽 위에 작대기 세개가 안보여». 메뉴를 연 ✕(.on)는 종전대로 */ .m_topmenuM #m_navBtn:not(.on) span{background-color:#000!important} .m_topmenuM #m_navBtn span:before, .m_topmenuM #m_navBtn span:after{background-color:#000!important} /* ── B. 컴퓨터 첫 화면 — 사진을 늘 1155px 고정으로 오른쪽에 붙여 두어, 화면이 약 2000px 보다 좁으면 사진이 왼쪽 글자 칸으로 파고들었다. 글자 칸 폭(--txt-w)과 사진 폭(--iw)을 화면 폭으로 정해 서로 자리를 나눈다. 사진 = 투명 PNG 8000×4500, 원장님들 = 가로 3.2~97.8% · 머리 = 위에서 13.6% · 세 분 가운데 = 17.9/49.4/82.4% ── */ @media (min-width:1025px){ /* 글자 칸 = 제목 「내과 전문의」 폭(글자 크기 5.75vw × 5.05 ≈ 29.5vw). 2000px 이상은 특징 세 칸을 한 줄로 둬서 640px */ #mainVisual{--hero-r:180px;--txt-w:29.5vw; --iw:min(1155px, calc((100vw - var(--hero-r) - 40px - var(--txt-w) - 50px) / 0.968))} #mainVisual .txt_wrap .l_txt_box{left:40px!important;right:auto!important;max-width:none!important;width:var(--txt-w)!important;padding:0!important} #mainVisual .txt_wrap .tit{font-size:min(108px,5.75vw)!important;letter-spacing:-0.04em!important} #mainVisual .hero_badge{max-width:100%!important;white-space:normal!important;font-size:clamp(13px,1.01vw,19px)!important;word-break:keep-all} #mainVisual .hero_features{max-width:100%!important} #mainVisual .doctors_wrap{right:var(--hero-r)!important;left:auto!important;bottom:0!important;width:var(--iw)!important;height:auto!important} #mainVisual .doctors_photo{height:auto!important} #mainVisual .doctors_photo img{width:100%!important;height:auto!important;max-width:none!important;max-height:none!important} /* 이름표 — 사진 크기를 따라 늘 세 분 머리 위에 (말풍선 꼬리 22px 만큼 띄움) */ #mainVisual .doctor_labels{display:block!important;left:0!important;right:0!important;top:auto!important;height:0;padding:0!important; bottom:calc(var(--iw) * 0.5625 * 0.864 + 26px)!important} #mainVisual .doctor_labels .doctor_label{position:absolute!important;bottom:0;--tx:-50%!important;min-width:0!important;width:min(190px, calc(var(--iw) * 0.27))} /* 이름표 글자·여백도 사진 크기를 따라 (좁은 화면에서 이름표끼리 부딪히던 것) */ #mainVisual .doctor_label .d_top{padding:6px 4px!important;font-size:clamp(11px, calc(var(--iw) * 0.013), 15px)!important;white-space:nowrap} #mainVisual .doctor_label .d_bottom{padding:8px 4px!important;font-size:clamp(11px, calc(var(--iw) * 0.014), 16px)!important;white-space:nowrap} #mainVisual .doctor_label .d_bottom b{font-size:clamp(15px, calc(var(--iw) * 0.022), 25px)!important} #mainVisual .doctor_labels .doctor_label:nth-child(1){left:17.9%} #mainVisual .doctor_labels .doctor_label:nth-child(2){left:49.4%} #mainVisual .doctor_labels .doctor_label:nth-child(3){left:82.4%} } @media (min-width:2000px){ #mainVisual{--txt-w:min(640px,40vw)} /* 아주 넓은 화면 — 지금 모습 그대로 */ } @media (min-width:1025px) and (max-width:1500px){ #mainVisual{--hero-r:120px} /* 오른쪽 빠른 메뉴(폭 80px)가 세 번째 원장님을 가리지 않게 */ } @media (min-width:1025px) and (max-width:1999px){ /* 특징 세 칸은 한 줄에 640px 이 든다 → 그보다 좁은 화면은 세로 세 줄로, 남는 폭은 사진에 */ #mainVisual .hero_features{flex-direction:column!important;padding:6px 16px!important} #mainVisual .hero_features .feat{justify-content:flex-start!important;gap:12px!important;padding:7px 2px!important} #mainVisual .hero_features .feat+.feat::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px} #mainVisual .hero_features .feat_txt{font-size:14px!important} } /* ── C. 태블릿·폰 첫 화면 — 글자 판과 원장님 사진 판이 번갈아 겹치던(폰) / 옆으로 파고들던(태블릿) 것을 위아래로 ── */ @media (max-width:1024px){ #mainVisual .inner{height:auto!important;padding-top:84px} #mainVisual .MainSwiper{display:flex!important;flex-direction:column} /* 사람이 먼저 (원장 09-27 17:34 «텍스트가 밑에 있더라도 사람이 먼저나오는게 낫지않아?») */ #mainVisual .MainSwiper > .doctors_wrap{order:1} #mainVisual .MainSwiper > .txt_wrap{order:2} #mainVisual .swiper-wrapper{position:absolute!important;top:0;left:0;right:0;bottom:0;height:100%!important} #mainVisual .txt_wrap, #mainVisual .txt_wrap.mob-hide{position:relative!important;opacity:1!important;pointer-events:auto!important;height:auto!important;transition:none!important} #mainVisual .txt_wrap .txt_inner{height:auto!important} #mainVisual .txt_wrap .l_txt_box{position:relative!important;top:auto!important;left:auto!important;transform:none!important;max-width:760px!important;margin:0 auto} #mainVisual .hero_badge{white-space:normal!important;word-break:keep-all} #mainVisual .hero_features{max-width:100%!important} /* 원장님 사진 — 이름표는 사진 위쪽 줄에, 사진은 머리까지 다 보이게 */ #mainVisual .doctors_wrap, #mainVisual .doctors_wrap.mob-show{position:relative!important;opacity:1!important;pointer-events:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;max-width:720px;margin:0 auto;height:auto!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;padding:4px 12px 0;transition:none!important} #mainVisual .doctor_labels{position:relative!important;top:auto!important;bottom:auto!important;left:auto!important;right:auto!important;padding:0!important;margin:10px 0 20px!important;display:flex!important;justify-content:space-around!important;width:100%!important} #mainVisual .doctor_labels .doctor_label{--tx:0px!important;transform:none!important;min-width:0!important;flex:0 1 30%} #mainVisual .doctors_photo{height:auto!important} #mainVisual .doctors_photo img{width:100%!important;height:auto!important;max-height:none!important;max-width:100%!important} } @media (min-width:769px) and (max-width:1024px){ /* 태블릿 — 글자는 조금 크게, 가운데 정렬된 칸 안에 */ #mainVisual .txt_wrap .l_txt_box{padding:30px 40px 6px!important} #mainVisual .txt_wrap .tit{font-size:44px!important} /* 태블릿엔 오른쪽 빠른 메뉴(폭 80px)가 그대로 있다 → 사진은 그 안쪽까지만 */ #mainVisual .doctors_wrap, #mainVisual .doctors_wrap.mob-show{max-width:min(720px, calc(100vw - 280px))!important} } /* ── D. 폰 전용 ── */ @media (max-width:768px){ /* 아래 고정 띠의 「예약 신청」 — 따로 도드라진 단추로 (흰 바탕·남색 글자·조금 넓게) */ .mobile-cta-bar a.cta-reserve{flex:1.4;align-self:stretch;margin:7px 6px;padding:4px 0;border-radius:14px;background:#fff;color:#0a2540!important;font-weight:800;box-shadow:0 2px 10px rgba(0,0,0,0.25)} .mobile-cta-bar a.cta-reserve i{color:#0a2540} .mobile-cta-bar a.cta-reserve:active{background:#e8eef7} body{padding-bottom:72px!important} #sh_ft{padding-bottom:0!important} /* 맨 아래 병원 정보 — 줄 간격이 좁아 겹쳐 보이던 것 */ #sh_ft .top .f_t_txt{line-height:1.7!important;font-size:13px!important;word-break:keep-all} #sh_ft .top{padding-bottom:40px!important} /* 각 쪽 맨 아래 예약 안내 문단 — 줄 간격이 좁아 두 줄이 겹치던 것 */ .cta p{line-height:1.6!important;padding:0 18px;word-break:keep-all} .cta p small{display:inline-block;margin-top:6px;font-size:14px} /* 오른쪽에 떠 있는 메뉴(위로가기 포함)·전화 동그라미 — 폰에서는 내용을 덮는다. 같은 일을 아래 고정 띠(전화·예약·톡톡·길찾기)와 맨 아래 SNS 단추가 한다. */ #quick_wrap, .quick_wrap{display:none!important} #fix_tel{display:none!important} /* 첫 화면 글자 — 폰 크기 (제목 크기는 기존 폰 규칙 그대로 20~28px) */ #mainVisual .txt_wrap .l_txt_box{padding:26px 20px 6px!important} #mainVisual .hero_badge{font-size:13px!important;line-height:1.45!important;padding:8px 14px!important;margin-bottom:16px!important} #mainVisual .hero_features{flex-direction:column!important;padding:6px 14px!important;margin-bottom:6px!important;width:100%} #mainVisual .hero_features .feat{justify-content:flex-start!important;gap:12px!important;padding:9px 2px!important} #mainVisual .hero_features .feat+.feat::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px} #mainVisual .hero_features .feat_txt{white-space:nowrap!important;font-size:14px!important;line-height:1.4!important} #mainVisual .hero_features .feat_icon{width:24px!important;height:24px!important} #mainVisual .doctor_label .d_top{padding:5px 4px!important;font-size:11px!important;letter-spacing:0!important} #mainVisual .doctor_label .d_bottom{padding:6px 4px!important;font-size:11px!important} #mainVisual .doctor_label .d_bottom b{display:block;font-size:17px!important;margin:0 0 2px!important} /* 병원소개 — 의료진 칸: 폰에서 한 줄로 바꾸면서 칸 이름표를 두 칸 그대로 둬 사진 칸이 0 으로 줄던 것 */ .doc-wrap{grid-template-columns:1fr!important;grid-template-areas:"photo" "info" "schedule"!important;padding:20px 18px!important;row-gap:18px!important} .doc-wrap > .doc-photo, .doc-photo{max-width:300px;width:100%!important;margin:0 auto 4px!important} .doc-info{padding-left:0!important;padding-top:0!important} .doc-info h3{font-size:24px!important;margin-bottom:18px!important} .doc-info h3 span{font-size:16px!important;margin-left:6px!important} .doc-schedule{grid-template-columns:1fr!important;gap:12px!important} .schedule-tbl .on{width:18px!important;height:18px!important;border-width:2px!important} .schedule-tbl .endo{display:block!important;font-size:10px!important;letter-spacing:-0.8px!important;margin-top:3px!important;line-height:1.1!important} .schedule-tbl tbody tr{height:auto!important} .schedule-tbl tbody td{padding:8px 1px!important} .reserve-block{margin-bottom:0!important} /* 쪽 위 탭 줄(복부초음파·갑상선초음파…) — 탭 하나가 158px 라 넷째가 잘리던 것 */ .sub-nav-inner a{padding-left:10px!important;padding-right:10px!important;font-size:13px!important;min-width:0!important} /* 내과종합클리닉·건강검진 표 — 셋 이상 칸이 폰 폭에 눌려 한두 글자씩 줄바꿈되던 것. 합친 칸이 있는 표(m-scroll)는 칸 폭을 지키고 좌우로 밀어 보기 */ .checkup-table{font-size:14px!important} .checkup-table thead th, .checkup-table tbody td{line-height:1.5} .checkup-table.m-scroll{display:block!important;overflow-x:auto;-webkit-overflow-scrolling:touch} .checkup-table.m-scroll thead th, .checkup-table.m-scroll tbody td{min-width:104px;padding:10px 10px!important} .checkup-table.m-scroll thead th:first-child, .checkup-table.m-scroll tbody td:first-child{min-width:84px} /* 칸이 셋 이상인 표는 한 줄씩 카드로 펼친다(머리글 이름을 칸마다 작게) */ .checkup-table.m-cards{display:block!important;overflow:visible!important} .checkup-table.m-cards thead{display:none!important} .checkup-table.m-cards tbody, .checkup-table.m-cards tr, .checkup-table.m-cards tbody td{display:block!important;min-width:0!important;width:auto!important} .checkup-table.m-cards tr{border:1px solid #e3e8ef;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff} .checkup-table.m-cards tbody td{border:none!important;padding:3px 0!important;color:#444} .checkup-table.m-cards tbody td:first-child{font-size:16px;padding:0 0 7px!important;margin-bottom:5px;border-bottom:1px solid #eef1f5!important} .checkup-table.m-cards tbody td:not(:first-child)::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:#1a7ba8;margin-bottom:1px} } /* ── E. 폰 첫 화면 — 글 먼저 · 아래 원장님 카드 칸(#inc03)과 같은 카드 슬라이드 (원장 09-27 «B안 · 피시판은 기존대로 · 밑에 카드 형식과 똑같이») PC·태블릿(769px 이상)은 기존 첫 화면 그대로. 폰(768px 이하)만 기존 첫 화면을 감추고 index.html 의 .inner.hv2 를 보인다. 카드 값은 아래 칸을 폰(390px)에서 잰 그대로 — 1.2장·간격 15·모서리 15·사진 비율 그대로·직함 15px·이름 20px·막대 150×5. 🔴 위 C 의 `#mainVisual .swiper-wrapper{position:absolute!important}` 가 이 칸의 슬라이드에도 걸리므로 아래에서 되돌린다. */ #mainVisual .inner.hv2{display:none} @media (max-width:768px){ #mainVisual .inner:not(.hv2){display:none!important} #mainVisual .inner.hv2{display:block;overflow:hidden!important} #mainVisual .hv2 .swiper-wrapper{position:relative!important;top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;height:auto!important} #mainVisual .hv2 .hv2_wrap{padding:22px 0 30px} #mainVisual .hv2 .hv2_txt{padding:0 22px 24px;text-align:center} #mainVisual .hv2 .hv2_tit{margin:0;font-size:22px;line-height:1.4;font-weight:700;letter-spacing:-0.02em;word-break:keep-all} #mainVisual .hv2 .hv2_desc{margin:10px 0 0;font-size:14px;line-height:1.6;word-break:keep-all} #mainVisual .hv2 .hv2Swiper{width:100%;overflow:visible} #mainVisual .hv2 .swiper-slide{overflow:hidden;border-radius:15px;background:#f5f7fa} #mainVisual .hv2 .swiper-slide a{display:block} #mainVisual .hv2 .swiper-slide img{display:block;width:100%;height:auto;aspect-ratio:1100/1512;object-fit:cover;object-position:50% 0%} #mainVisual .hv2 .hv2_name{padding:24px 22px 0;text-align:center} #mainVisual .hv2 .hv2_name span{display:block;margin-bottom:15px;font-size:15px;font-weight:500;line-height:1} #mainVisual .hv2 .hv2_name b{display:block;font-size:20px;font-weight:700;line-height:1} #mainVisual .hv2 .hv2_more{display:inline-block;margin-top:14px;padding:4px 2px;font-size:14px;font-weight:600} #mainVisual .hv2 .hv2_bar{position:relative;width:150px;height:5px;margin:18px auto 0;border-radius:50pt;overflow:hidden} #mainVisual .hv2 .hv2_bar .swiper-pagination-progressbar-fill{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:left top;border-radius:50pt} #mainVisual .inner.hv2{background:#031d3b;background-clip:content-box} #mainVisual .hv2 .hv2_tit, #mainVisual .hv2 .hv2_name b{color:#fff} #mainVisual .hv2 .hv2_desc, #mainVisual .hv2 .hv2_name span{color:rgba(255,255,255,.75)} #mainVisual .hv2 .hv2_more{color:#fff} #mainVisual .hv2 .hv2_bar{background:rgba(255,255,255,.3)} #mainVisual .hv2 .hv2_bar .swiper-pagination-progressbar-fill{background:#fff} } /* ── F. PC 윗줄 메뉴 — 쪽마다 같은 자리 (원장 09-27 20:05 «내시경클리닉을 누르면 … 오른쪽으로 이동») 종전 = 남는 폭에 고르게 벌리기(space-around). 첫 화면에만 오른쪽 전화번호 칸이 있어 남는 폭이 달라 쪽을 옮기면 메뉴가 밀렸고(1920px 에서 30~329px), 1440px 이하 첫 화면에서는 글씨끼리 붙었다. → 로고 옆에서부터 같은 간격 + 앞에 간격 절반(1920px 에서 지금 첫 화면과 같은 자리 · 같은 68px). 전화번호 칸은 눌려 접히지 않게 하고, 1520px 미만에서는 진료시간 글씨를, 1400px 미만에서는 칸 전체를 뺀다(자리가 없어 지금도 두세 줄로 접혀 있었다 · 전화번호는 맨 아래 병원 정보에도 있다). */ @media (min-width:1025px){ #top_nav{flex:0 1 auto!important;justify-content:flex-start!important;gap:min(68px,calc(5.6vw - 40px));padding:0 0 0 min(34px,calc(2.8vw - 20px))!important} #top_nav_wrap .h_center .h_right{flex-shrink:0;white-space:nowrap} } @media (min-width:1025px) and (max-width:1679px){ #top_nav{gap:24px;padding-left:12px!important} #top_nav_wrap .h_center .h_left{gap:40px} .h_reserve{margin-right:12px} } @media (min-width:1025px) and (max-width:1519px){ .h_reserve .h_r_time{display:none} } @media (min-width:1025px) and (max-width:1399px){ #top_nav_wrap .h_center .h_right{display:none} } @media (min-width:1025px) and (max-width:1199px){ #top_nav{gap:14px;padding-left:7px!important} #top_nav_wrap .h_center .h_left{gap:28px} } @media (min-width:1025px) and (max-width:1149px){ #top_nav{gap:8px;padding-left:4px!important} } /* ── G. PC 하위 메뉴(흰 띠) — 그 메뉴 바로 밑에서 시작 (원장 09-27 20:33 «커서를 가져다 대면 바로 밑에 하위 카테고리가 보여야» · 8차) 종전 = 화면 폭 전체 띠 안에서 글씨를 가운데 정렬 → 어느 메뉴든 화면 가운데에 떴다(9/21 원본부터). → 띠(흰 바탕·위아래 줄·그림자·높이)는 그대로 폭 전체로 칠하고(ul::before), 글씨는 그 메뉴 칸 밑에서 시작한다. 🔴 js/topmenu_script.js 의 slideDown 이 펼칠 때 ul 에 overflow:hidden 을 붙여 폭 전체 띠를 잘랐다(펼친 뒤에도 남음 · Codex 검토 09-27) → overflow·height 를 !important 로 묶어 자르지 못하게 하고, 펼침 대신 0.18초 살짝 나타나게 한다. 글씨가 화면 밖으로 넘칠 오른쪽 메뉴는 그 메뉴 오른쪽 끝(좁은 폭의 내시경클리닉은 가운데)에 맞춘다. 앞의 「병원소개 |」 이름표는 바로 위 메뉴와 겹쳐 뺀다. */ @media (min-width:1025px){ #top_nav li ul{position:absolute!important;top:calc(50% + 50px)!important;left:0!important;right:auto!important;width:max-content!important; height:auto!important;overflow:visible!important;padding:24px 0!important;background:transparent!important;border:none!important; box-shadow:none!important;text-align:left!important;animation:lyaSubIn .18s ease-out} #top_nav li ul::before{content:""!important;display:block!important;position:absolute;top:0;bottom:0;left:-200vw;right:-200vw;margin:0!important;padding:0!important; background:#fff;border:none!important;border-top:1px solid #eee!important;border-bottom:1px solid #eee!important;box-shadow:0 6px 18px rgba(0,0,0,0.06);z-index:-1} #top_nav li ul li{margin:4px 0!important} #top_nav li ul li + li{margin-left:44px!important} /* 키보드(Tab)로 여는 것은 js/topmenu_script.js(focusin) — css :has(:focus-visible) 로 열면 초점이 하위 메뉴로 옮겨 가는 찰나에 닫혀 Tab 이 허공으로 빠진다 (8차 실측) */ } @keyframes lyaSubIn{from{opacity:0}to{opacity:1}} /* 좁은 화면 — 화면 밖으로 넘칠 메뉴만: 오른쪽 끝 맞춤 / 가운데 맞춤 */ @media (min-width:1025px) and (max-width:1399px){ #top_nav li.list05 ul{left:auto!important;right:0!important} } @media (min-width:1025px) and (max-width:1279px){ #top_nav li.list04 ul{left:auto!important;right:0!important} } @media (min-width:1025px) and (max-width:1099px){ #top_nav li.list02 ul{left:50%!important;transform:translateX(-50%)} } /* ── H. 901~1024px 머리글 (8차) — 원래 사이트는 900px 에서 폰 머리글(≡)로 바꾸는데 내용은 1024px 에서 바뀌어, 그 사이에서 PC 메뉴가 화면 밖으로 잘렸다(960px 에서 「비급여항목」 · 9/21 원본부터 · Codex 검토 09-27). → 1024px 까지 폰 머리글. */ @media (min-width:901px) and (max-width:1024px){ #top_nav_wrap{display:none} #topmenuM{display:block;background-color:transparent} } /* ── E-2. 짧은 폰 (원장 09-27 «전체 리뷰» · 8차) — ① 진료시간 줄은 평일·토일 두 덩어리로만 끊는다(「오후 / 1시」 외톨이 방지) ② 세로가 짧은 폰(760px 이하)은 카드를 줄여 원장님 이름이 아래 고정 띠 위에 보이게 한다 — 옆 카드는 카드 칸 끝에서 잘라 팔이 안 보이게. */ @media (max-width:768px){ #mainVisual .hv2 .hv2_desc span{display:inline-block} } @media (max-width:768px) and (max-height:760px){ #mainVisual .hv2 .hv2Swiper{width:84%;margin:0 auto;overflow:hidden} #mainVisual .hv2 .hv2_txt{padding-bottom:16px} #mainVisual .hv2 .hv2_name{padding-top:16px} } @media (max-width:768px) and (max-height:680px){ #mainVisual .hv2 .hv2Swiper{width:72%} #mainVisual .hv2 .hv2_wrap{padding-top:14px} } /* ── I. 네이버 리뷰 — 은은한 네이버 녹색 (원장 09-27 22:06 «네이버처럼 은은한 녹색이 좀 있었으면 … 지금은 그냥 텍스트를 모아놓은 느낌» · 9차). 카드마다 머리줄(초록 N · 「네이버 방문자 리뷰」)을 달고 큰 따옴표는 뺀다. 카드 틀·그림자에 옅은 초록, 건수와 「더 많은 후기」 단추는 네이버 초록(#03C75A). 카드 글은 index 의 JS 가 그린다. */ #inc_review .all_b_tit strong{color:#03C75A!important} #inc_review .review-card{border:1px solid #d6eedf;box-shadow:0 6px 22px rgba(3,199,90,0.08);padding-top:24px} #inc_review .review-card:hover{box-shadow:0 12px 30px rgba(3,199,90,0.16)} #inc_review .review-card::before{display:none} #inc_review .rv-head{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#1d9a55;letter-spacing:-0.2px;margin-bottom:2px} #inc_review .rv-n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px; background:#03C75A;color:#fff;font-style:normal;font-weight:900;font-size:12px;line-height:1;font-family:Arial,Helvetica,sans-serif} #inc_review .review-body{padding-top:10px} #inc_review .review-date{color:#86a795} #inc_review a.rv-more{background:#03C75A!important;box-shadow:0 6px 18px rgba(3,199,90,0.25)} #inc_review a.rv-more .rv-n{background:#fff;color:#03C75A} /* ── J. 폰 — 아래 원장님 카드 슬라이드 뺌 (원장 09-27 22:24 «원장님들 스와이프해서 보는게 첫화면에도 나오고 밑에 두번 나오거든 … 밑에거는 없애줘 … 피시판은 그대로» · 9차). 첫 화면 카드(E, ≤768)와 같은 경계. 위의 큰 제목·아이콘 줄은 둔다. */ @media (max-width:768px){ #inc03 .mobile_txt, #inc03 .bot_wrap{display:none!important} } /* ── K. PC 하위 메뉴 간격 줄임 (원장 09-27 23:15 «상단 탭하고 밑에 하위 카테고리 간격이 너무 넓은데» · 10차 나 안) 종전 = 흰 띠가 머리글 바닥(100)에서 시작 + 위아래 24px → 메뉴 글자 ↔ 하위 글자 65px. → 띠를 머리글 안으로 16px 올리고(메뉴 글자와는 안 겹친다 — 글자 36~63 · 띠 84~) 위아래 12px → 33px. 첫 화면(투명 머리글)도 마우스를 올리면 머리글이 흰색이라 띠와 이어진다(1280 실측). 🔴 띠 위의 투명 다리(ul::after — 글자에서 띠로 내려가는 동안 안 닫히게 · 원래 위로 40px)가 띠를 따라 올라가 윗메뉴 글자 가운데까지 덮었다 → 메뉴를 연 채로 옆 글자에 가도 안 바뀌고 글자를 눌러도 안 눌렸다(원내 사본 72칸 중 48칸 · 09-28 올리기 전에 잡음). 다리는 글자 밑 ~ 띠 위 21px 만. 비스듬히 내려가다 옆 글자를 스치는 것은 js 의 0.12초 머묾이 맡는다(L). */ @media (min-width:1025px){ #top_nav li ul{top:calc(50% + 34px)!important;padding:12px 0!important} #top_nav li ul li{margin:0!important} #top_nav li ul::after{top:-21px!important;height:21px!important} } /* ── L. PC 윗메뉴·하위 메뉴 효과 (원장 09-27 23:22 «효과를 좀 넣어줘 상단탭 커서 댈때나 하위 카테고리 나오는것도» → 09-28 «권장안대로» = 가 안) 윗메뉴 = 글자 파랑 + 밑줄이 가운데서 퍼짐(0.25초) · 하위 메뉴 = 띠와 글자가 8px 위에서 내려옴(0.25초) · 하위 글자에 마우스 = 파랑. 파랑 = 머리글 전화 아이콘 색 #1a7ba8 (흰 바탕 글자 대비 4.7:1). 강조는 :hover 가 아니라 js/topmenu_script.js 가 지금 열린 메뉴 li 에 붙이는 lya-on 을 따른다 — 비스듬히 지나가며 스친 글자는 강조하지 않는다. 하위 메뉴가 없는 「비급여항목」만 :hover(a:only-child). 메뉴를 옮겨 갈 때(js 가 ul 에 lya-moving)는 띠를 다시 틀지 않고 글자만 0.15초 — 다시 틀면 그 순간 띠가 비어 뒤 사진이 비쳤다 (라이브 8·9차부터 · 속쪽 띠 밝기 88→192 → 고친 뒤 255 그대로). 움직임 줄이기를 켠 PC 는 효과 없이. */ @media (min-width:1025px){ #top_nav > li > a{position:relative;transition:color .2s} #top_nav > li > a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:1px;background:#1a7ba8;transform:scaleX(0);transition:transform .25s ease-out} #top_nav > li.lya-on > a,#top_nav > li:hover > a:only-child,#top_nav > li:focus-within > a:only-child{color:#1a7ba8!important} #top_nav > li.lya-on > a::after,#top_nav > li:hover > a:only-child::after,#top_nav > li:focus-within > a:only-child::after{transform:scaleX(1)} #top_nav li ul{animation:lyaSubDrop .25s ease-out} #top_nav li ul.lya-moving{animation:none!important} #top_nav li ul.lya-moving > li{animation:lyaSubFade .15s ease-out} #top_nav li ul li a{transition:color .15s} #top_nav li ul li a:hover,#top_nav li ul li a:focus-visible{color:#1a7ba8!important} } @keyframes lyaSubDrop{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}} @keyframes lyaSubFade{from{opacity:0}to{opacity:1}} @media (prefers-reduced-motion:reduce){ #top_nav li ul,#top_nav li ul::before,#top_nav li ul > li{animation:none!important} #top_nav > li > a,#top_nav > li > a::before,#top_nav > li > a::after{transition:none!important} } /* ── E-3. 폰 첫 화면 — 원장님 이름이 아래 고정 띠(64px)에 가리지 않게 카드 크기를 보이는 화면 높이에 맞춘다 (11차) (원장 09-28 05:15 «모바일 첫화면인데 밑에 이영암 텍스트가 잘리는데» — 아이폰 16 Pro 사파리 보이는 칸 약 402×676). 종전 E-2 는 높이 760·680 두 단계로만 줄여 사파리에서 이름이 띠에 걸렸고, 412×780 같은 폰은 50px 가렸다(원내 사본 10가지 크기 중 4). → 카드 높이 ≈ 보이는 높이(svh, 주소창이 펼쳐진 높이) − 375px(머리글·글·이름 줄·띠·여유) — 10가지 크기 모두 이름 여유 16~41px. 키 큰 폰은 100% 그대로 · 아주 짧은 창도 카드 폭 160px 아래로는 안 줄인다 · svh 를 모르는 옛 브라우저는 E-2 그대로. */ @media (max-width:768px){ #mainVisual .hv2 .hv2Swiper{width:min(100%, max(160px, calc((100svh - 375px) * 0.873)));margin:0 auto;overflow:hidden} }