/* RTL 자동 반전본 — 원본: /en/assets/css/sections/page-signature-thread-removal.css (직접 고치지 말 것: ~/kowon-i18n/flip_css.js) src-md5=abd6ff9dd837137488f0468e4b8217ce */
/* ── /signature/thread-removal — Nose Thread Removal ───────────────
   J컬 서브페이지와 구조가 1:1 이다. 히어로·CTA 밴드·카드·탭·아코디언·
   레일은 subpage.css / layout.css 프리미티브를 그대로 쓰고,
   이 파일에는 프리미티브에 없는 것만 남긴다.
   (J컬 전용 jcurl-*.css 는 복사하지 않았다 — 배치 근거만 따랐다) */

/* 히어로 사진이 로비 사이니지(로고 자체)라 .page-hero 기본 68% 베일로는
   로고 획이 제목·부제와 겹쳐 읽힌다. 방식은 그대로 두고 농도만 올린다. */
.strm-hero{
  background-image:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.78)),var(--hero-img,none);
}
/* 히어로 부제의 구분자 '|' — J컬 Sec_1 과 같은 50% 농도 */
.strm-hero__sep{opacity:.5}

/* eyebrow 가 없는 섹션의 제목은 .sec-title 기본 위 여백을 지운다 */
.strm-approach .sec-title,
.strm-steps .sec-title,
.strm-related .sec-title{margin-top:0}

/* ── 히어로 아래 번호 카드 4개 (J컬 Sec_2 의 points 패턴) ─────────
   칸 사이 세로 구분선 + 묶음 위아래 가로선. 열 수는 .grid--4 가 처리한다. */
