/***************************** 공통 사용 *****************************/
* {
  overflow-wrap: break-word; 
  word-break: keep-all;  
}
 
/* btn-group */
.btn-group {display: flex; gap: 10px;}
.btn-group.full {flex:1;}
.btn-group.full .btn {flex: 1;}

.btn-group.grid {display: grid; width: 100%;}
.btn-group.col2 {grid-template-columns: repeat(2, 1fr);}
.btn-group.col3 {grid-template-columns: repeat(3, 1fr);}

/* btn */
.btn {display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 9px 20px; font-size: 14px; font-weight: 400; color: #1D1D1D; background-color: #fff; border: 1px solid #000;}
.btn.black {background-color: #1D1D1D; border-color: #1D1D1D; color: #fff;}

.btn.lg {min-height: 56px; font-size: 16px; font-weight: 700;}
.btn.sm {min-width: 80px; min-height: 32px; font-size: 14px; padding: 4px 12px;}
.btn-text {color: #000; font-size: 14px; font-weight: 500; line-height: 150%;}

/* etc */
.align-end {align-items: flex-end !important;}
.color-black {color: #000 !important;}
.color-red5 {color: var(--red-50);}
.color-grey7 {color: var(--color-70);}
.font-14 {font-size: 14px; font-weight: 400;}
.text-md {font-size: 14px; font-weight: 400; line-height: 150%; color: #555;}

/* text-list */
.text-list.bullet {display: flex; flex-direction: column; gap: 4px;}
.text-list.bullet li {position: relative; padding-left: 11px; font-size: 14px; font-weight: 400; line-height: 150%; color: #555; margin: 0;}
.text-list.bullet li::before {position: absolute; left: 0px; top: 9px; content: ''; display: block; width: 3px; height: 3px; background: #E4E4E4; border-radius: 100%;}


/***************************** onespec *****************************/
.onespec-main {width: 100%; display: flex; flex-direction: column;}
.onespec-main .osp-img {background-color: #000;}
.onespec-main .osp-img img {margin: 0 auto;}
.onespec-main .osp-content {display: flex; flex-direction: column; padding: 80px 20px 0;}
.onespec-main .item-title {display: flex; flex-direction: column;}
.onespec-main .item-title .logo-onespec {margin-bottom: 24px;}
i.logo-onespec {display: block; width: 100%; height: 16px; background: url(../../../../mobile/images/onespec/text-onespec.svg) no-repeat left top / auto 100%; }
.onespec-main .item-title .title {font-size: 24px; font-weight: 700; line-height: 150%;}
.onespec-main .item-title .text {margin-top: 8px; color: #555; font-size: 15px;  font-weight: 500; line-height: 150%;}

.onespec-main .item-user {margin-top: 60px; display: flex; flex-direction: column; padding-top: 60px; border-top: 1px solid #C6C6C6;}
.onespec-main .item-user .name {margin-bottom: 12px; font-size: 20px; font-weight: 700; line-height: 150%; color: #1D1D1D;}
.onespec-main .item-user .text {font-size: 14px; line-height: 150%; color: #555;}
.onespec-main .item-user .btn-group {margin-top: 40px;}
.onespec-main .item-etc {margin-top: 24px; color: #8E8E8E; font-size: 14px; font-weight: 500; line-height: 150%;}

/* tab */
.ps-boxtab.tab-onespec {margin: 1.875rem 1.25rem;}

/* list - prd-onespec */
.prd-onespec .ps-prd-item .desc .name-box {display: flex; justify-content: space-between; gap: 8px; margin-bottom: 0px;}
.prd-onespec .ps-prd-item .desc .name {flex: 1 1 auto; min-width: 0; padding: 0; margin: 0;}
.prd-onespec .ps-prd-item .desc .gender {flex:none; padding: 0; margin: 0; line-height: 0; display: flex;}
.prd-onespec .ps-prd-item .desc .prd-number {color: #7E8591; font-size: 12px; font-weight: 500; line-height: 150%; margin-bottom: 8px;}
.prd-onespec .ps-prd-item .desc .size {font-size: 12px; font-weight: 500; margin-bottom: 8px;}
.prd-onespec .ps-prd-item .desc .price {display: flex; align-items: center; gap: 8px;}
.prd-onespec .ps-prd-item .desc .price .amount {margin-top: 0 !important;}
.prd-onespec .ps-prd-item .desc .price .base-price {font-size: 14px; color: #C6C6C6;}

.icon-gender {display: inline-block; width: 18px; height: 18px; background-position: center !important; background-size: cover !important;}
.icon-man {background: url(../../../../mobile/images/onespec/icon-man.svg);}
.icon-woman {background: url(../../../../mobile/images/onespec/icon-woman.svg);}

/* prd-detail-page */
.prd-detail-page .top-sec .buy-area .prd-number {display: block; font-size: 1.3rem; margin-top: 6px;}
.prd-color-btn-wrap.scroll {overflow-x: auto; white-space: nowrap; scrollbar-width: none;}
.prd-color-btn-wrap.scroll::-webkit-scrollbar {display: none;}
.prd-color-btn-wrap.scroll button {cursor: pointer; width: 4rem; height: 4rem; flex-shrink: 0;}

.prd-subtitle {margin-top: 40px; color: #1D1D1D; font-size: 16px; font-weight: 600; line-height: 150%;}
.prd-subbox {margin-top: 8px;}

/* table */
.table-size-wrap {padding: 20px 12px; background: #F7F7F7;}
.table-size {width: 100%;}
.table-size th,
.table-size td {padding: 4px; text-align: center; font-weight: 400; font-size: 14px; line-height: 150%; color: #555;}
.table-size td {font-weight: 600; color: #1D1D1D;}

/* modal */
.ps-layer-full {z-index: 1101;}
.ps-footer-button .btn-group {width: 100%; gap: 0;}

/* form-field */
.form-field {display: flex;}
.form-field .label {font-size: 16px; line-height: 150%; font-weight: 600; color: #1D1D1D;}
.form-field dl {display: flex;}

.form-field.column {flex-direction: column; gap: 28px;}
.form-field.column dl {gap: 8px; display: flex; flex-direction: column;}

.ipt-field {display: flex; gap: 10px;}
.ipt-field.column {flex-direction: column;}

.ipt-img {width: 100%;}
.ipt-img img {object-fit: cover;}


/***************************** AS수선 + onespec 공통사용 *****************************/
.textarea-wrap {position: relative; width: 100%; border: 1px solid #ccc;}
.textarea-wrap textarea::placeholder {font-size: inherit;}
.textarea-wrap textarea {width: 100%; height: calc(100% - 32px); padding: 0.625rem 0.625rem 0; border: 0; resize: none;}
.textarea-wrap .char-count {position: absolute; bottom: 8px; right: 8px; font-size: 12px; color: #999;}
.textarea-wrap .char-count .current {color: #666;}


.ipt-file-upload {display: flex; flex-direction: column;}
.ipt-file-upload .file-img {display: flex; gap: 10px; width: 100%;}
.ipt-file-upload .box-img {position: relative; width: calc(50% - 5px); aspect-ratio: 1 / 1; margin-bottom: 16px; border: 1px solid #CCC; overflow: hidden;}
.ipt-file-upload .box-img img {width: 100%; height: 100%; object-fit: cover;}
.ipt-file-upload .box-img .btn-delete {position: absolute; left: 0px; top: 0px; z-index: 1; width: 24px; height: 24px; background: #000; border: none; cursor: pointer;}
.ipt-file-upload .box-img .btn-delete::before,
.ipt-file-upload .box-img .btn-delete::after {content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1px; background-color: #fff;}
.ipt-file-upload .box-img .btn-delete::before {transform: translate(-50%, -50%) rotate(45deg);}
.ipt-file-upload .box-img .btn-delete::after {transform: translate(-50%, -50%) rotate(-45deg);}
.ipt-file-upload .file-btn {display: flex; align-items: center; gap: 10px;}
.ipt-file-upload .file-btn .btn {flex:1;}
.ipt-file-upload .btn-camera,
.ipt-file-upload .btn-attach {display: flex; gap: 6px; align-items: center;}
.ipt-file-upload .btn-attach::after {content: ''; display: block; width: 20px; height: 20px; background: url(../../../../mobile/images/onespec/icon-gallery.svg) no-repeat center / cover;}
.ipt-file-upload .btn-camera::after {content: ''; display: block; width: 20px; height: 20px; background: url(../../../../mobile/images/onespec/icon-camera.svg) no-repeat center / cover;}
.ipt-file-upload .upload-guide {margin-top: 10px; font-size: 14px; color: #888;}

/***************************** AS수선 *****************************/
.mypage-top > .mypage-top--tit > .text-md {margin-top: -0.450rem; padding: 0 1.25rem;} 
.ps-cont-head.type-bd-btm {display: flex; padding-bottom: 0.688rem; border-bottom: 0.125rem solid #1d1d1d;}
.ps-cont-head.type-bd-btm .box-nt-point {margin-left: auto;}
.box-nt-point {position: relative;}
.box-nt-point .noti-point {display: block; position: absolute; top: 0; left: -0.313rem; width: 4px; height: 4px; background: #FA0A00;}
.box-nt-point .text {display: block; font-size: 0.813rem; font-weight: 400;}

/***************************** login *****************************/
.security-code {margin-top: 20px; padding: 16px; background-color: rgba(243, 243, 243, 0.6); border: 1px solid #ececec;}
.security-code .btn {flex:none; width: 100px; padding: 9px 12px;}
.security-code .code {display: flex; gap: 10px;}
.security-code .code .img-code {flex:1 1 auto; background-color: #fff; border: 1px solid #ccc;}
.security-code .code .img-code img {margin: 0 auto;}
.btn-refresh::before {content: ''; display: block; width: 16px; height: 16px; background: url(../../../../mobile/images/onespec/icon-refresh.svg) no-repeat center / cover; margin-right: 4px;}
.security-code .code-input {display: flex; gap: 10px; margin-top: 10px;}
.security-code .code-input .ps-input {flex:1 1 auto;}

/***************************** join *****************************/
.signUp-security-code {width: 100%;}
.signUp-security-code .btn {flex:none; width: 100px; padding: 9px 12px;}
.signUp-security-code .btn-refresh {border-color: var(--color-40);}
.signUp-security-code .code {display: flex; gap: 10px;}
.signUp-security-code .code .img-code {flex:1 1 auto; background-color: #fff; border: 1px solid #ccc;}
.signUp-security-code .code .img-code img {margin: 0 auto;}
.btn-refresh::before {content: ''; display: block; width: 16px; height: 16px; background: url(../../../../mobile/images/onespec/icon-refresh.svg) no-repeat center / cover; margin-right: 4px;}
.signUp-security-code .code-input {display: flex; gap: 10px; margin-top: 10px;}
.signUp-security-code .code-input .signUp_form_item_input {flex:1 1 auto;}