@charset 'utf-8';


	section {
		min-height: 60vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	#why-hero-heading {
		 font-size: var(--fz-xxl);
		 color: #fff;
		 font-weight: bold;
		 margin-bottom: 1rem;
	}
	.why-hero-section {
		background: url(https://cdn.myplayer.kr/lawjibsa-mangobanana/corpsvr/why_page_section_01.jpeg) center center/cover;
		position:relative;
		z-index: 1;
	}
	.why-hero-section::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #0000003f;
		z-index:0;
	}
	.why-hero-section .container {
		position: relative;
		z-index: 2;
	}
	/* hero 오른쪽 카드에서 간단한 재배치 */
	.why-hero-card {
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}
	
	.hero-inner {
		max-width: 100%;
		overflow: hidden;
	}

.hero-visual-card {
        padding: 2rem;
        border-radius: 12px;
        background-color: #fff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    }
    
    .why-hero-stats {
        /* PC 기본 레이아웃: 플렉스 컨테이너 */
        display: flex;
        flex-wrap: wrap; /* 모바일에서 랩핑 가능하도록 설정 */
        gap: 0; /* PC에서는 border로 구분되므로 갭은 0 */
        justify-content: space-around;
        align-items: stretch;
	margin-top:1rem;
    }

    .why-hero-stat {
        /* PC: 4분할 (1/4) */
        flex-basis: 25%;
        flex-grow: 1; /* 남은 공간을 채우도록 성장 */
        padding: 0 1.5rem; /* 좌우 패딩으로 텍스트 공간 확보 */
        text-align: center;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
	gap:1rem;
    }
    /* PC 구분선 (첫 번째 요소 제외하고 왼쪽에 세로 구분선 추가) */
    .why-hero-stat:not(:first-child)::before {
        content: '';
        position: absolute;
        left: 0;
        top: 20%; /* 위에서 20% 지점 */
        bottom: 20%; /* 아래에서 20% 지점 */
        width: 1px;
        background-color: var(--border-color);
    }

    /* 지표 값 (숫자) 스타일 */
	.why-hero-stat .value {
		font-size: var(--fz-xl);
		font-weight: 800;
		color: var(--theme-dark);
		margin-bottom: 0.25rem;
		line-height: 1.2;
	}
    
	@media (max-width: 768px) {
		.why-hero-stat .value {
			font-size: var(--fz-lg);
		}
	}

    /* 특정 강조 값 (예: 인가율)에 포인트 컬러 */
    .why-hero-stat:nth-child(2) .value {
        color: var(--theme-primary); 
    }
    
    /* 레이블 (설명 텍스트) 스타일 */
    .why-hero-stat .label {
			font-size: var(--fz-md); /* 20px */
        color: var(--text-muted);
        line-height: 1.4;
        word-break: keep-all;
    }

    /* ----------------------------------------------------
       Mobile Responsive (반응형: 768px 이하)
			font-size: var(--fz-sm); /* ~13-16px */
    @media (max-width: 768px) {
        .hero-visual-card {
            padding: 1.5rem;
        }

        .why-hero-stats {
            gap: 15px 0; /* 세로/가로 갭 설정 */
	    flex-direction: column;
        }
        
        .why-hero-stat {
            /* 모바일: 2x2 그리드 (50%) */
            flex-basis: 50%;
            padding: 1rem 1rem; /* 모바일 패딩 조정 */
        }
        
        /* 모바일에서는 세로 구분선 모두 제거 */
        .why-hero-stat::before {
            display: none !important;
        }

        /* 모바일용 구분선 추가 */
        /* 세로 구분선: 왼쪽 두 개만 오른쪽 경계선 추가 */
        .why-hero-stat:nth-child(1),
        .why-hero-stat:nth-child(3) {
            border-right: 1px dashed var(--border-color);
        }

        /* 가로 구분선: 위쪽 두 개만 하단 경계선 추가 */
        .why-hero-stat:nth-child(1),
        .why-hero-stat:nth-child(2) {
            border-bottom: 1px dashed var(--border-color);
            padding-bottom: 1.5rem;
            margin-bottom: 15px; /* 하단 갭을 마진으로 처리 */
        }

    }

	.why-hero-note {
		font-size: var(--fz-sm);
		color: var(--color-text-sub);
	}

	/* 2. 섹션 공통 */
	.why-section {
		background-color: var(--color-bg);
	}
	.section-eyebrow {
		color: var(--color-primary);
	}
	.section-title{
		color: var(--color-text-main);
	}
	/* 3. 철학 카드 */
	.why-feature-card {
		border-radius: var(--radius-lg);
		background-color: var(--color-surface);
		border: 1px solid var(--color-border-subtle);
		padding: 1.6rem 1.5rem;
		height: 100%;
	}

	.why-feature-icon {
		width: 40px;
		height: 40px;
		border-radius: 999px;
		background-color: #111827;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-primary);
		margin-bottom: 0.7rem;
	}

	/* 4. 프로세스 카드 */
	.why-process-card {
		perspective: 1000px;
		border-radius: var(--radius-lg);
		background-color: transparent;
		border: none; 
		width: 100%;
		aspect-ratio: 2 / 3;
	}

	.card-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		transition: transform 0.6s;
		transform-style: preserve-3d;
	}

	.why-process-card:hover .card-inner {
		transform: rotateY(180deg);
	}

	.card-front, .card-back {
		position: absolute;
		width: 100%;
		height: 100%;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		border-radius: var(--radius-lg);
		border: 1px solid var(--color-border-subtle);
		padding: 1.5rem 1.4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.card-front {
		background: linear-gradient(to bottom, #fff, #ddd);
		color: var(--color-text-main);
	}

	.card-back {
		background-color: var(--color-surface);
		transform: rotateY(180deg);
		padding: 2rem;
	}

	.why-process-title {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		font-size: var(--fz-md);
		font-weight: bold;
		margin-bottom: 0.6rem;
		justify-content: center;
	}

	.mobile-hint {
		display: none; /* 기본적으로 숨김 */
		font-size: var(--fz-sm);
		color: var(--color-text-sub);
		margin-top: 1rem;
	}

	@media (max-width: 768px) {
		.mobile-hint {
			display: block; /* 모바일에서만 보이게 함 */
		}
		.why-process-card:hover .card-inner {
			transform: none; /* 모바일에서는 hover 효과 제거 */
		}
		.why-process-card.is-flipped .card-inner {
			transform: rotateY(180deg); /* is-flipped 클래스가 있을 때만 뒤집힘 */
		}
	}

	.step-badge {
		width: max-content;
		height: 26px;
		border-radius: 999px;
		border: 1px solid var(--color-border-subtle);
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: var(--fz-sm);
		color: var(--color-text-sub);
		padding: 0 0.75rem;
		display: flex;
		margin: 0 auto .5rem;	
	}
	.why-process-card p {
		font-size: var(--fz-sm);
		color: var(--color-primary);
		font-weight: 500;
	}

	.why-process-tag {
		margin-top: 0.4rem;
		font-size: var(--fz-sm);
		display: inline-block;
		border-radius: 999px;
		padding: 0.15rem 0.6rem;
		background-color: rgba(59, 130, 246, 0.18);
		color: #bfdbfe;
	}
	#golden-time {
		background: url(https://cdn.myplayer.kr/lawjibsa-mangobanana/corpsvr/golden-time.png) center center/cover;
	
	}
	#golden-time .container {
		  padding-top: 2rem ;
	}
	#golden-time header {
		margin-bottom: 10rem; 
	background-color: #ffffff1c;
	backdrop-filter: blur(5px);
	padding: 1.5rem 0;
	}
	/* ********************************************************************* */

