/*
 * recipe.css
 * Extracted from app.css (recipe/single-recipe related styles only)
 * Notes:
 * - .recipe-thumbnails alignment changed to flex
 * - FAQ widths converted to responsive max-width
 */

/* Floating banner vars (recipe only) */
/* 20260105 s */
:root{
  --fb-right: 20px;
  --fb-bottom: 20px;
  --fb-z: 9999;

  --fb-toggle-size: 56px;   /* 작은 박스 크기 */
  --fb-radius: 20px;

  --fb-panel-w: 244px;      /* 확장 박스 폭 */
  --fb-panel-h: 236px;
  --fb-panel-radius: 20px;
  --fb-shadow: 0 18px 45px rgba(0,0,0,.18);

  --font-weight-medium: 700;

  --fb-bg: #FEF3DD;
  --fb-fg: #690742;

  --fb-panel-bg: #FEF3DD;
  --fb-btn-bg: #690742;
  --fb-btn-fg: #FEF3DD;
}

/* ================================
   Floating Button Panel (fb-*)
================================ */

.fb-wrap{
  position: fixed;
  right: var(--fb-right);
  bottom: calc(var(--fb-bottom) + env(safe-area-inset-bottom));
  z-index: var(--fb-z);

  display: flex;
  flex-direction: column;
  align-items: flex-end; 

  pointer-events: none;
}

/* 확장 박스 */
.fb-panel{
  width: var(--fb-panel-w);
  height: var(--fb-panel-h);
  background: var(--fb-panel-bg);
  border-radius: var(--fb-panel-radius);
  box-shadow: var(--fb-shadow);
  padding: 14px;
  margin-bottom: 10px;

  /* 닫힘 상태 */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  box-sizing: border-box;
    visibility: hidden;
}

.fb-panel__top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.fb-panel__title-wrap{
  display: flex;
  flex-direction: column;
  min-width: 125px;
  padding-bottom: 44px;
}

.fb-panel__title{
  font-family: "novel-display";
  font-weight: 800;
  font-size: 28px;
  line-height: 110%;
  white-space: normal;
  word-break: keep-all;
  position: relative;
  z-index: 2;
  margin: 8px 0px 5px 6px;
  letter-spacing: -0.28px;
}

.fb-panel__thumb{
  position: relative;
  right: 20px;
  bottom: 0px;

  width: 106px;
  height: 170px; 
  border-radius: 10px;
  object-fit: contain;
  flex: 0 0 auto;

  z-index: 1;
}

.fb-panel__desc{
  font-size: 12px;
  opacity: .75;
  margin-top: 3px;
  line-height: 1.3;
}

