@charset "utf-8";
/* 브랜드 소개 */

/* 섹션 여백 */
.brand-intro-section {padding-block: var(--space-100) var(--space-80);}
.brand-daily-section {padding-block: var(--space-60);}
.brand-standard-section {padding-block: var(--space-80);}
.brand-promise-section {padding-block: var(--space-60);}
.brand-process-section {margin-top: var(--space-80); padding-block: var(--space-100) var(--space-80);}
.brand-lounge-section {padding-block: var(--space-80) var(--space-100);}

/* 텍스트 + 이미지 - 좌 텍스트 · 우 이미지(캡션) / 시안 비율(텍스트 635 : 이미지 845) 유지하며 같이 줄어듦 */
.brand-media-wrap {display: grid; grid-template-columns: minmax(0, 635fr) minmax(0, 845fr); align-items: start; column-gap: var(--space-40);}
.brand-media-wrap.center {align-items: center;}   /* 텍스트 세로 가운데 */
.brand-media-wrap.reverse {grid-template-columns: minmax(0, 845fr) minmax(0, 635fr);}   /* 좌 이미지 · 우 텍스트 (마크업도 이미지 먼저) */
.brand-media-wrap.reverse .sub-section-tit-wrap {padding-left: var(--space-60);}
.brand-media .img-wrap {aspect-ratio: 845 / 483; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.brand-media .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.brand-media figcaption {margin-top: var(--fs-12); color: var(--color-font3);}

/* 일상 관리 - 좌 타이틀 · 우 본문 */
.brand-daily-wrap {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: var(--space-48);}
.brand-daily-wrap .sub-section-tit {color: var(--color-font1);}
.brand-daily-wrap .body-medium {color: var(--color-font3);}
.brand-daily-wrap .body-medium + .body-medium {margin-top: var(--space-24);}

/* 관리의 기준 카드 */
.brand-care-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-30); margin-top: var(--space-60);}
.brand-care-card {display: flex; align-items: flex-start; column-gap: var(--space-40); padding: var(--space-30); border: 1px solid var(--color-border1); border-radius: 20px; background-color: var(--color-white);}
.brand-care-card .care-ico {flex: none; width: 80px; height: 80px;}
.brand-care-card .txt-wrap {min-width: 0;}
.brand-care-card .card-tit {color: var(--color-font1);}
.brand-care-card .body-small {margin-top: 10px; color: var(--color-font2);}
.brand-care-card .badge {margin-top: var(--fs-12);}

/* 카앤쿡의 약속 */
.brand-promise-section {--promise-gap: var(--space-100);}
.brand-promise-section .eyebrow {color: var(--color-static3);}
.brand-promise-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; column-gap: var(--promise-gap); margin-top: var(--space-30);}
.brand-promise-list .promise-item {position: relative;}
.brand-promise-list .promise-item + .promise-item::before {content: ''; position: absolute; top: 50%; left: calc(var(--promise-gap) / -2); width: 1px; height: 60px; background-color: var(--color-border2); transform: translateY(-50%);}
.brand-promise-list .promise-num {display: block; color: var(--color-static3);}
.brand-promise-list .sub-section-tit {margin-top: var(--fs-12); color: var(--color-font1);}
.brand-promise-list .body-small {margin-top: 10px; color: var(--color-font3);}

/* 사용 제품 - 텍스트 · 제품 이미지 · 파트너 브랜드 */
.brand-product-wrap {display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "txt product partner"; align-items: center; column-gap: var(--space-50);}
.brand-product-wrap .sub-section-tit-wrap {grid-area: txt;}
.brand-product-list {grid-area: product; display: flex; align-items: center; column-gap: var(--space-20);}
.brand-product-list img {width: 160px; height: auto;}
.brand-partner {grid-area: partner;}
.brand-partner dt {color: var(--color-font3);}
.brand-partner dd {margin-top: var(--fs-12); color: var(--color-font1);}

