@charset "utf-8";

/* ==========================================================================
   윤리 페이지 전용 스타일 (ethics.html)
   --------------------------------------------------------------------------
   구성
     1. 탭 패널      .tabpanel
     2. 조문 박스    .ethics-box / .ethics-box2 / .list_box
     3. 선서문       .oath_bg / .oath_info / .oath_img
     4. 반응형
   --------------------------------------------------------------------------
   색상 원칙
     장식은 레이아웃 포인트 컬러에서 파생시킨다.
     주의: --point-color3 은 좌측메뉴 '글자색'으로 쓰이므로 배경에 쓰지 말 것.
   ========================================================================== */


/* ==========================================================================
   1. 탭 패널
   ========================================================================== */

.tabpanel[hidden]{ display:none; }


/* ==========================================================================
   2. 조문 박스
   ========================================================================== */

.ethics-box{
	background:var(--point-color4, #eef5dc);
	padding:35px;
	border-radius:1rem;
}
.ethics-box2{
	background:#fff;
	border:1px solid #e7e7e7;
	padding:35px;
	border-radius:1rem;
}
.ethics-box h5,
.ethics-box2 h5{ padding:0 0 0 6px !important; }

.list_box{
	border:1px solid #e7e7e7;
	padding:18px;
	margin:0;
	border-radius:1rem;
	box-sizing:border-box !important;
}

/* 전문(前文) 제목 */
.preamble_tit{
	text-align:center;
	padding-bottom:10px !important;
	letter-spacing:0.5em;   /* '전 문' 사이 공백 대신 자간으로 */
	text-indent:0.5em;
}


/* ==========================================================================
   3. 선서문
   ========================================================================== */

.oath_bg{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0 4rem;              /* v2: oath_info 의 padding-left 와 중복되어 간격이 두 배였음 */
	padding:20px 0 10px;
	margin:0;
	container-type:inline-size;   /* 배치 기준은 뷰포트가 아니라 이 영역의 폭 */
}

.oath_bg .oath_img{
	order:1;
	position:relative;
	flex:0 0 38%;
	margin:0 0 0 7rem;       /* 좌측 배경 장식이 들어갈 자리 */
	background:url(../img/oath_img.jpg) no-repeat center top;
	background-size:cover;
	border-radius:0.5rem;
	aspect-ratio:3 / 4;          /* 고정 min-height 대신 비율 유지 (2/3 은 너무 길었음) */
	box-shadow:0 12px 28px rgba(0,0,0,0.15);
}
/* 좌측 배경 장식 */
.oath_bg .oath_img::before{
	content:'';
	position:absolute;
	width:250px;
	height:calc(100% - 50px);
	background:var(--point-color4, #eef5dc);
	left:-7rem;
	top:50px;
	z-index:-1;
	border-radius:7rem 0.5rem 0.5rem;
}

.oath_bg .oath_info{
	order:2;
	flex:1 1 0;
	min-width:0;
	padding:0;               /* v2: 좌측 여백은 .oath_bg 의 gap 이 담당 */
	margin:0;
	font-size:clamp(15px, 2.5vw, 20px);
}
.oath_bg .oath_info h1{
	position:relative;
	border-bottom:1px solid #d7d7d7;
	padding:0 0 25px !important;
}
.oath_bg .oath_info h1::before{
	content:'';
	position:absolute;
	width:75px;
	height:7px;
	background:var(--point-color, #669900);
	left:-5px;
	bottom:-4px;
	border-radius:10px;
}
.oath_bg .oath_info p{
	padding:35px 0 0;
	line-height:1.9;
	word-break:keep-all;
}
.oath_bg .oath_info p b{
	font-size:clamp(18px, 3vw, 26px);
	font-weight:600;
	color:var(--point-color, #669900);
}


/* ==========================================================================
   4. 반응형 — 선서문은 자기 영역 폭 기준
   ========================================================================== */

@container (max-width:820px){
	.oath_bg{ gap:2.5rem 0; }
	.oath_bg .oath_info{
		order:1;
		flex:0 0 100%;
		padding:0;
	}
	.oath_bg .oath_img{
		order:2;
		flex:0 0 100%;
		margin:0;
		aspect-ratio:3 / 2;
	}
	.oath_bg .oath_img::before{ display:none; }
}

/* 컨테이너 쿼리 미지원 브라우저 폴백 */
@supports not (container-type: inline-size){
	@media (max-width:900px){
		.oath_bg .oath_info{ order:1; flex:0 0 100%; padding:0; }
		.oath_bg .oath_img{ order:2; flex:0 0 100%; margin:2.5rem 0 0; aspect-ratio:3 / 2; }
		.oath_bg .oath_img::before{ display:none; }
	}
}

@media (max-width:768px){
	.ethics-box,
	.ethics-box2{ padding:22px 18px; }
	.list_box{ padding:15px; }
}