/* HOLiUS Font System — unified with Theme Picker design system */
:root{
  --style-font-ui:var(--theme-font-ui,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Pretendard,"Noto Sans KR",sans-serif);
  --style-font-body:var(--theme-font-body,var(--style-font-ui));
  --style-font-display:var(--theme-font-display,var(--style-font-ui));
}
body{font-family:var(--theme-font-ui)}
main p,main article,main blockquote,.content-body,.post-content{font-family:var(--theme-font-body)}
h1,h2,h3,.page-hero h1,.home-block-head h2,.bible-writing-source{font-family:var(--theme-font-heading)}
button,input,select,textarea,.btn,.price,.meta,.badge,.bible-writing-scorebar strong{font-family:var(--theme-font-ui)}
.bible-reader-v3 .bible-reader-body,.bible-reader-v3 .verse-text,.bible-reader-v3 [data-bible-text]{font-family:var(--theme-font-reading)}
.chat-message,.market-price,.market-status,.jobs-list,.admin-page,.theme-editor-page{font-family:var(--theme-font-ui)}

/* Same tab language for Theme / Font. */
.design-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:14px 0 2px;padding:4px;
  background:var(--theme-surface-2);border:1px solid var(--theme-border);border-radius:var(--theme-radius-control)
}
.design-tab{
  min-height:40px;border:0;border-radius:calc(var(--theme-radius-control) - 2px);background:transparent;
  color:var(--theme-muted);font-weight:var(--theme-weight-strong);cursor:pointer
}
.design-tab.active{background:var(--theme-surface);color:var(--theme-text);box-shadow:var(--theme-shadow-sm)}

/* Font panel reuses the same group/card language as the Theme panel. */
.style-picker-grid{margin-top:14px}
.font-group-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.font-choice-wrap{min-width:0}
.font-choice-wrap .theme-choice{min-height:150px}
.font-choice-preview{
  display:grid;align-content:center;gap:2px;height:50px;margin:0 0 10px;padding:7px 9px;
  overflow:hidden;border:1px solid var(--theme-border);border-radius:var(--theme-radius-card);
  background:var(--theme-surface-2);font-family:var(--preview-font,var(--theme-font-ui));color:var(--theme-text)
}
.font-choice-preview b{font:700 14px/1.25 var(--preview-font,var(--theme-font-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-choice-preview span{font:500 13px/1.35 var(--preview-font,var(--theme-font-ui));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-choice-preview small{font:400 10px/1.2 var(--preview-font,var(--theme-font-ui));color:var(--theme-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.font-card-actions{grid-template-columns:1fr!important}
.font-card-actions .theme-card-action{width:100%}

@media(min-width:900px){
  .font-group-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .style-picker-grid{margin-top:10px}
  .font-group-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
  .font-choice-wrap .theme-choice{min-height:136px}
  .font-choice-preview{height:46px;margin-bottom:9px;padding:6px 8px}
  .font-choice-preview b{font-size:13px}.font-choice-preview span{font-size:12px}.font-choice-preview small{font-size:9px}
  .font-picker-foot{grid-template-columns:1fr!important}
}

@media(max-width:370px){
  .font-group-grid{gap:8px!important}
  .font-choice-wrap .theme-choice{min-height:132px}
}