html,
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
--primary-color: #358AE3;
font-family: 'Pretendard', system-ui, sans-serif;
}
* {
box-sizing: border-box;
}
.p20 {
padding: 20px;
}
.column {
display: flex;
flex-direction: column;
}
.divider {
border-top: 1px solid #dddddd;
margin: 20px 0;
}
.w100 {
width: 100%;
}
.f1 {
flex: 1;
width: 100%;
}
.h100 {
height: 100%;
}
.g16 {
gap: 16px;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2,1fr);
}
.header {
width: 100%;
height: 72px;
padding: 0px 30px 0px 30px;
gap: 0px;
opacity: 0px;
background-color: var(--primary-color);
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-size: 16px;
z-index: 50;
/* 헤더 고정 풀려면 아래 postion 주석 */
position: sticky;
top: 0;
> * {
flex: 1;
}
> .actions {
display: flex;
font-size: 14px;
align-items: center;
justify-content: flex-end;
.action:not(:last-child)::after {
content: "|";
margin-right: 10px;
color: rgba(255, 255, 255, 0.3);
padding: 0 0 3px 5px;
}
> .action {
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
> .logout-img {
width: 20px;
height: 20px;
background: url('data:image/svg+xml,')
no-repeat center center;
}
> .dolgo-img {
width: 20px;
height: 20px;
background: url('data:image/svg+xml,')
no-repeat center center;
}
}
}
> nav {
justify-content: center;
flex: 1;
display: flex;
gap: 40px;
height: 100%;
> div {
display: flex;
align-items: center;
position: relative;
> a {
color: white;
text-decoration: none;
position: relative;
}
&[data-active="true"] {
&:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background-color: white;
}
}
}
}
}
input[type="radio"] {
display: none;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 15px;
font-weight: 400;
user-select: none;
}
input[type="radio"] + label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
border: 1px solid #cccccc;
border-radius: 50%;
background-color: white;
}
input[type="radio"]:checked + label::before {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
input[type="radio"]:checked + label::after {
content: "";
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
}
/* =================== */
.content {
flex: 1;
padding: 40px 50px;
display: flex;
flex-direction: column;
gap: 30px;
}
.footer {
color: #717171;
background-color: #f7f7f7;
border-top: 1px solid #dddddd;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
}
.content {
padding: 40px 70px;
}
h1 {
font-size: 30px;
}
.section {
> .title {
height: 40px;
font-weight: 600;
font-size: 20px;
border-bottom: 1px solid #dddddd;
margin-bottom: 24px;
}
> .content {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
}
#yearSelectionContainer {
> .title {
height: 40px;
font-weight: 600;
font-size: 20px;
border-bottom: 1px solid #dddddd;
margin-bottom: 24px;
}
}
.row {
display: flex;
}
button {
cursor: pointer;
border: none;
background-color: var(--primary-color);
color: white;
white-space: nowrap;
font-weight: 600;
font-size: 14px;
padding: 9.5px 12px;
border-radius: 2px;
}
.card {
width: 100%;
border-radius: 8px;
border: 1px solid #dddddd;
.card-header {
font-size: 12px;
color: #717171;
margin-bottom: 6px;
}
.card-title {
cursor: pointer;
font-size: 16px;
font-weight: 600;
color: #161616;
flex: 1;
}
.donation {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
color: #717171;
margin-bottom: 4px;
> .currency {
font-size: 14px;
font-weight: 600;
color: var(--primary-color);
}
}
}
.flow {
border: 1px solid #dddddd;
border-radius: 8px;
background-color: #f6fbfe;
display: flex;
justify-content: space-between;
> * {
padding: 20px;
width: 100%;
&:not(:last-child) {
border-right: 1px solid #dddddd;
}
> .title {
font-size: 14px;
font-weight: 400;
line-height: 16.71px;
text-align: left;
color: #717171;
}
> .content {
color: #161616;
font-weight: 600;
font-size: 24px;
padding: 0;
min-height: 96px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
> * {
> .content {
color: #161616;
font-weight: 600;
font-size: 24px;
padding: 0;
min-height: 96px;
display: flex;
justify-content: center;
margin-right: 10px;
flex: 1;
align-items: flex-end;
width: 100%;
}
> .settlement-button {
color: var(--primary-color);
background: #fff;
border: 1px solid var(--primary-color);
border-radius: 2px;
padding: 5px 10px;
font-weight: 600;
width: 110px;
height: 26px;
flex: 0.6;
vertical-align: middle;
text-align: center;
}
}
}
}
.a-center {
display: flex;
align-items: center;
}
.end {
display: flex;
justify-content: flex-end;
}
.g20 {
gap: 20px;
}
select {
border: 1px solid #dddddd;
padding: 9.5px 12px;
border-radius: 4px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%227%22%20viewBox%3D%220%200%2010%207%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L5%205L9%201%22%20stroke%3D%22%23999999%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E")
no-repeat right 10px center;
}
.w140 {
width: 140px;
}
.settlement-button {
color: var(--primary-color);
background: #fff;
border: 1px solid var(--primary-color);
border-radius: 2px;
padding: 5px 10px;
font-weight: 600;
width: 110px;
height: 26px;
flex: 0.6;
vertical-align: middle;
text-align: center;
}
table.list {
border-collapse: collapse;
width: 100%;
border-top: 1px solid #dddddd;
th {
background-color: #f9f9f9;
color: #717171;
font-weight: 400;
font-size: 14px;
}
tr {
min-height: 56px;
border-top: 1px solid #dddddd;
&:last-child {
border-bottom: 1px solid #dddddd;
}
}
th,
td {
text-align: center;
height: 56px;
&:not(:last-child) {
border-right: 1px solid #dddddd;
}
}
td {
font-size: 15px;
color: #161616;
font-weight: 400;
}
}
.pagination {
display: flex;
gap: 8px;
margin-top: 8px;
align-items: center;
height: 40px;
> * {
cursor: pointer;
width: 20px;
height: 20px;
color: #888888;
font-size: 14px;
text-align: center;
&[data-selected="true"] {
color: var(--primary-color);
font-weight: bold;
border-bottom: var(--primary-color) 2px solid;
}
}
> .more {
display: flex;
justify-content: center;
&:after {
content: "...";
display: block;
width: 5px;
height: 10px;
}
}
> .left, .double-left,
.right, .double-right {
display: flex;
justify-content: center;
align-items: center;
&.right {
transform: rotate(180deg);
}
}
}
.left , .right {
&:after {
content: "";
display: block;
background-color: var(--red-color);
width: 5px;
height: 10px;
background: url('data:image/svg+xml,') no-repeat center center;
}
}
.double-left,
.double-right {
&.double-right {
transform: rotate(180deg);
}
&:after {
content: "";
display: block;
width: 20px;
height: 20px;
background: url('data:image/svg+xml,')
no-repeat center center;
}
}
/* home */
.partner {
box-shadow: 0px 6px 16px 0px #3480b41a;
position: relative;
display: flex;
padding: 60px 50px;
gap: 40px;
> .partner-img {
min-width: 160px;
width: 160px;
height: 160px;
border: 1px solid #dddddd;
border-radius: 24px;
display: flex;
justify-content: center;
align-items: center;
}
> .partner-img img {
width: 100%;
height: 100%;
object-fit: contain;
}
> .partner-content {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 9.5px;
> .partner-header {
font-size: 18px;
font-weight: 400;
> .highlight {
font-weight: 700;
box-shadow: inset 0 -10px 0 var(--orange3-color);
}
}
> .partner-desc {
font-size: 14px;
color: #717171;
font-weight: 400;
white-space: pre-line;
line-height: 1.5;
}
.partner-name {
font-weight: 700;
font-size: 30px;
}
}
&::after {
content: "";
position: absolute;
display: block;
top: 0px;
right: 0px;
bottom: 0px;
width: 520px;
z-index:-1;
background: url('data:image/svg+xml,')
center center no-repeat;
}
}
.image-container {
flex: 0 0 30%; /* 이미지가 부모 너비의 30%를 차지 */
overflow: hidden; /* 이미지를 부모 영역에 맞게 잘라냄 */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* 비율 유지하면서 부모 영역을 채움 */
}
/* 상태 공통 스타일 */
.status {
padding: 5px 10px;
font-size: 12px;
border-radius: 3px;
font-weight: bold;
text-align: center;
display: inline-block;
}
/* 상태별 색상 */
.status.active {
/* 재직중: 초록색 */
color: #22bf51;
border: 1px solid #22bf51;
}
.status.retired {
/* 퇴사: 회색 */
color: #999999;
border: 1px solid #999999;
}
.status.certified {
/* 인증중: 파란색 */
color: #3f80e9;
border: 1px solid #3f80e9;
}
.tab-menu {
display: flex;
border-bottom: 2px solid #ddd; /* 회색 기본 밑줄 */
margin-bottom: 20px; /* 기본 여백 유지 */
}
.tab-button, .settlement-tab-button {
padding: 10px 20px;
border: none;
background: none;
font-size: 16px;
cursor: pointer;
color: #555;
border-bottom: 2px solid transparent; /* 기본적으로 투명 밑줄 */
position: relative; /* 밑줄 겹치게 하려면 필요 */
z-index: 1; /* 텍스트와 밑줄 겹쳐도 텍스트가 위에 보이도록 */
}
.tab-button.active, .settlement-tab-button.active {
color: #000; /* 활성화된 버튼 텍스트 색상 */
font-weight: bold; /* 활성화된 버튼 텍스트 강조 */
border-bottom: 3px solid #358AE3; /* 활성화된 탭의 밑줄 */
margin-bottom: -1px; /* 밑줄이 기본 회색 라인과 겹치도록 조정 */
}
/* 모달 오버레이 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
}
/* 모달 */
.modal {
background: #fff;
padding: 20px;
width: 400px;
border-radius: 8px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.modal-overlay input {
height: 37px;
border: 1px solid #dddddd;
border-radius: 4px !important;
padding: 9.5px 10px;"
}
.modal .title {
font-size: 18px;
font-weight: 600;
}
.modal .sub-title {
font-size: 14px;
font-weight: 400;
margin-bottom: 35px;
}
/* 경고 메시지 */
.warning-message {
color: var(--red-color);
font-size: 12px;
margin: 25px 0px 25px 0px;
}
.modal-actions {
display: flex;
gap: 13px;
}
.cancel, .submit {
flex: 1;
height: 40px;
}
.cancel {
background: #def2ff;
color: var(--primary-color);
}
/* 숨김 클래스 */
.hidden {
display: none;
}
.active-button {
cursor: default;
border: none;
background-color: var(--primary-color);
color: white;
white-space: nowrap;
font-weight: 600;
font-size: 14px;
padding: 9.5px 12px;
width: 147px;
}
.inactive-button {
cursor: default;
border: 1px solid var(--primary-color);
background-color: #ffffff;
color: var(--primary-color);
white-space: nowrap;
font-weight: 600;
font-size: 14px;
padding: 9.5px 12px;
width: 147px;
}
/** 기부예치금 모달 **/
.pointModal {
/*position: absolute;*/
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.pointModal > .modal-contents {
background-color: white;
padding: 30px;
border-radius: 16px;
}
.pointModal > .modal-contents > .modal-header {
font-size: 18px;
font-weight: 600;
text-align: center;
}
.pointModal > .modal-contents > .modal-body {
margin: 30px 0px;
}
/* 기부 예치금 추가 스타일 */
td {
white-space: nowrap;
}
.dolgo-donation {
display: flex;
flex-direction: column;
> .title {
font-weight: 400;
font-size: 14px;
}
> .description {
font-weight: 400;
font-size: 14px;
color: #717171;
}
> .buttons {
margin-top: 12px;
> button {
min-width: 100px;
}
}
}
.row-wrap {
/* white-space: nowrap; */
justify-content: space-between;
}
.donator-info {
display: flex;
flex-direction: column;
gap: 10px;
white-space: nowrap;
}
.total-amount {
display: flex;
margin-top: 12px;
> .title {
font-weight: 400;
font-size: 14px;
color: #161616;
flex: 1;
}
> .amount {
display: flex;
flex-direction: column;
gap: 8px;
align-items: end;
> .total {
font-size: 20px;
font-weight: bold;
}
> .description {
font-size: 12px;
color: #717171;
}
}
}
.remain-amount {
font-size: 14px;
color: var(--primary-color);
}
/* 기부 예치금 추가 스타일 끝*/
/* 새로 추가된 스타일 */
.g20 {
gap: 20px !important;
}
button.ghost {
background-color: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
font-weight: 400;
}
input[type="radio"] + label {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 15px;
font-weight: 400;
user-select: none;
white-space: nowrap;
}
#pointModalOverlay .modal-contents table td.label {
font-weight: 400;
color: #717171;
max-width: 200px;
background-color: #f9f9f9;
font-size: 14px;
}
#pointModalOverlay .modal-contents table td .row {
display: flex
;
gap: 10px;
align-items: center;
}
#pointModalOverlay .modal-contents table td .row-wrap{
justify-content: space-between;
}
#pointModalOverlay .modal-contents table td {
padding: 10px;
}
#pointModalOverlay .modal-contents table tr {
border-bottom: 1px solid #dddddd;
}
#pointModalOverlay .modal-contents table {
border-collapse: collapse;
border: 1px solid #dddddd;
border-left: none;
border-right: none;
box-sizing: border-box;
}
#pointModalOverlay .modal-contents table input[type="radio"] + label {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 15px;
font-weight: 400;
user-select: none;
}
#pointModalOverlay .modal-contents table input[type="radio"] + label {
display: inline-block;
position: relative;
padding-left: 25px;
cursor: pointer;
font-size: 15px;
font-weight: 400;
user-select: none;
}
/* 토스트 기본 스타일 */
.settlement-toast {
position: fixed;
right: 20px;
bottom: -100px; /* 화면 밖 */
min-width: 300px;
padding: 25px;
background-color: #ffffff;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
opacity: 0; /* 보이지 않음 */
transition: bottom 0.5s ease-out, opacity 0.5s ease-out;
}
.settlement-toast.show {
bottom: 20px; /* 화면 안으로 이동 */
opacity: 1; /* 보이도록 설정 */
}
.settlement-hidden {
bottom: -100px; /* 화면 밖으로 이동 */
opacity: 0; /* 투명도 설정 */
}
.settlement-toast-header {
font-weight: bold;
margin-bottom: 10px;
text-align: center;
font-size: 18px;
}
.settlement-toast-body {
font-size: 14px;
color: #333;
text-align: center;
padding: 10px;
}
.settlement-toast-button {
min-width: 265px;
display: inline-block;
margin-top: 10px;
padding: 7px 10px;
background-color: #ffffff;
color: var(--primary-color);
border: 1px solid var(--primary-color);
border-radius: 4px;
text-align: center;
cursor: pointer;
text-decoration: none;
font-size: 14px;
}