486 lines
10 KiB
CSS
486 lines
10 KiB
CSS
/* =========================================
|
|
MYPAGE 공통: Gate 카드 (비밀번호 재확인)
|
|
적용 범위: body.is-mypage 내부만
|
|
========================================= */
|
|
|
|
/* ✅ 래퍼: 가운데 정렬 + 여백 */
|
|
.is-mypage .mypage-gate-wrap{
|
|
display:flex;
|
|
justify-content:center;
|
|
padding: 6px 0 18px;
|
|
}
|
|
|
|
/* ✅ 카드 */
|
|
.is-mypage .mypage-gate-card{
|
|
width:100%;
|
|
max-width: 680px;
|
|
background:#fff;
|
|
border:1px solid rgba(16,24,40,.08);
|
|
border-radius: 18px;
|
|
box-shadow: 0 10px 30px rgba(16,24,40,.08);
|
|
overflow:hidden;
|
|
margin-top: 50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
/* ✅ 바디 */
|
|
.is-mypage .mypage-gate-body{
|
|
padding: 28px;
|
|
}
|
|
|
|
/* ✅ 타이틀/설명 */
|
|
.is-mypage .mypage-gate-title{
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
letter-spacing: -.2px;
|
|
margin: 0 0 6px;
|
|
color: #101828;
|
|
}
|
|
.is-mypage .mypage-gate-desc{
|
|
margin: 0 0 14px;
|
|
color:#667085;
|
|
font-size: 14px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
/* ✅ 안내 박스 */
|
|
.is-mypage .mypage-gate-note{
|
|
margin: 0 0 18px;
|
|
padding: 12px 14px;
|
|
border-radius: 14px;
|
|
background: #f8fafc;
|
|
border: 1px solid rgba(16,24,40,.06);
|
|
color:#344054;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* ✅ 한 줄 입력 + 버튼 */
|
|
.is-mypage .mypage-gate-row{
|
|
display:flex;
|
|
gap: 10px;
|
|
align-items:center;
|
|
}
|
|
|
|
.is-mypage .mypage-gate-input{
|
|
flex: 1;
|
|
height: 46px;
|
|
border-radius: 12px;
|
|
border: 1px solid #d0d5dd;
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.is-mypage .mypage-gate-input:focus{
|
|
border-color: #ff7a00;
|
|
box-shadow: 0 0 0 4px rgba(255,122,0,.14);
|
|
}
|
|
|
|
/* ✅ 버튼 */
|
|
.is-mypage .mypage-gate-btn{
|
|
height: 46px;
|
|
padding: 0 18px;
|
|
border-radius: 12px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* primary 버튼 */
|
|
.is-mypage .btn-mypage-primary{
|
|
background: linear-gradient(135deg, #ff7a00, #ff3d00);
|
|
border: none;
|
|
color: #fff;
|
|
}
|
|
.is-mypage .btn-mypage-primary:hover{
|
|
filter: brightness(.98);
|
|
color:#fff;
|
|
}
|
|
|
|
.is-mypage .mypage-gate-card .mypage-gate-input,
|
|
.is-mypage .mypage-gate-card input.form-control {
|
|
height: 52px;
|
|
min-height: 52px;
|
|
padding: 0 16px;
|
|
font-size: 16px; /* ✅ 모바일에서 얇아보이는/줌 이슈 방지 */
|
|
line-height: 52px; /* ✅ 세로 가운데 정렬 확실 */
|
|
border-radius: 14px;
|
|
border: 1px solid #d0d5dd;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.is-mypage .mypage-gate-card .mypage-gate-input:focus,
|
|
.is-mypage .mypage-gate-card input.form-control:focus {
|
|
border-color: #ff7a00;
|
|
box-shadow: 0 0 0 4px rgba(255,122,0,.15);
|
|
}
|
|
|
|
/* textarea 같은 멀티라인이 섞일 가능성 대비(선택) */
|
|
.is-mypage .mypage-gate-card textarea.form-control {
|
|
line-height: 1.4;
|
|
padding: 12px 16px;
|
|
height: auto;
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* ✅ 모바일: 버튼 아래로 */
|
|
@media (max-width: 575.98px){
|
|
.is-mypage .mypage-gate-card{
|
|
margin-top: 0px;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.is-mypage .mypage-gate-body{
|
|
padding: 20px;
|
|
}
|
|
.is-mypage .mypage-gate-row{
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 10px;
|
|
}
|
|
.is-mypage .mypage-gate-btn{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ================================
|
|
MYPAGE Renew (Info hub)
|
|
================================ */
|
|
|
|
.is-mypage .mypage-hero{
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #ffffff, #fbfcff);
|
|
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.06);
|
|
}
|
|
|
|
.is-mypage .mypage-hero__inner{
|
|
display: grid;
|
|
grid-template-columns: 1.2fr .8fr;
|
|
gap: 18px;
|
|
padding: 18px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.is-mypage .mypage-hero__kicker{
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: .08em;
|
|
color: #667085;
|
|
}
|
|
|
|
.is-mypage .mypage-hero__title{
|
|
margin-top: 6px;
|
|
font-size: 22px;
|
|
font-weight: 900;
|
|
line-height: 1.2;
|
|
color: #101828;
|
|
}
|
|
|
|
.is-mypage .mypage-hero__desc{
|
|
margin-top: 8px;
|
|
color: #667085;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.is-mypage .mypage-hero__right{
|
|
border-radius: 14px;
|
|
border: 1px solid #eef0f4;
|
|
background: #fff;
|
|
padding: 14px 14px 12px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* 상태 chip */
|
|
.is-mypage .mypage-chip{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
border-radius: 999px;
|
|
font-weight: 800;
|
|
font-size: 12px;
|
|
border: 1px solid #e4e7ec;
|
|
background: #f9fafb;
|
|
color: #344054;
|
|
width: fit-content;
|
|
}
|
|
.is-mypage .mypage-chip.is-ok{
|
|
border-color: rgba(16,185,129,.35);
|
|
background: rgba(16,185,129,.10);
|
|
color: #067647;
|
|
}
|
|
.is-mypage .mypage-chip.is-warn{
|
|
border-color: rgba(245,158,11,.35);
|
|
background: rgba(245,158,11,.10);
|
|
color: #92400e;
|
|
}
|
|
|
|
/* 인증 상태 표 */
|
|
.is-mypage .mypage-reauth{
|
|
border-radius: 12px;
|
|
background: #f8fafc;
|
|
border: 1px solid #eef0f4;
|
|
padding: 10px 12px;
|
|
}
|
|
.is-mypage .mypage-reauth__row{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 4px 0;
|
|
font-size: 12px;
|
|
}
|
|
.is-mypage .mypage-reauth__label{ color: #667085; font-weight: 700; }
|
|
.is-mypage .mypage-reauth__value{ color: #101828; font-weight: 800; }
|
|
|
|
/* 우측 버튼 */
|
|
.is-mypage .mypage-hero__actions .btn{
|
|
width: 100%;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
/* 카드 그리드 */
|
|
.is-mypage .mypage-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.is-mypage .mypage-card{
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
padding: 14px;
|
|
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
|
|
display: grid;
|
|
grid-template-columns: 42px 1fr 16px;
|
|
align-items: center;
|
|
gap: 12px;
|
|
text-decoration: none;
|
|
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
|
|
}
|
|
|
|
.is-mypage .mypage-card:hover{
|
|
transform: translateY(-1px);
|
|
border-color: rgba(255,122,0,.35);
|
|
box-shadow: 0 14px 30px rgba(16, 24, 40, 0.08);
|
|
}
|
|
|
|
.is-mypage .mypage-card__icon{
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 14px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: radial-gradient(600px 180px at 30% 30%, rgba(255,140,0,.18), transparent 55%),
|
|
radial-gradient(520px 160px at 70% 30%, rgba(94,92,230,.14), transparent 55%),
|
|
#f8fafc;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.is-mypage .mypage-card__title{
|
|
font-weight: 900;
|
|
color: #101828;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
}
|
|
.is-mypage .mypage-card__desc{
|
|
margin-top: 4px;
|
|
color: #667085;
|
|
font-size: 12.5px;
|
|
line-height: 1.45;
|
|
}
|
|
.is-mypage .mypage-card__meta{
|
|
margin-top: 8px;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: #98a2b3;
|
|
}
|
|
.is-mypage .mypage-card__arrow{
|
|
color: #98a2b3;
|
|
font-size: 20px;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 하단 안내 */
|
|
.is-mypage .mypage-note{
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
padding: 14px 16px;
|
|
}
|
|
.is-mypage .mypage-note__title{
|
|
font-weight: 900;
|
|
color: #101828;
|
|
margin-bottom: 8px;
|
|
}
|
|
.is-mypage .mypage-note__list{
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
color: #475467;
|
|
font-size: 13px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
/* 반응형 */
|
|
@media (max-width: 991.98px){
|
|
.is-mypage .mypage-hero__inner{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
@media (max-width: 575.98px){
|
|
.is-mypage .mypage-grid{
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.is-mypage .mypage-hero__inner{
|
|
padding: 14px;
|
|
}
|
|
}
|
|
|
|
/* 카드가 button일 때 기본 버튼 스타일 제거 */
|
|
.is-mypage .mypage-card--btn{
|
|
width: 100%;
|
|
text-align: left;
|
|
border: 1px solid #eef0f4;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
}
|
|
.is-mypage .mypage-card--btn:focus{
|
|
outline: none;
|
|
}
|
|
.is-mypage .mypage-card--btn:focus-visible{
|
|
border-color: rgba(255,122,0,.55);
|
|
box-shadow: 0 0 0 4px rgba(255,122,0,.14);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* =========================
|
|
MYPAGE: info_renew 섹션 카드 UI
|
|
========================= */
|
|
.is-mypage .mypage-section { margin-bottom: 18px; }
|
|
|
|
.is-mypage .mypage-card{
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
box-shadow: 0 10px 30px rgba(16,24,40,.06);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.is-mypage .mypage-card__head{
|
|
display:flex;
|
|
align-items:flex-start;
|
|
justify-content:space-between;
|
|
gap: 12px;
|
|
padding: 18px 18px 14px;
|
|
border-bottom: 1px solid #f2f4f7;
|
|
}
|
|
|
|
.is-mypage .mypage-card__title{
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.is-mypage .mypage-card__desc{
|
|
font-size: 13px;
|
|
color: #667085;
|
|
margin: 0;
|
|
}
|
|
|
|
.is-mypage .mypage-card__body{
|
|
padding: 16px 18px 18px;
|
|
}
|
|
|
|
.is-mypage .mypage-btn{
|
|
height: 44px;
|
|
padding: 0 14px;
|
|
border-radius: 12px;
|
|
font-weight: 800;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.is-mypage .mypage-kv{
|
|
display:flex;
|
|
gap: 14px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.is-mypage .mypage-kv__item{
|
|
flex: 1 1 220px;
|
|
border: 1px solid #f2f4f7;
|
|
border-radius: 14px;
|
|
padding: 12px 14px;
|
|
background: #fcfcfd;
|
|
}
|
|
|
|
.is-mypage .mypage-kv__label{
|
|
font-size: 12px;
|
|
color: #667085;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.is-mypage .mypage-kv__value{
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #101828;
|
|
}
|
|
|
|
.is-mypage .mypage-badge{
|
|
display:inline-flex;
|
|
align-items:center;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
border-radius: 999px;
|
|
border: 1px solid #e4e7ec;
|
|
background: #fff;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
color: #344054;
|
|
}
|
|
|
|
.is-mypage .mypage-badge--ok{
|
|
border-color: rgba(255,122,0,.35);
|
|
background: rgba(255,122,0,.10);
|
|
color: #b54708;
|
|
}
|
|
|
|
.is-mypage .mypage-help{
|
|
border: 1px solid #eef0f4;
|
|
border-radius: 14px;
|
|
background: #f8fafc;
|
|
padding: 12px 14px;
|
|
color: #344054;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.is-mypage .mypage-help ul{
|
|
margin: 0;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.is-mypage .mypage-help li{
|
|
margin: 3px 0;
|
|
}
|
|
|
|
/* 모바일에서도 버튼/정렬 깔끔하게 */
|
|
@media (max-width: 575.98px){
|
|
.is-mypage .mypage-card__head{
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.is-mypage .mypage-btn{
|
|
width: 100%;
|
|
}
|
|
}
|
|
|