:root{
  --ivory:#F8F4EB;--ivory-deep:#EDE5D3;--ivory-warm:#F2EBDB;--paper:#FBF8F1;
  --gold:#B8924A;--gold-soft:#C9A766;--gold-deep:#8B6F30;
  --charcoal:#2A2622;--charcoal-soft:#4A4640;--mute:#807A6E;
  --line:#DCD4C2;--line-soft:#E8E1CF;
  --green:#5A8A6B;--green-deep:#3B6749;--green-bg:#EEF5F0;
  --red:#B85450;--red-deep:#8B3A36;--red-bg:#FBF1EF;
  --purple:#6B6098;--purple-bg:#F0EEF7;
  --blue:#4A7FAA;--blue-bg:#E3EEF6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--ivory);color:var(--charcoal);min-height:100vh;
  font-family:"Pretendard Variable","Pretendard",-apple-system,sans-serif;
  font-weight:500;font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto;image-rendering:high-quality}
strong{font-weight:700;color:var(--charcoal)}

/* 상단바 */
.topbar{position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--paper),var(--ivory-warm));
  border-bottom:1px solid var(--line)}
.topbar-inner{max-width:1100px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.tb-left{display:flex;align-items:center;gap:14px;min-width:0;flex:1}
.icon-btn{width:42px;height:42px;border-radius:10px;background:#fff;border:1px solid var(--line);
  color:var(--charcoal-soft);cursor:pointer;display:grid;place-items:center;transition:.2s;flex-shrink:0}
.icon-btn:hover{background:var(--ivory-warm);border-color:var(--gold);color:var(--gold-deep)}
.icon-btn svg{width:18px;height:18px}
.tb-current{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden}
.tb-current .num{font-family:'Cormorant Garamond',serif;font-size:1rem;
  color:var(--gold-deep);font-weight:600;letter-spacing:.1em;flex-shrink:0}
.tb-current .name{font-family:'Noto Serif KR',serif;font-size:1.05rem;
  font-weight:700;color:var(--charcoal);letter-spacing:-.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* HERO */
.hero{padding:6rem 24px 4rem;text-align:center;max-width:840px;margin:0 auto}
.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;
  font-family:'Cormorant Garamond',serif;font-size:.92rem;color:var(--gold);
  letter-spacing:.32em;text-transform:uppercase;font-weight:600;margin-bottom:1.4rem}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:28px;height:1px;background:var(--gold);opacity:.5}
.hero h1{font-family:'Noto Serif KR',serif;font-weight:700;
  font-size:clamp(2.2rem,5vw,3.2rem);line-height:1.3;letter-spacing:-.02em;
  color:var(--charcoal);margin-bottom:1.2rem}
.hero h1 em{font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold-deep);font-weight:500;font-size:.9em}
.hero-tagline{font-family:'Noto Serif KR',serif;font-size:1.25rem;
  font-weight:500;color:var(--charcoal-soft);max-width:600px;margin:0 auto 2.5rem}
.symptom-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.symptom-chip{display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;background:#fff;border:1px solid var(--line);border-radius:100px;
  font-size:.92rem;font-weight:600;color:var(--charcoal)}
.symptom-chip::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--gold);flex-shrink:0}

/* SECTION */
.section{max-width:980px;margin:0 auto;padding:5rem 24px}
.section-head{margin-bottom:3rem}
.section-eyebrow{font-family:'Cormorant Garamond',serif;font-size:.9rem;
  color:var(--gold);letter-spacing:.32em;text-transform:uppercase;
  font-weight:600;display:flex;align-items:center;gap:14px;margin-bottom:1rem}
.section-eyebrow::before{content:"";width:34px;height:1px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold))}
.section-title{font-family:'Noto Serif KR',serif;font-weight:700;
  font-size:clamp(1.8rem,3.5vw,2.3rem);letter-spacing:-.015em;
  color:var(--charcoal);line-height:1.3}
