/* =====================================================================
   components.css — Global Section Components v3
   모든 컴포넌트는 design-tokens 변수만 참조한다.
   ===================================================================== */

/* ══════════════════════════════════════════════════════════
   SECTION HEADER  (Eyebrow → H2 → Lead — 모든 섹션 공통)
   ══════════════════════════════════════════════════════════ */
.sec-head { margin-bottom: var(--sp-56) }
.sec-head .t-eyebrow { margin-bottom: var(--sp-16) }
.sec-head h2 { margin-bottom: 0 }
.sec-head .lead {
  font-size: var(--fs-lead);
  color:     var(--clr-ink-3);
  line-height: var(--lh-normal);
  max-width: 60ch;
  margin-top: var(--sp-20);
  word-break: keep-all;
}
.sec-head.center { text-align:center }
.sec-head.center .lead { margin-inline:auto }

/* ══════════════════════════════════════════════════════════
   HERO — Home (Editorial / Cinematic)
   ══════════════════════════════════════════════════════════ */
.home-hero {
  position: relative;
  height:   clamp(520px, 78vh, 960px);
  display:  flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--clr-dark);
}

/* 슬라이드 레이어 */
.hero-slides { position:absolute; inset:0; z-index:0 }
.hero-slide  { position:absolute; inset:0; opacity:0; transition:opacity 1.4s ease }
.hero-slide.active { opacity:1 }
.hero-slide__bg { position:absolute; inset:0; background:var(--clr-dark-2) }
.hero-slide__bg img,
.hero-slide__bg video {
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.05);
  transition:transform 7s ease;
}
.hero-slide.active .hero-slide__bg img,
.hero-slide.active .hero-slide__bg video { transform:scale(1) }

/* 그라디언트 오버레이 */
.hero-scrim {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(
    180deg,
    rgba(23,23,23,.05) 0%,
    rgba(23,23,23,.45) 55%,
    rgba(23,23,23,.82) 88%,
    rgba(23,23,23,.94) 100%
  );
}
.hero-scrim-h {
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(90deg, rgba(23,23,23,.5) 0%, transparent 55%);
}

/* 텍스트 */
.home-hero__inner {
  position:  relative; z-index:3;
  width:100%; max-width:var(--w-full);
  margin-inline:auto;
  padding: 0 var(--pad-x) clamp(52px, 7vw, 96px);
}
.home-hero h1 {
  font-size:    var(--fs-hero-h1);
  color:        var(--clr-ink-inv);
  line-height:  1.06;
  max-width:    16ch;
  margin-bottom:var(--sp-20);
}
.home-hero .lead {
  font-size:    var(--fs-lead);
  color:        var(--clr-ink-inv-2);
  max-width:    38ch;
  line-height:  var(--lh-normal);
  margin-bottom:var(--sp-32);
}
.home-hero__cta { display:flex; gap:var(--sp-12); flex-wrap:wrap }

/* 슬라이드 인디케이터 */
.hero-nav {
  position:absolute; bottom:clamp(28px,4vw,52px); right:var(--pad-x);
  z-index:4; display:flex; gap:var(--sp-8); align-items:center;
}
.hero-dot {
  width:28px; height:2px;
  background:rgba(247,245,240,.3);
  border:none; padding:0; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background var(--dur) var(--ease);
}
.hero-dot.active { background:rgba(247,245,240,.2) }
.hero-dot span {
  position:absolute; left:0; top:0; height:100%;
  background:var(--clr-gold);
  width:0%; transition:width 5.5s linear;
}
.hero-dot.active span { width:100% }

/* 슬라이드 레이블 */
.hero-label {
  position:absolute; bottom:clamp(28px,4vw,52px); left:var(--pad-x);
  z-index:4; display:flex; align-items:center; gap:var(--sp-12);
}
.hero-label .idx {
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.16em; color:var(--clr-gold);
}
.hero-label .line {
  width:1px; height:40px;
  background:linear-gradient(var(--clr-ink-inv-2), transparent);
  animation:scrolldn 2.2s infinite;
}
@keyframes scrolldn {
  0%  { transform:scaleY(0); transform-origin:top }
  45% { transform:scaleY(1); transform-origin:top }
  55% { transform:scaleY(1); transform-origin:bottom }
  100%{ transform:scaleY(0); transform-origin:bottom }
}

/* ══════════════════════════════════════════════════════════
   PAGE HERO (서브페이지)
   ══════════════════════════════════════════════════════════ */
.page-hero {
  padding: clamp(72px,10vh,130px) 0 clamp(44px,5vw,68px);
  border-bottom: 1px solid var(--clr-line);
}
.page-hero h1 { max-width:22ch }
.page-hero .lead {
  max-width:56ch;
  font-size:var(--fs-lead);
  color:var(--clr-ink-3);
  margin-top:var(--sp-20);
  word-break:keep-all;
}

/* Answer Block (AEO) */
.answer-block {
  max-width: var(--w-read);
  border-left: 2px solid var(--clr-gold);
  padding: var(--sp-4) 0 var(--sp-4) var(--sp-24);
  margin-top: var(--sp-24);
}
.answer-block p {
  font-size:   var(--fs-lead);
  color:       var(--clr-ink);
  line-height: var(--lh-normal);
  font-weight: var(--fw-medium);
  word-break:  keep-all;
}

