/* =========================================
   Diet Page
========================================= */

.diet-page {
    background: #f8f8f6;
    color: #111;
}


/* =========================================
   Diet Hero
========================================= */

.diet-hero {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.diet-hero__inner {
    width: min(1440px, calc(100% - 96px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;
    gap: 40px;
    padding: 100px 0 80px;
    position: relative;
}

/* ---------- Content (Left) ---------- */
.diet-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
}

/* ---------- Eyebrow ---------- */
.diet-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    color: #777;
}

    .diet-hero__eyebrow span {
        width: 48px;
        height: 1px;
        background: #bbb;
    }

    .diet-hero__eyebrow em {
        font-style: italic;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

/* ---------- Title ---------- */
.diet-hero__title {
    margin: 0 0 28px;
    color: #111;
}

/* ---------- Divider ---------- */
.diet-hero__divider {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    color: #bbb;
}

    .diet-hero__divider span {
        width: 32px;
        height: 1px;
        background: #bbb;
    }

    .diet-hero__divider i {
        font-style: normal;
    }

/* ---------- Mobile Visual ---------- */
.diet-hero__visual-mobile {
    display: none;
}

/* ---------- Description ---------- */
.diet-hero__desc {
    margin: 0 0 36px;
    color: #333;
    line-height: 1.9;
}

/* ---------- Button ---------- */
.diet-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: fit-content;
    min-width: 300px;
    height: 66px;
    padding: 0 30px 0 34px;
    border: 1.5px solid #111;
    background: rgba(255, 255, 255, 0.72);
    color: #111;
    text-decoration: none;
    margin-bottom: 20px;
    transition: 0.24s ease;
}

    .diet-hero__btn:hover {
        background: #111;
        color: #fff;
    }

.diet-hero__btn-arrow {
    transform: translateY(-1px);
    transition: transform 0.2s ease;
}

.diet-hero__btn:hover .diet-hero__btn-arrow {
    transform: translateX(4px) translateY(-1px);
}

/* ---------- Tags ---------- */
.diet-hero__tags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #777;
}

    .diet-hero__tags img {
        flex-shrink: 0;
        filter: grayscale(1);
        opacity: 0.6;
    }

/* ---------- Visual (PC) ---------- */
.diet-hero__visual {
    position: relative;
    z-index: 2;
    align-self: stretch;
    overflow: hidden;
    pointer-events: none;
}

    .diet-hero__visual img {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: min(900px, 64vw);
        max-width: none;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        filter: grayscale(1);
    }

.only-pc {
    display: block;
}


/* =========================================
   Responsive — 1180px
========================================= */

@media (max-width: 1180px) {

    .diet-hero__inner {
        width: min(100% - 56px, 1100px);
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .diet-hero__btn {
        min-width: 260px;
        gap: 32px;
    }
}


/* =========================================
   Responsive — 900px (1단 전환)
========================================= */

@media (max-width: 900px) {

    .diet-hero {
        min-height: auto;
    }

    .diet-hero__inner {
        width: 100%;
        display: block;
        padding: 32px 0 56px;
    }

    .diet-hero__content {
        width: min(100% - 40px, 640px);
        margin: 0 auto;
    }

    /* PC 이미지 숨김 */
    .diet-hero__visual {
        display: none;
    }

    /* 모바일 이미지 — 제목+디바이더 다음, 설명 전 */
    .diet-hero__visual-mobile {
        display: block;
        width: calc(100% + 40px);
        height: clamp(320px, 44svh, 440px);
        margin: 0 -20px 32px;
        overflow: hidden;
    }

        .diet-hero__visual-mobile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center top;
            filter: grayscale(1);
        }

    .diet-hero__eyebrow {
        margin-bottom: 20px;
    }

    .diet-hero__title {
        margin-bottom: 20px;
    }

    .diet-hero__divider {
        margin-bottom: 0;
    }

    .only-pc {
        display: none;
    }
}


/* =========================================
   Responsive — 768px
========================================= */

@media (max-width: 768px) {

    .diet-hero__inner {
        padding: 28px 0 48px;
    }

    .diet-hero__content {
        width: min(100% - 36px, 560px);
    }

    .diet-hero__visual-mobile {
        width: calc(100% + 36px);
        height: clamp(300px, 40svh, 400px);
        margin-left: -18px;
    }

    .diet-hero__btn {
        width: 100%;
        min-width: 0;
        height: 60px;
        gap: 12px;
        justify-content: space-between;
        padding: 0 24px;
    }
}


/* =========================================
   Responsive — 480px
========================================= */

