/* A 마루: 명료한 파란색, 균등한 사진과 목록. */
html.renewal.renew-design { --r-bg:#fff; --r-surface:#fff; --r-raised:#f5f7fb; --r-text:#202b3c; --r-muted:#657185; --r-line:#e7ebf1; --r-accent:#2c5bd7; --r-accent-hover:#244db9; --r-soft:#eef3ff; --r-on-accent:#fff; --r-radius:10px; --r-focus:#2c5bd7; --d-hero:#eaf0fb; --d-hero-text:#253e69; --d-new-bg:#e8f3eb; --d-new-text:#387151; --d-hot-bg:#fff0ea; --d-hot-text:#b95336; --d-star:#ac7918; --d-image-radius:12px; --d-heading-weight:740; }
html.renewal.renew-design[data-color-mode=dark] { --r-bg:#151a23; --r-surface:#1d2531; --r-raised:#232d3b; --r-text:#ecf0f7; --r-muted:#a6b1c2; --r-line:#344151; --r-accent:#95b4ff; --r-accent-hover:#b6ccff; --r-soft:#283b60; --r-on-accent:#16243d; --r-focus:#95b4ff; --d-hero:#273953; --d-hero-text:#e2ebfd; --d-new-bg:#264333; --d-new-text:#a1d1b1; --d-hot-bg:#573428; --d-hot-text:#ffb89f; --d-star:#e3b65b; }
/* 로그인 카드의 정보수정·관리 버튼을 한 행에 두고 활동 목록과 겹치지 않게 한다. */
.renewal.renew-design #ol_after_hd { height: auto; min-height: 80px; }
.renewal.renew-design #ol_after_hd .maru-account-actions { display: flex; align-items: center; gap: 6px; }
.renewal.renew-design #ol_after_hd .maru-account-actions > a { flex: 0 0 auto; white-space: nowrap; }
.renewal.renew-design #ol_after_hd .maru-account-actions .btn_admin { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-width: 28px; height: 28px; min-height: 28px; padding: 0; line-height: 1; }
/* 마루 마이페이지: PC와 모바일 모두 상단 선택 메뉴를 사용한다. */
.renewal.renew-design #smb_my.maru-my-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 28px; }
.renewal.renew-design #smb_my .maru-my-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; }
.renewal.renew-design #smb_my .maru-my-nav label { font-size: 14px; font-weight: 600; }
.renewal.renew-design #smb_my #maru-my-menu { width: 220px; min-width: 0; max-width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 7px; font-size: 14px; line-height: 1.4; }
.renewal.renew-design #smb_my #maru-my-menu-help { margin: 0; color: var(--r-muted); font-size: 12px; word-break: keep-all; }
.renewal.renew-design #smb_my .maru-my-main { display: grid; gap: 36px; min-width: 0; }
.renewal.renew-design #smb_my #smb_my_ov { border-radius: 14px; overflow: hidden; }
.renewal.renew-design #smb_my .renew-my-account-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px; }
.renewal.renew-design #smb_my .renew-my-profile { gap: 16px; }
.renewal.renew-design #smb_my .renew-my-avatar { flex-basis: 56px; width: 56px; height: 56px; }
.renewal.renew-design #smb_my #renew-my-name { font-size: 24px; }
.renewal.renew-design #smb_my #renew-my-name span { margin-left: 3px; font-size: 20px; }
.renewal.renew-design #smb_my .maru-my-welcome { margin: 5px 0 0; color: var(--r-muted); font-size: 14px; word-break: keep-all; }
.renewal.renew-design #smb_my .renew-my-edit { display: inline-flex; flex-shrink: 0; align-items: center; gap: 14px; min-height: 38px; margin: 0; padding: 7px 13px; border: 1px solid var(--r-line); border-radius: 7px; color: var(--r-text); font-size: 13px; background: var(--r-surface); }
.renewal.renew-design #smb_my .renew-my-benefits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 8px; border-top: 1px solid var(--r-line); background: var(--r-raised); }
.renewal.renew-design #smb_my .renew-my-benefits > a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 2px 18px; border-left: 1px solid var(--r-line); }
.renewal.renew-design #smb_my .renew-my-benefits > a:first-child { border-left: 0; padding-left: 18px; }
.renewal.renew-design #smb_my .renew-my-benefits > a:last-child { padding-right: 18px; }
.renewal.renew-design #smb_my .renew-my-benefits > a > span { justify-content: center; gap: 8px; color: var(--r-muted); font-size: 13px; }
.renewal.renew-design #smb_my .renew-my-benefits strong { justify-content: center; color: var(--r-accent); font-size: 28px; }
.renewal.renew-design #smb_my .renew-my-benefits small { color: var(--r-muted); font-size: 13px; }
.renewal.renew-design #smb_my .renew-my-details summary { min-height: 44px; padding: 10px 28px; font-size: 13px; }
.renewal.renew-design #smb_my .renew-my-info { padding: 12px 28px 20px; font-size: 14px; }
.renewal.renew-design #smb_my #smb_my_act { padding: 0 28px 16px; }
.renewal.renew-design #smb_my .renew-my-section-heading { margin-bottom: 16px; }
.renewal.renew-design #smb_my .renew-my-section-heading h2 { font-size: 21px; }
.renewal.renew-design #smb_my .renew-my-section-heading p { margin-top: 5px; font-size: 13px; word-break: keep-all; }
.renewal.renew-design #smb_my .renew-my-section-heading > a { gap: 8px; font-size: 13px; }
.renewal.renew-design #smb_my .renew-my-orders { border-radius: 12px; }
.renewal.renew-design #smb_my .renew-my-order { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 20px; padding: 22px; }
.renewal.renew-design #smb_my .renew-my-order-price strong { font-size: 19px; }
.renewal.renew-design #smb_my .renew-my-status { border-radius: 5px; }
.renewal.renew-design #smb_my .renew-my-empty { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 152px; padding: 28px; border: 1px solid var(--r-line); border-radius: 12px; text-align: start; background: var(--r-surface); }
.renewal.renew-design #smb_my .renew-my-empty > i { width: 48px; height: 48px; margin: 0; background: var(--r-raised); color: var(--r-muted); font-size: 22px; }
.renewal.renew-design #smb_my .renew-my-empty h3 { font-size: 16px; line-height: 1.5; }
.renewal.renew-design #smb_my .renew-my-empty p { margin: 6px 0 0; color: var(--r-muted); font-size: 13px; word-break: keep-all; }
.renewal.renew-design #smb_my .renew-my-empty a { justify-content: center; gap: 12px; min-height: 42px; padding: 8px 14px; border-radius: 7px; font-size: 13px; white-space: nowrap; }
.renewal.renew-design #smb_my .renew-my-empty-link { border: 1px solid var(--r-line); }
.renewal.renew-design #smb_my .renew-my-wishes { gap: 24px 16px; }
.renewal.renew-design #smb_my .renew-my-product-image { border-radius: 10px; }
.renewal.renew-design #smb_my .renew-my-product h3 { min-height: 3.3em; }
.renewal.renew-design #smb_my .renew-my-product-price { font-size: 18px; }
.renewal.renew-design #smb_my .renew-my-wish-date { font-size: 12px; }
@media (max-width: 1100px) {
.renewal.renew-design #smb_my .renew-my-account-top { flex-wrap: wrap; padding: 24px; }
.renewal.renew-design #smb_my .renew-my-benefits { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
.renewal.renew-design #smb_my .renew-my-benefits > a { padding-inline: 10px; }
.renewal.renew-design #smb_my .renew-my-benefits > a:first-child { padding-left: 10px; }
.renewal.renew-design #smb_my .renew-my-benefits > a:last-child { padding-right: 10px; }
.renewal.renew-design #smb_my .renew-my-benefits strong { font-size: 23px; }
.renewal.renew-design #smb_my .renew-my-benefits > a > span { font-size: 12px; }
.renewal.renew-design #smb_my .renew-my-order { grid-template-columns: minmax(0, 1fr) 110px; gap: 16px; }
.renewal.renew-design #smb_my .renew-my-order-id { grid-column: 1; grid-row: 1; }
.renewal.renew-design #smb_my .renew-my-status { grid-column: 2; grid-row: 1; }
.renewal.renew-design #smb_my .renew-my-order-price { grid-column: 1; grid-row: 2; padding-top: 14px; border-top: 1px solid var(--r-line); }
.renewal.renew-design #smb_my .renew-my-order-payment { grid-column: 2; grid-row: 2; align-self: stretch; align-content: center; padding-top: 14px; border-top: 1px solid var(--r-line); }
.renewal.renew-design #smb_my .renew-my-empty { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding: 24px; }
.renewal.renew-design #smb_my .renew-my-empty > i { align-self: start; width: 40px; height: 40px; }
.renewal.renew-design #smb_my .renew-my-empty > a { grid-column: 2; justify-self: start; }
.renewal.renew-design #smb_my .renew-my-wishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
.renewal.renew-design #smb_my.maru-my-layout { gap: 22px; }
.renewal.renew-design #smb_my .maru-my-nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.renewal.renew-design #smb_my #maru-my-menu { width: 100%; }
.renewal.renew-design #smb_my .maru-my-main { gap: 30px; }
.renewal.renew-design #smb_my .renew-my-account-top { gap: 16px; padding: 22px 20px; }
.renewal.renew-design #smb_my .renew-my-avatar { flex-basis: 48px; width: 48px; height: 48px; }
.renewal.renew-design #smb_my #renew-my-name { font-size: 22px; }
.renewal.renew-design #smb_my .maru-my-welcome { font-size: 13px; }
.renewal.renew-design #smb_my .renew-my-edit { margin-left: 64px; }
.renewal.renew-design #smb_my .renew-my-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 0; padding: 20px 12px; }
.renewal.renew-design #smb_my .renew-my-benefits > a:nth-child(odd) { border-left: 0; }
.renewal.renew-design #smb_my .renew-my-benefits > a > span { font-size: 12px; }
.renewal.renew-design #smb_my .renew-my-benefits strong { font-size: 24px; }
.renewal.renew-design #smb_my .renew-my-details summary { padding-inline: 20px; }
.renewal.renew-design #smb_my .renew-my-info { grid-template-columns: minmax(0, 1fr); padding-inline: 20px; }
.renewal.renew-design #smb_my #smb_my_act { padding-inline: 20px; }
.renewal.renew-design #smb_my .renew-my-section-heading h2 { font-size: 20px; }
.renewal.renew-design #smb_my .renew-my-section-heading p { font-size: 12px; }
.renewal.renew-design #smb_my .renew-my-order { gap: 14px; padding: 18px; }
.renewal.renew-design #smb_my .renew-my-empty { padding: 22px 18px; }
.renewal.renew-design #smb_my .renew-my-wishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
}
@media (max-width: 359px) {
.renewal.renew-design #smb_my .renew-my-order { grid-template-columns: minmax(0, 1fr) 82px; }
.renewal.renew-design #smb_my .renew-my-order-id a { gap: 5px; font-size: 12px; }
.renewal.renew-design #smb_my .renew-my-benefits strong { font-size: 22px; }
}