/* ===========================================================================
   scalpkang.css — Academy page unique sections.
   Scoped under .sk-academy. All rules use longhand CSS properties (no
   shorthand with CSS vars per Cafe24 optimizer rules).
   Partials: section-academy-hero, section-academy-concerns,
             section-academy-different, section-academy-courses
   =========================================================================== */

/* ==========================================================================
   1. HERO — "LEARN. / APPLY. / PERFORM." with pink machine image
   ========================================================================== */

/* Full-screen hero. ScrollTrigger pins this section and creates the spacer. */
.sk-academy-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  text-align: center;
  background-color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.sk-academy-hero > .sk-wrap {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  padding-block: var(--hero-title-pad);
  transform: translate3d(0,0,0);
  will-change: transform;
}

/* Scroll-scrub prep. JS owns the frame-by-frame transform values. */
.sk-academy-hero__reveal-in { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .js-anim .sk-academy-hero__machine { transform: scale(1.5); }
  .js-anim .sk-academy-hero__body-line,
  .js-anim .sk-academy-hero__meta { overflow: hidden; }
  .js-anim .sk-academy-hero__reveal-in { transform: translateY(100%); }
}

.sk-academy-hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

/* Body + meta pinned to hero bottom via space-between on __inner */
.sk-academy-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: clamp(20px, 3.5vh, 44px);
}

/* Serif stacked headline — centered above the machine layer. */
.sk-academy-hero__headline {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--clay);
  font-size: clamp(48px, 7.5vw, 96px);
  line-height: 1.04;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Machine image — centered horizontally, overlapping the headline. In flow but
   height-capped so the body never gets pushed out of the viewport. On desktop
   JS scrubs translateY so it rises up over the title as you scroll (the PNG is
   transparent, so the title stays visible above it). */
.sk-academy-hero__machine {
  align-self: center;
  height: min(clamp(120px, 22vw, 280px), 34vh);
  width: auto;
  aspect-ratio: 505/463;
  margin-top: clamp(-260px, -18vh, -60px);
  z-index: 1;
  pointer-events: none;
  transform-origin: center center;
  will-change: transform;
}

.sk-academy-hero__machine-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Bold KO paragraph — clay, centered below the machine */
.sk-academy-hero__body {
  position: relative;
  z-index: 2;
}

.sk-academy-hero__body-line {
  font-size: clamp(16px, 2.1vw, 22px);
  font-weight: 700;
  color: var(--clay);
  line-height: 1.5;
  display: block;
}

/* Meta / caption line */
.sk-academy-hero__meta {
  margin-top: 8px;
  position: relative;
  z-index: 2;
  font-size: clamp(12px, 1.4vw, 14px);
  color: var(--gray);
  letter-spacing: .04em;
}

@media (max-width: 768px) {
  .sk-academy-hero {
    height: 100vh;
    height: 100svh;
    min-height: 0;
  }

  .sk-academy-hero > .sk-wrap {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* +62px clears the fixed mobile header so centered content isn't clipped at top */
    padding-top: var(--hero-title-pad-mobile);
    padding-bottom: clamp(56px, 12vw, 90px);
  }

  .sk-academy-hero__headline {
    text-align: center;
    padding-right: 0;
    max-width: none;
    font-size: clamp(40px, 13vw, 64px);
  }

  .sk-academy-hero__machine {
    height: auto;
    width: clamp(180px, 55vw, 260px);
    margin-top: clamp(-40px, -8vw, -20px);
  }

  .sk-academy-hero__text {
    padding-bottom: clamp(16px, 5vw, 28px);
  }


  .sk-academy-hero__body-line {
    font-size: clamp(15px, 4.5vw, 20px);
    padding-bottom: 3px;
  }
}

/* ==========================================================================
   2. CONCERNS — pain-point list with two-column layout
   ========================================================================== */

.sk-academy-concerns {
  padding-block: var(--section-y);
}

.sk-academy-concerns__head {
  text-align: center;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.sk-academy-concerns__title {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--clay);
  font-size: clamp(20px, 3vw, 32px);
  letter-spacing: .02em;
}

.sk-academy-concerns__sub {
  margin-top: 12px;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--gray);
  line-height: 1.8;
}

/* Two-column body */
.sk-academy-concerns__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 60px);
  align-items: center;
}

/* Left: woman photo */
.sk-academy-concerns__media {
  width: 100%;
  aspect-ratio: 4/3;
  background-color: var(--clay-tint);
  overflow: hidden;
  border-radius: 4px;
}

.sk-academy-concerns__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right: pain-point list */
/* Gap-separated badge rows, no dividers */
.sk-academy-concerns__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}

.sk-academy-concerns__item {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 1.4vw, 14px);
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--ink);
  line-height: 1.65;
}

