/*!
 * Bootstrap Grid v4.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*
 * 위 고지는 **지우지 않는다.** 아래 규칙이 Bootstrap Grid 에서 온 것이고, MIT 는 고지를
 * 사본에 함께 두기를 요구한다. 2026-09-16 에 옮길 때 고지가 따라오지 않았다.
 *
 * 이 파일은 `theme.ts` 에서 `raw: true` 라 **추림을 타지 않고 그대로 실린다** — 81개 화면이
 * `/styles/layout.css` 를 직접 link 한다. 그러니 이 배너를 지키는 것은 추림 도구가 아니라
 * 「이 파일을 손대는 사람」이다. `/*!` 로 연 것은 관례를 따른 것이고, 나중에 이 시트가
 * 추림을 타게 되더라도 살아남게 하려는 대비다 (`tools/distill-css.mjs` 3-3).
 *
 * 격자 뼈대 — `hybrid-composer/css/bootstrap-grid.css`(Bootstrap Grid 4.1.3 의 추림본 32규칙)를
 * 그대로 옮긴 것이다 (2026-09-16). 값은 bootstrap 의 것이고, 실제 화면은 그 위에 테마가 덮어쓴
 * 값이 정한다 — skin 이 `.row{margin:0 -15px}` · 칸 안쪽 15px, child 가 `.container` 좌우 50px
 * (575px 이하 25px), `main>section>.container` 위아래 100px(767px 이하 60px).
 *
 * **테마 시트들보다 앞에 <link> 로 싣는다** — 원본이 bootstrap 을 맨 앞에 실었기 때문이다. 캐스케이드는
 * 「같은 순위면 뒤가 이긴다」라, 이 시트가 앞에 있어야 skin·child 의 덮어쓰기가 지금처럼 이긴다.
 * (한 번 `@layer` 에 넣어 Astro 인라인으로 실어 봤다가 43,993건이 어긋났다 — 레이어 안의 규칙은
 * 순서·명시도와 무관하게 레이어 밖 모든 규칙에 지므로, 「맨 앞에 실렸다」와는 다른 뜻이다.)
 * 추림(distill)은 거치지 않는다 — 우리가 쓴 32규칙에는 추릴 것이 없다.
 *
 * 이름(`container` · `row` · `col-lg-*`)은 바꾸지 않는다. 플러그인 이름이 아니라 격자의 일반
 * 이름이고, 콘텐츠 IR 3,800곳이 이 이름을 들고 있다 — 이름을 우리가 소유한다.
 */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}

.container {
  width: 100%;
  padding-right: 30px;
  padding-left: 30px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -30px;
  margin-left: -30px;
}

.col-sm-6,
.col-sm-12,
.col-md-6,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-12 {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 30px;
  padding-left: 30px;
}
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.align-items-center {
  align-items: center !important;
}