@charset "utf-8";
/* ============================================================
   CHIPOTLE VALUES PAGE — common_values.css
   ============================================================ */
/* ─── Base ─── */
#chipotle-values-wrap {
    width: 100%;
    background-color: #fff;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
#chipotle-values-wrap * {
    box-sizing: border-box;
}
#chipotle-values-wrap img {
    display: block;
    max-width: 100%;
}
/* ============================================================
   [SECTION 1] Food Has The Power
   ============================================================ */
.food-has-the-power {
    width: 100%;
    min-height: 2198px;
    position: relative;
    background: url('/assets/images/values/background-tile.jpg') repeat;
    overflow: hidden;
}
.food-has-the-power__power-animation {
    display: flex;
    justify-content: center;
    padding-top: 100px;
}
.food-change-world-img.comp1 {
    width: 881px;
    height: 431px;
}
.food-change-world-img.comp1 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.spacer-large {
    width: 100%;
    height: 180px;
}
.grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
}
/* Bowl — left column */
.burrito_section {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 2.5%;
}
.food-has-the-power__hero-bowl {
    width: 770px;
    height: 624px;
}
.food-has-the-power__hero-bowl img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* Text — right column row 1 */
.food-has-the-power__subtext {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 2%;
}
.food-has-the-power__subtext_title_img {
    width: 531px;
    height: 50px;
    margin-bottom: 30px;
}
.food-has-the-power__subtext_text {
    max-width: 580px;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: -0.5px;
    word-break: keep-all;
    color: #452207;
}
/* Burrito — right column row 2 */
.food-has-the-power__hero-burrito {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    display: flex;
    justify-content: flex-start;
    margin-top: -180px;
    margin-bottom: -150px;
    margin-left: -110px;
    z-index: 20;
    position: relative;
}
.food-has-the-power__hero-burrito_img {
    width: 806px;
    height: 681px;
    max-width: none;
    object-fit: contain;
}
/* Thought animation */
.food-has-the-power__thought_animation {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    width: 940px;
    height: 542px;
    margin: -70px auto 0 auto;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 5;
}
.food_power_2_image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* ============================================================
   [SECTION 2] Ingredients — Fresh Food video
   ============================================================ */
.our-values-ingredients {
    width: 100%;
    background-color: #fff;
}
.fresh-food__video-section {
    width: 100%;
    position: relative;
    height: 900px;
    overflow: hidden;
    background-color: #000;
}
.fresh-food__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}
.fresh-food__video-content {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 8% 8% 8%;
}
.fresh-food__headline-img {
    width: 700px;
    max-width: 70%;
    flex-shrink: 0;
}
.fresh-food__headline-img img {
    width: 100%;
    height: auto;
}
/* NO 텍스트 2개 — 가로 나란히 중앙 */
.fresh-food__text-area {
    display: flex;
    flex-direction: row;
    gap: 100px;
    align-items: center;
    justify-content: center;
}
.no_logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
.no-img {
    width: 80px;
    height: auto;
    flex-shrink: 0;
}
.no-text p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    margin: 0;
}
.no_logo {
    display: flex;
    align-items: center;
    gap: 20px;
}
.no-img {
    width: 70px;
    height: auto;
    flex-shrink: 0;
}
.no-text p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
    margin: 0;
}
/* ============================================================
   [SECTION 3] 53 Ingredients
   ============================================================ */
.real-ingredients {
    width: 100%;
    background: #ffffff;
    padding: 80px 0 60px;
}
.real-ingredients__intro {
    text-align: center;
    padding: 0 20px 60px;
}
.real-ingredients__headline {
    width: 700px;
    max-width: 90%;
    margin: 0 auto 30px;
}
.real-ingredients__headline img {
    width: 100%;
    height: auto;
}
/* godomall 이 함께 불러오는 원본 clientlib/app.css 의 동일 클래스명 규칙
   (.real-ingredients{overflow:hidden} 등)이 헤드라인 GIF 를 고정 높이로
   자르는 것을 무력화. height/overflow 를 !important 로 강제 해제. */
