diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index dac6497..de8a4ae 100644 --- 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; } \ No newline at end of file diff --git a/src/shared/ui/assets/images/ico_search_16.svg b/src/shared/ui/assets/images/ico_search_16.svg new file mode 100644 index 0000000..e5dc1e9 --- /dev/null +++ b/src/shared/ui/assets/images/ico_search_16.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/pay_21.svg b/src/shared/ui/assets/images/pay_21.svg new file mode 100644 index 0000000..25cf43b --- /dev/null +++ b/src/shared/ui/assets/images/pay_21.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/shared/ui/assets/images/pay_22.svg b/src/shared/ui/assets/images/pay_22.svg new file mode 100644 index 0000000..8ac914a --- /dev/null +++ b/src/shared/ui/assets/images/pay_22.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/shared/ui/assets/images/pay_23.svg b/src/shared/ui/assets/images/pay_23.svg new file mode 100644 index 0000000..6ccfa1c --- /dev/null +++ b/src/shared/ui/assets/images/pay_23.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/shared/ui/assets/images/pay_24.svg b/src/shared/ui/assets/images/pay_24.svg new file mode 100644 index 0000000..2f8e612 --- /dev/null +++ b/src/shared/ui/assets/images/pay_24.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + +