@charset "UTF-8";
body.page-lineage-classic { margin: 0; font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", system-ui, sans-serif; }
.skin-points-page { color: #d3d0cd; padding-bottom: 72px; background: radial-gradient(ellipse at 85% 0, #30261b50, transparent 38%); }
.skin-points-page *, .skin-points-page *::before, .skin-points-page *::after { box-sizing: border-box; }
.skin-points-page a { color: inherit; text-decoration: none; }
.skin-points-page button, .skin-points-page input { font: inherit; }
.skin-points-page :focus-visible { outline: 2px solid #ecd09f; outline-offset: 4px; }
.skin-points-shell { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.skin-points-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; padding: 28px 0 8px; color: #a4a0a1; font-size: 12px; }
.skin-points-breadcrumb a:hover, .skin-points-link:hover { color: #f0d39f; }
.skin-points-hero { display: flex; justify-content: space-between; align-items: end; gap: 24px; padding: 30px 0 32px; }
.skin-points-eyebrow { margin: 0 0 13px; color: #d9bb87; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.skin-points-hero h1 { margin: 0; color: #f1eee9; font-size: clamp(28px, 3.7vw, 43px); line-height: 1.3; letter-spacing: -.05em; word-break: keep-all; }
.skin-points-hero > div > p:last-child { margin: 16px 0 0; color: #aaa4a0; font-size: 13px; line-height: 1.8; word-break: keep-all; }
.skin-points-link { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; color: #dbbf91 !important; font-size: 12px; line-height: 1.8; }
.skin-points-account { display: grid; grid-template-columns: 1fr 1.2fr; border: 1px solid #514533; border-radius: 8px; background: linear-gradient(110deg, #30281d80, #1d1d22); }
.skin-points-account > div { display: grid; align-content: center; gap: 12px; padding: 25px 30px; }
.skin-points-account > div + div { border-left: 1px solid #403a30; }
.skin-points-account > div > span { color: #b7aea1; font-size: 12px; }
.skin-points-balance > strong { color: #efd1a0; font-size: 39px; letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.skin-points-balance > strong small { font-size: 19px; font-weight: 500; }
.skin-points-balance > strong.is-unavailable, .skin-points-balance > a { font-size: 23px; color: #d7c4a5; }
.skin-points-expiry > strong { color: #e6dfd5; font-size: clamp(15px, 2vw, 20px); line-height: 1.5; overflow-wrap: anywhere; }
.skin-points-expiry > small { color: #b4aaa0; font-size: 12px; }
.skin-points-status { display: inline-flex; padding: 4px 8px; margin-right: 7px; border: 1px solid #665641; border-radius: 4px; color: #dec18f; font-size: 11px; }
.skin-points-status.is-active { color: #b0ddc1; border-color: #496e55; background: #24402b50; }
.skin-points-notice { margin: 18px 0; padding: 15px 18px; color: #e3c697; border: 1px solid #6c5636; border-radius: 6px; background: #33291b; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.skin-points-notice.is-error { color: #edb9ac; border-color: #704b44; background: #392622; }
.skin-points-shop { padding-top: 40px; }
.skin-points-section-heading { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 19px; }
.skin-points-section-heading h2, .skin-points-panel h2 { margin: 0; color: #eee8df; font-size: 21px; letter-spacing: -.035em; }
.skin-points-section-heading p { margin: 0; color: #a69e95; font-size: 12px; }
.skin-points-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.skin-points-product { min-width: 0; padding: 28px 24px 22px; border: 1px solid #494137; border-radius: 8px; background: #1e1e22; }
.skin-points-product.is-featured { border-color: #8e7247; background: linear-gradient(150deg, #322a1f80, #1e1e22 68%); }
.skin-points-product h3 { margin: 18px 0 9px; color: #f1e7d6; font-size: 43px; line-height: 1.2; letter-spacing: -.03em; }
.skin-points-product h3 span { margin-left: 6px; color: #cec1ad; font-size: 21px; font-weight: 500; }
.skin-points-price { margin: 0; color: #e5c38b; font-size: 29px; font-weight: 750; font-variant-numeric: tabular-nums; }
.skin-points-price span { font-size: 16px; }
.skin-points-product-note { margin: 15px 0 20px; color: #aaa29a; font-size: 12px; line-height: 1.7; }
.skin-points-confirm { display: flex; align-items: start; gap: 9px; min-height: 66px; padding-top: 16px; border-top: 1px solid #3f3931; color: #c3b8a8; font-size: 11px; line-height: 1.8; cursor: pointer; }
.skin-points-confirm input { width: 16px; height: 16px; margin: 2px 0 0; flex-shrink: 0; accent-color: #d9b982; }
.skin-points-button { display: flex; width: 100%; min-height: 46px; align-items: center; justify-content: center; padding: 12px 14px; border: 1px solid #d9b982; border-radius: 5px; color: #241b0e !important; background: #d9b982; font-size: 12px; line-height: 1.5; font-weight: 750; text-align: center; cursor: pointer; }
.skin-points-button:hover { background: #edcd96; border-color: #edcd96; }
.skin-points-button:disabled { color: #a69e94 !important; background: #2c2926; border-color: #49433c; cursor: not-allowed; }
.skin-points-shortfall { margin: 11px 0 0; color: #c0a685; text-align: center; font-size: 11px; }
.skin-points-shop-note { margin: 18px 0 0; color: #aaa297; font-size: 12px; line-height: 1.9; word-break: keep-all; }
.skin-points-detail-grid { display: grid; grid-template-columns: .9fr 1.25fr; gap: 22px; margin-top: 38px; align-items: start; }
.skin-points-panel { min-width: 0; padding: 26px; border: 1px solid #3e3831; border-radius: 8px; background: #1c1c21; }
.skin-points-panel h2 { margin-bottom: 22px; font-size: 18px; }
.skin-points-policy-scope { margin: -8px 0 19px; color: #aaa094; font-size: 11px; line-height: 1.8; }
.skin-points-earn { display: grid; gap: 16px; margin: 0; }
.skin-points-earn > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12px; line-height: 1.7; }
.skin-points-earn dt { color: #d5ccc0; }
.skin-points-earn small { display: block; margin-top: 3px; color: #a79e93; font-size: 11px; }
.skin-points-earn dd { margin: 0; color: #e4c28c; font-weight: 700; white-space: nowrap; }
.skin-points-footnote { margin: 22px 0 16px; padding-top: 17px; border-top: 1px solid #37332e; color: #aaa094; font-size: 11px; line-height: 1.9; word-break: keep-all; }
.skin-points-table-wrap { width: 100%; overflow-x: auto; }
.skin-points-history table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; line-height: 1.7; }
.skin-points-history caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skin-points-history th { padding: 0 6px 12px; color: #b5aa9b; font-size: 10px; font-weight: 500; border-bottom: 1px solid #494035; }
.skin-points-history td { padding: 12px 6px; color: #d0c7bb; border-bottom: 1px solid #34302b; }
.skin-points-history th:first-child, .skin-points-history td:first-child { padding-left: 0; }
.skin-points-history th:not(:first-child), .skin-points-history td:not(:first-child) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.skin-points-history tr:last-child td { border-bottom: 0; }
.skin-points-history time { display: block; margin-top: 4px; color: #a39a8e; font-size: 10px; }
.skin-points-history .is-credit { color: #a6d4b9; }
.skin-points-history .is-debit { color: #e0b098; }
.skin-points-empty { margin: 0; padding: 26px 0; color: #afa497; font-size: 12px; line-height: 1.8; }
@media (max-width: 900px) { .skin-points-product { padding: 24px 18px 20px; } .skin-points-products { gap: 13px; } .skin-points-confirm { min-height: 84px; } .skin-points-detail-grid { grid-template-columns: 1fr 1.2fr; gap: 16px; } .skin-points-panel { padding: 22px; } }
@media (max-width: 700px) { .skin-points-shell { width: calc(100% - 32px); } .skin-points-hero { align-items: start; flex-direction: column; gap: 18px; padding-top: 24px; } .skin-points-account { grid-template-columns: 1fr; } .skin-points-account > div { padding: 21px 23px; } .skin-points-account > div + div { border-left: 0; border-top: 1px solid #403a30; } .skin-points-products { grid-template-columns: 1fr; } .skin-points-product { padding: 24px; } .skin-points-product h3 { font-size: 39px; } .skin-points-confirm { min-height: 62px; } .skin-points-section-heading { align-items: start; flex-direction: column; gap: 10px; } .skin-points-detail-grid { grid-template-columns: 1fr; } .skin-points-hero h1 { font-size: 29px; } }
@media (max-width: 380px) { .skin-points-panel { padding: 18px; } .skin-points-history td { font-size: 10px; padding-inline: 3px; } .skin-points-history time { font-size: 9px; } .page-lineage-classic .diablo-brandbar-inner { flex-wrap: wrap; gap: 12px; padding-block: 12px; } }