/* ============================================================
   한입 와사삭 레이아웃 플러그인 — 스타일시트
   메인 컬러: 머디 테라코타(편안하고 세련된 톤, 기존 선명한 오렌지 대비 채도↓)
   ============================================================ */

:root{
  --hanip-cream:#F8F1E6;
  --hanip-cream-deep:#F1E8D9;
  --hanip-ink:#2B2620;
  --hanip-sub:#6E6659;
  --hanip-line:#E8DFCF;
  --hanip-terracotta:#C1633C;
  --hanip-terracotta-soft:#D9925F;
  --hanip-umber:#8A4A2E;
  --hanip-olive:#93A17E;
  --hanip-olive-deep:#71805B;
}

.hanip-home, .hanip-category-archive{
  background:var(--hanip-cream);
  color:var(--hanip-ink);
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  padding:8px 0 40px;
}
.hanip-home a, .hanip-category-archive a{ text-decoration:none; color:inherit; }

.hanip-section{ max-width:1180px; margin:0 auto; padding:26px 20px; }

.hanip-sec-title{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; }
.hanip-sec-title h2{ font-size:20px; margin:0; display:flex; align-items:center; gap:8px; }
.hanip-more{ font-size:13px; color:var(--hanip-sub); font-weight:600; white-space:nowrap; }

.hanip-cat-icon{ width:30px; height:30px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; }

/* ---- hero ---- */
.hanip-hero-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:24px; }
@media (max-width:820px){ .hanip-hero-grid{ grid-template-columns:1fr; } }