.section-title .icon{font-size:.85em;margin-right:8px;vertical-align:-2px}

/* 운동 카드 */
.exercise-card{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:14px;padding:2.2rem 2rem;margin-bottom:1.5rem;
  display:grid;grid-template-columns:auto 1fr;gap:1.5rem 2rem;
  align-items:start;
  transition:border-color .3s,box-shadow .3s}
.exercise-card:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(184,146,74,.1)}
.ex-num{width:54px;height:54px;border-radius:50%;
  background:var(--green-bg);color:var(--green-deep);
  display:grid;place-items:center;
  font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:600;
  flex-shrink:0}
.ex-head{min-width:0}
.ex-name{font-family:'Noto Serif KR',serif;font-weight:700;
  font-size:1.4rem;color:var(--charcoal);letter-spacing:-.01em;margin-bottom:.4rem}
.ex-sub{font-size:1rem;color:var(--charcoal-soft);font-weight:500}
.ex-content{grid-column:1/-1;display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "photo photo"
    "detail tip";
  gap:1.2rem;align-items:stretch;margin-top:.5rem}
.ex-detail{grid-area:detail;padding:1.3rem 1.5rem;background:#fff;border-left:3px solid var(--green);
  border-radius:0 8px 8px 0}
.ex-cue{color:var(--charcoal);font-size:1rem;font-weight:500;margin-bottom:.7rem;line-height:1.6}
.ex-count{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.25rem;
  color:var(--green-deep)}
.ex-photos{grid-area:photo;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:12px;max-width:720px;width:100%;margin:0 auto}
.ex-photo{border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);
  background:#fff;width:100%}
.ex-photo img{width:100%;height:auto;display:block;max-width:100%}
.ex-arrow{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:var(--green-deep);
  line-height:1;text-align:center}
.ex-tip{grid-area:tip;background:var(--ivory-warm);padding:1.4rem 1.5rem;border-radius:10px}
.ex-tip-label{display:flex;align-items:center;gap:6px;
  font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold-deep);font-weight:600;letter-spacing:.05em;
  font-size:.95rem;margin-bottom:.6rem}
.ex-tip-text{font-size:.97rem;color:var(--charcoal);font-weight:500;line-height:1.7}

/* 주사 종류 */
.injection-method{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:14px;padding:2.2rem;margin-bottom:2rem}
.im-head{display:grid;grid-template-columns:auto 1fr;gap:14px;margin-bottom:1.8rem;
  padding-bottom:1.4rem;border-bottom:1px solid var(--line-soft);align-items:center}
