5726 lines
99 KiB
CSS
5726 lines
99 KiB
CSS
@charset "utf-8";
|
|
@import 'reset.css';
|
|
@import 'fonts.css';
|
|
|
|
:root {
|
|
|
|
/* color */
|
|
--color-002555: #002555;
|
|
--color-4968BD: #4968BD;
|
|
--color-3E6AFC: #3E6AFC;
|
|
--color-76B5FF: #76B5FF;
|
|
--color-FFBA5C: #FFBA5C;
|
|
--color-EB5757: #FF4757;
|
|
--color-78D197: #78D197;
|
|
--color-928DFC: #928DFC;
|
|
|
|
--color-white: #ffffff;
|
|
--color-F7F7F7: #F7F7F7;
|
|
--color-F4F8FF: #F4F8FF;
|
|
--color-F3F3F3: #F3F3F3;
|
|
--color-E9F1FB: #E9F1FB;
|
|
--color-E5E5E5: #E5E5E5;
|
|
--color-EaEaEa: #EaEaEa;
|
|
--color-d6d6d6: #d6d6d6;
|
|
--color-CCCCCC: #CCCCCC;
|
|
--color-B9BDC5: #B9BDC5;
|
|
--color-8C8C8C: #8C8C8C;
|
|
--color-AAAAAA: #AAAAAA;
|
|
--color-999999: #999999;
|
|
--color-777777: #777777;
|
|
--color-666666: #666666;
|
|
--color-2D3436: #2D3436;
|
|
--color-111111: #111111;
|
|
--color-black: #000000;
|
|
|
|
|
|
/* table */
|
|
--color-th_level1: #F3F3F3;
|
|
--color-th_level2: #F7F7F7;
|
|
--color-line: #E5E5E5;
|
|
--color-line_top: #AAAAAA;;
|
|
|
|
/* height */
|
|
--vh-100: 100%;
|
|
|
|
/* font Size */
|
|
--fs-11: 0.6875rem;
|
|
--fs-12: 0.75rem;
|
|
--fs-13: 0.8125rem;
|
|
--fs-14: 0.875rem;
|
|
--fs-15: 0.9375rem;
|
|
--fs-16: 1rem;
|
|
--fs-17: 1.0625rem;
|
|
--fs-18: 1.125rem;
|
|
--fs-19: 1.1875rem;
|
|
--fs-20: 1.25rem;
|
|
--fs-21: 1.3125rem;
|
|
--fs-22: 1.375rem;
|
|
--fs-23: 1.438rem;
|
|
--fs-24: 1.5rem;
|
|
--fs-25: 1.563rem;
|
|
--fs-26: 1.625rem;
|
|
--fs-27: 1.688rem;
|
|
--fs-28: 1.75rem;
|
|
--fs-29: 1.813rem;
|
|
--fs-30: 1.875rem;
|
|
--fs-31: 1.938rem;
|
|
--fs-32: 2rem;
|
|
--fs-33: 2.063rem;
|
|
--fs-34: 2.125rem;
|
|
--fs-35: 2.188rem;
|
|
--fs-36: 2.25rem;
|
|
--fs-37: 2.313rem;
|
|
--fs-38: 2.375rem;
|
|
--fs-40: 2.5rem;
|
|
--fs-48: 3rem;
|
|
|
|
/* font Weight */
|
|
--fw-100: 100;
|
|
--fw-200: 200;
|
|
--fw-300: 300;
|
|
--fw-400: 400;
|
|
--fw-500: 500;
|
|
--fw-600: 600;
|
|
--fw-700: 700;
|
|
--fw-800: 800;
|
|
--fw-900: 900;
|
|
}
|
|
|
|
/* 공통 */
|
|
html {}
|
|
|
|
body {}
|
|
|
|
.blind {
|
|
visibility: hidden;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
font-size: 0;
|
|
line-height: 0
|
|
}
|
|
|
|
.ht-20 {height: 20px !important;}
|
|
.pt-20 {padding-top: 20px !important;}
|
|
.pb-120 {padding-bottom: 120px !important;}
|
|
|
|
.mt-30 {margin-top: 30px !important;}
|
|
.mt-20 {margin-top: 20px !important;}
|
|
.mt-16 {margin-top: 16px !important;}
|
|
.mt-10 {margin-top: 10px !important;}
|
|
.mb-16 {margin-bottom: 16px !important;}
|
|
.mb-20 {margin-bottom: 20px !important;}
|
|
|
|
.mr-0 {margin-right: 0px !important;}
|
|
.mr-10 {margin-right: 10px !important;}
|
|
.mr-26 {margin-right: 26px !important;}
|
|
.max-70 {max-width: 70% !important;}
|
|
.wid-100 {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.align-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.flex-1 {flex: 1;}
|
|
.flex-2 {flex: 2;}
|
|
.flex-3 {flex: 3;}
|
|
.flex-4 {flex: 4;}
|
|
|
|
|
|
/* layout */
|
|
|
|
/* header */
|
|
|
|
header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50px;
|
|
background-color: var(--color-white);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.header-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 100%;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.header-content.sub {
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 10px;
|
|
}
|
|
|
|
.header-center {
|
|
display: flex;
|
|
margin: 0 auto;
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.app-title {
|
|
font-size: var(--fs-20);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-002555);
|
|
margin: 0;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
|
|
.header-btn {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background: none;
|
|
border: none;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.header-btn:active {
|
|
background-color: var(--color-F7F7F7);
|
|
}
|
|
|
|
.notification-icon, .profile-icon {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.notification-badge {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 6px;
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #ff4757;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--color-white);
|
|
z-index: 100;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
padding-top: 50px; /* 헤더 높이만큼 패딩 조정 */
|
|
box-sizing: border-box;
|
|
height: 100vh;
|
|
padding-bottom: 70px; /* 하단 탭바 공간 확보 */
|
|
}
|
|
|
|
main.pop {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
main.full-height {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.lnb {
|
|
display: flexbox;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.content {
|
|
position: relative;
|
|
display: flexbox;
|
|
flex: auto;
|
|
background-color: #f7f7f7;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.content-container {
|
|
min-height: calc(100vh - 172px);
|
|
padding: 1.875rem 100px 1.875rem 1.875rem;
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
height: 99px;
|
|
background-color: var(--color-white);
|
|
}
|
|
|
|
/* 하단 탭바 스타일 */
|
|
|
|
.bottom-tabbar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 70px;
|
|
background-color: var(--color-white);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.tab-button {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 20%;
|
|
height: 100%;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
padding: 8px 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tab-button:hover {
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: var(--color-4968BD);
|
|
}
|
|
|
|
.tab-button.active .tab-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 24px;
|
|
margin-bottom: 6px;
|
|
transition: transform 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.tab-icon-img {
|
|
width: 24px;
|
|
height: 24px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* active 상태에서 아이콘 변경 */
|
|
.tab-button.active .tab-icon::before {
|
|
content: attr(data-active-icon);
|
|
}
|
|
|
|
.tab-button:not(.active) .tab-icon::before {
|
|
content: attr(data-inactive-icon);
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: var(--fs-12);
|
|
font-weight: var(--fw-500);
|
|
color: #B3B8CE;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.tab-button.active .tab-text {
|
|
color: #3E6AFC;
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
/* 탭 컨텐츠 스타일 */
|
|
.tab-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.tab-content.blue {
|
|
background: #F4F8FF;
|
|
}
|
|
|
|
.tab-pane {
|
|
display: none;
|
|
padding: 1rem;
|
|
min-height: calc(100vh - 120px);
|
|
box-sizing: border-box;
|
|
}
|
|
.tab-pane.sub {
|
|
padding-top: 0!important;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.tab-pane.active {
|
|
display: block;
|
|
}
|
|
|
|
.tab-pane h2 {
|
|
font-size: var(--fs-24);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.tab-pane p {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-666666);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* 스와이퍼 UI 스타일 */
|
|
.swiper-wrapper {
|
|
display: flex;
|
|
gap: 9px;
|
|
padding-bottom: 1rem;
|
|
overflow-x: auto;
|
|
scroll-snap-type: x mandatory;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
}
|
|
|
|
.swiper-wrapper::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.swiper-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0;
|
|
cursor: pointer;
|
|
transition: transform 0.3s ease;
|
|
flex-shrink: 0;
|
|
scroll-snap-align: start;
|
|
min-width: 80px;
|
|
}
|
|
|
|
.swiper-item:hover {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.swiper-icon {
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.swiper-text {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-111111);
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* 추가 아이콘 */
|
|
.add-icon {
|
|
background: white;
|
|
border: 2px dashed #3E6AFC;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.add-square {
|
|
width: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.add-square::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 2px dashed #3E6AFC;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.plus-symbol {
|
|
color: #3E6AFC;
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
|
|
/* day-status 스타일 */
|
|
.day-status {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.day-tab {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.day-tab > div:first-child {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
.day-tab > div:last-child {
|
|
display: flex;
|
|
gap: 0;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.day-tab-btn {
|
|
padding: 2px 16px;
|
|
/* border: 1px solid var(--color-E5E5E5); */
|
|
background: var(--color-white);
|
|
color: #999;
|
|
border-radius: 6px;
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
cursor: pointer;
|
|
transition: all 0.16s ease;
|
|
}
|
|
|
|
.day-tab-btn:hover {
|
|
background: var(--color-F7F7F7);
|
|
}
|
|
|
|
.day-tab-btn.active {
|
|
background: #3E6AFC;
|
|
color: var(--color-white);
|
|
border-color: #3E6AFC;
|
|
}
|
|
|
|
.con-box {
|
|
display: none;
|
|
border-radius: 8px;
|
|
min-height: 200px;
|
|
}
|
|
|
|
.con-box.active {
|
|
display: block;
|
|
}
|
|
|
|
.box-wrap {
|
|
background: var(--color-white);
|
|
margin-bottom: 1rem;
|
|
padding: 1.625rem 1rem;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.today-sales {
|
|
position: relative;
|
|
font-size: var(--fs-20);
|
|
font-weight: var(--fw-700);
|
|
color: #000;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.won01 {
|
|
height: 20px;
|
|
padding-left: 28px;
|
|
background: url("../images/ico_won.svg") no-repeat left 0 center;
|
|
}
|
|
|
|
.won02 {
|
|
height: 20px;
|
|
padding-left: 28px;
|
|
background: url("../images/ico_pie.svg") no-repeat left 0 center;
|
|
}
|
|
|
|
.per {
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
color: #3E6AFC;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 22px;
|
|
}
|
|
|
|
.dales-detail {
|
|
margin-top: 1rem;
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.dales-detail li {
|
|
display: inline-block;
|
|
font-size: var(--fs-15);
|
|
margin-right: 30px;
|
|
}
|
|
|
|
.dales-detail li:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.dales-detail li strong {
|
|
font-weight: var(--fw-600);
|
|
}
|
|
|
|
.approve::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 9px;
|
|
background: #3E6AFC;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.cancel::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 9px;
|
|
background: #C6C6C6;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
/* Heading */
|
|
|
|
h3 {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
/* input */
|
|
|
|
[tabindex='-1'], [tabindex='0'] {
|
|
outline: none;
|
|
}
|
|
|
|
input {
|
|
-webkit-appearance : none;
|
|
-moz-appearance:none;
|
|
appearance:none;
|
|
height: 40px;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-111111);
|
|
border: none;
|
|
outline: 1px solid rgba(217, 217, 217, 1);
|
|
padding: 6px 12px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
border: none;
|
|
transition: all .2s;
|
|
}
|
|
input.error {
|
|
outline: 1px solid rgba(255, 71, 87, 1);
|
|
}
|
|
|
|
input:focus, input:active, input:hover {
|
|
border: none;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
input::-ms-clear {
|
|
display: none;
|
|
}
|
|
|
|
input:invalid {
|
|
-webkit-box-shadow: none;
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:-moz-submit-invalid {
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
:-moz-ui-invalid {
|
|
-moz-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
input:focus-within {
|
|
outline: 1px solid var(--color-111111);
|
|
}
|
|
|
|
input:disabled {
|
|
color: #bebebe;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
input[readonly] {
|
|
color: var(--color-2D3436);
|
|
background: var(--color-white);
|
|
}
|
|
|
|
input[readonly] + button.date-btn {
|
|
opacity: 1;
|
|
}
|
|
|
|
input::placeholder {
|
|
color: #999
|
|
}
|
|
|
|
*::placeholder {
|
|
font-weight: var(--fw-300);
|
|
}
|
|
|
|
input[type="password"] {
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* input with clear button */
|
|
.input-wrapper {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.input-with-clear {
|
|
padding-right: 35px;
|
|
}
|
|
|
|
.clear-btn {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background-color: #f0f0f0;
|
|
color: #666;
|
|
}
|
|
|
|
.clear-btn.visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
input.id[type="text"] {
|
|
font-size: var(--fs-18);
|
|
font-weight: 700;
|
|
}
|
|
|
|
input.big[type="password"] {
|
|
letter-spacing: -5px;
|
|
font-size: var(--fs-30)
|
|
}
|
|
.date-btn {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
color: #999;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* textarea */
|
|
|
|
textarea {
|
|
width: 100%;
|
|
padding: var(--input-padding);
|
|
border: 1px solid var(--input-border);
|
|
border-radius: var(--input-radius);
|
|
background-color: var(--input-bg);
|
|
color: var(--input-text);
|
|
font-size: 1rem;
|
|
line-height: 1.4;
|
|
box-sizing: border-box;
|
|
transition: border-color 150ms ease, box-shadow 150ms ease;
|
|
}
|
|
|
|
textarea:focus {
|
|
outline: 1px solid var(--color-111111);
|
|
/* border-color: var(--input-border-focus);
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2); */
|
|
}
|
|
|
|
textarea[disabled] {
|
|
background-color: #f5f5f5;
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
textarea::placeholder {
|
|
color: var(--color-8C8C8C);
|
|
}
|
|
textarea {
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
}
|
|
|
|
/* select */
|
|
|
|
select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance:none;
|
|
appearance:none;
|
|
}
|
|
|
|
select:disabled {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
select::-ms-expand {
|
|
display:none;
|
|
}
|
|
|
|
select {
|
|
height: 40px;
|
|
padding: 6px 40px 6px 12px;
|
|
border: 0;
|
|
border: 1px solid var(--color-CCCCCC);
|
|
color: var(--color-111111);
|
|
font-size: var(--fs-15);
|
|
border-radius: 8px;
|
|
-moz-border-radius: 6px;
|
|
outline: 0;
|
|
box-sizing: border-box;
|
|
background: url('../images/select_arrow.svg') no-repeat center right 12px var(--color-white);
|
|
transition: all .2s;
|
|
}
|
|
|
|
select:focus-within,
|
|
select:active {
|
|
border: 1px solid var(--color-111111);
|
|
}
|
|
|
|
select.heading-select:focus-within,
|
|
select.heading-select:active {
|
|
border: 0;
|
|
}
|
|
|
|
select:disabled {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* link */
|
|
|
|
a {
|
|
color: var(--color-111111);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color var(--link-transition);
|
|
}
|
|
|
|
a:visited {
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
a:hover,
|
|
a:active {
|
|
color: var(--color-4968BD);
|
|
}
|
|
|
|
a:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 var(--link-focus-ring) rgba(11, 102, 195, 0.3);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
a[aria-disabled="true"],
|
|
a.disabled {
|
|
color: #9aa0a6;
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
/* button */
|
|
|
|
button {
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
}
|
|
|
|
a:active, button:active {
|
|
opacity: .75;
|
|
}
|
|
|
|
button:disabled {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.button-group {
|
|
text-align: center;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
.btn-36 {
|
|
min-width: 100px;
|
|
width: 100%;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
padding: 0 16px;
|
|
height: 36px;
|
|
line-height: 36px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-40 {
|
|
min-width: 100px;
|
|
width: 100%;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
padding: 0 16px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-44 {
|
|
min-width: 140px;
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-600);
|
|
padding: 0 16px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-50 {
|
|
min-width: 140px;
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
padding: 0 16px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.btn-darkblue {
|
|
background: var(--color-002555);
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn-blue {
|
|
background: var(--color-3E6AFC);
|
|
color: var(--color-white);
|
|
}
|
|
.btn-blue[disabled], .btn-darkgray[disabled] {
|
|
background: #D9D9D9;
|
|
color: var(--color-white);
|
|
opacity: 1;
|
|
}
|
|
|
|
.btn-darkgray {
|
|
background: #999;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.btn-white {
|
|
background: var(--color-white);
|
|
color: var(--color-111111);
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
/* .btn-exel {
|
|
padding-left: 36px;
|
|
padding-right: 10px;
|
|
background: url("../images/ico_excel.svg") no-repeat left 10px center;
|
|
} */
|
|
|
|
|
|
/* checkbox */
|
|
|
|
.check_box {
|
|
position: relative;
|
|
padding-left: 30px;
|
|
padding-right: 30px;
|
|
font-size: var(--fs-17);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.check_box label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="checkbox"] + label {
|
|
position: absolute;
|
|
display: block;
|
|
width: 18px;
|
|
height: 18px;
|
|
padding-left: 30px;
|
|
cursor: pointer;
|
|
background: url('../images/chk_off.svg') no-repeat 0 0 / contain;
|
|
}
|
|
|
|
input[type='checkbox']:checked + label {
|
|
background: url('../images/chk_on.svg') no-repeat 0 0 / contain;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
|
|
.check_box_scrap {
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.check_box_scrap label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.check_box_scrap input[type="checkbox"] + label {
|
|
position: absolute;
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
cursor: pointer;
|
|
background: url('../images/chk_scrap_off.svg') no-repeat 0 0 / contain;
|
|
}
|
|
|
|
.check_box_scrap input[type='checkbox']:checked + label {
|
|
background: url('../images/chk_scrap_on.svg') no-repeat 0 0 / contain;
|
|
}
|
|
|
|
/* radiobox */
|
|
|
|
.radio_box {
|
|
position: relative;
|
|
padding-left: 25px;
|
|
padding-right: 30px;
|
|
font-size: var(--fs-14);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.radio_box label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 1px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type="radio"] + label {
|
|
position: absolute;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url("../images/radio_off.svg") no-repeat 0 0;
|
|
}
|
|
|
|
input[type='radio']:checked + label {
|
|
background: url("../images/radio_on.svg") no-repeat 0 0;
|
|
}
|
|
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* header */
|
|
|
|
.heading-select {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
border: 0;
|
|
padding: 0 30px 0 5px;
|
|
}
|
|
.notification-btn {
|
|
background: url("../images/alarm.svg") no-repeat center center;
|
|
}
|
|
|
|
|
|
/* dashboard */
|
|
|
|
/* 진행률 표시줄 스타일 */
|
|
.progressbar {
|
|
width: 100%;
|
|
padding: 1rem 0 0 0;
|
|
}
|
|
|
|
.progress-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.progress-title {
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-700);
|
|
color: #3E6AFC;
|
|
}
|
|
|
|
.progress-remaining {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: #3E6AFC;
|
|
}
|
|
|
|
.progress-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 12px;
|
|
background: #ECF1FA;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: #3E6AFC;
|
|
border-radius: 6px;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 6px;
|
|
height: 100%;
|
|
background: #3E6AFC;
|
|
border-radius: 0 6px 6px 0;
|
|
}
|
|
|
|
.remain-limit {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-400);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.remain-limit strong {
|
|
font-weight: var(--fw-600);
|
|
}
|
|
|
|
/* 배너 스와이퍼 스타일 */
|
|
.swiper-banner {
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.banner-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 110px;
|
|
cursor: grab;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
.banner-wrapper:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.banner-slide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.banner-slide.active {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.banner-slide.prev {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.banner-content {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.banner-content img {
|
|
width: 100%;
|
|
height: auto;
|
|
border-radius: 0.75rem;
|
|
}
|
|
|
|
.banner-pagination {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.banner-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--color-CCCCCC);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.banner-dot.active {
|
|
background: var(--color-4968BD);
|
|
/* transform: scale(1.2); */
|
|
}
|
|
|
|
/* 공지사항 목록 스타일 */
|
|
.notice-list {
|
|
border-radius: 0.75rem;
|
|
margin-top: 1.625rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notice-box {
|
|
background: var(--color-white);
|
|
margin-top: 1rem;
|
|
padding-bottom: 26px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.box-wrap.notice-list {
|
|
padding-top: 4px;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.notice-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 1rem;
|
|
border-bottom: 1px solid #eaeaea;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s ease;
|
|
}
|
|
|
|
.notice-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.notice-item:active {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.notice-content {
|
|
flex: 1;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.notice-title {
|
|
font-size: var(--fs-17);
|
|
font-weight: 400;
|
|
color: var(--color-111111);
|
|
margin-bottom: 4px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notice-meta {
|
|
font-size: var(--fs-14);
|
|
color: #999;
|
|
}
|
|
|
|
.notice-meta strong {
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
|
|
.notice-meta span::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 10px;
|
|
background-color: #999;
|
|
margin: 0 8px 0 10px;
|
|
}
|
|
|
|
.notice-arrow {
|
|
position: relative;
|
|
}
|
|
|
|
/* 섹션 헤더 스타일 */
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 0.6rem;
|
|
margin-top: 1.625rem;
|
|
}
|
|
|
|
.section-header h3 {
|
|
margin: 0;
|
|
}
|
|
|
|
.section-header p {
|
|
margin: 0;
|
|
font-size: var(--fs-14);
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.today-sales.mt-sty {
|
|
margin-top: 0.8rem !important;
|
|
}
|
|
|
|
.two-account {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
color: #000;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.two-sales h4 {
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.img-customer {
|
|
background: url("../images/img_customer.svg") no-repeat right 1.625rem bottom 1rem var(--color-white);
|
|
}
|
|
|
|
.img-states {
|
|
background: url("../images/img_states.svg") no-repeat right 1.625rem bottom 1rem var(--color-white);
|
|
}
|
|
|
|
.ranking h4 {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.ranking ul {
|
|
display: block;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.ranking ul li {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--fs-15);
|
|
padding: 3px 0;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.ranking ul li span:nth-child(2) {
|
|
flex: 1;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.ranking-num-01, .ranking-num-ot {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
font-size: var(--fs-14);
|
|
color: var(--color-white);
|
|
font-weight: var(--fw-700);
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
line-height: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.ranking-num-01 {
|
|
background: #3E6AFC;
|
|
}
|
|
|
|
.ranking-num-ot {
|
|
background: #3EC1F3;
|
|
}
|
|
|
|
.last-per-01, .last-per-ot {
|
|
font-weight: var(--fw-700);
|
|
}
|
|
.last-per-01 {
|
|
color: #3E6AFC;
|
|
}
|
|
.last-per-ot {
|
|
color: #3EC1F3;
|
|
}
|
|
|
|
/* 전체메뉴 */
|
|
.full-menu-modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #fff;
|
|
z-index: 9999;
|
|
display: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.full-menu-container {
|
|
padding: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 헤더 */
|
|
.full-menu-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem 1.25rem;
|
|
border-bottom: 0;
|
|
background: #fff;
|
|
position: sticky;
|
|
top: 0;
|
|
height: 50px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.full-menu-header.pop {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.full-menu-title {
|
|
font-size: var(--fs-17);
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
|
|
.full-menu-title.center {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.beetween {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.option-list {
|
|
padding: 16px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
}
|
|
|
|
.option-list-nopadding {
|
|
padding: 0 10px
|
|
}
|
|
|
|
.opt-field {
|
|
display: grid;
|
|
grid-template-columns: 83px 1fr;
|
|
align-items: start;
|
|
gap: 4px;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.opt-field.no-padding {
|
|
padding: 0;
|
|
}
|
|
|
|
.opt-field.mt_top {
|
|
margin-top: -20px;
|
|
}
|
|
|
|
.opt-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
margin-bottom: 0;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.opt-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.opt-controls.gap-six {
|
|
gap: 8px;
|
|
}
|
|
|
|
.opt-controls.col {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
}
|
|
|
|
.opt-controls.below {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.opt-controls.below.h36 span,
|
|
.opt-controls.below.h50 span {
|
|
font-size: var(--fs-15);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 1.3;
|
|
border-color: #999;
|
|
}
|
|
|
|
.opt-controls.below.h36 span {
|
|
height: 36px;
|
|
}
|
|
|
|
.opt-controls.below.h50 span {
|
|
height: 50px;
|
|
}
|
|
|
|
/* Ensure inputs wrap under controls and fill available width */
|
|
.option-list .opt-controls .flex-1,
|
|
.option-list .opt-controls input[type="text"],
|
|
.option-list .opt-controls input[type="number"],
|
|
.option-list .opt-controls input[type="search"] {
|
|
flex: 1 1 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Keep compact elements at natural width */
|
|
.option-list .opt-controls select,
|
|
.option-list .opt-controls .w-110,
|
|
.option-list .opt-controls .w-120,
|
|
.option-list .opt-controls .w-140,
|
|
.option-list .opt-controls .tilde {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.flex-1 {
|
|
flex: 1;
|
|
}
|
|
.flex-2 {
|
|
flex: 2;
|
|
}
|
|
|
|
.w-110 {
|
|
width: 110px;
|
|
}
|
|
|
|
.w-140 {
|
|
width: 140px;
|
|
}
|
|
|
|
.w-160 {
|
|
width: 160px;
|
|
}
|
|
|
|
.tilde {
|
|
padding: 0 8px;
|
|
color: #999;
|
|
}
|
|
|
|
.chip-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.chip-row .keyword-tag, .opt-controls .keyword-tag {
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
.opt-controls .keyword-tag {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.range-row {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.full-menu-title span {
|
|
font-size: var(--fs-17);
|
|
font-weight: 400;
|
|
color: #000;
|
|
}
|
|
|
|
.full-menu-actions {
|
|
display: flex;
|
|
gap: 0.625rem;
|
|
align-items: center;
|
|
position: absolute;
|
|
right: 10px;
|
|
}
|
|
|
|
.full-menu-settings {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.full-menu-settings img {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.full-menu-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
color: #666;
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 상단 네비게이션 */
|
|
.full-menu-top-nav {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 1rem;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
|
|
.full-menu-top-nav .swiper-wrapper {
|
|
padding-bottom: 0.5rem !important;
|
|
}
|
|
|
|
.btn_delect {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.top-nav-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.top-nav-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
}
|
|
|
|
.won-icon {
|
|
background: #4CAF50;
|
|
}
|
|
|
|
.chart-icon {
|
|
background: #9C27B0;
|
|
}
|
|
|
|
.chart-icon img {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
.calendar-icon {
|
|
background: #2196F3;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.edit-icon {
|
|
background: #fff;
|
|
border: 2px dashed #ccc;
|
|
color: #666;
|
|
font-size: 1.5rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.top-nav-item span {
|
|
font-size: 0.75rem;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 인기 키워드 */
|
|
.full-menu-keywords {
|
|
display: flex;
|
|
gap: 6px;
|
|
padding: 1rem 1.625rem;
|
|
background: #fff;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
flex-wrap: nowrap;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
.full-menu-keywords.no-padding {
|
|
padding: 0;
|
|
}
|
|
.full-menu-keywords::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari, Opera */
|
|
}
|
|
|
|
.keyword-tag {
|
|
display: inline-block;
|
|
background: var(--color-white);
|
|
border: 1px solid var(--color-999999);
|
|
height: 36px;
|
|
line-height: 35px;
|
|
border-radius: 36px;
|
|
padding: 0 0.9rem;
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
white-space: nowrap;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
flex: 1;
|
|
}
|
|
|
|
.keyword-tag.active {
|
|
background: #3E6AFC;
|
|
color: #fff;
|
|
border-color: #3E6AFC !important;
|
|
}
|
|
|
|
/* 메뉴 리스트 */
|
|
.full-menu-list {
|
|
flex: 1;
|
|
padding: 0 1rem 1rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.menu-category {
|
|
background: #fff;
|
|
border-radius: 0.75rem;
|
|
margin-bottom: 1rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.category-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 1rem 10px;
|
|
}
|
|
|
|
.category-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.875rem;
|
|
color: #fff;
|
|
}
|
|
|
|
.transaction-icon, .settlement-icon, .merchant-icon, .payment-icon, .account-icon, .vat-icon, .service-icon, .support-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.transaction-icon::before, .settlement-icon::before, .merchant-icon::before, .payment-icon::before, .account-icon::before, .vat-icon::before, .service-icon::before, .support-icon::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.transaction-icon::before {
|
|
background: url("../images/ico_menu01.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.settlement-icon::before {
|
|
background: url("../images/ico_menu02.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.merchant-icon::before {
|
|
background: url("../images/ico_menu03.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.payment-icon::before {
|
|
background: url("../images/ico_menu04.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.account-icon::before {
|
|
background: url("../images/ico_menu05.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.vat-icon::before {
|
|
background: url("../images/ico_menu06.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.service-icon::before {
|
|
background: url("../images/ico_menu07.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.support-icon::before {
|
|
background: url("../images/ico_menu08.svg") no-repeat center;
|
|
top: 0;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.category-header span {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #999;
|
|
}
|
|
|
|
.category-items {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.category-items li {
|
|
padding: 0.5rem 0.5rem 0.5rem 1.8rem;
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
position: relative;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.category-items li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.category-items li::before {
|
|
content: '•';
|
|
position: absolute;
|
|
left: 0.8rem;
|
|
color: var(--color-2D3436);
|
|
font-size: 0.8rem;
|
|
line-height: 2;
|
|
}
|
|
|
|
.category-items li:active {
|
|
background: #f8f9fa;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* 요약 섹션 */
|
|
.summary-section {
|
|
padding: 30px 26px;
|
|
margin-left: -16px;
|
|
margin-right: -16px;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
}
|
|
.summary-section.no-border {
|
|
border-bottom: 0;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.summary-label {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-700);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.summary-label.label {
|
|
margin-top: 25px;
|
|
}
|
|
|
|
/* subTab (정산달력/정산내역) */
|
|
.subTab {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
margin-left: -26px;
|
|
margin-right: -26px;
|
|
width: calc(100% + 52px);
|
|
max-width: 100vw;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.subTab.three {
|
|
grid-template-columns: 1fr 1fr 1fr !important;
|
|
}
|
|
|
|
.subtab-btn {
|
|
height: 46px;
|
|
background: var(--color-white);
|
|
border: none;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-B9BDC5);
|
|
font-weight: var(--fw-600);
|
|
}
|
|
|
|
.subtab-btn.active {
|
|
color: var(--color-111111);
|
|
border-bottom: 2px solid var(--color-111111);
|
|
}
|
|
.summary-amount {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* Place button right next to amount-text for divTop variant */
|
|
.summary-amount.divTop {
|
|
justify-content: flex-start;
|
|
gap: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.summary-amount.divTop .amount-text {
|
|
display: inline-block;
|
|
}
|
|
|
|
.summary-amount.divTop button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.summary-extend {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.amount-text {
|
|
font-size: var(--fs-28);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
.amount-text.states {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
}
|
|
.amount-text.states-17 {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
.summary-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.filter-btn, .download-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: #F4F8FF;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.summary-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.detail-item {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
font-size: var(--fs-14);
|
|
gap: 16px;
|
|
color: var(--color-777777);
|
|
}
|
|
|
|
/* 필터 및 정렬 */
|
|
.excrow {
|
|
max-width: 67%;
|
|
margin-right: -26px;
|
|
}
|
|
|
|
.filter-section {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.sort-options {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sort-btn {
|
|
background: none;
|
|
border: none;
|
|
font-size: var(--fs-16);
|
|
color: var(--color-666666);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sort-btn.active {
|
|
color: var(--color-black);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.sort-divider {
|
|
color: var(--color-CCCCCC);
|
|
font-size: var(--fs-12);
|
|
}
|
|
|
|
|
|
/* 거래내역 리스트 */
|
|
.transaction-list {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.date-group {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.date-header {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-2D3436);
|
|
padding: 16px 0 12px 0;
|
|
}
|
|
|
|
.transaction-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.transaction-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.transaction-status {
|
|
margin-right: 12px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.status-dot.blue {
|
|
background: var(--color-3E6AFC);
|
|
}
|
|
|
|
.status-dot.gray {
|
|
background: var(--color-CCCCCC);
|
|
}
|
|
|
|
.transaction-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.transaction-content .transaction-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-2D3436);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.transaction-details {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-999999);
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 0;
|
|
align-items: start;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
width: calc(100vw - 90px);
|
|
}
|
|
|
|
.transaction-details .separator {
|
|
color: var(--color-d6d6d6);
|
|
font-size: 13px;
|
|
font-weight: 100;
|
|
}
|
|
|
|
.transaction-amount {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
text-align: right;
|
|
margin-left: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.transaction-amount.two {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.transaction-amount.two .unit {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-999999);
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.summary-box {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.625rem;
|
|
flex: 1 0 0;
|
|
}
|
|
|
|
/* summary-credit (현금영수증 조회 상단 요약) */
|
|
.credit-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.credit-controls button {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.credit-controls div {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1;
|
|
height: 36px;
|
|
background-color: #f5f5f5;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
div .credit-period {
|
|
flex: 1;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-777777);
|
|
background: none;
|
|
height: 36px;
|
|
outline: none;
|
|
}
|
|
|
|
.credit-controls div button {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 2px;
|
|
background: transparent;
|
|
}
|
|
|
|
.credit-period[readonly] {
|
|
cursor: default;
|
|
}
|
|
|
|
.credit-summary {
|
|
margin-top: 26px;
|
|
}
|
|
|
|
.credit-summary .row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
font-size: var(--fs-16);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.credit-summary .label {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.credit-summary .amount22 {
|
|
font-size: var(--fs-22);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
.credit-summary .amount19 {
|
|
font-size: var(--fs-19);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.credit-summary .count {
|
|
position: relative;
|
|
left: -10px;
|
|
color: var(--color-2D3436);
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.summary-extend .summary-segment {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.summary-extend .segment-btn {
|
|
height: 28px;
|
|
padding: 0 12px;
|
|
border-radius: 14px;
|
|
border: 1px solid #e6e6e6;
|
|
background: #fff;
|
|
font-size: var(--fs-13);
|
|
}
|
|
|
|
.summary-extend .segment-btn.active {
|
|
background: #3E6AFC;
|
|
color: #fff;
|
|
border-color: #3E6AFC;
|
|
}
|
|
|
|
.summary-extend .summary-amount-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 16px;
|
|
background-color: var(--color-F4F8FF);
|
|
}
|
|
|
|
.summary-extend .summary-amount-list .bdr-6 {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.summary-extend .summary-amount-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 3px 0;
|
|
font-size: var(--fs-15);
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .label {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .label::before {
|
|
content: "·";
|
|
display: inline-block;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .value {
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-500);
|
|
font-size: var(--fs-16);
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .value .unit {
|
|
margin-left: 4px;
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .value.minus {
|
|
color: var(--color-EB5757);
|
|
}
|
|
|
|
.summary-extend .summary-amount-item .value.link {
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
.apply-row {
|
|
display: flex;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 20px 26px 16px 26px;
|
|
z-index: 500;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.apply-row.bottom-padding {
|
|
bottom: 70px !important;
|
|
}
|
|
|
|
.apply-row.two-button button:first-child {
|
|
margin-right: 10px;
|
|
min-width: inherit !important;
|
|
}
|
|
|
|
/* 알림함 */
|
|
.sub-wrap {
|
|
width: 100%;
|
|
padding: 20px 26px 20px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.notice-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 22px;
|
|
flex-wrap: nowrap;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
-webkit-overflow-scrolling: touch;
|
|
white-space: nowrap;
|
|
/* hide scrollbar */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
scrollbar-width: none; /* Firefox */
|
|
}
|
|
.notice-tabs.sub {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.notice-tabs::-webkit-scrollbar{ display:none; height:0; }
|
|
|
|
.tab36 {
|
|
height: 36px;
|
|
padding: 0 15px;
|
|
border-radius: 30px;
|
|
border: 1px solid #BEBEBE;
|
|
background: #fff;
|
|
font-size: var(--fs-16);
|
|
white-space: nowrap;
|
|
flex: 0 0 auto;
|
|
flex-shrink: 0;
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.tab36.on {
|
|
background: var(--color-3E6AFC);
|
|
color: #fff;
|
|
border-color: var(--color-3E6AFC);
|
|
}
|
|
|
|
.notice-bottom {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 14px 16px;
|
|
margin-top: 10px;
|
|
background: #F4F8FF;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.notice-tip {
|
|
font-size: 14px !important;
|
|
color: #2D3436 !important;
|
|
}
|
|
|
|
.sub .notice-item {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* 공지사항 상세 (Figma 1651:3135) */
|
|
.notice-detail{
|
|
/* padding:20px 0 0 */
|
|
}
|
|
|
|
.notice-detail__title{
|
|
font-size:var(--fs-20);
|
|
font-weight:var(--fw-600);
|
|
line-height:1.4;
|
|
color:var(--color-2D3436);
|
|
margin:0 0 10px
|
|
}
|
|
|
|
.notice-detail__meta{
|
|
font-size:var(--fs-17);
|
|
color:#999;
|
|
margin-bottom:30px
|
|
}
|
|
|
|
.notice-detail__divider{
|
|
height:1px;
|
|
background:#EAEAEA;
|
|
margin-bottom:30px
|
|
}
|
|
|
|
.notice-detail__body{
|
|
white-space:pre-line;
|
|
font-size:var(--fs-17);
|
|
line-height:1.4;
|
|
color:var(--color-2D3436)
|
|
}
|
|
.notice-alert {
|
|
padding: 14px 16px;
|
|
background: var(--color-F4F8FF);
|
|
font-size: var(--fs-14);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
/* 설정 (Figma 1651:3409) */
|
|
.settings-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.settings-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.settings-divider {
|
|
height: 1px;
|
|
background: #eaeaea;
|
|
margin: 28px 0;
|
|
}
|
|
|
|
.settings-section {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.nopadding {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.settings-section-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.settings-row {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.settings-row.link {
|
|
gap: 4px;
|
|
}
|
|
|
|
.settings-row.link .click {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
padding-right: 28px;
|
|
background: url("../images/Forward.svg") no-repeat right center;
|
|
}
|
|
|
|
.settings-row-title {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.bd-style {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.settings-switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 52px;
|
|
height: 28px;
|
|
}
|
|
|
|
.settings-switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #BEBEBE;
|
|
border-radius: 30px;
|
|
transition: .2s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 22px;
|
|
width: 22px;
|
|
left: 3px;
|
|
top: 3px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
transition: .2s;
|
|
}
|
|
|
|
.settings-switch input:checked + .slider {
|
|
background: var(--color-3E6AFC);
|
|
}
|
|
|
|
.settings-switch input:checked + .slider:before {
|
|
transform: translateX(24px);
|
|
}
|
|
|
|
/* 통합거래내역 상세 (Figma 1688:2974) */
|
|
.txn-num-group{
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 4px 0 0;
|
|
}
|
|
|
|
.txn-amount{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
.txn-amount .value{
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: #2D3436;
|
|
}
|
|
|
|
.txn-amount .value .unit{
|
|
margin-left: 2px;
|
|
font-weight: var(--fw-700)
|
|
}
|
|
|
|
.chip-btn{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
border-radius: 30px;
|
|
background: var(--color-white);
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-600);
|
|
}
|
|
|
|
.txn-mid{
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
.txn-mid .label{
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-2D3436)
|
|
}
|
|
|
|
.txn-mid .value{
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-999999)
|
|
}
|
|
|
|
.txn-doc{
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 10px 0 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.doc-btn{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 13px 8px 43px;
|
|
border-radius: 6px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
background: url("../images/ico_download.svg") no-repeat left 10px center #F4F8FF;
|
|
}
|
|
|
|
.txn-divider{
|
|
border-bottom: 1px solid #EAEAEA;
|
|
margin: 0;
|
|
}
|
|
|
|
.txn-divider.minus {
|
|
margin-left: -26px;
|
|
margin-right: -26px;
|
|
}
|
|
|
|
.section-title{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.section-title .ic20.rot-180{
|
|
transform: rotate(180deg)
|
|
}
|
|
|
|
.kv-list{
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.kv-row{
|
|
display: flex;
|
|
white-space: nowrap;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
gap: 10px;
|
|
padding: 0 0 20px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.kv-row:last-child {
|
|
padding-bottom: 0 !important;
|
|
}
|
|
|
|
.gap-50 .kv-row {
|
|
gap: 50px;
|
|
}
|
|
|
|
.kv-row .k{
|
|
min-width: 32%;
|
|
font-size: var(--fs-17);
|
|
color: var(--color-666666)
|
|
}
|
|
|
|
.kv-row.bolder .k{
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.kv-row.bolder .v{
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.kv-row .v{
|
|
font-size: var(--fs-17);
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
color: var(--color-2D3436);
|
|
font-weight: var(--fw-500);
|
|
text-align: right;
|
|
}
|
|
|
|
.amount-expand {
|
|
background: var(--color-F4F8FF);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
margin: 10px 0 12px 0;
|
|
}
|
|
|
|
.amount-info {
|
|
margin-top: 30px;
|
|
background: var(--color-F4F8FF);
|
|
padding: 16px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.amount-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.amount-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 30px;
|
|
}
|
|
|
|
.amount-item .label {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.amount-item .value {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-111111);
|
|
text-align: right;
|
|
}
|
|
|
|
.amount-item .value.minus {
|
|
color: #000;
|
|
}
|
|
|
|
/* 바텀시트 이메일 선택 */
|
|
.bg-dim {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(17, 17, 17, 0.5);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.bottomsheet {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
background: var(--color-white);
|
|
border-radius: 16px 16px 0 0;
|
|
padding: 26px;
|
|
z-index: 1001;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.bottomsheet.banner {
|
|
padding: 0;
|
|
border-radius: 16px 16px 0 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.bottomsheet.banner .bottomsheet-content {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.bottom-btn {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 5px 26px 16px 26px;
|
|
}
|
|
|
|
.bottom-btn span {
|
|
display: inline-block;
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.bottomsheet-header {
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.bottomsheet-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.bottomsheet-title h2 {
|
|
font-size: var(--fs-20);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
margin: 0;
|
|
}
|
|
|
|
.list-style-circle li {
|
|
position: relative;
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.list-style-circle li::before {
|
|
content: '•';
|
|
position: absolute;
|
|
left: 0;
|
|
top: -2px;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 3px;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-btn img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bottomsheet-content {
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.banner-page {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
height: 23px;
|
|
line-height: 23px;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-999999);
|
|
padding: 0 10px;
|
|
background: var(--color-white);
|
|
border-radius: 15px;
|
|
border: 1px solid var(--color-EaEaEa);
|
|
}
|
|
|
|
.banner-page .current {
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
|
|
.email-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.text-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
font-size: var(--fs-17);
|
|
}
|
|
|
|
.bottom-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
padding-bottom: 6px;
|
|
}
|
|
.bottom-section p, .bottom-section ul li {
|
|
color: var(--color-2D3436);
|
|
font-size: var(--fs-17);
|
|
}
|
|
|
|
.email-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.mail-icon {
|
|
position: relative;
|
|
width: 36px;
|
|
height: 24px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mail-icon svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.label-text {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
line-height: 1.5;
|
|
letter-spacing: -0.5%;
|
|
}
|
|
|
|
.email-select {
|
|
width: 100%;
|
|
}
|
|
|
|
.select-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.select-wrapper select {
|
|
width: 100%;
|
|
}
|
|
|
|
.select-text {
|
|
font-size: var(--fs-15);
|
|
color: var(--color-2D3436);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.select-arrow {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.error-message {
|
|
margin-top: -5px;
|
|
}
|
|
|
|
.error-message p {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-EB5757);
|
|
margin: 0;
|
|
}
|
|
|
|
.bottomsheet-footer {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
width: 100%;
|
|
height: 50px;
|
|
background: #999999;
|
|
color: var(--color-white);
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
line-height: 1.35;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.home-indicator {
|
|
position: fixed;
|
|
bottom: 21px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 139px;
|
|
height: 5px;
|
|
background: var(--color-2D3436);
|
|
border-radius: 10px;
|
|
z-index: 1002;
|
|
}
|
|
|
|
/* 거래 취소 전체/부분 */
|
|
.cancel-content {
|
|
width: 100%;
|
|
max-width: 100vw;
|
|
overflow-x: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.cancel-list {
|
|
|
|
}
|
|
|
|
/* 거래취소 폼 스타일 */
|
|
.form-section {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
width: 114px;
|
|
min-width: 114px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
.input-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
min-width: 20px;
|
|
}
|
|
|
|
.error input {
|
|
border-color: var(--color-EB5757);
|
|
}
|
|
|
|
.error-msg {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-EB5757);
|
|
margin-top: -5px;
|
|
margin-bottom: 20px;
|
|
margin-left: 124px;
|
|
line-height: 1.5;
|
|
max-width: calc(100% - 124px);
|
|
word-wrap: break-word;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.notice-text {
|
|
margin-top: 26px;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.notice-text p {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-EB5757);
|
|
line-height: 1.5;
|
|
letter-spacing: -0.5%;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* 부분취소 테이블 */
|
|
.tb_both {
|
|
border-bottom: 1px solid #D9D9D9;
|
|
/* border-radius: 8px; */
|
|
margin-top: 10px;
|
|
padding: 7px 0 30px 0;
|
|
}
|
|
.partial-cancel-table {
|
|
width: 100%;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
background: var(--color-white);
|
|
margin-top: 10px;
|
|
border-collapse: collapse;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.partial-cancel-table thead th {
|
|
background: var(--color-white);
|
|
padding: 5px 16px;
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
line-height: 1.19;
|
|
text-align: center;
|
|
border: none;
|
|
}
|
|
|
|
.partial-cancel-table th.header-empty {
|
|
width: 65px;
|
|
color: var(--color-666666);
|
|
}
|
|
|
|
.partial-cancel-table th.header-balance {
|
|
width: 116px;
|
|
padding-right: 20px;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.partial-cancel-table th.header-cancel {
|
|
width: 141px;
|
|
}
|
|
|
|
.partial-cancel-table tbody td {
|
|
padding: 5px 0;
|
|
border: none;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.partial-cancel-table .row-label {
|
|
width: 65px;
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-777777);
|
|
line-height: 1.19;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.partial-cancel-table .row-balance {
|
|
width: 116px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
line-height: 1.19;
|
|
text-align: right;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.partial-cancel-table .row-cancel {
|
|
width: 141px;
|
|
text-align: center;
|
|
}
|
|
|
|
.cancel-input {
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
.cancel-input:focus {
|
|
outline: none;
|
|
border-color: var(--color-3E6AFC);
|
|
}
|
|
|
|
/* 거래 취소 확인 팝업 (Figma 1740:3538) */
|
|
.popup-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.popup-bg-dim {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(17, 17, 17, 0.5);
|
|
z-index: 2001;
|
|
}
|
|
|
|
.popup-container {
|
|
position: relative;
|
|
background: var(--color-white);
|
|
border-radius: 16px;
|
|
padding: 26px;
|
|
z-index: 2002;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.popup-title {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.popup-title p {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-400);
|
|
line-height: 1.5;
|
|
letter-spacing: 0.05%;
|
|
text-align: center;
|
|
color: var(--color-2D3436);
|
|
margin: 0;
|
|
}
|
|
|
|
.popup-btn-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
|
|
/* 현금영수증 수기발행 1단계 (Figma 1752:3528) */
|
|
.issue-progress .bar {
|
|
height: 16px;
|
|
background: #D9D9D9;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.issue-progress .bar .fill {
|
|
height: 16px;
|
|
background: linear-gradient(90deg, #8DA7FF 0%, #3E6AFC 100%);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.issue-title {
|
|
font-size: var(--fs-20) !important;
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
padding: 0;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.issue-form {
|
|
padding: 0 0 30px;
|
|
}
|
|
|
|
.issue-row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 0;
|
|
padding: 0 0 16px;
|
|
}
|
|
|
|
.issue-row.beetween {
|
|
justify-content: space-between !important;
|
|
}
|
|
|
|
.issue-label {
|
|
width: 95px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.issue-label.wid-105 {
|
|
width: 105px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.issue-field {
|
|
flex: 1;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-field.flex-auto {
|
|
flex: auto;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.issue-field input {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
width: 100%;
|
|
}
|
|
.seg-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.seg-buttons button {
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.seg-buttons button.light {
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
.issue-help.error {
|
|
padding: 0 0 16px 95px;
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-EB5757);
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.issue-note {
|
|
padding: 10px 0 0 0;
|
|
}
|
|
|
|
.issue-note.error {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-EB5757);
|
|
}
|
|
|
|
/* 빌링 결제신청 (Figma 1757:4252) */
|
|
.billing-title {
|
|
font-size: var(--fs-20);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
padding: 0;
|
|
}
|
|
|
|
.billing-form {
|
|
padding: 0 0 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.billing-form.gap-16 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.gap-16 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.gap-30 {
|
|
gap: 30px;
|
|
}
|
|
|
|
.billing-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.billing-label {
|
|
width: 90px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.billing-label span {
|
|
color: var(--color-EB5757);
|
|
}
|
|
|
|
.billing-field {
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
|
|
.billing-field input,
|
|
.billing-field select {
|
|
width: 100%;
|
|
height: 40px;
|
|
font-size: var(--fs-15);
|
|
text-align: right;
|
|
}
|
|
.billing-field .date input, .billing-field select {
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.billing-inline {
|
|
display: grid;
|
|
grid-template-columns: 1fr 40px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.calendar-btn .input-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
|
|
/* 정산달력 */
|
|
|
|
.calendar-wrap {
|
|
padding: 30px 10px 0 10px;
|
|
}
|
|
|
|
.top-select, .top-select select {
|
|
width: 100%;
|
|
}
|
|
|
|
.top-select {
|
|
padding-bottom: 26px;
|
|
}
|
|
|
|
span.complete, span.scheduled {
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
span.complete {
|
|
color: #00B894;
|
|
}
|
|
|
|
span.scheduled {
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
|
|
.calendar-wrap .month-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.calendar-wrap .month-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.calendar-wrap .month-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.calendar-wrap .amount-group {
|
|
padding: 16px 0 22px 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
|
|
.calendar-wrap .amount-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.calendar-wrap .amount-row:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.calendar-wrap .amount-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.calendar-wrap .amount-value {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
text-align: right;
|
|
}
|
|
|
|
.calendar-wrap .legend-group {
|
|
display: flex;
|
|
gap: 20px;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.calendar-wrap .legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.calendar-wrap .legend-dot {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.calendar-wrap .legend-dot.complete {
|
|
background: #00B894;
|
|
}
|
|
|
|
.calendar-wrap .legend-dot.scheduled {
|
|
background: var(--color-3E6AFC);
|
|
}
|
|
|
|
.calendar-wrap .legend-text {
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
.calendar-wrap .calendar-grid {
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.calendar-wrap .weekdays {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 10px;
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
.calendar-wrap .weekday {
|
|
text-align: center;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-666666);
|
|
}
|
|
|
|
.calendar-wrap .weekday.sun {
|
|
color: #FF0000;
|
|
}
|
|
|
|
.calendar-wrap .weekday.sat {
|
|
color: var(--color-4968BD);
|
|
}
|
|
|
|
.calendar-wrap .days {
|
|
display: grid;
|
|
grid-template-columns: repeat(7, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.calendar-wrap .day {
|
|
width: 30px;
|
|
height: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
justify-self: center;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
/* Weekend colors for day numbers (exclude status-styled days) */
|
|
.calendar-wrap .days .day:nth-child(7n+1):not(.complete):not(.scheduled) {
|
|
color: #FF0000;
|
|
}
|
|
.calendar-wrap .days .day:nth-child(7n):not(.complete):not(.scheduled) {
|
|
color: var(--color-4968BD);
|
|
}
|
|
|
|
.calendar-wrap .day.other {
|
|
opacity: 0;
|
|
}
|
|
|
|
.calendar-wrap .day.today {
|
|
border: 1px solid var(--color-111111);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.calendar-wrap .day.complete {
|
|
background: #00B894;
|
|
color: var(--color-white);
|
|
border-radius: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.calendar-wrap .day.scheduled {
|
|
background: var(--color-3E6AFC);
|
|
color: var(--color-white);
|
|
border-radius: 20px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.calendar-wrap .settlement-list {
|
|
padding: 16px 0 30px;
|
|
}
|
|
|
|
.calendar-wrap .settlement-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.calendar-wrap .settlement-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.calendar-wrap .settlement-tag {
|
|
padding: 3px 12px;
|
|
border-radius: 30px;
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.calendar-wrap .settlement-tag.scheduled {
|
|
color: var(--color-3E6AFC);
|
|
border: 1px solid var(--color-3E6AFC);
|
|
}
|
|
|
|
.calendar-wrap .settlement-tag.complete {
|
|
color: #00B894;
|
|
border: 1px solid #00B894;
|
|
}
|
|
|
|
.calendar-wrap .settlement-date {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-400);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
.calendar-wrap .settlement-amount {
|
|
margin-left: auto;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-111111);
|
|
}
|
|
|
|
|
|
/* 부가서비스 소개 (option-list 하위 전용) */
|
|
.ing-list {
|
|
padding: 16px 10px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ing-list .top-select {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ing-list .list-wrap01, .ing-list .list-wrap02 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 26px;
|
|
border-radius: 1rem;
|
|
box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.ing-list .list-wrap01 {
|
|
background: var(--Background, #F4F8FF);
|
|
gap: 50px;
|
|
}
|
|
|
|
.ing-list .list-wrap02 {
|
|
background: var(--color-white);
|
|
border: 1px solid #eaeaea;
|
|
gap: 20px;
|
|
}
|
|
|
|
.ing-list .service-name {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ing-list .service-desc {
|
|
margin-top: 6px;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-666666);
|
|
line-height: 1.4;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.ing-title {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
margin-top: 16px;
|
|
}
|
|
|
|
/* 부가서비스_신용카드 ARS 결제_결제 신청 성공 */
|
|
.success-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.success-body {
|
|
width: 338px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 40px;
|
|
padding-top: 110px;
|
|
}
|
|
|
|
.success-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.success-icon::before {
|
|
content: '';
|
|
display: block;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: url("../images/ico_sucess.svg") no-repeat center center / contain;
|
|
}
|
|
.error-icon {
|
|
position: relative;
|
|
}
|
|
|
|
.error-icon::before {
|
|
content: '';
|
|
display: block;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: url("../images/ico_error.svg") no-repeat center center / contain;
|
|
}
|
|
|
|
.success-title {
|
|
width: 290px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: var(--fw-700);
|
|
line-height: 1.4;
|
|
color: var(--color-111111);
|
|
margin: 0;
|
|
}
|
|
|
|
.success-result {
|
|
width: 100%;
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
padding: 26px;
|
|
}
|
|
.success-result .result-text {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-actions {
|
|
width: 390px;
|
|
padding: 40px 26px 0 26px;
|
|
}
|
|
|
|
.txn-date {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-999999);
|
|
margin-top: 5px;
|
|
margin-bottom: 40px;
|
|
font-weight: var(--fw-600);
|
|
}
|
|
|
|
ul.txn-amount-detail {
|
|
flex: 0 0 100%;
|
|
white-space: normal;
|
|
}
|
|
|
|
ul.txn-amount-detail li {
|
|
display: flex;
|
|
white-space: nowrap;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
gap: 20px;
|
|
padding: 3px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
ul.txn-amount-detail li span:first-child {
|
|
color: var(--color-777777);
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
ul.txn-amount-detail li span:last-child {
|
|
color: var(--color-666666);
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-400);
|
|
}
|
|
|
|
/* 결제 정보 > 서비스 이용, 수수료 및 정산주기 (ing-list 하위) */
|
|
.ing-card-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ing-card {
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.ing-card-head {
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.ing-card-name {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ing-card-link {
|
|
margin-top: 0;
|
|
font-size: var(--fs-14);
|
|
color: #999999;
|
|
}
|
|
|
|
|
|
/* bottomsheet: card-fee exact match */
|
|
.card-fee .desc {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 26px;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.card-fee .desc::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 5px;
|
|
}
|
|
|
|
.card-fee-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.card-fee-box .label {
|
|
width: 133px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.card-fee-list {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.card-fee-list-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 16px 0 10px;
|
|
border-bottom: 1px solid #D9D9D9;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card-fee-list-header .th-left {
|
|
font-size: var(--fs-15);
|
|
color: var(--color-666666);
|
|
}
|
|
|
|
.card-fee-list-header .th-right {
|
|
font-size: var(--fs-15);
|
|
color: var(--color-666666);
|
|
text-align: right;
|
|
}
|
|
|
|
.card-fee-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 0;
|
|
}
|
|
|
|
.card-fee-row span:first-child {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-666666);
|
|
}
|
|
|
|
.card-fee-row span:last-child {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
/* ensure full width */
|
|
.card-fee,
|
|
.card-fee-box,
|
|
.card-fee-list {
|
|
width: 100%;
|
|
}
|
|
|
|
.card-fee-box .field {
|
|
flex: 1;
|
|
width: 100%;
|
|
}
|
|
|
|
.card-fee-box .field select,
|
|
.card-fee-box select {
|
|
width: 100%;
|
|
}
|
|
|
|
/* card-fee tabs full width and equal split */
|
|
.card-fee .notice-tabs {
|
|
width: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.card-fee .notice-tabs .tab36 {
|
|
flex: 1 1 0;
|
|
flex-shrink: 1;
|
|
text-align: center;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* card-list (bottomsheet select list) */
|
|
.card-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: -26px;
|
|
margin-right: -26px;
|
|
}
|
|
|
|
.card-option {
|
|
display: flex;
|
|
justify-content: start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 26px;
|
|
}
|
|
|
|
.card-option .name {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.card-option .check {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.card-option.selected {
|
|
background: #F4F8FF;
|
|
background: url('../images/ico_alone_check.svg') no-repeat right 26px center #F4F8FF;
|
|
}
|
|
|
|
|
|
/* fee-cycle (계좌 간편결제 수수료 및 정산주기) */
|
|
|
|
.fee-cycle {
|
|
position: relative;
|
|
}
|
|
|
|
.fee-cycle .desc {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.fee-cycle .desc + .desc {
|
|
padding-bottom: 8px;
|
|
}
|
|
|
|
.fee-cycle .divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
margin: 8px 0 16px auto;
|
|
}
|
|
|
|
.fee-cycle .kv-list .kv-row {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.fee-cycle .kv-list .k {
|
|
color: #666666;
|
|
}
|
|
|
|
/* merchant free-interest detail (64_) */
|
|
.fee-cycle .card-fee-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.fee-cycle .card-fee-box .label {
|
|
width: 133px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.fee-cycle .desc {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 8x;
|
|
}
|
|
|
|
.desc.dot {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.desc.dot::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 5px;
|
|
}
|
|
|
|
.kv-row.pl-10 {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* 결제데이터 통보 > 리스트 블록 (ing-list 하위) */
|
|
.notify-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
margin-top: 20px;
|
|
}
|
|
.notify-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 0 0 16px;
|
|
}
|
|
.notify-title {
|
|
width: 100%;
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
.notify-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
.notify-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 16px 0;
|
|
}
|
|
.notify-name {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
.notify-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
background: var(--color-EaEaEa);
|
|
}
|
|
.notify-bar {
|
|
width: 100%;
|
|
padding: 16px 0;
|
|
background: var(--color-F4F8FF);
|
|
position: relative;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.notify-bar span {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 1px 16px 1px 30px;
|
|
font-size: var(--fs-14);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.notify-bar span::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 16px;
|
|
right: 0;
|
|
font-size: 4px;
|
|
}
|
|
|
|
.ic20.arrow-down {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url('../images/select_arrow.svg') no-repeat center center;
|
|
}
|
|
|
|
/* 가맹점 정보 화면 전용 */
|
|
.merchant-info .section + .section {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.merchant-info .section-title {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
padding: 4px 0 20px 0;
|
|
display:flex;
|
|
align-items:center;
|
|
gap:6px;
|
|
}
|
|
|
|
.merchant-info .kv-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0;
|
|
}
|
|
|
|
.merchant-info .kv-list .kv-row {
|
|
padding-bottom: 16px;
|
|
width: 100%;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.info-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
}
|
|
|
|
/* 비밀번호 관리 (ing-list 하위) */
|
|
.pwd-manage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
.pwd-title {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
.pwd-buttons {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 10px;
|
|
}
|
|
.pwd-btn {
|
|
width: 100%;
|
|
border: 1px solid #999999;
|
|
font-size: var(--fs-15);
|
|
}
|
|
|
|
/* 사용자관리_로그인인증정보 */
|
|
.auth-list {
|
|
padding: 0 0 76px 0;
|
|
}
|
|
|
|
.auth-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
|
|
.auth-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.auth-item-left {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tag-pill {
|
|
min-width: 60px;
|
|
text-align: center;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
padding: 0 12px;
|
|
border: 1px solid #3E6AFC;
|
|
color: #3E6AFC;
|
|
border-radius: 30px;
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.tag-pill.red {
|
|
border-color: #FF4757;
|
|
color: #FF4757;
|
|
}
|
|
|
|
.auth-name {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.auth-divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
}
|
|
|
|
.ic20.arrow-right {
|
|
width: 13px;
|
|
height: 13px;
|
|
background: url('../images/Forward.svg') no-repeat center center;
|
|
}
|
|
|
|
.notice-bottom {
|
|
display: flex;
|
|
justify-content: left;
|
|
}
|
|
|
|
.notice-bottom.left-align {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
/* 알림톡 결제 통보_서비스 설정 안내문구 보정 */
|
|
.service-tip {
|
|
position: relative;
|
|
font-size: var(--fs-15);
|
|
color: var(--color-777777);
|
|
}
|
|
|
|
/* 사용자 설정_로그인 인증정보 */
|
|
.settings-login-auth {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.settings-login-auth .group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.settings-login-auth .group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px 16px 0;
|
|
}
|
|
|
|
.settings-login-auth .group-header .title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.settings-login-auth .input-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 36px;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.settings-login-auth .input-row:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ic20.plus {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url('../images/ico_menu_plus.svg') no-repeat center center;
|
|
}
|
|
|
|
.icon-btn.minus {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
background: #F5F5F5 url('../images/ico_app_delete.svg') no-repeat center center;
|
|
}
|
|
|
|
.notice-bar {
|
|
padding: 14px 16px;
|
|
background: #F4F8FF;
|
|
border-radius: 8px;
|
|
font-size: var(--fs-14);
|
|
color: var(--color-2D3436);
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 사용자관리_계정권한 */
|
|
.perm-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
padding: 0;
|
|
}
|
|
|
|
.perm-field {
|
|
display: grid;
|
|
grid-template-columns: 116px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.perm-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.perm-control select {
|
|
width: 100%;
|
|
}
|
|
|
|
.perm-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.perm-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 17px 0;
|
|
border-bottom: 1px solid #EAEAEA;
|
|
}
|
|
|
|
.perm-item:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.perm-name {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ing-list.pdtop {
|
|
padding-top: 26px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ing-title.fs18 {
|
|
font-size: var(--fs-18);
|
|
}
|
|
|
|
.ing-list.sev {
|
|
gap: 0;
|
|
}
|
|
|
|
.ing-list.sev div {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ing-list.sev .settings-section.nopadding {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.set-divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.settings-row-title {
|
|
color: var(--color-777777);
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.bd-sub.dot {
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.bd-sub.dot::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
font-size: 4px;
|
|
}
|
|
|
|
/* 계정정보_사용자 추가 (74) */
|
|
.user-add {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.user-add.info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 30px;
|
|
}
|
|
|
|
.ua-row {
|
|
display: grid;
|
|
grid-template-columns: 116px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.ua-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ua-label .red {
|
|
color: var(--color-EB5757);
|
|
}
|
|
|
|
.ua-help {
|
|
padding: 0 0 0 126px;
|
|
font-size: var(--fs-14);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.ua-help.error {
|
|
color: var(--color-EB5757);
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.ua-desc .ua-title {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.ua-desc .ua-note {
|
|
font-size: var(--fs-16);
|
|
line-height: 1.35;
|
|
color: var(--color-2D3436);
|
|
margin: 0;
|
|
}
|
|
|
|
.ua-group-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 8px 16px 0;
|
|
}
|
|
|
|
.ua-group-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.ua-input-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 36px;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.ua-input-row:last-child {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ing-list.add {
|
|
gap: 30px;
|
|
}
|
|
|
|
/* 세금 계산서_리스트 (80) */
|
|
.ing-list.tax {
|
|
gap: 16px;
|
|
}
|
|
|
|
.tax-tabs {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
border-bottom: 1px solid #e6e6e6;
|
|
margin-left: -26px;
|
|
margin-right: -26px;
|
|
width: calc(100% + 52px);
|
|
}
|
|
|
|
.tax-tab {
|
|
height: 46px;
|
|
background: #fff;
|
|
border: none;
|
|
font-size: var(--fs-15);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-B9BDC5);
|
|
}
|
|
|
|
.tax-tab.active {
|
|
color: var(--color-111111);
|
|
border-bottom: 2px solid var(--color-111111);
|
|
}
|
|
|
|
.tax-sort {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 48px;
|
|
padding: 0 16px 0 26px;
|
|
}
|
|
|
|
.tax-sort-text {
|
|
font-size: var(--fs-16);
|
|
color: #000;
|
|
}
|
|
|
|
.tax-filter-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 36px;
|
|
gap: 10px;
|
|
padding: 0 26px;
|
|
}
|
|
|
|
.tax-chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 78px;
|
|
height: 36px;
|
|
padding: 0 0 0 10px;
|
|
background: #F5F5F5;
|
|
border-radius: 6px;
|
|
}
|
|
.transfer-filter { display:flex; align-items:center; gap:10px; padding:30px 26px 0; }
|
|
|
|
.icon-24.adjust {
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url('../images/ico_setting.svg') no-repeat center center;
|
|
}
|
|
|
|
.icon-24.download {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 6px;
|
|
background: #F4F8FF url('../images/ico_download.svg') no-repeat center center;
|
|
}
|
|
|
|
.tax-month {
|
|
padding-left: 26px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-600);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.tax-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tax-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 26px;
|
|
}
|
|
|
|
.tax-left {
|
|
width: 100%;
|
|
max-width: 338px;
|
|
}
|
|
|
|
.tax-name {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.tax-sub {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-777777);
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.tax-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.tax-amount {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.tax-dot {
|
|
display: inline-block;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: #3E6AFC;
|
|
}
|
|
|
|
/* arrow rotation utility used in expanded sections */
|
|
.ic20.rot-180 { transform: rotate(180deg); }
|
|
|
|
/* VAT success (83) */
|
|
.success-subtitle {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
line-height: 1.4;
|
|
color: var(--color-111111);
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.success-note {
|
|
position: relative;
|
|
width: 100%;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
text-align: left;
|
|
padding-left: 25px;
|
|
top: -20px;
|
|
}
|
|
|
|
.success-note.dot::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 10px;
|
|
right: 0;
|
|
font-size: 4px;
|
|
}
|
|
|
|
/* VAT failure (84) */
|
|
.error-icon {
|
|
position: relative;
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
|
|
.error-icon::before {
|
|
content: '';
|
|
display: block;
|
|
width: 90px;
|
|
height: 90px;
|
|
background: url("../images/ico_error.svg") no-repeat center center / contain;
|
|
}
|
|
|
|
.result-text.align-left {
|
|
text-align: left;
|
|
}
|
|
|
|
.position_label {
|
|
position: relative;
|
|
padding-left: 45px;
|
|
}
|
|
|
|
.position_label span:first-child {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
|
|
/* 부가서비스_신용카드 ARS 결제 (91) */
|
|
.ars-list .date-header {
|
|
padding-left: 26px;
|
|
}
|
|
|
|
.ars-list .transaction-item {
|
|
border-bottom: 1px solid #EAEAEA;
|
|
}
|
|
|
|
.ars-list .transaction-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.ars-list .transaction-title {
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
/* 부가서비스_신용카드 ARS 결제_결제 신청 (92) */
|
|
.seg-buttons .btn-white {
|
|
border: 1px solid #999;
|
|
}
|
|
|
|
/* SMS 결제 통보 (94) - resend label color */
|
|
.resend-label {
|
|
color: #3E6AFC;
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
/* 알림톡 결제 통보 (97) */
|
|
.status-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.status-label.success {
|
|
color: #3E6AFC;
|
|
}
|
|
|
|
.status-label.fail {
|
|
color: #999999;
|
|
}
|
|
|
|
.summary-section.no-border { /* ensure same as 94 page */
|
|
border-bottom: 0;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
/* 95_SMS 결제 통보_재발송 bottomsheet */
|
|
.resend-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 0 0 26px;
|
|
}
|
|
|
|
.resend-row {
|
|
font-size: var(--fs-17);
|
|
line-height: 1.5;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.resend-box {
|
|
background: #F5F5F5;
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
margin-bottom: 26px;
|
|
}
|
|
|
|
.resend-text {
|
|
margin: 0;
|
|
font-size: var(--fs-16);
|
|
line-height: 1.5;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.keyword-tag.flex-1 {
|
|
flex: 1;
|
|
white-space: wrap;
|
|
height: auto !important;
|
|
padding: 5px 0;
|
|
text-align: center;
|
|
line-height: 150% !important;
|
|
}
|
|
|
|
/* 98 알림톡 결제 통보_서비스 설정_토스트포함 */
|
|
.service-settings {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.service-notice {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.service-notice div {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
line-height: 1.35;
|
|
color: #636E72;
|
|
}
|
|
|
|
.service-merchant {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.service-title {
|
|
width: 105px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.service-select {
|
|
flex: 1;
|
|
position: relative;
|
|
}
|
|
|
|
.service-select select {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 12px;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.service-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
}
|
|
|
|
.service-section {
|
|
border-bottom: 1px solid #EAEAEA;
|
|
}
|
|
|
|
.service-section:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.service-section-title {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 16px;
|
|
border-bottom: 1px solid #EAEAEA;
|
|
}
|
|
|
|
.service-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 13px 0;
|
|
}
|
|
|
|
.service-row.align-right {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 20px 0 12px 0;
|
|
}
|
|
|
|
.service-row.align-right span {
|
|
font-size: var(--fs-15);
|
|
color: var(--color-666666);
|
|
font-weight: var(--fw-500);
|
|
}
|
|
|
|
.service-row span {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.switch-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 53px;
|
|
}
|
|
|
|
/* 100 링크결제_결제신청_1단계 */
|
|
.seg-buttons.grid-3 {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.link-apply-date {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 101 링크결제_결제신청_2단계 */
|
|
.link-content input[type="text"] {
|
|
width: 100%;
|
|
}
|
|
|
|
.gap-10 {
|
|
gap: 10px;
|
|
}
|
|
|
|
/* 102 링크결제_발송내역_미리보기 */
|
|
.preview-body {
|
|
width: 338px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 37px;
|
|
padding-top: 60px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.attention-icon {
|
|
position: relative;
|
|
width: 90px;
|
|
height: 90px;
|
|
}
|
|
|
|
.preview-title {
|
|
width: 290px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: var(--fw-700);
|
|
line-height: 1.4;
|
|
color: var(--color-111111);
|
|
margin: 0;
|
|
}
|
|
|
|
.preview-result {
|
|
position: relative;
|
|
width: 100%;
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
padding: 26px;
|
|
max-height: 326px;
|
|
overflow-y: auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.preview-text {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
margin: 0;
|
|
}
|
|
|
|
.preview-text b {
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.preview-scroll {
|
|
position: absolute;
|
|
right: 8px;
|
|
top: 26px;
|
|
width: 8px;
|
|
height: 244px;
|
|
border-radius: 10px;
|
|
background: #CCCCCC;
|
|
}
|
|
|
|
/* 103 지급대행 - account summary block */
|
|
.account-frame .credit-summary {
|
|
margin-top: 26px;
|
|
}
|
|
.account-frame .credit-summary .row {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 0;
|
|
text-align: left;
|
|
font-size: var(--fs-16);
|
|
margin-bottom: 6px;
|
|
}
|
|
.account-frame .credit-summary .row > span {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
|
|
.account-frame .credit-summary .row.horizontal > span {
|
|
width: inherit;
|
|
}
|
|
|
|
.account-frame .credit-summary .label {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-111111);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.account-frame .credit-summary .amount22 {
|
|
font-size: var(--fs-28);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.account-frame .credit-summary .amount20 {
|
|
font-size: var(--fs-22);
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.transaction-details.gap-0 {
|
|
gap: 0;
|
|
}
|
|
/* 104 지급대행_상세 */
|
|
.pay-top {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding: 30px 10px 0;
|
|
}
|
|
.pay-top .num-amount .amount {
|
|
font-size: var(--fs-28);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
.pay-top .num-store,
|
|
.pay-top .num-day {
|
|
font-size: var(--fs-17);
|
|
font-weight: 600;
|
|
color: #999999;
|
|
}
|
|
.receipt-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-top: 26px;
|
|
}
|
|
.receipt-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 2px 10px;
|
|
border-radius: 6px;
|
|
background: #F4F8FF;
|
|
}
|
|
.detail-divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
margin: 26px -26px;
|
|
}
|
|
.pay-detail {
|
|
padding: 0 10px;
|
|
}
|
|
.pay-detail .detail-title {
|
|
font-size: var(--fs-17);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
padding-bottom: 16px;
|
|
}
|
|
/* 105 알림톡 결제 통보 -> 지급대행 신청 폼 */
|
|
.billing-form.gap-16 {
|
|
gap: 16px;
|
|
}
|
|
|
|
.billing-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.billing-label {
|
|
width: 90px;
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.billing-field {
|
|
flex: 1;
|
|
}
|
|
|
|
.billing-inline {
|
|
display: grid;
|
|
grid-template-columns: 1fr 40px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.calendar-btn {
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.notice-bar.style-note {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.notice-bar.style-note > span {
|
|
position: relative;
|
|
display: block;
|
|
padding-left: 13px;
|
|
}
|
|
.notice-bar.style-note > span > span {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
/* 107 자금이체_결과조회 */
|
|
/* Uses existing .summary-extend, .summary-amount-list styles from 106 */
|
|
/* 108 안면인증_리스트 */
|
|
.face-list {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.face-item {
|
|
display:flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap:10px;
|
|
padding:16px 0;
|
|
border-bottom:1px solid #EAEAEA;
|
|
}
|
|
|
|
.face-item:last-child {
|
|
border-bottom:0;
|
|
}
|
|
|
|
.face-txt {
|
|
flex:1;
|
|
min-width:0;
|
|
}
|
|
|
|
.face-id {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.face-msg {
|
|
font-size: var(--fs-14);
|
|
color: #777777;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.face-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.face-status .dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.face-status .dot.blue {
|
|
background:#3E6AFC;
|
|
}
|
|
|
|
.face-status .dot.gray {
|
|
background:#C6C6C6;
|
|
}
|
|
|
|
.face-status .status {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: #3E6AFC;
|
|
}
|
|
|
|
.face-status .status.fail { color: #999999; }
|
|
|
|
/* 108 안면인증_리스트 - 두줄 말줄임 처리 */
|
|
.face-list .transaction-details span:last-child {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: normal;
|
|
}
|
|
/* 109 정산대행_정산대행관리_정산 데이터 펼침 */
|
|
/* Uses existing .summary-extend, .summary-amount-list, .notice-tabs, .tab36 styles */
|
|
.account-frame .credit-summary .row.horizontal {
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
|
|
/* 110 정산대행 관리_상세 - 상태 변경 이력 */
|
|
.sd-history {
|
|
padding: 0 10px;
|
|
}
|
|
.sd-history-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
height: 70px;
|
|
}
|
|
.sd-history-item .left { width: 180px; }
|
|
.sd-history-item .right { width: 140px; text-align: right; }
|
|
.sd-history-item .name {
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: var(--color-2D3436);
|
|
}
|
|
.sd-history-item .time {
|
|
font-size: 14px;
|
|
color: var(--color-777777);
|
|
}
|
|
.sd-history-item .reason {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.detail-title.summary-amount.divTop {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* 111 bottomsheet 정산 동의/거절 */
|
|
.agree-section {
|
|
padding: 0 0 0 0;
|
|
}
|
|
.agree-desc {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.agree-desc::before {
|
|
content: '●';
|
|
display: block;
|
|
position: absolute;
|
|
left: 26px;
|
|
right: 0;
|
|
font-size: 5px;
|
|
}
|
|
|
|
.agree-desc.pb10 {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.agree-desc.pb16 {
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.sheet-divider {
|
|
width: 100%;
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
display: block;
|
|
}
|
|
|
|
.sheet-divider.padded {
|
|
margin: 10px 0;
|
|
background: #EAEAEA;
|
|
}
|
|
|
|
.agree-radio-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding-top: 16px;
|
|
padding-bottom: 26px;
|
|
}
|
|
|
|
/* 113 정산매장 */
|
|
.store-section {
|
|
padding: 30px 10px 0 10px;
|
|
}
|
|
|
|
.store-filter {
|
|
width: 100%;
|
|
}
|
|
|
|
.store-input {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
}
|
|
|
|
.store-input input {
|
|
flex: 1;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
color: var(--color-2D3436);
|
|
height: 38px;
|
|
}
|
|
|
|
/* 114 공지사항 */
|
|
.notice114 {
|
|
padding: 16px 10px 20px 10px;
|
|
}
|
|
|
|
.notice-controls {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.notice-search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.notice-search .ic16.search {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 12px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url('../images/ico_search_16.svg') no-repeat center center;
|
|
}
|
|
|
|
.notice-search input {
|
|
flex: 1;
|
|
height: 40px;
|
|
padding-left: 40px;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.notice-filter {
|
|
display: flex;
|
|
height: 40px;
|
|
}
|
|
|
|
.notice-list-114 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.notice-row-114 {
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid var(--color-EaEaEa);
|
|
}
|
|
|
|
.notice-row-114:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.notice-txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.notice-title-114 {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
white-space: normal;
|
|
}
|
|
|
|
.notice-meta-114 {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-999999);
|
|
}
|
|
|
|
.store-list {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 26px;
|
|
}
|
|
|
|
.store-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.store-line {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.store-line .dot {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 7px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
background: var(--color-3E6AFC);
|
|
}
|
|
|
|
.store-name {
|
|
padding-left: 20px;
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.store-detail {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
font-size: var(--fs-14);
|
|
padding-left: 20px;
|
|
color: var(--color-777777);
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.store-detail .line {
|
|
padding-left: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
.store-detail .line::before {
|
|
content: "";
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 9px;
|
|
width: 3px;
|
|
height: 3px;
|
|
border-radius: 3px;
|
|
background: var(--color-777777);
|
|
|
|
}
|
|
|
|
.notice-meta-114 .blue, .notice-title-114 .blue {
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
|
|
/* 115 자주 묻는 질문 */
|
|
.faq-section {
|
|
padding: 20px 10px 16px 10px;
|
|
}
|
|
.faq-search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 40px;
|
|
padding: 0;
|
|
}
|
|
.faq-search .ic16.search {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 12px;
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url('../images/ico_search_16.svg') no-repeat center center;
|
|
}
|
|
.faq-search input {
|
|
flex: 1;
|
|
height: 40px;
|
|
padding-left: 40px;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
}
|
|
.faq-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
.faq-filter .text {
|
|
font-size: 15px;
|
|
color: var(--color-2D3436);
|
|
}
|
|
.faq-filter .ic20.arrow-down {
|
|
width: 20px;
|
|
height: 20px;
|
|
background: url('../images/select_arrow.svg') no-repeat center center;
|
|
}
|
|
.faq-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-top: 16px;
|
|
}
|
|
.faq-row {
|
|
display: flex;
|
|
align-items: stretch;
|
|
padding: 20px 0;
|
|
border-bottom: 1px solid var(--color-EaEaEa);
|
|
}
|
|
.faq-row:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
.faq-txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
.faq-title {
|
|
font-size: var(--fs-17);
|
|
color: var(--color-2D3436);
|
|
}
|
|
.faq-tag {
|
|
font-size: var(--fs-14);
|
|
color: var(--color-3E6AFC);
|
|
}
|
|
|
|
/* 116 자주 묻는 질문_상세 */
|
|
.faq-detail {
|
|
padding: 20px 10px 30px 10px;
|
|
}
|
|
|
|
.faq-detail__title {
|
|
font-size: var(--fs-20);
|
|
font-weight: var(--fw-600);
|
|
line-height: 1.4;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.faq-detail__divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.faq-detail__body {
|
|
white-space: pre-line;
|
|
font-size: var(--fs-17);
|
|
line-height: 1.4;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
/* 117 1:1 문의 */
|
|
.inq117 {
|
|
padding: 20px 10px 16px 10px;
|
|
}
|
|
|
|
.inq-merchant {
|
|
display: grid;
|
|
grid-template-columns: 80px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.inq-title {
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-input {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.inq-input input {
|
|
flex: 1;
|
|
border: 0;
|
|
background: transparent;
|
|
font-size: 15px;
|
|
color: var(--color-2D3436);
|
|
height: 38px;
|
|
}
|
|
|
|
.inq-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
height: 40px;
|
|
padding: 0 12px;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.inq-filter .text {
|
|
font-size: 15px;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
padding-top: 20px;
|
|
}
|
|
|
|
.inq-item { height: 84px; }
|
|
.inq-line {
|
|
position: relative;
|
|
left: 0;
|
|
top: 20px;
|
|
}
|
|
|
|
.inq-line .dot {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8px;
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.inq-line .dot.blue { background: #3E6AFC; }
|
|
.inq-line .dot.gray { background: #C6C6C6; }
|
|
.inq-title-text {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: 0;
|
|
font-size: var(--fs-16);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-meta {
|
|
position: absolute;
|
|
left: 18px;
|
|
top: 27px;
|
|
font-size: 14px;
|
|
color: var(--color-999999);
|
|
}
|
|
|
|
.inq-meta span {
|
|
display: inline-block;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.sai {
|
|
color: var(--color-d6d6d6);
|
|
}
|
|
|
|
/* 118 1:1 문의_상세 */
|
|
.inq-detail {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.inq-detail__head {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.inq-detail__row {
|
|
display: grid;
|
|
grid-template-columns: 60px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.inq-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 24px;
|
|
padding: 0 16px;
|
|
border-radius: 30px;
|
|
background: #F4F8FF;
|
|
font-size: var(--fs-14);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-head-text {
|
|
font-size: var(--fs-15);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-head-text.bold {
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.inq-detail__divider {
|
|
height: 1px;
|
|
background: #EAEAEA;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.inq-detail__section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
.inq-detail__section-title {
|
|
font-size: var(--fs-18);
|
|
font-weight: var(--fw-700);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-detail__body {
|
|
white-space: pre-line;
|
|
font-size: var(--fs-17);
|
|
line-height: 1.4;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-detail__box {
|
|
background: #F5F5F5;
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
}
|
|
|
|
.inq-detail__kv {
|
|
display: grid;
|
|
/* grid-template-columns: 60px 1fr; */
|
|
align-items: start;
|
|
gap: 0;
|
|
}
|
|
|
|
.inq-detail__kv + .inq-detail__kv {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.inq-detail__kv .k {
|
|
font-weight: var(--fw-700);
|
|
}
|
|
|
|
.inq-detail__kv .k,
|
|
.inq-detail__kv .v {
|
|
font-size: var(--fs-16);
|
|
line-height: 1.4;
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
/* 119 1:1 문의하기 */
|
|
.inq-form {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.inq-field {
|
|
display: grid;
|
|
grid-template-columns: 90px 1fr;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding-bottom: 16px;
|
|
}
|
|
|
|
.inq-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-label .red, .inq-text-label .red { color: var(--color-EB5757); }
|
|
.inq-control input,
|
|
.inq-control select {
|
|
width: 100%;
|
|
text-align: right;
|
|
}
|
|
|
|
.inq-text {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
padding: 0 0 30px 0;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.inq-text-label {
|
|
font-size: var(--fs-16);
|
|
font-weight: var(--fw-500);
|
|
color: var(--color-2D3436);
|
|
}
|
|
|
|
.inq-text-body textarea {
|
|
width: 100%;
|
|
min-height: 150px;
|
|
border: 1px solid #D9D9D9;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
box-sizing: border-box;
|
|
} |