@media (max-width: 480px) {

    .diet-hero__content {
        width: min(100% - 32px, 480px);
    }

    .diet-hero__visual-mobile {
        width: calc(100% + 32px);
        height: clamp(280px, 38svh, 380px);
        margin-left: -16px;
    }

    .diet-hero__btn {
        height: 56px;
    }
}


/* =========================================
   Responsive — 380px
========================================= */

@media (max-width: 380px) {

    .diet-hero__content {
        width: min(100% - 24px, 380px);
    }

    .diet-hero__visual-mobile {
        width: calc(100% + 24px);
        height: clamp(260px, 36svh, 340px);
        margin-left: -12px;
    }
}


/* =========================================
   Diet Formula
========================================= */

.diet-formula {
    background: #fff;
    padding: 120px 0;
    overflow: hidden;
}

.diet-formula__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.48fr;
    grid-template-areas:
        "head visual"
        "grid grid";
    align-items: start;
    gap: 56px 40px;
}

/* ---------- Head ---------- */
.diet-formula__head {
    grid-area: head;
}

.diet-formula__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    color: #777;
}

    .diet-formula__eyebrow span {
        width: 40px;
        height: 1px;
        background: #bbb;
    }

    .diet-formula__eyebrow em {
        font-style: italic;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

.diet-formula__title {
    margin: 0 0 20px;
    color: #111;
}

.diet-formula__desc {
    margin: 0;
    color: #444;
    line-height: 1.85;
}

/* ---------- Visual (PC 우측 일러스트) ---------- */
.diet-formula__visual {
    grid-area: visual;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    .diet-formula__visual img {
        width: 100%;
        max-width: 240px;
        height: auto;
        display: block;
        filter: grayscale(1);
    }

/* ---------- Card Grid ---------- */
.diet-formula__grid {
    grid-area: grid;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.diet-formula__card {
    background: #fff;
    border: 1px solid #ddd8cf;
    border-radius: 14px;
    padding: 36px 36px 32px;
    display: flex;
    flex-direction: column;
}

/* 카드 상단: 원형 한자 마크 + 영문명 */
.diet-formula__card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28px;
}

.diet-formula__card-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1.5px solid #ccc;
    color: #111;
    margin-bottom: 12px;
}

.diet-formula__card-name {
    margin: 0;
    color: #888;
    font-style: italic;
    letter-spacing: 0.04em;
}

/* 특징 리스트 */
.diet-formula__card-features {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    gap: 10px;
}

    .diet-formula__card-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #333;
    }

.diet-formula__card-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 제형 이미지 */
.diet-formula__card-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    min-height: 220px;
}

    .diet-formula__card-image img {
        width: 100%;
        max-width: 340px;
        height: auto;
        display: block;
        filter: grayscale(1);
    }

/* 카드 하단 설명 */
.diet-formula__card-desc {
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid #eee;
    color: #444;
    line-height: 1.8;
    text-align: center;
}

/* ---------- Footer ---------- */
.diet-formula__footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 28px;
    border: 1px solid #ddd8cf;
    border-radius: 10px;
    background: #fafaf8;
}

.diet-formula__footer-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: 0.6;
}

.diet-formula__footer p {
    margin: 0;
    color: #555;
}


/* =========================================
   Diet Formula — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-formula {
        padding: 100px 0;
    }

    .diet-formula__inner {
        width: min(100% - 40px, 1100px);
        gap: 44px 32px;
    }
}

@media (max-width: 900px) {
    .diet-formula {
        padding: 86px 0;
    }

    .diet-formula__inner {
        width: min(100% - 40px, 860px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "grid";
        gap: 36px;
    }

    .diet-formula__head {
        text-align: center;
    }

    .diet-formula__eyebrow {
        justify-content: center;
    }

    /* PC 우측 일러스트 숨김 */
    .diet-formula__visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .diet-formula {
        padding: 72px 0;
    }

    .diet-formula__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    /* 모바일: 2단 → 1단 */
    .diet-formula__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .diet-formula__card {
        padding: 28px 24px 26px;
        border-radius: 12px;
    }

    .diet-formula__card-mark {
        width: 70px;
        height: 70px;
    }

    .diet-formula__card-image {
        min-height: 180px;
        margin-bottom: 22px;
    }

    .diet-formula__footer {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 20px;
    }
}

@media (max-width: 480px) {
    .diet-formula {
        padding: 64px 0;
    }

    .diet-formula__inner {
        width: min(100% - 24px, 480px);
    }

    .diet-formula__card {
        padding: 24px 20px 22px;
    }

    .diet-formula__card-image {
        min-height: 160px;
    }
}

@media (max-width: 380px) {
    .diet-formula__inner {
        width: min(100% - 20px, 380px);
    }
}


/* =========================================
   Diet Cause
========================================= */

