@charset "utf-8";

:root {
    --header-height: 72px;

    /* bg */
    --color-bg1: #F7F9FC;
    --color-bg2: #07152F;
    --color-bg3: #020B1D;
    --color-bg4: #EEF2FB;
    
    --rgb-bg1: 247 249 252;
    --rgb-bg2: 7 21 47;
    --rgb-bg3: 2 11 29;
    --rgb-bg4: 238 242 251;

    /* static */
    --color-static1: #0033A0;
    --color-static2: #3B82F6;
    --color-static3: #CAFD34;
    --color-static4: #B8C8F5;
    --color-static5: #C1622E;
    --hover-static3: #D4FF55;

    --rgb-static1: 0 51 160;
    --rgb-static2: 59 130 246;
    --rgb-static3: 202 253 52;
    --rgb-static4: 184 200 245;
    --rgb-static5: 193 98 46;

    --color-white: #fff;
    --rgb-white: 255 255 255;
    --color-black: #000;
    --rgb-black: 0 0 0;

    --color-white: #fff;
    --rgb-white: 255 255 255;
    --color-black: #000;
    --rgb-black: 0 0 0;

    --color-red: #D92D20;
    --color-lightred: #FEF3F2;
    --hover-lightred: #FCE8E6;

    /* font */
    --color-font1: #111827;
    --color-font2: #4B5563;
    --color-font3: #6B7280;
    --color-font4: #9CA3AF;
    --color-font5: #F9FAFB;
    --color-font6: #E6EBF5;

    --gray-50: #F8F9FB;
    --gray-100: #F1F3F6;
    --gray-500: #667085;

    /* border */
    --color-border1: #E5E7EB;
    --color-border2: #D1D5DB;
    --color-border3: #9CA3AF;
    --color-border4: #374151;

    /* font size */
    --fs-80: clamp(52px, 5.56vw, 80px);
    --fs-72: clamp(48px, 5vw, 72px);
    --fs-68: clamp(46px, 4.72vw, 68px);
    --fs-64: clamp(44px, 4.44vw, 64px);
    --fs-60: clamp(42px, 4.17vw, 60px);
    --fs-52: clamp(38px, 3.61vw, 52px);
    --fs-50: clamp(36px, 3.47vw, 50px);
    --fs-48: clamp(35px, 3.33vw, 48px);
    --fs-44: clamp(33px, 3.05vw, 44px);
    --fs-40: clamp(31px, 2.78vw, 40px);
    --fs-38: clamp(30px, 2.64vw, 38px);
    --fs-36: clamp(29px, 2.5vw, 36px);
    --fs-34: clamp(28px, 2.4vw, 34px);
    --fs-32: clamp(26px, 2.22vw, 32px);
    --fs-30: clamp(25px, 2.08vw, 30px);
    --fs-28: clamp(24px, 1.94vw, 28px);
    --fs-26: clamp(22px, 1.8vw, 26px);
    --fs-24: clamp(21px, 1.67vw, 24px);
    --fs-22: clamp(20px, 1.53vw, 22px);
    --fs-20: clamp(18px, 1.39vw, 20px);
    --fs-18: clamp(17px, 1.25vw, 18px);
    --fs-17: clamp(16px, 1.18vw, 17px);
    --fs-16: clamp(15px, 1.11vw, 16px);
    --fs-15: clamp(14px, 1.04vw, 15px);
    --fs-14: clamp(13px, 0.97vw, 14px);
    --fs-13: clamp(12px, 0.90vw, 13px);
    --fs-12: clamp(11px, 0.83vw, 12px);

    --space-60: clamp(48px, 4.17vw, 60px);
    --space-80: clamp(56px, 5.56vw, 80px);
    --space-100: clamp(64px, 6.94vw, 100px);
    --space-120: clamp(80px, 8.33vw, 120px);
    --space-140: clamp(96px, 9.72vw, 140px);
    --space-160: clamp(112px, 11.11vw, 160px);

    /* shadow */
    --box-shadow:0px 8px 14px #A6A6A640;

    --floating-offset: var(--space-100);
}
.blue-txt {color: var(--color-static1) !important;}
.blue-txt2 {color: var(--color-static2) !important;}
.neon-txt {color: var(--color-static3) !important;}

