@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 

/* 공통 */
.point {color:var(--color-primary);}

/* 인사말 */
.greetings {overflow: hidden;}
.greetings section {padding: 0 var(--space-container);}
.greetings .sec1 {background: #f4f5fa; margin-top: var(--space-80);}
.greetings .sec1 .contain {display:flex; align-items:center; justify-content:space-between; gap:var(--space-40); padding: 0;}
.greetings .sec1 .txt {font-size:var(--font-size-32); line-height:1.25; color:#242424; font-weight:600; padding: var(--space-80) 0;}
.greetings .sec1 .txt .point {font-weight: 700;}
.greetings .sec1 .img {width:clamp(300px, calc(687 / var(--inner) * 100vw), 687px); margin-top: calc(var(--space-80) * -1);}
.greetings .sec1 .img img {width:100%; height:100%; object-fit:contain;}
.greetings .sec2 {padding-top: var(--space-60);}
.greetings .sec2 .contain {border: 1px solid #ddd; padding: var(--space-60); border-radius: var(--radius-36); position: relative;}
.greetings .sec2 .contain::before {content: ''; position: absolute; bottom: 0; right: var(--space-60); width: clamp(80px, calc(280 / var(--inner) * 100vw), 280px); height: clamp(41px, calc(142 / var(--inner) * 100vw), 142px); background: url('/images/sub/greetings-logo.svg') no-repeat right bottom / contain;}
.greetings .sec2 .tit {font-size:var(--font-size-24); line-height:1.33; color:#242424; font-weight:600; margin-bottom: var(--space-30);}
.greetings .sec2 .tit .point {font-weight: 700;}
.greetings .sec2 .txt-wrap p {line-height:1.75; margin-bottom: var(--space-30);}
.greetings .sec2 .txt-wrap p:last-child {margin-bottom: 0;}
.greetings .sec2 .sign {margin-top: var(--space-30); font-size:var(--font-size-18); line-height:1.33; color:#242424; font-weight:500;}

/* 협회 정관, 규칙 */
.articles > section {padding-bottom: var(--space-100);}
.articles > section:last-child {padding-bottom: 0;}
.articles .chap {margin-bottom: var(--space-30); color: #242424; font-size:var(--font-size-24); line-height:1.33; font-weight:600;}
.articles .item {padding-bottom: var(--space-60);}
.articles .item:last-child {padding-bottom: 0;}
.articles .head {display: inline-flex; align-items:center; justify-content: center; text-align: center; color: #fff; font-size:var(--font-size-18); line-height:1.55; font-weight:600; padding: var(--space-6) var(--space-20); background: var(--color-primary); border-radius: var(--radius-8) var(--radius-8) 0 0;}
.articles .cont {padding: var(--space-20); background: rgba(33, 64, 154, 0.03); border-radius: 0 var(--radius-8) var(--radius-8) var(--radius-8); line-height: 1.87;}
.articles .lead {color: #454545; font-weight: 500;}
.articles .num-list li {text-indent: -1em; padding-left: 1em;}
.articles ul .num-list,
.articles ol .num-list {color: #686868; margin: 4px 0;}
.articles ul > li:last-child > .num-list,
.articles ol > li:last-child > .num-list {margin-bottom: 0;}
.articles .table {width:100%; border-collapse:collapse; border-spacing:0px; background: #fff; font-size: var(--font-size-16); line-height: 1.25; margin: var(--space-30) 0;}
.articles .table:last-child {margin-bottom: 0;}
.articles .table thead th {background: #f8f8f8; border: 1px solid #ddd; color: #242424; font-weight: 500; padding: var(--space-20);}
.articles .table tbody th {border: 1px solid #ddd; color: #242424; font-weight: 400; padding: var(--space-10); text-align: center;}
.articles .table tbody td {border: 1px solid #ddd; font-size: var(--font-size-14); padding: var(--space-6) var(--space-10); text-align: center;}

/* 연혁 */
.history .item {position: relative; padding-bottom: var(--space-100); display: flex; align-items: center; gap: var(--space-50);}
.history .item::before {content: ''; position: absolute; top: 16px; width: 1px; height: 100%; background: #ddd;}
.history .item:last-child {padding-bottom: 0;}
.history .item:last-child::before {content: none;}
.history .item .year {font-size:var(--font-size-32); line-height:1.25; color:#242424; font-weight:700; position: relative; align-self: flex-start;}
.history .item .year::before {content: ''; position: absolute; top: 50%; transform: translate(-50%); width: 16px; height: 16px; background: #fff; border: 4px solid var(--color-primary); border-radius: 50%;}
.history .item .list li {display: flex; align-items: flex-start; gap: 20px; line-height:1.5; min-height: 40px; padding: var(--space-7) 0;}
.history .item .list h4 {color: #868686; font-size:var(--font-size-18); line-height:1.5; font-weight:600; margin-top: -2px; font-variant-numeric: tabular-nums;}
.history .item.right {padding-left: 50%;}
.history .item.right .year {padding-left: var(--space-60);}
.history .item.right .year::before {left: 0; transform: translate(-50%, -50%);}
.history .item.left {padding-right: calc(50% - 1px); flex-direction: row-reverse;}
.history .item.left .year {padding-right: var(--space-60);}
.history .item.left .year::before {right: 0; transform: translate(50%, -50%);}
.history .item.left .list li {flex-direction: row-reverse;}
.history .item.left .list p {text-align: right;}

/* 인증·협약자료 */
.certification .items {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-60) var(--space-30);}
.certification .item {text-align: center;}
.certification .item .img {width: 100%; height: 0; padding-bottom: 137.04%; position: relative;}
.certification .item .img::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #ddd; z-index: 1;}
.certification .item .img img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.certification .item p {font-size:var(--font-size-16); line-height:1.5; font-weight:500; margin-top: var(--space-24); word-break: break-all;}

/* 찾아오시는 길 */
.root_daum_roughmap_landing {width: 100% !important; height: clamp(300px, calc(500 / var(--inner) * 100vw), 500px) !important; border-radius: var(--radius-36) var(--radius-36) 0 0;}
.root_daum_roughmap .wrap_map {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .map_border {display: none !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
.root_daum_roughmap .cont {display: none !important;}
.directions .area {padding: var(--space-60); border-radius: 0 0 var(--radius-36) var(--radius-36); border: 1px solid #ddd; border-top: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-60);}
.directions .txt-wrap .sub-tit {display: block; color: var(--color-primary); font-size:var(--font-size-16); line-height:1.5; font-weight:600; margin-bottom: var(--space-20);}
.directions .txt-wrap .address {color: #242424; font-size:var(--font-size-28); line-height:1.28; font-weight:700;}
.directions .txt-wrap .address span {font-size:var(--font-size-18); line-height:1.44; font-weight:400;}
.directions .info {display: flex; flex-direction: column; gap: var(--space-30); width: 37.106%;}
.directions .info .item {display: flex; align-items: center; gap: var(--space-20);}
.directions .info .icon {width: clamp(28px, calc(32 / var(--inner) * 100vw), 32px); height: clamp(28px, calc(32 / var(--inner) * 100vw), 32px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); background: var(--color-primary); user-select: none;}
.directions .info .icon img {width: 18px; height: 18px; object-fit: contain;}
.directions .info .tit {display: inline-block; width: clamp(50px, calc(68 / var(--inner) * 100vw), 68px); color: #242424; font-size:var(--font-size-18); line-height:1.55; font-weight:600;}
.directions .info .desc {font-size:var(--font-size-16); line-height:1.87;}

/* 회원사 소개 공통 */
.members section {padding: var(--space-100) 0;}
.members section:first-child {padding-top: 0;}
.members section:last-child {padding-bottom: var(--space-150);}
.members section:nth-child(even) {background: #f8f8f8;}
.members .head {margin-bottom: var(--space-30);}
.members .head h3 {font-size:var(--font-size-24); line-height:1.33; color:#242424; font-weight:600; position: relative; padding-left: 40px;}
.members .head h3::before {content: ''; position: absolute; top: 50%; left: 0; width: 32px; height: 32px; background: url('/images/sub/members-tit.svg') no-repeat center / contain; transform: translateY(-50%);}
.members .table {width: 100%; border-collapse:collapse; border-spacing:0px; background: #fff; font-size: var(--font-size-16); line-height: 1.3; text-align: center;}
.members .table thead th {background: var(--color-primary); border-right: 1px solid #ddd; color: #fff; border-bottom: 0; font-size: var(--font-size-18); font-weight: 500; padding: var(--space-18);}
.members .table thead th:last-child {border-right: 1px solid var(--color-primary);}
.members .table tbody tr:first-child th,
.members .table tbody tr:first-child td {border-top: 0;}
.members .table tbody th {border: 1px solid #ddd; color: #242424; font-weight: 500; padding: var(--space-18);}
.members .table tbody td {border: 1px solid #ddd; padding: var(--space-18);}
.members .table tbody td a {color: var(--color-primary);}
.members .table tbody td a:hover {text-decoration: underline;}
.members .table-scroll {overflow-x: auto;}
.members .table-scroll .table {min-width: 880px;}

/* 회원 가입 안내 */
.membership .sec1 ol {display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-40);}
.membership .sec1 ol li {display: flex; align-items: center; justify-content: center; flex-direction: column; aspect-ratio: 1; border: 8px solid rgba(33, 64, 154, 0.1); border-radius: 50%; padding: var(--space-20); text-align: center;}
.membership .sec1 ol li .num {font-size:var(--font-size-20); line-height:1.2; color: var(--color-primary); font-weight:700; margin-bottom: var(--space-8);}
.membership .sec1 ol li p {color: #242424; font-size:var(--font-size-20); line-height:1.4; font-weight:600;}
.membership .sec2 .items {display: flex; flex-direction: column; gap: var(--space-60);}
.membership .sec2 .item {display: flex; align-items: center; gap: var(--space-40); background: #fff; border: 1px solid #ddd; border-radius: var(--radius-16); padding: var(--space-40);}
.membership .sec2 .item .tit {text-align: center; width: 14.312%;}
.membership .sec2 .item .tit .num {display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 22px; color: #fff; font-size:var(--font-size-14); line-height:1.2; font-weight:500; margin-bottom: var(--space-16); border-radius: 30px; background: var(--color-primary);}
.membership .sec2 .item .tit h4 {color: #242424; font-size:var(--font-size-18); line-height:1.4; font-weight:600;}
.membership .sec2 .item .cnt {padding-left: var(--space-40); position: relative; line-height: 1.87; width: calc(85.688% - var(--space-40));}
.membership .sec2 .item .cnt::before {content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #ddd;}
.membership .sec2 .item .cnt .list {margin-top: var(--space-20); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10); width: 100%;}
.membership .sec2 .item .cnt .list li {display: flex; align-items: center; gap: var(--space-8); border-radius: 40px; background: rgba(33, 64, 154, 0.03); padding: 4px var(--space-12);}
.membership .sec2 .item .cnt .list .num {display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: var(--color-primary); color: #fff; font-size:var(--font-size-12); line-height:1.2; font-weight:500; border-radius: 50%; padding-top: 1px;}
.membership .sec3 .items {display: grid; grid-template-columns: repeat(4, 1fr);}
.membership .sec3 .item {position: relative; padding: var(--space-40); border: 1px solid #ddd; border-right: 0; display: flex; flex-direction: column;}
.membership .sec3 .item:last-child {border-right: 1px solid #ddd; border-radius: 0 var(--radius-24) var(--radius-24) 0;}
.membership .sec3 .item:first-child {border-radius: var(--radius-24) 0 0 var(--radius-24);}
.membership .sec3 .item:nth-child(even) {background: rgba(33, 64, 154, 0.03);}
.membership .sec3 .item .icon {width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); background: var(--color-primary); user-select: none; margin-bottom: var(--space-30);}
.membership .sec3 .item .icon img {width: 20px; height: 20px; object-fit: contain;}
.membership .sec3 .item h4 {color: #242424; font-size:var(--font-size-20); line-height:1.4; font-weight:600; margin-bottom: var(--space-10);}
.membership .sec3 .item .desc {font-size:var(--font-size-16); line-height:1.75; margin-bottom: var(--space-30);}
.membership .sec3 .item a:hover {text-decoration: underline;}
.membership .sec3 .item .num {color: rgba(147, 149, 152, 0.08); font-size:var(--font-size-60); line-height:0.8; font-weight:800; margin: auto 0 0 auto;}
.membership .sec3 .item::after {content: ''; position: absolute; top: 50%; right: 0; width: clamp(32px, calc(40 / var(--inner) * 100vw), 40px); height: clamp(32px, calc(40 / var(--inner) * 100vw), 40px); background: #fff url('/images/sub/membership-join-arrow.svg') no-repeat 52% center; transform: translate(50%, -50%); border: 1px solid #ddd; border-radius: 50%; z-index: 1;}
.membership .sec3 .item:last-child::after {content: none;}
.membership .sec5 .box {border: 1px solid #ddd; border-radius: var(--radius-24); padding: var(--space-60); background: linear-gradient(94deg, rgba(11, 22, 52, 0.02) 0.36%, rgba(33, 64, 154, 0.08) 62.66%); position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-60);}
.membership .sec5 .box::before {content: ''; position: absolute; bottom: 0; right: var(--space-20); width: clamp(200px, calc(340 / var(--inner) * 100vw), 340px); height: clamp(101px, calc(172 / var(--inner) * 100vw), 172px); background: url('/images/sub/membership-feebank-logo.svg') no-repeat center / contain;}
.membership .sec5 .box .bank {display: block; color: var(--color-primary); font-size:var(--font-size-20); line-height:1.4; font-weight:600; margin-bottom: var(--space-10);}
.membership .sec5 .box .account {color: #242424; font-size:var(--font-size-32); line-height:1.25; font-weight:600; margin-bottom: var(--space-20);}
.membership .sec5 .box .name {color: #686868; font-size:var(--font-size-16); line-height:1.75;}
.membership .sec5 .box .btn-copy {width: clamp(120px, calc(160 / var(--inner) * 100vw), 160px); height: clamp(40px, calc(48 / var(--inner) * 100vw), 48px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-8); background: var(--color-primary); color: #fff; font-size:var(--font-size-16); line-height:1.5; font-weight:600; border: 0; cursor: pointer; margin: auto 0 0 auto; position: relative; z-index: 1;}