/* ============================================================
   마이페이지 리뉴얼 통합 스타일
   대상 페이지:
     - /mypage/index.htm            (메인 홈)
     - /mypage/profile/payment/index.htm (결제내역)
   ============================================================ */


/* ============================================================
   [공통] 컨테이너 / 상단 탭 / 브레드크럼 / 배경 영역
   ============================================================ */

/* ---------- 컨테이너 ---------- */
#container.mph-container { width:1280px; }

.mph-wrap { width:1280px; margin:0 auto; padding:0 32px 60px; color:#222; box-sizing:border-box; }
.mph-wrap * { box-sizing:border-box; }

/* ---------- 상단 탭 (뷰포트 전체 폭) ---------- */
.mph-tabs { display:flex; align-items:center; justify-content:center; gap:39px; height:57px; border-bottom:1px solid #e5e7eb; margin:20px 0 0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%); }
.mph-tabs a,
.mph-tabs a:link,
.mph-tabs a:visited { display:inline-flex; align-items:flex-end; height:55px; padding:0 5px 11px; font-size:14px; font-weight:700; color:#343434; text-decoration:none; position:relative; }
.mph-tabs a.on,
.mph-tabs a.on:link,
.mph-tabs a.on:visited { color:#FF55DC; }
.mph-tabs a.on:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#FF55DC; }
.mph-tabs a:hover { text-decoration:none; }

/* ---------- 브레드크럼 ---------- */
.mph-crumb { text-align:right; font-size:12px; font-weight:400; line-height:100%; color:#919191; padding:12px 4px 0; }
.mph-crumb strong { font-weight:400; color:#919191; }

/* ---------- 탭 하단 콘텐츠 영역 (뷰포트 전체 폭 배경) ---------- */
.mph-body {  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:calc(50vw - 50%); padding-right:calc(50vw - 50%); padding-top:20px; padding-bottom:20px; }
.mph-body.mph-body--plain { background:transparent; }


/* ============================================================
   [메인 홈] /mypage/index.htm 전용
   ============================================================ */

/* ---------- 카드 공통 ---------- */
.mph-card {  border-radius:16px; padding:28px 32px; margin-bottom:14px;      border: 1px solid #e5e7eb;}

/* ---------- 회원정보 카드 ---------- */
.mph-user { display:flex; align-items:center; justify-content:space-between; height:133px; padding:16px; background:#fff;  margin:24px 0; }
.mph-user .left { display:flex; align-items:center; }
.mph-user .name { font-size:24px; font-weight:700; }
.mph-user .name em { font-style:normal; font-weight:700;  }
.mph-user .badge { display:inline-flex; align-items:center; justify-content:center; height:19px; margin-left:10px; padding:3px 10px; border-radius:4px; background:#0FC08C; color:#FFFFFF; font-size:11px; font-weight:500; line-height:100%; vertical-align:middle; white-space:nowrap; }
.mph-user .badge.smart  { background:#824DFF; }
.mph-user .badge.multi  { background:#FF98DD; }
.mph-user .badge.board  { background:#FFC229; }
.mph-user .badge.canvas { background:#0FC08C; }
.mph-user .modify { color:#4193FF; font-size:13px; font-weight:400; line-height:100%; text-decoration:none; }

/* ---------- 포인트 카드 ---------- */
.mph-point { display:flex; align-items:center; justify-content:space-between; height:80px; padding:20px;  border-radius:14px; }
.mph-point .label { font-size:15px; font-weight:700; line-height:100%; color:#343434; }
.mph-point > div,
.mph-point .mph-point-link { display:flex; align-items:center; }
.mph-point .mph-point-link,
.mph-point .mph-point-link:link,
.mph-point .mph-point-link:visited,
.mph-point .mph-point-link:hover { color:inherit; text-decoration:none; cursor:pointer; }
.mph-point .value { display:inline-block; margin-left:10px; font-size:22px; font-weight:700; line-height:100%; color:#4193FF; }
.mph-point .value .unit { margin-left:4px; }
.mph-point .guide { display:inline-flex; align-items:center; justify-content:center; width:140px; height:40px; background:#4193FF; border-radius:20px; color:#FFFFFF; font-size:14px; font-weight:700; line-height:100%; text-decoration:none; }

/* ---------- 만료 임박 안내 ---------- */
.mph-expire-alert { display:flex; align-items:center; gap:10px; width:1216px; padding:12px 18px; background:rgba(255,247,171,0.25); border-radius:10px; margin-top:10px; }
.mph-expire-alert i { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:16px; color:#FFD75E; }
.mph-expire-alert span { font-family:'Inter','Pretendard','Noto Sans KR',sans-serif; font-size:13px; font-weight:500; line-height:1.4; color:#FF8D41; }

/* ---------- 섹션 헤더 ---------- */
.mph-sec-head { display:flex; align-items:center; justify-content:space-between; margin:24px 0 14px; }
.mph-sec-head h3 { font-size:17px; font-weight:700; line-height:100%; color:#343434; margin:0; }
.mph-sec-head h3 .new { display:inline-flex; align-items:center; justify-content:center; width:37px; height:19px; margin-left:6px; padding:3px 8px; background:#EEEEEE; border-radius:4px; color:#7A7A7A; font-size:11px; font-weight:500; vertical-align:2px; }
.mph-sec-head .more { color:#6b7280; font-size:13px; text-decoration:none; }

/* ---------- 회원제 5종 그리드 ---------- */
.mph-mships { display:grid; grid-template-columns:repeat(5, 1fr); gap:16px;  height:140px; }
/* 월구독 카드에 스택 레이어 있으면 → 3번째(month) 셀만 스택 폭(12px)만큼 확장
   (fr은 calc()에서 다른 단위와 못 섞이므로 % 기반 계산으로 대체)
   전체 폭 100% = 5×col + 4×16(gap) + 12(month 확장) → col = (100% - 76px) / 5 */
.mph-mships.has-month-stack {
    --mph-col: calc((100% - 76px) / 5);
    grid-template-columns: var(--mph-col) var(--mph-col) calc(var(--mph-col) + 12px) var(--mph-col) var(--mph-col);
}
.mph-mship { display:flex; flex-direction:column; gap:7px; height:140px; padding:16px 13px; background:#FFFFFF; border:1px solid #E7E7E7; border-radius:12px; color:#222; text-decoration:none; }
.mph-mship.active {  border:2px solid #3B8FE3; }
.mph-mship .head { display:flex; align-items:center; gap:6px; }
.mph-mship .state { display:inline-flex; justify-content:center; padding:4px 9px 2px; border-radius:12px; font-size:10.5px; font-weight:900; line-height:100%; }
.mph-mship .state.on { background:#4193FF; color:#FFFFFF; }
.mph-mship .state.off { height:17px; padding:4px 9px 2px; background:#F5F5F5; border-radius:100px; color:#939393; }
.mph-mship .name { font-size:15px; font-weight:700; line-height:100%; color:#939393; }
.mph-mship.active .name { font-weight:900; color:#1E1E1E; }
.mph-mship .desc { font-size:12px; font-weight:400; line-height:100%; color:#B7B7B7; }
.mph-mship .period { font-size:12px; font-weight:400; line-height:100%; color:#747474; }
.mph-mship .dday { font-size:15px; font-weight:700; line-height:100%; color:#4193FF; }
.mph-mship .apply { display:inline-flex; align-items:center; justify-content:center; align-self:flex-start; width:77px; height:28px; margin-top:auto; padding:7px 16px; background:#F6D9FF; border-radius:8px; color:#CE40F7; font-size:12px; font-weight:700; line-height:100%; }
.mph-mship:hover { text-decoration:none; }

/* 월구독 카드 (상세) */
.mph-mship-month { padding:16px 16px 12px; }
.mph-mship-month .head { gap:6px; }
.mph-mship-month .state.on { background:#4193FF; }
.mph-mship-month .name { font-size:15px; font-weight:700; line-height:18px; color:#1E1E1E; }
.mph-mship-month .mph-mm-info { display:block; font-size:11.5px; font-weight:400; line-height:14px; color:#3D3D3D; }
.mph-mship-month .mph-mm-actions { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:4px; }
.mph-mship-month .mph-mm-btn-change,
.mph-mship-month .mph-mm-btn-change:link,
.mph-mship-month .mph-mm-btn-change:visited { display:inline-flex; align-items:center; justify-content:center; padding:5px 10px; background:#FFFFFF; border:1px solid #E5E5E5; border-radius:6px; color:#4193FF; font-size:10.5px; font-weight:700; line-height:13px; text-decoration:none; }
.mph-mship-month .mph-mm-btn-cancel,
.mph-mship-month .mph-mm-btn-cancel:link,
.mph-mship-month .mph-mm-btn-cancel:visited { color:#7F7F7F; font-size:10.5px; font-weight:400; line-height:13px; text-align:right; text-decoration:none; }

/* 월구독 2개 이상일 때 카드 스택 시각효과 (box-shadow로 뒤쪽 카드 흉내) */
.mph-mship-month.has-stack {
    position:relative;
    /* 확장된 12px 여유 공간에 스택 shadow를 배치 → 프론트 카드 콘텐츠 폭은 이웃과 동일 */
    margin-right:12px;
    box-shadow:
        5px 6px 0 0 #FFFFFF,
        5px 6px 0 1px rgba(59,143,227,0.6),
        10px 12px 0 0 #FFFFFF,
        10px 12px 0 1px rgba(59,143,227,0.6);
}
.mph-mm-stack-badge {
    position:absolute; top:-12px; right:-2px; z-index:2;
    display:inline-flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0;
    background:#3B8FE3; color:#FFFFFF; font-size:11px; font-weight:700;
    border-radius:50%; box-shadow:0 2px 6px rgba(0,0,0,.15);
    line-height:1;
    cursor:pointer;
    transition:width .15s ease, border-radius .15s ease, padding .15s ease;
}
.mph-mm-stack-badge .cnt { display:inline; }
.mph-mm-stack-badge .more { display:none; }
.mph-mship-month.has-stack:hover .mph-mm-stack-badge {
    width:auto; padding:0 12px; border-radius:12px;
}
.mph-mship-month.has-stack:hover .mph-mm-stack-badge .cnt { display:none; }
.mph-mship-month.has-stack:hover .mph-mm-stack-badge .more { display:inline; }

/* ---------- 바로가기 4종 ---------- */
.mph-quick { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; width:1216px; }
.mph-quick a { display:flex; align-items:center; gap:14px; width:100%; height:86px; padding:18px; background:#FFFFFF; border:1px solid #E5E5E5; border-radius:14px; color:#222; text-decoration:none; }
.mph-quick a:hover { text-decoration:none; }
.mph-quick .icon { flex-shrink:0; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:#F3F3F3; border-radius:50%; color:#4b5563; }
.mph-quick .icon svg { width:22px; height:22px; }
.mph-quick .icon i { font-size:24px; line-height:1; color:#3B8FE3; }
.mph-quick .txt { display:flex; flex-direction:column; }
.mph-quick .lb { display:block; height:16px; font-size:13px; font-weight:400; line-height:16px; color:#1E1E1E; }
.mph-quick .cnt { display:block; height:22px; margin-top:2px; font-size:18px; font-weight:700; line-height:22px; color:#1E1E1E; }
.mph-quick .cnt .u { margin-left:2px; font-weight:500; color:#1E1E1E; font-size: 14px }

/* ---------- 최근 다운로드한 자료 ---------- */
.mph-recent { display:grid; grid-template-columns:repeat(5, 1fr); gap:18px;  height:296px; }
.mph-recent .edudata_data { position:relative; margin:0; display:block; width:100%; height:296px; }
.mph-recent .edudata_dataall { display:flex; flex-direction:column; width:100%; height:100%; border:1px solid #E5E5E5; border-radius:8px; background:#FFFFFF; overflow:hidden; }
.mph-recent .edudata_dataall:hover { border-color:var(--color-point); }
.mph-recent .edudata_data:hover .edudata_datatlt { color:var(--color-point) !important; text-decoration:none; }
.mph-recent .edudata_data:hover .edudata_dataimg { border-color:var(--color-point) !important; }
.mph-recent .edudata_datatlt { display:flex; align-items:center; justify-content:center; width:100%; height:63px; padding:0 14px; font-size:15px; font-weight:500; color:#1E1E1E; text-align:center; line-height:1.4; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mph-recent .edudata_dataimg { display:flex; align-items:center; justify-content:center; width:auto; flex:1; margin:0 -1px -1px !important; overflow:hidden; background:#F3F3F3; color:#B7B7B7; font-size:36px; text-decoration:none; border:1px solid #E0E0E0 !important; border-radius:8px !important; }
.mph-recent .edudata_dataimg img { width:100%; height:100%; object-fit:contain; display:block; }
.mph-recent-item--empty { pointer-events:none; opacity:0.5; }
.mph-recent-empty { padding:60px 20px; text-align:center; font-size:14px; color:#9ca3af; background:#fafafa; border:1px dashed #e5e7eb; border-radius:14px; }


/* ============================================================
   [결제내역] /mypage/profile/payment/index.htm 전용
   ============================================================ */

/* ---------- 페이지 타이틀 + 브레드크럼 ---------- */
.mpp-header { display:flex; align-items:flex-end; justify-content:space-between; margin-top:8px; }
.mpp-title { font-size:26px; font-weight:900; line-height:100%; color:#333333; margin:0; }

/* ---------- 서브탭 (2개, 좌우 절반) ---------- */
.mpp-subtabs { display:grid; grid-template-columns:1fr 1fr; gap:0; width:1216px; height:44px; margin-top:20px; background:#fff; }
.mpp-subtabs a,
.mpp-subtabs a:link,
.mpp-subtabs a:visited { display:flex; align-items:center; justify-content:center; height:44px; font-size:15px; font-weight:500; color:#999999; text-decoration:none; background:#F5F5F5; border:1px solid #DDDDDD; }
.mpp-subtabs a.on { padding:13px 0; background:#F4F9FF; border:1.5px solid #3B8FE3; color:#333333; font-size:15px; font-weight:900; line-height:100%; }
.mpp-subtabs a:hover { text-decoration:none; }

/* ---------- 기간 필터 ---------- */
.mpp-filter { display:flex; align-items:center; justify-content:space-between; width:1216px; height:62px; padding:14px 18px; margin-top:20px; background:#FFFFFF; border:1px solid #E3E5EB; border-radius:12px; }
.mpp-period { display:flex; gap:8px; width:348px; height:32px; }
.mpp-period a.mpp-pill,
.mpp-period a.mpp-pill:link,
.mpp-period a.mpp-pill:visited { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:8px 18px; background:#FFFFFF; border:1px solid #E3E5EB; border-radius:8px; color:#333338; font-size:13px; font-weight:400; line-height:100%; text-decoration:none; }
.mpp-period a.mpp-pill.on,
.mpp-period a.mpp-pill.on:link,
.mpp-period a.mpp-pill.on:visited { background:#EBF5FE; border:1px solid #3B8FE3; color:#3B8FE3; font-weight:700; }
.mpp-pill:hover { text-decoration:none; }

.mpp-daterange { display:flex; align-items:center; gap:8px; }
.mpp-date-wrap { position:relative; display:inline-block; }
.mpp-date { width:120px; height:36px; padding:0 32px 0 12px; border:1px solid #E0E0E0; border-radius:8px; font-size:13px; color:#343434; background:#fff; }
.mpp-date-icon { position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:#7F7F7F; font-size:14px; }
.mpp-daterange-sep { color:#7F7F7F; }
.mpp-search-btn,
.mpp-search-btn:link,
.mpp-search-btn:visited { display:inline-flex; align-items:center; justify-content:center; width:68px; height:34px; padding:9px 22px; margin-left:6px; background:#3B8FE3; border-radius:18px; color:#FFFFFF; font-size:13px; font-weight:700; line-height:100%; text-decoration:none; }
.mpp-search-btn:hover { text-decoration:none; color:#FFFFFF; }

/* ---------- 안내문 + 계획서 버튼 ---------- */
.mpp-info { display:flex; align-items:center; justify-content:space-between; width:1216px; height:29px; margin-top:20px; }
.mpp-info-text { font-size:13px; color:#8C9199; margin:0; }
.mpp-plans { display:flex; gap:8px; height:29px; }
.mpp-plans a.mpp-plan,
.mpp-plans a.mpp-plan:link,
.mpp-plans a.mpp-plan:visited { display:inline-flex; align-items:center; justify-content:center; height:29px; padding:7px 14px; background:#FFFFFF; border:1px solid #3B8FE3; border-radius:8px; color:#3B8FE3; font-size:13px; font-weight:700; line-height:100%; text-decoration:none; }
.mpp-plans a.mpp-plan-alt,
.mpp-plans a.mpp-plan-alt:link,
.mpp-plans a.mpp-plan-alt:visited { background:#FFFFFF; border-color:#CCCCCC; color:#7F7F7F; }
.mpp-plan:hover { text-decoration:none; }

/* ---------- 테이블 ---------- */
.mpp-table-wrap { margin-top:14px; background:#fff; border:1px solid #E5E5E5; border-radius:10px; }
.mpp-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.mpp-table thead th { height:42px; padding:0 12px; font-size:14px; font-weight:700; color:#343434; background:#F5F5F5; text-align:center; border-bottom:1px solid #E5E5E5; }
.mpp-table thead th:first-child { border-top-left-radius:10px; }
.mpp-table thead th:last-child { border-top-right-radius:10px; }
.mpp-table thead th:nth-child(2) { text-align:left; }
.mpp-table tbody td { height:42px; padding:0 12px; font-size:14px; color:#343434; text-align:center; background:#FFFFFF; border-top:1px solid #EEEEEE; vertical-align:middle; }
.mpp-table tbody tr:last-child td:first-child { border-bottom-left-radius:10px; }
.mpp-table tbody tr:last-child td:last-child { border-bottom-right-radius:10px; }

.mpp-empty { padding:60px 20px !important; font-weight:600; color:#9CA3AF; font-size:14px; }

.mpp-td-title { position:relative; text-align:left !important; }
.mpp-td-title .mpp-title-text { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 결제번호 툴팁 */
.mpp-tooltip { display:none; position:fixed; z-index:20; transform:translateY(-50%); align-items:center; gap:6px; padding:5px 6px 5px 9px; background:#FFFFFF; border:1px solid #E0E0E0; border-radius:4px; color:#333333; font-size:11px; white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.mpp-td-title:hover .mpp-tooltip { display:inline-flex; }
.mpp-tooltip-label { color:#555555; font-weight:600; }
.mpp-tooltip-value { color:#333333; font-weight:500; letter-spacing:0.02em; }
.mpp-copy-btn { padding:2px 8px; background:#FFFFFF; border:1px solid #DDDDDD; border-radius:3px; color:#333333; font-size:10px; font-weight:500; cursor:pointer; }
.mpp-copy-btn:hover { background:#F5F5F5; }
.mpp-td-money { font-weight:700; color:#444444; }
.mpp-td-receipt { text-align:center; }

.mpp-title-link { color:#343434; text-decoration:underline; }
.mpp-tag-event { display:inline-block; padding:3px 6px; margin-right:6px; background:#CC0000; border-radius:4px; color:#fff; font-size:10px; font-weight:700; }

.mpp-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.mpp-mini { display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; background:#F3F3F3; border-radius:4px; color:#525252; font-size:11px; font-weight:500; text-decoration:none; }
.mpp-mini:hover { text-decoration:none; }
.mpp-mini-red { background:#FEE2E2; color:#B91C1C; }

/* ---------- 상태 배지 ---------- */
.mpp-state { display:inline-flex; align-items:center; justify-content:center; min-width:64px; height:24px; padding:0 10px; border-radius:12px; font-size:12px; font-weight:600; }
.mpp-state-done   { background:#E8F0FE; color:#2563EB; }
.mpp-state-wait   { background:#F3F4F6; color:#6B7280; }
.mpp-state-cancel { background:#FEE2E2; color:#B91C1C; }
.mpp-state-none   { background:#F3F4F6; color:#9CA3AF; }

/* ---------- 영수증 [출력] ---------- */
.mpp-td-receipt a.mpp-receipt-btn,
.mpp-td-receipt a.mpp-receipt-btn:link,
.mpp-td-receipt a.mpp-receipt-btn:visited { display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; background:#F3F3F3; border-radius:4px; color:#525252; font-size:11px; font-weight:500; text-decoration:none; }
.mpp-receipt-btn:hover { text-decoration:none; }
.mpp-receipt-none { color:#B7B7B7; }

/* ---------- 취소 입력 패널 (숨김) ---------- */
.mpp-cancel-panel td { background:#F9FAFB; padding:14px 16px !important; text-align:left !important; }
.mpp-cancel-panel label { display:inline-flex; align-items:center; gap:6px; margin-right:12px; font-size:12px; font-weight:600; color:#525252; }
.mpp-input { height:30px; padding:0 8px; border:1px solid #E0E0E0; border-radius:6px; font-size:12px; }

/* ---------- 하단 안내문 ---------- */
.mpp-footnote { margin-top:16px; font-size:13px; color:#AAAAAA; }

/* ---------- 페이지네이션 ---------- */
.mpp-pagination { margin-top:24px; text-align:center; }
.mpp-pagination .pg_nav_sel { background-color:#F5F7FB !important; color:#3E5FAC !important; border-radius:70px; }
.mpp-pagination a { text-decoration:none; }

/* ---------- 접근성 (숨김 caption) ---------- */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }


/* ============================================================
   [이용권 관리] /mypage/multi/apply/start.htm 등 3종
   ============================================================ */

/* 서브탭 (3개, 좌우 3등분) - 결제내역 서브탭과 동일 톤 */
.mpm-subtabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:0; width:1216px; height:44px; margin-top:20px; background:#fff; }
.mpm-subtabs a,
.mpm-subtabs a:link,
.mpm-subtabs a:visited { display:flex; align-items:center; justify-content:center; height:44px; font-size:15px; font-weight:500; color:#999999; text-decoration:none; background:#F5F5F5; border:1px solid #DDDDDD; }
.mpm-subtabs a.on,
.mpm-subtabs a.on:link,
.mpm-subtabs a.on:visited { padding:13px 0; background:#F4F9FF; border:1.5px solid #3B8FE3; color:#333333; font-size:15px; font-weight:900; line-height:100%; }
.mpm-subtabs a:hover { text-decoration:none; }

/* 구매 전 확인 카드 */
.mpm-notice { display:flex; flex-direction:column; gap:6px; width:1216px; margin-top:20px; padding:16px 20px; background:#FFFFFF; border:1px solid #F4F9FF; border-radius:10px; box-sizing:border-box; }
.mpm-notice-tit { display:flex; align-items:center; gap:6px; margin:0 0 4px; font-size:14px; line-height:17px; font-weight:900; color:#555555; }
.mpm-notice-icon { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; font-size:12px; color:#FF5050; }
.mpm-notice-list { list-style:none; margin:0; padding:0; }
.mpm-notice-list li { position:relative; padding:1px 0 1px 10px; font-size:12.5px; line-height:15px; color:#888888; margin-top:4px; }
.mpm-notice-list li:first-child { margin-top:0; }
.mpm-notice-list li::before { content:"·"; position:absolute; left:2px; top:1px; color:inherit; font-weight:700; }
.mpm-notice-list li.warn { color:#F74F35; }
.mpm-notice-list li.with-btn { display:flex; align-items:center; gap:6px; }
.mpm-notice-btn,
.mpm-notice-btn:link,
.mpm-notice-btn:visited { display:inline-flex; align-items:center; justify-content:center; height:18px; padding:0 7px; background:#FFFFFF; border:0.8px solid #D9D9D9; border-radius:3px; color:#666666; font-size:12px; line-height:15px; font-weight:500; text-decoration:none; }
.mpm-notice-btn:hover { background:#F7F7F7; text-decoration:none; }
.mpm-notice-agree { display:flex; align-items:center; justify-content:flex-start; gap:6px; margin-top:6px; }
.mpm-notice-agree-label { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; line-height:15px; color:#666666; cursor:pointer; }
.mpm-notice-agree-label span { color:#666666; font-weight:700; }
.mpm-notice-agree-label input[type=checkbox] { -webkit-appearance:none; appearance:none; width:14px; height:14px; margin:0; background:#FFFFFF; border:0.8px solid #D9D9D9; border-radius:3px; cursor:pointer; position:relative; }
.mpm-notice-agree-label input[type=checkbox]:checked { background:#4193FF; border-color:#4193FF; }
.mpm-notice-agree-label input[type=checkbox]:checked::after { content:""; position:absolute; left:3px; top:0px; width:5px; height:9px; border:solid #FFFFFF; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.mpm-notice-agree-btn,
.mpm-notice-agree-btn:link,
.mpm-notice-agree-btn:visited { color:#666666; font-size:12.5px; line-height:15px; font-weight:700; text-decoration:none; }
.mpm-notice-agree-btn:hover { text-decoration:underline; }

/* ---------- 결제 폼 테이블 ---------- */
.mpm-form { width:1216px; margin-top:20px; }
table.mpm-form-table { width:1216px; margin-top:0; border-collapse:separate; border-spacing:0; background:#FFFFFF; border:1px solid #DDDDDD; border-radius:10px; overflow:hidden; table-layout:fixed; }
table.mpm-form-table th,
table.mpm-form-table td { font-size:13px; color:#333333; vertical-align:middle; border-bottom:1px solid #EEEEEE; box-sizing:border-box; }
table.mpm-form-table tr:last-child th,
table.mpm-form-table tr:last-child td { border-bottom:none; }
table.mpm-form-table th { width:180px; height:49px; padding:14px 16px 14px 20px; background:linear-gradient(to bottom, #F5F5F5 0, #F5F5F5 49px, transparent 49px); text-align:left; font-size:13px; font-weight:700; color:#666666; vertical-align:top; }
table.mpm-form-table td { height:49px; padding:13px 20px; background:#FFFFFF; line-height:1.5; }
.mpm-form-table th .FontC_orange { color:#E74C3C; margin-right:2px; }

/* 라디오·체크박스 */
.mpm-form-table label { display:inline-flex; align-items:center; gap:6px; margin-right:16px; font-size:13px; color:#333333; cursor:pointer; }
.mpm-form-table input[type=radio],
.mpm-form-table input[type=checkbox] { width:15px !important; height:15px !important; margin:0; accent-color:#3B8FE3; cursor:pointer; }

/* 텍스트 인풋 */
.mpm-form-table input[type=text] { height:32px; padding:0 10px; background:#FFFFFF; border:1px solid #DDDDDD; border-radius:6px; font-size:13px; color:#333333; box-sizing:border-box; }
.mpm-form-table input[type=text]:focus { border-color:#3B8FE3; outline:none; }

/* 셀렉트 */
.mpm-form-table select { height:32px; padding:0 28px 0 10px; background:#FFFFFF; border:1px solid #DDDDDD; border-radius:6px; font-size:13px; color:#333333; box-sizing:border-box; }

/* 결제수단 안내 패널 */
.mpm-form-table .payment_info { display:block; margin-top:10px; padding:0; background:transparent; font-size:12px; color:#8C9199; line-height:1.9; }
.mpm-form-table .payment_info p { margin:0; }

/* 상품 리스트 (기간 및 금액) */
.mpm-form-table .mpm-goods-list { list-style:none; margin:0; padding:0; }
.mpm-form-table .mpm-goods-list li { padding:3px 0; }
.mpm-form-table .mpm-goods-list li label { margin:0; }
.mpm-form-table .mpm-goods-name { font-weight:500; color:#333333; margin-left:4px; }
.mpm-form-table .mpm-goods-sep { margin:0 8px; color:#BBBBBB; }
.mpm-form-table .mpm-goods-price { font-weight:700; color:#333333; }
.mpm-form-table .mpm-goods-origin { margin-left:8px; color:#AAAAAA; font-size:12px; text-decoration:line-through; }
.mpm-form-table .mpm-goods-badge { margin-left:8px; color:#E74C3C; font-weight:700; font-size:12px; }
.mpm-form-table .mpm-goods-note { margin-left:8px; color:#8C9199; font-size:12px; }
.mpm-form-table .mpm-goods-meta { margin:8px 0 0; font-size:12px; color:#8C9199; }

/* 결제수단 리스트 */
.mpm-form-table .mpm-pay-list { list-style:none; margin:0; padding:0; }
.mpm-form-table .mpm-pay-list li { padding:3px 0; }
.mpm-form-table .mpm-pay-list li label { margin:0; }

/* 메타 문구 (쿠폰/포인트 하단 안내) */
.mpm-form-table .mpm-meta { margin:8px 0 0; font-size:12px; color:#8C9199; }
.mpm-form-table .mpm-meta-inline { display:inline-block; margin-left:12px; font-size:12px; color:#8C9199; vertical-align:middle; }

/* 인라인 버튼 (사용하기/결제서류 다운/견적서 신청) */
.mpm-inline-btn,
a.mpm-inline-btn:link,
a.mpm-inline-btn:visited,
span.mpm-inline-btn { display:inline-flex; align-items:center; justify-content:center; height:30px; padding:0 14px; background:#666666; border:1px solid #666666; border-radius:6px; color:#FFFFFF; font-size:12px; font-weight:600; text-decoration:none; cursor:pointer; vertical-align:middle; }
.mpm-inline-btn-alt,
a.mpm-inline-btn-alt:link,
a.mpm-inline-btn-alt:visited,
span.mpm-inline-btn-alt { background:#FFFFFF; border-color:#DDDDDD; color:#555555; }
.mpm-doc-btns { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mpm-doc-btns .btnEstimate { padding:0 14px !important; border:1px solid #DDDDDD !important; color:#555555 !important; }

/* 숨김 (결제내용 행 — JS 값 채워짐용 hidden holder) */
.mpm-hidden-row { display:none; }

/* 세금계산서 입력 폼 */
.mpm-form-table #divTaxReceipt { margin-top:12px; padding-top:12px; border-top:1px dashed #EEEEEE; }
.mpm-form-table #receipt_input { margin-top:10px; padding:14px; background:#FAFAFA; border-radius:6px; }

/* 인풋 행 (입금자명 등 라벨 + input 세로 중앙 정렬) */
.mpm-form-table .mpm-input-row { margin-top:10px; }
.mpm-form-table .mpm-input-row-inner { display:inline-flex; align-items:center; gap:10px; margin:0; }
.mpm-form-table .mpm-input-label { display:inline-flex; align-items:center; min-width:90px; font-weight:700; color:#555555; font-size:13px; }

/* 상단 안내 배너 */
.mpm-banner { display:flex; align-items:flex-start; gap:10px; width:1216px; margin-top:20px; padding:14px 18px; border-radius:10px; font-size:14px; line-height:1.6; }
.mpm-banner i { flex-shrink:0; margin-top:4px; font-size:15px; }
.mpm-banner a { color:inherit; font-weight:700; text-decoration:underline; }
.mpm-banner-warn { background:#FFF0F0; border:1px solid #F5C5C5; color:#C0392B; }
.mpm-banner-info { background:#EBF5FE; border:1px solid #C7DFF5; color:#2B5BB5; }
.mpm-banner-lead { display:inline-block; font-size:14px; font-weight:900; }

/* 하단 요약 카드 */
.mpm-summary { display:flex; align-items:center; justify-content:space-between; width:1216px; margin-top:20px; padding:22px 28px; background:#FFFFFF; border:1.5px solid #3B8FE3; border-radius:10px; }
.mpm-summary #goods_pament_money,
.mpm-summary #goods_title { display:none !important; }
.mpm-summary-left { display:flex; flex-direction:column; gap:6px; flex:1; }
.mpm-summary-title { font-size:18px; font-weight:900; color:#333333; }
.mpm-summary-desc { font-size:13px; color:#8C9199; }
.mpm-summary-tags { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px; }
.mpm-summary-tag { display:inline-block; padding:3px 10px; background:#EBF5FE; color:#3B8FE3; font-size:12px; font-weight:600; border-radius:4px; }
.mpm-summary-price { display:flex; flex-direction:column; align-items:flex-end; gap:4px; font-family:'Montserrat',sans-serif; font-size:14px; color:#333333; }
.mpm-summary-original { font-size:12px; color:#AAAAAA; text-decoration:line-through; }
.mpm-summary-price-num { font-size:28px; font-weight:900; color:#333333; margin-right:2px; }
.mpm-summary-price-unit { font-size:13px; color:#8C9199; margin-left:2px; }

/* 결제 버튼 */
.mpm-submit-wrap { display:flex; justify-content:flex-start; margin-top:14px; }
.mpm-submit-btn,
.mpm-submit-btn:link,
.mpm-submit-btn:visited { display:inline-flex; align-items:center; justify-content:center; width:358px; height:49px; background:#444444; border-radius:10px; color:#FFFFFF; font-size:15px; font-weight:700; text-decoration:none; }
.mpm-submit-btn:hover { background:#222222; color:#FFFFFF; text-decoration:none; }

/* 결제 버튼 하단 안내 */
.mpm-submit-footnote { margin-top:12px; font-size:12px; color:#AAAAAA; text-align:left; }


/* ============================================================
   [월구독 카드정보 변경] /mypage/profile/month/change_card.htm 전용
   ============================================================ */

/* 빈 상태 */
.mcc-empty { margin-top:24px; padding:60px 20px; background:#FAFAFA; border:1px solid #EEEEEE; border-radius:12px; text-align:center; }
.mcc-empty p { margin:0 0 20px; font-size:15px; color:#555555; }
.mcc-empty p strong { color:#3B8FE3; font-weight:700; }
.mcc-empty-btn,
.mcc-empty-btn:link,
.mcc-empty-btn:visited { display:inline-flex; align-items:center; justify-content:center; height:40px; padding:0 24px; background:#FFFFFF; border:1px solid #3B8FE3; border-radius:20px; color:#3B8FE3; font-size:14px; font-weight:700; text-decoration:none; }

/* 구독 블록 */
.mcc-block { margin-top:20px; }
.mcc-block + .mcc-block { margin-top:32px; }

/* 라벨-값 테이블 */
.mcc-table { width:1216px; height:159px; border-collapse:separate; border-spacing:0; background:#FFFFFF; border:1px solid #DDDDDD; border-radius:10px; overflow:hidden; table-layout:fixed; }
.mcc-table th { width:180px; height:49px; padding:16px 16px 16px 20px; background:#F5F5F5; text-align:left; font-size:14px; font-weight:700; color:#343434; border-bottom:1px solid #EEEEEE; }
.mcc-table td { padding:0 24px; height:49px; font-size:14px; color:#333333; border-bottom:1px solid #EEEEEE; vertical-align:middle; }
.mcc-table tr:last-child th,
.mcc-table tr:last-child td { border-bottom:none; }
.mcc-em { color:#3B8FE3; font-size:16px; font-weight:700; }

/* 카드정보변경 버튼 */
.mcc-change-btn,
a.mcc-change-btn:link,
a.mcc-change-btn:visited { display:inline-flex; align-items:center; justify-content:center; height:28px; margin-left:12px; padding:0 12px; background:#555555; border-radius:4px; color:#FFFFFF; font-size:12px; font-weight:700; text-decoration:none; }
a.mcc-change-btn:hover { background:#333333; text-decoration:none; color:#FFFFFF; }

/* 하단 (안내문 + 자동결제 취소) */
.mcc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.mcc-foot-note { margin:0; font-size:13px; color:#AAAAAA; }
.mcc-cancel-link,
.mcc-cancel-link:link,
.mcc-cancel-link:visited { font-size:12px; color:#BBBBBB; text-decoration:none; }
.mcc-cancel-link:hover { color:#333333; text-decoration:none; }