@charset "utf-8";

/* ===========================
   ACCESSIBILITY
=========================== */

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--sub-primary);
  outline-offset: 3px;
}


/* ===========================
   BUTTON
=========================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;

  min-width: 9.6rem;
  min-height: 4.4rem;
  padding: 0 1.8rem;

  border: 1px solid transparent;
  border-radius: var(--radius-sm);

  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;

  transition: var(--transition);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-primary-dark);
}

.btn--outline {
  border-color: var(--color-border);
  background: var(--color-white);
  color: var(--color-dark);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
  background: #666;
  color: #fff;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;

  font-size: 1.6rem;
  font-weight: 700;
  color: #4d4d4d;

  transition: 0.25s ease;
}

/* 텍스트 */

.btn-more__text {
  position: relative;
}

/* 화살표 영역 (원 + 선 + 화살표) */

.btn-more__arrow {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2rem;
  height: 2rem;

  border-radius: 50%;
  background: #f4d8a8;
}

/* 선 */

.btn-more__arrow::before {
  content: "";

  position: absolute;
  left: -0.3rem;

  width: 1.6rem;
  height: 0.2rem;

  background: currentColor;
}

/* 화살표 */

.btn-more__arrow::after {
  content: "";

  width: 0.8rem;
  height: 0.8rem;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;

  transform: rotate(45deg);
}

.btn-more:hover,
.btn-more:focus-visible {
  color: var(--hover-color, #211e1e);
}

/* 원 이동 */

.btn-more:hover .btn-more__arrow,
.btn-more:focus-visible .btn-more__arrow {
  transform: translateX(4px);
}

/* 선 길어지는 효과 */

.btn-more:hover .btn-more__arrow::before,
.btn-more:focus-visible .btn-more__arrow::before {
  width: 1.8rem;
}

.btn-more__arrow,
.btn-more__arrow::before {
  transition: all 0.25s ease;
}

/* ===========================
   BADGE
=========================== */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 70px;
  min-height: 2.4rem;
  padding: 0 0.5rem;

  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;

  white-space: nowrap;
}

.badge--open {
  background: #e65629;
  color: #fff;
}

.badge--closed {
  background: #333;
  color: #fff;
}

/* ===========================
   TAB
=========================== */

.tab {
  width: 100%;
}

.tab__list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.tab__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 4.4rem;
  padding: 0 1.8rem;

  /* border: 1px solid var(--color-border); */
  border-radius: var(--radius-sm);

  /* background: var(--color-white); */

  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-gray);

  transition: var(--transition);
}

.tab__button:hover,
.tab__button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.tab__button[aria-selected="true"],
.tab__button.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.tab__panel {
  margin-top: 2rem;
}

.tab__panel[hidden] {
  display: none;
}

.tab--vertical {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}

.tab--vertical .tab__list {
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  width: 16rem;
}

.tab--vertical .tab__button {
  width: 100%;
  justify-content: flex-start;
}

/* ===========================
   CARD
=========================== */

.card {
  display: flex;
  flex-direction: column;

  height: 100%;
  padding: 2.4rem;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-white);

  transition: var(--transition);
}

.card:hover,
.card:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08);
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  margin-bottom: 1.6rem;
}

.card__title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-black);
}

.card__body {
  flex: 1;
}

.card__meta {
  display: grid;
  gap: 0.8rem;

  margin-top: 1.6rem;

  font-size: 1.5rem;
  color: var(--color-gray);
}

.card__meta-row {
  display: flex;
  gap: 1rem;
}

.card__meta-label {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-dark);
}

.card__foot {
  margin-top: 2.4rem;
}

/* ===========================
   QUICK LINK
=========================== */

.quick-link {
  display: grid;
  gap: 1.2rem;
}

.quick-link--grid5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.quick-link--grid4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quick-link__item {
  min-width: 0;
}

.quick-link__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 9.6rem;
  padding: 1.2rem;

  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);

  background: var(--color-white);

  text-align: center;

  transition: var(--transition);
}

.quick-link__link:hover,
.quick-link__link:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
}