/* ══════════════════════════════════════════════════════════
   STATEMENT (대형 한 줄 선언)
   ══════════════════════════════════════════════════════════ */
.statement__big {
  font-size:    clamp(32px, 4.6vw, 64px);
  font-weight:  var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height:  1.18;
  max-width:    22ch;
  word-break:   keep-all;
}
.statement__big .muted { color:var(--clr-ink-3) }
.statement__big .em    { color:var(--clr-gold) }
.statement__sub {
  margin-top:  var(--sp-28, 28px);
  max-width:   48ch;
  font-size:   var(--fs-lead);
  color:       var(--clr-ink-3);
  line-height: var(--lh-normal);
  word-break:  keep-all;
}

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════ */
.breadcrumb {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size:   var(--fs-label);
  letter-spacing:.06em;
  color:       var(--clr-ink-3);
  margin-bottom:var(--sp-20);
}
.breadcrumb a { transition:color var(--dur-fast) }
.breadcrumb a:hover { color:var(--clr-gold) }
.breadcrumb .sep { margin-inline:var(--sp-8); color:var(--clr-line-2) }

/* ══════════════════════════════════════════════════════════
   PROCESS  (SEE → ANALYZE → DESIGN → TREAT → FOLLOW)
   ══════════════════════════════════════════════════════════ */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--clr-line);
}
.process__step {
  padding: var(--sp-32) var(--sp-20) var(--sp-40);
  border-right: 1px solid var(--clr-line);
}
.process__step:last-child { border-right:none }
.process__step .idx {
  font-family:  var(--font-mono);
  font-size:    var(--fs-label);
  letter-spacing:.14em;
  color:        var(--clr-gold);
  margin-bottom:var(--sp-16);
}
.process__step h4 { font-size:17px; margin-bottom:var(--sp-8) }
.process__step p  { font-size:14px; color:var(--clr-ink-3); line-height:var(--lh-normal) }
@media(max-width:900px) {
  .process { grid-template-columns:1fr 1fr }
  .process__step { border-bottom:1px solid var(--clr-line) }
  .process__step:nth-child(2n) { border-right:none }
}
@media(max-width:480px) {
  .process { grid-template-columns:1fr }
  .process__step { border-right:none }
}

/* ══════════════════════════════════════════════════════════
   FIVE SIGNATURE CARDS
   ══════════════════════════════════════════════════════════ */
.sig-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--clr-line);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sig-card {
  background: var(--clr-bg);
  display: flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition: background var(--dur) var(--ease);
}
.sig-card:hover { background: var(--clr-bg-2) }
.sig-card__media {
  aspect-ratio: 16/10;
  background:   var(--clr-bg-3);
  overflow:     hidden;
}
.sig-card__media img {
  width:100%; height:100%; object-fit:cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.sig-card:hover .sig-card__media img { transform:scale(1.04) }
.sig-card__body {
  padding:     var(--sp-24);
  flex:        1;
  display:     flex;
  flex-direction:column;
  gap:         var(--sp-8);
}
.sig-card__en {
  font-family:  var(--font-mono);
  font-size:    var(--fs-eyebrow);
  letter-spacing:var(--ls-wide);
  color:        var(--clr-gold);
  text-transform:uppercase;
}
.sig-card h3  { font-size: var(--fs-h4); margin:0 }
.sig-card p   { font-size:var(--fs-caption); color:var(--clr-ink-3); flex:1; word-break:keep-all }
.sig-card .go {
  margin-top: var(--sp-16);
  font-size:  13px; font-weight:var(--fw-semibold);
  color:      var(--clr-gold-dark);
  display:    inline-flex; gap:var(--sp-8); align-items:center;
}
.sig-card .go svg { transition:transform var(--dur-fast) }
.sig-card:hover .go svg { transform:translateX(4px) }
@media(max-width:900px) { .sig-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .sig-grid { grid-template-columns:1fr } }

/* ══════════════════════════════════════════════════════════
   DIFF CARDS (병변 구별)
   ══════════════════════════════════════════════════════════ */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}
