/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-ribfit-implant-free.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=1f1a9c8b5bae135985554bfb9d0b892d */
/* ── /ribfit/implant-free — Implant-Free Rhinoplasty ──────────────
   J컬 서브페이지와 같은 순서·톤. 레이아웃은 subpage.css / layout.css
   프리미티브로 만들고, 여기에는 프리미티브에 없는 것만 남긴다.
   (히어로·CTA 밴드·번호 카드·태그 칩·탭·카드·그리드는 전부 공용) */

/* 히어로 사진 원본이 이미 어둡게 처리돼 있어(평균 밝기 33/255) 공용 .page-hero 의
   68% 검정 오버레이를 얹으면 인물이 아예 보이지 않는다. 이 페이지만 30% 로 낮춘다.
   흰 제목 대비는 그대로 충분하다. */
.ifree-hero{
  background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),var(--hero-img,none);
}
/* 히어로 부제 가운데 구분자 — J컬 Sec_1 과 같은 50% 불투명도 */
.ifree-hero__sep{opacity:.5}

/* ── 개념 설명 ────────────────────────────────────────────── */
/* J컬 Sec_2 와 같은 로고 치수(163×80). 원본 512×251 을 cover 로 담는다 */
.ifree-concept__logo{width:163px;height:80px;object-fit:cover}
.ifree-concept__title{margin-top:var(--sp-gap)}
/* .prose 는 가운데 정렬 블록. 제목 아래 간격만 준다 */
.ifree-concept__body{margin-top:var(--sp-stack)}

/* ── 히어로 아래 번호 카드 4개 ─────────────────────────────── */
/* 열 수·간격은 .grid--4 가, 카드 모양은 .numbered__item 이 처리한다 */
.ifree-points__item{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;height:100%;
}

/* ── 연골 선택 — 원 4개를 + 로 이은 줄 ────────────────────── */
/* 밴드 색은 .section--tint 가 처리한다 */
.ifree-tissue__lead{max-width:760px}
.ifree-tissue__chain{
  margin-top:var(--sp-block);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
}
.ifree-tissue__opt{display:flex;align-items:center}
/* 원문의 + 는 장식이라 요소 대신 의사요소로 둔다 */
.ifree-tissue__opt:not(:last-child)::after{
  content:"+";
  padding-inline:14px;
  font-weight:300;font-size:var(--fs-24);line-height:1;color:var(--brand);
}
.ifree-tissue__circle{
  display:flex;align-items:center;justify-content:center;
  width:168px;aspect-ratio:1;border-radius:50%;
  padding-inline:18px;text-align:center;
  font-weight:700;font-size:var(--fs-16);line-height:1.4;
  letter-spacing:var(--ls-tight);word-break:keep-all;
  background:var(--surface);color:var(--text-primary);
  box-shadow:var(--shadow-card);
}
.ifree-tissue__circle--accent{background:var(--brand);color:var(--text-inverse)}

/* ── 특징 — 라벨/값 한 쌍씩 담은 겹친 원 4개 ────────────────── */
.ifree-feats__diagram{
  margin-top:var(--sp-block);
  display:flex;justify-content:center;
  position:relative;z-index:0;
}
.ifree-feats__circle{
  position:relative;
  flex:0 0 27.34375%;max-width:27.34375%;
  aspect-ratio:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  padding-inline:calc(3.125% + 8px);text-align:center;   /* 겹침(3.125%)과 같은 컨테이너 폭 기준 백분율 — 글자가 옆 원 선 8px 안으로 못 들어온다 */
}
.ifree-feats__circle + .ifree-feats__circle{margin-right:-3.125%}
.ifree-feats__circle--fill{z-index:0;background:var(--surface-muted)}
.ifree-feats__circle--line{z-index:1;box-shadow:inset 0 0 0 1px var(--line-mid)}
.ifree-feats__label{
  display:block;margin-bottom:8px;
  font-weight:500;font-size:var(--fs-16);line-height:1.5;
  color:var(--text-tertiary);
}
.ifree-feats__text{
  font-weight:700;font-size:var(--fs-20);line-height:1.4;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.ifree-feats__circle--fill .ifree-feats__text{color:var(--brand)}
.ifree-feats__circle--line .ifree-feats__text{color:var(--text-secondary)}

/* ── 수술 단계 (탭) — J컬 Sec_5 와 같은 네이비 밴드 ─────────── */
.ifree-steps{background:var(--surface-navy)}

/* 탭 줄: 좁은 폭에서 가로 스크롤 대신 줄바꿈 */
.ifree-steps__tabs{
  margin-top:var(--sp-gap);
  flex-wrap:wrap;justify-content:center;gap:12px;overflow:visible;
}
/* 어두운 배경 위라 공용 .tab 의 회색 글자 대신 흰 테두리로 세운다 */
.ifree-steps__tab{
  flex:0 0 auto;min-height:47px;padding-inline:25px;font-weight:600;
  color:rgba(255,255,255,.7);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);
}
.ifree-steps__tab:hover{color:var(--text-inverse);box-shadow:inset 0 0 0 1px var(--text-inverse)}
.ifree-steps__tab[aria-selected="true"]{
  background:var(--brand);color:var(--text-inverse);font-weight:600;box-shadow:none;
}