/* 관리 과정 */
.brand-step-list {--step-num: 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; margin-top: var(--space-100);}
.brand-step-list .step-item {display: flex; align-items: flex-start; column-gap: var(--fs-16);}
.brand-step-list .step-num {flex: none; display: flex; align-items: center; justify-content: center; width: var(--step-num); height: var(--step-num); border-radius: 50%; background-color: var(--color-static2); color: var(--color-font6);}
.brand-step-list .txt-wrap {flex: none;}
.brand-step-list .sub-section-tit {display: flex; align-items: center; min-height: var(--step-num); color: var(--color-font1);}
.brand-step-list .body-medium {margin-top: var(--fs-12); color: var(--color-font2);}
/* 단계 사이 화살표 */
.brand-step-list .step-line {position: relative; flex: 1 1 auto; align-self: center; height: 1px; margin-inline: var(--space-100) var(--space-60); background-color: var(--color-border3);}
.brand-step-list .step-line::after {content: ''; position: absolute; top: 50%; right: 0; width: 6px; height: 6px; border-top: 1px solid var(--color-border3); border-right: 1px solid var(--color-border3); transform: translateY(-50%) rotate(45deg);}

/* 안심케어 배너 */
.brand-guide-banner {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-20); margin-top: var(--space-60); padding: var(--space-24) var(--space-30); border-radius: 20px; background-color: var(--section-bg3); transition: background-color 0.2s;}
.brand-guide-banner .tit {display: flex; align-items: center; column-gap: 8px; color: var(--color-static2);}
.brand-guide-banner .tit img {flex: none; width: 28px; height: 28px;}
.brand-guide-banner .more {flex: none; display: flex; align-items: center; column-gap: var(--fs-20); color: var(--color-font1);}
.brand-guide-banner .more img {width: 24px; height: 24px; transition: transform 0.2s;}

/* ===== 걸어온 길 ===== */
.brand-history-section {padding-block: var(--space-100) var(--space-120);}
.history-list {--history-gap: var(--space-100); --history-dot: 18px; display: grid; grid-template-columns: minmax(0, 1fr) var(--history-dot) max-content; column-gap: var(--space-60); row-gap: var(--history-gap); max-width: 664px; margin: var(--space-100) auto 0;}
/* 연도 · 축 · 내용 - 열은 목록 기준 공통 (subgrid) · 내용은 가장 긴 줄 길이만큼 (body-small 기준 시안 폭 327 보다 김) · 연도가 남은 폭 */
.history-item {grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-areas: "year axis month"; align-items: center;}
.history-year {grid-area: year; color: var(--color-font1);}
/* 축 - 점 + 선 (항목 간격 절반씩 위아래로 뻗어 다음 항목과 이어짐 · 처음/끝은 점에서 끊김) */
.history-axis {--axis-y: 50%; grid-area: axis; position: relative; align-self: stretch;}
.history-axis::before {content: ''; position: absolute; top: calc(var(--history-gap) / -2); bottom: calc(var(--history-gap) / -2); left: calc(50% - 0.5px); width: 1px; background-color: var(--color-border2); transform-origin: center top;}
.history-item:first-child .history-axis::before {top: var(--axis-y);}
.history-item:last-child .history-axis::before {bottom: auto; height: calc(var(--axis-y) + var(--history-gap) / 2);}
.history-axis::after {content: ''; position: absolute; top: var(--axis-y); left: 50%; box-sizing: border-box; width: var(--history-dot); height: var(--history-dot); margin: calc(var(--history-dot) / -2) 0 0 calc(var(--history-dot) / -2); border: 4px solid var(--color-static3); border-radius: 50%; background-color: var(--color-white);}   /* 선 가운데 맞춤 (가상요소는 reset border-box 미적용 → 직접 지정) */
/* 월별 내용 */
.history-month-list {grid-area: month; display: flex; flex-direction: column; row-gap: var(--space-20); padding-left: var(--space-40);}   /* 점 → 내용 간격 100 (column-gap 60 + 40) */
.history-month {display: flex; align-items: center; column-gap: var(--space-34);}
.history-month .badge {flex: none; justify-content: center; min-width: 4.8em; background-color: var(--section-bg1); color: var(--color-font1);}   /* 월 글자 폭이 달라도 내용 시작선 맞춤 */
.history-txt-list {display: flex; flex-direction: column; row-gap: 10px;}
.history-txt-list li {display: flex; align-items: flex-start; column-gap: 6px; color: var(--color-font2);}
.history-txt-list li::before {content: ''; flex: none; width: 5px; height: 5px; margin-top: calc(0.735em - 2.5px); border-radius: 50%; background-color: var(--section-bg3);}   /* 첫 줄 가운데 (body-small line-height 1.47 / 2) */

