345 lines
7.2 KiB
CSS
345 lines
7.2 KiB
CSS
/* =========================================================
|
|
mypage_renew.css
|
|
- 마이페이지 내정보(renew) 상단 히어로(좌/우) + 카드 UI
|
|
- 범위: .mypage-info-page 내부만 적용
|
|
========================================================= */
|
|
|
|
/* countdown row */
|
|
.mypage-info-page .mypage-reauth__one{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:10px;
|
|
}
|
|
|
|
.mypage-info-page #reauthCountdown{
|
|
font-size:14px;
|
|
letter-spacing:0.5px;
|
|
}
|
|
|
|
/* ---------------------------
|
|
레이아웃: 타이틀 100% + 아래 좌/우
|
|
--------------------------- */
|
|
|
|
/* 기존 테마가 flex를 써도 강제로 stack 구조로 */
|
|
.mypage-info-page .mypage-hero .mypage-hero__inner.mypage-hero__inner--stack{
|
|
display:block;
|
|
}
|
|
|
|
/* 헤더(ACCOUNT SETTINGS / 내 정보 관리) */
|
|
.mypage-info-page .mypage-hero .mypage-hero__head{
|
|
width:100%;
|
|
margin-bottom:12px;
|
|
}
|
|
|
|
/* 본문(좌/우 2컬럼) */
|
|
.mypage-info-page .mypage-hero .mypage-hero__body{
|
|
display:grid;
|
|
grid-template-columns: 1fr 360px; /* 오른쪽 카드 폭 */
|
|
gap:24px;
|
|
align-items:start;
|
|
}
|
|
|
|
/* 반응형: 모바일은 1컬럼 */
|
|
@media (max-width: 980px){
|
|
.mypage-info-page .mypage-hero .mypage-hero__body{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ---------------------------
|
|
왼쪽 정보 카드(성명/이메일/휴대폰/출금계좌 등)
|
|
--------------------------- */
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me{
|
|
margin-top:0px;
|
|
padding:14px;
|
|
border-radius:14px;
|
|
background:#f7f8fb;
|
|
border:1px solid #e5e7eb;
|
|
box-shadow: 0 10px 24px rgba(16,24,40,.08);
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
gap:12px;
|
|
padding:10px 12px;
|
|
border-radius:12px;
|
|
background:#ffffff;
|
|
border:1px solid rgba(0,0,0,.04);
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row + .mypage-hero__me-row{
|
|
margin-top:8px;
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row:hover{
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 16px rgba(16,24,40,.06);
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row .k{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
gap:8px;
|
|
font-size:12px;
|
|
font-weight:800;
|
|
color:#667085;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row .k::before{
|
|
content:'';
|
|
width:8px;
|
|
height:8px;
|
|
border-radius:999px;
|
|
background:#2563eb;
|
|
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row .v{
|
|
font-size:14px;
|
|
font-weight:900;
|
|
color:#101828;
|
|
letter-spacing:.2px;
|
|
text-align:right;
|
|
word-break:break-all;
|
|
}
|
|
|
|
/* ---------------------------
|
|
오른쪽 카드(설명 + 잔여시간 + 버튼)
|
|
--------------------------- */
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__right{
|
|
height:auto;
|
|
min-height:0;
|
|
align-self:flex-start;
|
|
|
|
background:#ffffff;
|
|
border:1px solid #e5e7eb;
|
|
border-radius:16px;
|
|
padding:18px;
|
|
box-shadow: 0 10px 24px rgba(16,24,40,.08);
|
|
|
|
display:flex;
|
|
flex-direction:column;
|
|
gap:14px;
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__desc{
|
|
margin:0;
|
|
color:#475467;
|
|
font-size:13px;
|
|
line-height:1.55;
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-reauth{
|
|
background:#f7f8fb;
|
|
border:1px solid rgba(0,0,0,.06);
|
|
border-radius:14px;
|
|
padding:14px;
|
|
}
|
|
|
|
.mypage-info-page .mypage-hero .mypage-hero__actions .btn{
|
|
width:100%;
|
|
border-radius:14px;
|
|
padding:12px 14px;
|
|
}
|
|
|
|
/* 모바일 미세 조정 */
|
|
@media (max-width: 480px){
|
|
.mypage-info-page .mypage-hero .mypage-hero__me{
|
|
padding:12px;
|
|
border-radius:12px;
|
|
}
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row{
|
|
padding:10px 10px;
|
|
}
|
|
.mypage-info-page .mypage-hero .mypage-hero__me-row .v{
|
|
font-size:13px;
|
|
}
|
|
}
|
|
|
|
/* =========================================
|
|
Withdraw Dialog (mypage style)
|
|
========================================= */
|
|
|
|
/* dim */
|
|
.ui-dialog.ui-dialog--mypage .ui-dialog__backdrop{
|
|
background: rgba(16,24,40,.45);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* panel */
|
|
.ui-dialog__panel--mypage{
|
|
width: min(640px, calc(100vw - 32px));
|
|
border-radius: 18px;
|
|
background: #ffffff;
|
|
border: 1px solid #e5e7eb;
|
|
box-shadow: 0 18px 50px rgba(16,24,40,.18);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* head */
|
|
.ui-dialog__head--mypage{
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:space-between;
|
|
padding: 16px 18px;
|
|
background: #ffffff;
|
|
border-bottom: 1px solid rgba(0,0,0,.06);
|
|
}
|
|
|
|
.ui-dialog__title--mypage{
|
|
font-size: 15px;
|
|
font-weight: 900;
|
|
color: #101828;
|
|
letter-spacing: .2px;
|
|
}
|
|
|
|
.ui-dialog__close--mypage{
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0,0,0,.06);
|
|
background: #f7f8fb;
|
|
color: #101828;
|
|
font-weight: 900;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* body */
|
|
.ui-dialog__body--mypage{
|
|
padding: 16px 18px 18px;
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* card blocks */
|
|
.wd-card{
|
|
border-radius: 16px;
|
|
border: 1px solid rgba(0,0,0,.06);
|
|
background: #f7f8fb;
|
|
padding: 14px;
|
|
}
|
|
|
|
.wd-card + .wd-card{ margin-top: 12px; }
|
|
|
|
.wd-card--form{
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* guide list */
|
|
.wd-guide{
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: #475467;
|
|
font-size: 13px;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.wd-guide li + li{ margin-top: 6px; }
|
|
|
|
/* agree */
|
|
.wd-agree{
|
|
display:flex;
|
|
align-items:center;
|
|
gap:10px;
|
|
margin-top: 12px;
|
|
font-weight: 800;
|
|
color: #101828;
|
|
}
|
|
.wd-agree input{
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: #2563eb;
|
|
}
|
|
|
|
/* fields */
|
|
.wd-field + .wd-field{ margin-top: 12px; }
|
|
|
|
.wd-label{
|
|
display:block;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: #667085;
|
|
margin-bottom: 6px;
|
|
}
|
|
.wd-label small{
|
|
font-weight: 800;
|
|
color: #98a2b3;
|
|
}
|
|
|
|
.wd-input{
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 14px;
|
|
border: 1px solid rgba(0,0,0,.10);
|
|
background: #ffffff;
|
|
padding: 0 12px;
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #101828;
|
|
outline: none;
|
|
}
|
|
|
|
.wd-input:focus{
|
|
border-color: rgba(37,99,235,.55);
|
|
box-shadow: 0 0 0 4px rgba(37,99,235,.12);
|
|
}
|
|
|
|
/* error msg */
|
|
.wd-msg{
|
|
margin-top: 12px;
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
background: #fff1f2;
|
|
border: 1px solid rgba(225,29,72,.18);
|
|
color: #9f1239;
|
|
font-weight: 900;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* footer buttons */
|
|
.ui-dialog__foot--mypage{
|
|
display:flex;
|
|
gap:10px;
|
|
padding: 14px 18px 18px;
|
|
background: #ffffff;
|
|
border-top: 1px solid rgba(0,0,0,.06);
|
|
}
|
|
|
|
.wd-btn{
|
|
flex: 1;
|
|
height: 44px;
|
|
border-radius: 14px;
|
|
font-weight: 900;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.wd-btn--ghost{
|
|
background: #ffffff;
|
|
border: 1px solid rgba(0,0,0,.10);
|
|
color: #101828;
|
|
}
|
|
|
|
.wd-btn--danger{
|
|
background: #f97316; /* 사이트 메인 오렌지 쓰면 여기 바꿔도 됨 */
|
|
border: 1px solid rgba(0,0,0,.06);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.wd-btn:disabled{
|
|
opacity: .6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* mobile */
|
|
@media (max-width: 480px){
|
|
.ui-dialog__panel--mypage{ border-radius: 16px; }
|
|
.ui-dialog__body--mypage{ padding: 14px; }
|
|
.ui-dialog__foot--mypage{ padding: 12px 14px 14px; }
|
|
}
|