/* Plus prefix badge */
.sk-academy-concerns__prefix {
  flex: 0 0 auto;
  width: clamp(20px, 2.4vw, 24px);
  height: clamp(20px, 2.4vw, 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F4F4F2;
  color: var(--clay);
  border-radius: 4px;
  font-size: clamp(11px, 1.4vw, 13px);
  font-weight: 700;
  line-height: 1;
}

/* Staggered fade-up reveal (.js-anim gate +
   .is-in toggled by IntersectionObserver in main.js; nth-child staggers the
   delay). No-JS users never get .js-anim, so the list shows immediately. */
.js-anim .sk-academy-concerns__item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(.2,.6,.2,1),
              transform 0.6s cubic-bezier(.2,.6,.2,1);
  will-change: transform, opacity;
}
.js-anim .sk-academy-concerns__list.is-in .sk-academy-concerns__item {
  opacity: 1;
  transform: translateY(0);
}
.js-anim .sk-academy-concerns__list.is-in .sk-academy-concerns__item:nth-child(2) { transition-delay: .08s; }
.js-anim .sk-academy-concerns__list.is-in .sk-academy-concerns__item:nth-child(3) { transition-delay: .16s; }
.js-anim .sk-academy-concerns__list.is-in .sk-academy-concerns__item:nth-child(4) { transition-delay: .24s; }
.js-anim .sk-academy-concerns__list.is-in .sk-academy-concerns__item:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .js-anim .sk-academy-concerns__item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 768px) {
  .sk-academy-concerns__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sk-academy-concerns__media {
    aspect-ratio: 4/3;
    max-width: 100%;
  }

  .sk-academy-concerns__title {
    font-size: clamp(18px, 5.5vw, 26px);
  }
}

/* ==========================================================================
   3. DIFFERENT — "WHAT MAKES US DIFFERENT" with decorative left photo rail
   ========================================================================== */

.sk-academy-different {
  padding-block: var(--section-y);
  position: relative;
}

/* Section heading (centered) */
.sk-academy-different__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.sk-academy-different__eyebrow {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--clay);
  font-size: clamp(32px, 5.5vw, 64px);
  line-height: 1.05;
}

.sk-academy-different__subtitle {
  margin-top: 14px;
  font-size: clamp(14px, 1.8vw, 17px);
  font-weight: 600;
  color: var(--ink);
}

/* Two-column body: left image + right list */
.sk-academy-different__cols {
  display: grid;
  grid-template-columns: minmax(300px, 472px) minmax(0, 590px);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
  justify-content: center;
}

/* Left: image + index counter stacked */
.sk-academy-different__media-col {
  display: flex;
  flex-direction: column;
}

/* Left image — stacked layers reveal as the active list item changes. */
.sk-academy-different__media {
  position: relative;
  width: 100%;
  max-width: 472px;
  aspect-ratio: 472/602;
  background-color: var(--clay-tint);
  overflow: hidden;
  border-radius: 4px;
}

.sk-academy-different__media-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

.sk-academy-different__media-layer.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.sk-academy-different__media-crop,
.sk-academy-different__media-zoom {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sk-academy-different__media-zoom {
  transform: scale(1.3);
  will-change: transform;
}

.sk-academy-different__media-layer.is-active .sk-academy-different__media-zoom {
  transform: scale(1);
}

.sk-academy-different__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  .sk-academy-different__media-zoom { transform: none; }
}

.sk-academy-different__list-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 590px);
}

.sk-academy-different__label-eyebrow {
  font-family: var(--serif);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  line-height: 1;
  color: var(--gray-light);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 40px;
  margin-bottom: 20px;
}

.sk-academy-different__items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sk-academy-different__item {
  appearance: none;
  border: 0;
  background: none;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 40px 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
}

.sk-academy-different__item::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #EDE9E4;
}

.sk-academy-different__item:last-child::after {
  display: none;
}

.sk-academy-different__item-title {
  display: block;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  color: var(--gray-light);
  line-height: 1.3;
  letter-spacing: -0.03em;
  transition: color .3s var(--ease-tu);
}

.sk-academy-different__item-body {
  display: block;
  font-size: clamp(15px, 1.45vw, 18px);
  font-weight: 400;
  color: var(--gray-light);
  line-height: 1.5;
  letter-spacing: -0.03em;
  transition: color .3s var(--ease-tu);
}

.sk-academy-different__item:hover .sk-academy-different__item-title,
.sk-academy-different__item:focus-visible .sk-academy-different__item-title,
.sk-academy-different__item.is-active .sk-academy-different__item-title,
.sk-academy-different__item:hover .sk-academy-different__item-body,
.sk-academy-different__item:focus-visible .sk-academy-different__item-body,
.sk-academy-different__item.is-active .sk-academy-different__item-body {
  color: var(--clay);
}

