/* HansamBio responsive UI & typography r1
   목적:
   1) PC에서 글자가 너무 작고 들쭉날쭉한 문제 해결 (기본 타이포 스케일 통일)
   2) 모바일에서 더 보기 편하게(간격/줄간격/그리드/버튼/탭타깃)
   적용: header.php에서 전 페이지 공통 로드 (가장 마지막에 두는 것을 권장)
*/

/* --- Base typography scale (desktop-friendly) --- */
html{
  /* 16px~18px 사이에서 화면 폭에 따라 자연스럽게 커짐 */
  font-size: clamp(16px, 1.05vw, 18px);
  -webkit-text-size-adjust: 100%;
}
body{
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -0.01em;
}

/* Headings */
h1{font-size: clamp(1.85rem, 2.4vw, 2.6rem); line-height:1.15; letter-spacing:-.03em;}
h2{font-size: clamp(1.35rem, 1.6vw, 1.75rem); line-height:1.25; letter-spacing:-.02em;}
h3{font-size: clamp(1.15rem, 1.2vw, 1.35rem); line-height:1.35;}
p, li{font-size: 1rem;}

/* Common UI text */
.section-title, .page-title{font-weight:900; letter-spacing:-.02em; color:var(--text);}
.meta, .muted, small{color:var(--muted);} 

/* --- Header / nav readability --- */
.site-header{
  min-height: 64px;
}
.site-header .brand a{font-size: 1.05rem;}
.site-header .nav a{
  font-size: .98rem;
  padding: 10px 10px;
}
.site-header .tools{font-size: .92rem;}

/* --- Cards / panels consistency --- */
.card, .hsb-card, .hsb-panel, .card-prod, .card-news{
  border-radius: 18px;
}
.card .body, .hsb-card .body{line-height:1.6;}

/* Product / news card text: make titles bigger on desktop */
.card-prod .title, .card-news .title, .hsb-card .body .t{
  font-size: 1.05rem !important;
  line-height: 1.3;
}
.card-prod .meta, .card-news .meta, .hsb-card .body .d{
  font-size: .92rem !important;
}

/* Buttons */
.hsb-btn, button, .btn{
  font-size: .98rem;
  line-height: 1;
}

/* --- Layout: consistent page width & padding --- */
main.container, .container{
  padding-left: 18px;
  padding-right: 18px;
}

/* --- Mobile optimizations --- */
@media (max-width: 860px){
  html{font-size: 16px;} /* 모바일은 과도하게 커지지 않게 고정 */
  body{line-height: 1.72;}

  .site-header{
    min-height: 58px;
  }
  .site-header .brand a{font-size: 1.02rem;}
  .site-header .tools{font-size: .9rem;}

  /* 카드 내부 글자와 여백을 모바일에서 더 읽기 좋게 */
  .card, .hsb-card, .hsb-panel, .card-prod, .card-news{border-radius: 16px;}
  .hsb-panel{padding: 14px;}

  /* 그리드: 2열→1열로 자연스럽게 */
  .grid, .hsb-grid{gap: 12px;}
}

@media (max-width: 520px){
  main.container, .container{padding-left: 14px; padding-right: 14px;}
  h1{font-size: 1.8rem;}
  h2{font-size: 1.3rem;}
  .site-header .nav a{padding: 10px 8px;}

  /* 터치 타깃 */
  .hsb-mobile-toggle{padding: 10px 12px;}
  .hsb-mobile-panel a{padding: 14px 12px; font-size: 1.02rem;}
}