.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.w100 {width: 100%;}

/* 필터 */
.filter-white {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}
.filter-black {-webkit-filter: grayscale(100%) brightness(0); filter: grayscale(100%) brightness(0);}

.hero-head {font-size: var(--fs-68); font-weight: 800; line-height: 1; word-break: keep-all;}
.section-tit {font-size: var(--fs-60); font-weight: 700; line-height: 1.1; word-break: keep-all;}
.section-sub {font-size: var(--fs-32); font-weight: 600; line-height: 1.3;}
.card-tit {font-size: var(--fs-24); font-weight: 600; line-height: 1.3;}
.card-sub {font-size: var(--fs-20); font-weight: 500; line-height: 1.4;}
.body-large {font-size: var(--fs-18); line-height: 1.8;}
.body-medium {font-size: var(--fs-16); line-height: 1.7;}
.body-small {font-size: var(--fs-15); font-weight: 500; line-height: 1.6;}
.eyebrow {font-size: var(--fs-14); font-weight: 600; line-height: 1.2; letter-spacing: 0.18em; text-transform: uppercase;}
.news-tit {font-size: var(--fs-18); line-height: 1.8;}
.news-txt {font-size: var(--fs-15); font-weight: 500; line-height: 1.6;}

.badge {font-size: var(--fs-15); font-weight: 500; line-height: 1.6; padding: 4px 8px; background-color: rgb(var(--rgb-static1) / 0.08); color: var(--color-static1);}
.badge.eyebrow {color: var(--color-static2); background-color: var(--color-font6);}

.status {font-size: var(--fs-15); font-weight: 500; line-height: 1.6; padding: 4px var(--fs-14); border-radius: 8px;}
.status.done {color: var(--color-static1); background-color: rgb(var(--rgb-static1) / 0.08);}
.status.wait {color: var(--color-font2); background-color: rgb(var(--rgb-bg3) / 0.08);}

.btn-list {display: flex; align-items: center; column-gap: var(--fs-20);}
.square-btn {display: flex; align-items: center; justify-content: center; column-gap: 10px; padding: var(--fs-14) var(--fs-24); border-radius: 4px; font-size: var(--fs-16); line-height: 1.7; border: 1px solid transparent; transition: background-color 0.2s, border-color 0.2s, color 0.2s;}
.square-btn.mid {padding: var(--fs-12) var(--fs-24); font-size: var(--fs-15); font-weight: 500; line-height: 1.6;}
.square-btn.small {padding: 8px 10px; font-size: var(--fs-15); font-weight: 500; line-height: 1.6;}
.blue-btn {background-color: var(--color-static1); color: var(--color-white);}
.blue-btn:hover {background-color: var(--color-bg2);}
.line-btn {background-color: var(--color-white); border-color: var(--color-static1); color: var(--color-static1);}
.line-btn:hover {background-color: var(--color-bg1);}
.neon-btn {background-color: var(--color-static3); color: var(--color-font1);}
.neon-btn:hover {background-color: var(--hover-static3);}
.red-line-btn {border-color: var(--color-red); background-color: var(--color-lightred); color: var(--color-red);}
.red-line-btn:hover {background-color: var(--hover-lightred);}

.txt-btn {transition: opacity 0.2s; display: flex; align-items: center; column-gap: 10px; color: var(--color-font2);}
.txt-btn:hover {opacity: 0.7;}

.tab-list {display: flex; align-items: center;}
.tab-list .tab {transition: background-color 0.2s, color 0.2s; padding: 10px var(--fs-48); background-color: var(--color-bg1); font-size: var(--fs-18); line-height: 1.8; color: var(--color-font3);}
.tab-list .tab.active {background-color: var(--color-static1); color: var(--color-font5); pointer-events: none;}
.tab-list .tab:not(.active):hover {color: var(--color-static1);}

