/* 피부과 레이아웃 — layout.html 의 인라인 style 에서 옮겼다.
   인라인은 바깥 CSS 로 덮을 수 없어 고칠 때마다 !important 를 붙여야 했다. */

.derma-layout {
  display: flex;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
}

/* 헤더가 흐름 밖(absolute)이라 본문이 헤더 높이만큼 자기를 밀어낸다.
   그래서 이 값은 헤더 높이와 같아야 한다 — 헤더를 고치면 여기도 같이 본다. */
.derma-layout .main-content {
  margin-top: 73px;              /* PC 피부과 헤더 높이 */
  width: calc(100% - 340px);
  position: relative;
}

@media (max-width: 1280px) {
  .derma-layout .main-content { width: 100%; }
}

/* 1068 이하는 네 진료과 공용 헤더다 — 아이콘 줄 53 + 진료과 탭 줄 36 + 아래 테두리 1.
   탭 글자 높이를 못 박아 두어 언어가 바뀌어도 이 값이 흔들리지 않는다(7언어×7폭 실측). */
@media (max-width: 1068px) {
  .derma-layout .main-content {
    margin-top: 90px;
    width: 100%;
  }
}