.diet-cause {
    background: #f8f8f6;
    padding: 120px 0;
    overflow: hidden;
}

.diet-cause__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.36fr;
    grid-template-areas:
        "head  visual"
        "diagram diagram"
        "footer footer";
    align-items: start;
    gap: 56px 40px;
}

/* ---------- Head ---------- */
.diet-cause__head {
    grid-area: head;
}

.diet-cause__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    color: #777;
}

    .diet-cause__eyebrow span {
        width: 40px;
        height: 1px;
        background: #bbb;
    }

    .diet-cause__eyebrow em {
        font-style: italic;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

.diet-cause__title {
    margin: 0 0 28px;
    color: #111;
}

.diet-cause__desc {
    margin: 0;
    color: #444;
    line-height: 1.85;
    text-align: center;
}

/* ---------- Visual (PC 우측) ---------- */
.diet-cause__visual {
    grid-area: visual;
    display: flex;
    justify-content: center;
}

    .diet-cause__visual img {
        width: 100%;
        max-width: 200px;
        height: auto;
        display: block;
        filter: grayscale(1);
    }

/* ---------- Diagram ---------- */
.diet-cause__diagram {
    grid-area: diagram;
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    align-items: center;
    gap: 0 0;
}

/* 좌측 요인 카드들 */
.diet-cause__factors {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.diet-cause__factor {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 0 14px;
    padding: 18px 22px;
    background: #fff;
    border: 1.5px dashed #c8c2b8;
    border-radius: 12px;
}

.diet-cause__factor-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
}

    .diet-cause__factor-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(1);
    }

.diet-cause__factor-text h3 {
    margin: 0 0 5px;
    color: #111;
}

.diet-cause__factor-text p {
    margin: 0;
    color: #888;
    line-height: 1.55;
}

/* 모바일 + 연결자 — PC 숨김 */
.diet-cause__plus {
    display: none;
}

/* ---------- PC 화살표 ---------- */
.diet-cause__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
}

    .diet-cause__arrow img {
        width: 100%;
        max-width: 96px;
        height: auto;
        display: block;
        filter: grayscale(1);
        opacity: 0.6;
    }

/* 모바일 아래 화살표 — PC 숨김 */
.diet-cause__arrow-down {
    display: none;
}

    .diet-cause__arrow-down img {
        width: 28px;
        height: auto;
        display: block;
        filter: grayscale(1);
        opacity: 0.6;
    }

/* ---------- 결과 카드 ---------- */
.diet-cause__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 28px 32px;
    background: #fff;
    border: 1.5px dashed #c8c2b8;
    border-radius: 20px;
    align-self: stretch;
}

.diet-cause__result-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .diet-cause__result-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(1);
        opacity: 0.65;
    }

.diet-cause__result-title {
    margin: 0 0 14px;
    color: #111;
}

.diet-cause__result-desc {
    margin: 0 0 28px;
    color: #555;
    line-height: 1.8;
}

.diet-cause__result-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.diet-cause__result-type {
    padding: 10px 8px;
    border: 1px solid #d8d2c8;
    border-radius: 6px;
    color: #444;
    text-align: center;
    background: #fafaf8;
}

/* ---------- Footer ---------- */
.diet-cause__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding-top: 48px;
    border-top: 1px solid #ddd8cf;
    text-align: center;
}

    .diet-cause__footer p {
        margin: 0;
        color: #555;
        line-height: 1.9;
    }

.diet-cause__footer-icon {
    display: inline-flex;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: 0.55;
}

    .diet-cause__footer-icon img {
        width: 48px;
        height: auto;
    }

/* PC/모바일 전환 유틸 */
.only-pc-flex {
    display: flex;
}

.only-mobile {
    display: none;
}


/* =========================================
   Diet Cause — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-cause {
        padding: 100px 0;
    }

    .diet-cause__inner {
        width: min(100% - 40px, 1100px);
        gap: 44px 32px;
    }

    .diet-cause__diagram {
        grid-template-columns: 1fr 96px 1fr;
    }
}

@media (max-width: 900px) {
    .diet-cause {
        padding: 86px 0;
    }

    .diet-cause__inner {
        width: min(100% - 40px, 680px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "head"
            "diagram"
            "footer";
        gap: 36px;
    }

    .diet-cause__head {
        text-align: center;
    }

    .diet-cause__eyebrow {
        justify-content: center;
    }

    .diet-cause__desc {
        text-align: center;
    }

    .diet-cause__visual {
        display: none;
    }

    /* 다이어그램 1단 전환 */
    .diet-cause__diagram {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* PC 화살표 숨김 */
    .diet-cause__arrow {
        display: none;
    }

    .only-pc-flex {
        display: none;
    }

    /* 모바일 + 연결자 */
    .diet-cause__plus {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 36px;
    }

        .diet-cause__plus img {
            width: 28px;
            height: auto;
            display: block;
            filter: grayscale(1);
            opacity: 0.6;
        }

    /* 모바일 아래 화살표 */
    .diet-cause__arrow-down {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 44px;
    }

    .only-mobile {
        display: flex;
    }

    .diet-cause__result {
        padding: 28px 24px;
        border-radius: 14px;
    }

    .diet-cause__footer {
        gap: 20px;
        padding-top: 32px;
    }

    .diet-cause__footer-icon:last-child {
        display: none;
    }

    .diet-cause__footer-icon img {
        width: 36px;
    }
}