.tab-content {display: none;}
.tab-content.active {display: block;}

.info-desc {display: flex; align-items: center; column-gap: 10px;}
.info-desc .body-small {color: var(--color-font2);}

.num-ol, .a-ol, .dot-ul {padding-left: 1.2em;}
.num-ol > li {list-style-type: decimal;}
.a-ol > li {list-style-type: lower-alpha;}
.dot-ul > li {list-style-type: disc;}

/* 인풋 */
fieldset {width: 100%; margin: 0; padding: 0; border: 0;}
.input-list + .input-list {padding-top: var(--space-60); margin-top: var(--space-60); border-top: 1px solid var(--color-border1);}
.input-list {display: flex; flex-direction: column; row-gap: var(--fs-40);}
.input-list > * {width: 100%;}
.input-list .info-desc {justify-content: flex-end; margin-top: calc(var(--fs-20) * -1);}
.input-wrap {width: 100%; display: flex; flex-wrap: wrap; column-gap: var(--fs-38);}
.input-wrap > * {flex: 1;}

.input-item-label > .custom-input {width: 100%;}
.input-item-label {display: flex; flex-direction: column; row-gap: 10px; align-items: flex-start;}
.input-item-label label,
.input-item-label .label {padding: 0; font-size: var(--fs-16); line-height: 1.7; color: var(--color-font1); display: flex; align-items: center; column-gap: 6px;}
.input-item-label label.required::after,
.input-item-label .label.required::after {content: '*'; color: var(--color-static1);}
.input-item-label.row {flex-direction: row;}
.input-item-label.row  > div {width: calc(100% - 100px);}
.input-item-label.row label,
.input-item-label.row .label {width: 100px; flex-shrink: 0;}
.input-item-label .error-msg {color: var(--color-red); margin-top: -4px;}
.input-item-label .error-msg::before {content: ''; display: inline-block; vertical-align: middle; margin-right: 4px; width: 20px; height: 20px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(/img/error-ico.svg);}

.custom-textarea,
.custom-input {transition: border-color 0.2s; background-color: var(--color-white); border: 1px solid var(--color-border1); padding: var(--fs-12) var(--fs-16); font-size: var(--fs-16); color: var(--color-font1); line-height: 1.7;}
.custom-textarea {width: 100%; height: 220px; resize: none; border-radius: 6px;}
.custom-textarea::placeholder,
.custom-input::placeholder {color: var(--color-font4); font-size: var(--fs-16); line-height: 1.7;}

.custom-input,
.custom-input-btn {height: var(--fs-48); border-radius: 4px; flex-shrink: 0; white-space: nowrap; padding-block: 0;}

.custom-input:hover {border-color: var(--color-border3);}
.custom-input:focus {border-color: var(--color-static1); outline: none;}

.custom-input:read-only {background-color: var(--gray50); color: var(--gray500); pointer-events: none;}
.custom-input[type="month"]::-webkit-calendar-picker-indicator,
.custom-input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0; position: absolute; right: 10px; width: var(--fs-24); height: var(--fs-24); cursor: pointer;}
.custom-input[type="month"],
.custom-input[type="date"] {position: relative; padding-right: calc(10px + var(--fs-24)); background-image: url('/img/calendar-ico.svg'); background-repeat: no-repeat; background-position: right 10px center; background-size: var(--fs-24);}
.custom-input:disabled {background-color: var(--gray100); color: var(--color-border1);}