/* ===== 함께하는 나눔 ===== */
.sharing-intro-section {padding-block: var(--space-100) var(--space-120);}
.sharing-water-section {padding-block: var(--space-80);}
.sharing-step-section {padding-block: var(--space-100);}
.sharing-child-section {padding-block: var(--space-60);}
.sharing-video-section {padding-top: var(--space-100);}
.sharing-faq-section {padding-block: var(--space-100);}

/* 소개 - 좌 타이틀 · 우 본문 + 바로가기 */
.sharing-intro-wrap {display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--space-40);}
.sharing-intro-wrap .section-tit {color: var(--color-font1);}
.sharing-intro-wrap .txt-wrap {flex: none;}
.sharing-intro-wrap .body-large {color: var(--color-font2);}
.sharing-anchor-list {display: flex; flex-wrap: wrap; gap: var(--space-20); margin-top: var(--space-30);}
.sharing-anchor {display: inline-flex; align-items: center; column-gap: var(--fs-16); min-height: var(--size-48); padding-inline: var(--space-20); border: 1px solid var(--color-border1); border-radius: 999px; background-color: var(--color-white); color: var(--color-font1); transition: border-color 0.2s;}
.sharing-anchor img {flex: none; width: 28px; height: 28px;}
.sharing-anchor .arrow {width: 16px; height: 16px; opacity: 0.5; transform: rotate(90deg); transition: transform 0.3s var(--ease-out), opacity 0.2s;}

/* 식수·위생사업 카드 */
.sharing-card-list {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-24);}
.sharing-card .img-wrap {aspect-ratio: 490 / 320; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.sharing-card .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.sharing-card .sharing-num {display: block; margin-top: var(--fs-16); color: var(--color-static3);}
.sharing-card .card-tit {margin-top: 10px; color: var(--color-font1);}
.sharing-card .body-small {margin-top: 10px; color: var(--color-font3);}

/* 비전스토어 캠페인 - 좌 텍스트 · 우 월드비전 */
.sharing-campaign {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 530px); align-items: center; column-gap: var(--space-40); margin-top: var(--space-100);}
.sharing-campaign .sub-section-tit-wrap .section-tit + .body-medium {margin-top: var(--space-30);}
.sharing-wv-box {display: flex; align-items: center; justify-content: center; aspect-ratio: 530 / 200; border-radius: var(--radius); background-color: #F37021;}   /* 월드비전 브랜드 색 */
.sharing-wv-box img {width: 227px; height: auto;}

/* 영상 */
.sharing-video-section .section-tit {margin-bottom: var(--space-60); color: var(--color-font1);}
.sharing-video-list {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-40);}
.sharing-video .video-box {aspect-ratio: 740 / 440;}
.sharing-video .card-tit {margin-top: var(--space-20); color: var(--color-font1);}
.sharing-video .body-small {margin-top: 10px; color: var(--color-font3);}

/* 자주 묻는 질문 - 좌 타이틀 · 우 아코디언 */
.sharing-faq-wrap {display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 1140fr); align-items: start;}
.sharing-faq-wrap .section-tit {color: var(--color-font1);}

/* 스크롤 등장 추가 효과 (common.css "스크롤 등장" 과 같이 동작) */
/* 약속 구분선 - 위아래로 그어짐 */
.brand-promise-list .promise-item::before {transition: transform 1.2s var(--ease-out) calc(var(--aos-delay, 0s) + 0.3s);}
.brand-promise-list .promise-item.aos-init:not(.aos-animate)::before {transform: translateY(-50%) scaleY(0);}
/* 단계 화살표 - 왼쪽부터 그어진 뒤 화살촉 */
.brand-step-list .step-line {transform-origin: left center; transition: transform 1.2s var(--ease-out) calc(var(--aos-delay, 0s) + 0.4s);}
.brand-step-list .step-line::after {transition: opacity 0.4s var(--ease-out) calc(var(--aos-delay, 0s) + 1.3s);}
.brand-step-list .step-item.aos-init:not(.aos-animate) .step-line {transform: scaleX(0);}
.brand-step-list .step-item.aos-init:not(.aos-animate) .step-line::after {opacity: 0;}