.diff-card {
  background:    var(--clr-bg);
  border:        1px solid var(--clr-line);
  border-radius: var(--r-lg);
  padding:       var(--sp-32) var(--sp-24);
  transition:    border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.diff-card:hover { border-color:var(--clr-gold); transform:translateY(-3px) }
.diff-card__swatch {
  width:40px; height:40px;
  border-radius:var(--r-sm);
  margin-bottom:var(--sp-20);
}
.diff-card h4  { font-size:var(--fs-h4); margin-bottom:var(--sp-4) }
.diff-card .sub {
  font-family:  var(--font-mono);
  font-size:    var(--fs-label);
  letter-spacing:.08em; text-transform:uppercase;
  color:        var(--clr-ink-3);
}
.diff-card p   { font-size:var(--fs-caption); color:var(--clr-ink-3); line-height:var(--lh-normal); margin-top:var(--sp-16); word-break:keep-all }
@media(max-width:900px) { .diff-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .diff-grid { grid-template-columns:1fr } }

/* Swatches */
.sw-lentigo   { background:linear-gradient(135deg,#8a5a34,#5a3a20) }
.sw-melasma   { background:linear-gradient(135deg,#a3785c,#7a5540) }
.sw-freckle   { background:radial-gradient(circle at 30% 30%,#a9764f 16%,transparent 17%),radial-gradient(circle at 68% 58%,#a9764f 13%,transparent 14%),#e0bb99 }
.sw-keratosis { background:linear-gradient(135deg,#6b4526,#3d2614) }
.sw-pih       { background:linear-gradient(135deg,#8d6a55,#5c4232) }
.sw-vessel    { background:linear-gradient(135deg,#c0524a,#7d2b26) }
.sw-nevus     { background:linear-gradient(135deg,#4a3524,#241708) }
.sw-mix       { background:linear-gradient(135deg,#876e5c,#574134) }

/* ══════════════════════════════════════════════════════════
   BAND (좌우 교차 레이아웃)
   ══════════════════════════════════════════════════════════ */
.band {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  align-items:center;
}
.band.rev .band-vis { order:2 }
.band-vis .img-wrap { aspect-ratio:4/3; border-radius:var(--r-lg) }
.band-txt .t-eyebrow { margin-bottom:var(--sp-16) }
.band-txt h2  { margin-bottom:var(--sp-16) }
.band-txt p   { font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-loose); margin-bottom:var(--sp-24); max-width:44ch; word-break:keep-all }
.band-links   { display:flex; flex-wrap:wrap; gap:var(--sp-8) }
.band-links a { font-size:13px; color:var(--clr-gold-dark); border:1px solid var(--clr-line-2); border-radius:var(--r-sm); padding:8px 14px; transition:border-color var(--dur-fast) }
.band-links a:hover { border-color:var(--clr-gold); background:var(--clr-gold-wash) }
@media(max-width:900px) {
  .band { grid-template-columns:1fr; gap:var(--sp-32) }
  .band.rev .band-vis { order:0 }
}

/* ══════════════════════════════════════════════════════════
   STICKY NARRATIVE
   ══════════════════════════════════════════════════════════ */
.sticky-pair {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--sp-64); align-items:start;
}
.sticky-pair__vis {
  position:sticky;
  top:calc(var(--header-h) + var(--sp-32));
}
.sticky-pair__vis .img-wrap { aspect-ratio:4/5; border-radius:var(--r-lg) }
.sticky-pair__cap {
  margin-top:var(--sp-12);
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.08em; color:var(--clr-ink-3);
}
.sticky-pair__steps .step {
  padding:var(--sp-40) 0;
  border-bottom:1px solid var(--clr-line);
}
.sticky-pair__steps .step:last-child { border-bottom:none }
.sticky-pair__steps .idx {
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.2em; color:var(--clr-gold);
  display:block; margin-bottom:var(--sp-16);
}
.sticky-pair__steps h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-12); word-break:keep-all }
.sticky-pair__steps p  { font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-loose); word-break:keep-all }
@media(max-width:900px) {
  .sticky-pair { grid-template-columns:1fr; gap:var(--sp-32) }
  .sticky-pair__vis { position:relative; top:0 }
}

/* ══════════════════════════════════════════════════════════
   NOTICE (의료광고법)
   ══════════════════════════════════════════════════════════ */
.notice {
  border:        1px solid var(--clr-line);
  border-left:   2px solid var(--clr-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding:       var(--sp-24) var(--sp-28);
  background:    rgba(180,154,112,.04);
}
.notice h5 {
  font-family:    var(--font-mono);
  font-size:      var(--fs-label);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color:          var(--clr-gold);
  margin-bottom:  var(--sp-12);
}
.notice p { font-size:var(--fs-caption); line-height:var(--lh-loose); color:var(--clr-ink-3); word-break:keep-all }
.notice p + p { margin-top:var(--sp-8) }

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq { max-width:820px }
.faq-item { border-bottom:1px solid var(--clr-line) }
.faq-q {
  width:100%; text-align:left;
  background:none; border:none; color:inherit; font-family:inherit;
  padding:var(--sp-24) var(--sp-40) var(--sp-24) 0;
  position:relative; display:flex; gap:var(--sp-16); align-items:flex-start;
  cursor:pointer;
}
.faq-q .qn {
  font-family:var(--font-mono); font-size:var(--fs-eyebrow);
  color:var(--clr-gold); padding-top:3px; flex:none;
}
.faq-q h4  { font-size:var(--fs-h4); line-height:var(--lh-snug); word-break:keep-all }
.faq-q .ic { position:absolute; right:0; top:var(--sp-28, 28px); width:16px; height:16px }
.faq-q .ic::before, .faq-q .ic::after {
  content:""; position:absolute; background:var(--clr-ink-3); transition:transform var(--dur-fast);
}
.faq-q .ic::before { top:7.5px; left:0; width:16px; height:1.5px }
.faq-q .ic::after  { top:0; left:7.5px; width:1.5px; height:16px }
.faq-item.open .ic::after { transform:rotate(90deg); opacity:0 }
.faq-a { overflow:hidden; max-height:0; transition:max-height .38s var(--ease-out) }
.faq-a div {
  padding:0 0 var(--sp-24) calc(var(--sp-16) + 1ch + var(--sp-16));
  font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-loose);
  max-width:64ch; word-break:keep-all;
}
@media(max-width:560px) { .faq-a div { padding-left:0 } }

/* ══════════════════════════════════════════════════════════
   CTA BAND
   ══════════════════════════════════════════════════════════ */
.cta-band {
  background:    var(--clr-dark);
  color:         var(--clr-ink-inv);
  border-radius: var(--r-xl);
  padding:       clamp(52px,7vw,96px) clamp(32px,5vw,72px);
  text-align:    center;
}
.cta-band h2   { color:var(--clr-ink-inv); margin-bottom:var(--sp-16); word-break:keep-all }
.cta-band p    { color:var(--clr-ink-inv-2); font-size:var(--fs-lead); max-width:44ch; margin:0 auto var(--sp-32); line-height:var(--lh-normal); word-break:keep-all }
.cta-band-btns { display:flex; gap:var(--sp-12); justify-content:center; flex-wrap:wrap }

/* ══════════════════════════════════════════════════════════
   DOCTOR
   ══════════════════════════════════════════════════════════ */
.doctor {
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,5vw,72px); align-items:center;
}
.doctor-vis .img-wrap { aspect-ratio:4/5; border-radius:var(--r-lg) }
.doctor-txt h2 { margin-bottom:var(--sp-24) }
.doctor-quote {
  font-size:   clamp(18px,1.9vw,24px);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color:       var(--clr-ink);
  border-left: 2px solid var(--clr-gold);
  padding-left:var(--sp-20);
  margin-bottom:var(--sp-24);
  word-break:  keep-all;
}
.doctor-txt p { font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-loose); margin-bottom:var(--sp-16); word-break:keep-all }
@media(max-width:900px) { .doctor { grid-template-columns:1fr; gap:var(--sp-32) } }

/* ══════════════════════════════════════════════════════════
   ABOUT — Points / Timeline / Gallery
   ══════════════════════════════════════════════════════════ */
.points { border-top:1px solid var(--clr-line) }
.point  {
  display:grid; grid-template-columns:72px 1fr;
  gap:var(--sp-24); padding:var(--sp-32) 0;
  border-bottom:1px solid var(--clr-line); align-items:start;
}
.point .no { font-family:var(--font-mono); font-size:var(--fs-eyebrow); color:var(--clr-gold); padding-top:4px }
.point h3  { font-size:var(--fs-h3); margin-bottom:var(--sp-12); word-break:keep-all }
.point p   { font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-loose); max-width:56ch; word-break:keep-all }
@media(max-width:640px) { .point { grid-template-columns:1fr; gap:var(--sp-8) } }

.timeline      { position:relative; padding-left:var(--sp-32) }
.timeline::before { content:""; position:absolute; left:8px; top:8px; bottom:8px; width:1.5px; background:var(--clr-line) }
.tl            { position:relative; padding:0 0 var(--sp-40) }
.tl:last-child { padding-bottom:0 }
.tl::before    { content:""; position:absolute; left:calc(0px - var(--sp-32) + 1px); top:4px; width:18px; height:18px; border-radius:50%; background:var(--clr-bg); border:2px solid var(--clr-gold) }
.tl .st        { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; color:var(--clr-gold); margin-bottom:var(--sp-8) }
.tl h3         { font-size:var(--fs-h4); margin-bottom:var(--sp-8); word-break:keep-all }
.tl p          { font-size:var(--fs-caption); color:var(--clr-ink-3); line-height:var(--lh-normal); word-break:keep-all }

.gallery { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.gallery .g { border-radius:var(--r-md); overflow:hidden; background:var(--clr-bg-3) }
.gallery .g .ph { border:none; border-radius:0; height:100%; min-height:160px }
.gallery .g.wide { grid-column:span 2 }
.gallery .g.tall { grid-row:span 2 }
@media(max-width:900px) { .gallery { grid-template-columns:1fr 1fr } .gallery .g.wide { grid-column:span 2 } }
@media(max-width:540px) { .gallery { grid-template-columns:1fr } .gallery .g.wide,.gallery .g.tall { grid-column:span 1; grid-row:span 1 } }

.info-table { width:100%; border-collapse:collapse; border-top:1px solid var(--clr-line) }
.info-table tr { border-bottom:1px solid var(--clr-line) }
.info-table td { padding:14px 0; font-size:var(--fs-body); color:var(--clr-ink-3) }
.info-table td:first-child { font-weight:var(--fw-semibold); color:var(--clr-ink); padding-right:var(--sp-24); width:140px }

.creds    { display:grid; gap:var(--sp-12); margin-top:var(--sp-8) }
.creds li { display:flex; gap:var(--sp-12); font-size:var(--fs-body); color:var(--clr-ink-3); line-height:var(--lh-normal); list-style:none }
.creds li::before { content:"—"; color:var(--clr-gold); flex:none }

/* ══════════════════════════════════════════════════════════
   CONTACT
   ══════════════════════════════════════════════════════════ */
.contact { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-56); align-items:center }
.contact-map .img-wrap { aspect-ratio:16/11; border-radius:var(--r-lg) }
.contact-info dl { display:grid; gap:var(--sp-20); margin-bottom:var(--sp-32) }
.contact-info dt { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--clr-gold); margin-bottom:var(--sp-4) }
.contact-info dd { font-size:var(--fs-h4); color:var(--clr-ink); font-weight:var(--fw-medium) }
.contact-info .tel { font-size:clamp(24px,3vw,36px); font-weight:var(--fw-black); letter-spacing:-.02em }
@media(max-width:900px) { .contact { grid-template-columns:1fr; gap:var(--sp-32) } }

/* ══════════════════════════════════════════════════════════
   CHIPS / TAGS
   ══════════════════════════════════════════════════════════ */
.chips { display:flex; flex-wrap:wrap; gap:var(--sp-8) }
.chip  {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-8);
  padding:     var(--sp-8) var(--sp-16);
  border-radius:var(--r-sm);
  border:      1px solid var(--clr-line-2);
  font-size:   var(--fs-caption);
  color:       var(--clr-ink-3);
  transition:  border-color var(--dur-fast), color var(--dur-fast);
  background:  var(--clr-bg);
}
.chip:hover   { border-color:var(--clr-gold); color:var(--clr-gold-dark) }
.chip i       { width:5px; height:5px; border-radius:50%; background:var(--clr-gold); flex:none }

/* ══════════════════════════════════════════════════════════
   RELATED LINKS
   ══════════════════════════════════════════════════════════ */
.rel-links {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:var(--sp-12);
}
.rel-links a {
  display:     flex; align-items:center; justify-content:space-between;
  gap:         var(--sp-12);
  padding:     var(--sp-16) var(--sp-20);
  border:      1px solid var(--clr-line);
  border-radius:var(--r-md);
  transition:  border-color var(--dur-fast), transform var(--dur-fast);
  background:  var(--clr-bg);
}
.rel-links a:hover { border-color:var(--clr-gold); transform:translateY(-2px) }
.rel-links b { font-size:var(--fs-body); display:block; word-break:keep-all }
.rel-links small { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; text-transform:uppercase; color:var(--clr-ink-3); display:block; margin-top:var(--sp-4) }
.rel-links svg { flex:none; color:var(--clr-gold) }

/* ══════════════════════════════════════════════════════════
   SCOPE LIVE (현미경 쇼케이스)
   ══════════════════════════════════════════════════════════ */
.scopelive-grid {
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:var(--sp-64); align-items:center;
}
@media(max-width:900px) { .scopelive-grid { grid-template-columns:1fr; gap:var(--sp-40) } }

.eyepiece { position:relative; aspect-ratio:1; max-width:540px; width:100%; margin-inline:auto }
.eyepiece__ring {
  position:absolute; inset:-2%; border-radius:50%;
  background:conic-gradient(from 0deg,transparent,rgba(180,154,112,.42),transparent 30%,transparent 60%,rgba(180,154,112,.52),transparent 85%);
  animation:scopespin 16s linear infinite; filter:blur(.5px);
}
.eyepiece__disc {
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  box-shadow:0 28px 80px -36px rgba(23,23,23,.45),inset 0 0 0 1px rgba(255,255,255,.25);
  background:radial-gradient(circle at 48% 44%,#e8c8ab,#c99a78 60%,#a9765a);
}
.eyepiece__disc video,.eyepiece__disc img { width:100%; height:100%; object-fit:cover; transform:scale(1.04) }
.eyepiece__disc::after { content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; box-shadow:inset 0 0 80px 24px rgba(23,23,23,.48) }
.eyepiece .scan { position:absolute; left:0; right:0; height:20%; z-index:2; border-radius:50%; background:linear-gradient(rgba(255,255,255,.05),transparent); animation:scopescan 5.5s ease-in-out infinite }
.eyepiece .reticle { position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:50%; overflow:hidden }
.eyepiece .reticle::before,.eyepiece .reticle::after { content:""; position:absolute; background:rgba(255,255,255,.24) }
.eyepiece .reticle::before { left:50%;top:8%;bottom:8%;width:1px;transform:translateX(-.5px) }
.eyepiece .reticle::after  { top:50%;left:8%;right:8%;height:1px;transform:translateY(-.5px) }
.eyepiece .tk { position:absolute;width:12px;height:12px;border:1.5px solid rgba(255,255,255,.45) }
.eyepiece .tk.tl { top:15%;left:15%;border-right:0;border-bottom:0 }
.eyepiece .tk.tr { top:15%;right:15%;border-left:0;border-bottom:0 }
.eyepiece .tk.bl { bottom:15%;left:15%;border-right:0;border-top:0 }
.eyepiece .tk.br { bottom:15%;right:15%;border-left:0;border-top:0 }
.eyepiece .cbox { position:absolute;top:50%;left:50%;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid rgba(180,154,112,.45);border-radius:3px }
.eyepiece .hud  { position:absolute;z-index:4;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.1em;color:#fff }
.eyepiece .hud.rec    { top:10%;left:11%;display:flex;align-items:center;gap:6px;text-shadow:0 1px 3px rgba(0,0,0,.5) }
.eyepiece .hud.rec i  { width:8px;height:8px;border-radius:50%;background:var(--clr-vessel);animation:scopeblink 1.4s infinite }
.eyepiece .hud.zeiss  { bottom:11%;left:11%;color:rgba(255,255,255,.6);text-shadow:0 1px 3px rgba(0,0,0,.5) }
.eyepiece .hud.mag    { bottom:11%;right:11%;background:rgba(23,23,23,.52);backdrop-filter:blur(4px);padding:6px 12px;border-radius:var(--r-xs) }
@keyframes scopespin   { to { transform:rotate(360deg) } }
@keyframes scopeblink  { 50% { opacity:.3 } }
@keyframes scopescan   { 0%,100%{top:-20%} 50%{top:100%} }
@media(prefers-reduced-motion:reduce) { .eyepiece__ring,.eyepiece .scan,.eyepiece .hud.rec i { animation:none } }

.scopelive-txt h2 { margin-bottom:var(--sp-20); word-break:keep-all }
.scopelive-txt p  { font-size:var(--fs-body); line-height:var(--lh-loose); color:var(--clr-ink-3); margin-bottom:var(--sp-24); word-break:keep-all }
.scopeclips { display:flex; flex-wrap:wrap; gap:var(--sp-8); margin-bottom:var(--sp-24) }
.scopeclips button { font-family:inherit; font-size:var(--fs-caption); font-weight:var(--fw-medium); padding:9px 16px; border-radius:var(--r-sm); border:1px solid var(--clr-line); background:var(--clr-bg); color:var(--clr-ink-3); cursor:pointer; transition:.3s }
.scopeclips button:hover { border-color:var(--clr-gold-light) }
.scopeclips button.on { background:var(--clr-dark); border-color:var(--clr-dark); color:var(--clr-ink-inv) }

/* ══════════════════════════════════════════════════════════
   YOUTUBE VIDEO CARDS (3-col editorial)
   ══════════════════════════════════════════════════════════ */
.yt-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
@media(max-width:900px) { .yt-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .yt-grid { grid-template-columns:1fr } }

.yt-card {
  border:        1px solid var(--clr-line);
  border-radius: var(--r-lg);
  overflow:      hidden;
  background:    var(--clr-bg);
  transition:    border-color var(--dur), transform var(--dur);
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.yt-card:hover { border-color:var(--clr-gold); transform:translateY(-3px) }
.yt-card__thumb {
  position:relative; aspect-ratio:16/9;
  background:var(--clr-dark-2); overflow:hidden;
}
.yt-card__thumb img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--dur-slow) var(--ease-out);
}
.yt-card:hover .yt-card__thumb img { transform:scale(1.04) }
.yt-card__play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.yt-card__play span {
  width:48px; height:48px; border-radius:50%;
  background:rgba(247,245,240,.9);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast);
}
.yt-card:hover .yt-card__play span { transform:scale(1.12) }
.yt-card__play svg { width:16px; height:16px; color:var(--clr-dark); margin-left:3px }
.yt-card__body {
  padding:var(--sp-20) var(--sp-20) var(--sp-24);
  flex:1; display:flex; flex-direction:column; gap:var(--sp-8);
}
.yt-card__lab {
  font-family:var(--font-mono); font-size:var(--fs-label);
  letter-spacing:.1em; text-transform:uppercase; color:var(--clr-gold);
}
.yt-card h4 { font-size:var(--fs-body); line-height:var(--lh-snug); flex:1; word-break:keep-all }
.yt-card__meta { font-family:var(--font-mono); font-size:var(--fs-label); color:var(--clr-ink-3) }

/* YouTube Featured (TV 메인) */
.yt-featured {
  display:grid; grid-template-columns:1.4fr 1fr;
  border:1px solid var(--clr-line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--clr-bg);
  transition:border-color var(--dur), transform var(--dur);
  text-decoration:none; color:inherit;
}
.yt-featured:hover { border-color:var(--clr-gold); transform:translateY(-2px) }
@media(max-width:820px) { .yt-featured { grid-template-columns:1fr } }
.yt-featured__media {
  position:relative; aspect-ratio:16/9;
  background:var(--clr-dark); overflow:hidden;
}
.yt-featured__media img { width:100%; height:100%; object-fit:cover }
.yt-featured__body {
  padding:var(--sp-32) var(--sp-28);
  display:flex; flex-direction:column; justify-content:center;
}
.yt-featured__body h2 { font-size:var(--fs-h3); line-height:var(--lh-snug); margin-bottom:var(--sp-12); word-break:keep-all }
.yt-featured__body p  { font-size:var(--fs-caption); color:var(--clr-ink-3); margin-bottom:var(--sp-20); word-break:keep-all }

/* ══════════════════════════════════════════════════════════
   TECHNOLOGY — 장비 그리드
   ══════════════════════════════════════════════════════════ */
.dev-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
}
@media(max-width:900px) { .dev-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .dev-grid { grid-template-columns:1fr } }
.dev-card {
  border:        1px solid var(--clr-line);
  border-radius: var(--r-lg);
  padding:       var(--sp-24) var(--sp-20);
  background:    var(--clr-bg);
  transition:    border-color var(--dur), transform var(--dur);
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
}
.dev-card:hover { border-color:var(--clr-gold); transform:translateY(-3px) }
.dev-card[hidden]{ display:none }
.dev-card__cat {
  font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.12em;
  color:var(--clr-gold); border:1px solid var(--clr-gold); border-radius:var(--r-xs);
  padding:3px 9px; align-self:flex-start; margin-bottom:var(--sp-16);
}
.dev-card h3 { font-size:var(--fs-h3); margin-bottom:var(--sp-8) }
.dev-card p  { font-size:var(--fs-caption); color:var(--clr-ink-3); flex:1; line-height:var(--lh-normal) }
.dev-card__go { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em; color:var(--clr-ink); display:inline-flex; align-items:center; gap:6px; margin-top:var(--sp-16) }

/* Universe (다크 기술 섹션) */
.universe { background:var(--clr-dark); border-radius:var(--r-xl); overflow:hidden }
.universe__head { padding:clamp(40px,5vw,64px) clamp(28px,5vw,56px) 0 }
.universe__head h2 { color:var(--clr-ink-inv); max-width:22ch }
.universe__track { display:flex; gap:var(--sp-20); overflow-x:auto; scroll-snap-type:x mandatory; padding:var(--sp-32) clamp(28px,5vw,56px) var(--sp-48); scrollbar-width:none }
.universe__track::-webkit-scrollbar { display:none }
.univ-card {
  scroll-snap-align:center; flex:0 0 min(500px,80vw);
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(165deg,rgba(247,245,240,.05),rgba(247,245,240,.02));
  border:1px solid var(--clr-line-dark);
  display:flex; flex-direction:column;
  transition:border-color var(--dur), transform var(--dur);
  min-height:380px;
}
.univ-card:hover { transform:translateY(-5px); border-color:rgba(180,154,112,.35) }
.univ-card__media { aspect-ratio:16/9; background:radial-gradient(circle at 50% 40%,rgba(180,154,112,.1),transparent 70%); display:flex; align-items:center; justify-content:center; position:relative }
.univ-card__cat { position:absolute; top:14px; left:14px; font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.14em; text-transform:uppercase; color:var(--clr-gold-light); border:1px solid rgba(180,154,112,.35); padding:4px 10px; border-radius:var(--r-xs) }
.univ-card__body { padding:var(--sp-24) var(--sp-24) var(--sp-28); flex:1; display:flex; flex-direction:column }
.univ-card__body h3 { color:var(--clr-ink-inv); font-size:var(--fs-h3); margin-bottom:var(--sp-8) }
.univ-card__role { color:var(--clr-ink-inv-2); font-size:var(--fs-caption); line-height:var(--lh-normal); flex:1 }

/* ══════════════════════════════════════════════════════════
   MAGAZINE
   ══════════════════════════════════════════════════════════ */
.mag-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap) }
@media(max-width:900px) { .mag-grid { grid-template-columns:1fr 1fr } }
@media(max-width:540px) { .mag-grid { grid-template-columns:1fr } }
.mag-card { border:1px solid var(--clr-line); border-radius:var(--r-lg); overflow:hidden; background:var(--clr-bg); transition:border-color var(--dur),transform var(--dur); display:flex; flex-direction:column; text-decoration:none; color:inherit }
.mag-card:hover { border-color:var(--clr-gold); transform:translateY(-3px) }
.mag-card__media { aspect-ratio:16/10; overflow:hidden; background:var(--clr-bg-3) }
.mag-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease-out) }
.mag-card:hover .mag-card__media img { transform:scale(1.04) }
.mag-card__body { padding:var(--sp-20) var(--sp-20) var(--sp-24); display:flex; flex-direction:column; flex:1; gap:var(--sp-8) }
.mag-card__cat { font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.1em; color:var(--clr-gold) }
.mag-card h3   { font-size:var(--fs-h4); line-height:var(--lh-snug); word-break:keep-all }
.mag-card p    { font-size:var(--fs-caption); color:var(--clr-ink-3); flex:1; word-break:keep-all }

/* ══════════════════════════════════════════════════════════
   FIXED CTA (우측 고정)
   ══════════════════════════════════════════════════════════ */
.fixed-cta { position:fixed; right:20px; bottom:20px; z-index:90; display:flex; flex-direction:column; gap:10px }
.fixed-cta a { width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md); transition:transform var(--dur-fast) }
.fixed-cta a:hover { transform:scale(1.08) }
.fc-book { background:var(--clr-dark); color:var(--clr-ink-inv) }
.fc-kakao { background:#FEE500; color:#3B1E1E }
.fc-call { background:var(--clr-bg); color:var(--clr-ink); border:1.5px solid var(--clr-line-2) }

/* =====================================================================
   v4 추가 — 서브페이지 공통 레이아웃
   목적: (1) 좌우 정렬선 통일  (2) 반복되는 세로 나열 리듬 해소
   ===================================================================== */

/* ── 서브페이지 상단 헤더 ─────────────────────────────── */
.phead {
  padding-block: var(--sp-48) var(--sp-56);
  border-bottom: 1px solid var(--clr-line);
}
.phead .eyebrow { display:block; margin-bottom: var(--sp-12) }
.phead h1 {
  font-size: var(--fs-page-h1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  word-break: keep-all;
}
.phead .answer {
  max-width: 78ch;
  margin-top: var(--sp-20);
}
.phead .answer p {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--clr-ink-2);
  word-break: keep-all;
}
.phead__ctas { display:flex; gap:var(--sp-12); flex-wrap:wrap; margin-top: var(--sp-28) }

/* Hero형 헤더 — 좌 텍스트 / 우 미디어 */
.phead--hero { padding-block: var(--sp-48) var(--sp-64) }
.phead__grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.phead__grid .answer { max-width: 52ch }
.phead__media { border-radius: var(--r-md); overflow:hidden }
@media (max-width: 900px) {
  .phead__grid { grid-template-columns: 1fr; gap: var(--sp-32) }
}

/* ── 전/중/후 스텝 (세로 나열 → 가로 3분할) ──────────── */
.pts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: var(--sp-40);
}
.pt {
  display: flex;
  flex-direction: column;
  gap: var(--sp-14, 14px);
  padding: var(--sp-28) var(--sp-24) var(--sp-32);
  background: var(--clr-bg);
  border: 1px solid var(--clr-line);
  border-radius: var(--r-md);
}
.section--tint .pt { background: var(--clr-bg) }
.pt .no {
  width: 46px; height: 46px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--clr-dark); color: var(--clr-ink-inv);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  font-weight: var(--fw-bold); flex: 0 0 auto;
}
.pt h3 {
  font-size: var(--fs-h4);
  letter-spacing: var(--ls-tight);
  word-break: keep-all;
  margin-top: var(--sp-4);
}
.pt p {
  font-size: var(--fs-caption);
  line-height: var(--lh-loose);
  color: var(--clr-ink-3);
  word-break: keep-all;
}
@media (max-width: 860px) { .pts { grid-template-columns: 1fr } }