.search-box {display: flex; align-items: center; column-gap: var(--fs-12);}
.search-input-wrap {height: fit-content; width: 100%; max-width: 340px; position: relative;}
.search-input-wrap::before {position: absolute; left: 16px; top: 50%; transform: translateY(-50%); content: ''; width: 16px; height: 16px; background-image: url(/img/search-ico.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.search-input-wrap .custom-input.search {width: 100%; padding-left: 40px;}

.textarea-wrap {position: relative;}
.textarea-wrap .textarea-count {position: absolute; right: var(--fs-20); bottom: var(--fs-20); color: var(--color-border1);}

.submit-btn-wrap {justify-content: center; margin-top: var(--fs-50);}

/* 커스텀체크 */
.custom-chk {position: relative; display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); line-height: 1.7; color: var(--color-font2);}
.custom-chk input[type="checkbox"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.custom-chk label {cursor: pointer; display: flex; align-items: center; column-gap: 8px;}
.custom-chk label > span {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1px solid var(--color-border3); border-radius: 6px; background-color: var(--color-white); transition: all 0.2s ease;}
.custom-chk label > span::before {content: '✓'; font-size: var(--fs-12); font-weight: 700; line-height: 1; color: var(--color-white);}
.custom-chk label em {display: flex; align-items: center; column-gap: 8px; font-style: normal; font-size: var(--fs-16); line-height: 1.65; color: var(--color-font2);}
.custom-chk input[type="checkbox"]:checked + label > span {border-color: var(--color-static1); background-color: var(--color-static1);}
.custom-chk:hover input[type="checkbox"]:not(:checked) + label > span {border-color: var(--color-border3); background-color: var(--color-border3);}
.custom-chk input[type="checkbox"]:checked + label em {color: var(--color-font1);}

/* 커스텀라디오 */
.custom-radio-list {display: flex; align-items: center; column-gap: var(--fs-40);}
.custom-radio {position: relative; display: flex; align-items: center; gap: 8px; font-size: var(--fs-16); line-height: 1.7; color: var(--color-font2);}
.custom-radio input[type="radio"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0;}
.custom-radio label {cursor: pointer; display: flex; align-items: center; column-gap: 8px;}
.custom-radio label > span {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1px solid var(--color-border3); border-radius: 50%; background-color: var(--color-white); transition: all 0.2s ease;}
.custom-radio label > span::before {transition: background-color 0.2s, width 0.2s, height 0.2s; content: ''; width: 0; height: 0; border-radius: 50%; background-color: var(--color-white);}
.custom-radio label em {white-space: nowrap; display: flex; align-items: center; column-gap: 8px; font-style: normal; font-size: var(--fs-16); line-height: 1.65; color: var(--color-font2);}
.custom-radio input[type="radio"]:checked + label em {color: var(--color-font1);}
.custom-radio input[type="radio"]:checked + label > span {border-color: var(--color-static1); background-color: var(--color-white);}
.custom-radio input[type="radio"]:checked + label > span::before {background-color: var(--color-static1); width: 8px; height: 8px;}
.custom-radio:hover input[type="radio"]:not(:checked) + label > span::before {background-color: var(--color-border3); width: 8px; height: 8px;}

.custom-table-wrap {width:100%; overflow-x:auto;}
.custom-table {border: 1px solid var(--color-border1); width:100%; border-collapse:collapse; table-layout:fixed; background-color:var(--color-white);}
.custom-table .th-width {width: calc(var(--space-100) * 2);}
.custom-table th {padding: 10px var(--fs-20); border-bottom:1px solid var(--color-border1); background:var(--color-bg2); font-size:var(--fs-16); font-weight: 400; line-height:1.7; color:var(--color-font5); text-align:left; vertical-align:top; word-break:keep-all;}
.custom-table td {padding: 10px var(--fs-20); border-bottom:1px solid var(--color-border1); font-size:var(--fs-16); line-height:1.7; color:var(--color-font2); text-align:left; vertical-align:middle; word-break: break-all;}
.custom-table tbody tr:last-child th,
.custom-table tbody tr:last-child td {border-bottom:0;}
.custom-table td > * + * {margin-top:var(--fs-12);}
.custom-table .custom-table-empty td {height:180px; color:var(--color-font4); text-align:center;}
.custom-table .text-center {text-align:center;}
.custom-table .text-right {text-align:right;}
.custom-table .strong {font-weight:600; color:var(--color-font1);}
.custom-table.middle th {vertical-align:middle;}
.custom-table.light th {background:var(--color-bg4); border-bottom:1px solid var(--color-white); color:var(--color-font1);}
.custom-table.light tbody tr:last-child th {border-bottom:0;}

.board-tit-wrap {display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--fs-60);}
.board-table-wrap {width: 100%;}
.board-table {width: 100%; border-collapse: collapse; table-layout: fixed; background-color: var(--color-white);}
.board-table .col-no {width: 80px;}
.board-table .col-view,
.board-table .col-name {width: 100px;}
.board-table .col-status,
.board-table .col-date {width: 120px;}
.board-table .col-arrow {width: 40px;}
.board-table th {padding: 10px; border-bottom: 1px solid var(--color-border1); background-color: var(--color-bg1); font-size: var(--fs-18); line-height: 1.8; font-weight: 400; color: var(--color-font1); text-align: center; vertical-align: middle; word-break: keep-all;}
.board-table td {padding: var(--fs-24) 10px; border-bottom: 1px solid var(--color-border1); font-size: var(--fs-16); color: var(--color-font3); line-height: 1.7; text-align: center; vertical-align: middle;}
.board-table tbody tr {position: relative; transition: background-color 0.2s;}
.board-table tbody tr:hover {background-color: var(--color-bg1);}
.board-table .board-subject {text-align: left; color: var(--color-font1); }
.board-table .board-subject.secret .board-link {}
.board-table .board-subject.secret .board-link::before {flex-shrink: 0; content: ''; display: inline-block; margin-right: var(--fs-12); vertical-align: middle; width: 18px; height: 18px; background-image: url(/img/lock-ico.svg); background-repeat: no-repeat; background-position: center center; background-size: contain;}
.board-table .board-subject .badge {display: inline-block; margin-right: var(--fs-12); vertical-align: middle;}
.board-table .board-link {display: inline-block; max-width: 100%; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-font1);}
.board-table .board-link::after {content: ''; position: absolute; inset: 0;}
.board-table .board-arrow-ico {}
.board-table .board-table-empty td {height: 100px; color: var(--color-font4); text-align: center;}

