@charset "utf-8";
/* 서브공통 */
/* doc-top */
.doc-top {margin-bottom: var(--space-80); text-align: center;}
.doc-top .title {margin-bottom: var(--space-30); color:#2c2c2c; font-size:var(--font-size-40); font-weight:600; line-height:1.4em; letter-spacing:-.02em;}
.doc-top .desc {font-size:var(--font-size-20); line-height:1.7em; letter-spacing:-.02em; }

/* table 공통 */
.table-wrap {overflow-x: auto;}
.table {width: 100%; border-collapse: collapse; border-spacing: 0;}
.table thead th, 
.table tbody td {padding: var(--space-16); border: 1px solid #dfdfdf; font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em; text-align: center;}
.table thead th {font-weight: 600; background: #F4FAFE; border-top: 1px solid #000;}
.table tbody td {color: #676767;}
.table tbody td:first-child {font-weight: 600; color: #505050;}
.table thead th:first-child,
.table tbody td:first-child {border-left: 0;}
.table thead th:last-child,
.table tbody td:last-child {border-right: 0;}

/********************* 재단소개 *********************/
/* 인사말 */
.greeting-top .title-en {display: block; margin-bottom: var(--space-16); color:#CCC; font-size:var(--font-size-24); font-weight: 600; line-height:1.583em; letter-spacing:-.02em;}
.greeting-top .title {color:#2c2c2c; font-size:var(--font-size-48); font-weight: 600; line-height:1.291em; letter-spacing:-.02em;}
.greeting-cont {gap: var(--space-40);}
.greeting-desc {flex: 1; max-width: 986px;}
.greeting-desc > div {margin-bottom: var(--space-24); gap: var(--space-16);}
.greeting-desc p {font-size: var(--font-size-20); line-height:1.7em; letter-spacing:-.02em;}
.greeting-desc p.sign {font-size: var(--font-size-22); line-height:1.545em; letter-spacing:-.02em;}
.greeting-img {flex: 0 1 25%;}
.greeting-img .img {border-radius: 80px 16px 16px 16px; overflow: hidden;}

/* 연혁 */
.history-img {border-radius: 80px 16px 80px 16px; overflow:hidden;}
/* .table.history-table thead th:nth-child(1) {width: 13%;}
.table.history-table thead th:nth-child(2) {width: 19%;}
.table.history-table thead th:nth-child(3) {width: 21%;}
.table.history-table thead th:nth-child(4) {width: 47%;} */

/* 이사회 구성 */
.board-cont .box-wrap {gap: var(--space-120);}
.board-cont .box-wrap [class*="box"] {flex-shrink: 0; position: relative;}
.board-cont .box-wrap [class*="box"]::before {content: ""; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 100%; height: 1px; background: #DDD; z-index: -1;}
.board-cont .box-wrap .box3::before {display: none;}
.board-cont .img.round {position: relative; width: clamp(150px, calc(254 / var(--inner) * 100vw), 254px); aspect-ratio: 1/1; background: #f9f9f9; border-radius: 100%;}
.board-cont .img.round .info {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center;}
.board-cont .img.round .title {font-size: var(--font-size-32); font-weight: 600; line-height: 1.437em; letter-spacing: -0.02em;}
.board-cont .box2 .inner {background: #F9F9F9; border-radius: var(--radius-16); overflow: hidden;}
.board-cont .box2 .img-wrap {padding: var(--space-40);}
.board-cont .box2 .img-wrap .img {width: clamp(150px, calc(230 / var(--inner) * 100vw), 230px); border-radius: 100%; overflow: hidden;}
.board-cont .box2 p {padding: var(--space-16) 0; background: #032237; font-size: var(--font-size-24); line-height: 1.5em; letter-spacing: -0.02em; color: #fff; text-align: center;}
.table.board-table thead th:nth-child(1) {width: 12%;}
.table.board-table thead th:nth-child(2) {width: 20%;}
.table.board-table thead th:nth-child(3) {width: 20%;}
.table.board-table thead th:nth-child(4) {width: 13%;}
.table.board-table thead th:nth-child(5) {width: 35%;}

/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 490px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.location-section .map {flex: 0 1 58%; border-radius: var(--radius-24); overflow: hidden;}
.map-wrap {gap: var(--space-60);}
.lct-info-wrap {flex: 1;}
.lct-info-top h3 {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--color-primary); margin-bottom: var(--space-24);}
.lct-info-top .address {margin-bottom: var(--space-16); font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; color: var(--color-sub);}
.lct-info-top .address-detail {display: flex; gap: var(--space-24); font-size: var(--font-size-18); line-height: 1.777em; color: #505050;}
.lct-info-wrap .lct-info dl {display: flex; align-items: center; gap: var(--space-30); font-size: var(--font-size-18); line-height: 1.444em; padding: var(--space-36) 0; border-bottom: 1px solid #ddd;}
.lct-info-wrap .lct-info dl:first-child {border-top: 1px solid #ddd;}
.lct-info-wrap .lct-info dt {display: flex; align-items: center; gap: var(--space-16); color: var(--color-sub); font-weight: 600;}
.lct-info-wrap .lct-info dt .icon {display: flex; align-items: center; justify-content: center;}
.lct-info-wrap .lct-info dd {font-weight: 500;}

/********************* 장학사업 *********************/
/* 선발 안내 */
.sel-cont {display: flex; flex-direction: column; gap: var(--space-100);}
.sel-block {display: flex; flex-direction: column; gap: var(--space-40);}
.sel-heading {margin: 0; color: #2c2c2c; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em;}
.sel-lead {margin: 0; color: #505050; font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.02em;}
.table.selection-table thead th:nth-child(1) {width: 14%;}
.table.selection-table thead th:nth-child(2) {width: 29%;}
.table.selection-table thead th:nth-child(3) {width: 29%;}
.table.selection-table thead th:nth-child(4) {width: 28%;}
.sel-cards {display: flex; flex-wrap: wrap; gap: 24px;}
.sel-card {flex: 1 1 280px; min-width: 0; border: 1px solid #dfdfdf; border-radius: var(--radius-16); padding: var(--space-40); background: #fff;}
.sel-card .inner {display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-24);}
.sel-card .text {display: flex; flex-direction: column; gap: 16px; color: #505050;}
.sel-card .title {margin: 0; font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.02em;}
.sel-card .desc {margin: 0; font-size: var(--font-size-20); font-weight: 400; line-height: 1.7em; letter-spacing: -0.02em;}
.sel-card .icon {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden;}
.sel-card .icon img {display: block; max-width: 100%; height: auto;}
.sel-schedule {font-size: var(--font-size-24); line-height: 1.583em; letter-spacing: -0.02em;}

/* 장학금 신청 폼 */
.board-form-head {gap: var(--space-24);}
.board-form-head p {color: #484848; font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em;}
.apply-down-btn {display: flex; align-items: center; justify-content: center; gap: 4px; padding: var(--space-16); color: #1097F2; font-size: var(--font-size-16); font-weight: 600; line-height: 1.875em; letter-spacing: -0.02em; border-radius: 8px; border: 1px solid #1097F2;}
.apply-down-btn::after {content: ""; width: 24px; height: 24px; background: url(/images/sub/down-icon.svg) no-repeat center center / contain;}
.radio-wrap {display: flex; gap: var(--space-24);}
.submit-btn {min-width: 122px; height: 60px; font-size: var(--font-size-18); line-height: 1.77em; letter-spacing: -0.02em; border-radius: 8px;}
.board-form .input {border-radius: 8px; height: 48px;}

.apply-btn-wrap {display: flex; gap: var(--space-24);}

/********************* 열린마당 *********************/
/* 후원 안내 */
.guide-step {display: flex; flex-direction: column; gap: var(--space-30);}
.guide-head {display: flex; align-items: center; gap: var(--space-16);}
.guide-head .num {flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: #DEF0FD; border-radius: 8px; color: var(--color-primary); font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing: -0.02em;}
.guide-head .title-wrap {display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;}
.guide-head .title {margin: 0; color: #2c2c2c; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.02em;}
.guide-head .title-en {color: #878787; font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing: -0.02em;}
.guide-body {display: flex; flex-direction: column; gap: 20px;}
.account-box-wrap {display: flex; gap: 8px;}
.account-box {flex: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-24) 0; flex-wrap: wrap; min-width: 0; padding: var(--space-40) var(--space-60); background: #f6f6f6; border-radius: 8px;}
.account-box dl {flex: 1 1 33.3333%; min-width: 220px; margin: 0; display: flex; flex-direction: column; gap: 4px; padding-right: 20px;}
.account-box dt {color: #878787; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em;}
.account-box dd {margin: 0; color: #505050; font-size: var(--font-size-26); font-weight: 600; line-height: 1.538em; letter-spacing: -0.02em;}
.account-box dd.primary {color: var(--color-primary);}
.account-id-box {flex-shrink: 0; padding: var(--space-40); background: #fffdf5; border: 1px solid #e9c650; border-radius: 8px;}
.account-id-box dl {margin: 0; display: flex; flex-direction: column; gap: 4px;}
.account-id-box dt {color: #878787; font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em;}
.account-id-box dd {margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.account-id-box .id-num {color: #e9c650; font-size: var(--font-size-26); font-weight: 600; line-height: 1.538em; letter-spacing: -0.02em;}
.account-id-box .id-name {color: #505050; font-size: var(--font-size-18); font-weight: 500; line-height: 1.777em; letter-spacing: -0.02em;}
.guide-notice {margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px;}
.guide-notice li {position: relative; padding-left: 12px; color: #878787; font-size: var(--font-size-20); line-height: 1.6em; letter-spacing: -0.02em;}
.guide-notice li::before {content: ""; position: absolute; top: 0.85em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #878787;}
.guide-notice li .primary {color: var(--color-primary); font-weight: 500;}
.guide-lead {margin: 0; color: #676767; font-size: var(--font-size-20); line-height: 1.6em; letter-spacing: -0.02em;}
.table.tax-table thead th {padding: var(--space-16) var(--space-20); background: #0C74BB; border-top: 0; border-color: rgba(255,255,255,0.1); color: #fff; font-weight: 600;}
.table.tax-table thead th:first-child {width: 25%;}
.table.tax-table tbody th {padding: var(--space-16) var(--space-20); background: #F4FAFE; border: 1px solid #dfdfdf; border-left: 0; color: var(--color-primary); font-size: var(--font-size-20); font-weight: 500; line-height: 1.7em; letter-spacing: -0.02em; text-align: center;}
.table.tax-table tbody td {padding: var(--space-16) 20px; border: 1px solid #dfdfdf; border-right: 0; color: #676767; font-weight: 400; text-align: left; vertical-align: middle;}
.table.tax-table tbody td:last-child {border-right: 0;}
.table.tax-table .tax-desc {margin: 0; font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em;}
.table.tax-table .tax-desc .primary {color: var(--color-primary); font-weight: 500;}
.table.tax-table .tax-sub {margin: 4px 0 0; color: #878787; font-size: var(--font-size-18); line-height: 1.777em; letter-spacing: -0.02em;}
.receipt-box {padding: var(--space-40); background: #f6f6f6; border-radius: var(--radius-16);}
.receipt-inner {display: flex; align-items: center; gap: var(--space-24);}
.receipt-text {flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-16);}
.receipt-title {margin: 0; color: #505050; font-size: var(--font-size-24); font-weight: 500; line-height: 1.583em; letter-spacing: -0.02em;}
.receipt-desc {margin: 0; color: #676767; font-size: var(--font-size-20); line-height: 1.7em; letter-spacing: -0.02em;}
.receipt-inner .com-btn {flex-shrink: 0;}

.honor-banner {position: relative; overflow: hidden; background: url(/images/sub/honor-banner.jpg) no-repeat center center / cover; color: #fff;}
.honor-banner-inner {position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-60); padding: var(--space-120) 0;}
.honor-banner-cont {display: flex; flex-direction: column; gap: var(--space-60);}
.honor-banner-top {display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24);}
.honor-banner-head {display: flex; flex-direction: column; gap: 6px;}
.honor-banner-head .title-en {margin: 0; color: rgba(255,255,255,0.64); font-size: var(--font-size-22); font-weight: 500; line-height: 1.636em; letter-spacing: -0.02em;}
.honor-banner-head .title {margin: 0; font-size: var(--font-size-48); font-weight: 600; line-height: 1.291em; letter-spacing: -0.02em;}
.honor-banner-btn {flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-20); padding: var(--space-14) var(--space-20); border: 1px solid #fff; border-radius: 8px; color: #fff; font-size: var(--font-size-18); font-weight: 600; line-height: 1.777em; letter-spacing: -0.02em; transition: all .3s;}
.honor-banner-btn .arrow {display: flex; align-items: center; justify-content: center; width: 16px; height: 16px;}
.honor-banner-btn:hover {background: #fff; color: var(--color-primary);}
.honor-banner-btn:hover .arrow path {stroke: var(--color-primary);}
.honor-banner-desc {margin: 0; color: rgba(255,255,255,0.8); font-size: var(--font-size-22); font-weight: 500; line-height: 1.636em; letter-spacing: -0.02em;}
.honor-tags {display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;}
.honor-tag {display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: var(--space-10) var(--space-18); background: rgba(255,255,255,0.24); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; backdrop-filter: blur(20px); color: rgba(255,255,255,0.8); font-size: var(--font-size-20); line-height: 1.6em; letter-spacing: -0.02em;}
.honor-tag.is-gold {background: rgba(233,198,80,0.24); border-color: rgba(233,198,80,0.08); color: #e9c650;}
.honor-tag .icon {display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;}
.honor-tag .icon img {display: block; width: 100%; height: 100%;}

/* 기부금 모금액 및 활용실적 */
.usage-img {border-radius: 80px 16px 80px 16px; overflow: hidden;}
.usage-table-note {margin-bottom: var(--space-16); color: #505050; font-size: var(--font-size-18); line-height: 1.7em;}
.usage-table thead th:nth-child(1) {width: 33.33%;}
.usage-table thead th:nth-child(2) {width: 33.33%;}
.usage-table thead th:nth-child(3) {width: 33.34%;}
.table.usage-table thead th {color: #2c2c2c; font-size: var(--font-size-28); line-height: 1.5em;}
.table.usage-table tbody td:first-child {font-weight: 400; color: #676767;}

/* 명예의 전당 */
.honor-tab ul {display: flex; gap: 4px; padding: 10px; background: #F6F6F6; border-radius: 500px;}
.honor-tab ul li a {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 197px; padding: 10px; background: transparent; border-radius: 500px; color: #505050; font-size: var(--font-size-20); line-height: 1.7em;}
.honor-tab ul li.active a {background: var(--color-sub); color: #fff;}
.honor-tab ul li a {color: #505050; font-size: var(--font-size-20); line-height: 1.7em;}
.honor-tab ul li a:hover {background: var(--color-sub); color: #fff;}

.honor-note {margin-bottom: var(--space-30);}
.honor-note p {color: #878787; font-size: var(--font-size-20); line-height: 1.7em; font-weight: 500;}
.honor-list ul {display:flex; flex-wrap:wrap; gap: 8px;}
.honor-list ul li {width:calc(25% - 6px); padding: var(--space-30); border-radius: 8px; text-align:center; background: no-repeat center / cover;}
.honor-list.gold ul li {background-image: url(/images/sub/honor1.jpg);}
.honor-list.silver ul li {background-image: url(/images/sub/honor2.jpg);}
.honor-list.bronze ul li {background-image: url(/images/sub/honor3.jpg);}
.honor-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.honor-list .name-box {display: flex; align-items: center; justify-content: center; gap: var(--space-10);}
.honor-list .name-box .icon {flex-shrink: 0; width: 24px; height: 24px; background: no-repeat center / contain;}
.honor-list .name-box .name {color: #2c2c2c; font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; }
.honor-list .name-box .icon1 {background-image: url(/images/sub/honor-icon1.svg);}
.honor-list .name-box .icon2 {background-image: url(/images/sub/honor-icon2.svg);}
.honor-list .name-box .icon3 {background-image: url(/images/sub/honor-icon3.svg);}
.honor-list .name-box .icon4 {background-image: url(/images/sub/honor-icon4.svg);}
.honor-list .name-box .icon5 {background-image: url(/images/sub/honor-icon5.svg);}
.honor-list .info {margin-top: 8px;}
.honor-list .info span {display: block; color: rgba(44, 44, 44, 0.48); font-size: var(--font-size-18); line-height: 1.777em; font-weight: 500;}
.honor-more {margin-top: var(--space-120); padding: var(--space-30); text-align: center; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; color: #878787 ;}
.honor-more strong {color: #242424; font-weight: 600;}

/********************* 갤러리 *********************/