.ifree-steps__panels{margin-top:var(--sp-block)}
/* 탭을 바꿔도 아래가 흔들리지 않게 J컬과 같은 300px 하한을 둔다 */
.ifree-steps__card{padding:var(--sp-block);min-height:300px}
.ifree-steps__step{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--brand);
}
.ifree-steps__title{
  margin-top:6px;
  font-weight:700;font-size:var(--fs-32);line-height:1.4;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.ifree-steps__text{
  margin-top:var(--sp-gap);
  font-size:var(--fs-18);line-height:1.7;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}

/* ── 유튜브 — J컬 Sec_6 과 같은 플레이어 + 목록 ─────────────── */
.ifree-video{padding-block:calc(var(--sp-section) + 20px)}   /* 메인 Sec_6 과 같은 상·하 여백 140 */
.ifree-video__title{
  margin-top:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:66px;               /* 메인 Sec_6 과 같은 66px 제목 행 */
}
.ifree-video__icon{flex:none;width:58px;height:40px}
/* 메인 Sec_6 과 같은 리드 박스 32px — 행간 27px 를 그 안에서 가운데 정렬 */
.ifree-video__lead{
  width:100%;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}

.ifree-video__tv{
  display:grid;grid-template-columns:685fr 565fr;   /* J컬 시안 685 + 30 + 565 */
  gap:var(--sp-gap);align-items:start;
}
.ifree-video__stage{border-radius:var(--radius-card);background:var(--surface-dark)}
.ifree-video__stage img{width:100%;height:100%;object-fit:cover}
.ifree-video__stage iframe{border:0}

.ifree-video__list{border-top:1px solid var(--text-primary)}
.ifree-video__link{
  display:flex;align-items:center;gap:20px;padding-block:12px;
  box-shadow:inset 0 -1px 0 var(--icon-muted);
}
.ifree-video__thumb{flex:none;width:150px;height:84px;object-fit:cover;border-radius:var(--radius-sm)}
.ifree-video__vtitle{
  font-weight:500;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:normal;color:var(--text-primary);word-break:break-word;
}
.ifree-video__link:hover .ifree-video__vtitle{color:var(--brand)}

/* 1200 이상: 목록 4행이 영상 박스(16:9) 높이를 나눠 가져 위·아래 선이 박스와 맞는다.
   height:0 + min-height 로 목록은 행 높이를 키우지 않고 박스 높이만 따른다. */
@media (min-width:1200px){
  .ifree-video__list{height:0;min-height:100%;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}   /* 내용(썸네일 원본 크기)이 행을 키우지 못하게 */
  .ifree-video__link{height:100%;padding-block:0}
  .ifree-video__thumb{width:auto;height:calc(100% - 12px);aspect-ratio:16/9}   /* 행 − 위아래 6 — 1440 에서 시안 84 */
  .ifree-video__vtitle{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
}
/* 1200 미만: 한 줄에 두면 행이 썸네일(84)보다 낮아진다 — 영상 위 · 목록 아래로 쌓는다 */
@media (max-width:1199px){
  .ifree-video__tv{grid-template-columns:1fr}
}

/* ── FAQ — 공용 .accordion 위에 줄바꿈 여백만 얹는다 ────────── */
.ifree-faq__list{margin-top:var(--sp-block)}
.ifree-faq__label{word-break:keep-all}

/* ── 칼럼 — J컬 Sec_8 과 같은 디자인: 좌 COLUMNS·제목·리드 / 우 버튼, 1:1 카드 3개 ── */
.ifree-columns{padding-block:calc(var(--sp-section) + 20px)}   /* J컬 Sec_8 상하 140 */
.ifree-columns__head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-stack)}
.ifree-columns__intro{max-width:886px}   /* 시안 텍스트 블록 폭 — 리드가 2줄로 끊긴다 */
.ifree-columns__more{flex:none;min-width:260px}   /* 시안 CTA 260×56 */
.ifree-columns__cards{margin-top:var(--sp-block)}   /* 시안 타이틀 아래 60 */
.ifree-columns__card{display:flex;flex-direction:column;height:100%}
.ifree-columns__body{flex:1 1 auto;display:flex;flex-direction:column;padding:var(--sp-gap)}
.ifree-columns__tags{gap:10px}
.ifree-columns__tag{height:40px;padding-inline:17px;border-radius:var(--radius-pill);font-size:var(--fs-16);line-height:1}
/* 칩 아래 10 / 제목 박스 아래 34 — 기록자 줄은 카드 바닥에 붙는다 */
.ifree-columns__title{margin-top:10px;margin-bottom:34px}
.ifree-columns__meta{margin-top:auto;line-height:1.4}
@media (max-width:767px){
  .ifree-columns__head{flex-direction:column;align-items:stretch;gap:var(--sp-gap)}
  .ifree-columns__more{align-self:flex-start}
}