.sk-academy-different__item:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 6px;
}

/* "01 /04" index counter — sits below the image in the left column */
.sk-academy-different__index {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.sk-academy-different__index-num {
  font-family: var(--sans);
  font-size: clamp(40px, 4.4vw, 56px);
  font-weight: 400;
  color: var(--clay);
  letter-spacing: -0.06em;
  line-height: 1.35;
}

.sk-academy-different__index-total {
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--gray-light);
  letter-spacing: -0.03em;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .sk-academy-different__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sk-academy-different__media {
    aspect-ratio: 4/3;
    max-width: none;
  }

  .sk-academy-different__eyebrow {
    font-size: clamp(32px, 10vw, 52px);
  }

  .sk-academy-different__label-eyebrow {
    margin-top: 0;
  }

  .sk-academy-different__item {
    gap: 10px;
    padding: 24px 0;
  }

  .sk-academy-different__item-title {
    font-size: 22px;
  }

  .sk-academy-different__item-body {
    font-size: 14px;
  }
}

/* ==========================================================================
   4. COURSES — 2×2 bordered card grid
   ========================================================================== */

.sk-academy-courses {
  padding-block: var(--section-y);
}

.sk-academy-courses__head {
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.sk-academy-courses__title {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--clay);
  font-size: clamp(28px, 4.5vw, 52px);
  line-height: 1.1;
}

.sk-academy-courses__sub {
  margin-top: 12px;
  font-size: clamp(13px, 1.6vw, 15px);
  color: var(--gray);
}

/* 2×2 grid — each card is its own rounded box with a gap between */
.sk-academy-courses__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.sk-academy-courses__card {
  border: 1px solid #E5E0DA;
  border-radius: 8px;
  padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sk-academy-courses__card-name {
  font-size: clamp(15px, 1.9vw, 19px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 12px;
}

.sk-academy-courses__card-desc {
  font-size: clamp(12px, 1.3vw, 13px);
  color: var(--gray);
  line-height: 1.75;
}

.sk-academy-courses__card-desc span {
  display: block;
}

@media (hover: hover) {
  .sk-academy-courses__card {
    transition: background-color 200ms ease;
  }

  .sk-academy-courses__card:hover {
    background-color: var(--clay-tint);
  }
}

@media (max-width: 768px) {
  .sk-academy-courses__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===========================================================================
   SCALP KANG page (page-scalpkang.php) — scoped under .sk-scalpkang
   Sections: scalpkang-hero, scalpkang-intro, scalpkang-stats, scalpkang-awards
   =========================================================================== */

/* ---- Hero (homepage-style scrub: text rises to centre, image blurs, clay veil
        fades 0 -> 0.6; GSAP pins the section and supplies the 200vh runway) ---- */
.sk-scalpkang .sk-scalp-hero{position:relative;height:100vh;height:100svh;min-height:560px;
  overflow:hidden;background-color:#fff;isolation:isolate;}
.sk-scalpkang .sk-scalp-hero__media{position:relative;width:100%;height:100%;
  overflow:hidden;background-color:#fff;transform:translate3d(0,0,0);
  will-change:transform;backface-visibility:hidden;}
.sk-scalpkang .sk-scalp-hero__picture{display:block;width:100%;height:100%;
  transform:translate3d(0,0,0);will-change:transform;backface-visibility:hidden;}
.sk-scalpkang .sk-scalp-hero__img{width:100%;height:100%;object-fit:cover;object-position:center 20%;
  filter:blur(0);-webkit-filter:blur(0);transform:translate3d(0,0,0);
  will-change:transform,filter;backface-visibility:hidden;}
/* clay veil — GSAP scrubs opacity 0 -> 0.6 as the hero dissolves */
.sk-scalpkang .sk-scalp-hero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:var(--clay);opacity:0;transform:translate3d(0,0,0);will-change:opacity,transform;}
/* text block — final resting state is dead centre; GSAP adds extra Y below centre at scroll 0 */
.sk-scalpkang .sk-scalp-hero__text{position:absolute;left:0;right:0;top:50%;z-index:2;
  transform:translateY(calc(-50% + 36vh));text-align:center;padding-left:24px;padding-right:24px;
  pointer-events:none;will-change:transform,color;
  color:var(--clay);}
.sk-scalpkang .sk-scalp-hero__word{font-size:clamp(34px,6.2vw,78px);line-height:.95;color:inherit;letter-spacing:.05em;}
.sk-scalpkang .sk-scalp-hero__body{margin-top:22px;font-family:var(--sans);font-weight:500;
  font-size:16px;line-height:2;letter-spacing:.02em;color:inherit;}
@media (max-width:768px){
  .sk-scalpkang .sk-scalp-hero{height:100vh;height:100svh;min-height:0;}
  .sk-scalpkang .sk-scalp-hero__word{font-size:40px;}
  .sk-scalpkang .sk-scalp-hero__body{font-size:14px;margin-top:16px;}
}
/* reduced-motion / no-scrub fallback: static legibility scrim + white text on mobile */
@media (max-width:768px) and (prefers-reduced-motion: reduce){
  .sk-scalpkang .sk-scalp-hero__veil{opacity:.45;}
  .sk-scalpkang .sk-scalp-hero__text{color:var(--white);}
}


/* ===================================================================
   SMP 이론교육 — pinned step-transition (section-academy-theory.php)
   Default (below) = static stacked bands: mobile / reduced-motion / no-JS.
   shared-sections.js adds `.sk-theory--scrub` on desktop+motion. Step changes
   toggle `.is-active`: CSS transitions run the clip-path wipe + text rise,
   GSAP owns image opacity (TU Dental zeronate pattern — see
   docs/specs/scalpkang-different.md extraction notes).
   =================================================================== */
.sk-theory{background-color:transparent;}
.sk-theory__panel{position:relative;width:100%;aspect-ratio:16/6;overflow:hidden;}
.sk-theory__panel::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0) 55%);pointer-events:none;}
.sk-theory__media{position:absolute;inset:0;}
.sk-theory__img{width:100%;height:100%;object-fit:cover;display:block;}
.sk-theory__text{position:absolute;left:0;right:0;bottom:9%;z-index:2;
  padding:0 24px;color:var(--white);text-align:center;}