/* 연혁 - 선이 위에서 아래로 그어진 뒤 점 */
.history-axis::before {transition: transform 1.2s var(--ease-out) calc(var(--aos-delay, 0s) + 0.2s);}
.history-axis::after {transition: transform 0.8s var(--ease-out) calc(var(--aos-delay, 0s) + 0.3s), opacity 0.8s var(--ease-out) calc(var(--aos-delay, 0s) + 0.3s);}
.history-item.aos-init:not(.aos-animate) .history-axis::before {transform: scaleY(0);}
.history-item.aos-init:not(.aos-animate) .history-axis::after {opacity: 0; transform: scale(0.4);}

/* 호버 */
@media (hover: hover) {
    .sharing-anchor:hover {border-color: var(--color-border3);}
    .sharing-anchor:hover .arrow {opacity: 1; transform: rotate(90deg) translateX(3px);}
    .brand-guide-banner:hover {background-color: var(--color-static4);}
    .brand-guide-banner:hover .more img {transform: translateX(4px);}
}

@media screen and (max-width: 1280px) {
    /* 텍스트 + 이미지 - 1열 */
    .brand-media-wrap, .brand-media-wrap.reverse {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30);}
    .brand-media-wrap.reverse .sub-section-tit-wrap {padding-left: 0;}

    /* 사용 제품 - 텍스트 위 · 제품 + 파트너 아래 */
    .brand-product-wrap {grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "txt txt" "product partner"; row-gap: var(--space-40);}
}

@media screen and (max-width: 1024px) {
    /* 함께하는 나눔 */
    .sharing-intro-wrap {flex-direction: column; row-gap: var(--space-30);}
    .sharing-intro-wrap .txt-wrap {flex: 0 1 auto;}
    .sharing-campaign {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30);}
    .sharing-wv-box {max-width: 530px;}
    .sharing-faq-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30);}

    .brand-daily-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-20);}

    /* 관리 과정 - 세로 */
    .brand-step-list {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-30);}
    .brand-step-list .step-line {display: none;}
}

@media screen and (max-width: 768px) {
    /* 함께하는 나눔 */
    .sharing-card-list {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-40);}
    .sharing-video-list {grid-template-columns: minmax(0, 1fr);}

    /* 연혁 - 축 왼쪽 · 연도 위 / 내용 아래 */
    .history-list {--history-gap: var(--space-60); grid-template-columns: minmax(0, 1fr);}
    .history-month-list {padding-left: 0;}
    .history-item {grid-template-columns: var(--history-dot) minmax(0, 1fr); grid-template-areas: "axis year" "axis month"; align-items: start; column-gap: var(--space-24); row-gap: var(--fs-16);}
    .history-axis {--axis-y: calc(var(--fs-44) * 0.65);}   /* 연도 첫 줄 가운데 (section-tit line-height 1.3 / 2) */
    .history-month {column-gap: var(--fs-16);}

    .brand-care-list {grid-template-columns: minmax(0, 1fr);}
    .brand-care-card {column-gap: var(--space-20);}
    .brand-care-card .care-ico {width: 56px; height: 56px;}

    /* 약속 - 세로 · 구분선 가로 */
    .brand-promise-list {grid-template-columns: minmax(0, 1fr);}
    .brand-promise-list .promise-item + .promise-item {margin-top: var(--space-30); padding-top: var(--space-30); border-top: 1px solid var(--color-border2);}
    .brand-promise-list .promise-item + .promise-item::before {display: none;}

    /* 사용 제품 - 세로 */
    .brand-product-wrap {grid-template-columns: minmax(0, 1fr); grid-template-areas: "txt" "product" "partner"; row-gap: var(--space-30);}
    .brand-product-list {justify-content: center;}
    .brand-product-list li {flex: 0 1 160px; min-width: 0;}
    .brand-product-list img {width: 100%;}

    .brand-guide-banner {flex-direction: column; align-items: flex-start; row-gap: 8px;}
}