@charset "utf-8";

/* ============================================
   편집위원회 규정 (rule_edit) 전용 스타일
   위원회 구성 요약 타일 + 조문 카드
   색상/폰트는 레이아웃 공통(--color, --gradient) 사용
   ============================================ */

.rule_edit {counter-reset: article;}

/* ---------- 위원회 구성 요약 타일 ---------- */
.ec_compose {margin-bottom:2.75rem;}
.ec_compose .ec_title {display:flex; align-items:center; gap:9px; font-size:1.25rem; font-weight:700; color:#1e2a44; margin-bottom:1.25rem;}
.ec_compose .ec_title::before {content:''; width:6px; height:22px; background:var(--gradient); border-radius:50rem;}
.ec_compose .ec_grid {display:grid; grid-template-columns:repeat(2, 1fr); gap:0.875rem;}
.ec_compose .tile {background:#fff; border:1px solid #e3e9f2; border-radius:16px; padding:1.375rem 1rem; text-align:center; box-shadow:0 5px 16px rgba(30,50,90,0.05); position:relative; overflow:hidden;}
.ec_compose .tile::before {content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:var(--gradient);}
.ec_compose .tile .num {font-size:2rem; font-weight:800; color:var(--color); line-height:1; font-family:"Roboto", sans-serif;}
.ec_compose .tile .num .unit {font-size:0.875rem; font-weight:600; color:#8a94a6; margin-left:2px;}
.ec_compose .tile .lb {display:block; font-size:1rem; font-weight:600; color:#3a465c; margin-top:0.5rem;}
.ec_compose .tile .sub {display:block; font-size:0.8125rem; color:#9aa3b2; margin-top:2px;}
.ec_compose .tile.wide {grid-column:1 / -1;}

/* ---------- 조문 카드 ---------- */
.rule_edit > dl {display:flex; flex-direction:column; gap:1.125rem;}
.rule_edit > dl > dt {display:flex; align-items:center; gap:11px; background:linear-gradient(100deg, #f4f7fd 0%, #eef4fb 100%); border:1px solid #e2e7f0; border-left:4px solid var(--color); border-bottom:0; border-radius:14px 14px 0 0; padding:0.9375rem 1.375rem; font-size:1.125rem; font-weight:700; color:var(--color); margin-top:0.25rem;}
.rule_edit > dl > dt::before {counter-increment: article; content: counter(article); display:inline-flex; justify-content:center; align-items:center; flex:0 0 32px; width:32px; height:32px; background:var(--color); color:#fff; border-radius:50rem; font-size:0.9375rem; font-family:"Roboto", sans-serif;}
.rule_edit > dl > dt:first-of-type {margin-top:0;}
.rule_edit > dl > dd {background:#fff; border:1px solid #e2e7f0; border-left:4px solid var(--color); border-top:0; border-radius:0 0 14px 14px; padding:1.25rem 1.5rem; line-height:1.8; color:#333; box-shadow:0 4px 14px rgba(30,50,90,0.04);}

/* dd 내부 번호 리스트 */
.rule_edit dd > ol {counter-reset: item; margin:0.75rem 0 0; padding:0; list-style:none;}
.rule_edit dd > ol > li {counter-increment: item; position:relative; padding:0.5rem 0 0.5rem 2.25rem; line-height:1.7;}
.rule_edit dd > ol > li::before {content: counter(item); position:absolute; left:0; top:0.5rem; display:inline-flex; justify-content:center; align-items:center; width:24px; height:24px; background:#eef3fb; color:var(--color); border:1px solid #d7e2f2; border-radius:50rem; font-size:0.8125rem; font-weight:700;}
.rule_edit dd > ol > li + li {border-top:1px dashed #eceff4;}

.rule_edit a {color:var(--color); text-decoration:underline; word-break:break-all;}

@media screen and (min-width:769px) {
	.ec_compose .ec_grid {grid-template-columns:repeat(5, 1fr);}
	.ec_compose .tile.wide {grid-column:auto;}
}

@media screen and (max-width:768px) {
	.rule_edit > dl > dt {font-size:1.0625rem; padding:0.8125rem 1.125rem;}
	.rule_edit > dl > dd {padding:1.125rem; font-size:1rem;}
	.ec_compose .tile .num {font-size:1.75rem;}
}