/* ══════════════════════════════════════════════════════════
   오브의원 · 실리프팅 (thread-lifting) 페이지 전용
   접두사 .tl- · site.css 는 손대지 않는다.
   색·타이포·radius 는 site.css 토큰만 쓴다(새 값 0).
   ══════════════════════════════════════════════════════════ */

/* ── 01 hero — 한 장으로 두 비율을 만족시키지 않는다 ────── */
.tl-hero__d{display:none}
.tl-hero__m{display:block; --phero-pos:50% 34%}
@media (min-width:760px){
  .tl-hero__d{display:block; --phero-pos:62% 38%}
  .tl-hero__m{display:none}
}

/* ══ SVG 안의 글자 ═════════════════════════════════════════
   viewBox 스케일을 타므로 폭마다 다시 잡는다(375 에서 13px 하한).
   .tl-mech  viewBox 720 · max-width 560
   .tl-rec   viewBox 900 · max-width 860
   ═════════════════════════════════════════════════════════ */
.tl-lt{fill:var(--muted); font-family:var(--sans); font-weight:600; font-size:29px}
.tl-rt{fill:var(--muted); font-family:var(--sans); font-weight:600; font-size:36px}
.tl-lt--c, .tl-rt--c{text-anchor:middle}
@media (min-width:560px){
  .tl-lt{font-size:19px}      /* 폭 515 → 스케일 .715 → 13.6px */
  .tl-rt{font-size:24px}      /* 폭 515 → 스케일 .572 → 13.7px */
}
@media (min-width:760px){
  .tl-rt{font-size:17px}      /* 폭 704 → 스케일 .782 → 13.3px */
}

