/* ============================================================
   제품 페이지 (product.html / product.php) 전용 스타일
   01 Hero → 02 Origin(물고기 도약) → 03 Salt → 04 Standard →
   05 Lineup → 06 Cooking → 07 Table → 08 Voice → Promise

   모든 규칙은 .product-page 아래로 스코프된다 (샌드박스).
   ============================================================ */

.product-page {
  /* 바다 팔레트 토큰 — 이 페이지 전용 */
  --sea-950: #03151f;
  --sea-800: #062837;
  --sea-650: #0a4b63;
  --sea-400: #45c7e8;
  --foam-50: #eef6fa;
  --salt-100: #e3eceb;

  background: var(--foam-50);

  /* GSAP 물고기 연출의 좌표 기준이 되는 본문 컨테이너 */
  .page-main {
    position: relative;
  }

  /* ── 01. Hero ── */

  #productHero {
    position: relative;
    min-height: 100svh;
    padding-bottom: 8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--sea-950) 0%, var(--sea-800) 55%, #0a3a52 100%);
  }

  #productHero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 70% 50% at 50% 0%, rgba(69, 199, 232, .14) 0%, transparent 65%),
      radial-gradient(ellipse 45% 60% at 15% 75%, rgba(21, 101, 192, .2) 0%, transparent 60%),
      radial-gradient(ellipse 40% 45% at 85% 60%, rgba(69, 199, 232, .08) 0%, transparent 55%);
    pointer-events: none;
  }

  .hero-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 1.5rem;
  }

  .hero-eyebrow {
    margin: 0 0 2rem;
    color: rgba(69, 199, 232, .8);
    font-size: .8125rem;
    letter-spacing: .35em;
    text-transform: uppercase;
    animation: mj-hero-up .9s ease .4s both;
  }

  .hero-title {
    margin: 0;
    color: #eef7fb;
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 6.5vw, 5.25rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.01em;
    text-wrap: balance;
    animation: mj-hero-up .9s ease .65s both;
  }

  .hero-title .accent {
    color: var(--sea-400);
  }

  .hero-sub {
    max-width: 34rem;
    margin: 2rem auto 0;
    color: rgba(238, 247, 251, .7);
    font-size: clamp(.875rem, 1.6vw, 1.0625rem);
    line-height: 1.8;
    animation: mj-hero-up .9s ease .9s both;
  }

  .hero-cue {
    position: absolute;
    bottom: 9.5rem;
    left: 50%;
    translate: -50% 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    animation: mj-hero-up .9s ease 1.3s both;
  }

  .hero-cue small {
    color: rgba(238, 247, 251, .35);
    font-size: .625rem;
    letter-spacing: .3em;
    text-transform: uppercase;
  }

  .hero-cue-dot {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: rgba(69, 199, 232, .85);
    animation: mj-cue-bounce 1.8s ease-in-out infinite;
  }

  /* 히어로 하단의 3겹 파도 */
  .waves {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 9rem;
    z-index: 6;
    pointer-events: none;
  }

  .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
  }

  .wave svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .wave.w1 {
    animation: mj-wave-slide 19s linear infinite;
    opacity: .35;
  }

  .wave.w2 {
    animation: mj-wave-slide 13s linear infinite reverse;
    opacity: .5;
  }

  .wave.w3 {
    animation: mj-wave-slide 9s linear infinite;
  }

  .ocean-title {
    color: var(--sea-950);
  }

  /* ── 02. Origin (물고기 도착 지점) ── */

  .origin-section {
    z-index: 1;
    position: relative;
    min-height: 100svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #fff;
  }

  .ocean-orbit {
    position: absolute;
    width: 40rem;
    height: 40rem;
    border: 1px solid rgba(10, 75, 99, .12);
    border-radius: 50%;
    pointer-events: none;
  }

  .orbit-one {
    right: -20rem;
    top: -12rem;
    box-shadow: 0 0 0 6rem rgba(69, 199, 232, .025), 0 0 0 12rem rgba(69, 199, 232, .018);
  }

  .origin-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr .8fr;
    gap: clamp(3rem, 8vw, 8rem);
  }

  .origin-copy {
    position: relative;
    padding-top: 7rem;
    color: var(--color-text-soft);
    line-height: var(--leading-body);

    >img {
      z-index: 0;
    }
  }

  .origin-copy .lead {
    margin-bottom: var(--space-6);
    color: var(--sea-950);
  }

  .route-visual {
    grid-column: 1 / 3;
    margin-top: var(--space-20);
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
    gap: var(--space-6);
  }

  .route-point {
    min-width: 7rem;
    display: grid;
    gap: var(--space-1);
  }

  .route-point>small {
    color: var(--sea-400);
    font-size: .7rem;
    font-weight: 700;
  }

  .route-point strong {
    color: var(--sea-950);
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 400;
  }

  .route-point p {
    color: var(--color-text-soft);
    font-size: .75rem;
  }

  .route-line {
    position: relative;
    height: 1px;
    overflow: hidden;
    background: var(--salt-100);
  }

  .route-line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sea-400);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.4s var(--ease-out);
  }

  .route-visual.is-visible .route-line::after {
    transform: scaleX(1);
  }

  /* ── 03. Salt ── */

  .salt-scene {
    position: relative;
    min-height: 115svh;
    padding-block: clamp(7rem, 14vw, 12rem);
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 70% 20%, rgba(69, 199, 232, .18), transparent 35%), linear-gradient(145deg, var(--sea-950), #020d13 70%);
  }

  .salt-word {
    position: absolute;
    left: -4vw;
    top: 10%;
    color: rgba(255, 255, 255, .035);
    font-size: clamp(12rem, 35vw, 34rem);
    font-weight: 800;
    line-height: .7;
    letter-spacing: -.1em;
  }

  .salt-inner {
    position: relative;
    z-index: 1;
  }

  .salt-inner>h2 {
    max-width: 70rem;
    font-family: var(--font-serif);
    font-size: var(--type-scene-title);
    font-weight: 400;
    line-height: var(--leading-title);
  }

  .salt-inner>h2 span {
    color: var(--sea-400);
  }

  .salt-inner>p:not(.section-index) {
    max-width: 36rem;
    margin: var(--space-8) 0 var(--space-16) auto;
    color: rgba(255, 255, 255, .58);
    font-size: var(--type-lead);
    line-height: var(--leading-body);
  }

  /* 소금 사진: 좁은 화면에서 원본 폭 그대로 잘리지 않도록 제한 */
  .salt-inner>img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* ── 제품 사진 프레임 (임시 이미지 — 실제 촬영 컷 수령 후 교체) ── */

  .product-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--salt-100);
  }

  .product-figure img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-figure--illustration {
    display: grid;
    place-items: center;
  }

  .product-figure--illustration img {
    position: static;
    width: 100%;
    height: auto;
  }

  .product-figure--hero {
    min-height: 48rem;
  }

  .product-figure--small {
    min-height: 20rem;
  }

  .product-figure--table {
    min-height: clamp(30rem, 55vw, 46rem);
  }

  /* ── 04. Standard ── */

  .product-standard {
    background: var(--foam-50);
  }

  .ocean-heading {
    max-width: 62rem;
    margin-bottom: var(--space-20);
  }

  .standard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .standard-card {
    position: relative;
    min-height: 25rem;
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    color: #eefbff;
    background: linear-gradient(160deg, var(--sea-650), var(--sea-950));
    transition: transform 300ms var(--ease-out), filter 300ms ease;
  }

  .standard-card:nth-child(even) {
    transform: translateY(var(--space-12));
    background: linear-gradient(160deg, #0b6178, var(--sea-800));
  }

  .standard-card::before {
    content: '';
    position: absolute;
    width: 14rem;
    height: 14rem;
    right: -7rem;
    top: -7rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 3rem rgba(255, 255, 255, .025), 0 0 0 6rem rgba(255, 255, 255, .018);
  }

  .standard-card:hover {
    transform: translateY(-.5rem);
    filter: brightness(1.08);
  }

  .standard-card:nth-child(even):hover {
    transform: translateY(calc(var(--space-12) - .5rem));
  }

  .standard-icon {
    position: absolute;
    left: var(--space-8);
    top: var(--space-8);
    color: var(--sea-400);
    font-size: .75rem;
    font-weight: 700;
  }

  .standard-card h3 {
    position: relative;
    font-family: var(--font-serif);
    font-size: var(--type-card-title);
    font-weight: 400;
  }

  .standard-card p {
    position: relative;
    margin-top: var(--space-4);
    color: rgba(238, 251, 255, .6);
    line-height: var(--leading-body);
  }

  /* ── 05. Lineup ── */

  .lineup-section {
    background: #fff;
  }

  .lineup-heading {
    margin-bottom: var(--space-20);
    display: grid;
    grid-template-columns: 1fr .5fr;
    gap: var(--space-12);
    align-items: end;
  }

  .lineup-heading>p {
    color: var(--color-text-soft);
    line-height: var(--leading-body);
  }

  .product-showcase {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: var(--space-6);
  }

  .product-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--foam-50);
  }

  .product-panel--hero {
    grid-row: span 2;
  }

  .product-panel-copy {
    padding: var(--space-8);
  }

  .product-panel-copy>small {
    color: var(--sea-650);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
  }

  .product-panel-copy h3 {
    margin-top: var(--space-3);
    color: var(--sea-950);
    font-family: var(--font-serif);
    font-size: var(--type-card-title);
    font-weight: 400;
  }

  .product-panel-copy p {
    margin-top: var(--space-4);
    color: var(--color-text-soft);
    line-height: var(--leading-body);
  }

  /* ── 06. Cooking ── */

  .cook-section {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: var(--sea-800);
  }

  .cook-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 15% 85%, rgba(69, 199, 232, .16), transparent 35%);
    pointer-events: none;
  }

  .cook-layout {
    position: relative;
    display: grid;
    grid-template-columns: .75fr 1.1fr;
    gap: clamp(3rem, 9vw, 9rem);
    align-items: center;
  }

  .cook-intro h2 {
    font-family: var(--font-serif);
    font-size: var(--type-scene-title);
    font-weight: 400;
    line-height: var(--leading-title);
  }

  .cook-intro>p:last-child {
    max-width: 28rem;
    margin-top: var(--space-8);
    color: rgba(255, 255, 255, .55);
    font-size: var(--type-lead);
    line-height: var(--leading-body);
  }

  .cook-guide {
    padding: var(--space-8);
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(1rem) saturate(1.2);
  }

  .cook-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    padding-bottom: var(--space-8);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
  }

  .cook-tab {
    min-height: 3rem;
    padding: var(--space-3);
    color: rgba(255, 255, 255, .5);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .15);
    cursor: pointer;
    transition: color 200ms ease, background 200ms ease, transform 140ms ease;
  }

  .cook-tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
  }

  .cook-tab:active {
    transform: scale(.98);
  }

  .cook-tab[aria-selected='true'] {
    color: var(--sea-950);
    background: var(--sea-400);
    border-color: var(--sea-400);
  }

  .cook-panel {
    padding-top: var(--space-10);
  }

  /* 조리법 패널 상단의 16:9 사진 */
  .cook-media {
    display: flex;
    aspect-ratio: 16 / 9;
  }

  .cook-media img {
    width: 100%;
    object-fit: cover;
  }

  .cook-time {
    display: inline-block;
    margin-bottom: var(--space-8);
    color: var(--sea-400);
    font-family: var(--font-serif);
    font-size: 1.5rem;
  }

  .cook-panel ol {
    list-style: none;
    counter-reset: cook;
    display: grid;
    gap: var(--space-4);
  }

  .cook-panel li {
    counter-increment: cook;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap: var(--space-3);
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
  }

  .cook-panel li::before {
    content: counter(cook, decimal-leading-zero);
    color: var(--sea-400);
    font-size: .75rem;
    font-weight: 700;
  }

  .cook-panel>p {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    color: rgba(255, 255, 255, .55);
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: .875rem;
  }

  .cook-panel>p strong {
    margin-right: var(--space-3);
    color: var(--sea-400);
  }

  /* ── 07. Table ── */

  .table-section {
    background: var(--foam-50);
  }

  .table-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: clamp(3rem, 8vw, 8rem);
    align-items: center;
  }

  .table-copy .ocean-title {
    margin-bottom: var(--space-12);
  }

  .pairing-list {
    display: grid;
    grid-template-columns: 3rem 1fr;
    border-top: 1px solid rgba(3, 21, 31, .18);
  }

  .pairing-list>* {
    padding-block: var(--space-5);
    border-bottom: 1px solid rgba(3, 21, 31, .18);
  }

  .pairing-list>small {
    color: var(--sea-650);
    font-size: .7rem;
    font-weight: 700;
  }

  .pairing-list p {
    color: var(--color-text-soft);
  }

  .pairing-list strong {
    margin-right: var(--space-4);
    color: var(--sea-950);
  }

  /* ── Promise ── */

  .product-promise {
    position: relative;
    min-height: 90svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 50% 50%, #0a536c, var(--sea-950) 65%);
  }

  .promise-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60vw;
    aspect-ratio: 1;
    translate: -50% -50%;
  }

  .promise-rings i {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(69, 199, 232, .18);
    border-radius: 50%;
    animation: mj-ring-pulse 5s ease-in-out infinite;
  }

  .promise-rings i:nth-child(2) {
    inset: 12%;
    animation-delay: -1.5s;
  }

  .promise-rings i:nth-child(3) {
    inset: 24%;
    animation-delay: -3s;
  }

  .promise-inner {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .promise-inner>p {
    margin-bottom: var(--space-8);
    color: var(--sea-400);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  .promise-inner h2 {
    font-family: var(--font-serif);
    font-size: clamp(3rem, 8vw, 8rem);
    font-weight: 400;
    line-height: 1.05;
  }

  .promise-chips {
    margin: var(--space-10) 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    list-style: none;
  }

  .promise-chips li {
    padding: var(--space-3) var(--space-6);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: rgba(255, 255, 255, .72);
    font-size: .8rem;
  }

  /* ── GSAP 연출: 고등어 도약 + 물감 번짐 + Voice 씬 ── */

  /* 도약하는 고등어 — product-motion.js가 transform으로 위치를 제어한다 */
  .leap-fish {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: clamp(6.5rem, 11vw, 10rem);
    opacity: 0;
    pointer-events: none;
  }

  
  .leap-fish,
  .origin-bleed,
  .breach-burst i {
    will-change: transform, opacity;
  }

  .leap-fish img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 .5rem 1.25rem rgba(3, 21, 31, .28));
  }

  /* 수면 돌파 물방울 버스트 (JS가 동적으로 생성) */
  .breach-burst {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 7;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .breach-burst i {
    position: absolute;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, rgba(69, 199, 232, .85) 55%, rgba(21, 101, 192, .55));
    opacity: 0;
  }

  .breach-burst i:nth-child(even) {
    width: .3rem;
    height: .3rem;
  }

  /* 퐁당 지점 — 제목 블록 기준 중앙. left/top으로 위치 조정 */
  .origin-splash-container {
    width: fit-content;
    position: relative;

    >* {
      position: relative;
      z-index: 1;
    }

    >img {
      z-index: 0;
    }
  }

  .origin-splash {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 13rem;
    height: 6.5rem;
    translate: -50% -50%;
    pointer-events: none;
  }

  .origin-ripples {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .origin-ripples ellipse {
    fill: none;
    stroke: rgba(10, 75, 99, .5);
    stroke-width: 1.5;
    opacity: 0;
  }

  /* 물감 번짐 레이어 — 프레임 시퀀스도 이 프레임에 뜬다 */
  .origin-bleed {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto;
    translate: -50% -50%;
    opacity: 0;
    scale: 1.14;
    pointer-events: none;
    --bleed: 0;
    -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 calc(var(--bleed) * 1%), transparent calc(var(--bleed) * 1% + 28%));
    mask-image: radial-gradient(circle at 50% 42%, #000 calc(var(--bleed) * 1%), transparent calc(var(--bleed) * 1% + 28%));
  }

  /* ── 08. Voice (sticky 고정 + 단어 채움) ── */

  /*
   * JS(product-motion.js)가 .voice-scene을 이 래퍼로 감싼다.
   * 래퍼 높이 = 씬(100svh) + 스크럽 스크롤 길이(120svh).
   * 채움 속도를 조절하려면 이 height만 바꾸면 된다.
   */
  .voice-scene-wrap {
    height: 220svh;
    will-change: transform opacity;  /* sticky 씬 자체를 레이어로 분리 */
    transform: translateZ(0);   /* 승격 보험 */
  }

  .voice-scene {
    position: sticky;
    position: --webkit-sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-items: center;
    color: #fff;
    will-change: transform opacity;  /* sticky 씬 자체를 레이어로 분리 */
    transform: translateZ(0);   /* 승격 보험 */
    background:
      radial-gradient(ellipse 60% 50% at 80% 15%, rgba(69, 199, 232, .1), transparent 60%),
      linear-gradient(170deg, #041720, var(--sea-950) 55%, #02141d);
  }

  .voice-inner {
    position: relative;
    z-index: 1;
  }

  .voice-copy {
    max-width: 58rem;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.4vw, 3.25rem);
    line-height: 1.7;
    color: #eef7fb;
  }

  .voice-copy em {
    font-style: normal;
    color: var(--sea-400);
  }

  .voice-copy .w {
    display: inline-block;
    will-change: opacity;
  }
}

