/* ==================================== 
 (주)이젠 LMS Demo 프로젝트
 파일명 : style.css
 생성일 : 2026/01/14 
 생성자 : (주)이젠 이초원 대리
 
 === 수정 이력 ===
 예) 2026/01/14 이초원 대리 - 수정 내용
======================================= */

/* color */
:root {
 --color-blue: #5280b1;
 --color-navy: #1a2b4b;
 --color-gray: #c9c9c9;
 --color-grayBlue: #86a1be;
 --color-lightBlue: #f4f6f9;
 --color-lightGray: #eee;
 --color-darkGray: #616161;
 --color-white-10per: rgba(255, 255, 255, 0.1);
 --color-black-20per: rgba(0, 0, 0, 0.2);
 --color-light-pink: #ffebee;
 --color-red: #c62828;
 --color-green: #059669;
	
 --border-radius: 1em;
 --border-radius-btn: 4px;
 --pdd: 2rem;
}


/* Common */
html { height: 100%; font-size: 15px; }
body { display: grid; min-width: 1300px; min-height: 100%; grid-template-columns: 230px 1fr; grid-template-rows: 1fr; grid-template-areas: "lnb container"; }
*:hover { transition: all 0.3s ease; }
a { color: var(--color-blue); }
h1 { font-size: 1.5rem; font-weight: 900; }
h2 { font-size: 1.3rem; font-weight: 900; }
input[type="text"],
input[type="password"] { padding: 0.5rem 1rem; border: 1px solid var(--color-gray); border-radius: var(--border-radius-btn); }
input[type="radio"] { position: relative; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--color-gray); }
input[type="radio"]:checked:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; display: block; width: 60%; height: 60%; border-radius: 50%; background: var(--color-blue); }
input[type="radio"] + label { cursor: pointer; }
input[type="checkbox"] { position: relative; width: 1rem; height: 1rem; border-radius: var(--border-radius-btn); border: 1px solid var(--color-gray); cursor: pointer; }
input[type="checkbox"]:checked:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ""; display: block; width: 60%; height: 60%; background: var(--color-blue); }
input:focus { outline-color: var(--color-grayBlue); }
#container { display: grid; grid-template-rows: 4rem 1fr; background: var(--color-lightBlue); }
.w100 { width: 100%; }
.bgGray { background: var(--color-gray); border-color: var(--color-gray); }
.text_left { text-align: left; }
.flexCenterV { display: flex; align-items: center; gap: 0.5rem; }
.form_item { padding-top: 1.5rem; }
.form_item label { display: inline-block; font-weight: 800; color: var(--color-darkGray); margin-bottom: 0.5rem; }
.checkbox_item { display: flex; align-items: center; gap: 0.5rem; }
.checkbox_item label { cursor: pointer; font-weight: 500; color: var(--color-darkGray); }
.checkbox_item input[type="checkbox"] { transition: 0.2s; }
.checkbox_item input[type="checkbox"]:checked:before { border-color: var(--color-navy); background: var(--color-grayBlue); }
.checkbox_item input[type="checkbox"]:checked + label { color: var(--color-navy); transition: 0.2s; }


/* LNB */
#lnb { height: 100%; background: var(--color-navy); }
#logo a { display: flex; height: 4rem; align-items: center; padding: 1rem; border-bottom: 1px solid var(--color-white-10per); }
#logo img { height: 100%; width: auto; }
.lnb_container { color: white; }
.lnb_depth1 > a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1rem; color: white; border-bottom: 1px solid var(--color-white-10per); opacity: 0.8; }
.lnb_depth1 > a::after { content: "▾"; transform: rotate(-90deg); transition: transform 0.2s; }
.lnb_depth1.open { opacity: 1; }
.lnb_depth1.open > a::after { transform: rotate(0deg); }
.lnb_depth1.open .lnb_depth2 a::before { content: "-"; margin-right: 0.5rem; }
.lnb_depth1.open .lnb_depth2 a:hover,
.lnb_depth2 li.active a { background: var(--color-white-10per); font-weight: 800; }
.lnb_depth2 { display: none; padding: 0.5rem 0; }
.lnb_depth1.open .lnb_depth2 { display: block; background: var(--color-black-20per); }
.lnb_depth1.open .lnb_depth2 a { display: block; padding: 0.7rem 2rem; color: white; opacity: 0.9; }


