/* =========================================================
   건강퍼스트 공통 스타일 (모든 페이지 공유)
   - 디자인 토큰 / 기본 타이포 / 상단 GNB / 페이지 히어로
   - 본문(아티클) / 카드 / 참고자료 / 푸터
   ========================================================= */

:root{
  /* brand */
  --primary:#0A6E8A;
  --primary-deep:#08566C;
  --primary-tint:#EAF4F7;
  --primary-line:#B9D9E3;

  /* neutrals */
  --bg:#FFFFFF;
  --bg-subtle:#F5F8F9;
  --ink:#1A202C;
  --ink-soft:#4A5568;
  --ink-faint:#64748B;
  --border:#DDE3E8;
  --border-strong:#C5CED6;

  /* status */
  --green-bg:#EAF6EF;
  --green-text:#1F7A4D;
  --green-border:#BFE3CD;
  --amber-bg:#FFF6E0;
  --amber-text:#8A5A00;
  --amber-border:#F0D28C;
  --red-bg:#FDECEA;
  --red-text:#B42318;
  --red-border:#F5C2BD;

  /* footer */
  --footer-bg:#12303B;
  --footer-ink:#C9D6DC;
  --footer-faint:#8FA6B0;

  /* ads */
  --ad-bg:#F3F5F6;
  --ad-border:#DDE3E8;
  --ad-label:#8A96A0;

  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 4px 16px rgba(16,24,40,.08);

  --container:1200px;
  --container-narrow:800px;
  --gnb-h:68px;

  --font-body:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,system-ui,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
}