.file-upload-wrap {max-width: 100%; display: flex; flex-direction: column; align-items: flex-start; row-gap: 10px;}

.custom-file-upload {display: flex; align-items: center; column-gap: var(--fs-30);}
.custom-file-upload .file-btn {white-space: nowrap; border-color: var(--color-border2); color: var(--color-font4);}
.custom-file-upload .file-btn:hover {color: var(--color-static1); border-color: var(--color-static1);}
.custom-file-upload .file-desc {display: flex; flex-direction: column;}
.custom-file-upload .file-desc p {color: var(--color-font3);}

.file-list {max-width: 100%; display: flex; flex-direction: column; row-gap: 10px;}
.file-list .file-item {width: fit-content; position: relative; max-width: 100%;}
.file-list .file-item a,
.file-list .file-item button {max-width: 100%; transition: background-color 0.2s; background-color: var(--color-white); display: flex; align-items: center; padding: 10px var(--fs-20); border-radius: 6px; border: 1px solid var(--color-border1);}
.file-list .file-item a:hover,
.file-list .file-item button:hover {background-color: var(--color-bg1);}
.file-list .file-item .file-ico {flex-shrink: 0; margin-right: 10px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;}
.file-list .file-item .file-name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - var(--fs-30) - 50px); color: var(--color-font1);margin-right: var(--fs-30);}
.file-list .file-item .file-down-ico,
.file-list .file-item .file-del-ico {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;}
.file-list .file-item .file-del-ico {padding: 3px;}
.file-list .file-item .file-size {color: var(--color-font3); margin-right: var(--fs-20);}

