.ksse-myroom-preview { --ksse-service-accent:#4c5eb8; --ksse-service-accent-soft:#f0f2fb; --ksse-service-accent-dark:#394a99; }
body.ksse-myroom-preview .ksse-sub-layout { max-width:1220px; padding-top:34px; padding-bottom:64px; }
[data-myroom-preview] { display:grid; gap:26px; min-width:0; color:#243349; font-size:15px; letter-spacing:0; }
[data-myroom-preview] * { box-sizing:border-box; }
[data-myroom-preview] button { font-family:inherit; letter-spacing:0; }
.mp-nav { justify-content:flex-start; gap:12px; }
.ksse-myroom-preview .mp-nav a { flex:0 0 128px; width:128px; height:44px; padding:0 10px; border-radius:9px; font-size:14.5px; font-weight:600; }
.ksse-myroom-preview .mp-nav a[data-learning-menu="receipt"] { flex-basis:224px; width:224px; white-space:nowrap; }
.mp-certificate-page .mp-orders-table thead th { text-align:center; }
.mp-certificate-page .mp-orders-table thead th:nth-child(1) { width:6%; }
.mp-certificate-page .mp-orders-table thead th:nth-child(2) { width:34%; text-align:left; }
.mp-certificate-page .mp-orders-table thead th:nth-child(3) { width:16%; }
.mp-certificate-page .mp-orders-table thead th:nth-child(4) { width:14%; }
.mp-certificate-page .mp-orders-table thead th:nth-child(5) { width:16%; }
.mp-certificate-page .mp-orders-table thead th:nth-child(6) { width:14%; }
.mp-orders-table td { text-align:center; }
.mp-orders-table .mp-course-title a { color:#4053a6; text-decoration:underline; text-underline-offset:3px; }
.mp-order-status { display:inline-block; padding:3px 8px; border-radius:4px; background:#edf0f4; color:#5a6678; font-size:12px; white-space:nowrap; }
.mp-order-status.is-paid { background:#eaf5ef; color:#28735b; }
.mp-order-status.is-pending { background:#fbf4e4; color:#896318; }
.mp-order-status.is-cancelled { background:#f6edef; color:#855160; }
.mp-order-detail { width:100%; border-collapse:collapse; font-size:14px; }
.mp-order-detail th, .mp-order-detail td { padding:18px 20px; border-bottom:1px solid #e1e6ee; text-align:left; line-height:1.6; overflow-wrap:anywhere; }
.mp-order-detail th { width:180px; background:#f0f3f7; font-weight:500; color:#526078; }
.mp-order-section h3 { font-size:17px; font-weight:600; margin:0 0 16px; }
.mp-order-section ul { margin:0; padding-left:20px; line-height:1.8; }
.mp-heading { display:flex; align-items:center; gap:16px; }
.mp-certificate-page { display:grid; gap:26px; min-width:0; color:#243349; font-size:15px; letter-spacing:0; }
.mp-certificate-page * { box-sizing:border-box; }
.mp-certificate-page .mp-certificate-table thead th:first-child { width:36%; }
.mp-certificate-page .mp-certificate-table thead th:nth-child(2) { width:28%; }
.mp-certificate-page .mp-certificate-table thead th:nth-child(3) { width:10%; }
.mp-certificate-page .mp-certificate-table thead th:nth-child(4), .mp-certificate-page .mp-certificate-table thead th:nth-child(5) { width:13%; }
.mp-certificate-table .mp-certificate-empty { padding:64px 20px; text-align:center; font-size:14.5px; font-weight:400; color:#657187; }
.mp-issue-primary { background:#4c5eb8; border-color:#4c5eb8; color:#fff; }
.mp-issue-primary:hover { background:#4053a6; border-color:#4053a6; }
.mp-certificate-page button.mp-entry-link { font-family:inherit; letter-spacing:0; }
.mp-certificate-page .mp-entry-link:disabled { background:#f3f5f8; color:#7d8898; border-color:#e1e5eb; cursor:default; }
.mp-certificate-access { display:flex; justify-content:flex-start; }
.mp-certificate-page :focus-visible { outline:3px solid #8b9bdf; outline-offset:3px; }
.mp-guidance { margin:-10px 0 0; color:#657187; font-size:14.5px; font-weight:400; line-height:1.6; word-break:keep-all; overflow-wrap:anywhere; }
.mp-preview-label { font-size:12px; font-weight:500; color:#69768c; }
.mp-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.mp-summary-button { height:112px; padding:20px 24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; border:1px solid #dce2ec; border-radius:8px; background:#fff; color:#47566b; cursor:pointer; text-align:left; transition:background .18s,border-color .18s; }
.mp-summary-button:hover { border-color:#a3add7; }
.mp-summary-button[aria-pressed="true"] { background:#f0f2fb; border-color:#4c5eb8; box-shadow:inset 0 3px #4c5eb8; color:#394a99; }
.mp-summary-title { font-size:15px; font-weight:600; }
.mp-count { font-size:28px; line-height:1.15; font-weight:700; }
.mp-count small { margin-left:5px; font-size:14px; font-weight:500; }
.mp-result-heading { margin:0 0 16px; font-size:17px; font-weight:650; color:#243349; }
.mp-courses { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.mp-course { min-width:0; overflow:hidden; border:1px solid #dce2ec; border-radius:8px; background:#fff; display:flex; flex-direction:column; }
.mp-visual { height:96px; display:flex; align-items:center; justify-content:center; background:#edf1f5; border-bottom:1px solid #e5e9f0; color:#91a0b5; }
.mp-visual i { font-size:30px; }
.mp-visual img { width:100%; height:100%; object-fit:contain; }
.mp-course-body { padding:22px; display:flex; flex-direction:column; flex:1; min-width:0; }
.mp-status { align-self:flex-start; font-size:12px; font-weight:600; line-height:24px; padding:0 8px; color:#4056a7; background:#eef1fb; border-radius:4px; }
.mp-status.is-payment_pending { color:#896318; background:#fbf4e4; }
.mp-status.is-completed { color:#28735b; background:#eaf5ef; }
.mp-course h4 { margin:12px 0 18px; min-height:52px; font-size:18px; font-weight:650; line-height:1.45; overflow-wrap:anywhere; word-break:keep-all; color:#1f2d42; }
.mp-course-info { margin:0 0 22px; font-size:13px; line-height:1.6; }
.mp-course-info dt { color:#69768b; margin-bottom:3px; }
.mp-course-info dd { margin:0; color:#34445b; }
.mp-progress-label { display:flex; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; }
.mp-progress-label strong { color:#4c5eb8; font-weight:650; }
.mp-course progress { appearance:none; border:none; width:100%; height:6px; border-radius:4px; overflow:hidden; background:#e9edf4; margin-bottom:24px; }
.mp-course progress::-webkit-progress-bar { background:#e9edf4; }
.mp-course progress::-webkit-progress-value { background:#6577c8; border-radius:4px; }
.mp-course progress::-moz-progress-bar { background:#6577c8; }
.mp-course-action { width:100%; height:42px; margin-top:auto; border:1px solid #4c5eb8; border-radius:6px; background:#4c5eb8; color:white; font-size:14px; font-weight:600; cursor:default; }
.mp-course-action:disabled { border-color:#e1e5eb; background:#f3f5f8; color:#7d8898; }
.mp-empty { grid-column:1/-1; padding:40px 0; text-align:center; color:#64748b; }
.mp-status-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.mp-status-tab { height:48px; padding:0 16px; border:1px solid #d5deea; border-radius:8px; margin:0; background:#fff; color:#43516a; font-size:15px; font-weight:500; cursor:pointer; transition:background-color .18s,color .18s,border-color .18s; }
.mp-status-tab:hover { background:#f0f2fb; border-color:#a3add7; color:#4c5eb8; }
.mp-status-tab[aria-selected="true"] { background:#4c5eb8; border-color:#4c5eb8; color:#fff; }
.mp-list { overflow-x:auto; }
.mp-list .mp-empty { margin:0; padding:64px 20px; border-bottom:1px solid #e4e8ef; font-size:15px; font-weight:400; line-height:1.6; }
.mp-course-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; background:transparent; }
.mp-course-table thead th { padding:15px 16px; background:#f0f3f7; border-top:1px solid #dce2ec; border-bottom:1px solid #dce2ec; color:#526078; font-weight:500; text-align:center; }
.mp-course-table thead th:first-child { width:40%; text-align:left; }
.mp-course-table thead th:nth-child(2) { width:29%; }
.mp-course-table thead th:nth-child(3) { width:12%; }
.mp-course-table thead th:nth-child(4) { width:19%; }
.mp-course-table tbody th, .mp-course-table tbody td { padding:22px 16px; border-bottom:1px solid #e4e8ef; vertical-align:middle; line-height:1.6; }
.mp-course-table .mp-course-title { text-align:left; color:#243349; font-weight:500; overflow-wrap:anywhere; word-break:keep-all; }
.mp-period, .mp-progress, .mp-action-cell { text-align:center; }
.mp-period { color:#59677b; }
.mp-progress { font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
.mp-entry-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:6px 14px; border:1px solid #cbd3ed; border-radius:5px; background:#f0f2fb; color:#4053a6; font-size:13px; font-weight:500; white-space:nowrap; }
.mp-entry-link:hover { background:#e7ebf8; border-color:#9ba9d9; }
@media(max-width:760px) {
  .mp-course-table { min-width:680px; }
  .mp-status-tab { padding:0 8px; font-size:14px; }
}
[data-myroom-preview] :focus-visible { outline:3px solid #8b9bdf; outline-offset:3px; }
@keyframes mp-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
[data-myroom-preview] > * { animation:mp-reveal .28s ease-out both; }
.mp-offline-header { border-bottom:1px solid #e2e7f0; background:white; }
.mp-offline-header > div { max-width:1220px; padding:24px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.mp-offline-header img { width:266px; max-width:55%; height:auto; }
.mp-offline-header span { font-size:13px; color:#65718a; }
.mp-offline-gnb { display:flex; justify-content:space-between; max-width:1220px; margin:auto; padding:20px 24px; gap:20px; font-size:15px; font-weight:600; }
.mp-offline-gnb b { color:#4c5eb8; }
.mp-offline-footer { padding:32px 24px; border-top:1px solid #e0e5ee; text-align:center; color:#6e7b8e; font-size:13px; }
@media(max-width:1023px) {
  body.ksse-myroom-preview .ksse-sub-layout { width:100%; padding:24px 20px 40px; }
  .mp-courses { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mp-offline-gnb { overflow:auto; white-space:nowrap; font-size:13px; }
}
@media(max-width:600px) {
  [data-myroom-preview] { gap:22px; }
  .mp-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ksse-myroom-preview .mp-nav a { width:100%; }
  .ksse-myroom-preview .mp-nav a[data-learning-menu="receipt"] { width:100%; grid-column:1/-1; }
  .mp-summary { gap:8px; }
  .mp-summary-button { height:108px; padding:14px 10px; }
  .mp-summary-title { font-size:13px; line-height:1.4; }
  .mp-count { font-size:24px; }
  .mp-courses { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) {
  [data-myroom-preview] > * { animation:none; }
  [data-myroom-preview] * { transition:none; }
}