@import url("../../../css/pliki.css");
/* [pliki 테마] 멤버십 안내 */
.pk-ms { padding: 40px 20px 80px; }
.pk-ms-hero { text-align: center; margin-bottom: 30px; }
.pk-ms-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; color: var(--red); margin: 0 0 8px; }
.pk-ms-hero h2 { font-size: 30px; font-weight: 800; letter-spacing: -1px; margin: 0 0 10px; }
.pk-ms-desc { font-size: 14px; color: var(--gray); margin: 0; }
.pk-ms-me { max-width: 720px; margin: 0 auto 34px; background: #111; color: #fff; border-radius: 18px; padding: 24px 28px; }
.pk-ms-me-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.pk-ms-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; background: #fff; color: #111; border-radius: 999px; padding: 4px 10px; }
.pk-ms-me-hd strong { font-size: 16px; font-weight: 700; }
.pk-ms-sum { margin-left: auto; font-size: 13px; opacity: .7; }
.pk-ms-sum b { color: #fff; opacity: 1; font-weight: 800; }
.pk-ms-bar { height: 8px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.pk-ms-bar i { display: block; height: 100%; background: #fff; border-radius: 999px; transition: width .6s ease; }
.pk-ms-next { margin: 10px 0 0; font-size: 13px; opacity: .85; }
.pk-ms-next b { color: #ffe500; }
.pk-ms-login { text-align: center; font-size: 13px; color: var(--gray); margin: 0 0 30px; }
.pk-ms-login a { color: #111; font-weight: 700; text-decoration: underline; }
.pk-ms-body { max-width: 760px; margin: 0 auto 30px; font-size: 14px; line-height: 1.8; color: #333; }
.pk-ms-rules { max-width: 760px; margin: 0 auto; background: var(--bg-soft); border-radius: 16px; padding: 22px 26px; }
.pk-ms-rules > div { display: flex; gap: 16px; padding: 8px 0; font-size: 13px; line-height: 1.6; }
.pk-ms-rules dt { flex: 0 0 76px; font-weight: 700; color: #111; }
.pk-ms-rules dd { margin: 0; color: #555; }
@media (max-width: 1024px) { .pk-ms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .pk-ms { padding: 26px 14px 50px; }
    .pk-ms-hero h2 { font-size: 24px; }
    .pk-ms-me { padding: 18px; border-radius: 14px; }
    .pk-ms-sum { margin-left: 0; flex-basis: 100%; }
    .pk-ms-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .pk-ms-card { padding: 22px 16px 18px; }
    .pk-ms-rules > div { flex-direction: column; gap: 4px; }
    .pk-ms-rules dt { flex-basis: auto; }
}

/* 등급 × 혜택 표 */
.pk-ms-tblwrap { margin: 0 0 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; }
.pk-ms-tbl { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 13.5px; }
.pk-ms-tbl col.c0 { width: 170px; }
.pk-ms-tbl th, .pk-ms-tbl td { padding: 18px 14px; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.55; word-break: keep-all; }
.pk-ms-tbl tbody tr:last-child th, .pk-ms-tbl tbody tr:last-child td { border-bottom: 0; }
.pk-ms-tbl thead th { background: #fafafa; padding: 22px 14px 18px; font-weight: 800; }
.pk-ms-tbl thead th:first-child, .pk-ms-tbl tbody th { text-align: left; background: #fafafa; font-weight: 700; color: #333; position: sticky; left: 0; z-index: 1; }
.pk-ms-tbl tbody th { font-size: 13px; }
.pk-ms-tbl thead th b { display: block; font-size: 14px; letter-spacing: .04em; }
.pk-ms-tbl thead th em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11px; font-weight: 800; background: var(--red); color: #fff; border-radius: 999px; padding: 2px 9px; }
.pk-ms-dot { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 50%; background: #c98a5b; color: #fff; font-size: 14px; font-weight: 800; }
.pk-ms-tbl thead th.g1 .pk-ms-dot { background: #8e97a3; }
.pk-ms-tbl thead th.g2 .pk-ms-dot { background: #c9a227; }
.pk-ms-tbl thead th.g3 .pk-ms-dot { background: #111; }
.pk-ms-tbl thead th.g4 .pk-ms-dot { background: #6b3fd1; }
.pk-ms-tbl thead th.is-me { box-shadow: inset 0 -3px 0 #111; }
.pk-ms-tbl td b { font-weight: 800; color: #111; }
.pk-ms-tbl td small { display: block; font-size: 12px; color: var(--gray); margin-top: 2px; }
.pk-ms-ok { color: #111; font-size: 15px; }
.pk-ms-no { color: #c5c5c5; }
.pk-ms-tbl td.pk-ms-bf { font-size: 12.5px; color: #444; }
@media (max-width: 768px) { .pk-ms-tbl { font-size: 12.5px; } .pk-ms-tbl th, .pk-ms-tbl td { padding: 14px 10px; } .pk-ms-tbl col.c0 { width: 120px; } }
/* 2026-10-17 모바일 등급표: 첫 칸이 넓어 등급이 1.5칸만 보이던 것 → 첫 칸 좁게 + '옆으로 밀면' 안내 */
@media (max-width: 768px) {
    .pk-ms-tbl col.c0 { width: 92px; }
    .pk-ms-tbl { min-width: 560px; }
    .pk-ms-tbl thead th:first-child, .pk-ms-tbl tbody th { font-size: 12px; padding-left: 12px; padding-right: 8px; }
    .pk-ms-tblwrap::before { content: '표를 옆으로 밀면 모든 등급을 볼 수 있어요 →'; display: block; position: sticky; left: 0; padding: 10px 12px 0; font-size: 12px; color: var(--gray-l); }
}