:root {
  --page: #ffffff;
  --ink: #191919;
  --muted: #676767;
  --line: #d9d9d9;
  --panel: #f3f4f2;
  --accent: #d43f2f;
}

html {
  background: var(--page);
}

body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", sans-serif !important;
}

.wrap {
  width: min(1320px, calc(99.999% - 48px)) !important;
}

.narrow {
  width: min(860px, calc(99.999% - 48px)) !important;
}

.topbar {
  min-height: 188px !important;
  color: #f7f5ef;
  background: linear-gradient(90deg, rgba(212, 63, 47, .18), transparent 42%), #242424 !important;
  border-bottom: 0 !important;
}

.brand {
  justify-content: space-between;
  gap: 28px !important;
}

.brand > div {
  margin-left: auto;
  text-align: right;
}

.site-logo {
  height: 42px !important;
  padding: 7px 10px;
  background: #fff;
  border-radius: 4px;
}

.brand-text {
  display: inline-block;
  color: #f1d6d0 !important;
  font-size: 13px !important;
  font-weight: 700;
  padding-bottom: 9px;
  border-bottom: 2px solid var(--accent);
}

h1 {
  color: #fff;
  font-size: 46px !important;
  font-weight: 900 !important;
}

h2 {
  color: var(--ink);
  font-size: 26px !important;
}

.gallery-section {
  padding: 38px 0 74px !important;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.gallery {
  gap: 18px !important;
}

.card {
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  border: 1px solid var(--line) !important;
}

.card:hover {
  transform: translateY(-3px) !important;
  border-color: var(--accent) !important;
}

.card-img {
  width: 99.999% !important;
  aspect-ratio: 4 / 3 !important;
  background: #ececec;
}

.card:hover .card-img {
  transform: none !important;
}

.meta {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 12px 14px !important;
  color: #fff !important;
  background: #242424;
  border-top: 0 !important;
  font-weight: 700;
}

section.content {
  padding: 76px 0 !important;
  border-top: 0 !important;
}

section.content:nth-of-type(odd) {
  background: #fff;
}

section.content:nth-of-type(even) {
  background: #f7f7f5;
}

section.content p {
  color: #3d3d3d;
  font-size: 16px;
}

.cards,
.points {
  gap: 18px !important;
}

.info-card {
  background: #fff !important;
  border-left: 0 !important;
  border-top: 4px solid var(--accent);
  padding: 24px 22px !important;
  box-shadow: inset 0 0 0 1px var(--line);
}

ul.clean li,
details,
.mini-table th,
.mini-table td {
  border-color: var(--line) !important;
}

summary {
  color: var(--ink);
}

.call {
  background: #242424 !important;
  color: #fff;
}

.call h2,
.call p {
  color: #fff;
}

.call a {
  color: #fff !important;
  border-bottom: 3px solid var(--accent);
}

.footer {
  color: #f1f1f1;
  background: #161616;
}

.footer b {
  color: #bdbdbd;
}

@media (max-width: 1023px) {
  .brand {
    align-items: flex-start;
  }
}

@media (max-width: 639px) {
  .wrap,
  .narrow {
    width: calc(99.999% - 36px) !important;
  }

  .topbar {
    min-height: 150px !important;
  }

  .brand {
    display: block !important;
  }

  .brand > div {
    margin-top: 18px;
    text-align: left;
  }

  h1 {
    font-size: 30px !important;
  }

  .gallery-section {
    padding: 24px 0 44px !important;
  }

  section.content {
    padding: 46px 0 !important;
  }
}