@media (max-width: 768px) {
    .diet-cause {
        padding: 72px 0;
    }

    .diet-cause__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    .diet-cause__factor {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 0 12px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .diet-cause__factor-icon {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 480px) {
    .diet-cause {
        padding: 64px 0;
    }

    .diet-cause__inner {
        width: min(100% - 24px, 480px);
    }

    .diet-cause__result-types {
        gap: 6px;
    }

    .diet-cause__result-type {
        padding: 8px 6px;
    }
}

@media (max-width: 380px) {
    .diet-cause__inner {
        width: min(100% - 20px, 380px);
    }
}


/* =========================================
   Diet Lifestyle
========================================= */

.diet-lifestyle {
    background: #fff;
    padding: 120px 0;
    overflow: hidden;
}

.diet-lifestyle__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
        "content visual"
        "grid    grid"
        "footer  footer";
    align-items: center;
    gap: 64px 56px;
}

/* ---------- Content (좌측) ---------- */
.diet-lifestyle__content {
    grid-area: content;
}

.diet-lifestyle__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    color: #777;
}

    .diet-lifestyle__eyebrow span {
        width: 40px;
        height: 1px;
        background: #bbb;
    }

    .diet-lifestyle__eyebrow em {
        font-style: italic;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

.diet-lifestyle__title {
    margin: 0 0 22px;
    color: #111;
}

.diet-lifestyle__desc {
    margin: 0;
    color: #444;
    line-height: 1.9;
}

/* ---------- Visual (우측) ---------- */
.diet-lifestyle__visual {
    grid-area: visual;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .diet-lifestyle__visual img {
        width: 100%;
        max-width: 560px;
        height: auto;
        display: block;
        filter: grayscale(1);
    }

/* ---------- Grid (하단 4열 카드) ---------- */
.diet-lifestyle__grid {
    grid-area: grid;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.diet-lifestyle__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 24px 28px;
    background: #fff;
    border: 1px solid #e4e0d8;
    border-radius: 14px;
}

.diet-lifestyle__card-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: #f8f7f4;
    border-radius: 50%;
    padding: 16px;
}

    .diet-lifestyle__card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        filter: grayscale(1);
    }

.diet-lifestyle__card-title {
    margin: 0 0 14px;
    color: #111;
}

.diet-lifestyle__card-desc {
    margin: 0;
    color: #555;
    line-height: 1.75;
}

/* ---------- Footer ---------- */
.diet-lifestyle__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 22px 32px;
    border: 1px solid #e4e0d8;
    border-radius: 10px;
    background: #fafaf8;
}

    .diet-lifestyle__footer p {
        margin: 0;
        color: #555;
    }

.diet-lifestyle__footer-icon {
    display: inline-flex;
    flex-shrink: 0;
    filter: grayscale(1);
    opacity: 0.55;
}

    .diet-lifestyle__footer-icon img {
        width: 36px;
        height: auto;
    }


/* =========================================
   Diet Lifestyle — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-lifestyle {
        padding: 100px 0;
    }

    .diet-lifestyle__inner {
        width: min(100% - 40px, 1100px);
        gap: 48px 40px;
    }
}

@media (max-width: 900px) {
    .diet-lifestyle {
        padding: 86px 0;
    }

    .diet-lifestyle__inner {
        width: min(100% - 40px, 860px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "grid"
            "footer";
        gap: 36px;
    }

    .diet-lifestyle__content {
        text-align: center;
    }

    .diet-lifestyle__eyebrow {
        justify-content: center;
    }

    .diet-lifestyle__visual img {
        max-width: 480px;
        margin: 0 auto;
    }

    /* 모바일: 4열 → 2열 */
    .diet-lifestyle__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .diet-lifestyle {
        padding: 72px 0;
    }

    .diet-lifestyle__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    /* 모바일: 카드 세로형 → 가로형 */
    .diet-lifestyle__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .diet-lifestyle__card {
        flex-direction: row;
        text-align: left;
        align-items: center;
        padding: 18px 20px;
        gap: 16px;
        border-radius: 12px;
    }

    .diet-lifestyle__card-icon {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        margin-bottom: 0;
        padding: 12px;
    }

    .diet-lifestyle__card-title {
        margin-bottom: 6px;
    }

    .diet-lifestyle__footer {
        gap: 16px;
        padding: 18px 20px;
    }

    .diet-lifestyle__footer-icon img {
        width: 28px;
    }
}