.quick-link__icon {
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: 0.8rem;
}

.quick-link__text {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ===========================
   SWIPER CONTROL
=========================== */

.swiper-control {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.swiper-button {
  position: static;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 4.4rem;
  height: 4.4rem;

  margin: 0;

  border: 1px solid var(--color-border);
  border-radius: 50%;

  background: var(--color-white);

  color: var(--color-dark);

  transition: var(--transition);
}

.swiper-button::after {
  display: none;
}

.swiper-button:hover,
.swiper-button:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.swiper-button--prev::before,
.swiper-button--next::before {
  content: "";

  width: 1rem;
  height: 1rem;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
}

.swiper-button--prev::before {
  transform: rotate(-135deg);
}

.swiper-button--next::before {
  transform: rotate(45deg);
}

.swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.swiper-pagination-bullet {
  width: 0.8rem;
  height: 0.8rem;

  opacity: 1;
  background: #ccc;
}

.swiper-pagination-bullet-active {
  width: 2.4rem;
  border-radius: 999px;
  background: var(--color-primary);
}

/* ===========================
   BOARD LIST
=========================== */

.board-list {
  border-top: 2px solid var(--color-dark);
}

.board-list__item {
  border-bottom: 1px solid var(--color-border);
}

.board-list__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;

  min-height: 5.6rem;

  font-size: 1.6rem;
}

.board-list__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  color: var(--color-dark);
}

.board-list__date {
  flex-shrink: 0;
  color: var(--color-gray);
}

.board-list__link:hover .board-list__title,
.board-list__link:focus-visible .board-list__title {
  color: var(--color-primary);
  text-decoration: underline;
}

/* ===========================
   RESPONSIVE
=========================== */
@media (max-width: 1500px) {
  .quick-link--grid5 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .quick-link__text {font-size: 1.2rem;}
  .tab--vertical .tab__list {width: 15rem;}
}

@media (max-width: 1279px) {
  .main-section {
    padding: 6rem 0;
  }

  .main-section-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 768px) {
  .inner {
    padding: 0 1.6rem;
  }

  .main-section {
    padding: 4.8rem 0;
  }

  .section-head {
    align-items: center;
    flex-direction: column;
    gap: 0;
  }

  .main-section-title {
    font-size: 2.2rem;
  }

  .tab--vertical {
    flex-direction: column;
  }

  .tab--vertical .tab__list {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
  }

  .tab--vertical .tab__button {
    width: auto;
    white-space: nowrap;
  }

  .quick-link--grid5,
  .quick-link--grid4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .card {
    padding: 2rem;
  }

  .board-list__link {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.4rem;

    padding: 1.6rem 0;
  }

  .main-course-tab__list .tab__button::after {display: none;}
}

@media (max-width: 480px) {
  .main-section {
    padding: 4rem 0;
  }

  .main-section-title {
    font-size: 2rem;
  }

  .btn {
    min-height: 4rem;
    padding: 0 1.4rem;
    font-size: 1.5rem;
  }

  .quick-link__link {
    min-height: 8.8rem;
  }

  .quick-link__icon {
    width: 4rem;
    height: 4rem;
  }

  .quick-link__text {
    font-size: 1.4rem;
  }
}




/* ===========================
   CONTENT TYPOGRAPHY (sub page)
=========================== */

.content-section {
  margin-top: 5.6rem;
}

.content-section:first-child {
  margin-top: 0;
}

.content-title-lg {
  position: relative;

  margin-bottom: 2.4rem;
  padding-left: 1.8rem;

  font-size: 3rem;
  font-weight: 800;
  line-height: 1.35;
  color: #111;
}

.content-title-lg::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0.65em;

  width: 0.8rem;
  height: 0.8rem;

  background: var(--sub-primary);
}

.content-title-md {
  margin-bottom: 1.8rem;

  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1.4;
  color: #222;
}

.content-title-sm {
  margin-bottom: 1.2rem;

  font-size: 2rem;
  font-weight: 700;
  line-height: 1.45;
  color: #333;
}

.content-desc {
  font-size: 1.7rem;
  line-height: 1.8;
  color: #444;
}

