/* ===== extracted from work.php ===== */

body { padding-top: 60px; }
    .work-detail { max-width: 800px; margin: 0 auto; padding: 32px 20px; }
    .breadcrumb { font-size: 13px; color: var(--text3); margin-bottom: 24px; }
    .breadcrumb a { color: var(--text2); text-decoration: none; transition: color .2s; }
    .breadcrumb a:hover { color: var(--accent); }

    .work-cover-wrap { margin-bottom: 28px; border-radius: 12px; overflow: hidden; background: var(--bg3); border: 1px solid var(--line); }
    .work-cover-wrap img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 600px; }

    .work-title { font-family: var(--serif); font-size: 28px; font-weight: 400; color: #fff; margin: 0 0 20px; letter-spacing: .02em; line-height: 1.3; }

    .work-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
    .work-meta-item { font-size: 12px; color: var(--text3); }
    .work-meta-item a { color: var(--accent); text-decoration: none; }
    .work-meta-item a:hover { text-decoration: underline; }

    .work-description { font-size: 14px; line-height: 1.9; color: var(--text2); margin-bottom: 32px; }
    .work-description p { margin: 0 0 14px; }
    .work-description p:last-child { margin-bottom: 0; }

    .work-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }
    .work-btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 12px 28px; border-radius: 8px;
      font-size: 13px; font-weight: 600; text-decoration: none;
      letter-spacing: .06em; transition: all .3s;
    }
    .work-btn-primary {
      background: linear-gradient(135deg, #FFD600 0%, #f0c800 100%);
      color: #0a0a0a; border: none;
    }
    .work-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 20px rgba(255,214,0,.3); }
    .work-btn-ghost {
      background: transparent;
      border: 1px solid var(--line); color: var(--text2);
    }
    .work-btn-ghost:hover { border-color: var(--accent2); color: var(--accent); }

    @media (max-width: 768px) {
      .work-title { font-size: 22px; }
      .work-cover-wrap img { max-height: 400px; }
    }