/* ============================================================================
   blog-skin.css — 러너 블로그 스킨 6종

   색은 전부 여기서만 정한다.
      화면(.cshtml)에 인라인 색을 쓰면 다크 모드에서 그 색이 그대로 굳어
      "다크에서 글자가 안 보인다" 가 된다 — 우리 사이트에서 여러 번 겪은 사고다.

   구조: .bsk 가 토큰을 정의하고, .bsk--{키} 가 그 토큰만 갈아 끼운다.
         다크는 각 스킨마다 한 번 더 정의한다(라이트 값을 그대로 쓰면 대비가 무너진다).

   토큰
     --bsk-accent      포인트 색(링크·버튼·강조 선)
     --bsk-band        상단 띠 배경
     --bsk-band-text   상단 띠 위 글자
     --bsk-band-sub    상단 띠 위 흐린 글자
     --bsk-tint        아주 옅은 바탕(카드 뒤)
     --bsk-title-font  제목 글꼴(종이 스킨만 세리프)
   ========================================================================== */

.bsk {
    --bsk-accent: var(--ro-primary-600, #3A78EE);
    --bsk-band: linear-gradient(135deg, #eef4ff 0%, #f7faff 100%);
    --bsk-band-text: var(--ro-text, #0f172a);
    --bsk-band-sub: var(--ro-text-sub, #64748b);
    --bsk-tint: var(--ro-bg-soft, #f1f5f9);
    --bsk-title-font: inherit;
}

/* ── 숲길 ───────────────────────────────────────────────────────────────── */
.bsk--forest {
    --bsk-accent: #1a7f45;
    --bsk-band: linear-gradient(135deg, #e7f6ec 0%, #f4fbf6 100%);
    --bsk-tint: #f2f9f4;
}

/* ── 노을 ───────────────────────────────────────────────────────────────── */
.bsk--sunset {
    --bsk-accent: #c2410c;
    --bsk-band: linear-gradient(135deg, #ffeede 0%, #fff7f0 100%);
    --bsk-tint: #fff5ec;
}

/* ── 심야런 — 라이트 화면에서도 상단 띠만 어둡다 ────────────────────────── */
.bsk--night {
    --bsk-accent: #3f5fd6;
    --bsk-band: linear-gradient(135deg, #17223b 0%, #26355c 100%);
    --bsk-band-text: #f5f7ff;
    --bsk-band-sub: #b7c2e2;
    --bsk-tint: #f2f4fb;
}

/* ── 종이 — 긴 글 읽기용. 제목만 세리프 ─────────────────────────────────── */
.bsk--paper {
    --bsk-accent: #8a6a3b;
    --bsk-band: linear-gradient(135deg, #f6efe2 0%, #fbf7ef 100%);
    --bsk-tint: #faf6ee;
    --bsk-title-font: "Nanum Myeongjo", "Batang", serif;
}

/* ── 트랙 ───────────────────────────────────────────────────────────────── */
.bsk--track {
    --bsk-accent: #b03434;
    --bsk-band: linear-gradient(135deg, #fdeaea 0%, #fff5f5 100%);
    --bsk-tint: #fdf1f1;
}

/* ── 다크 모드 ───────────────────────────────────────────────────────────
   사이트 전체 토큰(tokens.css)과 <b>같은 방식</b>으로 쓴다.
      ① 사람이 다크를 고른 경우: [data-theme="dark"]
      ② OS 가 다크인데 아무것도 안 고른 경우: :root:not([data-theme="light"])
      한쪽만 쓰면 "OS 다크 사용자만 밝게 보인다" 같은 사고가 난다(전례가 있다).
   토큰만 다시 정의하고, 여기서 레이아웃 규칙을 만들지 않는다. */
[data-theme="dark"] .bsk {
    --bsk-band: linear-gradient(135deg, #1a2334 0%, #131a26 100%);
    --bsk-band-text: var(--ro-text, #e8edf6);
    --bsk-band-sub: var(--ro-text-sub, #9aa7bd);
    --bsk-tint: var(--ro-bg-soft, #182131);
}
[data-theme="dark"] .bsk--forest {
    --bsk-accent: #4ec27f;
    --bsk-band: linear-gradient(135deg, #14291d 0%, #101d16 100%);
}
[data-theme="dark"] .bsk--sunset {
    --bsk-accent: #ff9257;
    --bsk-band: linear-gradient(135deg, #2e1a10 0%, #1e130c 100%);
}
[data-theme="dark"] .bsk--night {
    --bsk-accent: #7f9bff;
    --bsk-band: linear-gradient(135deg, #16203a 0%, #0f1626 100%);
}
[data-theme="dark"] .bsk--paper {
    --bsk-accent: #d7b57c;
    --bsk-band: linear-gradient(135deg, #2a251c 0%, #1c1913 100%);
}
[data-theme="dark"] .bsk--track {
    --bsk-accent: #ef6b6b;
    --bsk-band: linear-gradient(135deg, #2e1516 0%, #1e0f10 100%);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .bsk {
        --bsk-band: linear-gradient(135deg, #1a2334 0%, #131a26 100%);
        --bsk-band-text: var(--ro-text, #e8edf6);
        --bsk-band-sub: var(--ro-text-sub, #9aa7bd);
        --bsk-tint: var(--ro-bg-soft, #182131);
    }
    :root:not([data-theme="light"]) .bsk--forest {
        --bsk-accent: #4ec27f;
        --bsk-band: linear-gradient(135deg, #14291d 0%, #101d16 100%);
    }
    :root:not([data-theme="light"]) .bsk--sunset {
        --bsk-accent: #ff9257;
        --bsk-band: linear-gradient(135deg, #2e1a10 0%, #1e130c 100%);
    }
    :root:not([data-theme="light"]) .bsk--night {
        --bsk-accent: #7f9bff;
        --bsk-band: linear-gradient(135deg, #16203a 0%, #0f1626 100%);
    }
    :root:not([data-theme="light"]) .bsk--paper {
        --bsk-accent: #d7b57c;
        --bsk-band: linear-gradient(135deg, #2a251c 0%, #1c1913 100%);
    }
    :root:not([data-theme="light"]) .bsk--track {
        --bsk-accent: #ef6b6b;
        --bsk-band: linear-gradient(135deg, #2e1516 0%, #1e0f10 100%);
    }
}

/* ── 스킨을 쓰는 부품들 ──────────────────────────────────────────────────── */

/* 상단 띠 */
.bsk-band {
    position: relative;
    border-radius: 18px;
    padding: 26px 22px;
    background: var(--bsk-band);
    color: var(--bsk-band-text);
    overflow: hidden;
}
.bsk-band--photo { padding: 0; }
.bsk-band__photo { display: block; width: 100%; height: 200px; object-fit: cover; }
.bsk-band__over {
    position: absolute; inset: auto 0 0 0; padding: 44px 22px 20px; color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .68) 100%);
}
.bsk-band__over .bsk-band__name, .bsk-band__over .bsk-band__tag, .bsk-band__over .bsk-band__addr { color: #fff; }

.bsk-band__name {
    margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3;
    font-family: var(--bsk-title-font); color: var(--bsk-band-text);
}
.bsk-band__tag { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--bsk-band-sub); }
.bsk-band__addr { margin: 8px 0 0; font-size: 12.5px; color: var(--bsk-band-sub); word-break: break-all; }

/* 강조가 필요한 곳은 이 클래스만 붙이면 스킨을 따라간다 */
.bsk-accent { color: var(--bsk-accent); }
.bsk-tint { background: var(--bsk-tint); }
.bsk-rule { border: 0; height: 3px; width: 44px; border-radius: 999px; background: var(--bsk-accent); }

@media (max-width: 560px) {
    .bsk-band { padding: 20px 16px; border-radius: 14px; }
    .bsk-band__name { font-size: 21px; }
    .bsk-band__photo { height: 150px; }
    .bsk-band__over { padding: 34px 16px 16px; }
}