css 및 추가 이미지

2025-09-08 15:03:43 +09:00
parent 32c61ae545
commit 63599e41b4
6 changed files with 624 additions and 7 deletions
--- a/src/shared/ui/assets/css/style.css
+++ b/src/shared/ui/assets/css/style.css
@@ -792,9 +792,10 @@ textarea {
 }

 textarea:focus {
-    border-color: var(--input-border-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);
+    box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2); */
 }

 textarea[disabled] {
@@ -986,16 +987,16 @@ button:disabled {

 .check_box {
    position: relative;
-    padding-left: 25px;
+    padding-left: 30px;
    padding-right: 30px;
-    font-size: var(--fs-14);
+    font-size: var(--fs-17);
    font-weight: 400;
 }

 .check_box label {
    position: absolute;
    left: 0;
-    top: 1px;
+    top: 3px;
    cursor: pointer;
 }

@@ -1063,8 +1064,8 @@ input[type="checkbox"] {
 input[type="radio"] + label {
    position: absolute;
    display: block;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
    background: url("../images/radio_off.svg") no-repeat 0 0;
 }

@@ -2142,6 +2143,18 @@ input[type="radio"] {
    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;
@@ -5148,4 +5161,560 @@ ul.txn-amount-detail li span:last-child {

 .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;
 }
--- a/src/shared/ui/assets/images/ico_search_16.svg
+++ b/src/shared/ui/assets/images/ico_search_16.svg
@@ -0,0 +1,11 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2631_1197)">
+<circle cx="6.3" cy="6.3" r="5.55" stroke="#2D3436" stroke-width="1.5"/>
+<path d="M14.6293 15.5303C14.9222 15.8232 15.3971 15.8232 15.69 15.5303C15.9829 15.2374 15.9829 14.7626 15.69 14.4697L15.1597 15L14.6293 15.5303ZM10.1597 10L9.62934 10.5303L14.6293 15.5303L15.1597 15L15.69 14.4697L10.69 9.46967L10.1597 10Z" fill="#2D3436"/>
+</g>
+<defs>
+<clipPath id="clip0_2631_1197">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/shared/ui/assets/images/pay_21.svg
+++ b/src/shared/ui/assets/images/pay_21.svg
--- a/src/shared/ui/assets/images/pay_22.svg
+++ b/src/shared/ui/assets/images/pay_22.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#0517A1"/>
+<path d="M8.4238 10.6253C8.06564 10.6253 7.73218 10.7516 7.48826 10.9826L7.40489 11.0612V9.2666H6.44928V12.3336C6.44928 13.4782 7.13473 14.1883 8.23855 14.1883C9.34236 14.1883 10.1004 13.4412 10.1004 12.4106C10.1004 11.3801 9.39485 10.6253 8.4238 10.6253ZM8.27097 13.3164C7.76923 13.3164 7.36012 12.9082 7.36012 12.4091C7.36012 11.91 7.76923 11.5002 8.27097 11.5002C8.7727 11.5002 9.18181 11.9085 9.18181 12.4091C9.18181 12.9097 8.7727 13.3164 8.27097 13.3164Z" fill="white"/>
+<path d="M4.85758 9.2666L2.96642 11.4556V9.2666H2V14.0759H2.96642V11.9054L4.89617 14.0759H6.13893L4.00385 11.6712L6.08181 9.2666H4.85758Z" fill="white"/>
+<path d="M22 10.7377H20.9363L19.7121 12.1796V9.2666H18.7565V14.0774H19.7121V12.634L20.9363 14.0774H22L20.5843 12.406L22 10.7377Z" fill="white"/>
+<path d="M16.8839 10.625C16.2941 10.625 15.9298 10.9007 15.7553 11.0933V10.739H14.8322V14.0771H15.7878V12.2594C15.7878 11.805 16.1042 11.4876 16.501 11.4876C16.8978 11.4876 17.2158 11.805 17.2158 12.2594V14.0771H18.1714V11.9729C18.1714 11.1919 17.6033 10.625 16.8823 10.625H16.8839Z" fill="white"/>
+<path d="M12.3914 10.625C11.3246 10.625 10.5496 11.3752 10.5496 12.4104C10.5496 13.4455 11.2644 14.1896 12.2478 14.1896C13.2312 14.1896 13.3207 13.6843 13.3238 13.6797L13.3779 13.6042V14.0771H14.247V12.4104C14.247 11.3767 13.4674 10.625 12.3914 10.625ZM12.4207 13.3161C11.919 13.3161 11.5099 12.9079 11.5099 12.4088C11.5099 11.9097 11.919 11.5 12.4207 11.5C12.9224 11.5 13.3316 11.9082 13.3316 12.4088C13.3316 12.9095 12.9224 13.3161 12.4207 13.3161Z" fill="white"/>
+</svg>
--- a/src/shared/ui/assets/images/pay_23.svg
+++ b/src/shared/ui/assets/images/pay_23.svg
@@ -0,0 +1,7 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#3E6AFC"/>
+<path d="M7 8C7 7.44772 7.44772 7 8 7H16C16.5523 7 17 7.44772 17 8V13C13.0948 13 10.9052 13 7 13V8Z" fill="#E3EFFF"/>
+<path d="M7.48452 12.2676C7.5709 12.1031 7.74139 12 7.92722 12H16.0728C16.2586 12 16.4291 12.1031 16.5155 12.2676L18.6155 16.2676C18.7903 16.6005 18.5488 17 18.1728 17H5.82722C5.45119 17 5.20973 16.6005 5.38452 16.2676L7.48452 12.2676Z" fill="#E3EFFF"/>
+<path d="M9 9H12.5" stroke="#3E6AFC" stroke-linecap="round"/>
+<path d="M7 13L17 13" stroke="#3E6AFC" stroke-linecap="round"/>
+</svg>
--- a/src/shared/ui/assets/images/pay_24.svg
+++ b/src/shared/ui/assets/images/pay_24.svg
@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2647_7386)">
+<circle cx="12" cy="12" r="12" fill="#3E6AFC"/>
+<rect x="4" y="7" width="16" height="10" rx="2" fill="white"/>
+<path d="M6.56543 13.333L6.62695 12.3896L5.84082 12.916L5.51953 12.3623L6.36719 11.9453L5.51953 11.5215L5.84082 10.9678L6.62695 11.4941L6.56543 10.5508H7.20801L7.14648 11.4941L7.93262 10.9678L8.25391 11.5215L7.40625 11.9453L8.25391 12.3623L7.93262 12.916L7.14648 12.3896L7.20801 13.333H6.56543ZM9.98887 13.333L10.0504 12.3896L9.26426 12.916L8.94297 12.3623L9.79063 11.9453L8.94297 11.5215L9.26426 10.9678L10.0504 11.4941L9.98887 10.5508H10.6314L10.5699 11.4941L11.3561 10.9678L11.6773 11.5215L10.8297 11.9453L11.6773 12.3623L11.3561 12.916L10.5699 12.3896L10.6314 13.333H9.98887ZM13.4123 13.333L13.4738 12.3896L12.6877 12.916L12.3664 12.3623L13.2141 11.9453L12.3664 11.5215L12.6877 10.9678L13.4738 11.4941L13.4123 10.5508H14.0549L13.9934 11.4941L14.7795 10.9678L15.1008 11.5215L14.2531 11.9453L15.1008 12.3623L14.7795 12.916L13.9934 12.3896L14.0549 13.333H13.4123ZM16.8357 13.333L16.8973 12.3896L16.1111 12.916L15.7898 12.3623L16.6375 11.9453L15.7898 11.5215L16.1111 10.9678L16.8973 11.4941L16.8357 10.5508H17.4783L17.4168 11.4941L18.2029 10.9678L18.5242 11.5215L17.6766 11.9453L18.5242 12.3623L18.2029 12.916L17.4168 12.3896L17.4783 13.333H16.8357Z" fill="#3E6AFC"/>
+</g>
+<defs>
+<clipPath id="clip0_2647_7386">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>