.page-header {
  box-sizing: border-box;

  width: 100%;
  height: 22mm;
  flex: 0 0 22mm;

  display: grid;
  grid-template-columns: minmax(0, 1fr) 34mm;
  grid-template-rows: 9mm 0.35mm;

  column-gap: 0mm;
  row-gap: 1.5mm;

  align-items: end;

  padding-top: 5mm;
  padding-bottom: 23mm;
}

.page-header__title {
  min-width: 0;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-transform: uppercase;

  color: #444;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
}

.page-header__logo-area {
  min-width: 0;

  grid-column: 2;
  grid-row: 1 / 3;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.page-header__logo {
  display: block;

  width: auto;
  max-width: 34mm;

  height: auto;
  max-height: 9mm;

  transform: translateY(2mm);

  object-fit: contain;
}

.page-header::after {
  content: "";

  grid-row: 2;

  display: block;

  width: 100%;
  height: 0;

  border-bottom: 0.35mm solid #aaa;
}

/* 로고가 있는 페이지: 로고 앞에서 선 종료 */
.page-header--with-logo::after {
  grid-column: 1;
}

/* 로고가 없는 페이지: 선을 전체 폭으로 표시 */
.page-header--without-logo::after {
  grid-column: 1 / -1;
}

/*
 * 로고가 없는 페이지에서는
 * 제목도 전체 폭을 사용할 수 있게 한다.
 */
.page-header--without-logo {
  grid-template-columns: minmax(0, 1fr);
}

.page-header--without-logo
.page-header__title {
  grid-column: 1;
}

.page-header--without-logo
.page-header__logo-area {
  display: none;
}