.fb-panel__btn{
  display: flex; 
  width: calc(100% - 28px);
  height: 44px;
  margin-top: auto;

  border-radius: 10px;
  background: var(--fb-btn-bg);
  text-decoration: none;

  align-items: center;
  justify-content: center;

  z-index: 3;
  position: absolute;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    filter 0.35s ease;

  color: var(--TG_Sub, #FEF3DD);
  box-sizing: border-box;
  line-height: 44px;
  padding: 0;

  bottom: 14px;
}

.fb-panel__btn:hover{
  transform: translateY(-1px) scale(1.02);
  color: var(--TG_Sub, #FEF3DD);
}

.fb-panel__btn-text{
  color: var(--TG_Sub, #FEF3DD);
  text-align: center;

  font-family: "novel-display";
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.54px;

  pointer-events: none; /* 클릭 영역은 a 전체 */
}

/* 작은 박스(토글) */
.fb-toggle{
  width: var(--fb-toggle-size);
  height: var(--fb-toggle-size);
  border-radius: var(--fb-radius);
  border: 0;
  background: var(--fb-bg);
  color: var(--fb-fg);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  cursor: pointer;
  position: relative;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, filter .15s ease;

  outline: 1px solid var(--fb-fg);
  outline-offset: -1px; /* 버튼 가장자리에 밀착 */

  pointer-events: auto;
}

.fb-toggle:hover{ transform: translateY(-2px); filter: brightness(1.05); }
.fb-toggle:active{ transform: translateY(0) scale(.98); }

.fb-toggle__open img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

.fb-toggle__close{
  position: absolute;
  font-size: 22px;
  line-height: 1;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .15s ease, transform .15s ease;
}

/* 열림 상태 */
.fb-wrap.is-open .fb-panel{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.fb-wrap.is-open .fb-toggle__open{
  opacity: 0;
}

.fb-wrap.is-open .fb-toggle__close{
  opacity: 1;
  transform: scale(1);
}

.fb-wrap .fb-panel{
  width: var(--fb-panel-w);
  max-width: var(--fb-panel-w);
  box-sizing: border-box;

  pointer-events: none;
}

/* 접근성 포커스 */
.fb-toggle:focus-visible{
  outline: 3px solid rgba(59,130,246,.65);
  outline-offset: 3px;
}

.fb-click-arc{
  position: absolute;
  top: -23px;
  left: -25px;
  width: 86px;
  height: 86px;
  pointer-events: none; /* 클릭 방해 금지 */
  transform: rotate(1.72deg); /* 네 angle 반영 */
}

.fb-click-arc__text{
  fill: #fff;
  font-family: "novel-display";
  font-weight: 800;
  font-size: 25px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.fb-wrap.is-open .fb-click-arc{
  opacity: 0;
}

@keyframes fbClickBounce {
  0%   { transform: rotate(1.72deg) translateY(0); }
  35%  { transform: rotate(1.72deg) translateY(-10px); }
  70%  { transform: rotate(1.72deg) translateY(0); }
  100% { transform: rotate(1.72deg) translateY(0); }
}

.fb-toggle:hover .fb-click-arc{
  animation: fbClickBounce 0.45s ease-in-out;
}

/* ================================
   Floating Panel top dots (FIGMA)
================================ */

/* 20260105 e */

.page-recipes {
    padding-top: calc(var(--header) + var(--line-banner))
}

.page-recipes .hero-wrap .hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1440/600;
    font-size: 0;
    line-height: 0
}

.page-recipes .hero-wrap .hero .video-wrap,
.page-recipes .hero-wrap .hero .youtube-embed-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1440/600;
    box-sizing: border-box
}

.page-recipes .hero-wrap .hero .video-wrap iframe,
.page-recipes .hero-wrap .hero .youtube-embed-wrap iframe {
    width: 100%;
    height: 100%
}

.page-recipes .hero-wrap .hero .video-wrap video,
.page-recipes .hero-wrap .hero .youtube-embed-wrap video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #000;
    box-sizing: border-box;
    z-index: 1
}

@media only screen and (max-width:1000px) {

    .page-recipes .hero-wrap .hero .video-wrap video,
    .page-recipes .hero-wrap .hero .youtube-embed-wrap video {
        position: relative
    }
}

.page-recipes .hero-wrap .hero .video-wrap .sound,
.page-recipes .hero-wrap .hero .youtube-embed-wrap .sound {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    background: url(../assets/img/layout/icon-sound-off.svg) no-repeat center center/contain;
    z-index: 2
}

.page-recipes .hero-wrap .hero .video-wrap .sound.on,
.page-recipes .hero-wrap .hero .youtube-embed-wrap .sound.on {
    background: url(../assets/img/layout/icon-sound-on.svg) no-repeat center center/contain
}

.page-recipes .hero-wrap .hero img,
.page-recipes .hero-wrap .hero video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.page-recipes .recipe-wrap {
    padding-bottom: 82px
}

.page-recipes .recipe-wrap .recipe-category-wrap {
    padding-top: 40px;
    padding-bottom: 56px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    gap: 24px
}

@media only screen and (max-width:1000px) {
    .page-recipes .recipe-wrap .recipe-category-wrap {
        padding: 30px 20px;
        gap: 10px
    }

    .page-recipes .recipe-wrap {
        padding-bottom: 68px
    }
}

.page-recipes .recipe-wrap .recipe-category-wrap a {
    color: var(--TG_Main, #690742);
    flex: 1;
    text-align: center;
    border-radius: 8px;
    border: 3px solid var(--TG_Main, #690742);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: 1.2px;
    height: 66px;
    box-sizing: border-box
}

@media only screen and (max-width:1000px) {
    .page-recipes .recipe-wrap .recipe-category-wrap a {
        height: 40px;
        font-size: 16px
    }
}

.page-recipes .recipe-wrap .recipe-category-wrap a.active {
    color: var(--TG_Flavor01, #e95157);
    border-color: var(--TG_Flavor01, #e95157)
}

.page-recipe {
    color: var(--TG_Main, #690742);
    padding-top: calc(var(--header) + var(--line-banner) + 77px);
    /*padding-bottom: 80px;*/
    --content-width: 1248px
}

@media only screen and (max-width:1000px) {
    .page-recipe {
        padding-top: calc(var(--header) + var(--line-banner));
        --content-width: 100%
    }
}

.page-recipe .recipe-header {
    max-width: var(--content-width);
    margin: 0 auto;
    display: flex;
    gap: 48px;
    padding-bottom: 100px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header {
        flex-direction: column;
        gap: 0px;
        padding-bottom: 48px
    }
}

.page-recipe .recipe-header>div {
    flex: 1
}

.page-recipe .recipe-header .recipe-thumbnails {
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.page-recipe .recipe-header .recipe-thumbnails .recipe-thumbnails-region{
    width: calc(70% - 2rem);
    color: #690742;
    font-family: "Novel Display";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 650;
    line-height: 120%; 
    letter-spacing: 0.00875rem;
}

.page-recipe .recipe-header .recipe-thumbnails .galleries {
    width: 70%;
    height: auto;
    font-size: 0;
    line-height: 0;
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-thumbnails .recipe-thumbnails-region{
        width: 100%;
        font-size: 0.75rem;
    }

    .page-recipe .recipe-header .recipe-thumbnails .galleries {
        margin-bottom: 0px;
        border-radius: 0
    }
}

.page-recipe .recipe-header .recipe-thumbnails .galleries .gallery-cell {
    border: 4px solid var(--TG_Main, #690742);
    border-radius: 25px;
    overflow: hidden;

    width: 100%;
    height: auto;
    /*aspect-ratio: 1200/1480*/
}

.page-recipe .recipe-header .recipe-thumbnails .galleries .gallery-cell:first-child {
    cursor: pointer
}

.page-recipe .recipe-header .recipe-thumbnails .gallery-cell video{
    width: 100%;
    height: auto;
    display: block;
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-thumbnails .thumbnails {
        padding: 0 20px;
        overflow: hidden
    }

    .page-recipe .recipe-header .recipe-thumbnails .thumbnails .flickity-viewport {
        overflow: visible
    }
}

.page-recipe .recipe-header .recipe-thumbnails .thumbnails .thumbnail-item {
    width: 120px;
    height: 120px;
    margin-right: 16px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-thumbnails .thumbnails .thumbnail-item {
        width: 100px;
        height: 100px;
        margin-right: 8px
    }
}

.page-recipe .recipe-header .recipe-thumbnails .thumbnails .thumbnail-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px
}

.page-recipe .recipe-header .recipe-info {
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info {
        padding-top: 24px;
        padding-left: 20px;
        padding-right: 20px;
        gap: 20px;
    }
}

.page-recipe .recipe-header .recipe-info .recipe-title {
    display: flex;
    flex-direction: column;
    gap: 24px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-title {
        gap: 16px
    }
}

.page-recipe .recipe-header .recipe-info .recipe-title h2 {
    color: var(--TG_Main, #690742);
    font-family: "novel-display";
    font-size: 48px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 62.4px */
    letter-spacing: 0.96px;
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-title h2 {
        font-size: 32px
    }
}

.page-recipe .recipe-header .recipe-info .recipe-title .recipe-rate {
    display: flex;
    gap: 10px
}

.page-recipe .recipe-header .recipe-info .recipe-title .recipe-rate a {
    color: var(--TG_Main, #690742);
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
    text-underline-offset: 3px
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs {
    display: flex;
    gap: 40px;
    margin-bottom: 32px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs {
        gap: 24px
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs a {
    position: relative;
    color: var(--TG_Main, #690742);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 36px;
    height: 36px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs a {
        font-size: 16px;
        line-height: 32px;
        height: 32px
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs a:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    bottom: 0;
    width: 100%;
    background: var(--recipe-how-to-cook-background-color);
    opacity: .5;
    z-index: -1;
    display: none
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-tabs a.active:after {
    display: block
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons {
        margin-top: 56px
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-information-button a {
    display: flex;
    width: 100%;
    height: 76px;
    font-family: "novel-display";

    padding: 16px 0;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    color: var(--TG_Main, #690742);
    font-size: 20px;
    font-weight: var(--font-weight-medium);
    line-height: 140%;
    letter-spacing: 1px;
    border-radius: 8px;
    border: 3px solid var(--TG_Main, #690742)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-information-button a.view-product-detail {
    margin-bottom: 14px;
    border-radius: 8px;
    border: 3px solid var(--TG_Main, #690742)
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-information-button a {
        height: 60px;
        color: #FEF3DD;
        background: var(--TG_Main, #690742);
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 1px
    }
}

@media only screen and (hover:hover) {
     .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-information-button a.view-buy-it-here:hover {
        color: #FEF3DD;
        background: var(--TG_Main, #690742);
    }

    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-information-button a.view-product-detail:hover {
        color: #FEF3DD;
        background: var(--TG_Main, #690742);
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists {
    display: none;
    margin-top: 8px;
    max-width: 100%;
    padding: 20px 0
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item {
    width: 33.333%;
    height: 80px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item {
        width: 50%
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item:before {
    background-image: url(../assets/img/product/img-buy-it-here-hover.svg);
    left: 50%;
    transform: translateX(-50%);
    top: -32px
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.amazon:after {
    background-image: url(../assets/img/product/logo-amazon.svg)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.kroger:after {
    background-image: url(../assets/img/product/logo-kroger.svg)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.naver:after {
    background-image: url(../assets/img/product/logo-naver.svg)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.coupang:after {
    background-image: url(../assets/img/product/logo-coupang.svg)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.kurly:after {
    background-image: url(../assets/img/product/logo-kurly.svg)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons.active .recipe-information-button a {
    color: #fff;
    background: var(--TG_Main, #690742)
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons.active .recipe-buy-it-lists {
    display: flex;
    flex-wrap: wrap;
    gap: 0
}

.page-recipe .recipe-wave-background-1 svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440/95
}

.page-recipe .recipe-why-tangle {
    position: relative;
    padding-top: 100px;
    background: #eee3ca;
    min-height: 824px;
    overflow: hidden
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle {
        min-height: 0;
        padding-top: 30px;
        padding-bottom: 94px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner {
    display: flex;
    gap: 48px;
    max-width: 1160px;
    margin: 0 auto
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner {
        max-width: 100%;
        flex-direction: column;
        gap: 0
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner>div {
    flex: 1
}

.page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap {
    position: relative;
    overflow: hidden
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap {
        margin: 0 20px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap .image {
    transition: all var(--transition-slow)
}

.page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap .image img {
    max-width: 100%
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap .image.image-1 {
        margin-bottom: -70px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap .image.image-2 {
    position: absolute;
    left: 0;
    top: 0
}

.page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap.enter-effect .image-2 {
    opacity: 0;
    transform: translateY(100%)
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .image-wrap:after {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 30%;
        bottom: 0;
        background: linear-gradient(180deg, rgba(238, 227, 202, 0) 30.21%, rgba(238, 227, 202, .8) 57.06%, #eee3ca 68.72%)
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 60px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap {
        gap: 24px;
        padding-top: 0;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 40px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap h3 {
    font-size: 60px;
    font-weight: 800;
    line-height: 120%;
    text-align: center
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap h3 {
        font-size: 32px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 16px;
    list-style: none
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul {
        display: flex;
        flex-wrap: wrap;
        gap: 24px 4px;
        padding-top: 16px
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li {
    transition: all var(--transition-slow);
    width: calc(25% - 12px)
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li {
        width: calc(33.333% - 4px)
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(5),
.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(6),
.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(7),
.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(8) {
    transition-delay: .15s
}

@media only screen and (max-width:1000px) {

    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(5),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(6),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(7),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(8) {
        transition-delay: 0s
    }
}

@media only screen and (max-width:1000px) {

    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(4),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(5),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(6) {
        transition-delay: .15s
    }

    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(7),
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li:nth-child(8) {
        transition-delay: .3s
    }
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li.enter-effect {
    opacity: 0;
    transform: translateY(100%)
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li .icon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center
}

.page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li .icon-wrap img {
    max-width: 100%;
    height: auto
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-why-tangle .why-tangle-inner .content-wrap ul li .icon-wrap img {
        width: 106px
    }
}

.page-recipe .recipe-why-tangle .recipe-wave-background-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    margin-bottom: -2px
}

.page-recipe .recipe-why-tangle .recipe-wave-background-2 svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1440/96
}

.page-recipe .recipe-why-tangle .recipe-wave-background-2 svg path {
    fill: var(--recipe-how-to-cook-background-color)
}

.page-recipe .recipe-how-to-cook {
    position: relative;
    background: var(--recipe-how-to-cook-background-color);
    padding-top: 60px;
    padding-bottom: 372px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-how-to-cook {
        padding-top: 40px;
        padding-bottom: 200px
    }
}

.page-recipe .recipe-how-to-cook h3 {
    font-size: 60px;
    font-weight: 800;
    line-height: 120%;
    text-align: center;
    padding-bottom: 56px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-how-to-cook h3 {
        font-size: 32px
    }
}

.page-recipe .recipe-how-to-cook .how-to-cook-steps .cook-step {
    width: 368px;
    height: auto;
    aspect-ratio: 368/410;
    margin-right: 24px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-how-to-cook .how-to-cook-steps .cook-step {
        width: 300px;
        aspect-ratio: 300/430
    }
}

.page-recipe .recipe-how-to-cook .how-to-cook-steps .cook-step img {
    width: 100%;
    height: auto
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-how-to-cook .how-to-cook-steps .cook-step img {
        max-width: 300px
    }
}

.page-recipe .recipe-how-to-cook .recipe-3d-model {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 500px;
    pointer-events: none;
    overflow: hidden
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-how-to-cook .recipe-3d-model {
        height: 300px
    }
}

.page-recipe .recipe-how-to-cook .recipe-3d-model model-viewer {
    width: 100%;
    height: 100%;
    scale: 1.3
}

.page-recipe .recipe-how-to-cook .recipe-3d-model model-viewer::part(default-progress-bar) {
    display: none
}

.page-recipe .recipe-reviews-wrap {
    padding-top: 100px;
    padding-bottom: 100px;
    max-width: var(--content-width);
    margin: 0 auto
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap {
        padding-top: 80px;
        padding-bottom: 80px
    }
}

.page-recipe .recipe-reviews-wrap>h3 {
    font-size: 60px;
    font-weight: 800;
    line-height: 120%;
    text-align: center;
    padding-bottom: 80px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap>h3 {
        font-size: 32px;
        padding-bottom: 40px
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list {
    display: flex;
    flex-direction: column
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap .reviews-list {
        padding: 0 20px
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item {
    font-family: Pretendard;
    display: flex;
    padding: 24px 0;
    border-bottom: 1px solid var(--TG_Main, #690742);
    gap: 56px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap .reviews-list .review-item {
        flex-direction: column;
        gap: 16px
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .customer-id {
    width: 100px;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 140%
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap .reviews-list .review-item .customer-id {
        width: auto;
        font-size: 14px;
        font-weight: 700
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .content {
    flex: 1;
    display: flex;
    flex-direction: column
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .content .rate {
    margin-bottom: 16px
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .content .title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 120%;
    margin-bottom: 8px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap .reviews-list .review-item .content .title {
        font-size: 16px;
        font-style: normal;
        font-weight: 700
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .content .description {
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
    min-height: 70px
}

@media only screen and (max-width:1000px) {
    .page-recipe .recipe-reviews-wrap .reviews-list .review-item .content .description {
        min-height: 44px
    }
}

.page-recipe .recipe-reviews-wrap .reviews-list .review-item .date {
    width: 80px;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%
}

.page-recipe .recipe-reviews-wrap .reviews-pagination {
    margin-top: 80px;
    justify-content: center;
    gap: 6px
}

.page-recipe .recipe-reviews-wrap .reviews-pagination button {
    cursor: pointer;
    border: 0;
    background: 0 0;
    color: var(--TG_Main, #690742);
    font-size: 16px;
    font-weight: 500
}

.page-recipe .recipe-reviews-wrap .reviews-pagination button.active {
    font-weight: 800
}

.page-recipe .recipe-reviews-wrap .reviews-pagination button.next,
.page-recipe .recipe-reviews-wrap .reviews-pagination button.prev {
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    width: 20px;
    height: 20px
}

.page-recipe .recipe-reviews-wrap .reviews-pagination button.prev {
    margin-right: 18px;
    background: url(../assets/img/icon-page-prev.svg) no-repeat center center/contain
}

.page-recipe .recipe-reviews-wrap .reviews-pagination button.next {
    margin-left: 18px;
    background: url(../assets/img/icon-page-next.svg) no-repeat center center/contain
}

.page-recipe.recipe-category-pack .recipe-how-to-cook {
    padding-bottom: 412px
}

@media only screen and (max-width:1000px) {
    .page-recipe.recipe-category-pack .recipe-how-to-cook {
        padding-bottom: 240px
    }

    .page-recipe ul.key-points,
    .page-recipes ul.key-points {
      margin: 0;
    }
}

.page-recipe ul.key-points,
.page-recipes ul.key-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, max-content));
  gap: 8px;
}

@media only screen and (max-width:1000px) {
    .page-recipe ul.key-points,
    .page-recipes ul.key-points {
      margin: 0;
    }
}

.page-recipe ul.key-points li,
.page-recipes ul.key-points li {
  margin: 0; /* 테마 기본 li margin 제거용 */
}

.page-recipe ul.key-points img,
.page-recipes ul.key-points img {
  display: block;
  height: auto;
  max-width: 100%;
}

.page-recipe .key-points-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  padding-top: 12px;
}

.page-recipe .key-points-title .icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.page-recipe .key-points-title .text {
    color: var(--TG_Flavor01, #E95157);
    font-family: "novel-display";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 24px */
}

@media only screen and (max-width:1000px) {
    .page-recipe .key-points-title .text { 
        font-size: 16px;
    }
}

.page-recipe .recipe-header .recipe-info .recipe-information-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media only screen and (max-width:1000px) {
  .page-recipe .recipe-header .recipe-info .recipe-information-wrap {
    gap: 16px;
  }
  .page-recipe .recipe-header .recipe-info .recipe-information-wrap .recipe-information-buttons {
    margin-top: 0;
  }
}

.page-recipe .faq-wave {
  width: 100%;
  line-height: 0;
}

.page-recipe .faq-wave svg {
  display: block;
  width: 100%;
  height: auto;
}

.page-recipe .faq-section {
  display: flex;
  padding: 40px 0 120px 0;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  align-self: stretch;

  background: var(--TG_Flavor05, #91ABD8);
  margin-top: -1px;
}

@media only screen and (max-width:1000px) {
    .page-recipe .faq-section {
        padding: 40px 0 52px 0;
        gap: 24px;
    }
}

.page-recipe .faq-title {
  color: var(--TG_Main, #690742);
  text-align: center;
  font-family: "novel-display";
  font-size: 60px;
  font-style: normal;
  font-weight: 800;
  line-height: 120%;
  margin: 0; /* 섹션 gap으로 간격 관리 */
}

@media only screen and (max-width:1000px) {
    .page-recipe .faq-title {
      font-size: 36px;
    }
}

.page-recipe .faq-list {
  width: 100%;
  max-width: var(--content-width, 1200px);
  padding-inline: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.page-recipe .faq-item {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;

  border-radius: 16px;
  background: #FFF;
  box-sizing: border-box;
  overflow: hidden; /* 라운드 안 깨지게 */
}

.page-recipe .faq-item .faq-q {
  display: flex;
  width: 100%;
  padding: 28px 40px;
  justify-content: space-between;
  align-items: center;
  gap: 100px;

  border: 0;
  cursor: pointer;

  background: transparent; /* 카드 배경이 담당 */
  box-sizing: border-box;
}

@media (max-width: 1000px) {
    .page-recipe .faq-item .faq-q {
        padding: 15px;
        gap: 10px;
    }
}

.page-recipe .faq-item .faq-q-text-cream,
.page-recipe .faq-item .faq-q-text-garlic,
.page-recipe .faq-item .faq-q-text-bulgogi {
    color: var(--TG_Main, #690742);
    font-family: "novel-display";
    font-size: 24px;
    font-style: normal;
    font-weight: 800;
    line-height: 140%; 
    flex: 1;
    text-align: left;
}

@media (max-width: 1000px) {
    .page-recipe .faq-item .faq-q-text-cream,
    .page-recipe .faq-item .faq-q-text-garlic,
    .page-recipe .faq-item .faq-q-text-bulgogi {
        font-size: 19px;
    }
}


.page-recipe .faq-item.is-open .faq-q-text-cream {
  color: #91ABD8;
}

.page-recipe .faq-item.is-open .faq-q-text-garlic {
  color: #f08300;
}

.page-recipe .faq-item.is-open .faq-q-text-bulgogi {
  color: #B7B707;
}

.page-recipe .faq-q-icon {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}

.page-recipe .faq-q-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: opacity .2s ease;
}

.page-recipe .faq-q-icon .icon-open { opacity: 0; }

@media (max-width: 1000px) {
    .page-recipe .faq-q-icon { width: 28px; height:28px; }
}

.page-recipe .faq-item.is-open .faq-q-icon .icon-closed { opacity: 0; }

.page-recipe .faq-item.is-open .faq-q-icon .icon-open { opacity: 1; }

.page-recipe .faq-item .faq-body {
  width: 100%;
  align-self: stretch;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .32s ease, opacity .20s ease;
  will-change: height;
}

.page-recipe .faq-item.is-open .faq-body {
  opacity: 1;
}

.page-recipe .faq-item .faq-divider {
  width: 100%;
  max-width: calc(var(--content-width, 1200px) - 80px);
  height: 1px;
  margin: 0 auto;
}

.page-recipe .faq-item .faq-divider svg {
  width: 100%;
  height: 1px;
}

.page-recipe .faq-item .faq-a {
  display: flex;
  padding: 28px 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  word-break: keep-all;

  color: var(--TG_Main, #690742);
  font-family: "novel-display";
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%; /* 25.6px */
}

.page-recipe .faq-item .faq-a span {
    font-weight: 800;
}

@media (max-width: 1000px) {
    .page-recipe .faq-item .faq-a {
      padding: 15px;
    }
}

.page-recipe .faq-item .faq-a > * {
  margin-top: 0;
  margin-bottom: 12px;
}

.page-recipe .faq-item .faq-a > *:last-child {
  margin-bottom: 0;
}

.page-recipe .faq-item .faq-a p {
    color: var(--TG_Main, #690742);
    font-family: "novel-display";
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
}

.page-recipe .faq-item .faq-a a {
    font-weight: 800;
    color: var(--TG_Main, #690742);
    border-bottom: 2px solid #690742;
}

@media (max-width: 1000px) {
  .page-recipe .faq-list,
  .page-recipe .faq-item {
    width: 100%;
    box-sizing: border-box;
  }

  .page-recipe .faq-list {
    padding-left: 20px;
    padding-right: 20px;
    gap: 8px;
  }

  /* 카드 자체 패딩을 list에서 줬으니, card 내부는 꽉 차게 */
  .page-recipe .faq-item {
    padding-left: 0;
    padding-right: 0;
  }

  .page-recipe .faq-item .faq-divider {
    padding-left: 10px;
    padding-right: 10px;
    max-width: calc(var(--content-width, 1200px) - 20px);
  }
}

/* Mobile: single video card (disable slider behaviors) */
@media (max-width: 1000px) {
  .page-recipe .recipe-thumbnails {
    display: flex;
    justify-content: center;
  }

  /* 카드 컨테이너 */
  .page-recipe .recipe-thumbnails .galleries.videos {
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    border-radius: 16px;
    border: 2px solid var(--TG_Main, #690742);
    background: #fff;

    overflow: hidden;
    box-sizing: border-box;

    /* 슬라이더 영향 차단 */
    position: static !important;
    transform: none !important;
  }

  /* Flickity가 DOM을 감싸는 경우를 대비해 높이 고정 */
  .page-recipe .recipe-thumbnails .galleries.videos .flickity-viewport,
  .page-recipe .recipe-thumbnails .galleries.videos .flickity-slider {
    height: 100% !important;
  }

  .page-recipe .recipe-thumbnails .galleries.videos .gallery-cell {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: flex-end;
  }

  .page-recipe .recipe-thumbnails .galleries.videos video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 프레임 꽉 채움 */
  }
}

/* Mobile/Tablet: single video card */
@media (max-width: 1000px) {
  /* 좌우 20.5px 여백 확보 */
  .page-recipe .recipe-header .recipe-thumbnails {
    padding-top: 16px;
    padding-left: 20.5px;
    padding-right: 20.5px;
    box-sizing: border-box;
  }

  /* 카드 프레임(바깥) */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos {
    width: 100%;
    height: auto !important;
    aspect-ratio: 9/16;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;

    border-radius: 16px;
    border: 2px solid var(--TG_Main, #690742);

    overflow: hidden;
    box-sizing: border-box;

    /* 슬라이더 영향 차단 */
    position: static !important;
    transform: none !important;

    background: #000 !important;
  }

  /* ✅ 기존에 박혀있는 4px/20px 테두리를 끄는 게 핵심 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .gallery-cell {
    width: 100%;
    height: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
  }

  /* video를 카드에 맞춤 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos video {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: cover !important;
  }

  /* Flickity wrapper가 생기는 경우 대비 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .flickity-viewport,
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .flickity-slider {
    height: 100% !important;
  }
}

/* ------------------------------------------------------------------
   CTA location switch (desktop: header, mobile/tablet: FAQ bottom)
   NOTE: classes are on the .recipe-information-wrap itself:
   - .cta-desktop (in header)
   - .cta-mobile  (in faq)
------------------------------------------------------------------- */

/* default (desktop): show header CTA, hide FAQ CTA */
.page-recipe .recipe-header .recipe-info .recipe-information-wrap.cta-desktop { display: block; }
.page-recipe .faq-section .recipe-information-wrap.cta-mobile { display: none; }

/* mobile/tablet: hide header CTA, show FAQ CTA */
@media only screen and (max-width:1000px) {
  .page-recipe .recipe-header .recipe-info .recipe-information-wrap.cta-desktop { display: none; }
  .page-recipe .faq-section .recipe-information-wrap.cta-mobile { 
        display: block; 
        width:100%; 
        margin-left: 20px;
        margin-right: 20px;
    }
}

/* ------------------------------------------------------------------
   Apply ONLY the button/BUY-IT-HERE styles to the FAQ CTA as well.
   (So moving the block into .faq-section doesn't lose styling.)
------------------------------------------------------------------- */

/* layout */
.page-recipe .faq-section .recipe-information-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

@media only screen and (max-width:1000px) {
  .page-recipe .faq-section .recipe-information-wrap { gap: 16px; }
  .page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons { 
        margin-top: 0;   
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 12px;
    }

  .page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons:last-child {
    margin-bottom: 0;
  }
}

/* button base */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-information-button a {
  display: flex;
  width: 100%;
  height: 76px;
  padding: 16px 0;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  color: var(--TG_Main, #690742);
  font-family: "novel-display";
  font-size: 20px;
  font-weight: var(--font-weight-medium);
  line-height: 140%;
  letter-spacing: 1px;

  border-radius: 8px;
  border: 3px solid var(--TG_Main, #690742);
}

/* PRODUCT DETAIL button */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-information-button .view-product-detail {
  background: var(--TG_Main, #690742);
  color: var(--TG_Sub, #fef3dd);
}

/* mobile button sizing (same as header rules) */
@media only screen and (max-width:1000px) {
  .page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-information-button a {
    width: 100%;
    height: 60px;
    color: #FEF3DD;
    background: var(--TG_Main, #690742);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
  }
}

/* hover (desktop only) */
@media only screen and (hover:hover) {
  .page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-information-button a:hover {
    color: #FEF3DD;
    background: var(--TG_Main, #690742);
  }
}

/* BUY IT HERE list */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists {
  display: none;
  margin-top: 8px;
  max-width: 100%;
  padding: 20px 0;
}

.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item {
  width: 33.333%;
  height: 80px;
}

@media only screen and (max-width:1000px) {
  .page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item {
    width: 50%;
  }
}

/* tooltip / hover bg */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item:before {
  background-image: url(../assets/img/product/img-buy-it-here-hover.svg);
  left: 50%;
  transform: translateX(-50%);
  top: -32px;
}

/* store logos */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.amazon:after { background-image: url(../assets/img/product/logo-amazon.svg); }
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.kroger:after { background-image: url(../assets/img/product/logo-kroger.svg); }
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.naver:after { background-image: url(../assets/img/product/logo-naver.svg); }
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.coupang:after { background-image: url(../assets/img/product/logo-coupang.svg); }
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons .recipe-buy-it-lists .online-item.kurly:after { background-image: url(../assets/img/product/logo-kurly.svg); }

/* active state */
.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons.active .recipe-information-button a {
  color: #fff;
  background: var(--TG_Main, #690742);
}

.page-recipe .faq-section .recipe-information-wrap .recipe-information-buttons.active .recipe-buy-it-lists {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

/* 기본: PC */
.faq-wave-mo {
  display: none;
}

.faq-wave-pc {
  display: block;
}

/* Mobile / Tablet */
@media (max-width: 1000px) {
  .faq-wave-pc {
    display: none;
  }

  .faq-wave-mo {
    display: block;
  }
}

/* 기본: PC */
.faq-divider-mo {
  display: none;
}

.faq-divider-pc {
  display: block;
}

/* Mobile / Tablet */
@media (max-width: 1000px) {
  .faq-divider-pc {
    display: none;
  }

  .faq-divider-mo {
    display: block;
  }
}

/* recipes list = products list clone (from app.css) */
.recipes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 56px 0;
}

@media only screen and (max-width:1000px) {
  .recipes-list { gap: 40px 0; }
}

.recipes-list .recipe-item {
  width: 25%;
  position: relative;
}

@media only screen and (max-width:1000px) {
  .recipes-list .recipe-item { width: 50%; }
}

/* 클릭 영역 (recipe-item 템플릿에 맞춰서 recipe-link를 쓰되,
   기존 product-link도 같이 커버해두면 안전) */
.recipes-list .recipe-item .recipe-link,
.recipes-list .recipe-item .product-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* 썸네일 (템플릿 클래스가 recipe-thumbnail일 수도 있어서 같이 커버) */
.recipes-list .recipe-item .recipe-thumbnail,
.recipes-list .recipe-item .product-thumbnail {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 360/440;
  overflow: hidden;
}

.recipes-list .recipe-item .recipe-thumbnail img,
.recipes-list .recipe-item .product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all var(--transition);
}

/* hover-image 패턴이 있으면 그대로 지원 */
.recipes-list .recipe-item .recipe-thumbnail img.hover-image,
.recipes-list .recipe-item .product-thumbnail img.hover-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

/* Hover image swap — single rule (no double-apply) */
@media only screen and (hover:hover) {
  .recipes-list .recipe-item:hover :is(.recipe-thumbnail, .product-thumbnail) .hover-image {
    opacity: 1;
  }

  .recipes-list .recipe-item:hover :is(.recipe-thumbnail, .product-thumbnail) .normal-image {
    opacity: 0;
  }
}

/* 텍스트 정보 영역도 동일 패턴으로 커버 */
.recipes-list .recipe-item .recipe-info,
.recipes-list .recipe-item .product-info {
  padding-top: 24px;
  padding-left: 38px;
  padding-right: 38px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media only screen and (max-width:1000px) {
  .recipes-list .recipe-item .recipe-info,
  .recipes-list .recipe-item .product-info {
    padding-top: 16px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

.recipes-list .recipe-item .recipe-info .recipe-title,
.recipes-list .recipe-item .product-info .product-title {
  font-family: "novel-display";
  font-weight: 800;
  color: var(--TG_Main, #690742);
  font-size: 24px;
  line-height: 140%;
  text-transform: capitalize;
}

@media only screen and (max-width:1000px) {
  .recipes-list .recipe-item .recipe-info .recipe-title,
  .recipes-list .recipe-item .product-info .product-title {
    font-size: 16px;
  }
}

.recipe-list-header {
    position: relative;
    margin-top: 16px;
    display: flex;
    align-items: flex-start; /* 세로 중앙 정렬 */
    justify-content: center; /* 좌-중-우 간격 분산 */
    width: 100%;
}

/* 중앙 텍스트 정렬 */
.recipe-list-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 33px;
    margin-left: 41px;
    margin-top: 70px;
    margin-right: 39px;
    margin-bottom: 13px;
}

.header-svg-left {
    margin-top: 18px;
}

/* Mobile / Tablet */
@media (max-width: 1000px) {
    .header-svg-left {
        display: none;
    }
}

.header-svg-right {
    margin-right: 68px;
}

/* 좌측 SVG 크기 */
.header-svg-left img {
    width: 165px;
    height: 163.828px;
    flex-shrink: 0; 
}

/* 우측 SVG 크기 */
.header-svg-right img {
    width: 97px;
    height: 97px;
    aspect-ratio: 1/1;
    flex-shrink: 0; 
}

/* SVG 내부 이미지 태그가 있다면 꽉 차게 설정 */
.header-svg-left svg, .header-svg-right svg {
    width: 100%;
    height: 100%;
}

.page-recipes .recipe-list-header .recipe-list-title {
    color: var(--TG_Main, #690742);
    text-align: center;
    font-family: "novel-display";
    font-size: 80px;
    font-style: normal;
    font-weight: 800;
    line-height: 90%;
}

.page-recipes .recipe-list-header .recipe-list-subtitle {
    color: var(--TG_Flavor01, #E95157);
    text-align: center;
    font-family: "novel-display";
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: 90%;
}

@media (max-width: 1000px) {
  .recipe-list-header {
    position: relative; /* absolute 기준점 */
  }

  /* 왼쪽 장식 숨김 */
  .recipe-list-header .header-svg-left {
    display: none;
  }

  /* 오른쪽 이미지는 아래로 */
  .recipe-list-header .header-svg-right {
    position: absolute;
    right: -30px;
    top: 80%;
    transform: translateY(-50%);
  }

  .recipe-list-header .header-svg-right img {
    width: 46px;
    height: 46px;
  }

  .page-recipes .recipe-list-header .recipe-list-title {
    font-size: 40px;
  }

  .page-recipes .recipe-list-header .recipe-list-subtitle {
    font-size: 20px;
  }

  /* 텍스트는 위 */
  .recipe-list-header .recipe-list-content {
    gap: 16px;
    margin-top: 14px;
    margin-bottom: 0;
  }
}

.page-recipes .recipe-info .recipe-meta-text {
    color: var(--TG_Flavor01, #E95157);
    font-family: "novel-display";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
}

.page-recipes .recipe-info .recipe-meta {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.page-recipes .recipe-info .recipe-meta-icon {
    width: 20px;
    height: 20px;
}

.page-recipes .recipe-info .recipe-meta-icon img {
    width: 100%;
    height: 100%;
}

@media (max-width: 1000px) {
    .page-recipes .recipe-info .recipe-meta-text {
        font-size: 14px;
    }

    .page-recipes .recipe-info .recipe-meta-icon {
        width: 16px;
        height: 16px;
    }
}

/* 260122  */

/* =========================
   Plyr (Recipe Video)
   - Brand color: #690742
   - Mobile big center play
   - Poster + overlay
   ========================= */

.page-recipe .recipe-video {
  position: relative;
  border-radius: 0px;
  overflow: hidden;
  background: #000; /* 로딩 시 깜빡임 방지 */
}

/* Plyr 컨테이너도 라운딩 맞추기 */
.page-recipe .recipe-video .plyr {
  border-radius: 0px;
}

/* 브랜드 컬러 적용: 진행바/볼륨바/포커스 링 */
.page-recipe .plyr {
  --plyr-color-main: #690742;
}

/* 컨트롤 가독성 살짝 개선 */
.page-recipe .plyr--video .plyr__controls {
  background: linear-gradient(transparent, rgba(0,0,0,.55));
}

/* 중앙 큰 재생 버튼(play-large)만 커스텀 */
.page-recipe .plyr--video .plyr__control--overlaid svg{
  display: none;
}

.page-recipe .plyr--video .plyr__control--overlaid{
  width: 88px;
  height: 88px;
  border-radius: 999px;
  background: rgba(105, 7, 66, .88);

  background-image: url('(../assets/img/recipe/play-icon.svg'); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
}
/* ===== Poster + Overlay =====
   - poster는 video의 poster 속성으로 보여짐
   - 아래 overlay는 "플레이 유도" 레이어
*/
.page-recipe .plyr-wrapper::after{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.10), rgba(0,0,0,.45));
  opacity: 1;
  transition: opacity .18s ease;
  pointer-events: none;
}

/* 재생 중이면 overlay 제거 */
.page-recipe .plyr-wrapper.is-playing::after{
  opacity: 0;
}

/* ===== Big Center Play Button (Mobile) ===== */
@media (max-width: 1000px){
  /* 큰 중앙 버튼 자체를 키우기 */
  .page-recipe .plyr--video .plyr__control--overlaid{
    width: 88px;
    height: 88px;
    border-radius: 999px;
    background: rgba(105, 7, 66, .88); /* brand tint */
  }

  .page-recipe .plyr--video .plyr__control--overlaid svg{
    width: 30px;
    height: 30px;
  }

  /* 중앙 버튼이 포스터 위에서 더 잘 보이게 */
  .page-recipe .plyr-wrapper::after{
    opacity: 1;
  }
}

/* Desktop hover 시 조금 더 선명 */
@media (hover:hover){
  .page-recipe .plyr--video .plyr__control--overlaid:hover{
    background: rgba(105, 7, 66, 1);
  }
}

/* =========================
   Vertical video fullscreen fix
   ========================= */

/* 세로 영상: fullscreen에서 높이 기준으로 표시 */
.page-recipe .plyr--fullscreen .plyr__video-wrapper video,
.page-recipe .plyr--fullscreen video {
  height: 100vh !important;  /* 세로 100% */
  width: auto !important;    /* 가로는 비율 유지 */
  max-height: 100vh;
  max-width: 100vw;

  object-fit: contain;       /* 잘리지 않게 */
  margin: auto;
  display: block;
}

/* 여백은 검정 배경으로 */
.page-recipe .plyr--fullscreen {
  background: #000;
}

/* 세로 영상 컨테이너: 비율 고정 */
.page-recipe .recipe-video {
  width: 100%;
  aspect-ratio: 9 / 16;   /* 2160x3840 세로 비율 */
  border-radius: 0px;
  overflow: hidden;
  background: #000;
}

/* Plyr 래퍼도 컨테이너를 꽉 채우게 */
.page-recipe .recipe-video .plyr,
.page-recipe .recipe-video .plyr__video-wrapper {
  width: 100%;
  height: 100%;
}

/* ⭐핵심: 재생/정지/포스터 모두 동일하게 적용되도록 video에 강제 */
.page-recipe .recipe-video video {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: contain;  /* 잘림 없이 다 보이려면 contain으로 변경 */
}

@media (max-width: 1000px) {

  /* 프레임은 유지하되, 정렬용 flex를 제거 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos{
    display: block !important;          /* 기존 flex 제거 */
    justify-content: initial !important;
    align-items: initial !important;
  }

  /* 내부 셀도 아래 정렬 제거 + 꽉 채우기 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .gallery-cell{
    display: block !important;          /* 기존 flex 제거 */
    align-items: initial !important;
    height: 100% !important;
  }

  /* plyr 래퍼/비디오 래퍼/비디오를 전부 프레임 높이에 맞게 */
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .recipe-video,
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .plyr,
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos .plyr__video-wrapper,
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos video{
    height: 100% !important;
    display: block;
  }
}

/* ===== VIDEO CORNER FIX (SINGLE SOURCE) ===== */

/* PC */
.page-recipe .recipe-header .recipe-thumbnails .galleries.videos video {
  clip-path: inset(0 round 20px);
  -webkit-clip-path: inset(0 round 0);
}

/* Mobile */
@media (max-width: 1000px) {
  .page-recipe .recipe-header .recipe-thumbnails .galleries.videos video {
    clip-path: inset(0 round 16px);
    -webkit-clip-path: inset(0 round 0);
  }
}

/* 포스터 레이어가 탭을 먹지 않게 */
.page-recipe .recipe-video .plyr__poster {
  pointer-events: none;
}

@media only screen and (hover:hover) {
  .recipes-list .recipe-item :is(.recipe-thumbnail, .product-thumbnail):hover .hover-image {
    opacity: 1;
  }

  .recipes-list .recipe-item :is(.recipe-thumbnail, .product-thumbnail):hover .normal-image {
    opacity: 0;
  }
}

/* =========================================================
   recipes-list hover flicker fix
   - Fade in on hover
   - Snap back instantly on unhover
========================================================= */

/* 1) opacity만 전환하도록 제한 (all 금지) */
.recipes-list .recipe-item :is(.recipe-thumbnail, .product-thumbnail) img {
  transition-property: opacity;
  transition-duration: .18s;
  transition-timing-function: ease;
}

/* 2) 기본 상태 */
.recipes-list .recipe-item :is(.recipe-thumbnail, .product-thumbnail) .hover-image { opacity: 0; }
.recipes-list .recipe-item :is(.recipe-thumbnail, .product-thumbnail) .normal-image { opacity: 1; }

/* 3) hover-in: 부드럽게 */
@media (hover:hover) {
  .recipes-list .recipe-item:hover :is(.recipe-thumbnail, .product-thumbnail) .hover-image { opacity: 1; }
  .recipes-list .recipe-item:hover :is(.recipe-thumbnail, .product-thumbnail) .normal-image { opacity: 0; }

  /* 4) hover-out: 즉시 원복 (이전 카드 “반짝” 제거 핵심) */
  .recipes-list .recipe-item:not(:hover) :is(.recipe-thumbnail, .product-thumbnail) img {
    transition-duration: 0s;
  }
}