/* ── 03 principle — 단면 개념도(이 페이지에서 유일한 애니) ── */
.tl-mech{width:100%; max-width:560px; margin-inline:auto; height:auto; overflow:visible}
.tl-mfill{fill:#EADCCC; stroke:none}
.tl-mline{fill:none; stroke:var(--brand-d); stroke-width:3}
.tl-ghost{fill:none; stroke:var(--line); stroke-width:3; stroke-dasharray:9 9}
.tl-thread{fill:none; stroke:var(--brand); stroke-width:5; stroke-linecap:round}
.tl-barb path{fill:none; stroke:var(--brand); stroke-width:4; stroke-linecap:round}
.tl-anchor{fill:var(--accent); stroke:#fff; stroke-width:3}
.tl-ar path{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round}
.tl-ln{fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:5 5}

/* 조직이 실을 따라 위로 옮겨진다 — 점선(원래 윤곽)은 제자리에 남는다 */
@keyframes tl-lift{
  0%, 14%{transform:translateY(0)}
  46%, 74%{transform:translateY(-22px)}
  100%{transform:translateY(0)}
}
.tl-tis{animation:tl-lift 7s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  /* 애니를 끄면 「옮겨진 상태」를 정지 화면으로 남긴다 — 점선과의 차이가 그대로 보인다 */
  .tl-tis{animation:none; transform:translateY(-22px)}
}

/* ── 04 이런 분께 ───────────────────────────────────────── */
.tl-who{
  display:grid; gap:.85rem;
  margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
}
@media (min-width:560px){.tl-who{grid-template-columns:1fr 1fr; gap:1rem}}
@media (min-width:1040px){.tl-who{grid-template-columns:repeat(4,1fr)}}
.tl-who li{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.25rem, 1rem + 1.2vw, 1.7rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
}
.tl-who__n{
  margin-top:.9rem; font-family:var(--serif); font-weight:700;
  font-size:var(--f-sub); color:var(--accent); letter-spacing:.1em;
}
.tl-who b{margin-top:.2rem; color:var(--ink); font-size:var(--f-body); line-height:1.5}
.tl-who span:last-child{margin-top:.4rem; font-size:var(--f-sub); color:var(--muted); line-height:1.6}

/* ── 07 AI 3D 분석 화면 썸네일(대표 사진보다 작게) ──────── */
.tl-shots{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.4rem}
.tl-shots img{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  border:1px solid var(--line); border-radius:var(--r-card); background:var(--soft);
}

/* ── 08 실 6종 — 대표 1 크게, 나머지 같은 규격 ──────────── */
.tl-th{display:grid; gap:1rem; margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
@media (min-width:640px){.tl-th{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.tl-th{grid-template-columns:repeat(3,1fr); gap:1.25rem}}
.tl-th__c{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
}
.tl-th__ph{
  /* 제품 사진은 흰 배경에 물체만 있다 — cover 로 자르면 물체가 잘린다. contain + 색면. */
  display:grid; place-items:center; padding:1rem;
  aspect-ratio:16/10; background:var(--soft); border-bottom:1px solid var(--line-s);
}
.tl-th__ph img{width:100%; height:100%; object-fit:contain}
.tl-th__b{display:flex; flex-direction:column; padding:1.05rem 1.15rem 1.35rem}
.tl-th__n{font-family:var(--serif); font-size:var(--f-cap); color:var(--accent); letter-spacing:.12em}
.tl-th__t{margin-top:.2rem; color:var(--ink); font-size:var(--f-h3); line-height:1.4}
.tl-th__t i{font-style:normal; font-size:var(--f-sub); color:var(--muted); font-weight:500}
.tl-th__k{margin-top:.35rem; font-size:var(--f-cap); letter-spacing:.06em; color:var(--brand); font-weight:600}
.tl-th__d{margin-top:.6rem; font-size:var(--f-sub); color:var(--body-c); line-height:1.7}
.tl-th__u{
  margin-top:auto; padding-top:1rem; font-size:var(--f-cap); color:var(--muted);
}
@media (min-width:640px){
  .tl-th__c--lead{grid-column:1 / -1; flex-direction:row}
  .tl-th__c--lead .tl-th__ph{flex:0 0 44%; aspect-ratio:auto; min-height:250px; border-bottom:0; border-right:1px solid var(--line-s)}
  .tl-th__c--lead .tl-th__b{flex:1; padding:clamp(1.3rem, 1rem + 1.4vw, 2rem)}
}

/* ── 09 비교표 ──────────────────────────────────────────── */
.tl-cap{
  caption-side:top; text-align:left; padding-bottom:.7rem;
  font-size:var(--f-cap); color:var(--muted);
}

/* ── 11 회복 타임라인 ───────────────────────────────────── */
.tl-rec{margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
.tl-rec__svg{width:100%; max-width:860px; margin-inline:auto; height:auto}
.tl-rec__ax{stroke:var(--line); stroke-width:3; stroke-linecap:round}
.tl-rec__dot circle{fill:var(--accent); stroke:#fff; stroke-width:3}
.tl-rec__tick path{fill:none; stroke:var(--line); stroke-width:2; stroke-dasharray:5 5}

.tl-rlist{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem;
  margin-top:1.9rem; border-top:1px solid var(--line);
}
.tl-rlist dt{
  padding:.95rem 0; font-family:var(--serif); font-weight:700;
  font-size:var(--f-sub); color:var(--accent); letter-spacing:.04em; white-space:nowrap;
}
.tl-rlist dd{
  padding:.95rem 0; font-size:var(--f-sub); color:var(--body-c); line-height:1.7;
  border-bottom:1px solid var(--line-s);
}
.tl-rlist dt{border-bottom:1px solid var(--line-s)}
@media (min-width:900px){
  .tl-rlist{grid-template-columns:auto 1fr auto 1fr; column-gap:1.4rem}
}

/* ── 12 안전 · 사후관리 ─────────────────────────────────── */
.tl-safe{display:grid; gap:.85rem; margin-top:clamp(1.9rem, 1.2rem + 2.6vw, 3rem)}
@media (min-width:700px){.tl-safe{grid-template-columns:1fr 1fr; gap:1rem}}
.tl-safe li{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(1.25rem, 1rem + 1.2vw, 1.8rem);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
}
.tl-safe b{margin-top:.85rem; color:var(--ink); font-size:var(--f-body); line-height:1.5}
.tl-safe span{margin-top:.4rem; font-size:var(--f-sub); color:var(--muted); line-height:1.7}
.tl-safe .txtlink{margin-top:.55rem}

/* ── 14 가격 ────────────────────────────────────────────── */
.tl-price{margin-top:1.4rem; border-top:1px solid var(--line)}
.tl-price li{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.1rem; align-items:baseline;
  padding:.9rem 0; border-bottom:1px solid var(--line-s);
}
.tl-price span{
  font-size:var(--f-cap); letter-spacing:.1em; color:var(--accent); font-weight:600; white-space:nowrap;
}
.tl-price b{color:var(--ink); font-size:var(--f-sub); font-weight:600; line-height:1.6}