/* ── /signature/nasal-tip — Drooping Tip (tip muscle correction) ────────
   J컬 서브페이지와 같은 순서·톤. 뼈대는 subpage.css / layout.css 프리미티브로
   만들고, 이 파일에는 그 프리미티브로 표현되지 않는 것만 둔다.
   (.page-hero .numbered .hubgrid/.hubcard .cta-band .disclaimer
    .grid .card .tabs/.tab/.tabpanel .sub-label .tag-list .stack-lg 재사용) */

/* ── 히어로 ────────────────────────────────────────────────────────────
   리드 문구가 두 구절이라 J컬 히어로와 같은 '|' 구분자를 쓴다(같은 색 50%). */
.ntip-hero__sep{opacity:.5}

/* ── 핵심 4가지 ────────────────────────────────────────────────────────
   .numbered 는 3열이 기본. 항목이 4개라 열 수만 바꾼다(구조 변경).
   1023 이하는 프리미티브와 같은 2열 → 1열로 되돌린다. */
.ntip-points{grid-template-columns:repeat(4,1fr)}
/* 한 줄짜리 문구라 카드 안 여백을 시술 카드보다 줄인다 */
.ntip-points .numbered__item{padding:28px 24px}

/* ── 원인 — 근육 2종 ───────────────────────────────────────────────── */
.ntip-causes__fig{margin:0;text-align:center}
/* 라벨 줄 수가 서로 달라도(1줄 vs 2~3줄) 두 카드의 이미지·라벨·불릿 줄이
   같은 높이에서 시작하게 한다. 행 간격은 지금처럼 margin 이 정한다(row-gap:0).
   subgrid 미지원 브라우저에서는 span 만 남아 지금과 같은 세로 흐름이 된다. */
.ntip-causes__fig{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0}
.ntip-causes__fig > figcaption{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
.ntip-causes__img{
  width:100%;height:auto;
  border-radius:var(--radius-card);
  background:var(--surface);
}
/* J컬 Sec_2 의 핑크 알약 라벨과 같은 형태(용어 + 라틴 학명) */
.ntip-causes__name{
  margin-top:var(--sp-stack);
  padding:14px 24px;
  border-radius:var(--radius-pill);
  background:var(--brand-tint-2);
  font-size:var(--fs-24);line-height:1.5;letter-spacing:var(--ls-tight);
  word-break:keep-all;
}
.ntip-causes__name strong{font-weight:700;color:var(--brand)}
.ntip-causes__name span{display:block;font-weight:500;font-size:var(--fs-16);color:var(--text-tertiary)}   /* 학명은 괄호째 다음 줄로 — 중간에서 끊기지 않게 */

.ntip-causes__list{
  margin-top:var(--sp-tight);
  display:flex;flex-direction:column;gap:8px;
  text-align:left;
}
.ntip-causes__list li{
  position:relative;padding-left:16px;
  font-size:var(--fs-18);line-height:1.7;
  color:var(--text-secondary);word-break:keep-all;
}
.ntip-causes__list li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:5px;height:5px;border-radius:50%;background:var(--brand);
}

/* ── KOWON 의 접근 — 원형 노드 4개 ("+" 로 이어진다) ────────────────
   원문: 흰 원 2 + 강조(핑크) 원 2 를 '+' 글리프로 잇는다(그 글리프는
   aria-hidden 장식이라 마크업 대신 ::before 로 그린다).
   태블릿 이하에서는 원문과 같이 2열로 접히고 '+' 는 감춘다. */
.ntip-approach__nodes{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:26px;
}
.ntip-approach__node{
  position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:168px;aspect-ratio:1;
  padding-inline:20px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 10px 30px -12px rgba(20,29,51,.35), inset 0 0 0 1px var(--line-soft);
  font-weight:700;font-size:var(--fs-14);line-height:1.35;
  letter-spacing:var(--ls-tight);color:var(--text-primary);
  text-align:center;word-break:keep-all;
}
.ntip-approach__node--accent{
  background:var(--brand);color:var(--text-inverse);
  box-shadow:0 10px 30px -12px rgba(255,10,108,.55);
}
/* '+' 는 원 바깥, 앞 원과의 간격 한가운데에 놓는다(흐름에서 빼낸다) */
.ntip-approach__node + .ntip-approach__node::before{
  content:"+";
  position:absolute;right:100%;top:50%;
  width:26px;margin-top:-.5em;
  font-weight:300;font-size:var(--fs-24);line-height:1;
  color:var(--line-mid);text-align:center;
}

/* ── 무엇을 보고 수술하는가 — 겹친 원형 라벨 4개 ──────────────────
   J컬 Sec_4 시안(Img_diagram 1280×350)과 같은 배치·톤으로 맞춘다.
     지름 350/1280 = 27.34375%   겹침 40/1280 = 3.125%
   쌓임 순서도 시안 그대로 — 테두리 원이 회색 채움 원 위에 온다.
   채움 원은 분홍 글자, 테두리 원은 회색 글자(교차 배치). */