.pagination {margin-top: var(--fs-40); display:flex; align-items:center; justify-content:center; gap: var(--fs-16);}
.pagination a,
.pagination span {transition:background-color 0.2s, border-color 0.2s, color 0.2s; display:flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid transparent; border-radius:99px; font-size:var(--fs-16); font-weight: 500;; color:var(--color-font2);}
.pagination a:hover {background-color:var(--color-bg4);}
.pagination a.active {background-color:var(--color-static1); color:var(--color-white);}
.pagination a.arrow.prev img {transform: rotate(-180deg);}
.pagination a.arrow.disable {pointer-events: none;}
.pagination a.arrow.disable img {opacity: 0.4;}
.pagination a.arrow:hover img {opacity: 0.7;}

.section-tit-wrapper {display: flex; align-items: flex-end; justify-content: space-between; column-gap: var(--space-60);}
.section-tit-wrap {display: flex; flex-direction: column; row-gap: var(--fs-12); align-items: flex-start;}
.section-tit-wrap .eyebrow {color: var(--color-static1);}
section.dark .section-tit {color: var(--color-white);}
section.dark .section-tit .blue-txt {color: var(--color-static2);}
section.dark .section-tit-wrap .eyebrow {color: var(--color-white);}

.card-tit-wrap {display: flex; flex-direction: column;}

@media screen and (max-width: 1024px) {
    .input-wrap {column-gap: 24px;}
}

@media screen and (max-width: 768px) {
    .hero-head {font-size: 40px;}
    
    .input-list {row-gap: 24px;}
    .input-list .info-desc {margin-top: -12px;}
    .input-wrap {column-gap: 16px;}
    .custom-file-upload {flex-direction: column; row-gap: 10px; align-items: flex-start;}

    .section-tit-wrapper {flex-direction: column; align-items: flex-start; row-gap: 40px;}

    .custom-table .th-width {width: 100px;}
    .custom-table  td .btn-list {display: flex; flex-direction: column; row-gap: var(--fs-12); align-items: flex-start;}

    /* 모바일: 행을 카드형으로 전환 (가로 스크롤 없음) */
    .board-table, .board-table tbody, .board-table tr, .board-table td {display: block; width: 100%;}
    .board-table colgroup {display: none;}
    .board-table thead {position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;}
    .board-table tr {padding: var(--fs-16) 28px var(--fs-16) 10px; border-bottom: 1px solid var(--color-border1);}
    .board-table td {padding: 0; border-bottom: 0; text-align: left;}
    .board-table .board-subject {padding-block: 6px; font-size: 16px;}
    .board-table .board-link {white-space: normal; overflow: visible; text-overflow: clip;}
    .board-table .board-no,
    .board-table .board-view,
    .board-table .board-status,
    .board-table .board-name,
    .board-table .board-date {display: inline-block; width: auto; padding-right: 10px;}
    .board-table .board-no::before {content: 'No.';}
    .board-table .board-name::before,
    .board-table .board-view::before {content: attr(data-label) ' ';}
    .board-table .board-arrow {position: absolute; top: 50%; right: 10px; width: auto; transform: translateY(-50%);}
    .board-table .board-table-empty {padding: var(--space-60) var(--fs-16);}
    .board-table .board-table-empty td {height: fit-content;}
}

@media screen and (max-width: 480px) {
    :root {
        --header-height: 56px;
    }
    .hero-head {font-size: 32px;}
    .section-tit {font-size: 36px;}

    .tab-list .tab {padding-inline: 20px;}

    .board-tit-wrap {flex-direction: column; row-gap: 24px;}
    .board-tit-wrap .search-box {width: 100%;}
    .board-tit-wrap .search-box .search-input-wrap {max-width: unset;}

    .pagination {column-gap: 10px;}

    .input-list {row-gap: 20px;}
    .input-list .info-desc {margin-top: -10px;}
    .input-wrap {flex-direction: column; row-gap: 20px;}
    .input-item-label.row {flex-direction: column;}
    .input-item-label.row > div {width: 100%;}

    .submit-btn-wrap .square-btn {flex: 1;}
}

@media screen and (max-width: 375px) {
    .btn-list {column-gap: 12px;}
    .custom-table .th-width {width: 70px;}
    .custom-table th,
    .custom-table td {padding: 10px;}

    .pagination {column-gap: 4px;}
}