.content-desc + .content-desc {
  margin-top: 1.2rem;
}

/* ===========================
   CONTENT BOX
=========================== */

.content-box,
.notice-box,
.warning-box {
  position: relative;

  margin-top: 2.4rem;
  padding: 2.4rem 2.8rem;

  border-radius: 1.4rem;

  font-size: 1.6rem;
  line-height: 1.75;
}

.content-box {
  border: 1px solid #dfe4ec;
  background: #f8fafc;
  color: #333;
}

.notice-box {
  border: 1px solid #a9e9ac;
  background: #f5fff3;
  color: #37513b;
}

.warning-box {
  border: 1px solid #f6d0bd;
  background: #fff6f0;
  color: #6f3a23;
}

.content-box__title,
.notice-box__title,
.warning-box__title {
  display: block;

  margin-bottom: 0.8rem;

  font-size: 1.8rem;
  font-weight: 800;
  color: #222;
}

/* ===========================
   LIST
=========================== */

.list-dot,
.list-dash,
.list-number,
.list-check {
  display: grid;
  gap: 0.8rem;

  margin-top: 1.2rem;

  font-size: 1.6rem;
  line-height: 1.7;
  color: #444;
}

.list-dot > li,
.list-dash > li,
.list-check > li {
  position: relative;
  padding-left: 1.8rem;
}

.list-dot > li::before {
  content: "";

  position: absolute;
  left: 0.4rem;
  top: 0.75em;

  width: 0.5rem;
  height: 0.5rem;

  border-radius: 50%;
  background: var(--sub-primary);
}

.list-dash > li::before {
  content: "";

  position: absolute;
  left: 0.2rem;
  top: 0.85em;

  width: 0.8rem;
  height: 2px;

  background: #777;
}

.list-check > li {
  padding-left: 2.4rem;
}

.list-check > li::before {
  content: "";

  position: absolute;
  left: 0.2rem;
  top: 0.5em;

  width: 1.3rem;
  height: 0.7rem;

  border-left: 2px solid #2f8f00;
  border-bottom: 2px solid #2f8f00;

  transform: rotate(-45deg);
}

.list-number {
  counter-reset: number-list;
}

.list-number > li {
  position: relative;
  padding-left: 3.2rem;
  counter-increment: number-list;
}

.list-number > li::before {
  content: counter(number-list);

  position: absolute;
  left: 0;
  top: 0.1em;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 2.2rem;
  height: 2.2rem;

  border-radius: 50%;

  background: var(--sub-primary);
  color: #fff;

  font-size: 1.3rem;
  font-weight: 800;
}

/* nested list */

.list-dot .list-dash,
.list-number .list-dot,
.list-check .list-dash {
  margin-top: 0.6rem;
  font-size: 1.6rem;
}

/* ===========================
   TEXT COLOR
=========================== */

.text-primary {
  color: var(--sub-primary) !important;
  font-weight: 700;
}

.text-point {
  color: #e65629 !important;
  font-weight: 700;
}

.text-muted {
  color: #777 !important;
}

/* ===========================
   CONTENT LINK
=========================== */

.sub-content a:not([class]) {
  color: var(--color-text);
  text-underline-offset: 0.3rem;
  transition: all .3s;
}

.sub-content a:not([class]):hover,
.sub-content a:not([class]):focus-visible {
  color: #b5814d;
  text-decoration: underline;
  
}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width: 768px) {
  .content-section {
    margin-top: 4rem;
  }

  .content-title-lg {
    margin-bottom: 2rem;
    font-size: 2.6rem;
  }

  .content-title-md {
    font-size: 2.2rem;
  }

  .content-title-sm {
    font-size: 1.9rem;
  }

  .content-desc {
    font-size: 1.6rem;
  }

  .content-box,
  .notice-box,
  .warning-box {
    padding: 2rem;
    font-size: 1.5rem;
  }

  .list-dot,
  .list-dash,
  .list-number,
  .list-check {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .content-title-lg {
    padding-left: 1.4rem;
    font-size: 2.3rem;
  }

  .content-title-lg::before {
    width: 0.6rem;
    height: 0.6rem;
  }

  .content-title-md {
    font-size: 2rem;
  }

  .content-title-sm {
    font-size: 1.8rem;
  }

  .content-box,
  .notice-box,
  .warning-box {
    margin-top: 2rem;
    padding: 1.8rem;
    border-radius: 1.2rem;
  }
}



/* ===========================
   TABLE COMPONENT
   component.css 권장
=========================== */

/* table caption 접근성 처리 */
.table-caption,
.table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;

  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);

  white-space: nowrap;
}

