@charset "utf-8";

/* reset.css와 style.css를 기준으로 desktop(index.css) 스타일의 반응형 선택자 스캐폴드만 정의 */

/* =========================================================================
   Tablet : 800px ~ 1200px
   ========================================================================= */
@media screen and (max-width: 1200px) {
   :root {
      --home-story-icon-size: 120px;
      --home-bedding-height: 600px;
   }

   section.service .img-area {}

   section.service .img-area .img-wrapper {}

   section.service .img-area .img-wrapper:nth-child(2) {}

   section.service .img-area .img-wrapper .placeholder {}

   section.service .content {}

   section.service .content h3 {}

   section.service .content .copy-wrap {}

   section.contact {}

   section.contact h2.title {}

   section.brand-story article.common {}

   section.brand-story article.common .title-area {}

   section.brand-story article.common .placeholder {
      height: 400px;
   }

   section.brand-story article.story3 {}

   section.brand-story article.story3 ul {}

   section.brand-story article.story3 ul li.box {}

   section.brand-story article.story3 ul li.box .placeholder {}

   section.brand-story article.story3 ul li.box .txt-wrap h3 {}

   section.brand-story article.story3 ul li.box .txt-wrap p {}

   section.bedding {}

   section.bedding .btm-area {}

   section.bedding .btm-area h2.title {}

   section.bedding .btm-area .btn-wrap a.btn {}
}

/* =========================================================================
   mobile : ~ 799px
   ========================================================================= */
@media screen and (max-width: 799px) {
   :root {
      --home-service-media-max-height: auto;
      --home-story-title-height: 42px;
      --home-story-icon-size: auto;
      --home-bedding-height: 500px;
   }

   section.service .img-area {
      display: grid;
      grid-template-columns: 1fr;
      /* 세로로 1줄 배치 (부모 너비 100% 채움) */
      grid-auto-rows: 250px;
      /* 3개의 자식 모두 일정한 높이(250px) 적용 */
      width: 100%;
   }

   section.service .img-area .img-wrapper {
      grid-row: auto;
      /* 데스크탑 버전의 세로 2칸 병합 속성 해제 */
   }

   section.service .img-area .img-wrapper .placeholder {}

   section.service .content {}

   section.service .content h3 {}

   section.service .content .copy-wrap {}

   section.contact {
      flex-direction: column;
   }

   section.contact h2.title {}

   section.brand-story {
      gap: var(--common-space-padding-y-default);
   }

   section.brand-story article.common {
      flex-direction: column;
      align-items: baseline;
   }

   section.brand-story article.common .title-area {}

   section.brand-story article.common .placeholder {
      width: 100%;
      height: 300px;
   }

   section.brand-story article.story1 {}

   section.brand-story article.story1 .placeholder {
      order: -1;
      /* 텍스트(title-area)보다 이미지를 먼저 나오게 순서 변경 */
   }

   section.brand-story article.story1 .title-area {}


   section.brand-story article.story3 {}

   section.brand-story article.story3 ul {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
      gap: var(--box-gap-base-default);
   }

   section.brand-story article.story3 ul li.box {}

   section.brand-story article.story3 ul li.box .placeholder {}

   section.brand-story article.story3 ul li.box .txt-wrap h3 {}

   section.brand-story article.story3 ul li.box .txt-wrap p {}

   section.bedding {
      justify-content: center;
      align-items: center;
   }

   section.bedding .btm-area {
      text-align: center;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 30px;
   }

   section.bedding .btm-area h2.title {}

   section.bedding .btm-area .btn-wrap a.btn {}
}