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

/* 공통 */


/* 장학사업 안내 */
.scholarship-intro .intro {width: 100%; padding: var(--space-25); border: 1px solid rgba(87, 172, 70, 0.5); border-radius: var(--radius-16); background: #f8fff6; text-align: center; margin-bottom: var(--space-100);}
.scholarship-intro .intro .tit {font-family: 'Paperlogy', sans-serif; font-size: var(--font-size-18); font-weight: 500; line-height: 1.67; color: #242424; margin-bottom: 8px;}
.scholarship-intro .intro .tit strong {color: var(--color-primary); font-weight: 700;}
.scholarship-intro .intro .desc {line-height: 1.625; color: #454545;}
.scholarship-intro .list {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);}
.scholarship-intro .item a {display: flex; flex-direction: column; align-items: center; gap: var(--space-20); width: 100%; text-align: center;}
.scholarship-intro .item .img-wrap {width: 100%; height: 0; padding-bottom: 61.055%; position: relative;}
.scholarship-intro .item .img-wrap::before {content: ''; position: absolute; pointer-events: none; user-select: none; z-index: 1;}
.scholarship-intro .item .img {width: 100%; height: 100%; position: absolute; z-index: 0;}
.scholarship-intro .item .img::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; z-index: 1; border: 4px solid var(--color-secondary); border-radius: var(--radius-32); background: rgba(0, 0, 0, 0.4); opacity: 0; transition: all .3s;}
.scholarship-intro .item .img img {width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; top: 0; left: 0; border-radius: var(--radius-32); overflow: hidden;}
.scholarship-intro .item p {font-family: 'Paperlogy', sans-serif; font-size: var(--font-size-20); font-weight: 600; line-height: 1.4; color: #242424; transition: all .3s;}
.scholarship-intro .item1 .img-wrap::before {width: clamp(68px, calc(98 / var(--inner) * 100vw), 98px); height: clamp(22px, calc(32 / var(--inner) * 100vw), 32px); top: 0; left: clamp(22px, calc(42 / var(--inner) * 100vw), 42px); transform: translateY(-100%); background: url('/images/sub/scholarship-deco1.svg') no-repeat center center / contain;}
.scholarship-intro .item2 .img-wrap::before {width: clamp(39px, calc(56 / var(--inner) * 100vw), 56px); height: clamp(39px, calc(55 / var(--inner) * 100vw), 55px); top: 0; left: 0; transform: translate(-35%, -35%); background: url('/images/sub/scholarship-deco2.svg') no-repeat center center / contain;}
.scholarship-intro .item3 .img-wrap::before {width: clamp(44px, calc(78 / var(--inner) * 100vw), 78px); height: clamp(38px, calc(66 / var(--inner) * 100vw), 66px); bottom: 0; left: 0; transform: translate(-22%, 50%); background: url('/images/sub/scholarship-deco3.svg') no-repeat center center / contain;}
.scholarship-intro .item3 .img-wrap::after {width: clamp(46px, calc(71 / var(--inner) * 100vw), 71px); height: clamp(41px, calc(65 / var(--inner) * 100vw), 65px); top: 0; right: clamp(24px, calc(48 / var(--inner) * 100vw), 48px); transform: translateY(-100%); background: url('/images/sub/scholarship-deco4.svg') no-repeat center center / contain; content: ''; position: absolute; pointer-events: none; user-select: none; z-index: 1;}
.scholarship-intro .item a:hover .img::before {opacity: 1;}
.scholarship-intro .item a:hover p {color: var(--color-tertiary);}

.scholarship .overview {background: #f8fff6; border-radius: var(--radius-32); padding: 0; overflow: hidden; margin-bottom: var(--space-40); position: relative;}
.scholarship .overview .txt-wrap {padding: var(--space-60); position: relative; z-index: 1;}
.scholarship .overview h3 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-40); font-weight: 700; line-height: 1.5; margin-bottom: var(--space-24);}
.scholarship .overview .desc {color: #454545; line-height: 1.75; margin-bottom: var(--space-40);}
.scholarship .overview .btn {display: inline-flex; align-items: center; justify-content: center; font-family: 'Paperlogy', sans-serif; color: #fff; font-weight: 600; line-height: 1.5; background: var(--color-primary); border-radius: 50px; padding: var(--space-16) var(--space-30); transition: all .3s;}
.scholarship .overview .btn:hover {box-shadow: 0 var(--space-8) var(--space-20) 0 rgba(87, 172, 70, 0.5);}
.scholarship .overview .img {margin-top: auto; margin-left: auto; position: absolute; bottom: 0; right: 0; z-index: 0; width: clamp(400px, calc(573 / var(--inner) * 100vw), 573px); height: auto;}
.scholarship .overview .img img {width: 100%; height: 100%; object-fit: contain; user-select: none;}

.scholarship section {padding: var(--space-50) 0;}
.scholarship section:last-child {padding-bottom: 0;}
.scholarship .sec1 {padding-top: 0;}
.scholarship .sec1 .items {display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);}
.scholarship .sec1 .item {padding: var(--space-30); border-bottom: 3px solid var(--color-primary); border-radius: var(--radius-16); background: #fff; box-shadow: 0 0 var(--space-16) 0 rgba(0, 0, 0, 0.10);}
.scholarship .sec1 .item .icon {background: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-20); padding: var(--space-10); border-radius: var(--radius-8);}
.scholarship .sec1 .item .icon img {width: 28px; height: 28px; object-fit: contain; user-select: none;}
.scholarship .sec1 .item .tit {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-20); font-weight: 600; line-height: 1.4; margin-bottom: var(--space-10);}
.scholarship .sec1 .item .desc {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-18); font-weight: 500; line-height: 1.55;}
.scholarship .head {display: flex; align-items: center; margin-bottom: var(--space-20);}
.scholarship .head .num {font-family: 'Paperlogy', sans-serif; color: #fff; font-size: var(--font-size-18); font-weight: 700; line-height: 1.5; border-radius: var(--radius-8); background: var(--color-primary); width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; margin-right: var(--space-10);}
.scholarship .head h4 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-24); font-weight: 600; line-height: 1.33; flex: 1; padding-top: 1px;}
.scholarship .list > li {display: grid; grid-template-columns: clamp(100px, calc(200 / var(--inner) * 100vw), 200px) 1fr; gap: var(--space-20); align-items: center; padding: var(--space-20) var(--space-16); border-bottom: 1px dashed #ddd;}
.scholarship .list .tit {color: #242424; font-size: var(--font-size-18); font-weight: 600; line-height: 1.44; position: relative; padding-left: 24px;}
.scholarship .list .tit::before {content: ''; width: 8px; height: 8px; background: var(--color-primary); border-radius: 2px; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.scholarship .list .txt {color: #454545; font-size: var(--font-size-18); line-height: 1.44;}
.scholarship .list .txt .in-list {margin-top: var(--space-10); font-size: var(--font-size-16); line-height: 1.62;}

/* 사업신청 */
.apply .warning {display: flex; align-items: center; gap: var(--space-20); padding: var(--space-24) var(--space-40); border: 1px solid rgba(87, 172, 70, 0.40); border-radius: var(--radius-16); background: rgba(28, 172, 0, 0.02); margin-bottom: var(--space-60);}
.apply .warning .icon {display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary); border-radius: 50%; padding: var(--space-20);}
.apply .warning .icon img {width: clamp(16px, calc(48 / var(--inner) * 100vw), 48px); height: auto; object-fit: contain; user-select: none;}
.apply .warning .tit {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-18); font-weight: 600; line-height: 1.55; margin-bottom: var(--space-8);}
.apply .warning .list li {color: #454545; font-size: var(--font-size-16); line-height: 1.75; padding-left: 12px; position: relative;}
.apply .warning .list li::before {content: ''; width: 3px; height: 3px; background: var(--color-primary); border-radius: 50%; position: absolute; top: 12px; left: 2px;}

/* 신청완료 */
.grantdone {padding: var(--space-100) 0 0;}
.grantdone .box {padding: var(--space-50); border-radius: var(--radius-32); border: 1px solid #ddd; width: 100%; max-width: 570px; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; position: relative;}
.grantdone .box::before {content: ''; position: absolute; width: clamp(40px, calc(101 / var(--inner) * 100vw), 101px); height: clamp(35px, calc(88 / var(--inner) * 100vw), 88px); left: 0; top: 0; transform: translate(-45%, -25%) rotate(90deg); background: url('/images/sub/scholarship-deco3.svg') no-repeat center center / contain; pointer-events: none; user-select: none; z-index: 1;}
.grantdone .box::after {content: ''; position: absolute; width: clamp(50px, calc(104 / var(--inner) * 100vw), 104px); height: clamp(46px, calc(96 / var(--inner) * 100vw), 96px); bottom: 0; right: 0; transform: translate(72%, 2%); background: url('/images/sub/scholarship-deco4.svg') no-repeat center center / contain; pointer-events: none; user-select: none; z-index: 1;}
.grantdone .box h2 {color: #242424; font-size: var(--font-size-40); font-weight: 700; line-height: 1.2; margin-bottom: var(--space-30);}
.grantdone .box .txt {color: #686868; margin-bottom: var(--space-40); line-height: 1.5;}
.grantdone .box .txt strong {color: var(--color-secondary); font-weight: 700;}
.grantdone .box .icon {width: clamp(100px, calc(130 / var(--inner) * 100vw), 130px); height: clamp(100px, calc(130 / var(--inner) * 100vw), 130px); border-radius: 50%; background: rgba(28, 172, 0, 0.05); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-40);}
.grantdone .box .icon img {width: clamp(50px, calc(64 / var(--inner) * 100vw), 64px); height: clamp(42px, calc(54 / var(--inner) * 100vw), 54px);}
.grantdone .box .btn-pack {width: 100%; font-size: var(--font-size-18);}

/* 소개 및 인사말 */
.greetings .contain {max-width: 1460px;}
.greetings .txt-wrap {text-align: center; margin-bottom: var(--space-80);}
.greetings .txt-wrap .symbol {margin: 0 auto var(--space-30); width: clamp(35px, calc(57 / var(--inner) * 100vw), 57px); height: auto;}
.greetings .txt-wrap .symbol img {width: 100%; height: 100%; object-fit: contain; user-select: none;}
.greetings .txt-wrap h3 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-28); font-weight: 600; line-height: 1.5; margin-bottom: var(--space-40);}
.greetings .txt-wrap h3 span {color: var(--color-primary);}
.greetings .txt-wrap p {font-size: var(--font-size-18); line-height: 1.66; margin-bottom: var(--space-30);}
.greetings .txt-wrap p:last-child {margin-bottom: 0;}
.greetings .img-wrap {width: 100%; height: clamp(160px, calc(512 / var(--inner) * 100vw), 512px); position: relative;}
.greetings .img-wrap img {position: absolute; user-select: none;}
.greetings .img-wrap .people-wrap {display: block; position: absolute; z-index: 1; width: clamp(320px, calc(974 / var(--inner) * 100vw), 974px); height: clamp(155px, calc(473 / var(--inner) * 100vw), 473px); left: 50%; bottom: var(--space-40); transform: translateX(-50%);}
.greetings .img-wrap .people-wrap .people {width: 100%;}
.greetings .img-wrap .bg {z-index: 0; width: 100%; left: 0; bottom: 0;}

/* 재단 임원진 */
.executives .status {margin-top: var(--space-100);}
.executives .status .head {margin-bottom: var(--space-30); position: relative; padding-left: 20px;}
.executives .status .head::before {content: ''; width: 3px; height: 100%; background: var(--color-primary); border-radius: 3px; position: absolute; top: 0; left: 0;}
.executives .status .head h3 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-22); font-weight: 600; line-height: 1.36; margin-bottom: 4px;}
.executives .status .head span {display: block; font-size: var(--font-size-12); line-height: 1; color: #bebebe; letter-spacing: 0.01em;}
.executives .status .cont {overflow-x: auto;}
.executives .status .cont table {width: 100%; border-collapse: collapse; border-spacing: 0; text-align: center; border-top: 2px solid #242424;}
.executives .status .cont table th {padding: var(--space-10) var(--space-20); border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; background: rgba(28, 172, 0, 0.02); color: #242424; font-weight: 600;}
.executives .status .cont table td {padding: var(--space-16) var(--space-20); border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; line-height: 1.87;}
.executives .status .cont table td:last-child {border-right: none;}
.executives .status .cont table td.name {color: #242424; font-weight: 600;}

/* 주요연혁 */
.history-bg {padding: var(--space-90) var(--space-20); text-align: center; background: url('../images/sub/history-bg.jpg') no-repeat center center / cover; color: #fff; border-radius: var(--radius-60) var(--radius-60) var(--radius-16) var(--radius-16); margin-bottom: var(--space-20);}
.history-bg .since {display: block; margin-bottom: var(--space-16); color: rgba(255, 255, 255, 0.4); font-weight: 600;}
.history-bg h3 {font-family: 'Paperlogy', sans-serif; font-size:var(--font-size-36); margin-bottom: var(--space-16); font-weight: 700; line-height: 1.1;}
.history-bg .desc {font-size: var(--font-size-18); font-weight: 500; line-height: 1.33;}

.history-timeline {position:relative; padding-top:var(--space-100); --dot-top: clamp(-30px, calc( -38 / var(--inner) * 100vw ), -28px);}
.history-timeline:after {position: absolute; content: ''; top: var(--dot-top); left: 50%; transform: translateX(-50%); width:clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); height: clamp(30px, calc( 40 / var(--inner) * 100vw ), 40px); background: url('../images/sub/history-dot.svg') no-repeat center center / contain; z-index: 100; transition: top 0.1s ease-out;}

.history-timeline .timeline-line {position:absolute; top:0; left:50%; transform:translateX(-50%); width:clamp(2px, calc( 4 / var(--inner) * 100vw ), 4px); height:100%; background:rgba(0, 0, 0, 0.05); z-index:1; border-radius: 4px;}
.history-timeline .timeline-item {position:relative; display:flex; justify-content: center;margin-bottom:clamp(60px, calc( 150 / var(--inner) * 100vw ), 150px); z-index:2;}
.history-timeline .timeline-item:last-child {margin-bottom:0;}
.history-timeline .timeline-year {font-size:clamp(26px, calc( 48 / var(--inner) * 100vw ), 48px); font-weight:700; line-height:1; white-space:nowrap; color: rgba(87, 172, 70, 0.40); width:50%; transition: color 0.4s ease;}
.history-timeline .timeline-img {margin-top:var(--space-40);}
.history-timeline .timeline-img .imgbx {max-width:400px;}
.history-timeline .timeline-img .images {position:relative; padding-bottom:59.17%; overflow:hidden; border-radius: var(--radius-24);}
.history-timeline .timeline-img .images img{position:absolute; top:50%; left:0; transform:translateY(-50%); transform-origin:center center; width:100%; height:auto; max-width:100%; min-height:100%; object-fit:cover; transition:transform 0.55s ease;}
.history-timeline .timeline-img .images:hover img{transform:translateY(-50%) scale(1.05);}
.history-timeline .timeline-content { margin-top:var(--space-15); position: relative; font-size:clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight:400; line-height:1.5; letter-spacing:-0.6px; width:50%;}
.history-timeline .timeline-content:before ,
.history-timeline .timeline-content:after {position: absolute; content: ''; transition: all 0.4s ease;}
.history-timeline .timeline-content:before  {top: 5px; width:20px; height: 20px; border-radius: 50%; background: #fff; border: 6px solid #bcdeb5;}
.history-timeline .timeline-content:after {width: clamp(15px, calc( 64 / var(--inner) * 100vw ), 64px); border: 1px dashed rgba(255, 255, 255, 0.60); top: 14px;}
.history-timeline .timeline-text {display: flex;flex-direction: column; gap: var(--space-20);}
.history-timeline .timetext-item {display: flex; font-size: var(--font-size-18); opacity: .6;}
.history-timeline .timetext-item .date {width: 55px; color: rgba(36, 36, 36, 0.6); font-weight: 700; transition: color 0.4s ease;}
.history-timeline .timetext-item .textbx {flex: 1; display: flex;flex-direction: column; gap: var(--space-20); color: #454545; transition: color 0.4s ease;}
.history-timeline .timeline-item:nth-child(even) {flex-direction: row-reverse;}
.history-timeline .timeline-item:nth-child(even) .timetext-item {flex-direction: row-reverse;}
.history-timeline .timeline-item:nth-child(odd) .timeline-content {text-align:left; padding-left:clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px);  }
.history-timeline .timeline-item:nth-child(even) .timeline-content {text-align:right; padding-right:clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px);  }
.history-timeline .timeline-item:nth-child(odd) .timeline-content:after  {left: 13px; }
.history-timeline .timeline-item:nth-child(even) .timeline-content:after  {right: 13px; }
.history-timeline .timeline-item:nth-child(odd) .timeline-content:before  {left: -10px; }
.history-timeline .timeline-item:nth-child(even) .timeline-content:before  {right: -10px; }
.history-timeline .timeline-item:nth-child(odd) .timeline-year {text-align:right; padding-right:clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); }
.history-timeline .timeline-item:nth-child(even) .timeline-year {text-align:left; padding-left:clamp(30px, calc( 100 / var(--inner) * 100vw ), 100px); }
.history-timeline .timeline-item:nth-child(odd) .timeline-img .imgbx {margin-left: auto;}
.history-timeline .timeline-item:nth-child(even) .timeline-img .imgbx {margin-right: auto;}
.history-timeline .timeline-item.active .timeline-year {color: var(--color-primary);}
.history-timeline .timeline-item.active .timeline-content:before {background: #fff; border-color: var(--color-primary);} 
.history-timeline .timeline-item.active .timeline-content:after {border-color: var(--color-primary);}
.history-timeline .timeline-item.active .timetext-item {opacity: 1;}
.history-timeline .timeline-item.active .timetext-item .date {color: #242424;}

/* 정관 */
.articles > ul > li {margin-bottom: 8px;}
.articles > ul > li:last-child {margin-bottom: 0;}
.articles .tit a {display: flex; align-items: center; justify-content: space-between; position: relative; background: #f8f8f8; font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-2412); font-weight: 600; line-height: 1.33; padding: var(--space-24) var(--space-40); transition: all .3s; overflow: hidden;}
.articles .tit a::before {content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--color-primary);}
.articles .tit a .more {width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #ddd; color: #868686; transition: all .3s;}
.articles .tit a .more .icon {width: 14px; height: 14px; position: relative; display: block; transition: .3s;}
.articles .tit a .more .icon::before {content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: #868686; transform: translateY(-50%); transition: .3s;}
.articles .tit a .more .icon::after {content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: #868686; transform: translateX(-50%); transition: .3s;}
.articles .tit a .more svg {transition: all .3s;}
.articles .cnt {padding: var(--space-20) var(--space-30) var(--space-80); line-height: 1.62; display: none;}
.articles .cnt section {padding: var(--space-20) 0;}
.articles .cnt h4 {color: #242424; font-size: var(--font-size-18); font-weight: 600; line-height: 1.44; margin-bottom: var(--space-20);}
.articles .cnt .num-list li {text-indent: -17px; padding-left: 17px;}
.articles .cnt table {border-spacing: 0; border-collapse: collapse; text-align: center; margin-top: var(--space-20);}
.articles .cnt table thead th {border: 1px solid #ddd; padding: var(--space-10) var(--space-20); background: #f8f8f8; white-space: nowrap;}
.articles .cnt table tbody td {border: 1px solid #ddd; padding: var(--space-10) var(--space-20);}
.articles .cnt table tbody td:nth-child(2) {white-space: nowrap;}
.articles .cnt table tbody td:nth-child(3) {text-align: left;}
[lang="en"] .articles .cnt table tbody td:nth-child(2) {white-space: inherit;}
.articles .active .tit a {border-radius: var(--radius-16) var(--radius-16) 0 0; background: var(--color-primary); color: #fff;}
.articles .active .tit a .more {border-color: var(--color-secondary); background: var(--color-secondary); color: #fff;}
.articles .active .tit a .more svg {transform: rotate(45deg);}
.articles .active .tit a .more .icon {transform: rotate(45deg);}
.articles .active .tit a .more .icon::before {background: #fff;}
.articles .active .tit a .more .icon::after {background: #fff;}

/* 오시는 길 */
.root_daum_roughmap {width: 100% !important; height: clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}
.root_daum_roughmap .wrap_map {height: 100% !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
.root_daum_roughmap_landing .border2 {display: block !important;}
.root_daum_roughmap .cont {display: none !important;}

.directions .cont iframe {width: 100% !important; height: clamp(300px, calc( 500 / var(--inner) * 100vw ), 500px) !important;}

.directions section {padding-bottom: var(--space-100);}
.directions section:last-child {padding-bottom: 0;}
.directions .head {margin-bottom: var(--space-30); position: relative; padding-left: 20px;}
.directions .head::before {content: ''; width: 3px; height: 100%; background: var(--color-primary); border-radius: 3px; position: absolute; top: 0; left: 0;}
.directions .head h3 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-22); font-weight: 600; line-height: 1.36; margin-bottom: 4px;}
.directions .head span {display: block; font-size: var(--font-size-12); line-height: 1; color: #bebebe; letter-spacing: 0.01em;}
.directions .location .info {margin-top: var(--space-30); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-30);}
.directions .location .info .item {display: flex; gap: var(--space-10); border: 1px solid #ddd; border-radius: var(--radius-24); padding: var(--space-30);}
.directions .location .info .txt h4 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-20); font-weight: 600; line-height: 1.4; margin-bottom: var(--space-20);}
.directions .location .info .txt p {line-height: 1.5;}
.directions .location .info .icon {width: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); height: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-primary); flex: 0 0 auto; margin-left: auto; user-select: none;}
.directions .location .info .icon img {width: clamp(14px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(30px, calc( 24 / var(--inner) * 100vw ), 24px);}
.directions .access .head::before {background: var(--color-secondary);}
.directions .access .items {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-30); margin-bottom: var(--space-60);}
.directions .access .items:last-child {margin-bottom: 0;}
.directions .access .item {border: 1px solid #ddd; border-radius: var(--radius-24); padding: var(--space-30);}
.directions .access .item .tit {margin-bottom: var(--space-20); display: flex; align-items: center;}
.directions .access .item .tit .icon {width: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); height: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-secondary); flex: 0 0 auto; margin-right: var(--space-16); user-select: none;}
.directions .access .item .tit .icon img {width: clamp(16px, calc( 24 / var(--inner) * 100vw ), 24px); height: clamp(30px, calc( 24 / var(--inner) * 100vw ), 24px);}
.directions .access .item .tit h4 {font-family: 'Paperlogy', sans-serif; color: #242424; font-size: var(--font-size-20); font-weight: 600; line-height: 1.3;}
.directions .access .item .txt {background: #f8f8f8; border-radius: var(--radius-16); padding: var(--space-20); line-height: 1.75;}
.directions .access .item .txt span {color: var(--color-secondary);}
.directions .access .item .txt strong {color: var(--color-secondary); font-weight: 600;}
.directions .access .item .txt .tt {color: #242424; font-size: var(--font-size-18); font-weight: 500; margin-bottom: var(--space-14);}