#chipotle-values-wrap .real-ingredients,
#chipotle-values-wrap .real-ingredients__intro,
#chipotle-values-wrap .real-ingredients__headline {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}
#chipotle-values-wrap .real-ingredients__headline img {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100%;
}
.real-ingredients__subtitle {
    font-size: 22px;
    color: #452207;
    font-weight: 500;
    margin: 0 0 10px;
}
.real-ingredients__hint {
    font-size: 18px;
    color: #999;
    margin: 0;
    font-style: italic;
}
/* ── Scrolling rows ── */
.real-ingredients__list-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}
/*
  overflow:hidden 을 row 가 아닌 별도 클리핑 레이어에 적용.
  row 자체에 overflow:hidden 이 있으면 pointer-events 가 clip 되어
  2·3번째 줄 hover가 안 잡히는 문제가 생김.
  → row 는 overflow visible, 내부 track 에만 hidden 처리.
*/
.real-ingredients__row {
    width: 100%;
    overflow: visible;      /* ← 핵심: visible 로 변경 */
    padding: 8px 0;
    position: relative;
}
/* 실제 클리핑은 track 에서 */
.ingredients-scroll-track {
    width: 100%;
    overflow: hidden;
}
/* hover 시 해당 row 의 track 안 inner 가 멈춤.
   reverse 줄은 animation 단축속성이 play-state 를 running 으로 덮으므로
   .reverse:hover 셀렉터(우선순위 더 높음)를 함께 지정해야 멈춘다. */
.real-ingredients__row:hover .ingredients-inner,
.real-ingredients__row.reverse:hover .ingredients-inner {
    animation-play-state: paused;
}
.ingredients-inner {
    display: flex;
    gap: 0;
    width: max-content;
    animation: scrollLeft 60s linear infinite;
}
.real-ingredients__row.reverse .ingredients-inner {
    animation: scrollRight 60s linear infinite;
}
@keyframes scrollLeft {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes scrollRight {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
/* ── 개별 재료 카드 ── */
.Ingredient {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 160px;
    height: 200px;
    flex-shrink: 0;
    position: relative;
    cursor: default;
    padding-bottom: 0;
}
/*
  동그란 배경 원: ::before 로 이미지 뒤에 원을 깔아줌.
  이미지 figure 자체에 background-color 를 쓰면
  background-image 와 겹쳐서 위치가 어긋남.
*/
.Ingredient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background-color: #f7f2ed;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}
.Ingredient:hover::before {
    opacity: 1;
}
/* 재료 이미지 */
.Ingredient__img {
    width: 152px;
    height: 152px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.2s ease;
}
.Ingredient:hover .Ingredient__img {
    transform: translateY(-5px);
}
/* 재료 이름: 기본 숨김 → hover 시 fade-in */
.Ingredient__text {
    font-size: 14px;
    color: #777;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.3;
    position: absolute;
    top: 160px;            /* 원(152px) 아래 8px 여백 */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 2;
    margin-top: 0;
}
.Ingredient:hover .Ingredient__text {
    opacity: 1;
}
/* Yellow Onion / Red Onion — 원형 배경 없음 */
.Ingredient.no-circle:hover::before {
    opacity: 0;
}
.real-ingredients__see-all {
    text-align: center;
    margin-top: 50px;
    padding-bottom: 20px;
}
.see-all-link {
    font-size: 18px;
    font-weight: 700;
    color: #452207;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #452207;
    padding-bottom: 4px;
    transition: opacity 0.2s;
}
.see-all-link:hover { opacity: 0.7; }
/* ============================================================
   [SECTION 4] Sustainability video (Being Committed)
   ============================================================ */
.sustainability-video-wrap {
    width: 100%;
    height: 1000px;
    position: relative;
    overflow: hidden;
    background-color: #000;
}
.background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
}
.video-overlay-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 40px;
}
/* 좌우 배치 컨테이너 */
.video-overlay-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 60px;
}
.video-headline {
    flex: 0 0 auto;
    width: 500px;
    max-width: 50%;
}
.video-headline img {
    width: 100%;
    height: auto;
}
.video-description {
    flex: 0 0 auto;
    max-width: 480px;
    text-align: left;
}
.video-description p {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    margin-bottom: 24px;
}
.video-sub-title {
    width: 320px;
    max-width: 100%;
    margin-top: 40px;
}
.video-sub-title img {
    width: 100%;
    height: auto;
}
/* ============================================================
   [SECTION 5] Fighting For Our Planet
   ============================================================ */