/* ********************************************* */

/* TEAM SECTION */
#team {
  text-align: center;
}

#team .container {
  max-width: 820px;
  margin: 0 auto;
}

.section-eyebrow {
  font-size: var(--fz-sm);
  font-weight: 600;
  color: #1D4585;
  letter-spacing: 0.08em;
}

.section-title {
  font-size: var(--fz-xxl);
  font-weight: 800;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.section-desc {
  font-size: var(--fz-md);
  color: #555;
  line-height: 1.7;
  margin-bottom: 3rem;
}

/* CARD */
.why-team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2.5rem 1.5rem;
  margin-bottom: 10rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.why-team-card:last-child {
  border-bottom: none;
}

.why-team-card img {
  width: 10rem;
  height: auto;
  object-fit: contain;
}

/* TEXT */
.why-team-role {
  font-size: var(--fz-sm);
  color: #1D4585;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.why-team-name {
  font-size: var(--fz-xl);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

.why-team-card p {
  font-size: var(--fz-md);
  line-height: 1.7;
  color: #444;
  max-width: 600px;
  margin: 0 auto;
}



	.badge-crimson-soft {
		background-color: rgba(220, 20, 60, 0.15);
		color: var(--color-accent-red);
		border-radius: 999px;
		font-size: var(--fz-sm);
		padding: 0.15rem 0.6rem;
	}

	/* 6. 체크 리스트 & FAQ 카드 */
	#who {
		min-height: 1200px;
		padding-top: 7rem;
		padding-bottom:0;
		    background: url(https://cdn.myplayer.kr/lawjibsa-mangobanana/corpsvr/clipboard.jpeg) no-repeat center 10% / 100%;

	}
	#who .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow-y: hidden;
		padding-bottom: 3rem;
		padding-top: 3rem;
	}
	#who .btn-primary {
		margin-top: 1.5rem;
		padding: 0.75rem 1.5rem;
		font-size: var(--fz-lg);
		display: block;
	}
	.check-list-wrapper {
		width:100%;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-direction:column;
	}
	ul.why-check-list {
		padding: 3rem 5rem 0;
		display: flex;
		flex-direction: column;
		justify-content:center;
		position:relative;
		overflow: visible;
		width:85%;
	}
	.why-check-list li {
		font-size: var(--fz-md);
		margin-bottom: 1rem; 
	}
	@media (max-width: 992px) {
		#who .container {
				padding-top: 5rem;
		}
	}
	@media (max-width: 768px) {
		ul.why-check-list {
			padding: 2rem 1.5rem 0;
			height: auto;
			min-height: 400px;
		}
		#who {
			padding-top: 0rem;
			background: url(https://cdn.myplayer.kr/lawjibsa-mangobanana/corpsvr/clipboard.jpeg) no-repeat center 10% / 300%;
		}
		#who > .container {
			height: fit-content;
		}
		#who .section-desc {
			margin-bottom: 1.5rem;
		}
	}
	@media (max-width: 430px) {
		
		.check-list-wrapper {
			background-size:180%;
		}
		ul.why-check-list {
		width:100%;}
		.why-faq-card {
		padding:0 !important;}
	}
	.why-check-list i {
		color: var(--color-primary);
		margin-right: 0.4rem;
	}

	.why-faq-card {
		position:relative;
		z-index:3;
		padding: 1.6rem 1.5rem;
	}
	.why-faq-card .bubble {
		display: inline-block;
		color: var(--color-primary);
		border-radius: var(--radius-lg);
		padding: 0.5rem 1rem;
		margin:1rem auto;
		width:100%;
		font-size: var(--fz-md);
		font-weight: bold;
		position: relative;
		width:fit-content;
	}
	
	@media (max-width: 768px) {
		.why-faq-card .bubble {
			font-size: var(--fz-sm);
		}
	}
		.why-faq-card .bubble::before {
		content: '"';
		font-size: var(--fz-xl);
		position: absolute;
		left: -0.5rem;
		top: -0.5rem;
		color: var(--color-primary);
		opacity: 0.3;
		font-weight: bold;
	}
	.why-faq-card .bubble::after {
		content: '"';
		font-size: var(--fz-xl);
		position: absolute;
		right: -0.5rem;
		bottom: -1rem;
		color: var(--color-primary);
		opacity: 0.3;
		font-weight: bold;
	}
	.faq-box {
		padding: 1rem;
		margin-bottom: 1rem;
		border: 1px solid var(--color-border-subtle);
		border-radius: var(--radius-md);
	}

	/* ===== Override: normalize remaining hardcoded font-sizes to root variables ===== */
	/* Prevents conflicts with existing scattered rules; adjusts both desktop and mobile */
	.why-process-card p,
	.why-process-tag,
	.why-check-list li,
	.badge-crimson-soft {
		font-size: var(--fz-md) !important;
	}

	.why-team-role,
	.why-faq-card .bubble {
		font-size: var(--fz-sm) !important;
	}

	/* 모바일 전용 보완 (여전히 남아있는 모바일 전용 값 덮어쓰기)
	   - hero stat label/value 등 모바일 규칙을 변수로 통일 */
	@media (max-width: 576px) {
		.why-hero-stat {
		padding:0 !important;}
		.why-team-role { font-size: var(--fz-sm) !important; }
		.why-team-name { font-size: var(--fz-md) !important; }
		.why-team-card p { font-size: var(--fz-sm) !important; }
	}

	/* 7. 변호사 슬라이더 */
	.lawyer-swiper-container {
		position: relative;
	}
	.lawyer-swiper .swiper-slide {
		padding: 2rem 0;
	}
	.lawyer-swiper .swiper-slide .row > div {
		/* height: 600px; */
	}
	.lawyer-swiper .swiper-slide .lawyer-info {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}
	.lawyer-history {
		flex: 1; 
		overflow-y: auto;
	}
	.lawyer-history p {
		line-height: 2; 
	}
	.lawyer-img-wrap {
		border-radius: var(--radius-lg);
		overflow: hidden;
		aspect-ratio: 4 / 5;
		height: 100%; 
		width: 100%; 
		border: 1px solid var(--color-border-subtle);
	}
	@media (max-width: 992px) {
		.lawyer-img-wrap {
			height: auto;
			aspect-ratio: 4 /3;
		}
		.lawyer-img-wrap img {
			object-fit: contain !important;
			vertical-align: top;
		}
	}
	.lawyer-img-wrap img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.lawyer-info {
		padding-left: 1.5rem;
	}
	.lawyer-name {
		font-size: var(--fz-xl);
		font-weight: 400;
		color: var(--color-text-main);
		margin-top: 3rem;
	}
	.lawyer-role {
		font-size: var(--fz-md);
		color: var(--color-primary);
		font-weight: 500;
		margin-bottom: 1.5rem;
	}
	.lawyer-thumbs-swiper {
		margin-top: 2rem;
		padding: 0.5rem;
	}
	.lawyer-thumbs-swiper .swiper-slide {
		width: 80px !important;
		height: 80px !important;
		cursor: pointer;
		opacity: 0.5;
		transition: opacity 0.3s ease;
		overflow: hidden;
		border: 3px solid transparent;
	}
	.lawyer-thumbs-swiper .swiper-slide-thumb-active {
		opacity: 1;
	}
	.lawyer-thumbs-swiper .swiper-slide img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.lawyer-thumbs-swiper .swiper-wrapper {
	justify-content: center;}