@media (max-width: 480px) {
    .diet-lifestyle {
        padding: 64px 0;
    }

    .diet-lifestyle__inner {
        width: min(100% - 24px, 480px);
        gap: 24px;
    }

    .diet-lifestyle__card-icon {
        width: 54px;
        height: 54px;
        padding: 10px;
    }

    .diet-lifestyle__visual img {
        max-width: 360px;
    }
}

@media (max-width: 380px) {
    .diet-lifestyle__inner {
        width: min(100% - 20px, 380px);
    }
}


/* =========================================
   Diet Yoyo
========================================= */

.diet-yoyo {
    background: #0e0e0c;
    padding: 120px 0 0;
    overflow: hidden;
    position: relative;
}

.diet-yoyo__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
        "content visual"
        "grid    grid"
        "deco    cta";
    align-items: center;
    gap: 64px 48px;
}

/* ---------- Content (좌측) ---------- */
.diet-yoyo__content {
    grid-area: content;
}

.diet-yoyo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
    color: #9a8060;
}

    .diet-yoyo__eyebrow span {
        width: 36px;
        height: 1px;
        background: #9a8060;
        opacity: 0.7;
    }

    .diet-yoyo__eyebrow em {
        font-style: italic;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

.diet-yoyo__title {
    margin: 0 0 24px;
    color: #e8e0d0;
    line-height: 1.3;
}

.diet-yoyo__desc {
    margin: 0;
    color: #7a7060;
    line-height: 2;
}

/* ---------- Visual (우측) ---------- */
.diet-yoyo__visual {
    grid-area: visual;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px; /* 이미지 없을 때도 영역 확보 */
}

    .diet-yoyo__visual img {
        width: 100%;
        max-width: 560px;
        height: auto;
        display: block;
    }

/* ---------- Grid (2×2 카드) ---------- */
.diet-yoyo__grid {
    grid-area: grid;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.diet-yoyo__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 32px 36px;
    min-height: 280px;
    background: #161612;
    border: 1px solid #2a2820;
    border-radius: 14px;
    transition: border-color 0.2s ease;
}

    .diet-yoyo__card:hover {
        border-color: #403830;
    }

.diet-yoyo__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 1px solid #303028;
    background: #1e1e1a;
    margin-bottom: 22px;
    padding: 16px;
    flex-shrink: 0;
}

    .diet-yoyo__card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.diet-yoyo__card-title {
    margin: 0 0 14px;
    color: #d8d0c0;
}

/* 제목 아래 구분선 */
.diet-yoyo__card-divider {
    display: block;
    width: 24px;
    height: 1px;
    background: #403830;
    margin: 0 auto 16px;
}

.diet-yoyo__card-desc {
    margin: 0;
    color: #686050;
    line-height: 1.75;
}

/* 모바일 전용 화살표 — PC 숨김 */
.diet-yoyo__card-arrow {
    display: none;
}

/* ---------- 좌측 하단 식물 데코 ---------- */
.diet-yoyo__deco {
    grid-area: deco;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding-bottom: 0;
}

    .diet-yoyo__deco img {
        width: 100%;
        max-width: 320px;
        height: auto;
        display: block;
        opacity: 0.7;
    }

/* ---------- CTA ---------- */
.diet-yoyo__cta {
    grid-area: cta;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 80px;
}

.diet-yoyo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    width: 100%;
    height: 72px;
    padding: 0 36px;
    border: 1px solid #3a3428;
    background: transparent;
    color: #c8c0a8;
    text-decoration: none;
    border-radius: 4px;
    transition: border-color 0.24s ease, background 0.24s ease, color 0.24s ease;
}

    .diet-yoyo__btn:hover {
        border-color: #6a5a40;
        background: rgba(106, 90, 64, 0.1);
        color: #e8d8b8;
    }

.diet-yoyo__btn-arrow {
    color: #9a8060;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.diet-yoyo__btn:hover .diet-yoyo__btn-arrow {
    transform: translateX(4px);
}


