/* =============================================
   main.css | 협신포장 메인 페이지 스타일
   작성일: 2026-03
   ============================================= */

/* =============================================
   MAIN01 : 히어로 배너
   ============================================= */
#main01 {position: relative; width: 100%; height: 100vh; min-height: 640px; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden;}
#main01 .main01__bg {position: absolute; inset: 0; z-index: 0;}
#main01 .main01__bg .main01__img {width: 100%; height: 110%; object-fit: cover; object-position: center; will-change: transform; opacity: 0;}
#main01 .main01__bg .main01__overlay {position: absolute; inset: 0; background: linear-gradient(-90deg, rgba(5,10,40,0.1) 0%, rgba(5,10,40,0.2) 55%, rgba(5,10,40,0.20) 100%);}
#main01 .main01__ctn {position: relative; z-index: 1; width: 100%; max-width: var(--inner-width); margin: 0 auto; padding: 0 var(--inner-pad) 100px; text-align: left;}
#main01 .main01__sub {display: inline-flex; align-items: center; gap: 8px; color: var(--color-accent); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 24px; opacity: 0;}
#main01 .main01__sub::before {content: ''; display: block; width: 32px; height: 1px; background: var(--color-accent);}
#main01 .title {color: var(--color-white); font-size: clamp(32px, 4vw, 64px); font-weight: 700; line-height: 1.25; margin-bottom: 24px; opacity: 0; transform: translateY(36px); will-change: transform, opacity; text-shadow:0 0 3px rgba(0,0,0,0.3)}
#main01 .main01__desc {color: rgba(255,255,255,0.65); font-size: clamp(15px, 1.5vw, 20px); line-height: 2; opacity: 0; transform: translateY(20px); will-change: transform, opacity; margin-bottom: 40px;}
#main01 .main01__scroll {position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(255,255,255,0.45); font-size: 11px; letter-spacing: 0.1em; opacity: 0;}
#main01 .main01__scroll-line {width: 1px; height: 48px; background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent); animation: scrollLine 1.8s ease infinite;}
@keyframes scrollLine {0%{transform:scaleY(0);transform-origin:top;opacity:1}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* =============================================
   MAIN02 : 회사 소개
   ============================================= */
#main02 {padding: 120px 0 140px; background: var(--color-white); overflow: hidden;}
#main02 .inner {display: flex; flex-direction: column; align-items: center;}
#main02 .main02__icon {margin-bottom: 32px; opacity: 0; transform: translateY(24px);}
#main02 .title {text-align: center; margin-bottom: 20px; opacity: 0; transform: translateY(28px);}
#main02 .title .title__sub {font-size: clamp(17px, 1.5vw, 22px); font-weight: 500; color: var(--color-text); margin-bottom: 10px;}
#main02 .title .title__main {font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; color: var(--color-text); line-height: 1.55;}
#main02 .title .title__main strong {color: var(--color-secondary);}
#main02 .main02__desc {text-align: center; color: var(--color-text-light); font-size: 15px; line-height: 1.9; margin-bottom: 64px; opacity: 0; transform: translateY(18px);}

/* ── 갤러리 그리드 : 4컬럼 균등 ── */
#main02 .main02__gallery {display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; width: 100%; align-items: start;}

/* 카드 공통 */
#main02 .main02__card {border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer;}

/* ── 카드 1 : 이미지 + 하단 정보바 ── */
#main02 .main02__card--info {grid-column: 1; height: 480px; opacity: 0; transform: translateX(-32px);}
#main02 .main02__card--info .main02__card-inner {position: relative; width: 100%; height: 100%; overflow: hidden;}
#main02 .main02__card--info .main02__card-inner img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease, filter 0.45s ease;}
#main02 .main02__card--info:hover .main02__card-inner img {transform: scale(1.06); filter: blur(3px) brightness(0.45);}
#main02 .main02__card--info .main02__card-bar {position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 26px; background: linear-gradient(to top, rgba(10,20,70,0.95) 0%, rgba(10,20,70,0) 100%); z-index: 2;}
#main02 .main02__card--info .main02__card-title {color: var(--color-white); font-size: 17px; font-weight: 700; margin-bottom: 10px;}
#main02 .main02__card--info .main02__card-link {display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,0.60); transition: color var(--transition);}
#main02 .main02__card--info .main02__card-link:hover {color: var(--color-accent);}
#main02 .main02__card--info .main02__card-arrow {display: flex; align-items: center; transition: transform var(--transition);}
#main02 .main02__card--info .main02__card-link:hover .main02__card-arrow {transform: translateX(4px);}
#main02 .main02__card--info .main02__card-hover {position: absolute; inset: 0; background: rgba(20,46,140,0.68); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease; z-index: 1;}
#main02 .main02__card--info:hover .main02__card-hover {opacity: 1;}
#main02 .main02__card--info .main02__card-hover-txt {color: var(--color-white); font-size: 15px; font-weight: 700; transform: translateY(10px); transition: transform 0.35s ease;}
#main02 .main02__card--info:hover .main02__card-hover-txt {transform: translateY(0);}

/* ── 카드 2~4 : 이미지형 ── */
#main02 .main02__card--img {opacity: 0; transform: translateY(32px);}
#main02 .main02__card--img .main02__card-inner {position: relative; width: 100%; height: 100%; overflow: hidden;}
#main02 .main02__card--img .main02__card-inner img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s ease, filter 0.4s ease;}
#main02 .main02__card--img:hover .main02__card-inner img {transform: scale(1.07); filter: blur(3px) brightness(0.45);}
#main02 .main02__card--img .main02__card-hover {position: absolute; inset: 0; background: rgba(20,46,140,0.72); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.32s ease; z-index: 1;}
#main02 .main02__card--img:hover .main02__card-hover {opacity: 1;}
#main02 .main02__card--img .main02__card-hover-txt {color: var(--color-white); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; transform: translateY(12px); transition: transform 0.32s ease;}
#main02 .main02__card--img:hover .main02__card-hover-txt {transform: translateY(0);}

/* 카드 2 : 균등 높이, 살짝 아래 */
#main02 .main02__card--img:nth-child(2) {height: 480px; margin-top: 40px;}
/* 카드 3 : 균등 높이, 살짝 아래 */
#main02 .main02__card--img:nth-child(3) {height: 480px; margin-top: 40px;}
/* 카드 4 : 균등 높이, top 정렬 */
#main02 .main02__card--img:nth-child(4) {height: 480px;}

/* =============================================
   RESPONSIVE - 1280px 이하
   ============================================= */
@media (max-width: 1280px) {
#main02 .main02__card--info {height: 420px;}
#main02 .main02__card--img:nth-child(2) {height: 420px; margin-top: 36px;}
#main02 .main02__card--img:nth-child(3) {height: 420px; margin-top: 36px;}
#main02 .main02__card--img:nth-child(4) {height: 420px;}
}

/* =============================================
   RESPONSIVE - 1024px 이하
   ============================================= */
@media (max-width: 1024px) {
#main01 .main01__ctn {padding: 0 var(--inner-pad) 80px;}
#main02 {padding: 90px 0 110px;}
/* 2컬럼으로 재배치, margin-top 모두 리셋 */
#main02 .main02__gallery {grid-template-columns: 1fr 1fr; gap: 10px; align-items: start;}
#main02 .main02__card--info {grid-column: 1; grid-row: 1 / 3; height: 100%;}
#main02 .main02__card--img:nth-child(2) {grid-column: 2; grid-row: 1; height: 240px; margin-top: 0;}
#main02 .main02__card--img:nth-child(3) {grid-column: 2; grid-row: 2; height: 240px; margin-top: 0;}
#main02 .main02__card--img:nth-child(4) {grid-column: 1 / 3; grid-row: 3; height: 200px; margin-top: 0;}
}

/* =============================================
   RESPONSIVE - 모바일 767px 이하
   ============================================= */
@media (max-width: 767px) {
#main01 {min-height: 560px; align-items: center; justify-content: center;}
#main01 .main01__bg .main01__overlay {background: linear-gradient(180deg, rgba(5,10,40,0.10) 0%, rgba(5,10,40,0.10) 100%);}
#main01 .main01__ctn {padding: 0 var(--inner-pad) 0; text-align: center; display: flex; flex-direction: column; align-items: center;}
#main01 .main01__scroll {bottom: 24px;}
#main02 {padding: 72px 0 90px;}
#main02 .main02__icon svg {width: 56px; height: 56px;}
#main02 .main02__desc {margin-bottom: 40px; font-size: 14px;}
/* 모바일 : 2컬럼, margin-top 전부 리셋 */
#main02 .main02__gallery {grid-template-columns: 1fr 1fr; gap: 8px; align-items: start;}
#main02 .main02__card--info {grid-column: 1 / 3; grid-row: 1; height: 200px; margin-top: 0;}
#main02 .main02__card--info .main02__card-bar {padding: 20px 18px;}
#main02 .main02__card--info .main02__card-title {font-size: 15px;}
#main02 .main02__card--img:nth-child(2) {grid-column: 1; grid-row: 2; height: 160px; margin-top: 0;}
#main02 .main02__card--img:nth-child(3) {grid-column: 2; grid-row: 2; height: 160px; margin-top: 0;}
#main02 .main02__card--img:nth-child(4) {grid-column: 1 / 3; grid-row: 3; height: 160px; margin-top: 0;}
}