.sk-theory__count{font-size:13px;letter-spacing:.14em;opacity:.8;margin-bottom:10px;}
.sk-theory__count-sep{opacity:.5;}
.sk-theory__title{font-weight:600;font-size:clamp(20px,3vw,34px);line-height:1.2;}
.sk-theory__body{margin-top:12px;font-size:clamp(13px,1.4vw,16px);line-height:1.7;opacity:.92;}

/* --- Scrub mode: full-bleed band (original 16/6 height) pins & swaps in place.
       The PIN element is the short band — JS sets its `top` (centred in viewport)
       and the section's total `height` (the scroll runway). Step change toggles
       `.is-active`: CSS transitions below run the clip-path wipe, text rise and
       gradient fade; GSAP owns img opacity (in .35s +.12s delay / out .2s) and
       the 0.68→1 entry scale on the pin. White pin bg shows during the wipe gap. */
.sk-theory--scrub{position:relative;}                 /* height set inline by JS */
.sk-theory--scrub .sk-theory__pin{position:sticky;height:37.5vw;overflow:hidden;background:#fff;} /* 16:6; top set inline by JS */
.sk-theory--scrub .sk-theory__panel{position:absolute;inset:0;aspect-ratio:auto;z-index:1;}
.sk-theory--scrub .sk-theory__panel.is-active{z-index:10;}
.sk-theory--scrub .sk-theory__panel::after{opacity:0;transition:opacity .2s cubic-bezier(.45,0,.55,1);}
.sk-theory--scrub .sk-theory__panel.is-active::after{opacity:1;transition:opacity .35s cubic-bezier(.45,0,.55,1) .12s;}
.sk-theory--scrub .sk-theory__media{clip-path:inset(100% 0 0);
  transition:clip-path .6s cubic-bezier(.33,1,.68,1);}
.sk-theory--scrub .is-active .sk-theory__media{clip-path:inset(0 0 0 0);}
.sk-theory--scrub .sk-theory__img{opacity:0;} /* GSAP-owned crossfade */
.sk-theory--scrub .sk-theory__count,
.sk-theory--scrub .sk-theory__title,
.sk-theory--scrub .sk-theory__body{opacity:0;transform:translateY(36px);
  transition:opacity .35s cubic-bezier(.45,0,.55,1),transform .6s cubic-bezier(.33,1,.68,1);}
.sk-theory--scrub .is-active .sk-theory__count{opacity:.8;transform:translateY(0);transition-delay:.12s;}
.sk-theory--scrub .is-active .sk-theory__title{opacity:1;transform:translateY(0);transition-delay:.22s;}
.sk-theory--scrub .is-active .sk-theory__body{opacity:.92;transform:translateY(0);transition-delay:.32s;}

@media (max-width:768px){
  /* Horizontal swipe carousel — the 3 panels scroll sideways (matches the
     smp-diff / smp-reviews mobile carousels). JS scrub is desktop-only
     (theoryTick bails on !isDesktop and clears inline styles), so here the
     panels are plain flex items the browser owns. */
  .sk-theory__pin{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-inline:24px;
  }
  .sk-theory__pin::-webkit-scrollbar{display:none;}
  .sk-theory__panel{
    flex:0 0 84%;
    aspect-ratio:4/3;
    scroll-snap-align:center;
  }
  .sk-theory__text{bottom:7%;}
}