/* ===== 韩饭网 · MacCMS 风格前台布局（自适应） ===== */
:root{
  --hf-border: rgba(0,0,0,.12);
  --hf-muted: rgba(0,0,0,.65);
  --hf-bg: #fff;
  --hf-card: #fff;
  --hf-radius: 12px;
  --hf-gap: 16px;
  --hf-accent: #ff4d4f;
}

.hf-bc{font-size:14px;margin:12px 0;opacity:.85}
.hf-container{max-width:1200px;margin:0 auto;padding:0 12px}
.hf-card{background:var(--hf-card);border:1px solid rgba(0,0,0,.08);border-radius:var(--hf-radius)}
.hf-row{display:flex;gap:var(--hf-gap)}
.hf-main{flex:1;min-width:0}
.hf-side{width:320px;flex:0 0 320px}
@media (max-width: 991px){ .hf-row{flex-direction:column} .hf-side{width:auto;flex:1} }

.hf-hero{display:flex;gap:18px;padding:16px}
.hf-hero .hf-poster{width:220px;flex:0 0 220px}
.hf-hero .hf-poster img{width:100%;height:auto;display:block;border-radius:12px}
.hf-hero .hf-poster .hf-ph{aspect-ratio:2/3;background:#eee;border-radius:12px}
.hf-hero h1{font-size:22px;line-height:1.2;margin:0 0 8px}
.hf-hero .hf-sub{color:var(--hf-muted);font-size:14px;margin:6px 0}
.hf-hero .hf-kv{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0;color:var(--hf-muted);font-size:14px}
.hf-hero .hf-kv span{white-space:nowrap}
.hf-hero .hf-score{display:flex;align-items:center;gap:10px;margin:8px 0}
.hf-hero .hf-score .hf-score-num{font-weight:800;font-size:20px;color:#faad14}
.hf-hero .hf-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hf-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--hf-border);text-decoration:none;background:#fff}
.hf-btn-primary{background:var(--hf-accent);border-color:var(--hf-accent);color:#fff}
.hf-btn:hover{opacity:.92}

@media (max-width: 640px){
  .hf-hero{flex-direction:row;gap:12px}
  .hf-hero .hf-poster{width:130px;flex:0 0 130px}
  .hf-hero h1{font-size:18px}
}

/* tabs */
.hf-tabs{display:flex;gap:14px;border-bottom:1px solid rgba(0,0,0,.08);padding:0 12px}
.hf-tabs a{display:inline-block;padding:12px 6px;text-decoration:none;color:inherit;border-bottom:2px solid transparent}
.hf-tabs a.on{border-bottom-color:var(--hf-accent);color:var(--hf-accent);font-weight:700}

/* pills */
.hf-pills{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.hf-pill{display:inline-block;padding:6px 10px;border:1px solid var(--hf-border);border-radius:10px;text-decoration:none;background:#fff}
.hf-pill:hover{background:#fafafa}
.hf-pill.on{font-weight:700;border-color:rgba(255,77,79,.45);background:rgba(255,77,79,.06)}
.hf-pill.mini{padding:5px 9px;font-size:13px;border-radius:999px}

/* detail sections */
.hf-section{margin-top:14px}
.hf-section h2{font-size:16px;margin:0 0 8px}
.hf-desc{color:var(--hf-muted);font-size:14px;line-height:1.65}
.hf-split{height:1px;background:rgba(0,0,0,.06);margin:12px 0}

/* player layout */
.hf-player-wrap{background:#0b0b0b;border-radius:14px;overflow:hidden}
.hf-player-wrap iframe,.hf-player-wrap video{width:100%;aspect-ratio:16/9;border:0;display:block;background:#000}
.hf-play-grid{display:flex;gap:var(--hf-gap)}
.hf-play-left{flex:1;min-width:0}
.hf-play-right{width:340px;flex:0 0 340px}
@media (max-width: 991px){ .hf-play-grid{flex-direction:column} .hf-play-right{width:auto;flex:1} }

/* episode box like MacCMS right panel */
.hf-epbox{padding:12px}
.hf-epbox .hf-ep-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hf-epbox .hf-ep-head h3{font-size:15px;margin:0}
.hf-epbox .hf-ep-head .hf-small{color:var(--hf-muted);font-size:12px}
.hf-epbox .hf-ep-lines{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hf-epbox .hf-ep-list{margin-top:10px}

/* grids */
.hf-grid-5{display:grid;grid-template-columns:repeat(5, 1fr);gap:12px}
@media (max-width: 991px){ .hf-grid-5{grid-template-columns:repeat(4, 1fr)} }
@media (max-width: 768px){ .hf-grid-5{grid-template-columns:repeat(3, 1fr)} }
@media (max-width: 520px){ .hf-grid-5{grid-template-columns:repeat(2, 1fr)} }

.hf-vcard{display:block;text-decoration:none}
.hf-vcard .hf-vthumb{border-radius:14px;overflow:hidden;background:#f0f0f0}
.hf-vcard .hf-vthumb img{width:100%;height:auto;display:block}
.hf-vcard .hf-vthumb .hf-ph{aspect-ratio:2/3;background:#e9e9e9}
.hf-vcard .hf-vtitle{margin-top:8px;font-weight:700;font-size:14px;line-height:1.35}
.hf-vcard .hf-vmeta{margin-top:4px;font-size:12px;color:var(--hf-muted)}

/* sidebar hot list */
.hf-sidebox{padding:12px}
.hf-sidebox h3{font-size:15px;margin:0 0 8px}
.hf-rank{margin:0;padding:0;list-style:none}
.hf-rank li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px dashed rgba(0,0,0,.10)}
.hf-rank li:first-child{border-top:0}
.hf-rank a{text-decoration:none}
.hf-rank .n{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#f2f3f5;font-size:12px}
.hf-rank .pv{font-size:12px;color:var(--hf-muted)}

/* comments spacing */
#comments{margin-top:18px}