/* ── Sticky Story (좌 고정 비주얼 / 우 단계) ───────────── */
.story {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(36px, 4.5vw, 72px);
  align-items: start;
}
.story__vis { position: sticky; top: calc(var(--header-h) + 32px) }
.story__media { border-radius: var(--r-md); overflow:hidden }
.story__badge {
  display:inline-block; margin-top: var(--sp-12);
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase; color: var(--clr-gold);
}
.story__steps { display: flex; flex-direction: column }
.story__step {
  padding: var(--sp-28) 0;
  border-bottom: 1px solid var(--clr-line);
}
.story__step:first-child { padding-top: 0 }
.story__step:last-child  { border-bottom: none }
.story__no {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing:.16em; text-transform:uppercase;
  color: var(--clr-gold); display:block; margin-bottom: var(--sp-8);
}
.story__step h3 {
  font-size: var(--fs-h3); letter-spacing: var(--ls-tight);
  word-break: keep-all; margin-bottom: var(--sp-8);
}
.story__step p {
  font-size: var(--fs-body); line-height: var(--lh-loose);
  color: var(--clr-ink-2); word-break: keep-all;
}
@media (max-width: 900px) {
  .story { grid-template-columns: 1fr }
  .story__vis { position: static; max-width: 380px }
}