/* 모바일 스크롤 안내 포함 래퍼 */
.table-scroll {
  position: relative;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll::before {
  content: "좌우로 스크롤하여 내용을 확인하세요.";

  display: none;

  margin-bottom: 0.8rem;

  font-size: 1.3rem;
  color: #777;
}

.table-scroll table {
  min-width: 72rem;
}

/* 기본 테이블 */
.table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid #222;

  font-size: 1.6rem;
  line-height: 1.55;
  color: #333;
  margin-bottom: 50px;
}

.table th,
.table td {
  padding: 1.6rem 1.8rem;
  border-bottom: 1px solid #ece6e1;
  vertical-align: middle;
}

.table th {
  background: #f6f8fb;
  font-weight: 800;
  color: #222;
}

.table td {
  background: #fff;
}

.table a {
  color: var(--sub-primary);
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.table a:hover,
.table a:focus-visible {
  color: #9e6700;
}

/* ===========================
   기본 정보 테이블
   예: 기관정보, 담당부서, 조례 상세
=========================== */

.table--info th {
  width: 18rem;
  text-align: left;
}

.table--info td {
  color: #444;
}

/* th 강조 컬러 */
.table--info th,
.table__th {
  background: var(--sub-bg);
  color: #111;
}

/* ===========================
   목록형 테이블
   예: 게시판, 연혁, 기관 목록
=========================== */

.table--list {
  text-align: center;
}

.table--list thead th {
  height: 5.6rem;
  background: var(--sub-bg);
  border-bottom: 1px solid #ece6e1;
}

.table--list tbody tr {
  transition: background 0.2s ease;
}

.table--list tbody tr:hover {
  background: #f9fbff;
}

.table--list td {
  color: #555;
}

.table--list .table__title {
  text-align: left;
}

.table--list .table__title a {
  display: inline-block;

  max-width: 100%;

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

  color: #333;
  text-decoration: none;
}

.table--list .table__title a:hover,
.table--list .table__title a:focus-visible {
  color: var(--sub-primary);
  text-decoration: underline;
}

/* ===========================
   정렬 유틸
=========================== */

.table .text-left {
  text-align: left;
}

.table .text-center {
  text-align: center;
}

.table .text-right {
  text-align: right;
}

.table .nowrap {
  white-space: nowrap;
}

/* ===========================
   빈 데이터
=========================== */

.table-empty {
  padding: 5rem 2rem;

  border-top: 2px solid #222;
  border-bottom: 1px solid #e1e5ec;

  background: #fff;

  text-align: center;
  color: #777;
}

.table-empty__text {
  position: relative;

  display: inline-block;

  padding-top: 4.2rem;

  font-size: 1.6rem;
  font-weight: 600;
}

.table-empty__text::before {
  content: "!";

  position: absolute;
  left: 50%;
  top: 0;

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

  width: 3.2rem;
  height: 3.2rem;

  border-radius: 50%;

  background: #eef2f7;
  color: #777;

  font-weight: 800;

  transform: translateX(-50%);
}

/* 테이블 안 빈 데이터 row */
.table .table-empty-row td {
  padding: 5rem 2rem;
  text-align: center;
  color: #777;
  background: #fff;
}

/* ===========================
   DETAIL INFO TABLE
=========================== */

.table--detail {
  border-top: 2px solid #222;
  text-align: center;
}

.table--detail th,
.table--detail td {
  height: 5.6rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid #d9d9d9;
  font-size: 1.6rem;
  vertical-align: middle;
}

.table--detail th {
  width: 12%;
  background: #f8f8f8;
  color: #111;
  font-weight: 700;
  text-align: center;
}

.table--detail td {
  color: #222;
  background: #fff;
}

.table--detail__th {
  width: 15%;
}

.table--detail td[colspan="3"] {
  width: auto;
}

.file-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}

