/* Melting: values copied from the live app's computed styles at 1440x900 (DaisyUI dark theme). */
@import url("/skins/fonts.css");

.skin-melting { background: #222430; color: #f2f1eb; font: 400 16px/24px "Pretendard Variable", Pretendard, system-ui, sans-serif; }
.skin-melting svg { width: 100%; height: 100%; }
.mt-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Navbar: fixed 1024px glass pane (64px bar + 30px tabs), 40px circle buttons, pink pill CTA. */
.mt-nav { position: fixed; top: 0; left: 50%; z-index: 100; width: 1024px; max-width: 100%; transform: translateX(-50%);
  background: rgba(34, 36, 48, 0.78); box-shadow: inset 0 -1px 0 rgba(242, 241, 235, 0.08); backdrop-filter: blur(12px); }
.mt-navbar { height: 64px; padding: 0 8px 8px; display: flex; align-items: center; }
.mt-logo { flex: 1; margin-left: 16px; font: 800 20px/28px "Pretendard Variable", sans-serif; letter-spacing: -0.4px; color: #ef7ab8; }
.mt-nav-actions { margin-right: 8px; display: flex; align-items: center; gap: 4px; }
.mt-nav-icon { width: 40px; height: 40px; padding: 9.5px; border-radius: 50%; color: #f2f1eb; }
.mt-nav-icon.is-success { color: #7ec98f; }
.mt-login { height: 32px; padding: 0 12px; display: flex; align-items: center; border-radius: 999px; background: #ef7ab8; color: #2b0c1e;
  font-size: 14px; font-weight: 600; line-height: 21px; white-space: nowrap; }
.mt-tabs { height: 30px; padding: 0 8px; display: flex; gap: 8px; }
.mt-tab { margin-top: -4px; padding: 0 8px 12px; color: rgba(242, 241, 235, 0.5); font-weight: 600; line-height: 20px; }
.mt-tab.is-active { color: #f2f1eb; border-bottom: 2px solid #ef7ab8; }

/* Content column: 1024px, sections 16px inside; rows of 185px cards 10px apart. */
.mt-main { width: 1024px; max-width: 100%; margin: 0 auto; padding-top: 94px; }
.mt-section { margin-top: 15px; }
.mt-section-head { height: 28px; padding: 0 16px; display: flex; align-items: center; gap: 8px; }
.mt-section-head h2 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: 0.5px; }
.mt-info { width: 16px; height: 16px; color: #f2f1eb; }
.mt-row { margin-top: 8px; padding: 0 16px 8px; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.mt-row > a { flex: 0 0 185px; min-width: 0; }

.mt-poster figure { position: relative; margin: 0; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid #fe5395; border-radius: 12px; background: #2d303f; }
.mt-poster img { width: 100%; height: 100%; object-fit: cover; }
.mt-poster-gradient { position: absolute; inset: auto 0 0; padding: 40px 10px 10px;
  background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.8) 100%); }
.mt-poster h3 { font-size: 18px; font-weight: 600; line-height: 22.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-poster-stats { display: flex; gap: 10px; }
.mt-poster-stats span, .mt-square-views { display: flex; align-items: center; gap: 2px; color: #fff; font-size: 12px; line-height: 16px; }
.mt-poster-stats svg, .mt-square-views svg { width: 12px; height: 12px; }
.mt-poster p { margin-top: 6px; height: 36px; color: rgba(242, 241, 235, 0.8); font-size: 14px; font-weight: 300; line-height: 18.2px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

.mt-square figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border: 1px solid #ffe657; border-radius: 12px; background: #2d303f; }
.mt-square figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent); }
.mt-square img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.mt-square-views { position: absolute; top: 8px; right: 6px; z-index: 1; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.5); }
.mt-square-text { margin-top: 12px; }
.mt-square h3 { font-size: 16px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-square p { margin-top: 8px; height: 36px; color: rgba(242, 241, 235, 0.5); font-size: 12px; line-height: 18px;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mt-square-tags { margin: 4px 0; height: 16px; overflow: hidden; color: rgba(242, 241, 235, 0.65); font-size: 12px; line-height: 16px; }
.mt-square-tags span { margin-right: 4px; }
.mt-creator { display: inline-block; padding: 4px 8px; border-radius: 6px; background: #2d303f; color: rgba(242, 241, 235, 0.5); font-size: 10px; line-height: 15px; }
.mt-grid { margin-top: 8px; padding: 0 16px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 10px; }

/* Detail: 880px grid (380px left pane with a square carousel, 500px right pane with sticky tabs). */
.mt-detail { width: 880px; max-width: 100%; margin: 64px auto 0; display: grid; grid-template-columns: 380px 500px; min-height: calc(100vh - 64px); }
.mt-detail-left { border-right: 1px solid rgba(242, 241, 235, 0.1); }
.mt-detail-media { position: relative; aspect-ratio: 1; }
.mt-detail-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.mt-detail-actions { position: absolute; top: 12px; right: 12px; display: flex; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px;
  background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(8px); }
.mt-detail-actions .mt-action { width: 48px; height: 48px; padding: 16px; color: #fff; }
.mt-detail-info { padding: 16px 20px 20px; }
.mt-detail-info h2 { font-size: 24px; font-weight: 700; line-height: 32px; }
.mt-detail-meta { margin-left: 4px; font-size: 16px; line-height: 24px; color: rgba(242, 241, 235, 0.5); }
.mt-detail-count { margin-left: 6px; display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-size: 14px; font-weight: 600;
  line-height: 20px; color: rgba(242, 241, 235, 0.5); }
.mt-detail-count svg { width: 14px; height: 14px; }
.mt-detail-hook { margin-top: 4px; color: rgba(242, 241, 235, 0.7); font-size: 14px; line-height: 22.75px; }
.mt-badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.mt-badge { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border: 1px solid rgba(242, 241, 235, 0.1); border-radius: 16px;
  background: #222430; color: rgba(242, 241, 235, 0.55); font-size: 12px; line-height: 16px; white-space: nowrap; }
.mt-badge.is-strong { border-color: rgba(242, 241, 235, 0.25); color: #f2f1eb; font-weight: 700; }
.mt-detail-cta { margin-top: 20px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #ef7ab8;
  color: #2b0c1e; font-size: 16px; font-weight: 600; }
.mt-detail-right { min-width: 0; }
.mt-detail-tabs { position: sticky; top: 64px; z-index: 30; display: flex; border-bottom: 1px solid rgba(242, 241, 235, 0.1);
  background: rgba(34, 36, 48, 0.95); backdrop-filter: blur(8px); }
.mt-detail-tabs > span, .mt-detail-tabs > a { flex: 1; min-width: 0; padding: 12px 4px 10px; border-bottom: 2px solid transparent; text-align: center;
  color: rgba(242, 241, 235, 0.55); font-size: 14px; font-weight: 600; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-detail-tabs .is-active { border-bottom-color: #ef7ab8; color: #f2f1eb; }
.mt-novel { padding: 4px 32px 16px; font-family: Pretendard, "Pretendard Variable", sans-serif; font-size: 14px; line-height: 22.4px; letter-spacing: 0.28px; }
.mt-dialogue { margin: 16px 0; color: #e5ab6e; white-space: pre-wrap; }
.mt-narration { margin-top: 16px; white-space: pre-wrap; }
.mt-detail-related { padding: 16px; }
.mt-detail-related h2 { font-size: 18px; font-weight: 700; line-height: 28px; }
.mt-related-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 10px; }

.mt-footer { padding: 40px 16px 64px; color: rgba(242, 241, 235, 0.4); font-size: 12px; line-height: 18px; }

@media (max-width: 899px) {
  .mt-row > a { flex-basis: 150px; }
  .mt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-detail { grid-template-columns: 1fr; }
  .mt-detail-left { border-right: 0; }
}