/* ── TV Strip (1 대형 + 나머지 리스트) ────────────────── */
.tvstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: var(--sp-40);
}
/* 첫 항목은 2칸 차지해 리듬을 만든다 */
.tvstrip__item:first-child { grid-column: span 2 }
.tvstrip__item {
  display: flex; flex-direction: column;
  border: 1px solid var(--clr-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.tvstrip__item:hover { border-color: var(--clr-gold); transform: translateY(-3px) }
.tvstrip__thumb {
  position: relative; aspect-ratio: 16/9;
  background: var(--clr-dark); overflow: hidden;
}
.tvstrip__thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform var(--dur-slow) var(--ease-out);
}
.tvstrip__item:hover .tvstrip__thumb img { transform: scale(1.04) }
.tvstrip__ph {
  width:100%; height:100%;
  background: var(--clr-dark-2);
  border: 1.5px dashed rgba(247,245,240,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-family: var(--font-mono); font-size:10px; letter-spacing:.14em;
  color: rgba(247,245,240,.34);
}
.tvstrip__play {
  position:absolute; inset:0; margin:auto;
  width:48px; height:48px; border-radius: var(--r-full);
  background: rgba(247,245,240,.9); color: var(--clr-ink);
  display:flex; align-items:center; justify-content:center;
  transition: transform var(--dur);
}
.tvstrip__item:hover .tvstrip__play { transform: scale(1.1) }
.tvstrip__body { padding: var(--sp-20) var(--sp-20) var(--sp-24); flex:1 }
.tvstrip__lab {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing:.14em; text-transform:uppercase; color: var(--clr-gold);
  display:block; margin-bottom: var(--sp-8);
}
.tvstrip__item h4 {
  font-size: var(--fs-h4); line-height: var(--lh-snug);
  word-break: keep-all; margin-bottom: var(--sp-8);
}
.tvstrip__item:first-child h4 { font-size: var(--fs-h3) }
.tvstrip__meta { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--clr-ink-3) }
@media (max-width: 900px) {
  .tvstrip { grid-template-columns: 1fr 1fr }
  .tvstrip__item:first-child { grid-column: span 2 }
}
@media (max-width: 560px) {
  .tvstrip { grid-template-columns: 1fr }
  .tvstrip__item:first-child { grid-column: auto }
}