/* Header */
#header { display: flex; height: 100%; align-items: center; justify-content: space-between; padding: var(--pdd); background: white; }
#header ol { display: flex; gap: 1rem; }
#header ol li a { display: inline-block; background: var(--color-lightBlue); padding: 0.8rem 1rem; border-radius: 8px; color: var(--color-navy); }
#header ol li a:hover,
#header ol li.active a { background: var(--color-navy); color: white; }
.header_util { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.header_util .profile { display: flex; align-items: center; gap: 0.5rem; margin-right: 10px; }
.header_util .profile .icon { display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 2rem; height: 2rem; background: var(--color-lightGray); }
#content { padding: var(--pdd); }
.content_title { margin-bottom: 1.5rem; }
.radiBox_wrap { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.radiBox { background-color: white; border-radius: var(--border-radius); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); padding: 24px; display: flex; flex-direction: column; }
.radiBox_header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.radiBox_header a { font-size: 1.5rem; }


/* Table */
table thead { background: var(--color-lightBlue); }
th, td { padding: 0.7rem 0.5rem; border: 1px solid var(--color-lightGray); text-align: center; font-size: clamp(12px, 1vw, 1rem); vertical-align: middle; }
th { font-size: clamp(12px, 0.9vw, 0.9rem); }
table input[type="checkbox"] { margin: 0 auto; }
.tb_list th,
.tb_list td { border-left: none; border-right: none; }
.table_basic { width: 100%; }
.tb_row tbody th { background: var(--color-lightBlue); }


/* List */
.list_basic {}
.list_basic li { display: grid; gap: 1rem; align-items: center; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--color-lightGray); padding: 0.8rem 0; }
.list_basic li a { display: flex; min-width: 0; gap: 0.5rem; align-items: center; }
.list_basic li a span { white-space: nowrap; }
.list_basic li a .list_title { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.list_btn { display: grid; gap: 0.5rem; align-items: center; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.list_btn li a { display: flex; gap: 1rem; flex-direction: column; align-items: center; font-size: 1.1rem; padding: 1.5rem 1rem; background: var(--color-lightBlue); border-radius: var(--border-radius); }
.list_btn li a i { font-size: 1.3em; color: var(--color-blue); }


/* Badge */
.badge { display: inline-block; padding: 0.2rem 0.5rem; border-radius: var(--border-radius-btn); font-weight: 700; font-size: 0.8rem; }
.badge.red { background: var(--color-light-pink); color: var(--color-red); }
.badge.blue { background: var(--color-blue); color: white; font-weight: 400; }
.badge.green { background: var(--color-green); color: white; font-weight: 400; }


/* Button */
.btn { display: inline-block; padding: 0.3rem 0.5rem; cursor: pointer; border: 1px solid #333; border-radius: var(--border-radius-btn); font-weight: 500; }
.btn.big { font-size: 1.1rem; padding: 1rem; font-weight: 700; }
.btn.navy { background: var(--color-navy); border-color: var(--color-navy); color: white; }
.btn.red { background: var(--color-light-pink); border-color: var(--color-light-pink); color: var(--color-red); }


/* select */
.select_wrap { display: inline-block; position: relative; }
select { min-width: 110px; padding: 0.5rem 1rem; cursor: pointer; border: 1px solid var(--color-gray); border-radius: var(--border-radius-btn); outline: none; padding-right: 2rem; }
.select_wrap i { position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); pointer-events: none; }


/* search */
.search_wrap input { width: 100%; max-width: 200px; }
.search_wrap button { height: -webkit-fill-available; padding: 0 1rem; }