.ntip-guides{
  display:flex;justify-content:center;
  position:relative;z-index:0;      /* z-index 를 이 안에 가둔다 */
}
.ntip-guides__item{
  position:relative;
  flex:0 0 27.34375%;max-width:27.34375%;   /* 350 / 1280 */
  aspect-ratio:1;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding-inline:calc(3.125% + 8px);   /* 겹침(3.125%)과 같은 컨테이너 폭 기준 백분율 — 글자가 옆 원 선 8px 안으로 못 들어온다 */
  text-align:center;word-break:keep-all;
}
.ntip-guides__item + .ntip-guides__item{margin-left:-3.125%}  /* 겹침 40 / 1280 */
.ntip-guides__item--fill{z-index:0;background:var(--surface-muted)}
.ntip-guides__item--line{z-index:1;box-shadow:inset 0 0 0 1px var(--line-mid)}
.ntip-guides__lead{
  font-size:var(--fs-18);line-height:1.4;letter-spacing:var(--ls-tight);
}
.ntip-guides__emph{
  font-weight:700;font-size:var(--fs-24);line-height:1.4;
  letter-spacing:var(--ls-tight);
}
.ntip-guides__item--fill .ntip-guides__lead,
.ntip-guides__item--fill .ntip-guides__emph{color:var(--brand)}
.ntip-guides__item--line .ntip-guides__lead,
.ntip-guides__item--line .ntip-guides__emph{color:var(--text-secondary)}

/* ── Before & After ───────────────────────────────────────────────────
   J컬 Sec_4 처럼 한 섹션 안에 머리말 블록 + 결과 블록 두 덩이가 들어간다. */
.ntip-results__inner{margin-top:var(--sp-block)}
.ntip-results__case{margin:0}
/* .sub-label(18/700) 안에서 'Before & After' 부분만 약하게 */
.ntip-results__label{flex-wrap:wrap;gap:6px}
.ntip-results__label span{font-weight:500;color:var(--text-tertiary)}
.ntip-results__img{
  margin-top:var(--sp-tight);
  width:100%;height:auto;
  border-radius:var(--radius-card);
  background:var(--surface-muted);
}

/* ── PROCESS — STEP 탭 ────────────────────────────────────────────────
   어두운 배경 위 알약 탭. 좁은 폭에서는 가로 스크롤 대신 줄바꿈으로 넘긴다. */
.ntip-process__tabs{
  margin-top:var(--sp-stack);
  flex-wrap:wrap;justify-content:center;gap:12px;
  overflow:visible;
}
.ntip-process__tab{
  flex:0 0 auto;
  font-weight:600;
  color:var(--line-soft);
  box-shadow:inset 0 0 0 1px var(--line-outline);
}
.ntip-process__tab:hover{color:var(--text-inverse);box-shadow:inset 0 0 0 1px var(--text-inverse)}
.ntip-process__tab[aria-selected="true"]{
  background:var(--brand);color:var(--text-inverse);box-shadow:none;
}

.ntip-process__card{
  padding:var(--sp-stack) var(--sp-block);
  color:var(--text-primary);
}
.ntip-process__step{
  font-weight:700;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:var(--ls-tight);color:var(--brand);
}
.ntip-process__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;
}
.ntip-process__text{
  margin-top:var(--sp-stack);
  font-size:var(--fs-18);line-height:1.7;
  color:var(--text-secondary);word-break:keep-all;
}