.file-inline__name {
  color: #222;
  text-decoration: none;
}

.file-inline__name::before {
  content: "PDF";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 0.8rem;
  background: #e53935;
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  vertical-align: middle;
}

.file-inline__name:hover,
.file-inline__name:focus-visible {
  color: var(--sub-primary);
  text-decoration: underline;
}

.file-inline__size {
  color: #777;
}

.file-inline__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.2rem;
  padding: 0 1.2rem;
  border: 1px solid #999;
  border-radius: 0.6rem;
  background: #fff;
  color: #222;
  font-size: 1.4rem;
  text-decoration: none;
}

.file-inline__btn:hover,
.file-inline__btn:focus-visible {
  border-color: var(--sub-primary);
  color: var(--sub-primary);
  background: #f0f6ff;
}

@media (max-width: 768px) {
  .table--detail {
    min-width: 76rem;
  }

  .table--detail th,
  .table--detail td {
    padding: 1.2rem;
    font-size: 1.5rem;
  }

  .table--detail th {
    width: 12rem;
  }
}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width: 768px) {
  .table-scroll::before {
    display: block;
  }

  .table {
    font-size: 1.5rem;
  }

  .table th,
  .table td {
    padding: 1.3rem 1.4rem;
  }

  .table--info th {
    width: 14rem;
  }

  .table-empty {
    padding: 4rem 1.6rem;
  }
}

@media (max-width: 480px) {
  .table {
    font-size: 1.4rem;
  }

  .table th,
  .table td {
    padding: 1.2rem;
  }

  .table-scroll table {
    min-width: 64rem;
  }

  .table-empty__text {
    font-size: 1.5rem;
  }
}

/* ===========================
   BOARD COMMON COMPONENT
=========================== */

.board-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  padding: 0 1rem;
  border-radius: 999px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.board-badge--open {
  background: #e65629;
  color: #fff;
}

.board-badge--closed {
  background: #333;
  color: #fff;
}

.board-badge--ready {
  background: #0a5ae3;
  color: #fff;
}

.board-badge--wait {
  background: #16834c;
  color: #fff;
}

.board-badge--gray {
  background: #eef2f7;
  color: #555;
}

.attach-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  vertical-align: middle;
}

.attach-icon::before {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 20px;
  border-radius: 0.4rem;
  background: url(../../images/home/sub/btn-file.png) no-repeat center;
  color: #555;
  font-size: 1rem;
  font-weight: 700;
}

.board-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 4.2rem;
  padding: 0 1.8rem;
  border-radius: 0.8rem;
  border: 1px solid #ece6df;
  background: #fff;
  color: #333;
  font-size: 1.5rem;
  font-weight: 700;
  transition: 0.25s ease;
}

.board-btn:hover,
.board-btn:focus-visible {
  border-color: var(--sub-primary);
  color: var(--sub-primary);
  background: #f0f6ff;
}

.board-btn--primary {
  border-color: var(--sub-btn-basic);
  background: var(--sub-btn-basic);
  color: #fff;
}

.board-btn--primary:hover,
.board-btn--primary:focus-visible {
  background: #cf7908;
  border-color: #cf7908;
  color: #fff;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin-top: 4rem;
}

.pagination__link,
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.8rem;
  height: 3.8rem;
  border: 1px solid #ece6df;
  border-radius: 0.8rem;
  background: #fff;
  color: #555;
  font-size: 1.5rem;
  font-weight: 700;
}

.pagination__link.is-active {
  border-color: var(--sub-primary);
  background: var(--sub-primary);
  color: #fff;
}

.pagination__link:hover,
.pagination__link:focus-visible,
.pagination__btn:hover,
.pagination__btn:focus-visible {
  border-color: var(--sub-primary);
  color: var(--sub-primary);
}