/* ============================================================
   제품 페이지 (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;
    /* PC는 하단 물결 공간을 고려해 헤더 포함 85svh를 확보한다. */
    min-height: calc(85svh - var(--header-h));
    padding-bottom: 6rem;
    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: .875rem;
    font-weight: 400;
    letter-spacing: .25em;
    white-space: nowrap;
    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: var(--type-body);
    line-height: 1.8;
    animation: mj-hero-up .9s ease .9s both;
  }

  .hero-sub-break {
    display: none;
  }

  .hero-cue {
    /* 본문 높이에 따라 내려가도록 배치해 짧은 화면에서도 겹치지 않는다. */
    position: relative;
    flex-shrink: 0;
    margin-top: 2rem;
    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로 겹침을 노렸지만 #productHero에 overflow:hidden이 걸려 있어
     * 그 1px은 잘려나갔다(= 방어가 동작한 적이 없다). 겹침은 .origin-section의
     * margin-top으로 옮겼고, 여기서는 남은 한 가지 원인만 막는다.
     *
     * .wave는 transform 애니메이션으로 각각 합성 레이어가 되는데,
     * preserveAspectRatio="none"으로 늘어난 SVG의 아래 모서리가 소수점 픽셀에 걸리면
     * 반투명하게 앤티에일리어싱된다. 그 뒤로 히어로의 어두운 그라데이션이 비쳐
     * 얇은 선처럼 보인다. 바닥에 흰 면을 깔아 그 위에서 합성되게 한다.
     *
     * 88% 아래는 w3(불투명 흰색)가 항상 덮는 영역이라 보이는 결과는 달라지지 않는다.
     */
    bottom: 0;
    height: 9rem;
    z-index: 6;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 0 88%, #fff 88%);
  }

  .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;
    /*
     * 히어로 높이가 calc(75svh - 4.5rem)이라 거의 항상 소수점 픽셀이다.
     * 두 섹션의 경계가 각자 반올림되면서 특정 높이에서만 서브픽셀 틈이 생기므로,
     * 1px 끌어올려 겹쳐 둔다. 물결(z-index:6)이 이 섹션 위에 그려지므로 모양은 그대로다.
     */
    margin-top: -1px;
    min-height: 100svh;
    display: grid;
    align-items: center;
    overflow: hidden;
    background: #fff;
  }

  .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: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(.375rem, .8vw, .75rem);
  }

  .route-point {
    position: relative;
    min-width: 0;
    display: block;
    height: clamp(18rem, 38vw, 33rem);
    /* 이미지 축소와 무관하게 프레임 크기로 포인터 감지 영역을 고정한다. */
    pointer-events: none;
  }

  .route-point::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    clip-path: var(--route-fold);
  }

  .route-surface {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #d6c39b;
    border-radius: .1875rem;
    clip-path: var(--route-fold);
  }

  .route-point:nth-child(odd) {
    --route-fold: polygon(0 0, 100% 14px, 100% calc(100% - 24px), 0 100%);
  }

  .route-point:nth-child(even) {
    --route-fold: polygon(0 14px, 100% 0, 100% 100%, 0 calc(100% - 24px));
  }

  /* 여백과 간결한 먹선으로 표현한 네 장의 풍속화 */
  .route-figure {
    position: absolute;
    inset: 0;
    margin: 0;
    height: 100%;
    transform: scale(1.18);
    transition: transform 1400ms cubic-bezier(.22, .61, .36, 1);
    overflow: hidden;
    background: #d6c39b;
    border-radius: 0;
  }

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


  .route-image--base {
    opacity: 1;
    transition: opacity 1400ms ease;
  }

  .route-point:focus-visible {
    outline: 2px solid var(--sea-950);
    outline-offset: 5px;
  }

  .route-point.is-active .route-figure {
    transform: scale(1);
  }

  .route-point.is-active .route-image--base {
    opacity: 0;
  }


  .route-note {
    grid-column: 1 / 3;
    margin-top: var(--space-6);
    color: var(--color-text-mute);
    font-size: var(--type-meta);
    line-height: var(--leading-body);
  }

  .route-caption {
    position: absolute;
    z-index: 1;
    inset: 0;
  }

  .route-point strong {
    position: absolute;
    top: 1.5rem;
    left: 1.375rem;
    color: var(--sea-950);
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 2.8vw, 2.5rem);
    font-weight: 400;
    line-height: 1.25;
  }

  .route-point p {
    position: absolute;
    bottom: 1.5rem;
    left: 1.125rem;
    right: 1.125rem;
    margin: 0;
    text-align: center;
    color: var(--sea-950);
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.65;
  }

  /* ── 03. Salt ── */

  .salt-scene {
    padding-block: clamp(5rem, 9vw, 9rem);
    color: var(--foam-50);
    background: var(--sea-950);
  }

  .salt-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }

  .salt-text h2 {
    display: grid;
    gap: .28em;
    font-family: var(--font-serif);
    font-size: var(--type-title);
    font-weight: 400;
    line-height: var(--leading-title);
    letter-spacing: -.035em;
    word-break: keep-all;
  }

  .salt-line {
    display: block;
  }

  .salt-intro {
    display: block;
    color: #b4c1c7;
  }

  .salt-mackerel {
    color: #83bdd2;
  }

  .salt-salt,
  .salt-aging {
    color: #fff;
  }

  .salt-visual {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 0;
  }

  .salt-visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% center;
  }

  .salt-body {
    margin-top: clamp(1.75rem, 3vw, 3rem);
    max-width: 33rem;
  }

  .salt-copy {
    color: #a9bac2;
    font-size: 1rem;
    line-height: 1.95;
    word-break: keep-all;
  }

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

  .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: 30rem;
  }

  .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(--gap-heading);
  }

  .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-start;
    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-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .standard-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(3, 21, 31, .85) 0%, rgba(3, 21, 31, .35) 42%, rgba(3, 21, 31, .05) 68%, transparent 100%);
  }

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

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

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

  .standard-card p {
    position: relative;
    z-index: 2;
    margin-top: var(--space-3);
    color: rgba(238, 251, 255, .82);
    line-height: var(--leading-body);
  }

  /* ── 05. Lineup ── */

  .lineup-section {
    background: #fff;
  }

  .lineup-heading {
    margin-bottom: var(--gap-heading);
  }

  .lineup-controls {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
  }

  .lineup-controls[hidden] {
    display: none;
  }

  .lineup-controls button {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--sea-650);
    border-radius: 50%;
    background: transparent;
    color: var(--sea-650);
    cursor: pointer;
  }

  .lineup-controls button:disabled {
    opacity: .3;
    cursor: default;
  }

  .lineup-controls button:focus-visible {
    outline: 2px solid var(--sea-650);
    outline-offset: 4px;
  }

  .lineup-controls svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .product-showcase {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(20rem, 38vw, 32rem);
    gap: var(--space-6);
    align-items: stretch;
    /* 첫 카드는 콘텐츠 기준선에, 오른쪽 스크롤 영역은 화면 끝까지. */
    width: calc(50% + 50vw);
    box-sizing: border-box;
    padding-right: calc(50vw - 50%);
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-showcase::-webkit-scrollbar {
    display: none;
  }

  .product-showcase:focus-visible {
    outline: 2px solid var(--sea-650);
    outline-offset: 4px;
  }

  /* 래퍼가 그리드에 직접 참여하도록 해 카드 높이가 서로를 늘리지 않게 한다 */
  .product-stack {
    display: contents;
  }

  .product-panel {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--foam-50);
    min-width: 0;
    scroll-snap-align: start;
  }

  .product-showcase .product-figure {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

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

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

  .product-panel-copy>small {
    color: var(--sea-650);
    font-size: var(--type-eyebrow);
    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);
  }

  .product-panel-copy .product-bone-note {
    margin-top: var(--space-3);
    font-size: var(--type-meta);
    line-height: 1.65;
  }

  /* ── 06. Cooking ── */

  .cook-section {
    position: relative;
    color: var(--foam-50);
    background: var(--sea-800);
  }

  .cook-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: start;
  }

  .cook-intro {
    padding-top: .75rem;
  }

  .cook-intro h2 {
    font-family: var(--font-serif);
    font-size: var(--type-title);
    font-weight: 400;
    line-height: var(--leading-title);
    letter-spacing: -.035em;
    word-break: keep-all;
  }

  .cook-intro>p:last-child {
    max-width: 25rem;
    margin-top: 2rem;
    color: #a9bac2;
    font-size: 1rem;
    line-height: 1.9;
    word-break: keep-all;
  }

  .cook-guide {
    min-width: 0;
  }

  .cook-tabs {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
  }

  .cook-tab {
    position: relative;
    min-height: 3.25rem;
    padding: 0 0 1rem;
    border: 0;
    background: transparent;
    color: #9eb4be;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: color 180ms ease;
  }

  .cook-tab::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    background: var(--foam-50);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
  }

  .cook-tab:hover,
  .cook-tab[aria-selected='true'] {
    color: var(--foam-50);
  }

  .cook-tab[aria-selected='true']::after {
    transform: scaleX(1);
  }

  .cook-panel {
    padding-top: 1.75rem;
  }

  .cook-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    margin-bottom: 1rem;
  }

  .cook-subtitle {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
  }

  .cook-time {
    margin: 0;
    color: #a9bac2;
    font-size: .875rem;
    white-space: nowrap;
  }

  .cook-step-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
  }

  .cook-step-tab {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: .5rem 0;
    border: 0;
    background: transparent;
    color: #9eb4be;
    text-align: left;
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
    transition: color 180ms ease;
  }

  .cook-step-number {
    display: grid;
    place-items: center;
    flex: 0 0 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .24);
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    transition: background 180ms ease, border-color 180ms ease;
  }

  .cook-step-tab:hover,
  .cook-step-tab[aria-selected='true'] {
    color: var(--foam-50);
  }

  .cook-step-tab[aria-selected='true'] .cook-step-number {
    border-color: var(--foam-50);
    background: var(--foam-50);
    color: var(--sea-800);
  }

  .cook-tab:focus-visible,
  .cook-step-tab:focus-visible,
  .cook-stage:focus-visible,
  .cook-step-nav button:focus-visible {
    outline: 2px solid var(--sea-400);
    outline-offset: 4px;
  }

  .cook-stage:not([hidden]) {
    animation: cook-stage-enter 360ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .cook-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--sea-950);
  }

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

  .cook-stage-description {
    min-height: 3.6em;
    margin-top: 1.25rem;
    font-size: 1rem;
    line-height: 1.8;
    word-break: keep-all;
  }

  .cook-step-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-block: .25rem 1.25rem;
  }

  .cook-step-nav button {
    min-height: 2.75rem;
    padding: .5rem 0;
    border: 0;
    background: transparent;
    color: var(--foam-50);
    font: inherit;
    font-size: .875rem;
    cursor: pointer;
  }

  .cook-step-nav button:disabled {
    opacity: .3;
    cursor: default;
  }

  .cook-step-nav>span {
    color: #a9bac2;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
  }

  /* ── 다양하게 즐기기 (더보기, 인스타 피드풍 매스너리) ── */
  .cook-more {
    position: relative;
    margin-top: var(--space-20);
    padding: var(--space-10) var(--space-8);
    color: var(--color-text);
    background: var(--foam-50);
    border-radius: var(--radius-lg);
  }

  .cook-more-head {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-line);
  }

  .cook-more-title {
    color: var(--sea-950);
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 3.4vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.02em;
  }

  .cook-more-sub {
    margin-top: var(--space-3);
    color: var(--color-text-soft);
    font-size: var(--type-lead);
    line-height: var(--leading-body);
  }

  .cook-more-tags {
    margin-top: var(--space-4);
    color: var(--sea-650);
    font-size: var(--type-meta);
    font-weight: 600;
    line-height: 1.5;
  }

  /* 박스 밖 우측 하단 고지 문구 */
  .cook-more-note {
    margin-top: var(--space-3);
    color: rgba(255, 255, 255, .45);
    font-size: var(--type-eyebrow);
    line-height: 1.5;
    text-align: right;
  }

  /*
   * SNS 피드풍 카드 매스너리.
   *
   * JS(하단 인라인 스크립트)가 카드를 가장 짧은 열에 하나씩 쌓아 배치한다.
   * 컬럼(CSS multi-column) 매스너리와 달리 카드가 열을 넘나들며 재배치되지
   * 않으므로, 더보기로 카드가 추가돼도 기존 카드는 제자리를 지키고 새 카드만
   * 아래에 덧붙는다.
   *
   * --feed-cols / --feed-gap 을 JS가 읽어 열 수와 간격을 계산한다.
   * --feed-mode가 carousel이면 JS는 배치에서 손을 떼고
   * 모바일용 스냅 캐러셀 CSS가 그대로 적용된다.
   * JS 실행 전(또는 비활성)에는 아래 그리드가 그대로 폴백이 된다.
   */
  .recipe-feed {
    --feed-mode: masonry;
    --feed-cols: 3;
    --feed-gap: var(--space-5);
    display: grid;
    grid-template-columns: repeat(var(--feed-cols), 1fr);
    gap: var(--feed-gap);
    align-items: start;
  }

  .recipe-feed.is-masonry {
    position: relative;
    display: block;
  }

  .recipe-feed.is-masonry .recipe-card {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .recipe-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
  }

  .recipe-card[hidden] {
    display: none;
  }

  .recipe-card-head {
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .recipe-avatar {
    width: 2rem;
    height: 2rem;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--salt-100);
  }

  .recipe-handle {
    color: var(--sea-950);
    font-size: var(--type-meta);
    font-weight: 600;
  }

  .recipe-card-media {
    background: var(--salt-100);
  }

  .recipe-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .recipe-card-media.ratio-square {
    aspect-ratio: 1 / 1;
  }

  .recipe-card-media.ratio-tall {
    aspect-ratio: 4 / 5;
  }

  .recipe-card-body {
    padding: var(--space-4);
  }

  .recipe-name {
    color: var(--sea-950);
    font-weight: 600;
  }

  .recipe-caption {
    margin-top: var(--space-2);
    color: var(--color-text-soft);
    font-size: var(--type-meta);
    line-height: 1.65;
  }

  .recipe-tag {
    margin-top: var(--space-2);
    color: var(--sea-650);
    font-size: var(--type-meta);
    line-height: 1.5;
    word-break: break-all;
  }

  .recipe-card.is-appearing {
    animation: mj-hero-up .5s var(--ease-out) both;
  }

  .recipe-more-btn {
    width: fit-content;
    margin: var(--space-8) auto 0;
    padding: var(--space-3) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--sea-650);
    background: transparent;
    border: 1px solid var(--color-line-strong);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
  }

  .recipe-more-btn:hover {
    background: rgba(10, 75, 99, .06);
    border-color: var(--sea-650);
  }

  .recipe-more-btn .arrow {
    transition: transform 260ms var(--ease-out);
  }

  .recipe-more-btn[aria-expanded='true'] .arrow {
    transform: rotate(180deg);
  }

  .cook-panel>.cook-tip {
    margin-top: 0;
    padding-top: var(--space-6);
    color: rgba(255, 255, 255, .55);
    border-top: 1px solid rgba(255, 255, 255, .15);
    font-size: var(--type-meta);
  }

  .cook-tip 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-gallery {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: var(--salt-100);
  }

  .table-gallery-viewport {
    position: absolute;
    inset: 0;
    min-width: 0;
    overflow: hidden;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
  }

  .table-gallery-track {
    position: relative;
    display: flex;
    height: 100%;
    gap: 0;
    will-change: transform;
  }

  .table-gallery-slide {
    flex: 0 0 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    user-select: none;
  }

  .table-gallery-viewport.is-dragging {
    cursor: grabbing;
  }

  .table-gallery-controls {
    position: absolute;
    z-index: 1;
    inset: auto 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .table-gallery-controls[hidden] {
    display: none;
  }

  .table-gallery-controls button {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    color: #fff;
    cursor: pointer;
    pointer-events: auto;
  }

  .table-gallery-arrow {
    border-radius: 50%;
    background: rgba(6, 40, 55, .65);
    backdrop-filter: blur(6px);
  }

  .table-gallery-arrow svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .table-gallery-arrow:disabled {
    opacity: .35;
    cursor: default;
  }

  .table-gallery-dots {
    display: flex;
    border-radius: 2rem;
    background: rgba(6, 40, 55, .5);
    backdrop-filter: blur(6px);
  }

  .table-gallery-dots button {
    background: transparent;
    border-radius: 50%;
  }

  .table-gallery-dots button::before {
    content: '';
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .45);
  }

  .table-gallery-dots button[aria-current="true"]::before {
    background: #fff;
  }

  .table-gallery button:focus-visible,
  .table-gallery-viewport:focus-visible {
    outline: 2px solid var(--sea-400);
    outline-offset: -3px;
  }

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

  .table-quote {
    margin: 0 0 var(--space-10);
    padding-left: var(--space-6);
    color: var(--sea-650);
    font-size: var(--type-lead);
    line-height: var(--leading-body);
    border-left: 2px solid var(--sea-400);
  }

  .table-copy-body {
    display: grid;
    gap: var(--space-5);
    color: var(--color-text-soft);
    line-height: var(--leading-body);
  }

  /* ── Promise ── */

  .product-promise {
    position: relative;
    min-height: 90svh;
    padding-block: clamp(3rem, 8vw, 6rem);
    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: var(--type-eyebrow);
    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: var(--type-meta);
  }

  /* ── 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-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;
    /*
     * 승격 유지. sticky 씬이 모바일에서 덜덜 떨리는 걸 막는 장치라 빼면 안 된다.
     * (will-change: transform opacity 로 적혀 있던 시절엔 쉼표가 없어 그 선언이 무효였고,
     *  실제 승격은 아래 translateZ가 혼자 하고 있었다. 무효라고 같이 지웠다가 떨림이 재발했다)
     */
    transform: translateZ(0);
    /*
     * 바탕색은 씬과 같은 색으로 깔아둔다. 주소창이 접혀 실제 화면이 svh보다 커지면
     * 씬이 화면을 다 덮지 못하는데, 그때 아래에 밝은 배경이 비쳐
     * "푸터가 붙은" 것처럼 보이는 걸 막는다.
     */
    background: #02141d;
  }

  .voice-scene {
    position: sticky;
    top: 0;
    /*
     * svh 고정. dvh는 주소창이 접히고 펴지는 내내 값이 변해서
     * 화면 전체를 덮는 sticky 요소가 스크롤 중 계속 재배치된다(모바일 버벅임의 원인).
     * 줄어든 만큼은 래퍼에 깔아둔 같은 바탕색이 가려준다.
     */
    min-height: 100svh;
    /*
     * 상단은 고정 헤더가 덮으므로 그만큼을 여백에 더한다.
     * 그래야 가운데 정렬된 글이 헤더에 가리지 않고,
     * 글자 크기 자동 맞춤(JS)도 실제로 보이는 높이를 기준으로 계산한다.
     */
    --voice-pad: clamp(3rem, 8vw, 6rem);
    padding-top: calc(var(--header-h) + var(--voice-pad));
    padding-bottom: calc(var(--footer-h) + var(--voice-pad));
    display: grid;
    align-items: center;
    color: #fff;
    transform: translateZ(0);   /* sticky 씬 승격. 떨림 방어라 제거 금지 */
    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;
    /*
     * 제거 금지.
     * 단어마다 레이어가 있어야 채움 연출이 합성기 안에서 끝난다.
     * 빼면 매 프레임 .voice-scene 레이어 전체가 다시 래스터화되고,
     * 화면을 꽉 채운 sticky 레이어가 스크롤 내내 떨린다.
     */
    will-change: opacity;
  }
}