/* ── KOWON Youtube — 메인 플레이어 + 재생목록 4 + 채널 버튼 ──────────── */
.ntip-tv{padding-block:calc(var(--sp-section) + 20px)}   /* main·J컬 Sec_6 상하 140 */
/* 머리말은 main Sec_6 과 같이 가운데 — 유튜브 아이콘 + H2 (66px 행, 간격 10) */
.ntip-tv__title{
  margin-top:0;
  display:flex;align-items:center;justify-content:center;
  gap:10px;min-height:66px;
}
.ntip-tv__icon{flex:none;width:58px;height:40px}
/* 리드 박스 32px — 행간 27px 를 그 안에서 가운데 정렬 */
.ntip-tv__lead{
  width:100%;min-height:32px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.ntip-tv__grid{
  display:grid;
  grid-template-columns:685fr 565fr;   /* J컬 Sec_6 과 같은 비율 (1280 기준) */
  gap:var(--sp-gap);
  align-items:start;
}
.ntip-tv__feature{margin:0}
.ntip-tv__stage{
  aspect-ratio:16/9;                   /* 유튜브 원본 비율 — main Sec_6 / J컬 Sec_6 과 같은 값 */
  border-radius:var(--radius-card);
  background:var(--surface-dark);
}
.ntip-tv__stage img{width:100%;height:100%;object-fit:cover}
.ntip-tv__stage iframe{border:0}

.ntip-tv__list{
  margin-top:-1px;                            /* 시안 Line 1 은 미디어 상단보다 1px 위 */
  border-top:1px solid var(--text-primary);
}
.ntip-tv__link{
  display:flex;align-items:center;gap:20px;
  padding-block:12px;
  box-shadow:inset 0 -1px 0 var(--icon-muted);
}
.ntip-tv__thumb{
  flex:none;width:150px;height:84px;
  object-fit:cover;border-radius:var(--radius-sm);
}
.ntip-tv__vtitle{
  font-weight:500;font-size:var(--fs-18);line-height:1.5;
  letter-spacing:normal;          /* 시안 이 텍스트만 자간 0 */
  color:var(--text-primary);word-break:break-word;
}
.ntip-tv__link:hover .ntip-tv__vtitle{color:var(--brand)}

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

/* ── FAQ — 치수는 공용 .accordion 프리미티브(J컬 Sec_7 기준)가 잡는다.
   동작은 site.js 가 .accordion__btn / aria-controls 로 처리한다. */
.ntip-faq__label{word-break:keep-all}

/* ── 칼럼 목록 — J컬 Sec_8 과 같은 연분홍 밴드·카드 ──────────────────
   좌 타이틀(eyebrow+H2+lead) / 우 하단 See all columns 아웃라인 버튼,
   그 아래 정사각 썸네일 카드 3개 한 줄. 칩은 시안 40 높이 / 좌우 17 / 사이 10. */
.ntip-columns{padding-block:calc(var(--sp-section) + 20px)}   /* J컬 Sec_8 상하 140 */
.ntip-columns__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-stack);
}
.ntip-columns__intro{max-width:886px}   /* 시안 텍스트 블록 폭 — 리드가 2줄로 끊긴다 */
.ntip-columns__all{flex:none;min-width:260px}   /* 시안 CTA 260×56 */
.ntip-columns__card{display:flex;flex-direction:column;height:100%}
.ntip-columns__body{flex:1 1 auto;display:flex;flex-direction:column;padding:var(--sp-gap)}
.ntip-columns__tags{gap:10px}
.ntip-columns__tag{height:40px;padding-inline:17px;border-radius:var(--radius-pill);font-size:var(--fs-16);line-height:1}
/* 칩 아래 10 / 제목 박스 아래 34 — 기록자 줄은 카드 바닥에 붙는다 */
.ntip-columns__title{margin-top:10px;margin-bottom:34px}
.ntip-columns__meta{margin-top:auto;line-height:1.4}

/* ── 상담 CTA ─────────────────────────────────────────────────────────
   .cta-band 는 사진 없이 브랜드 색만으로도 성립한다(--cta-img 미지정).
   고지 문구는 핑크 밴드 위라 .disclaimer 의 회색 대신 흰색 85% 로 둔다.
   (토큰에 알파 변형이 없어 rgba 로 쓴다 — subpage.css 의 리드와 같은 방식) */
.ntip-cta__note{color:rgba(255,255,255,.85)}

/* ── 반응형 — 구조만 바꾼다 ───────────────────────────────────────── */
@media (max-width:1279px){
  .ntip-approach__node{width:150px}
}
/* ── 1100 미만: 원 4개를 한 줄에 두면 지름이 글자보다 빨리 줄어
   라벨이 원 밖으로 넘친다. 가장 긴 줄 'Columella and philtrum angles' 가
   236px 라 지름 263px 이상이 필요하고, 지름 = 0.2734 × 컨테이너 폭이므로
   뷰포트 1042px 아래에서 깨진다. 여유를 두고 1100 에서 2×2 로 접는다. */
@media (max-width:1099px){
  .ntip-guides{flex-wrap:wrap;row-gap:var(--sp-gap)}
  .ntip-guides__item{flex-basis:52.5%;max-width:52.5%;padding-inline:calc(5% + 8px)}   /* 겹침 5% + 8 */
  .ntip-guides__item + .ntip-guides__item{margin-left:-5%}
  .ntip-guides__item:nth-child(3){margin-left:0}
}
@media (max-width:1023px){
  .ntip-points{grid-template-columns:repeat(2,1fr)}
  /* 원문과 같이 2열로 접는다 — '+' 는 감춘다 */
  .ntip-approach__nodes{gap:var(--sp-tight)}
  .ntip-approach__node{width:min(40vw,150px)}
  .ntip-approach__node + .ntip-approach__node::before{display:none}
}
@media (max-width:767px){
  .ntip-points{grid-template-columns:1fr}
  .ntip-process__card{padding:var(--sp-stack) var(--sp-gap)}
  .ntip-tv__title{gap:8px;min-height:0}
  .ntip-tv__icon{width:40px;height:28px}
  .ntip-tv__link{gap:var(--sp-tight)}
  .ntip-tv__thumb{width:120px;height:67px}
  .ntip-columns__head{flex-direction:column;align-items:stretch;gap:var(--sp-gap)}
  .ntip-columns__all{align-self:flex-start}
  /* 2열로도 지름이 모자란다. J컬 Sec_4 처럼 1열로 세우고 겹침만 남긴다 */
  .ntip-guides{flex-direction:column;align-items:center;row-gap:0}
  .ntip-guides__item{flex-basis:auto;width:100%;max-width:360px;padding-inline:20px}
  .ntip-guides__item + .ntip-guides__item{margin-left:0;margin-top:-40px}
  .ntip-guides__item:nth-child(3){margin-left:0}
}