.hanip-hero-card{ background:#fff; border:1px solid var(--hanip-line); border-radius:18px; overflow:hidden; display:block; }
.hanip-hero-thumb{ height:230px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hanip-hero-thumb img{ width:100%; height:100%; object-fit:cover; }
.hanip-cat-tag{ position:absolute; top:14px; left:14px; background:rgba(0,0,0,0.32); color:#fff; font-size:12px; padding:5px 12px; border-radius:20px; font-weight:700; }
.hanip-hero-body{ padding:20px 24px 24px; }
.hanip-hero-body h2{ font-size:22px; line-height:1.4; margin:8px 0 10px; }
.hanip-hero-body p{ font-size:14px; color:var(--hanip-sub); line-height:1.65; margin:0; }
.hanip-date{ font-size:12px; color:var(--hanip-sub); }
.hanip-reading-time{ opacity:.9; }

/* ---- TL;DR 요약 박스 / 카테고리 라벨 / 읽는 시간 (공통 — 두 스킨 모두 사용) ---- */
.hanip-tldr{ background:var(--hanip-cream-deep); border-radius:12px; padding:10px 14px; margin-bottom:10px; }
.hanip-tldr-label{ font-size:12px; font-weight:800; color:var(--hanip-umber); display:block; margin-bottom:4px; }
.hanip-hero-body .hanip-tldr p{ margin:0; font-size:13px; color:var(--hanip-ink); line-height:1.5; }
.hanip-cat-label{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--hanip-terracotta); margin-bottom:4px; }

.hanip-rank-card{ background:#fff; border:1px solid var(--hanip-line); border-radius:18px; padding:20px 22px; }
.hanip-rank-card h3{ margin:0 0 12px; font-size:15px; color:var(--hanip-umber); }
.hanip-rank-item{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--hanip-cream-deep); }
.hanip-rank-item:last-child{ border-bottom:none; }
.hanip-rank-num{ font-size:17px; font-weight:800; color:var(--hanip-terracotta-soft); width:20px; flex-shrink:0; }
.hanip-rank-title{ display:block; font-size:13.5px; line-height:1.45; font-weight:600; }
.hanip-rank-cat{ display:block; font-size:11px; color:var(--hanip-sub); margin-top:3px; }

/* ---- series strip ---- */
.hanip-series-strip{ background:var(--hanip-cream-deep); border-radius:20px; }
.hanip-series-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:820px){ .hanip-series-row{ grid-template-columns:1fr; } }
.hanip-series-card{ background:#fff; border-radius:16px; padding:18px 20px; display:flex; gap:14px; align-items:center; border:1px solid var(--hanip-line); }
.hanip-series-thumb{ width:64px; height:64px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px; }
.hanip-badge-done{ background:linear-gradient(135deg,#B8C7A3,var(--hanip-olive-deep)); }
.hanip-badge-live{ background:linear-gradient(135deg,var(--hanip-terracotta-soft),var(--hanip-terracotta)); }
.hanip-series-meta{ font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:20px; display:inline-block; margin-bottom:6px; color:#fff; }
.hanip-series-meta.hanip-badge-done{ background:#E4E0D2; color:var(--hanip-sub); }
.hanip-series-card h4{ font-size:15.5px; margin:0 0 4px; }
.hanip-series-card p{ font-size:12px; color:var(--hanip-sub); margin:0; }

/* ---- category cards grid ---- */
.hanip-cat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start; }
@media (max-width:900px){ .hanip-cat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .hanip-cat-grid{ grid-template-columns:1fr; } }

.hanip-article-card{ background:#fff; border:1px solid var(--hanip-line); border-radius:14px; overflow:hidden; display:block; transition:transform .15s ease, box-shadow .15s ease; }
.hanip-article-card:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(43,38,32,0.08); }
.hanip-article-thumb{ height:120px; display:block; overflow:hidden; }
.hanip-thumb-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hanip-thumb-placeholder{ width:100%; height:100%; }
.hanip-group-warm.hanip-thumb-placeholder{ background:linear-gradient(135deg,var(--hanip-terracotta-soft),var(--hanip-terracotta)); }
.hanip-group-cool.hanip-thumb-placeholder{ background:linear-gradient(135deg,var(--hanip-olive),var(--hanip-olive-deep)); }
.hanip-group-warm.hanip-hero-thumb{ background:linear-gradient(135deg,var(--hanip-terracotta-soft),var(--hanip-terracotta)); }
.hanip-group-cool.hanip-hero-thumb{ background:linear-gradient(135deg,var(--hanip-olive),var(--hanip-olive-deep)); }
.hanip-group-warm.hanip-cat-icon{ background:var(--hanip-terracotta); color:#fff; }
.hanip-group-cool.hanip-cat-icon{ background:var(--hanip-olive-deep); color:#fff; }

.hanip-article-body{ padding:14px 16px 16px; }
.hanip-article-body h4{ font-size:15px; line-height:1.4; margin:6px 0; }
.hanip-article-body p{ font-size:12.5px; color:var(--hanip-sub); margin:0; line-height:1.5; }

/* ---- category archive banner ---- */
.hanip-cat-banner{ border-radius:20px; padding:32px 34px; color:#fff; margin-bottom:22px; }
.hanip-cat-banner.hanip-group-warm{ background:linear-gradient(135deg,var(--hanip-umber),var(--hanip-terracotta)); }
.hanip-cat-banner.hanip-group-cool{ background:linear-gradient(135deg,var(--hanip-olive-deep),var(--hanip-olive)); }
.hanip-cat-banner-label{ font-size:12px; opacity:0.85; margin-bottom:6px; letter-spacing:1px; }
.hanip-cat-banner h1{ margin:0 0 8px; font-size:24px; }
.hanip-cat-banner p{ margin:0; font-size:14px; opacity:0.92; }

.hanip-pagination{ margin-top:26px; display:flex; justify-content:center; gap:8px; }
.hanip-pagination .page-numbers{ padding:8px 14px; border-radius:10px; background:#fff; border:1px solid var(--hanip-line); font-size:13px; color:var(--hanip-ink); }
.hanip-pagination .page-numbers.current{ background:var(--hanip-terracotta); color:#fff; border-color:var(--hanip-terracotta); }

.hanip-empty{ color:var(--hanip-sub); padding:30px 0; }

/* ---- series nav box injected into single post content ---- */
.hanip-series-nav{ background:var(--hanip-cream); border-radius:16px; padding:16px 20px; margin:0 0 26px; }
.hanip-series-nav-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.hanip-series-label{ font-size:13px; font-weight:800; color:var(--hanip-umber); }
.hanip-series-progress-text{ font-size:12px; color:var(--hanip-sub); }
.hanip-progress-bar{ height:6px; background:var(--hanip-line); border-radius:3px; overflow:hidden; margin-bottom:12px; }
.hanip-progress-bar span{ display:block; height:100%; background:var(--hanip-terracotta); }
.hanip-ep-links{ display:flex; gap:8px; flex-wrap:wrap; }
.hanip-ep-links a{ font-size:12px; padding:6px 12px; border-radius:20px; background:#fff; border:1px solid var(--hanip-line); color:var(--hanip-sub); }
.hanip-ep-links a.current{ background:var(--hanip-terracotta); color:#fff; border-color:var(--hanip-terracotta); font-weight:700; }

.hanip-prevnext{ display:flex; justify-content:space-between; gap:16px; margin-top:34px; border-top:1px solid var(--hanip-line); padding-top:18px; font-size:13px; flex-wrap:wrap; }
.hanip-prevnext-item{ flex:1; }
.hanip-prevnext-item.hanip-next{ text-align:right; }
.hanip-prevnext a, .hanip-prevnext-empty{ color:var(--hanip-sub); }
.hanip-prevnext a b, .hanip-prevnext-empty b{ color:var(--hanip-ink); display:block; font-size:14px; margin-top:3px; font-weight:700; }

/* ---- preview banner ---- */
.hanip-preview-banner{ background:var(--hanip-ink); color:#fff; text-align:center; font-size:13px; padding:10px 16px; }

/* ---- newsletter CTA ---- */
.hanip-cta{ background:var(--hanip-ink); border-radius:20px; padding:32px 36px; color:#fff; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.hanip-cta h3{ margin:0 0 6px; font-size:19px; }
.hanip-cta p{ margin:0; color:#C9C2B4; font-size:13.5px; }
.hanip-cta-btn{ background:var(--hanip-terracotta); color:#fff; border:none; border-radius:24px; padding:12px 26px; font-weight:700; font-size:14px; display:inline-block; }

/* ============================================================
   롱블랙 스타일 — 두 번째 스킨
   크림 화이트 + 차콜 + 딥 네이비, 명조 제목, 미니멀 에디토리얼 톤
   .hanip-style-longblack 안에서만 적용되고, 구조(마크업)는 기본 스킨과 동일합니다.
   ============================================================ */
.hanip-style-longblack{
  --hanip-lb-bg:#F7F5F0;
  --hanip-lb-card:#FFFFFF;
  --hanip-lb-ink:#20242E;
  --hanip-lb-sub:#6B7078;
  --hanip-lb-line:#E5E2DA;
  --hanip-lb-navy:#1B2740;
  --hanip-lb-navy-soft:#33456B;
  --hanip-lb-gold:#A9895B;
  background:var(--hanip-lb-bg);
  color:var(--hanip-lb-ink);
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
  font-size:calc(15px * var(--hanip-font-scale, 1));
  transition:background .2s ease, color .2s ease;
}
/* 글자 크기 조절(A+/A-) — 카드 제목·본문 등 주요 텍스트 전반에 배율 적용 */
.hanip-style-longblack .hanip-article-body h4{ font-size:calc(15px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-article-body p{ font-size:calc(12.5px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-date{ font-size:calc(12px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-cat-label{ font-size:calc(11px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-cat-banner h1{ font-size:calc(24px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-cat-banner p{ font-size:calc(14px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-rank-title{ font-size:calc(13.5px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-series-card h4{ font-size:calc(15.5px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-series-card p{ font-size:calc(12px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-cta h3{ font-size:calc(19px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-cta p{ font-size:calc(13.5px * var(--hanip-font-scale, 1)); }
body.hanip-skin-longblack .hanip-series-label{ font-size:calc(13px * var(--hanip-font-scale, 1)); }
body.hanip-skin-longblack .hanip-series-progress-text,
body.hanip-skin-longblack .hanip-ep-links a{ font-size:calc(12px * var(--hanip-font-scale, 1)); }
body.hanip-skin-longblack .hanip-prevnext{ font-size:calc(13px * var(--hanip-font-scale, 1)); }
/* 글 본문 — 테마의 콘텐츠 영역(.entry-content 등 표준 클래스)에도 배율을 곱해
   실제 읽는 글자 크기가 함께 커지도록 합니다. 테마가 고정 px를 쓰면 효과가
   없을 수 있지만, em/rem 기반이면 자연스럽게 반영됩니다(레이아웃 파손 위험 없음). */
body.hanip-skin-longblack .entry-content,
body.hanip-skin-longblack .post-content,
body.hanip-skin-longblack article .wp-block-post-content{
  font-size:calc(1em * var(--hanip-font-scale, 1));
}
html.hanip-dark .hanip-style-longblack{
  --hanip-lb-bg:#14171F;
  --hanip-lb-card:#1D212B;
  --hanip-lb-ink:#EDEBE4;
  --hanip-lb-sub:#9A9FAE;
  --hanip-lb-line:#2B3140;
  --hanip-lb-navy:#8FA3CC;
  --hanip-lb-navy-soft:#B7C4E0;
  --hanip-lb-gold:#C9A876;
}

.hanip-style-longblack h1,
.hanip-style-longblack h2,
.hanip-style-longblack h3,
.hanip-style-longblack h4{
  font-family:'Noto Serif KR', serif;
  color:var(--hanip-lb-ink);
  font-weight:700;
}
.hanip-style-longblack .hanip-sec-title h2{ font-size:calc(19px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-more{ color:var(--hanip-lb-navy); }
.hanip-style-longblack .hanip-date,
.hanip-style-longblack .hanip-sub,
.hanip-style-longblack .hanip-empty{ color:var(--hanip-lb-sub); }

/* 카테고리 라벨 — 컬러 배지 대신 스몰캡스 텍스트 */
.hanip-style-longblack .hanip-cat-label{ color:var(--hanip-lb-gold); letter-spacing:1.2px; }
.hanip-style-longblack .hanip-cat-icon{ background:var(--hanip-lb-navy) !important; color:#fff; }

/* 히어로 — 이미지 위 다크 오버레이 텍스트 박스 */
.hanip-style-longblack .hanip-hero-card{ background:var(--hanip-lb-card); border:1px solid var(--hanip-lb-line); border-radius:6px; position:relative; overflow:hidden; }
.hanip-style-longblack .hanip-hero-thumb{ display:block; height:440px; }
.hanip-style-longblack .hanip-hero-thumb::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,23,31,0) 32%, rgba(20,23,31,0.92) 100%);
}
.hanip-style-longblack .hanip-cat-tag{ background:rgba(255,255,255,0.16); backdrop-filter:blur(2px); border:1px solid rgba(255,255,255,0.3); z-index:2; }
.hanip-style-longblack .hanip-hero-body{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:30px 32px 28px; color:#fff;
}
.hanip-style-longblack .hanip-hero-body h2{ color:#fff; font-size:calc(26px * var(--hanip-font-scale, 1)); }
.hanip-style-longblack .hanip-hero-body .hanip-date{ color:rgba(255,255,255,0.72); }
.hanip-style-longblack .hanip-hero-body .hanip-tldr{ background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.28); }
.hanip-style-longblack .hanip-hero-body .hanip-tldr-label{ color:rgba(255,255,255,0.85); }
.hanip-style-longblack .hanip-hero-body .hanip-tldr p{ color:#fff; }
.hanip-style-longblack .hanip-hero-excerpt{ color:rgba(255,255,255,0.82) !important; font-size:calc(14px * var(--hanip-font-scale, 1)); }

.hanip-style-longblack .hanip-rank-card{ background:var(--hanip-lb-card); border:1px solid var(--hanip-lb-line); border-radius:6px; }
.hanip-style-longblack .hanip-rank-card h3{ color:var(--hanip-lb-navy); font-family:'Noto Serif KR', serif; }
.hanip-style-longblack .hanip-rank-item{ border-bottom-color:var(--hanip-lb-line); }
.hanip-style-longblack .hanip-rank-num{ color:var(--hanip-lb-gold); }
.hanip-style-longblack .hanip-rank-cat{ color:var(--hanip-lb-sub); }

/* 시리즈 스트립 */
.hanip-style-longblack .hanip-series-strip{ background:var(--hanip-lb-card); border:1px solid var(--hanip-lb-line); border-radius:8px; }
.hanip-style-longblack .hanip-series-card{ background:var(--hanip-lb-bg); border:1px solid var(--hanip-lb-line); border-radius:4px; }
.hanip-style-longblack .hanip-badge-done,
.hanip-style-longblack .hanip-badge-live{ background:var(--hanip-lb-navy); }
.hanip-style-longblack .hanip-series-meta.hanip-badge-done{ background:var(--hanip-lb-line); color:var(--hanip-lb-sub); }
.hanip-style-longblack .hanip-series-card p{ color:var(--hanip-lb-sub); }

/* 카드형 그리드 — 컬러풀한 그라데이션 대신 미니멀 플랫 처리 */
.hanip-style-longblack .hanip-article-card{ background:var(--hanip-lb-card); border:1px solid var(--hanip-lb-line); border-radius:4px; }
.hanip-style-longblack .hanip-article-card:hover{ box-shadow:0 6px 18px rgba(20,23,31,0.10); }
.hanip-style-longblack .hanip-article-body p{ color:var(--hanip-lb-sub); }
.hanip-style-longblack .hanip-group-warm.hanip-thumb-placeholder,
.hanip-style-longblack .hanip-group-cool.hanip-thumb-placeholder{ background:var(--hanip-lb-line); }
.hanip-style-longblack .hanip-group-warm.hanip-hero-thumb,
.hanip-style-longblack .hanip-group-cool.hanip-hero-thumb{ background:var(--hanip-lb-line); }

/* 카테고리 아카이브 배너 */
.hanip-style-longblack .hanip-cat-banner{ border-radius:6px; }
.hanip-style-longblack .hanip-cat-banner.hanip-group-warm,
.hanip-style-longblack .hanip-cat-banner.hanip-group-cool{ background:var(--hanip-lb-navy); }
.hanip-style-longblack .hanip-cat-banner h1{ color:#fff; font-family:'Noto Serif KR', serif; }

.hanip-style-longblack .hanip-pagination .page-numbers{ background:var(--hanip-lb-card); border-color:var(--hanip-lb-line); color:var(--hanip-lb-ink); }
.hanip-style-longblack .hanip-pagination .page-numbers.current{ background:var(--hanip-lb-navy); border-color:var(--hanip-lb-navy); }

/* 글 상단 시리즈 내비게이션 — 본문(the_content)에 직접 삽입되기 때문에
   .hanip-style-longblack wrapper가 없어, <body> 스킨 클래스로 판단합니다. */
body.hanip-skin-longblack .hanip-series-nav{
  background:#F7F5F0; border:1px solid #E5E2DA; font-family:'Noto Sans KR', sans-serif;
}
html.hanip-dark body.hanip-skin-longblack .hanip-series-nav{ background:#1D212B; border-color:#2B3140; }
body.hanip-skin-longblack .hanip-series-label{ color:#1B2740; font-weight:800; }
html.hanip-dark body.hanip-skin-longblack .hanip-series-label{ color:#8FA3CC; }
body.hanip-skin-longblack .hanip-progress-bar{ background:#E5E2DA; }
body.hanip-skin-longblack .hanip-progress-bar span{ background:#1B2740; }
body.hanip-skin-longblack .hanip-ep-links a{ background:#fff; border-color:#E5E2DA; color:#6B7078; }
body.hanip-skin-longblack .hanip-ep-links a.current{ background:#1B2740; border-color:#1B2740; }
body.hanip-skin-longblack .hanip-prevnext{ border-top-color:#E5E2DA; }
body.hanip-skin-longblack .hanip-prevnext a b,
body.hanip-skin-longblack .hanip-prevnext-empty b{ color:#20242E; }
html.hanip-dark body.hanip-skin-longblack .hanip-prevnext a b,
html.hanip-dark body.hanip-skin-longblack .hanip-prevnext-empty b{ color:#EDEBE4; }

/* 뉴스레터 CTA */
.hanip-style-longblack .hanip-cta{ background:var(--hanip-lb-navy); border-radius:6px; }
.hanip-style-longblack .hanip-cta h3{ color:#fff; font-family:'Noto Serif KR', serif; }
.hanip-style-longblack .hanip-cta-btn{ background:var(--hanip-lb-gold); }

.hanip-style-longblack .hanip-preview-banner{ background:var(--hanip-lb-navy); }

/* ---- 롱블랙 전용 플로팅 툴바 (다크모드 · 글자 크기 · 공유) ---- */
.hanip-toolbar{
  position:fixed; right:20px; bottom:90px; z-index:9999;
  display:flex; flex-direction:column; gap:8px;
}
.hanip-toolbar-btn{
  width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:#1B2740; color:#fff; font-size:13px; font-weight:700;
  font-family:'Noto Sans KR', sans-serif;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
  transition:background .15s ease, transform .15s ease;
}
.hanip-toolbar-btn:hover{ background:#33456B; transform:translateY(-2px); }
html.hanip-dark .hanip-toolbar-btn{ background:#EDEBE4; color:#1B2740; }
html.hanip-dark .hanip-toolbar-btn:hover{ background:#fff; }

.hanip-toast{
  position:fixed; left:50%; bottom:40px; z-index:10000;
  transform:translate(-50%,10px);
  background:#1B2740; color:#fff; font-size:13px;
  padding:10px 18px; border-radius:24px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.hanip-toast-show{ opacity:1; transform:translate(-50%,0); }

@media (max-width:600px){
  .hanip-style-longblack .hanip-hero-thumb{ height:320px; }
  .hanip-toolbar{ right:12px; bottom:20px; }
}

/* ============================================================
   글 하단 저자 신뢰 박스 — 새 레이아웃 적용 여부와 무관하게 항상 노출.
   테마 색상을 모르는 상태에서도 자연스럽게 보이도록 중립 톤으로 구성.
   ============================================================ */
.hanip-author-box{
  display:flex; gap:14px; align-items:flex-start;
  margin:36px 0 0; padding:18px 20px;
  background:#F7F5F0; border:1px solid #E5E2DA; border-radius:12px;
  font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
}
.hanip-author-avatar img{ border-radius:50%; display:block; }
.hanip-author-name{ font-weight:800; font-size:14px; margin-bottom:4px; color:#2B2620; }
.hanip-author-bio{ font-size:13px; color:#6E6659; line-height:1.6; margin:0; }
html.hanip-dark .hanip-author-box{ background:#1D212B; border-color:#2B3140; }
html.hanip-dark .hanip-author-name{ color:#EDEBE4; }
html.hanip-dark .hanip-author-bio{ color:#9A9FAE; }
@media (max-width:480px){
  .hanip-author-box{ flex-direction:column; align-items:flex-start; }
}