/* ── 반응형 ── */

@keyframes cook-stage-enter {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 721px) {
  .product-page .route-point:focus-visible .route-figure { transform: scale(1); }
  .product-page .route-point:focus-visible .route-image--base { opacity: 0; }
}

@media (min-width: 721px) and (hover: hover) and (pointer: fine) {
  .product-page {
    .route-surface {
      transition: transform 340ms cubic-bezier(.22, 1, .36, 1),
        clip-path 340ms cubic-bezier(.22, 1, .36, 1);
    }

    /* clip-path 바깥의 부모에 그림자를 적용해 가장자리에서 잘리지 않게 한다. */
    .route-point {
      filter: drop-shadow(0 2px 3px rgba(3, 21, 31, .05))
        drop-shadow(0 5px 8px rgba(3, 21, 31, .07));
      transition: filter 340ms cubic-bezier(.22, 1, .36, 1);
    }

    .route-point:hover {
      z-index: 1;
      filter: drop-shadow(0 4px 6px rgba(3, 21, 31, .10))
        drop-shadow(0 16px 20px rgba(3, 21, 31, .16));
      transition-duration: 440ms;
      transition-delay: 40ms;
    }

    .route-point:hover .route-figure {
      transform: scale(1);
    }

    .route-point:hover .route-image--base {
      opacity: 0;
    }

    .route-point:hover .route-surface {
      /* 병풍의 기울어진 가장자리를 정면으로 펴면서 소폭 확대한다. */
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      transform: scale(1.10);
      transition-duration: 440ms;
      transition-delay: 40ms;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-page .cook-stage:not([hidden]) {
    animation: none;
  }
  .product-page .route-point,
  .product-page .route-surface,
  .product-page .route-figure,
  .product-page .route-image--base {
    transition: none;
  }

  .product-page .route-figure,
  .product-page .route-point:hover .route-surface {
    transform: none;
  }

}

@media (max-width: 1024px) {

  .product-page {



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

    /*
     * 한 단으로 접히면 DOM 순서상 사진이 제목보다 위로 올라간다.
     * 그렇다고 사진을 맨 뒤로 보내면 긴 본문 아래에 파묻히므로,
     * .table-copy를 display:contents로 풀어 자식들을 직접 배치한다.
     *   제목 → 인용 → 사진 → 본문
     */
    .table-copy {
      display: contents;
    }

    .table-grid .section-index {
      order: 1;
      margin-bottom: 0;
    }

    .table-grid .ocean-title {
      order: 2;
      margin-bottom: 0;
    }

    .table-grid .table-quote {
      order: 3;
      margin-bottom: 0;
    }

    .table-grid .product-figure--table {
      order: 4;
      min-height: clamp(16rem, 52vw, 24rem);
    }

    .table-grid .table-copy-body {
      order: 5;
    }

    .table-grid {
      gap: var(--space-6);
    }

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

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

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

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

@media (max-width: 720px) {

  .product-page {

    #productHero {
      min-height: clamp(26rem, 68vh, 40rem);
      padding-bottom: 4rem;
    }

    .hero-sub-break {
      display: inline;
    }

    .salt-inner {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .salt-visual {
      width: min(100%, 28rem);
      aspect-ratio: 5 / 4;
      border-radius: 0;
      justify-self: center;
    }

    .promise-inner h2 {
      font-size: clamp(2.25rem, 8vw, 3.5rem);
      line-height: 1.2;
    }

    /* 100svh를 풀면 상하 여백이 내용 높이에 맞게 줄어든다 */
    .origin-section {
      min-height: auto;
    }

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

    /* 모바일은 평면 사진을 한 장씩 꽉 채워 스냅한다. */
    .route-visual {
      display: flex;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      align-items: flex-start;
      gap: 0;
      margin-top: var(--space-8);
      margin-inline: 0;
      padding: 0;
      /* x만 auto로 두면 y가 auto로 계산돼 세로 스크롤이 생긴다 */
      overflow: auto hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 0;
      scrollbar-width: none;
    }

    .route-visual::-webkit-scrollbar {
      display: none;
    }

    /* 기존 회사 갤러리와 같은 네이티브 스크롤·스냅·무한 순환 방식 */
    .table-gallery-viewport {
      overflow: auto hidden;
      scroll-snap-type: x mandatory;
      overscroll-behavior-x: contain;
      touch-action: auto;
      cursor: auto;
      scrollbar-width: none;
    }

    .table-gallery-viewport::-webkit-scrollbar {
      display: none;
    }

    .table-gallery-track {
      transform: none !important;
      transition: none !important;
      will-change: auto;
    }

    .route-point {
      flex: 0 0 100%;
      width: 100%;
      min-width: 0;
      height: auto;
      aspect-ratio: 2 / 3;
      scroll-snap-align: start;
      scroll-snap-stop: always;
      pointer-events: auto;
      filter: none;
    }

    .route-point::before {
      display: none;
    }

    .route-point .route-surface {
      position: relative;
      clip-path: none;
      transform: none;
      border-radius: 0;
    }

    /* Safari에서도 빈 grid 행이 되지 않도록 실제 콘텐츠로 높이를 확보한다. */
    .route-point .route-figure {
      position: relative;
      height: auto;
      padding-top: 150%;
      transition-duration: 600ms;
    }

    .route-point .route-image--base {
      transition-duration: 600ms;
    }

    /* 카드 안에서는 제목을 카드 제목 스케일로 맞춘다 (본문은 토큰 그대로) */
    .route-point strong {
      font-size: 2rem;
    }

    .route-note {
      margin-inline: 0;
    }

    .salt-scene {
      padding-block: var(--space-16);
    }

    .salt-body {
      margin-top: var(--space-8);
      gap: var(--space-6);
    }

    .table-quote {
      margin-bottom: var(--space-6);
    }

    .cook-more {
      margin-top: var(--space-12);
      padding: var(--space-6) var(--space-5);
    }

    .cook-more-title {
      margin-bottom: var(--space-5);
    }

    /* route-visual과 같은 스냅 스크롤 카드 캐러셀 */
    .standard-grid {
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: 78%;
      gap: var(--space-3);
      margin-inline: calc(var(--space-4) * -1);
      padding: 0 var(--space-4);
      /* x만 auto로 두면 y가 auto로 계산돼 세로 스크롤이 생긴다 */
      overflow: auto hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--space-4);
      scrollbar-width: none;
    }

    .standard-grid::-webkit-scrollbar {
      display: none;
    }

    .standard-card,
    .standard-card:nth-child(even) {
      min-height: 22rem;
      transform: none;
      scroll-snap-align: start;
    }

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

    /* 동일한 유한 스크롤 목록에서 다음 카드가 살짝 보이도록 한다. */
    .product-showcase {
      grid-auto-columns: calc((100vw - 2rem) * .85);
      gap: var(--space-3);
    }

    /* 카드마다 제각각이던 사진 높이를 하나의 비율로 통일한다 */
    .product-figure--hero,
    .product-figure--small {
      min-height: 0;
      aspect-ratio: 4 / 3;
    }

    .product-figure--illustration img {
      height: 100%;
      object-fit: cover;
    }

    .cook-guide {
      padding: 0;
    }

    .cook-tabs {
      gap: 1.5rem;
    }

    .cook-tab {
      padding-inline: 0;
      font-size: .9375rem;
    }

    .cook-step-tabs {
      gap: .5rem;
    }

    .cook-step-tab {
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      font-size: .8125rem;
      text-align: center;
    }

    .cook-step-tab>span:last-child {
      white-space: nowrap;
    }

    .cook-stage-description {
      min-height: 3.6em;
    }

    /* 캐러셀에서는 옆으로 넘기면 다 보이므로 더보기 버튼이 필요 없다 */
    .recipe-more-btn {
      display: none;
    }

    /* 모바일: 매스너리 대신 스냅 스크롤 캐러셀 (JS는 배치에서 손을 뗀다) */
    .recipe-feed {
      --feed-mode: carousel;
      --feed-gap: var(--space-3);
      grid-auto-flow: column;
      grid-template-columns: none;
      grid-auto-columns: 78%;
      gap: var(--feed-gap);
      align-items: stretch;
      margin-inline: calc(var(--space-5) * -1);
      padding: 0 var(--space-5);
      /* x만 auto로 두면 y가 auto로 계산돼 세로 스크롤이 생긴다 */
      overflow: auto hidden;
      overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--space-5);
      scrollbar-width: none;
    }

    .recipe-feed::-webkit-scrollbar {
      display: none;
    }

    .recipe-card {
      scroll-snap-align: start;
    }

    .promise-rings {
      width: 130vw;
    }

    .voice-scene {
      --voice-pad: clamp(1.25rem, 4vw, 2.5rem);
    }

    /*
     * 화면을 세로로 알맞게 채우도록 글자 크기를 자동으로 맞춘다.
     *   - 6.2vw : 가로가 좁으면 줄바꿈이 과해지지 않도록 폭 기준으로 제한
     *   - 3.1svh: 세로가 짧은 기기에서 글이 화면 밖으로 넘치지 않도록 높이 기준으로 제한
     * 둘 중 작은 값을 써서 어떤 기기에서도 한 화면에 알맞게 들어간다.
     */
    .voice-copy {
      font-size: clamp(1.125rem, min(6.2vw, 3.1svh), 2.5rem);
      line-height: 1.6;
    }
  }
}

/* 세로 화면/확대 상태에서도 병풍은 IntersectionObserver의 진입 비율과 무관하게 표시한다. */
@media (max-width: 720px) {
  .product-page .route-visual[data-reveal] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}

/* ── 키프레임 (이름 충돌 방지를 위해 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;
  }
}


/* ──────────────────────────────────────────────
 * 모바일 스크롤 성능
 * ──────────────────────────────────────────────
 * 스크롤과 함께 매 프레임 다시 그려지는 효과들을 모바일에서만 걷어낸다.
 * 화면이 작아 효과의 존재감은 거의 없는 반면 비용은 그대로라 이득이 크다.
 */
@media (max-width: 1024px) {

  .product-page {

    /* 뒤 배경이 스크롤할 때마다 블러를 다시 계산한다 */
    .cook-guide {
      background: transparent;
    }

    /* 매 프레임 위치가 바뀌는 요소라 그림자 필터가 곧 매 프레임 리페인트다 */
    .leap-fish img {
      filter: none;
    }
  }
}