164 lines
3.8 KiB
CSS
164 lines
3.8 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;
|
|
}
|
|
}
|