/* =========================================
   Diet Yoyo — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-yoyo {
        padding-top: 100px;
    }

    .diet-yoyo__inner {
        width: min(100% - 40px, 1100px);
        gap: 48px 36px;
    }
}

@media (max-width: 900px) {
    .diet-yoyo {
        padding-top: 86px;
    }

    .diet-yoyo__inner {
        width: min(100% - 40px, 680px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "grid"
            "cta";
        gap: 36px;
    }

    .diet-yoyo__content {
        text-align: center;
    }

    .diet-yoyo__eyebrow {
        justify-content: center;
    }

    .diet-yoyo__visual img {
        max-width: 420px;
        margin: 0 auto;
    }

    /* 데코 숨김 */
    .diet-yoyo__deco {
        display: none;
    }

    .diet-yoyo__cta {
        padding-bottom: 56px;
    }
}

@media (max-width: 768px) {
    .diet-yoyo__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    /* 모바일: 2×2 → 1열 가로형 카드 */
    .diet-yoyo__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .diet-yoyo__card {
        flex-direction: row;
        text-align: left;
        align-items: center;
        padding: 18px 18px;
        gap: 14px;
        border-radius: 10px;
    }

    .diet-yoyo__card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 0;
        padding: 10px;
        flex-shrink: 0;
    }

    /* 모바일에서 divider 숨김 */
    .diet-yoyo__card-divider {
        display: none;
    }

    .diet-yoyo__card-title {
        margin-bottom: 4px;
    }

    .diet-yoyo__card-desc {
        line-height: 1.6;
    }

    /* 모바일 화살표 노출 */
    .diet-yoyo__card-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6a5a40;
        font-size: 20px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .diet-yoyo__btn {
        height: 62px;
        gap: 24px;
        padding: 0 28px;
    }

    .diet-yoyo__cta {
        padding-bottom: 48px;
    }
}

@media (max-width: 480px) {
    .diet-yoyo__inner {
        width: min(100% - 24px, 480px);
        gap: 24px;
    }

    .diet-yoyo__visual img {
        max-width: 320px;
    }

    .diet-yoyo__btn {
        height: 58px;
        padding: 0 22px;
        gap: 16px;
    }

    .diet-yoyo__cta {
        padding-bottom: 40px;
    }
}

@media (max-width: 380px) {
    .diet-yoyo__inner {
        width: min(100% - 20px, 380px);
    }
}


/* =========================================
   Diet Side Effect
========================================= */

.diet-sideeffect {
    background: #faf7f2;
    padding: 120px 0;
    overflow: hidden;
}

.diet-sideeffect__inner {
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    grid-template-areas:
        "content visual"
        "grid    grid"
        "footer  footer";
    align-items: center;
    gap: 64px 56px;
}

/* ---------- Content (좌측) ---------- */
.diet-sideeffect__content {
    grid-area: content;
}

.diet-sideeffect__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    color: #a07840;
    font-style: italic;
    letter-spacing: 0.04em;
}

    .diet-sideeffect__eyebrow span {
        display: inline-block;
        width: 32px;
        height: 1px;
        background: #a07840;
        opacity: 0.7;
        vertical-align: middle;
    }

.diet-sideeffect__title {
    margin: 0 0 16px;
    color: #1a1612;
    line-height: 1.3;
}

/* 제목 아래 짧은 골드 라인 */
.diet-sideeffect__title-line {
    display: block;
    width: 28px;
    height: 2px;
    background: #a07840;
    margin-bottom: 28px;
}

.diet-sideeffect__desc {
    margin: 0;
    color: #5a5248;
    line-height: 2;
}

/* ---------- Visual (우측) ---------- */
.diet-sideeffect__visual {
    grid-area: visual;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}

    .diet-sideeffect__visual img {
        width: 100%;
        max-width: 500px;
        height: auto;
        display: block;
    }

/* ---------- Grid (2×2, 십자 구분선) ---------- */
.diet-sideeffect__grid {
    grid-area: grid;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* 십자 구분선 — gap 없이 border로 처리 */
    gap: 0;
    border: 1px solid #e8e0d4;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.diet-sideeffect__card {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 0 18px;
    padding: 32px 28px;
    background: #fff;
    border-right: 1px solid #e8e0d4;
    border-bottom: 1px solid #e8e0d4;
    /* 모바일 화살표 숨김 */
}

    /* 우측 열 border-right 제거 */
    .diet-sideeffect__card:nth-child(2n) {
        border-right: none;
    }

    /* 하단 행 border-bottom 제거 */
    .diet-sideeffect__card:nth-child(3),
    .diet-sideeffect__card:nth-child(4) {
        border-bottom: none;
    }

.diet-sideeffect__card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #f5f0e8;
    flex-shrink: 0;
    padding: 12px;
}

    .diet-sideeffect__card-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.diet-sideeffect__card-title {
    margin: 0 0 8px;
    color: #1a1612;
}

.diet-sideeffect__card-desc {
    margin: 0;
    color: #7a7060;
    line-height: 1.7;
}