*{ box-sizing:border-box; }
html{ font-size:100%; scroll-padding-top:calc(var(--gnb-h) + 16px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1.0625rem;
  line-height:1.7;
  letter-spacing:-.01em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ font-family:var(--font-body); color:var(--ink); margin:0; letter-spacing:-.025em; text-wrap:balance; }
p{ margin:0; }
a{ color:var(--primary); }
a:hover{ color:var(--primary-deep); }
button{ font-family:inherit; word-break:keep-all; }
:focus-visible{ outline:3px solid var(--primary); outline-offset:2px; border-radius:2px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
[hidden]{ display:none !important; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.container.narrow{ max-width:var(--container-narrow); }
@media (max-width:560px){ .container{ padding:0 16px; } }

.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--primary); color:#fff; padding:10px 16px;
  border-radius:var(--radius-sm); font-weight:700; text-decoration:none;
}
.skip-link:focus{ top:12px; color:#fff; }

/* ---------------- language buttons (한국어 / Global): 글자 크기 버튼 오른쪽 ---------------- */
.lang-switch{ display:flex; align-items:center; }
.lang-btn{
  height:32px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff;
  color:var(--ink-soft); font-size:.82rem; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap;
}
.lang-btn:first-child{ border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.lang-btn:last-child{ border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-left:-1px; }
.lang-btn:hover{ border-color:var(--primary); color:var(--primary); position:relative; }
.lang-btn[aria-current="page"]{ background:var(--primary); border-color:var(--primary); color:#fff; position:relative; }

/* 영어(Global) 페이지: 단어 단위 줄바꿈과 영문 메뉴 폭 조정 */
html[lang="en"] body{ word-break:normal; overflow-wrap:break-word; letter-spacing:0; }
html[lang="en"] button{ word-break:normal; }
html[lang="en"] .read-more-card::after{ content:'Read more →'; }
@media (min-width:1181px){
  html[lang="en"] .gnb-menu a{ font-size:.9rem; padding-left:6px; padding-right:6px; }
}

/* ---------------- GNB ---------------- */
.gnb{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(1.4) blur(6px);
}
.gnb-inner{ display:flex; align-items:center; gap:32px; min-height:var(--gnb-h); }
.gnb-brand{
  display:flex; align-items:center; gap:10px;
  color:var(--ink); text-decoration:none; flex:none;
}
.gnb-brand:hover{ color:var(--ink); }
.gnb-logo{
  width:34px; height:34px; border-radius:var(--radius-md);
  background:var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.gnb-logo svg{ width:20px; height:20px; }
.gnb-name{ font-size:1.2rem; font-weight:800; letter-spacing:-.03em; }

.gnb-menu{ display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none; }
.gnb-menu a{
  display:block; padding:22px 14px;
  color:var(--ink); text-decoration:none;
  font-weight:600; font-size:1rem;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.gnb-menu a:hover{ color:var(--primary); }
.gnb-menu a[aria-current="page"]{ color:var(--primary); border-bottom-color:var(--primary); }

.gnb-util{ margin-left:auto; display:flex; align-items:center; gap:12px; }
.font-size-control{ display:flex; align-items:center; gap:2px; }
.fs-label{ font-size:.8rem; color:var(--ink-faint); margin-right:6px; white-space:nowrap; }
.fs-btn{
  min-width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff;
  color:var(--ink-soft); font-weight:700; line-height:1;
  border-radius:var(--radius-sm); cursor:pointer; padding:0 6px;
}
.fs-btn[data-size="100%"]{ font-size:.8rem; }
.fs-btn[data-size="118%"]{ font-size:.95rem; }
.fs-btn[data-size="136%"]{ font-size:1.1rem; }
.fs-btn:hover{ border-color:var(--primary); color:var(--primary); }
.fs-btn[aria-pressed="true"]{ background:var(--primary); border-color:var(--primary); color:#fff; }

.gnb-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1px solid var(--border); background:#fff; color:var(--ink);
  border-radius:var(--radius-sm); cursor:pointer;
}
.gnb-toggle svg{ width:22px; height:22px; }

/* 메뉴·글자 크기·언어 버튼이 한 줄에 들어가도록 간격을 줄이고, 1180px 이하에서는 햄버거 메뉴로 전환.
   '글자 크기' 문구는 공간이 부족해 숨기고 버튼의 aria-label로 안내합니다. */
.gnb-menu a{ white-space:nowrap; }
.gnb-inner{ gap:20px; }
.gnb-menu{ gap:0; }
.gnb-menu a{ padding-left:7px; padding-right:7px; }
.gnb-util{ gap:8px; }
.fs-label{ display:none; }
@media (max-width:1180px){
  .gnb-inner{ flex-wrap:wrap; gap:12px; min-height:60px; }
  .gnb-toggle{ display:inline-flex; }
  .fs-label{ display:none; }
  .gnb-nav{ order:3; flex-shrink:0; flex-basis:calc(100% + 48px); display:none; border-top:1px solid var(--border); margin:0 -24px; padding:0 24px; }
  .gnb.open .gnb-nav{ display:block; }
  .gnb-menu{ flex-direction:column; align-items:stretch; gap:0; padding:6px 0 10px; }
  .gnb-menu a{ padding:12px 4px; border-bottom:none; border-left:3px solid transparent; padding-left:12px; }
  .gnb-menu a[aria-current="page"]{ border-left-color:var(--primary); background:var(--primary-tint); }
}
@media (max-width:560px){
  .gnb-nav{ flex-basis:calc(100% + 32px); margin:0 -16px; padding:0 16px; }
  .gnb-name{ font-size:1.08rem; }
  /* 휴대폰: 1줄 = 로고 + 메뉴 버튼, 2줄 = 글자 크기 + 언어 버튼(오른쪽 정렬) */
  .gnb-inner{ row-gap:8px; padding-top:10px; padding-bottom:10px; }
  .gnb-util{ display:contents; }
  .gnb-brand{ order:1; }
  .gnb-toggle{ order:2; margin-left:auto; }
  .gnb-inner::after{ content:''; order:3; flex-basis:100%; height:0; }
  .font-size-control{ order:4; margin-left:auto; }
  .lang-switch{ order:5; }
  .gnb-nav{ order:6; }
}

/* ---------------- page hero (sub pages) ---------------- */
.page-hero{
  background:var(--bg-subtle);
  border-bottom:1px solid var(--border);
  padding:40px 0 36px;
}
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:.88rem; color:var(--ink-faint); margin-bottom:18px;
}
.breadcrumb a{ color:var(--ink-faint); text-decoration:none; }
.breadcrumb a:hover{ color:var(--primary); text-decoration:underline; }
.breadcrumb .sep{ color:var(--border-strong); }

.article-tag{
  display:inline-block;
  font-size:.8rem; font-weight:700; letter-spacing:.02em;
  color:var(--primary-deep); background:var(--primary-tint);
  border:1px solid var(--primary-line);
  border-radius:var(--radius-sm); padding:3px 10px;
}
.article-title{ margin-top:14px; font-size:2.1rem; font-weight:800; line-height:1.32; }
.article-meta{ margin-top:12px; color:var(--ink-faint); font-size:.9rem; }
@media (max-width:560px){
  .page-hero{ padding:28px 0 26px; }
  .article-title{ font-size:1.6rem; }
}

/* ---------------- content ---------------- */
.content{ padding-top:40px; padding-bottom:56px; display:flex; flex-direction:column; gap:40px; }

.article-body{ display:flex; flex-direction:column; gap:18px; }
.article-body h2{
  font-size:1.35rem; font-weight:700; line-height:1.4;
  margin-top:18px; padding-left:14px;
  border-left:4px solid var(--primary);
}
.article-body > h2:first-child{ margin-top:0; }
.article-body p{ font-size:1.0625rem; color:var(--ink); line-height:1.85; }
.article-body ul{ margin:0; padding-left:1.25em; display:flex; flex-direction:column; gap:8px; }
.article-body li{ font-size:1.03rem; color:var(--ink); line-height:1.7; }
.article-body li::marker{ color:var(--primary); }
.article-body strong{ color:var(--ink); font-weight:700; }
.article-body h3{ font-size:1.15rem; font-weight:700; line-height:1.45; margin-top:6px; color:var(--primary-deep); }
.article-body ol{ margin:0; padding-left:1.4em; display:flex; flex-direction:column; gap:8px; }
.article-body ol li::marker{ font-weight:700; }
/* 운동 방법 단계별 그림 (assets/exercise/*.svg, 그림 안에 순서 번호·테두리 포함) */
.article-body ol.ex-steps{ gap:28px; }
.ex-fig{ margin:14px 0 0; }
.article-body > .ex-fig{ margin:0; }
.ex-fig img{ display:block; width:100%; max-width:560px; height:auto; }

/* 운동 글: 한눈에 보기 표 / 주의사항 박스 */
.summary-table{ width:100%; border-collapse:collapse; font-size:1rem; border-top:2px solid var(--primary); }
.summary-table th, .summary-table td{ padding:12px 14px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top; line-height:1.6; }
.summary-table th{ width:30%; background:var(--bg-subtle); font-weight:700; color:var(--ink); }
.summary-table thead th{ width:auto; background:var(--primary-tint); color:var(--primary-deep); }
.table-scroll{ overflow-x:auto; }
.callout-caution{
  padding:18px 20px;
  border:1px solid var(--amber-border); border-left:4px solid var(--amber-text);
  border-radius:var(--radius-sm); background:var(--amber-bg);
}
.callout-caution .callout-title{ font-weight:800; color:var(--amber-text); margin-bottom:8px; }
.callout-caution ul{ gap:6px; }
.callout-caution li::marker{ color:var(--amber-text); }
.callout-stop{
  padding:18px 20px;
  border:1px solid var(--red-border); border-left:4px solid var(--red-text);
  border-radius:var(--radius-sm); background:var(--red-bg);
}
.callout-stop .callout-title{ font-weight:800; color:var(--red-text); margin-bottom:8px; }
.callout-stop li::marker{ color:var(--red-text); }

/* 모든 게시글 하단: 자료 기준 시점과 의료 상담 안내 */
.callout-notice{
  padding:16px 18px;
  border:1px solid var(--primary-line); border-left:4px solid var(--primary);
  border-radius:var(--radius-sm); background:var(--primary-tint);
  font-size:.95rem; color:var(--ink);
}
.callout-notice .callout-title{ font-weight:800; color:var(--primary-deep); margin-bottom:6px; }
.article-body .callout-notice ul{ gap:4px; }
.article-body .callout-notice li{ font-size:.95rem; }

.callout-disclaimer{
  margin-top:10px; padding:16px 18px;
  border:1px solid var(--border); border-left:4px solid var(--ink-faint);
  border-radius:var(--radius-sm);
  background:var(--bg-subtle); color:var(--ink-soft); font-size:.95rem;
}

.cta-row{ display:flex; flex-wrap:wrap; gap:10px; }
.cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--primary); color:#fff; text-decoration:none;
  font-weight:700; padding:14px 26px; border-radius:var(--radius-md);
  font-size:1.02rem; border:1px solid var(--primary);
}
.cta-btn:hover{ background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }
.cta-btn.secondary{ background:#fff; color:var(--primary); }
.cta-btn.secondary:hover{ background:var(--primary-tint); color:var(--primary-deep); }

/* section blocks */
.section-title{ font-size:1.35rem; font-weight:700; }
.section-desc{ margin-top:8px; color:var(--ink-soft); font-size:1rem; }
.panel-desc{ margin-top:8px; color:var(--ink-soft); font-size:1rem; }

.ref-panel{ border-top:2px solid var(--ink); padding-top:24px; }
.ref-panel h2{ font-size:1.1rem; font-weight:700; }
.ref-list{ margin-top:14px; display:flex; flex-direction:column; }
.ref-item{
  font-size:.92rem; color:var(--ink-soft); line-height:1.6;
  padding:12px 0; border-bottom:1px solid var(--border);
}
.ref-item .org{ font-weight:700; color:var(--ink); }
.ref-item a{ word-break:break-all; color:var(--primary); }

/* related / card grid */
.band{ background:var(--bg-subtle); border-top:1px solid var(--border); padding:48px 0 56px; }
.band-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:12px; }
.band-head h2{ font-size:1.5rem; font-weight:800; }
.more-link{ font-weight:700; font-size:.95rem; text-decoration:none; white-space:nowrap; }
.more-link:hover{ text-decoration:underline; }
.more-links{ display:flex; flex-wrap:wrap; gap:6px 20px; }

.read-more-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; margin-top:22px; }
.read-more-card{
  display:flex; flex-direction:column; gap:8px;
  padding:22px 22px 20px;
  border-radius:var(--radius-lg);
  border:1px solid var(--border); background:#fff;
  color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.read-more-card:hover{ border-color:var(--primary); box-shadow:var(--shadow-md); color:var(--ink); transform:translateY(-2px); }
.rm-tag{
  align-self:flex-start;
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
  color:var(--primary-deep);
}
.rm-title{ font-size:1.06rem; font-weight:700; line-height:1.45; }
.rm-desc{ color:var(--ink-soft); font-size:.9rem; }
.read-more-card::after{
  content:'자세히 보기 →';
  margin-top:auto; padding-top:10px;
  font-size:.85rem; font-weight:700; color:var(--primary);
}

/* legacy disclaimer box (본문 하단) */
.disclaimer{
  font-size:.92rem; color:var(--ink-soft);
  background:var(--bg-subtle); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:16px 18px;
}

/* ---------------- ad slots ---------------- */
.ad-slot{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  background:var(--ad-bg); border:1px solid var(--ad-border);
  border-radius:var(--radius-sm); color:var(--ad-label);
  font-size:.85rem; min-height:90px;
}
.ad-slot .ad-label{
  position:absolute; top:8px; left:12px;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ad-label);
}
/* 애드센스 승인 전까지 빈 광고 자리 숨김. 실제 광고 코드를 넣을 때 이 규칙을 삭제하세요. */
.ad-slot{ display:none; }

/* ---------------- footer ---------------- */
.site-footer{ background:var(--footer-bg); color:var(--footer-ink); padding:48px 0 32px; font-size:.92rem; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:32px; }
.footer-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.15rem; }
.footer-brand .gnb-logo{ background:#fff; color:var(--footer-bg); width:30px; height:30px; }
.footer-brand .gnb-logo svg{ width:18px; height:18px; }
.footer-about{ margin-top:14px; color:var(--footer-faint); line-height:1.7; max-width:420px; }
.footer-heading{ font-size:.85rem; font-weight:700; color:#fff; letter-spacing:.04em; margin-bottom:12px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.footer-col a{ color:var(--footer-ink); text-decoration:none; }
.footer-col a:hover{ color:#fff; text-decoration:underline; }
.footer-bottom{
  margin-top:36px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; gap:6px;
  color:var(--footer-faint); font-size:.85rem;
}
.footer-bottom strong{ color:var(--footer-ink); font-weight:600; }
@media (max-width:760px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-top > :first-child{ grid-column:1 / -1; }
}