/* ── 관련 시술 — J컬 Sec_9 카드 ────────────────────────────── */
.ifree-related__title{margin-top:0}
.ifree-related__cards{margin-top:var(--sp-block);gap:var(--sp-stack)}
.ifree-related__card{display:flex;flex-direction:column;height:100%;padding:var(--sp-block)}
.ifree-related__kicker{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--brand);word-break:keep-all;
}
.ifree-related__name{
  margin-top:var(--sp-tight);
  font-weight:600;font-size:var(--fs-32);line-height:1.3;
  letter-spacing:var(--ls-tight);color:var(--text-primary);word-break:keep-all;
}
.ifree-related__desc{
  margin-top:var(--sp-tight);
  font-size:var(--fs-18);line-height:1.5;color:var(--text-secondary);word-break:keep-all;
}
.ifree-related__more{margin-top:var(--sp-stack);align-self:flex-start;color:var(--text-tertiary)}

/* ── 상담 CTA ─────────────────────────────────────────────── */
/* 공용 .disclaimer 는 회색이라 핑크 밴드 위에서 읽히지 않는다 */
.ifree-cta__note{color:rgba(255,255,255,.75)}

/* ── 반응형: 구조만 바꾼다 ─────────────────────────────────── */
/* 1200 미만: 특징 원 4개를 한 줄에 두면 지름이 글자보다 빨리 줄어
   라벨이 원 밖으로 넘친다. 2×2 로 접는다(겹침은 가로로 유지) */
@media (max-width:1199px){
  .ifree-feats__diagram{flex-wrap:wrap;row-gap:var(--sp-gap)}
  .ifree-feats__circle{flex-basis:min(50%,380px);max-width:min(50%,380px);padding-inline:calc(4% + 8px)}   /* 겹침 4% + 8 */
  .ifree-feats__circle + .ifree-feats__circle{margin-right:-4%}
  .ifree-feats__circle:nth-child(3){margin-right:0}
}
@media (max-width:1023px){
  .ifree-steps__card{padding:var(--sp-stack)}
  .ifree-related__card{padding:var(--sp-stack)}
  .ifree-tissue__circle{width:140px}
  .ifree-tissue__opt:not(:last-child)::after{padding-inline:8px}
}
@media (max-width:767px){
  .ifree-concept__logo{width:122px;height:60px}
  /* 연골 원: 한 줄 4개가 들어가지 않는다. 원문처럼 2열로 접고 + 는 숨긴다 */
  .ifree-tissue__chain{row-gap:var(--sp-gap)}
  .ifree-tissue__opt{flex:0 0 50%;justify-content:center}
  .ifree-tissue__opt:not(:last-child)::after{display:none}
  .ifree-tissue__circle{width:min(100%,150px)}
  /* 특징 원: 1열로 세우고 겹침만 세로로 남긴다 */
  .ifree-feats__diagram{flex-direction:column;align-items:center;flex-wrap:nowrap;row-gap:0}
  .ifree-feats__circle{flex-basis:auto;width:min(76%,300px);max-width:none;padding-inline:24px}   /* 겹침이 세로라 좌우는 원래 여백 */
  .ifree-feats__circle + .ifree-feats__circle{margin-right:0;margin-top:-30px}
  .ifree-feats__circle:nth-child(3){margin-right:0}
  .ifree-steps__card{min-height:0}
  .ifree-video__title{gap:8px;min-height:0}
  .ifree-video__icon{width:40px;height:28px}
  .ifree-video__link{gap:var(--sp-tight)}
  .ifree-video__thumb{width:120px;height:67px}
  .ifree-related__card{padding:var(--sp-gap)}
}