/* 모바일 전용 화살표 — PC 숨김 */
.diet-sideeffect__card-arrow {
    display: none;
}

/* ---------- Footer ---------- */
.diet-sideeffect__footer {
    grid-area: footer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 22px 32px;
    border: 1px solid #e8e0d4;
    border-radius: 10px;
    background: #fff;
}

    .diet-sideeffect__footer p {
        margin: 0;
        color: #5a5248;
    }

.diet-sideeffect__footer-icon {
    display: inline-flex;
    flex-shrink: 0;
}

    .diet-sideeffect__footer-icon img {
        width: 32px;
        height: auto;
    }


/* =========================================
   Diet Side Effect — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-sideeffect {
        padding: 100px 0;
    }

    .diet-sideeffect__inner {
        width: min(100% - 40px, 1100px);
        gap: 48px 40px;
    }
}

@media (max-width: 900px) {
    .diet-sideeffect {
        padding: 86px 0;
    }

    .diet-sideeffect__inner {
        width: min(100% - 40px, 860px);
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "visual"
            "grid"
            "footer";
        gap: 36px;
    }

    .diet-sideeffect__visual img {
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .diet-sideeffect {
        padding: 72px 0;
    }

    .diet-sideeffect__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    /* 모바일: 2×2 → 1열 가로형 리스트 카드 */
    .diet-sideeffect__grid {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .diet-sideeffect__card {
        grid-template-columns: 52px minmax(0, 1fr) 24px;
        gap: 0 14px;
        padding: 18px 18px;
        border-right: none;
        border-bottom: 1px solid #e8e0d4;
    }

        /* 모바일: 마지막 카드 border-bottom 제거 */
        .diet-sideeffect__card:nth-child(3),
        .diet-sideeffect__card:nth-child(4) {
            border-bottom: 1px solid #e8e0d4;
        }

        .diet-sideeffect__card:last-child {
            border-bottom: none;
        }

    .diet-sideeffect__card-icon {
        width: 46px;
        height: 46px;
        padding: 10px;
    }

    /* 모바일 화살표 노출 */
    .diet-sideeffect__card-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #a07840;
        font-size: 20px;
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .diet-sideeffect {
        padding: 64px 0;
    }

    .diet-sideeffect__inner {
        width: min(100% - 24px, 480px);
        gap: 24px;
    }

    .diet-sideeffect__visual img {
        max-width: 340px;
    }
}

@media (max-width: 380px) {
    .diet-sideeffect__inner {
        width: min(100% - 20px, 380px);
    }
}


/* =========================================
   Diet Analysis
========================================= */

.diet-analysis {
    background: #f8f8f6;
    padding: 100px 0;
    overflow: hidden;
}

.diet-analysis__inner {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* ---------- Head ---------- */
.diet-analysis__head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0 32px;
    text-align: center;
}

.diet-analysis__deco-left,
.diet-analysis__deco-right {
    display: flex;
    align-items: center;
}

.diet-analysis__deco-left {
    justify-content: flex-end;
}

.diet-analysis__deco-right {
    justify-content: flex-start;
}

    .diet-analysis__deco-left img,
    .diet-analysis__deco-right img {
        width: clamp(80px, 10vw, 160px);
        height: auto;
        display: block;
        filter: grayscale(1);
        opacity: 0.5;
    }

.diet-analysis__head-content {
    max-width: 640px;
}

.diet-analysis__eyebrow {
    margin: 0 0 16px;
    color: #777;
    letter-spacing: 0.04em;
}

.diet-analysis__title {
    margin: 0 0 18px;
    color: #111;
    line-height: 1.3;
}

.diet-analysis__desc {
    margin: 0;
    color: #555;
    line-height: 1.85;
}

/* ---------- PC 가로 타임라인 ---------- */
.diet-analysis__timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border: 1px solid #e4e0d8;
    border-radius: 16px;
    overflow: hidden;
    padding: 40px 32px 36px;
}

/* 번호 행 */
.diet-analysis__timeline-nos {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 20px;
    position: relative;
    align-items: center;
}

.diet-analysis__timeline-no-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

/* 번호 원형 — 열 중앙 정렬 */
.diet-analysis__timeline-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #ccc;
    color: #888;
    background: #f8f8f6;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin: 0 auto; /* 열 중앙 정렬 */
}