.im-icon{width:44px;height:44px;border-radius:10px;
  background:linear-gradient(135deg,var(--gold-deep),var(--gold));
  color:#fff;display:grid;place-items:center;font-size:20px;flex-shrink:0}
.im-head-text{flex:1}
.im-name{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.4rem;
  color:var(--charcoal);letter-spacing:-.01em;margin-bottom:.2rem}
.im-desc{color:var(--charcoal-soft);font-size:1rem;font-weight:500}
.im-body{display:grid;grid-template-columns:1fr 1.4fr;gap:1.5rem;align-items:start}
.im-photo{border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);
  background:#fff}
.im-photo img{width:100%;height:auto;display:block}
.im-types{display:flex;flex-direction:column;gap:10px}
.im-type{padding:1rem 1.3rem;background:#fff;border:1px solid var(--line-soft);
  border-radius:10px;border-left:3px solid var(--gold)}
.im-type-name{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.05rem;
  color:var(--gold-deep);margin-bottom:.25rem}
.im-type-desc{font-size:.92rem;color:var(--charcoal-soft);font-weight:500}

/* 근육 표적 */
.muscle-eyebrow{font-family:'Cormorant Garamond',serif;font-size:.85rem;
  color:var(--gold);letter-spacing:.3em;text-transform:uppercase;
  font-weight:600;margin:2rem 0 1.4rem;text-align:center}
.muscles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.muscle{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:12px;padding:1.4rem;text-align:center;
  transition:border-color .3s,transform .3s}
.muscle:hover{border-color:var(--gold);transform:translateY(-3px)}
.muscle-img{border-radius:8px;overflow:hidden;background:#fff;margin-bottom:.8rem}
.muscle-img img{width:100%;height:auto;display:block}
.muscle-role{font-size:1rem;color:var(--charcoal);font-weight:600;line-height:1.5;
  font-family:'Noto Serif KR',serif}

/* 통계 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:2rem}
.stat{background:var(--paper);border:1px solid var(--line-soft);
  border-radius:12px;padding:2rem 1.6rem;text-align:center;
  transition:border-color .3s,transform .3s}
.stat:hover{border-color:var(--gold);transform:translateY(-3px)}
.stat-num{font-family:'Noto Serif KR',serif;font-weight:700;
  font-size:2.4rem;color:var(--gold-deep);line-height:1;letter-spacing:-.02em;
  margin-bottom:.6rem}
.stat:nth-child(2) .stat-num{color:var(--red)}
.stat:nth-child(3) .stat-num{color:var(--green-deep)}
.stat-label{font-family:'Noto Serif KR',serif;font-weight:600;font-size:1.05rem;
  color:var(--charcoal);margin-bottom:.8rem}
.stat-detail{font-size:.92rem;color:var(--charcoal-soft);font-weight:500;
  line-height:1.6;margin-bottom:1rem}
.stat-cite{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.85rem;color:var(--mute);letter-spacing:.02em;
  padding-top:.9rem;border-top:1px solid var(--line-soft)}

/* 가이드라인 박스 */
.guideline{background:var(--ivory-warm);border:1px solid var(--gold);border-radius:14px;
  padding:1.8rem 2rem;display:flex;gap:1.4rem;align-items:flex-start}
.guideline-icon{font-size:2rem;flex-shrink:0;line-height:1}
.guideline-body{flex:1}
.guideline-text{font-family:'Noto Serif KR',serif;font-weight:600;font-size:1.1rem;
  color:var(--charcoal);letter-spacing:-.005em;margin-bottom:.6rem;line-height:1.6}
.guideline-text strong{color:var(--gold-deep)}
.guideline-cite{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.92rem;color:var(--gold-deep);letter-spacing:.03em;font-weight:600}

/* 4대 원칙 */
.principles{max-width:980px;margin:0 auto;padding:3rem 24px 5rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.principle{padding:1.8rem 1rem;text-align:center;
  background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  transition:border-color .3s,transform .3s}
.principle:hover{border-color:var(--gold);transform:translateY(-3px)}
.principle-icon{font-size:1.8rem;margin-bottom:.6rem;display:block}
.principle-label{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1rem;
  color:var(--charcoal);letter-spacing:-.005em}

/* 인포그래픽 보기 CTA */
.full-cta{max-width:760px;margin:3rem auto 0;padding:0 24px;text-align:center}
.full-cta-text{color:var(--mute);font-size:.95rem;margin-bottom:1.2rem;font-weight:500}
.full-cta-btn{display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;background:#fff;border:1px solid var(--line);border-radius:10px;
  font-family:'Pretendard Variable','Pretendard',sans-serif;font-weight:600;font-size:.95rem;
  color:var(--charcoal-soft);transition:.2s}
.full-cta-btn:hover{background:var(--ivory-warm);border-color:var(--gold);color:var(--gold-deep)}

/* 페이지 네비 */
.page-nav{max-width:980px;margin:4rem auto 0;padding:3rem 24px 0;
  border-top:1px solid var(--line-soft);display:flex;gap:14px}
.pn-btn{flex:1;padding:1.4rem 1.5rem;background:#fff;border:1px solid var(--line);
  border-radius:10px;color:var(--charcoal);transition:.2s;
  display:flex;align-items:center;gap:14px;font-family:inherit}
.pn-btn:hover{background:var(--ivory-warm);border-color:var(--gold);color:var(--gold-deep)}
.pn-btn.next{justify-content:flex-end}
.pn-arrow{font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--gold);line-height:1}
.pn-label{font-family:'Cormorant Garamond',serif;font-size:.78rem;
  color:var(--gold);letter-spacing:.18em;font-weight:600;text-transform:uppercase;
  display:block;margin-bottom:2px}
.pn-topic{font-family:'Noto Serif KR',serif;font-weight:600;font-size:1rem;
  color:var(--charcoal);letter-spacing:-.005em}
.pn-content{display:flex;flex-direction:column}
.pn-btn.next .pn-content{align-items:flex-end}

/* 끝맺음 */
.end-mark{text-align:center;padding:4rem 1.5rem 5rem;margin-top:3rem;
  border-top:1px solid var(--line-soft)}
.end-mark-text{font-family:'Cormorant Garamond',serif;font-style:italic;
  color:var(--gold-deep);letter-spacing:.2em;font-size:1rem}
.end-mark-text span{color:var(--gold);margin:0 .35em}

/* 푸터 */
.foot{text-align:center;padding:2.5rem 20px 4rem;font-size:.85rem;color:var(--mute);
  border-top:1px solid var(--line-soft)}
.foot strong{color:var(--charcoal-soft);font-weight:600}

/* 리빌 애니 */
[data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),
             transform .9s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in-view{opacity:1;transform:translateY(0)}
[data-reveal-stagger]>*{opacity:0;transform:translateY(20px);
  transition:opacity .7s ease-out,transform .7s ease-out}
[data-reveal-stagger].in-view>*{opacity:1;transform:translateY(0)}
[data-reveal-stagger].in-view>*:nth-child(1){transition-delay:0s}
[data-reveal-stagger].in-view>*:nth-child(2){transition-delay:.08s}
[data-reveal-stagger].in-view>*:nth-child(3){transition-delay:.16s}
[data-reveal-stagger].in-view>*:nth-child(4){transition-delay:.24s}

/* 모바일 */
@media(max-width:760px){
  .hero{padding:3.5rem 20px 2.5rem}
  .hero-tagline{font-size:1.05rem}
  .section{padding:3rem 20px}
  .section-head{margin-bottom:2rem}
  .exercise-card{padding:1.6rem 1.4rem;grid-template-columns:auto 1fr}
  .ex-content{grid-template-columns:1fr;
    grid-template-areas:"photo" "detail" "tip";
    gap:1rem;margin-top:1rem}
  .ex-num{width:44px;height:44px;font-size:1.3rem}
  .ex-name{font-size:1.2rem}
  .ex-photos{grid-template-columns:1fr;max-width:100%}
  .ex-arrow{font-size:1.3rem;transform:rotate(90deg)}
  .injection-method{padding:1.6rem 1.4rem}
  .im-body{grid-template-columns:1fr;gap:1.2rem}
  .muscles{grid-template-columns:1fr;gap:12px}
  .muscle-img img{max-width:180px;margin:0 auto}
  .stats{grid-template-columns:1fr;gap:12px}
  .stat-num{font-size:2.1rem}
  .principles{grid-template-columns:repeat(2,1fr);padding:2rem 20px 3.5rem}
  .page-nav{flex-direction:column;gap:10px;padding:2.5rem 20px 0;margin-top:2.5rem}
  .pn-btn{padding:1.2rem}
  .guideline{padding:1.4rem;flex-direction:column;gap:.6rem;text-align:left}
  .full-cta{margin-top:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-stagger]>*{opacity:1!important;transform:none!important}
}

/* ===== 추가 변형들 (각 페이지에서 사용) ===== */

/* 주사 사진 - 풀폭 (좌우 분할 없을 때) */
.im-photo.full{margin-top:0}
.im-photo.full img{width:100%;height:auto}

/* 근육/신경 카드 그리드 변형 */
.muscles-3{grid-template-columns:repeat(3,1fr)}
.muscles-2{grid-template-columns:repeat(2,1fr);max-width:560px;margin:0 auto}
.muscle-name-text{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.05rem;
  color:var(--charcoal);margin:.8rem 0 .3rem;letter-spacing:-.005em}

/* 해부학 그룹 (근육/신경 구분) */
.anatomy-group{position:relative}
.ag-label{display:inline-block;padding:6px 18px;border-radius:100px;
  font-family:'Noto Serif KR',serif;font-weight:700;font-size:.95rem;
  color:#fff;margin-bottom:1rem;letter-spacing:-.005em}
.ag-label.muscle{background:var(--blue)}
.ag-label.nerve{background:var(--purple)}

/* 단일 사진 시퀀스 (운동 카드용 - 와이드 GIF 1개) */
.ex-photos.solo{grid-template-columns:1fr;max-width:760px}
.ex-photos.solo .ex-photo{background:#fff}
.ex-photos.solo .ex-photo img{width:100%;height:auto;display:block;margin:0 auto}

/* 4단계 카드 (관절염 등) */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stage{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  padding:1rem;text-align:center;transition:border-color .3s,transform .3s}
.stage:hover{border-color:var(--gold);transform:translateY(-3px)}
.stage-img{border-radius:8px;overflow:hidden;background:#fff;margin-bottom:.7rem;
  padding:8px;display:flex;align-items:center;justify-content:center}
.stage-img img{width:100%;height:auto;display:block}
.stage-num{font-family:'Cormorant Garamond',serif;color:var(--gold);
  font-size:.78rem;letter-spacing:.2em;font-weight:600;text-transform:uppercase;margin-bottom:.3rem}
.stage-name{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.05rem;
  color:var(--charcoal);letter-spacing:-.005em}

/* 4가지 주의 사항 (knee용) */
.cautions{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.caution{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  padding:1.4rem 1.2rem;text-align:center;border-left:3px solid var(--green);
  transition:border-color .3s,transform .3s}
.caution:hover{border-color:var(--gold);transform:translateY(-3px)}
.caution-icon{font-size:2rem;display:block;margin-bottom:.5rem}
.caution-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.05rem;
  color:var(--charcoal);margin-bottom:.4rem;line-height:1.4}
.caution-text{font-size:.9rem;color:var(--charcoal-soft);line-height:1.55;font-weight:500}

/* 원인 카드 (back용) */
.causes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cause{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  padding:1.5rem 1.4rem;text-align:center;transition:border-color .3s,transform .3s}
.cause:hover{border-color:var(--gold);transform:translateY(-3px)}
.cause-name{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.1rem;
  color:var(--gold-deep);margin-bottom:.5rem}
.cause-img{margin:.8rem auto;max-width:140px}
.cause-img img{width:100%;height:auto;display:block;border-radius:8px}
.cause-text{font-size:.95rem;color:var(--charcoal);font-weight:500;line-height:1.6}

/* MRI 시퀀스 (back용) */
.mri-strip{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;
  padding:2rem;text-align:center}
.mri-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.25rem;
  color:var(--charcoal);margin-bottom:1.4rem;letter-spacing:-.005em}
.mri-img{max-width:760px;margin:0 auto 1.4rem;border-radius:10px;overflow:hidden}
.mri-img img{width:100%;height:auto;display:block}
.mri-caption{font-size:.95rem;color:var(--charcoal);font-weight:500;line-height:1.7}
.mri-caption small{display:block;color:var(--mute);font-size:.85rem;margin-top:.4rem}

/* 자세 카드 (back용) */
.postures-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}
.posture-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;
  padding:1.6rem}
.posture-card.bad{border-left:3px solid var(--red)}
.posture-card.good{border-left:3px solid var(--green)}
.posture-head{display:flex;align-items:center;gap:10px;margin-bottom:1rem}
.posture-icon{font-size:1.4rem}
.posture-title{font-family:'Noto Serif KR',serif;font-weight:700;font-size:1.15rem;
  color:var(--charcoal);letter-spacing:-.005em}
.posture-card.bad .posture-title{color:var(--red)}
.posture-card.good .posture-title{color:var(--green-deep)}
.posture-img{border-radius:8px;overflow:hidden;background:#fff;margin-bottom:1rem}
.posture-img img{width:100%;height:auto;display:block}
.posture-warn{font-size:.92rem;color:var(--red);font-weight:600;
  background:var(--red-bg);padding:.7rem 1rem;border-radius:6px;margin-top:.8rem;text-align:center}

/* 체크 리스트 (inflammation용) */
.checklist{display:flex;flex-direction:column;gap:14px}
.check-item{background:var(--paper);border:1px solid var(--line-soft);border-radius:10px;
  padding:1.3rem 1.5rem;display:flex;gap:14px;align-items:flex-start;
  transition:border-color .3s}
.check-item:hover{border-color:var(--gold)}
.check-mark{width:28px;height:28px;border-radius:50%;background:var(--green-bg);
  color:var(--green-deep);display:grid;place-items:center;font-weight:700;
  flex-shrink:0;font-size:1rem}
.check-text{flex:1;color:var(--charcoal);font-weight:500;line-height:1.7;font-size:1rem}
.check-text strong{color:var(--charcoal);font-weight:700}

/* TPI - 작용 원리 비교 (before/after) */
.compare-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:1.2rem;align-items:center}
.compare-card{background:var(--paper);border:1px solid var(--line-soft);border-radius:12px;
  padding:1.4rem;text-align:center}
.compare-card.before{border-top:3px solid var(--red)}
.compare-card.after{border-top:3px solid var(--green)}
.compare-label{display:inline-block;padding:5px 14px;border-radius:6px;
  font-weight:700;font-size:.9rem;margin-bottom:1rem;font-family:'Noto Serif KR',serif}
.compare-card.before .compare-label{background:var(--red);color:#fff}
.compare-card.after .compare-label{background:var(--green);color:#fff}
.compare-img{border-radius:8px;overflow:hidden;background:#fff;margin-bottom:1rem}
.compare-img img{width:100%;height:auto;display:block}
.compare-desc{font-size:.95rem;color:var(--charcoal);font-weight:500;line-height:1.6}
.compare-arrow{font-family:'Cormorant Garamond',serif;font-size:2rem;color:var(--gold);line-height:1}

/* 모바일 - 추가 클래스 */
@media(max-width:760px){
  .muscles-3{grid-template-columns:1fr 1fr;gap:12px}
  .muscles-3 .muscle:nth-child(3){grid-column:1/-1;max-width:50%;margin:0 auto}
  .muscles-2{grid-template-columns:1fr 1fr;gap:12px}
  .stages{grid-template-columns:repeat(2,1fr)}
  .cautions{grid-template-columns:repeat(2,1fr)}
  .causes{grid-template-columns:1fr}
  .postures-grid{grid-template-columns:1fr}
  .compare-grid{grid-template-columns:1fr;gap:.8rem}
  .compare-arrow{transform:rotate(90deg);font-size:1.6rem}
}

/* ===== 단일 이미지 카드 (사용자 캡쳐 이미지용) ===== */
.img-card{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:14px;
  padding:1rem;
  margin-bottom:1.5rem;
  overflow:hidden;
  transition:border-color .3s,box-shadow .3s
}
.img-card:hover{border-color:var(--gold);box-shadow:0 10px 30px rgba(184,146,74,.08)}
.img-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:8px;
  max-width:900px;
  margin:0 auto
}
.img-card.compact{padding:.6rem}
.img-card.compact img{border-radius:6px}

/* 2-column grid for posture cards */
.img-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin-bottom:1.5rem
}
.img-pair .img-card{margin-bottom:0}

@media(max-width:760px){
  .img-pair{grid-template-columns:1fr;gap:1rem}
}