@charset "utf-8";

/* =========================================
   장속쾌청153 전용 스타일
   ========================================= */

:root {
   --sub-hero-overlay: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
   --jang-service-sub-max-width: 900px;
   --jang-anywhere-banner-min-height: 500px;
   --jang-anywhere-main-image-width: 800px;
   --jang-anywhere-main-image-scale: 120%;
}

/* Hero Section (기본 세팅은 style.css 참고) */
main.hero2 {
   --hero-bg-image: url(../../assets/images/장속쾌청/hero_bg.webp);
   background: var(--sub-hero-overlay), var(--hero-bg-image) no-repeat center / cover;
}

/* Service Section */
section.service {
   padding: 0;
   margin-bottom: var(--common-space-padding-y-default);
}

section.service .sub-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--common-space-padding-x-default);
   padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
}

section.service .sub-content .placeholder {
   max-width: var(--jang-service-sub-max-width);
   overflow: hidden;
}

section.service .main-content {
   display: flex;
   gap: var(--box-gap-base-default);
   align-items: center;
   padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
}

section.service .main-content .title-area {
   flex: 1;
}

section.service .main-content .img-wrapper {
   flex: 2;
   display: grid;
   grid-template-rows: repeat(2, 1fr);
   grid-template-columns: repeat(2, 1fr);
   gap: var(--box-gap-base-default);
}

section.service .sub-content2 {
   padding: var(--common-space-padding-x-default) var(--common-space-padding-x-default);
   background-color: var(--color-bg-light);
   border-radius: 0;
}

/* Anywhere Section */
section.anywhere {
   padding: 0;
}

section.anywhere > .placeholder {
   background: var(--sub-hero-overlay), url(../../assets/images/장속쾌청/anywhere_slogan-bg.jpg) no-repeat center / cover;
   border-radius: 0;
   padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
   min-height: var(--jang-anywhere-banner-min-height);
   display: flex;
   justify-content: center;
   align-items: center;
}

section.anywhere > .placeholder p.slogan {
   color: var(--color-txt-white);
}

section.anywhere .wrapper {
   display: flex;
   flex-direction: column;
   gap: var(--box-gap-lg-default);
   padding: var(--common-space-padding-y-default) var(--common-space-padding-x-default);
}

section.anywhere .main-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--box-gap-base-default);
}

section.anywhere .main-content .title-area .title-box {
   align-items: center;
}

section.anywhere .main-content > .placeholder {
   width: var(--jang-anywhere-main-image-width);
}

section.anywhere .main-content > .placeholder img {
   width: var(--jang-anywhere-main-image-scale);
   height: var(--jang-anywhere-main-image-scale);
}

section.anywhere .sub-content h3.title {
   text-align: center;
   color: var(--color-txt-highlight2);
   margin-bottom: var(--box-gap-base-default);
}

section.anywhere .sub-content .img-wrapper {
   display: flex;
   gap: var(--box-gap-base-default);
}