@charset "utf-8";
/* ============================================================
   메인 리뉴얼 - 헤더 · 푸터 (siahn261020 시안)
   2026-11-13
   마크업은 그대로 두고 디자인만 교체한다.
   - 마우스 오버 시 서브메뉴가 펼쳐지는 기존 동작(common.js)을 그대로 쓴다.
   - 모바일 햄버거(#menu_but -> header.open)도 그대로 쓴다.
   - common.css 의 header/footer 규칙이 깊게 중첩돼 있어, 선택자에 .rn 을
     세 번 겹쳐 우선순위를 올린다. 미디어쿼리 안쪽도 똑같이 붙여야 한다.
   ============================================================ */

:root{
  --rn-blue:#1E75BC; --rn-sky:#7DBEF0; --rn-navy:#0E1C2C; --rn-deep:#13253A;
  --rn-ink:#111; --rn-txt:#444; --rn-mute:#8a8f96; --rn-line:#e4e6e9; --rn-yellow:#F5C451;
  --rn-en:'Barlow','Pretendard',sans-serif;
  --rn-gut:clamp(20px,6vw,100px);
  --rn-pad:max(var(--rn-gut),calc((100% - 1560px)/2));   /* 콘텐츠 폭 1560 */
  --rn-hd:84px;    /* PC 헤더 높이 */
  --rn-hdm:66px;   /* 모바일 헤더 높이 */
}

/* 상단 스크롤 진행 바 */
#rn-topbar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--rn-blue);z-index:120;pointer-events:none}

/* ------------------------------------------------------------
   헤더
   ------------------------------------------------------------ */