.strm-points__list{gap:0;border-block:1px solid var(--line-soft)}
.strm-points__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:200px;padding:var(--sp-stack) 24px;
  text-align:center;
  border-right:1px solid var(--line-soft);
}
.strm-points__item:last-child{border-left:1px solid var(--line-soft)}
/* 공용 .badge-num(44px/--fs-18) 을 J컬 카드와 같은 56px/--fs-24 로 */
.strm-points__num{width:56px;height:56px;font-size:var(--fs-24);line-height:1.5}
.strm-points__title{
  margin-top:20px;
  font-weight:700;font-size:var(--fs-20);line-height:1.4;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
@media (max-width:1023px){
  .strm-points__item:nth-child(2n){border-left:1px solid var(--line-soft)}
  .strm-points__item:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
@media (max-width:767px){
  .strm-points__item{min-height:0;border-left:1px solid var(--line-soft)}
  .strm-points__item + .strm-points__item{border-top:1px solid var(--line-soft)}
  .strm-points__num{width:48px;height:48px}
}

/* ── 원칙 — 겹치는 원 4개. J컬 Sec_3 과 같은 디자인으로 맞춘다.
   실크 배경 + 분홍 베일, 지름 350/1280 = 27.34375%, 겹침 40/1280 = 3.125%,
   흰/핑크 교차와 흰 원의 2px 테두리까지 J컬 그대로다.
   문구가 두 단어 이상이라 줄바꿈은 마크업의 <br> 로 준다(J컬과 같은 방식). */
.strm-approach{
  padding-block:calc(var(--sp-section) + 20px);
  overflow:hidden;
  background:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0e68e6456d365c00-w1920.webp') center / cover no-repeat;
}
/* 분홍 베일 — J컬 Sec_3 과 같은 --brand-tint-3 45% */
.strm-approach::before{
  content:"";
  position:absolute;inset:0;
  background:var(--brand-tint-3);
  opacity:.45;
}
.strm-approach__inner{position:relative}

.strm-approach__flow{
  margin-top:var(--sp-block);
  display:flex;justify-content:center;
  /* 흰 테두리(z-index:1)를 이 안에 가둔다 */
  position:relative;z-index:0;
}
.strm-approach__step{
  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:6px;text-align:center;
  font-weight:700;font-size:var(--fs-24);line-height:1.4;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.strm-approach__step + .strm-approach__step{margin-right:-3.125%}
.strm-approach__step--light{background:var(--surface);color:var(--brand)}
.strm-approach__step--brand{background:var(--brand);color:var(--text-inverse)}
/* 흰 원의 2px 흰 테두리가 옆 핑크 원 위로 올라온다 (J컬 Sec_3 과 같다) */
.strm-approach__step--light::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--surface);
  pointer-events:none;
}
/* 겹침은 어느 구간에서나 지름의 0.114 배 — J컬 Sec_3 과 같은 식이다 */
@media (max-width:1023px){
  .strm-approach__flow{--strm-ap-d:min(52.5%,380px);flex-wrap:wrap;row-gap:var(--sp-gap)}
  .strm-approach__step{flex-basis:var(--strm-ap-d);max-width:var(--strm-ap-d)}
  .strm-approach__step + .strm-approach__step{margin-right:calc(var(--strm-ap-d) * -0.114)}
  .strm-approach__step:nth-child(3){margin-right:0}
}
@media (max-width:767px){
  .strm-approach__flow{--strm-ap-d:min(72%,280px);flex-direction:column;align-items:center;flex-wrap:nowrap;gap:0}
  .strm-approach__step{flex-basis:auto;width:var(--strm-ap-d);max-width:var(--strm-ap-d)}
  .strm-approach__step + .strm-approach__step{margin-right:0;margin-top:calc(var(--strm-ap-d) * -0.114)}
}

/* ── 겹치는 원 4개 (J컬 Sec_4 배치 그대로)
   지름 350/1280 = 27.34375%, 겹침 40/1280 = 3.125%.
   채움 원 아래 · 테두리 원 위 — J컬과 같은 쌓임 순서. */
.strm-guides__diagram{
  margin-top:var(--sp-block);
  display:flex;justify-content:center;
  position:relative;z-index:0;
}
.strm-guides__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 안으로 못 들어온다 */
}
.strm-guides__circle + .strm-guides__circle{margin-right:-3.125%}
.strm-guides__circle--fill{z-index:0;background:var(--surface-muted)}
.strm-guides__circle--line{z-index:1;box-shadow:inset 0 0 0 1px var(--line-mid)}
.strm-guides__label{
  display:block;margin-bottom:8px;
  font-weight:500;font-size:var(--fs-16);line-height:1.5;
  color:var(--text-tertiary);
}
.strm-guides__text{
  font-weight:700;font-size:var(--fs-20);line-height:1.4;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.strm-guides__circle--fill .strm-guides__text{color:var(--brand)}
.strm-guides__circle--line .strm-guides__text{color:var(--text-secondary)}
/* 1200 미만: 원 4개를 한 줄에 두면 지름이 글자보다 빨리 줄어 라벨이 원 밖으로
   넘친다. 2×2 로 접는다(겹침은 가로로 유지). 2*50 - 4 = 96% 라 넘치지 않는다. */
@media (max-width:1199px){
  .strm-guides__diagram{flex-wrap:wrap;row-gap:var(--sp-gap)}
  .strm-guides__circle{flex-basis:min(50%,380px);max-width:min(50%,380px);padding-inline:calc(4% + 8px)}   /* 겹침 4% + 8 */
  .strm-guides__circle + .strm-guides__circle{margin-right:-4%}
  .strm-guides__circle:nth-child(3){margin-right:0}
}
/* 768 미만: 1열로 세우고 겹침만 세로로 남긴다 */
@media (max-width:767px){
  .strm-guides__diagram{flex-direction:column;align-items:center;flex-wrap:nowrap;row-gap:0}
  .strm-guides__circle{flex-basis:auto;width:min(76%,300px);max-width:none;padding-inline:24px}   /* 겹침이 세로라 좌우는 원래 여백 */
  .strm-guides__circle + .strm-guides__circle{margin-right:0;margin-top:-30px}
  .strm-guides__circle:nth-child(3){margin-right:0}
}

/* ── 수술 단계 탭 (J컬 Sec_5) — 어두운 바탕 위 알약 탭 + 흰 카드 ── */
.strm-steps__tabs{
  margin-top:var(--sp-stack);
  flex-wrap:wrap;justify-content:center;gap:12px;overflow:visible;
}
.strm-steps__tab{
  flex:0 0 auto;min-height:47px;padding-inline:25px;font-weight:600;
  color:var(--line-mid);box-shadow:inset 0 0 0 1px var(--line-mid);
}
.strm-steps__tab:hover{color:var(--text-inverse);box-shadow:inset 0 0 0 1px var(--text-inverse)}
.strm-steps__tab[aria-selected="true"]{
  background:var(--brand);color:var(--text-inverse);box-shadow:none;
}
.strm-steps__panels{margin-top:var(--sp-block)}
/* 탭을 바꿀 때 카드 높이가 흔들리지 않게 J컬과 같은 하한을 둔다 */
.strm-steps__card{padding:var(--sp-block);min-height:300px;color:var(--text-primary)}
.strm-steps__step{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--brand);
}
.strm-steps__title{
  margin-top:6px;
  font-weight:700;font-size:var(--fs-32);line-height:1.5;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.strm-steps__text{
  margin-top:25px;
  font-size:var(--fs-18);line-height:1.6;letter-spacing:var(--ls-tight);
  color:var(--text-secondary);word-break:keep-all;
}
@media (max-width:767px){
  .strm-steps__card{padding:var(--sp-stack) var(--sp-gap);min-height:0}
  .strm-steps__tab{padding-inline:18px}
}

/* ── 유튜브 (J컬 Sec_6) — 플레이어 + 플레이리스트 4 ─────────────── */
/* 메인 Sec_6 과 같은 상·하 여백 140 = --sp-section(120) + 20 */
.strm-tv{padding-block:calc(var(--sp-section) + 20px)}
/* 메인과 같은 66px 제목 행 */
.strm-tv__title{
  margin-top:0;
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;
}
.strm-tv__icon{flex:none;width:58px;height:40px}
/* 메인 리드 박스 32px — 행간 27px 를 그 안에서 가운데 정렬 */
.strm-tv__lead{width:100%;min-height:32px;display:flex;align-items:center;justify-content:center;text-align:center}
.strm-tv__tv{
  display:grid;grid-template-columns:685fr 565fr;gap:var(--sp-gap);align-items:start;
}
.strm-tv__stage{border-radius:var(--radius-card);background:var(--surface-dark)}
.strm-tv__stage img{width:100%;height:100%;object-fit:cover}
.strm-tv__stage iframe{border:0}
.strm-tv__list{margin-top:-1px;border-top:1px solid var(--text-primary)}
.strm-tv__link{
  display:flex;align-items:center;gap:20px;padding-block:12px;
  box-shadow:inset 0 -1px 0 var(--icon-muted);
}
.strm-tv__thumb{flex:none;width:150px;height:84px;object-fit:cover;border-radius:var(--radius-sm)}
.strm-tv__vtitle{
  font-weight:500;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:normal;color:var(--text-primary);word-break:break-word;
}
.strm-tv__link:hover .strm-tv__vtitle{color:var(--brand)}

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

/* ── FAQ (J컬 Sec_7) — 치수는 공용 .accordion 프리미티브가 잡는다 ── */
.strm-faq__list{margin-top:var(--sp-block)}
.strm-faq__label{word-break:keep-all}

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

/* ── 관련 시술 (J컬 Sec_9) ──────────────────────────────────── */
.strm-related__cards{margin-top:var(--sp-block);gap:var(--sp-stack)}
.strm-related__card{height:100%;padding:var(--sp-stack)}
.strm-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;
}
.strm-related__name{
  margin-top:20px;
  font-weight:600;font-size:var(--fs-32);line-height:1.2;letter-spacing:var(--ls-tight);
  color:var(--text-primary);word-break:keep-all;
}
.strm-related__desc{
  margin-top:20px;
  font-size:var(--fs-18);line-height:1.5;color:var(--text-secondary);word-break:keep-all;
}
.strm-related__more{margin-top:20px;color:var(--text-tertiary)}

/* ── 상담 CTA (J컬 Sec_10) — 사진이 없어 --cta-img 를 주지 않는다.
   .cta-band 의 기본 핑크 그라데이션만 깔린다. */
.strm-cta__note{
  max-width:900px;margin-inline:auto;
  color:rgba(255,255,255,.8);
}
@media (max-width:767px){
  .strm-cta__br{display:none}
}

@media (max-width:767px){.strm-approach{background-image:url('https://channel-static.rebeauty.co.kr/kowonps/en/assets/img/opt/0e68e6456d365c00-w1080.webp')}}
