/* ONE SONG lyric card PDF */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --lc-bg:     #fafaf8;
    --lc-paper:  #ffffff;
    --lc-ink:    #1a1a1a;
    --lc-muted:  #888;
    --lc-border: #e0ddd8;
    --lc-accent: #c97c5a;
}

html, body {
    background: var(--lc-bg);
    font-family: 'Hiragino Mincho ProN', 'Yu Mincho', 'YuMincho', '游明朝', serif;
    color: var(--lc-ink);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* =========================================================
   操作バー
   ========================================================= */
.lc-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #1a1a1a;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    z-index: 1000;
    flex-wrap: wrap;
}
.lc-bar__title {
    font-size: 13px; opacity: .7; font-family: sans-serif; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lc-bar__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; background: var(--lc-accent); color: #fff;
    border: none; border-radius: 50px; font-size: 13px; font-weight: 600;
    font-family: sans-serif; cursor: pointer; transition: opacity .2s; white-space: nowrap;
}
.lc-bar__btn:hover { opacity: .85; }
.lc-bar__btn:disabled { opacity: .5; cursor: not-allowed; }

/* ローディングオーバーレイ */
#lc-loading {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.65);
    z-index: 9999;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
    color: #fff; font-family: sans-serif; font-size: 14px;
}
#lc-loading.is-active { display: flex; }
.lc-spinner {
    width: 40px; height: 40px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media print {
    .lc-bar { display: none; }
}

/* =========================================================
   ページ本体
   ========================================================= */
.lc-wrap { padding-top: 56px; }

@media print { .lc-wrap { padding-top: 0; } }

/* A4ページ */
.lc-page {
    width: 210mm;
    min-height: 297mm;
    background: var(--lc-paper);
    margin: 24px auto;
    padding: 20mm 18mm;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    page-break-after: always;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 700px) {
    .lc-page {
        width: 100%; min-height: auto; margin: 12px 0;
        padding: 10vw 6vw; box-shadow: none;
    }
}

@media print {
    .lc-page { width: 210mm; min-height: 297mm; margin: 0; padding: 20mm 18mm; box-shadow: none; }
}

/* ページ1：ロゴ＋タイトル＋歌詞 */
.lc-logo { text-align: center; margin-bottom: 10mm; }
.lc-logo img { height: 28px; opacity: .75; }
.lc-logo__text { font-size: 12px; letter-spacing: .2em; color: var(--lc-muted); font-family: sans-serif; text-transform: uppercase; }

.lc-title-block {
    text-align: center; border-top: 1px solid var(--lc-border);
    border-bottom: 1px solid var(--lc-border); padding: 8mm 0; margin-bottom: 10mm;
}
.lc-title { font-size: 26px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; }
.lc-sub { font-size: 13px; color: var(--lc-muted); margin-top: 4px; letter-spacing: .1em; }
.lc-name { font-size: 12px; color: var(--lc-muted); margin-top: 6px; font-family: sans-serif; }

.lc-lyrics {
    font-size: 14px; line-height: 2.2; letter-spacing: .06em;
    white-space: pre-wrap; word-break: break-word;
}

.lc-footer {
    position: absolute; bottom: 12mm; left: 18mm; right: 18mm;
    text-align: center; font-size: 10px; color: var(--lc-muted);
    font-family: sans-serif; letter-spacing: .12em;
    border-top: 1px solid var(--lc-border); padding-top: 4mm;
}

/* ページ2：画像＋ライナーノーツ */
.lc-page2-image { width: 100%; max-height: 90mm; object-fit: cover; border-radius: 6px; margin-bottom: 10mm; display: block; }
.lc-liner-label { font-size: 10px; letter-spacing: .2em; color: var(--lc-accent); text-transform: uppercase; font-family: sans-serif; margin-bottom: 3mm; }
.lc-liner-title { font-size: 18px; font-weight: 700; margin-bottom: 6mm; border-bottom: 1px solid var(--lc-border); padding-bottom: 3mm; }
.lc-liner-text { font-size: 13px; line-height: 2; white-space: pre-wrap; word-break: break-word; }

/* エラー */
.lc-error { text-align: center; padding: 60px 20px; font-family: sans-serif; }
.lc-error h1 { font-size: 20px; margin-bottom: 12px; }
.lc-error p  { font-size: 14px; color: #666; }

/* Accessibility: stable touch targets and keyboard focus */
.lc-bar__btn {
  min-width: 44px;
  min-height: 44px;
}

.lc-bar__btn:focus-visible {
  outline: 3px solid rgba(212, 114, 143, 0.85);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .lyric-card *,
  .lyric-card *::before,
  .lyric-card *::after,
  .lc-bar,
  .lc-bar * {
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.001ms !important;
  }
}