@charset "utf-8";

/* ============================
   dr — 의료진 소개 페이지
   마크업 : sections/dr/
============================ */

#dr-page {
  --dr-txt-w: 50%;
  --dr-img-out: min(70px, max(0px, (100vw - var(--one-layout)) / 2 - var(--one-space-safe)));
  --dr-msg-h: 550px;
  --dr-blog-h: 658px;
}


/* ============================
   01 info — 사진 | 약력
============================ */

#dr-page .sec-info .con-inner {
  padding: var(--one-space-s) 0 var(--one-space-lg);
}

#dr-page .dr-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--dr-txt-w));
  column-gap: var(--one-gap-xl);
  align-items: start;
}

#dr-page .dr-name {
  color: var(--one-txt-color2);
}

/* 사진만 컨테이너 왼쪽 밖으로 — 화면 여백이 있을 때만 */
#dr-page .dr-img {
  margin-left: calc(-1 * var(--dr-img-out));
}

#dr-page .dr-img img {
  display: block;
}

#dr-page .dr-body {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-xl);
  padding-top: var(--one-space-s);
}

#dr-page .dr-role {
  margin-left: var(--one-gap-sm);
  vertical-align: 0.15em;
}

#dr-page .dr-hist {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-lg);
  font-size: var(--one-body);
}


/* ============================
   02 msg — 인사말 띠
============================ */

#dr-page .sec-msg {
  background-image: url(../images/dr/02.jpg);
}

#dr-page .sec-msg .con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--one-space-s);
  min-height: var(--dr-msg-h);
}

#dr-page .msg-txt {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  font-size: 26px;
}

/* 서명 반사 */
#dr-page .msg-sign {
  -webkit-box-reflect: below -0.3em linear-gradient(transparent 70%, rgb(0 0 0 / 0.35));
}

#dr-page .msg-name {
  margin-left: var(--one-gap-sm);
  font-size: var(--one-hd3);
  letter-spacing: 0.2em;
}


/* ============================
   03 blog — 블로그 바로가기 띠
============================ */

#dr-page .sec-blog {
  background-image: url(../images/dr/03.jpg);
}

#dr-page .sec-blog .con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--dr-blog-h);
}

#dr-page .sec-blog .sec-hd {
  gap: var(--one-gap-lg);
}

/* .txt-wrap a { color: inherit } 를 이겨야 버튼 글자가 흰색으로 남는다 */
#dr-page .blog-btn,
#dr-page .blog-btn:hover,
#dr-page .blog-btn:focus {
  color: var(--one-btn-on-fill);
  text-decoration: none;
}

#dr-page .blog-btn {
  --btn-py: 0.20em;
  --btn-px: 0.98em;
  font-size: var(--one-p-tit);
  font-weight: 600;
  letter-spacing: -0.05em;
  gap: var(--one-gap-r);
}

#dr-page .blog-arr {
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(0.05em) rotate(45deg);   /* 회전한 꺾쇠는 박스 중심보다 위로 보인다 */
}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {
  #dr-page {
    --dr-img-out: 0px;
    --dr-msg-h: 480px;
    --dr-blog-h: 520px;
  }

  #dr-page .sec-info .con-inner {
    padding: var(--one-space-lg) 0;
  }

  #dr-page .dr-wrap {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: var(--one-space-s);
  }

  #dr-page .dr-img {
    max-width: 480px;
  }

  #dr-page .dr-body {
    padding-top: 0;
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {
  #dr-page {
    --dr-msg-h: 0px;
    --dr-blog-h: 0px;
  }

  #dr-page .dr-img {
    max-width: 80%;
  }

  #dr-page .dr-body {
    justify-self: stretch;
    gap: var(--one-gap-lg);
  }

  #dr-page .dr-hist {
    gap: var(--one-gap-r);
    font-size: var(--one-body);
  }

  #dr-page .msg-txt {
    gap: 1em;
    font-size: var(--one-body);
  }

  #dr-page .msg-name {
    font-size: var(--one-hd3);
  }

  #dr-page .sec-blog {
    background-position: left center;
  }
}