/* 모바일 헤더 줄 — 네 진료과 공용.
   1068px 까지가 모바일이다. 아이패드 프로 세로가 정확히 1024px 이라 1023 으로 끊으면 1px 차이로 빠진다. */

.hdm { display: none; }

@media (max-width: 1068px) {

  .hdm {
    display: block;
    /* 피부과 헤더는 flex 라 폭을 안 주면 내용만큼만 넓어진다 */
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
  }

  /* 공용 줄은 스스로 화면에 붙는다.
     성형계열의 .header 는 fixed 인데 피부과의 .derma-header 는 absolute 라,
     피부과만 스크롤하면 헤더가 같이 올라갔다. 여기서 한 번에 정해 진료과마다 달라질 일을 없앤다. */
  .hdm-host {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  /* 옛 줄은 진료과마다 이름이 다르다(.inner / .derma-header-wrap).
     여기서 이름을 나열하면 이 파일이 진료과를 알게 되므로 표식 하나만 본다.
     7단계에서 지울 대상도 이 표식으로 찾는다. */
  .hdm-host > .hdm-legacy { display: none; }

  .hdm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 48px;
  }

  .hdm-gap { flex: 1 1 auto; min-width: 0; }

  .hdm-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .hdm-icon .material-symbols-outlined { font-size: 22px; }
  .hdm-admin { color: #7c5cff; }

  .hdm-lang { position: relative; display: flex; }
  .hdm-lang-list {
    display: none;
    position: absolute;
    top: 73%;
    right: -11px;
    z-index: 1100;
    margin: 6px 0 0;
    padding: 6px 0;
    list-style: none;
    /* 폭을 못 박아야 한다. reset 의 img{max-width:100%} 가 폭 없는 부모에서는 0 으로 풀린다 */
    width: 48px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  }
  .hdm-lang-list.open { display: block; }
  .hdm-lang-list li { text-align: center; }
  .hdm-lang-list a { display: block; padding: 6px 0; }
  .hdm-lang-list img { width: 32px; height: auto; }

  /* 진료과 탭 — 네 곳을 늘 보여주고 지금 보는 곳을 강조한다.
     글자보다 좁아지지 않게 둔다: 균등하게 4등분하면 320px 러시아어 「Пластика」가 잘린다(실측).
     남는 자리는 나눠 갖고, 모자라면 이 줄만 옆으로 굴린다. */
  .hdm-tabs {
    display: flex;
    gap: 4px;
    padding: 0 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .hdm-tabs::-webkit-scrollbar { display: none; }

  .hdm-tab {
    flex: 1 1 auto;
    padding: 6px 8px;
    border-radius: 999px;
    background: #f6f6f8;
    color: #55596a;
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
  }
  .hdm-tab.on { background: #6d28d9; color: #fff; }

  /* 가장 좁은 구간에서만 여백을 한 단계 줄인다.
     러시아어 네 낱말이 320px 에서 3px 넘쳤다(실측). 글자는 안 줄인다 — 진료과 이름은 읽혀야 한다. */
  @media (max-width: 359px) {
    .hdm-tabs { gap: 3px; }
    .hdm-tab { padding: 6px 6px; }
  }


}