.fighting-for-our-planet {
    width: 100%;
    background: url('/assets/images/values/background-tile.jpg') repeat;
    position: relative;
}
.fighting-for-our-planet__wrapper {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 20px 100px;
    text-align: center;
}
/* GIF 애니메이션 — 원본 크기 918x384 */
.fighting-for-our-planet__animation {
    width: 918px;
    max-width: 90%;
    margin: 0 auto 70px;
}
.fighting-for-our-planet__animation img {
    width: 100%;
    height: auto;
}
.fighting-for-our-planet__text-area {
    display: flex;
    justify-content: center;
    gap: 120px;
    flex-wrap: wrap;
    margin-bottom: 70px;
}
.fighting-for-our-planet__waste,
.fighting-for-our-planet__pilot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 385px;
    max-width: 90%;
}
.planet-label {
    font-size: 24px;
    font-weight: 900;
    color: #452207;
    margin-bottom: 24px;
    line-height: 1.2;
}
/* 쓰레기통 아이콘 — 원본 385x159 */
.fighting-for-our-planet__waste .planet-icon {
    width: 385px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
/* 지구 아이콘 — 원본 208x172 */
.fighting-for-our-planet__pilot .planet-icon {
    width: 208px;
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.planet-text p {
    font-size: 20px;
    font-weight: 500;
    color: #452207;
    line-height: 1.4;
    margin: 0;
    text-align: center;
}
.fighting-for-our-planet__cta { text-align: center; }
.planet-link {
    font-size: 18px;
    font-weight: 700;
    color: #452207;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-bottom: 2px solid #452207;
    padding-bottom: 4px;
    transition: opacity 0.2s;
}
.planet-link:hover { opacity: 0.7; }
/* Tear divider */
.background-tear {
    content: '';
    display: block;
    width: calc(100% + 2rem);
    height: 160px;
    margin-left: -1rem;
    background-image: url('/assets/images/values/tear-desktop.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
}
/* ============================================================
   스크롤 연동 떠다니는 그릇 (floating bowl)
   - treating-people-right 섹션 삭제 후에도 유지되는 요소
   - 위치는 #chipotle-values-wrap 기준 absolute, JS 가 top/left 제어
   ============================================================ */
.floating-bowl {
    position: absolute;
    width: 768px;
    height: auto;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.floating-bowl img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}
/* ============================================================
   [SECTION 7] Cultivate A Better World + Order
   ============================================================ */
.order-section { width: 100%; }
.cultivate-a-better-world {
    background: url('/assets/images/values/background-tile.jpg') repeat;
    /* 그릇이 내려앉을 공간 확보 */
    padding: 200px 20px 0;
    text-align: center;
    position: relative;
}
.cultivate__animation {
    width: 766px;
    max-width: 90%;
    margin: 0 auto 0;
    transition: opacity 0.1s ease;
}
.cultivate__animation img {
    width: 766px;
    height: 435px;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.cultivate__text {
    font-size: 26px;
    font-weight: 900;
    color: #452207;
    max-width: 700px;
    margin: 290px auto 60px;
    line-height: 1.4;
}
.cultivate-tear {
    margin-top: 0;
}
.real-x3 {
    background-color: #fff;
    padding: 80px 20px;
    text-align: center;
}
.real-x3__headlines {
    width: 700px;
    max-width: 90%;
    margin: 0 auto 40px;
    height: auto;
}
.real-x3__logo {
    width: 300px;
    max-width: 60%;
    margin: 0 auto 50px;
    height: auto;
}
.real-x3__cta { text-align: center; }
.order-btn {
    display: inline-block;
    background-color: #6B3A2A;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    font-family: 'Trade Gothic', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 20px 60px;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, transform 0.1s;
}
.order-btn:hover {
    background-color: #452207;
    transform: translateY(-2px);
}
/* Shared arrow icon */
.arrow-icon {
    font-size: 1.1em;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1300px) {
    .food-has-the-power {
        min-height: auto;
        overflow: visible;
    }
    .grid-box {
        display: flex;
        flex-direction: column;
    }
    /* 원본 모바일 순서: 제목+본문 → 볼 → THOUGHT GIF → 부리토 */
    .food-has-the-power__subtext       { order: 1; }
    .burrito_section                   { order: 2; }
    .food-has-the-power__thought_animation { order: 3; }
    .food-has-the-power__hero-burrito  { order: 4; }
    .burrito_section {
        justify-content: center;
        padding-right: 0;
    }
    .food-has-the-power__hero-bowl {
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        overflow: hidden;
    }
    #chipotle-values-wrap .food-has-the-power__hero-bowl img {
        display: block;
        width: 120%;          /* 볼 크기 (값 조절 가능) */
        max-width: none;
        height: auto;
        margin-left: -30%;    /* 왼쪽을 컨테이너 밖으로 밀어 잘림. 오른쪽 끝 맞추려면 -(width-100%) */
    }
    .food-has-the-power__subtext {
        padding: 40px 20px;
        align-items: center;
        text-align: center;
    }
    .food-has-the-power__subtext_title_img {
        width: 100%;
        max-width: 531px;
        height: auto;
    }
    .food-has-the-power__subtext_text {
        max-width: 100%;
        font-size: 20px;
    }
    .food-has-the-power__hero-burrito {
        justify-content: center;
        margin: -30px auto -90px auto;   /* 하단 -90px: 부리토 아래쪽이 다음 섹션 뒤로 들어가 가려짐 (값 조절 가능) */
    }
    /* 첫 섹션 전체를 아래 레이어로, 다음 Fresh 섹션을 위 레이어로
       → 부리토(첫 섹션 안)는 항상 Fresh 섹션 뒤로 들어감 */
    .food-has-the-power {
        z-index: 1;
    }
    .our-values-ingredients {
        position: relative;
        z-index: 2;
    }
    .food-has-the-power__hero-burrito_img {
        width: 100%;
        max-width: 600px;
        height: auto;
    }
    .food-has-the-power__thought_animation {
        width: 100%;
        max-width: 700px;
        height: auto;
        margin: 0 auto 80px auto;   /* 아래쪽 여백 (값 조절 가능) */
    }
    .sustainability-video-wrap { height: 700px; }
    .video-overlay-inner { flex-direction: column; gap: 30px; }
    .video-headline { width: 360px; max-width: 90%; }
    .video-description { text-align: center; }
    .video-sub-title { margin: 30px auto 0; }
    .fresh-food__video-section { height: 700px; }
    .fresh-food__video-content { padding: 40px 5%; }
    .fresh-food__headline-img { width: 360px; max-width: 70%; }
    .fresh-food__text-area { gap: 30px; }
    .no-text p { font-size: 17px; }
    /* 스크롤 연동 떠다니는 그릇: 모바일에서도 내려오게 표시하고, 원본처럼 크기 축소 */
    .floating-bowl { display: block !important; width: 300px; }
}
@media (max-width: 768px) {
    .food-has-the-power__power-animation { padding-top: 50px; }
    .food-change-world-img.comp1 { width: 100%; height: auto; }
    .spacer-large { height: 60px; }
    .sustainability-video-wrap { height: 500px; }
    .fresh-food__video-section { height: 500px; }
    .video-description p { font-size: 17px; }
    .video-sub-title { width: 80%; }
    .real-x3__headlines { width: 90%; }
    .order-btn { font-size: 18px; padding: 16px 40px; }
    .fighting-for-our-planet__text-area { flex-direction: column; align-items: center; gap: 50px; }
}
/* ============================================================
   [추가] Being Committed  —  풀폭 비디오 + 번역 텍스트 + Sustainability 링크
   - 원본 clientlib/app.css 와의 클래스 충돌 방지를 위해
     고유 클래스명(.values-committed*) 사용 + #chipotle-values-wrap 로 스코프
   ============================================================ */
#chipotle-values-wrap .values-committed {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #000;   /* 비디오 로드 전 배경 */
}
#chipotle-values-wrap .values-committed__video {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
#chipotle-values-wrap .values-committed__content {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    min-height: 760px;
    margin: 0 auto;
    padding: 100px 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}
/* 좌: 손글씨 헤드라인 GIF */
#chipotle-values-wrap .values-committed__headline {
    flex: 0 0 auto;
    width: 46%;
    max-width: 560px;
}
#chipotle-values-wrap .values-committed__headline img {
    width: 100%;
    height: auto;
}
/* 우: 번역 텍스트 + 링크 */
#chipotle-values-wrap .values-committed__text {
    flex: 0 0 auto;
    width: 46%;
    max-width: 520px;
    color: #fff;
    text-align: left;
}
#chipotle-values-wrap .values-committed__text p {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    text-shadow: 0 2px 10px rgba(0,0,0,0.75);  /* 비디오 위 가독성 */
    margin: 0 0 20px;
    word-break: keep-all;                       /* 한글 어절 단위 줄바꿈 */
}
#chipotle-values-wrap .values-committed__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: 2px solid #fff;
    padding-bottom: 4px;
    transition: opacity 0.2s;
}
#chipotle-values-wrap .values-committed__link:hover { opacity: 0.7; }

/* ── 반응형 (기존 페이지와 동일한 1300 / 768 브레이크포인트) ── */
@media (max-width: 1300px) {
    #chipotle-values-wrap .values-committed__content {
        flex-direction: column;
        min-height: 0;
        gap: 40px;
        padding: 70px 24px;
        text-align: center;
    }
    #chipotle-values-wrap .values-committed__headline {
        width: 80%;
        max-width: 460px;
    }
    #chipotle-values-wrap .values-committed__text {
        width: 100%;
        max-width: 560px;
        text-align: center;
    }
    #chipotle-values-wrap .values-committed__link { margin-top: 8px; }
}
@media (max-width: 768px) {
    #chipotle-values-wrap .values-committed__text p { font-size: 16px; }
    #chipotle-values-wrap .values-committed__link { font-size: 16px; }
}