header.rn.rn.rn{z-index:110;background:transparent;height:auto;min-height:0;max-height:none;border:0}   /* common.css 모바일의 border-bottom:1px #ddd 해제 */
header.rn.rn.rn.open{z-index:1002}   /* 열리면 하단 고정 바(299) 위로 */
header.rn.rn.rn > .inwrap{
  background:transparent;
  filter:none;
  /* backdrop-filter 를 transition 에 넣으면 Chrome 이 합성 레이어를 만들어
     스크롤 전에도 헤더 영역이 미세하게 다른 색으로 칠해진다. background 만 전환한다. */
  transition:background .4s;
}
header.rn.rn.rn > .inwrap::before{display:none}
header.rn.rn.rn.rn-scr > .inwrap,
header.rn.rn.rn.f_nav > .inwrap,
header.rn.rn.rn.sub_nav_hover > .inwrap,
header.rn.rn.rn.open > .inwrap{
  background:rgba(10,20,32,.55);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

header.rn.rn.rn > .inwrap > div{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:0 var(--rn-pad);
  text-align:left;
}

/* 로고 */
header.rn.rn.rn .logo{position:static;float:none;margin:0;padding:0;flex:none;display:flex;align-items:center;height:var(--rn-hd)}
header.rn.rn.rn .logo a{display:flex;align-items:center;height:100%;margin:0;padding:0;line-height:0}
header.rn.rn.rn .logo img{height:36px;width:auto;max-width:none}
header.rn.rn.rn .logo #logo,
header.rn.rn.rn .logo #logo_w{height:36px}
header.rn.rn.rn .logo #logo{display:none;width:auto;max-width:none}   /* 어두운 배경이라 흰 로고만 쓴다 */
header.rn.rn.rn .logo #logo_w{display:block;width:auto;max-width:none;opacity:1}

/* 메뉴 */
header.rn.rn.rn nav{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
header.rn.rn.rn .lnb{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2vw,44px);margin:0;padding:0;float:none;width:auto}
header.rn.rn.rn .lnb > li{display:block;min-width:0;font-size:17px;font-weight:600;vertical-align:top}
header.rn.rn.rn .lnb > li > a{
  display:flex;align-items:center;height:var(--rn-hd);padding:0 10px;
  color:#fff;font-size:17px;font-weight:600;line-height:1;letter-spacing:-.03em;white-space:nowrap;
  opacity:.9;transition:opacity .2s,color .2s;
}
header.rn.rn.rn .lnb > li:hover > a{opacity:1;color:#fff}
header.rn.rn.rn .lnb > li > a span{display:none}    /* 기존 밑줄 장식 제거 */
header.rn.rn.rn .lnb > li > ul{
  display:none;height:auto;padding:4px 0 30px;border:0;width:auto;min-width:100%;
}
header.rn.rn.rn .lnb > li > ul > li{font-size:15px}
header.rn.rn.rn .lnb > li > ul > li > a{
  display:block;padding:7px 10px;color:rgba(255,255,255,.66);font-size:15px;font-weight:500;
  letter-spacing:-.03em;white-space:nowrap;transition:color .2s;
}
header.rn.rn.rn .lnb > li > ul > li:hover > a,
header.rn.rn.rn .lnb > li > ul > li > a:hover{color:#fff}

/* 오른쪽 - 전화번호 알약 */
header.rn.rn.rn .top_call{position:static;right:auto;top:auto;flex:none;display:flex;align-items:center;height:var(--rn-hd);padding:0;background:none;border-radius:0}
header.rn.rn.rn .top_call a{
  display:flex;align-items:center;height:34px;padding:0 20px;border-radius:999px;
  background:#1EA7DE;color:#fff;font-family:var(--rn-en);font-size:17px;font-weight:600;letter-spacing:.01em;
  white-space:nowrap;transition:background .2s;
}
header.rn.rn.rn .top_call a:hover{background:var(--rn-blue)}
header.rn.rn.rn .top_call a span{display:block !important}

/* 모바일 전용 요소 - PC 에서는 숨김 */
header.rn.rn.rn .menu_wrap{display:none}
header.rn.rn.rn .rn-mbt{display:none}

@media screen and (max-width:1400px){
  header.rn.rn.rn .lnb{gap:4px}
  header.rn.rn.rn .lnb > li > a{font-size:15.5px;padding:0 7px}
  header.rn.rn.rn .lnb > li > ul > li > a{font-size:14px;padding:6px 7px}
}

/* ---------------- 모바일 상단 · 메뉴 (시안 .hd / .mnav 수치 그대로) ---------------- */
@media screen and (max-width:767px){
  /* 시안과 동일 : 기본 투명, 테두리 없음. 스크롤해야 배경이 생긴다 */
  header.rn.rn.rn{border:0}
  header.rn.rn.rn > .inwrap{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
  header.rn.rn.rn.rn-scr > .inwrap,
  header.rn.rn.rn.f_nav > .inwrap{
    background:rgba(10,20,32,.55);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  }
  header.rn.rn.rn > .inwrap > div{
    display:flex;align-items:center;justify-content:flex-start;
    height:var(--rn-hdm);padding:0 20px;gap:6px;border:0;
  }

  /* 로고 : 왼쪽 20px, 높이 28 */
  header.rn.rn.rn .logo{order:1;height:var(--rn-hdm);margin-right:auto}
  header.rn.rn.rn .logo img,
  header.rn.rn.rn .logo #logo,
  header.rn.rn.rn .logo #logo_w{height:28px}

  /* 전화 : 아이콘 없이 번호만 (시안 .hd .tel) */
  header.rn.rn.rn .top_call{order:2;height:var(--rn-hdm);width:auto;right:auto;top:auto;padding:0;text-align:left}
  header.rn.rn.rn .top_call a{
    position:static;top:auto;right:auto;
    display:flex;align-items:center;
    width:auto;height:30px;margin:0;padding:0 14px;
    border-radius:999px;background:#1EA7DE;color:#fff;
    font-family:var(--rn-en);font-size:14px;font-weight:600;line-height:1;letter-spacing:.01em;
  }
  header.rn.rn.rn .top_call a::before{content:none}

  /* 햄버거 : 40x40 · 2줄 22px / 1.5px / 9px 간격 (시안 .mnu) */
  header.rn.rn.rn .menu_wrap{
    order:3;position:static;left:auto;top:auto;margin:0;
    display:flex;align-items:center;justify-content:center;
    width:40px;height:var(--rn-hdm);
  }
  header.rn.rn.rn .menu_wrap a{position:relative;display:block;width:40px;height:40px}
  header.rn.rn.rn .menu_wrap a span{
    position:absolute;inset:0;width:auto;height:auto;margin:0;background:none;display:block;
  }
  header.rn.rn.rn .menu_wrap a span::before,
  header.rn.rn.rn .menu_wrap a span::after{
    content:"";position:absolute;left:9px;right:9px;width:auto;height:1.5px;margin:0;
    background:#fff;transition:top .25s, transform .25s, background .25s;
  }
  header.rn.rn.rn .menu_wrap a span::before{top:15px}
  header.rn.rn.rn .menu_wrap a span::after{top:24px}

  /* ---- 메뉴 열림 : 시안 .mtop (흰 바탕 · 진한 로고 · X · 아래 선, 전화 알약 없음) ---- */
  header.rn.rn.rn.open > .inwrap{
    background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
    transition:none;   /* 시안처럼 즉시 흰 상단바로 (서서히 바뀌면 아래 1px 선이 묻힘) */
  }

  header.rn.rn.rn.open .logo #logo{display:block}
  header.rn.rn.rn.open .logo #logo_w{display:none}
  header.rn.rn.rn.open .top_call{display:none}
  header.rn.rn.rn.open .menu_wrap a span::before{top:20px;transform:rotate(45deg);background:var(--rn-ink)}
  header.rn.rn.rn.open .menu_wrap a span::after{top:20px;transform:rotate(-45deg);background:var(--rn-ink)}

  /* ---- 메뉴 패널 (시안 .mnav / .mlist / .mbt) ---- */
  header.rn.rn.rn nav{
    order:4;position:fixed;left:0;right:0;top:var(--rn-hdm);bottom:0;z-index:1001;
    display:flex;flex-direction:column;width:100%;height:auto;margin:0;padding:0;
    background:#fff;overflow:hidden;
    transform:translateX(100%);visibility:hidden;
    transition:transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s .45s;
  }
  header.rn.rn.rn.open nav{
    transform:none;visibility:visible;
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
  }
  header.rn.rn.rn nav::before{display:none}
  header.rn.rn.rn .lnb{
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
    display:block;width:auto;margin:0;padding:8px 20px 20px;background:#fff;
    border:0;border-top:1px solid var(--rn-line);   /* 시안 .mtop 아래 구분선 */
  }
  header.rn.rn.rn .lnb > li{
    display:block;width:auto;margin:0;border:0;border-bottom:1px solid var(--rn-line);
    text-align:left;background:none;
  }
  header.rn.rn.rn .lnb > li > a{
    display:flex;align-items:center;justify-content:space-between;
    height:auto;padding:20px 2px;color:var(--rn-ink);
    font-size:19px;font-weight:700;line-height:1.6;opacity:1;
  }
  header.rn.rn.rn .lnb > li > a::after,
  header.rn.rn.rn .lnb > li.has-sub > a::after{
    content:"";position:static;right:auto;left:auto;margin:0;line-height:1;font-size:0;
    width:8px;height:8px;background:none;display:block;
    border:solid var(--rn-ink);border-width:0 1.5px 1.5px 0;
    transform:translateY(-3px) rotate(45deg);transition:transform .25s, border-color .25s;
  }
  /* 펼쳐진 항목 - common.css 의 회색 바탕 · 막대 아이콘 해제 */
  header.rn.rn.rn .lnb > li.has-sub.active,
  header.rn.rn.rn .lnb > li.active{background:none}
  header.rn.rn.rn .lnb > li.active > a{color:var(--rn-blue)}
  header.rn.rn.rn .lnb > li.has-sub.active > a::after,
  header.rn.rn.rn .lnb > li.active > a::after{
    content:"";position:static;right:auto;left:auto;margin:0;line-height:1;font-size:0;
    width:8px;height:8px;background:none;display:block;
    border:solid var(--rn-blue);border-width:0 1.5px 1.5px 0;
    transform:translateY(2px) rotate(-135deg);
  }
  header.rn.rn.rn .lnb > li > ul{
    display:none;width:auto;min-width:0;height:auto;padding:0 2px 18px;border:0;background:none;
  }
  header.rn.rn.rn .lnb > li > ul > li{font-size:16px;background:none;border:0}
  header.rn.rn.rn .lnb > li > ul > li > a{
    display:block;padding:9px 0;color:var(--rn-txt);font-size:16px;font-weight:500;line-height:1.6;white-space:normal;
  }
  header.rn.rn.rn .lnb > li > ul > li > a:hover{color:var(--rn-blue)}

  /* 메뉴 하단 - 전화번호 + 진료시간 (시안 .mbt) */
  header.rn.rn.rn .rn-mbt{
    display:block;flex:none;padding:22px 20px 28px;background:#F4F6F8;
  }
  header.rn.rn.rn .rn-mbt a{
    display:inline-block;font-family:var(--rn-en);font-size:26px;font-weight:700;color:var(--rn-ink);letter-spacing:.01em;
  }
  header.rn.rn.rn .rn-mbt p{margin-top:4px;font-size:14px;color:var(--rn-mute);font-weight:400;line-height:1.5}
  body.rn-mlock{overflow:hidden}
}

/* ------------------------------------------------------------
   푸터
   ------------------------------------------------------------ */
footer.rn.rn.rn .copy{background:#2a2a2a;color:rgba(255,255,255,.62);font-size:14px;overflow:visible}
footer.rn.rn.rn .copy .inwrap{
  max-width:none;margin:0;padding:56px var(--rn-pad) 130px;overflow:visible;
  display:flex;gap:56px;align-items:flex-start;
}
footer.rn.rn.rn .copy .inwrap > .ft-info{
  float:none;overflow:visible;flex:none;width:520px;padding-right:56px;
  border-right:1px solid rgba(255,255,255,.18);
}
footer.rn.rn.rn .copy .ft-top{display:flex;align-items:center;gap:28px;margin-bottom:28px;white-space:nowrap}
footer.rn.rn.rn .copy .ft-top h5{margin:0}
footer.rn.rn.rn .copy img{opacity:1;max-width:none;height:34px;width:auto}
footer.rn.rn.rn .copy .inwrap address{
  color:rgba(255,255,255,.62);font-family:var(--rn-en),'Pretendard',sans-serif;
  font-style:normal;font-size:14.5px;line-height:1.65;margin:0;letter-spacing:-.01em;
}
footer.rn.rn.rn .copy .inwrap address span{margin-left:16px}
footer.rn.rn.rn .copy .inwrap > .ft-info > p{margin-top:14px;color:rgba(255,255,255,.52);font-size:11.5px;letter-spacing:-.02em}

/* 블로그 · 의료수가표 태그 */
footer.rn.rn.rn .copy ul.sns{float:none;position:static;margin:0;display:flex;gap:10px}
footer.rn.rn.rn .copy ul.sns li{display:block;margin:0}
footer.rn.rn.rn .copy ul.sns li a,
footer.rn.rn.rn .copy ul.sns li > span{
  display:block;padding:3px 13px;border-radius:999px;background:rgba(255,255,255,.26);
  color:#fff;font-size:13px;font-weight:600;margin:0;cursor:pointer;transition:background .2s;
}
footer.rn.rn.rn .copy ul.sns li a:hover,
footer.rn.rn.rn .copy ul.sns li > span:hover{background:var(--rn-blue)}

/* 사이트맵 6열 */
footer.rn.rn.rn .foot_lnb{
  float:none;border-left:0;padding-left:0;flex:1;min-width:0;
  display:grid;grid-template-columns:repeat(6,auto);justify-content:space-between;gap:28px;
}
footer.rn.rn.rn .foot_lnb > li{float:none}
footer.rn.rn.rn .foot_lnb > li > a{
  display:block;white-space:nowrap;padding:0 0 14px;margin-bottom:16px;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:#fff;font-size:15px;font-weight:700;position:relative;
}
footer.rn.rn.rn .foot_lnb > li > a::after{content:"";position:absolute;left:0;bottom:-1px;width:24px;height:1px;background:#fff}
footer.rn.rn.rn .foot_lnb > li > a span{display:none}
footer.rn.rn.rn .foot_lnb > li > ul > li > a{
  display:block;white-space:nowrap;padding:0;line-height:1.85;
  color:rgba(255,255,255,.62);font-size:14px;transition:color .2s;
}
footer.rn.rn.rn .foot_lnb > li > ul > li > a:hover{color:#fff}

@media screen and (max-width:1400px){
  footer.rn.rn.rn .copy .inwrap{gap:36px}
  footer.rn.rn.rn .copy .inwrap > .ft-info{width:420px;padding-right:36px}
  footer.rn.rn.rn .foot_lnb{gap:18px}
  footer.rn.rn.rn .foot_lnb > li > ul > li > a{font-size:13px}
}
@media screen and (max-width:1100px){
  footer.rn.rn.rn .copy .inwrap{flex-direction:column}
  footer.rn.rn.rn .copy .inwrap > .ft-info{width:auto;padding-right:0;border-right:0}
  footer.rn.rn.rn .foot_lnb{width:100%;grid-template-columns:repeat(3,auto);justify-content:start;gap:28px 48px}
}
@media screen and (max-width:767px){
  footer.rn.rn.rn .copy,
  footer.rn.rn.rn .copy .inwrap,
  footer.rn.rn.rn .copy .inwrap > .ft-info,
  footer.rn.rn.rn .copy .inwrap address,
  footer.rn.rn.rn .copy .inwrap > .ft-info > p{text-align:left}
  footer.rn.rn.rn .copy .inwrap{padding:56px var(--rn-gut) 100px;gap:30px}
  footer.rn.rn.rn .copy .ft-top{flex-wrap:wrap;gap:14px;white-space:normal}
  /* 모바일에서는 푸터 사이트맵을 빼고 사업자 정보만 남긴다 */
  footer.rn.rn.rn .foot_lnb{display:none}
  footer.rn.rn.rn .foot_lnb > li > a,
  footer.rn.rn.rn .foot_lnb > li > ul > li > a{white-space:normal}
  footer.rn.rn.rn .copy .inwrap address span{margin-left:0;display:block}
}

/* ------------------------------------------------------------
   오시는 길 - 구글 지도 (푸터 .foot_board / 서브페이지)
   카카오 지도 SDK 는 앱키에 도메인이 등록돼 있지 않아 401 로 막혀 있어
   별도 키가 필요 없는 구글 지도 임베드로 대체한다.
   ------------------------------------------------------------ */
.rn-gmap{display:block;width:100%;height:100%;min-height:300px;border:0;border-radius:10px;background:#eef0f2}
/* 오시는길 페이지 본문 지도 */
.rn-gmap-box{max-width:1100px;margin:40px auto 30px}
.rn-gmap-box .rn-gmap{height:460px}
@media screen and (max-width:767px){
  .rn-gmap-box{margin:26px auto 20px}
  .rn-gmap-box .rn-gmap{height:300px}
}

/* 푸터 위 오시는 길 블록은 전 페이지에서 숨긴다 (서브 푸터를 메인과 동일하게)
   오시는 길 정보는 메인 info 섹션과 introduce/contact.html 에 있다 */
footer.rn.rn.rn .foot_board{display:none}

/* ============================================================
   오시는 길 (#rnfoot) - 전 페이지 공통, 어두운 푸터 바로 위
   원래 메인 본문(#rnmain .info)에 있던 섹션을 푸터로 옮긴 것
   ============================================================ */
#rnfoot{
  --blue:#1E75BC; --ink:#111; --txt:#444; --mute:#8a8f96; --line:#e4e6e9;
  --sans:"Pretendard","Malgun Gothic",sans-serif; --en:Barlow,var(--sans);
  --gut:clamp(20px,6vw,100px);
  --pad:max(var(--gut),calc((100% - 1560px)/2));
  font-family:var(--sans);color:var(--ink);background:#fff;
  word-break:keep-all;line-height:1.6;letter-spacing:-.02em;font-size:16px;
}
#rnfoot *{box-sizing:border-box;margin:0;padding:0}
#rnfoot a{color:inherit;text-decoration:none}
#rnfoot img{display:block;max-width:100%}
#rnfoot h1,#rnfoot h2,#rnfoot h3,#rnfoot h4,#rnfoot h5,#rnfoot h6{
  color:inherit;font-weight:inherit;line-height:inherit;font-size:inherit;
}
#rnfoot p{font-weight:400;line-height:inherit}
#rnfoot .gut{padding-left:var(--pad);padding-right:var(--pad)}
#rnfoot .big{font-weight:700;font-size:clamp(24px,2.9vw,48px);line-height:1.3;letter-spacing:-.045em}
#rnfoot .btn{
  display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 24px;margin:0;
  border:1px solid rgba(17,17,17,.3);border-radius:999px;
  color:var(--ink);font-weight:600;font-size:15px;transition:.25s;
}
#rnfoot .btn i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}
#rnfoot .btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#rnfoot .btn:hover i{background:#fff;color:var(--ink)}

#rnfoot{border-top:1px solid var(--line)}        /* 서브페이지 본문과의 경계 */
#rnmain ~ #rnfoot{border-top:0}                  /* 메인은 위가 어두운 섹션이라 생략 */
#rnfoot .rn-info{padding:150px 0;background:#fff}
#rnfoot .loc{display:grid;grid-template-columns:1fr minmax(0,540px);gap:80px;align-items:stretch}
#rnfoot .map{order:-1;position:relative;display:block;min-height:520px;border-radius:20px;overflow:hidden}
#rnfoot .map .rn-gmap{position:absolute;inset:0;width:100%;height:100%;min-height:0;border:0;border-radius:0}
#rnfoot .map .mlink{
  position:absolute;z-index:3;left:24px;bottom:24px;padding:9px 18px;border-radius:999px;
  background:rgba(255,255,255,.95);box-shadow:0 6px 20px rgba(14,28,44,.14);
  font-size:14px;font-weight:700;color:var(--ink);
}
#rnfoot .map .mlink:hover{background:var(--blue);color:#fff}
#rnfoot .lt{align-self:center}
#rnfoot .addr{margin-top:28px;font-size:19px;color:#3a3f45}
#rnfoot .tel{display:inline-block;margin-top:10px;font-family:var(--en);font-size:clamp(34px,2.6vw,46px);font-weight:600;letter-spacing:-.01em;color:var(--ink)}
#rnfoot .hrs{margin-top:40px;border-top:1px solid var(--ink)}
#rnfoot .hrs div{display:flex;align-items:baseline;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
#rnfoot .hrs dt{width:84px;font-size:16px;color:var(--mute)}
#rnfoot .hrs dd{font-family:var(--en);font-size:21px;font-weight:600;letter-spacing:.01em;color:var(--ink)}
#rnfoot .hrs em,#rnfoot .hrs small{margin-left:10px;font-family:var(--sans);font-style:normal;font-size:14px;font-weight:600;color:var(--blue);letter-spacing:-.02em}
#rnfoot .hrs small{color:var(--mute);font-weight:500}
#rnfoot .acts{display:flex;gap:10px;margin-top:36px}

@media screen and (max-width:767px){
  #rnfoot{font-size:15px}
  #rnfoot .rn-info{padding:90px 0 70px}
  #rnfoot .loc{grid-template-columns:1fr;gap:40px}
  #rnfoot .map{min-height:300px}
  #rnfoot .lt>h2,#rnfoot .lt>.addr,#rnfoot .lt>.tel{text-align:center}
  #rnfoot .lt>.tel{display:block}
  #rnfoot .acts{gap:8px}
  #rnfoot .acts .btn{flex:1;justify-content:center;gap:8px;padding:0 10px;font-size:14.5px;white-space:nowrap}
}