@charset "utf-8";

/* ============================
   공통 유틸
============================ */

/* ============================
   교육원 소개 (company/introduce.php)
============================ */
.intro-top {display:flex; align-items:flex-end; justify-content:space-between; gap:60px;}
.intro-top .intro-headline {font-size:var(--font-size40); font-weight:400; color:#121212; line-height:1.4em; flex-shrink:0;}
.intro-top .intro-desc {font-size:var(--font-size20); color:#121212; line-height:1.6em; max-width:700px;}
.intro-bg {height:300px; overflow:hidden; margin-top:40px;}
.intro-bg img {width:100%; height:100%; object-fit:cover; object-position:center; display:block; max-width:none;}
.edu-goal {margin-top:100px;}
.edu-goal h3 {font-size:var(--font-size32); font-weight:600; color:#121212; line-height:1.4em; margin-bottom:30px;}
.goal-row {display:flex; gap:60px; align-items:stretch;}
.goal-item {flex:1; min-width:0; border-top:2px solid #121212; padding:30px 40px 40px; display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.goal-icon-box {position:relative; width:80px; height:80px; overflow:hidden; border-radius:16px; flex-shrink:0;}
.goal-icon-box span {position:absolute; display:block;}
.goal-icon-box span img {position:absolute; inset:0; width:100%; height:100%; max-width:none; display:block;}
.goal-txt {width:100%; display:flex; flex-direction:column; gap:30px;}
.goal-txt strong {font-size:var(--font-size28); font-weight:600; color:#121212; line-height:1.4em; display:block;}
.goal-txt p {font-size:var(--font-size18); color:#505050; line-height:1.555em;}

/* ============================
   연혁 (company/history.php)
============================ */
.hist-banner {position:relative; overflow:hidden; padding:120px 0; display:flex; align-items:center; justify-content:center;}
.hist-banner .bg {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; display:block;}
.hist-banner .overlay {position:absolute; inset:0; background:rgba(0,0,0,0.3);}
.hist-banner p {position:relative; z-index:1; font-size:var(--font-size32); font-weight:600; color:#fff; text-align:center; line-height:1.3em;}
.hist-sections {display:flex; flex-direction:column; gap:120px; margin-top:100px;}
.hist-block {display:flex; gap:200px; align-items:flex-start;}
.hist-era {width:500px; flex-shrink:0; padding-top:5px;}
.hist-era .era-range {border-top:1px solid var(--color-primary); padding-top:30px; font-size:var(--font-size40); font-weight:600; color:var(--color-primary); line-height:1em;}
.hist-list {flex:1; min-width:0;}
.hist-item {display:flex; gap:80px; align-items:flex-start; padding:30px 0; border-bottom:1px solid #ddd;}
.hist-item:first-child {border-top:1px solid #ddd;}
.hist-item .yr {font-size:var(--font-size24); font-weight:600; color:#121212; width:59px; flex-shrink:0; line-height:1em; padding-top:3px;}
.hist-item .detail {display:flex; gap:20px; align-items:flex-start;}
.hist-item .mo {font-size:var(--font-size18); color:#121212; width:22px; flex-shrink:0; line-height:1em; padding-top:5px;}
.hist-item .txt {font-size:var(--font-size18); color:#505050; line-height:1.555em;}

/* ============================
   오시는 길 (company/location.php)
============================ */
.location-map { overflow:hidden; position:relative; width:100%;}
.location-info {margin-top:60px; display:flex; flex-direction:column; gap:30px;}
.location-head {display:flex; gap:100px; align-items:center; justify-content:space-between;}
.loc-desc {font-size:var(--font-size32); color:#121212; line-height:1.4375em;}
.loc-desc strong {color:var(--color-primary); font-weight:700;}
.btn-kakaomap {display:inline-flex; align-items:center; gap:20px; background:var(--color-primary); color:#fff; font-size:var(--font-size18); font-weight:600; line-height:1em; padding:0 50px; height:60px; white-space:nowrap; flex-shrink:0;}
.btn-kakaomap .arr {display:inline-block; width:6px; height:10.4px; background:url('../images/sub/arr-white.png') center no-repeat; background-size:contain;}
.loc-table {border-top:2px solid #121212;}
.loc-row {display:flex; align-items:center; padding:50px; border-bottom:1px solid #ddd;}
.loc-row--top {align-items:flex-start;}
.loc-label {font-size:var(--font-size24); font-weight:600; color:#121212; line-height:1em; width:146px; flex-shrink:0;}
.loc-val {font-size:var(--font-size18); color:#505050; line-height:1em;}
.loc-transit {display:flex; flex-direction:column; gap:40px; flex: 1 1 auto; min-width: 0; width: 1%; position: relative; top: -7px; }
.transit-item {display:flex; gap:20px; align-items:center;}
.transit-title {display:flex; gap:10px; align-items:center; flex-shrink:0;}
.transit-title strong {font-size:var(--font-size18); font-weight:600; color:#121212; line-height:1em; white-space:nowrap;}
.transit-content {display:flex; gap:10px; align-items:center;}
.line-badge {display:inline-flex; align-items:center; justify-content:center; padding:8px 15px; border-radius:80px; color:#fff; font-size:16px; font-weight:600; line-height:1em; white-space:nowrap; flex-shrink:0;}
.transit-content p {font-size:var(--font-size18); color:#505050; line-height:1em;}

/* 강의자료 */
.data-tab { display: flex; margin-bottom: 60px; flex-wrap: wrap; gap: 10px; }
.data-tab li { flex: 1;}
.data-tab li a { display: flex; height: 50px; align-items: center; justify-content: center; background: #f4f4f4; line-height: 2em; }
.data-tab li.active a, 
.data-tab li a:hover { background: #121212; color: #fff; font-weight: 600; }

/* ============================
   교육신청안내 (board/guide.php)
============================ */
.guide-section {margin-bottom:120px;}
.guide-section:last-child { margin-bottom: 0; }
.guide-section h3 {font-size:var(--font-size32); font-weight:600; color:#121212; line-height:1em; margin-bottom:40px;}
.guide-desc {font-size:var(--font-size18); color:#505050; line-height:1.666em; margin-bottom:40px;}
.guide-desc-sm {font-size:var(--font-size18); color:#505050; line-height:1.555em; margin-bottom:15px;}
.guide-desc-sm strong {color:#121212; font-weight:600;}
.guide-list {list-style:none; display:flex; flex-direction:column; gap:25px;}
.guide-list li {font-size:var(--font-size18); color:#505050; line-height:1em; padding-left:15px; position:relative;}
.guide-list li::before {content:""; position:absolute; left:0; top:6px; width: 5px; height: 5px; border-radius: 5px; background: #ccc; }
.guide-list .guide-highlight {font-weight:600; color:#121212;}
.guide-sub-section {margin-top:30px;}
.guide-sub-section.mg { margin-bottom: 80px; }
.guide-badge {display:inline-flex; align-items:center; background:var(--color-primary); color:#fff; font-size:16px; font-weight:600; line-height:1em; padding:8px 10px; margin-bottom:15px;}
.guide-table-wrap { overflow: auto;}
.guide-table {width:100%; border-collapse:collapse; border-top:1px solid #121212;}
.guide-table thead th {background:#f4f4f4; border:1px solid #ddd; padding:15px 20px; font-size:16px; font-weight:600; color:#121212; text-align:center; height:50px; border-left:0; border-right:1px solid #ddd; border-top: none; }
.guide-table thead th:last-child {border-right:0;}
.guide-table tbody td {border:1px solid #ddd; padding:20px; font-size:16px; color:#505050; line-height:1.75em; text-align:center; vertical-align:middle; border-left:0; border-right:1px solid #ddd;}
.guide-table tbody td:last-child {border-right:0;}
.guide-notes {list-style:none; margin-top:20px; display:flex; flex-direction:column; gap:15px;}
.guide-notes > li {font-size:var(--font-size18); color:#505050; line-height:1.555em; padding-left:24px; position:relative;}
.guide-notes > li::before {content:""; position:absolute; left:0; top:7px; width:14px; height:14px; background:url('../images/sub/arr-info.png') center no-repeat; background-size:contain;}
.guide-notes strong {color:#121212; font-weight:600;}
.guide-check-list {list-style:none; margin-top:10px; display:flex; flex-direction:column; gap:10px;}
.guide-check-list li {font-size:16px; color:#505050; line-height:1em; padding-left:20px; position:relative;}
.guide-check-list li::before {content:""; position:absolute; left:0; top:2px; width:12px; height:12px; background:#f5f5f5; border:1px solid #ddd; display:block;}