@media (max-width: 767px) {
  /* 썸네일 래핑 활성화 */
  .lawyer-thumbs-swiper .swiper-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem; /* 선택사항 */
  }

  /* 한 줄 고정 폭 해제 */
  .lawyer-thumbs-swiper .swiper-slide {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 0.5rem;
  }

  /* 썸네일 위치 위로 */
  .lawyer-thumbs-swiper {
    order: -1;  /* flex 구조일 때 위로 이동 */
    margin-bottom: 1.5rem;
  }
}

	@media (max-width: 767px) {
		.lawyer-swiper .swiper-slide .row > div {
			height: auto;
		}
		.lawyer-info {
			padding-left: 0;
			margin-top: 1.5rem;
		}
		.lawyer-swiper .swiper-slide {
			padding: 1rem 0;
		}
		.lawyer-name {
			margin-top: 0;
		}
	}

	/* Font-size normalization */
	.hero-sub {
		font-size: var(--fz-lg);
	}
	.section-eyebrow {
		font-size: var(--fz-sm);
	}
	.section-title {
		font-size: var(--fz-xxl);
	}
	.section-desc {
		font-size: var(--fz-md);
	}
	.why-feature-card + .caption h3 {
		font-size: var(--fz-lg);
	}
	.why-feature-card + .caption p {
		font-size: var(--fz-sm);
	}
	.why-process-title {
		font-size: var(--fz-lg);
	}
	.faq-box h3 {
		font-size: var(--fz-lg);
	}
	.faq-box p {
		font-size: var(--fz-sm);
	}