/* ── rhinoplasty 하위 유형 — J컬 템플릿 위에 얹는 것만 ──────────────
   섹션 골격·톤은 jcurl-sec_1~10 을 그대로 쓴다. 이 파일은 J컬에 없는
   세 가지(원장 코멘트 판 · 회복 타임라인 · 상담 팁)만 만든다. */

/* 원장 코멘트 — J컬 Sec_4 원 다이어그램 아래에 놓는 판 */
.rhj-note{
  max-width:900px;margin:var(--sp-block) auto 0;
  padding:var(--sp-block) var(--sp-stack);
  background:var(--surface-muted);border-left:3px solid var(--brand);
  border-radius:var(--radius-sm);
}
.rhj-note__label{
  font-weight:700;font-size:var(--fs-14);letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--brand);
}
.rhj-note p+p{margin-top:16px}
.rhj-note p:not(.rhj-note__label){
  font-size:var(--fs-18);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.rhj-note__by{margin-top:var(--sp-tight);color:var(--text-tertiary)!important;font-size:var(--fs-16)!important}

/* STEP 카드 안 삽화 — 국문 원본이 각 단계에 쓰는 그림 */
.rhj-step{display:flex;align-items:center;gap:var(--sp-stack)}
.rhj-step__img{flex:none;width:180px;height:auto;border-radius:var(--radius-sm)}

/* 회복 타임라인 — 시점 / 항목 / 설명 3열 */
.rhj-rec__list{margin-top:var(--sp-block);display:flex;flex-direction:column}
.rhj-rec__list li{
  display:grid;grid-template-columns:160px 200px 1fr;gap:var(--sp-gap);
  padding:22px 0;border-top:1px solid var(--line-soft);
}
.rhj-rec__list li:last-child{border-bottom:1px solid var(--line-soft)}
.rhj-rec__when{font-weight:700;font-size:var(--fs-16);color:var(--brand);letter-spacing:var(--ls-tight)}
.rhj-rec__what{font-weight:700;font-size:var(--fs-18);color:var(--text-primary);word-break:keep-all}
.rhj-rec__desc{font-size:var(--fs-16);line-height:1.7;color:var(--text-secondary);word-break:keep-all}

/* 상담 팁 — FAQ 아래 한 줄 */
.rhj-tip{
  margin-top:var(--sp-block);padding:24px 28px;
  background:var(--surface-muted);border-radius:var(--radius-sm);
  font-size:var(--fs-16);line-height:1.8;color:var(--text-secondary);word-break:keep-all;
}
.rhj-tip strong{margin-right:8px;color:var(--brand)}

@media (max-width:1023px){
  .rhj-rec__list li{grid-template-columns:140px 1fr;gap:10px var(--sp-tight)}
  .rhj-rec__desc{grid-column:1 / -1}
}
@media (max-width:767px){
  .rhj-step{flex-direction:column;align-items:flex-start}
  .rhj-step__img{width:140px}
  .rhj-rec__list li{grid-template-columns:1fr;gap:6px}
  .rhj-note{padding:var(--sp-stack) 20px}
}

/* ── J컬 값을 이 페이지에서만 덮어쓰는 것들 ────────────────────────
   J컬 원본 그대로 두면 이 페이지에서 세 가지가 깨진다.
   J컬 자체는 건드리지 않고, 여기서 붙인 클래스에만 적용한다. */

/* (3) 유형 삽화는 360×460 이다. J컬 개념도 크롭(732:320, 109% 확대)에 넣으면
   2.2배로 늘어나 흐려진다. 어떤 배치에서도 원본 크기를 넘기지 않는다. */
.rhj-figure img{display:block;width:100%;height:auto;border-radius:var(--radius-card)}

/* ── 개념 섹션 좌우 2단 (B안) ─────────────────────────────────
   제목·리드를 왼쪽, 삽화를 오른쪽에 둔다. 가운데 정렬 1단보다 세로가 짧고
   흰 여백이 남지 않는다. 삽화 칸은 원본 폭(360)으로 고정해 확대를 막는다. */
.rhj-concept{
  display:grid;grid-template-columns:minmax(0,1fr) 360px;
  align-items:center;gap:var(--sp-block);
  max-width:1120px;margin-inline:auto;
}
.rhj-concept .jcurl-sec_2__head{text-align:left;margin:0}
.rhj-concept .jcurl-sec_2__lead{margin-inline:0}
.rhj-concept .rhj-figure{margin:0}

@media (max-width:1023px){
  .rhj-concept{grid-template-columns:1fr;gap:var(--sp-stack);text-align:center}
  .rhj-concept .jcurl-sec_2__head{text-align:center}
  .rhj-concept .rhj-figure{max-width:360px;margin-inline:auto}
}

@media (max-width:767px){
}

/* ── 대표 기록 카드 — 메인 Surgery Log 와 같은 자동 순환 ─────────
   동작은 home-fx.js 캐러셀(data-car="step") 그대로. 카드 폭은 원래
   .grid--3 과 같은 식·같은 중단점이라 켜기 전후 크기가 같다. */
.jcurl-sec_8__cards.car__track{--car-cols:3;--car-gap:var(--sp-gap)}
/* .car__track{margin:0} 이 목록 위 간격(--sp-block)을 지우므로 감싼 쪽에 준다 */
.jcurl-sec_8__head + .car{margin-top:var(--sp-block)}
@media (max-width:1023px){.jcurl-sec_8__cards.car__track{--car-cols:2}}
@media (max-width:767px){.jcurl-sec_8__cards.car__track{--car-cols:1}}