/* ── 반응형 ── */

@media (max-width: 1024px) {

  .product-page {

    .origin-grid,
    .cook-layout,
    .table-grid {
      grid-template-columns: 1fr;
    }

    .origin-copy {
      padding-top: 0;
    }

    .route-visual {
      grid-column: 1;
    }

    .standard-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .product-showcase {
      grid-template-columns: 1fr 1fr;
    }

    .product-panel--hero {
      grid-column: 1 / 3;
      grid-row: auto;
    }

    .product-figure--hero {
      min-height: 38rem;
    }

    .lineup-heading {
      grid-template-columns: 1fr;
    }
  }
}

@media (max-width: 720px) {

  .product-page {

    #productHero {
      padding-bottom: 6rem;
    }

    .origin-grid {
      gap: var(--space-10);
    }

    .route-visual {
      grid-template-columns: 1fr;
    }

    .route-line {
      width: 1px;
      height: 4rem;
      margin-left: 1rem;
    }

    .route-line::after {
      transform: scaleY(0);
      transform-origin: top;
    }

    .route-visual.is-visible .route-line::after {
      transform: scaleY(1);
    }

    .salt-inner>p:not(.section-index) {
      margin-left: 0;
    }

    .standard-grid {
      grid-template-columns: 1fr;
    }

    .standard-card,
    .standard-card:nth-child(even) {
      min-height: 20rem;
      transform: none;
    }

    .standard-card:nth-child(even):hover {
      transform: translateY(-.5rem);
    }

    .product-showcase {
      grid-template-columns: 1fr;
    }

    .product-panel--hero {
      grid-column: auto;
    }

    .product-figure--hero {
      min-height: 30rem;
    }

    .cook-guide {
      padding: var(--space-4);
    }

    .cook-tabs {
      grid-template-columns: 1fr;
    }

    .promise-rings {
      width: 130vw;
    }
  }
}

/* ── 키프레임 (이름 충돌 방지를 위해 mj- 접두사) ── */

@keyframes mj-hero-up {
  from {
    opacity: 0;
    transform: translateY(1.75rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mj-cue-bounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: .4;
  }

  50% {
    transform: translateY(.625rem);
    opacity: 1;
  }
}

@keyframes mj-wave-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes mj-ring-pulse {

  0%,
  100% {
    transform: scale(.94);
    opacity: .35;
  }

  50% {
    transform: scale(1.04);
    opacity: .8;
  }
}