/* 번호 사이 점선 — 번호 원형 우측에서 다음 열 번호 좌측까지 */
.diet-analysis__timeline-dash {
    position: absolute;
    left: calc(50% + 22px); /* 현재 열 번호 우측 끝 */
    right: calc(-50% + 22px); /* 다음 열 번호 좌측 끝 */
    height: 1px;
    background-image: repeating-linear-gradient( to right, #ccc 0px, #ccc 5px, transparent 5px, transparent 12px );
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

/* 기기 이미지 행 */
.diet-analysis__timeline-images {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 16px;
    margin-bottom: 24px;
}

.diet-analysis__timeline-image {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 220px;
    padding: 0 8px;
}

    .diet-analysis__timeline-image img {
        width: 100%;
        max-width: 180px;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
        display: block;
        filter: grayscale(1);
    }

/* 제목+설명 행 */
.diet-analysis__timeline-texts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #eee;
    margin-bottom: 24px;
}

.diet-analysis__timeline-text {
    text-align: center;
    padding: 0 8px;
}

.diet-analysis__timeline-name {
    margin: 0 0 10px;
    color: #111;
}

.diet-analysis__timeline-desc {
    margin: 0;
    color: #666;
    line-height: 1.7;
}

/* 아이콘 행 */
.diet-analysis__timeline-icons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 16px;
}

.diet-analysis__timeline-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
}

    .diet-analysis__timeline-icon img {
        width: 40px;
        height: 40px;
        object-fit: contain;
        filter: grayscale(1);
        opacity: 0.7;
    }

/* 모바일 리스트 — PC 숨김 */
.diet-analysis__mobile-list {
    display: none;
}

/* ---------- Footer ---------- */
.diet-analysis__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 32px;
    border: 1px solid #e4e0d8;
    border-radius: 10px;
    background: #fff;
    text-align: center;
}

    .diet-analysis__footer p {
        margin: 0;
        color: #555;
    }

.diet-analysis__footer-icon {
    display: inline-flex;
    flex-shrink: 0;
}

    .diet-analysis__footer-icon img {
        width: 28px;
        height: auto;
    }


/* =========================================
   Diet Analysis — Responsive
========================================= */

@media (max-width: 1180px) {
    .diet-analysis {
        padding: 86px 0;
    }

    .diet-analysis__inner {
        width: min(100% - 40px, 1100px);
        gap: 44px;
    }

    .diet-analysis__timeline-image {
        height: 180px;
    }

    .diet-analysis__timeline {
        padding: 32px 20px 28px;
    }
}

@media (max-width: 900px) {
    .diet-analysis {
        padding: 72px 0;
    }

    .diet-analysis__inner {
        width: min(100% - 40px, 680px);
        gap: 36px;
    }

    /* PC 타임라인 숨기고 모바일 리스트 표시 */
    .diet-analysis__timeline {
        display: none;
    }

    .diet-analysis__mobile-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border: 1px solid #e4e0d8;
        border-radius: 14px;
        overflow: hidden;
    }

    /* 데코 이미지 크기 줄임 */
    .diet-analysis__deco-left img,
    .diet-analysis__deco-right img {
        width: clamp(60px, 8vw, 100px);
    }

    .diet-analysis__mobile-item {
        display: grid;
        grid-template-columns: 32px 80px minmax(0, 1fr) 36px;
        align-items: center;
        gap: 0 12px;
        padding: 16px 16px;
        border-bottom: 1px solid #eee;
    }

        .diet-analysis__mobile-item:last-child {
            border-bottom: none;
        }

    .diet-analysis__mobile-no {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 1px solid #ccc;
        color: #888;
        flex-shrink: 0;
    }

    .diet-analysis__mobile-image {
        width: 72px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

        .diet-analysis__mobile-image img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: grayscale(1);
        }

    .diet-analysis__mobile-text h3 {
        margin: 0 0 4px;
        color: #111;
    }

    .diet-analysis__mobile-text p {
        margin: 0;
        color: #666;
        line-height: 1.6;
    }

    .diet-analysis__mobile-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }

        .diet-analysis__mobile-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            filter: grayscale(1);
            opacity: 0.6;
        }
}

@media (max-width: 768px) {
    .diet-analysis__inner {
        width: min(100% - 28px, 560px);
        gap: 28px;
    }

    /* 데코 숨김 */
    .diet-analysis__head {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content";
    }

    .diet-analysis__deco-left,
    .diet-analysis__deco-right {
        display: none;
    }

    .diet-analysis__footer {
        padding: 16px 20px;
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .diet-analysis {
        padding: 64px 0;
    }

    .diet-analysis__inner {
        width: min(100% - 24px, 480px);
        gap: 24px;
    }

    .diet-analysis__mobile-item {
        grid-template-columns: 28px 64px minmax(0, 1fr) 32px;
        gap: 0 10px;
        padding: 14px 12px;
    }

    .diet-analysis__mobile-image {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 380px) {
    .diet-analysis__inner {
        width: min(100% - 20px, 380px);
    }
}