@charset "utf-8";

/* =========================================
   메인 홈 (Home) 전용 스타일
   ========================================= */

/* 
   고정값 토큰화(디자인 값 동일 유지)
   - 반응형 분기 시 값 추적을 쉽게 하기 위한 페이지 전용 변수
*/
:root {
   --home-service-media-max-height: 500px;
   --home-service-content-max-width: 800px;
   --home-story-max-width: 900px;
   --home-story-item-gap: 10px;
   --home-story-icon-size: 150px;
   --home-story-title-height: 58px;
   --home-bedding-height: 800px;
}

/* Service Section */
section.service .img-area {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
   gap: var(--box-gap-base-default);
   height: 100%;
   max-height: var(--home-service-media-max-height);
}

/* 첫 번째 자식 (왼쪽): 세로 2칸 모두 차지 */
section.service .img-area .img-wrapper {
   grid-row: 1 / 3;
   height: 100%;
   min-height: 0;
}

/* 첫 번째 자식 내부의 placeholder도 100%로 늘려주기 */
section.service .img-area .img-wrapper .placeholder {
   height: 100%;
   min-height: 0;
}

/* 두 번째, 세 번째 자식 (오른쪽 위/아래) */
section.service .img-area > .placeholder {
   height: 100%;
   min-height: 0;
}

section.service .content {
   width: 100%;
   max-width: var(--home-service-content-max-width);
   margin: 0 auto;
}

section.service .content h3 {
   text-align: center;
   margin-bottom: var(--box-gap-lg-default);
}

section.service .content .copy-wrap {
   display: flex;
   flex-direction: column;
   gap: var(--box-gap-base-default);
}

/* Contact Section */
section.contact {
   background-color: var(--color-bg-highlight);
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}
section.contact h2.title {
   color: var(--color-txt-white);
}

/* Brand Story Section */
/* common : story1,2 공통 클래스명 */
section.brand-story article.common {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: var(--box-gap-base-default);
}
section.brand-story article.common .title-area {
   flex: 1;
}

section.brand-story article.common .placeholder {
   flex: 1;
}

/* article.story3 */
section.brand-story article.story3 {
   max-width: var(--home-story-max-width);
   margin: 0 auto;
}

section.brand-story article.story3 ul {
   display: flex;
   flex-direction: row;
   gap: var(--box-gap-lg-default);
}

section.brand-story article.story3 ul li.box {
   text-align: center;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--home-story-item-gap);
}

section.brand-story article.story3 ul li.box .placeholder {
   aspect-ratio: 1/1;
   width: var(--home-story-icon-size);
}

section.brand-story article.story3 ul li.box .txt-wrap h3 {
   font-size: var(--fs-main-title3);
   margin-bottom: var(--home-story-item-gap);
   height: var(--home-story-title-height);
   color: var(--color-txt-highlight1);
}

section.brand-story article.story3 ul li.box .txt-wrap p {
   font-size: var(--fs-body-sm);
   color: var(--color-txt-light2);
}

/* Bedding Section */
section.bedding {
   height: var(--home-bedding-height);
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../assets/images/홈/bedding-bg.jpg) no-repeat center / cover;
   justify-content: end;
}

section.bedding .btm-area {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
section.bedding .btm-area h2.title {
   color: var(--color-txt-white);
   font-weight: 600;
}

section.bedding .btm-area .btn-wrap a.btn {
   color: var(--color-txt-white);
}