@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */ 
 
/* 공통 */
.sub-bg {background:url('/images/sub/sub-bg.png') right -10px bottom -120px no-repeat; background-size:30% auto;}

/* 구단 소개 */
.coach-message {display:flex; gap:var(--space-40); align-items:flex-start;}
.coach-message .message-left {flex:1 1 auto; min-width:0; width:1%; padding-right:var(--space-40);}
.coach-message .message-left .label {font-family:'GmarketSans',sans-serif; font-weight:700; font-size:var(--font-size-23); line-height:1.39em; color:var(--color-primary); margin-bottom:var(--space-20);}
.coach-message .message-left .title {font-weight:700; font-size:var(--font-size-32); line-height:1.47em; color:#242424; margin-bottom:var(--space-20);}
.coach-message .message-left .subtitle {font-weight:600; font-size:var(--font-size-20); line-height:1.3em; color:var(--color-primary); margin-bottom:var(--space-50);}
.coach-message .message-content {font-weight:500; font-size:var(--font-size-18); line-height:1.78em; color:#454545; margin-bottom:var(--space-10);}
.coach-message .message-content p {margin:0;}
.coach-message .message-signature {display:flex; align-items:center; gap:var(--space-20);}
.coach-message .signature-text {font-weight:500; font-size:var(--font-size-23); line-height:1.13em; color:#454545;}
.coach-message .signature-text strong {font-weight:600; color:#242424;}
.coach-message .signature-image {position:relative;}
.coach-message .message-right {width:50%; max-width:624px;}
.coach-message .coach-photo {border-radius:var(--radius-52) 0 0 var(--radius-52); overflow:hidden;}
.coach-message .coach-photo img {width:100%; height:100%; object-fit:cover;}

/* 지도자 소개 */
.coach-cards {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-30);}
.coach-card {position:relative; background:#fff; border:1px solid #ddd; border-radius:var(--radius-38); box-shadow:0 4px 15.4px 0 rgba(0,0,0,0.1); overflow:hidden;}
.coach-card .card-image {aspect-ratio:446/309; border-radius:var(--radius-38) var(--radius-38) 0 0; overflow:hidden;}
.coach-card .card-image img {width:100%; height:100%; object-fit:cover;}
.coach-card .card-content {height:350px; padding:var(--space-30) var(--space-50); display:flex; flex-direction:column; justify-content:flex-start;}
.coach-card .card-name {font-weight:700; font-size:var(--font-size-20); line-height:1.3em; color:#242424; margin-bottom:var(--space-16);}
.coach-card .card-subtitle {font-weight:600; font-size:var(--font-size-18); line-height:1.56em; color:#454545; margin-bottom:var(--space-20);}
.coach-card .coach-list li {padding-left:.7em; text-indent:-.7em; font-size:var(--font-size-18); line-height:1.56em; color:#454545;}
.coach-card .card-message {position:absolute; inset:0; background:var(--color-primary); opacity:0; border-radius:var(--radius-38); transition:opacity .3s; pointer-events:none; z-index:10;}
.coach-card .card-message:before {content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('/images/common/logo.svg') no-repeat center center; background-size:60% auto; opacity:0.1;}
.coach-card:hover .card-message {opacity:0.8;}
.coach-card .message-content {position:absolute; inset:0; padding:var(--space-50); display:flex; flex-direction:column; justify-content:center; font-size:var(--font-size-20); line-height:1.4em; letter-spacing:-.03em; color:#fff; text-align:left;}

/* 협력병원 */
.hospital-intro {display:flex; align-items:center; gap:var(--space-40); margin-bottom:var(--space-120);}
.hospital-intro .cnt {flex:1 1 auto; min-width:0; width:1%;}
.hospital-intro .cnt .tit-area {margin-bottom:var(--space-30);}
.hospital-intro .cnt .tit-area h2 {font-size:var(--font-size-47); line-height:1.3em; color:var(--color-primary); margin-bottom:var(--space-10);}
.hospital-intro .cnt .tit-area p {font-weight:500; font-size:var(--font-size-27); line-height:1.3em; color:#454545;}
.hospital-intro .cnt .txt-area {font-weight:500; font-size:var(--font-size-18); line-height:1.88em; color:#454545;}
.hospital-intro .cnt .txt-area p {margin:0;}
.hospital-intro .img {width:55%; max-width:758px;}
.hospital-intro .img img {width:100%; border-radius:var(--radius-38);}

.hospital-image {margin-bottom:var(--space-120);}
.hospital-image img {border-radius:var(--radius-38);}

.directions {display:flex; align-items:center; gap:var(--space-40); margin-bottom:var(--space-120);}
.directions .cnt {flex:1 1 auto; min-width:0; width:1%;}
.directions .cnt h2 {font-size:var(--font-size-32); line-height:1.3em; margin-bottom:var(--space-60);}
.directions .cnt .info-item {display:flex; flex-direction:column; gap:var(--space-20); margin-bottom:var(--space-80); font-size:var(--font-size-18); line-height:1.5em; color:#484848;}
.directions .cnt .info-item dl {display:flex;}
.directions .cnt .info-item dl dt {font-weight:600; font-size:var(--font-size-18); color:var(--color-primary);}
.directions .cnt .info-item dl dt img {vertical-align:middle; margin:-.02em 10px 0 0;}
.directions .cnt .info-item dl dt:after {content:''; display:inline-block; vertical-align:middle; width:1px; height:10px; background:#ddd; margin:0 var(--space-20);}
.directions .cnt .info-item dl dd {flex:1 1 auto; min-width:0; width:1%;}
.directions .map-area {width:55%; max-width:758px;}
.directions .map-area .root_daum_roughmap {width:100% !important; border-radius:var(--radius-38);}
.directions .map-area .root_daum_roughmap .wrap_map {height:clamp(240px, calc(435 / var(--inner) * 100vw), 435px) !important;}
.directions .map-area .root_daum_roughmap .cont {display:none !important;}
.directions .btn-link {display:inline-flex; align-items:center; gap:4px; font-weight:500; font-size:var(--font-size-20); line-height:1.5em; color:#999; padding:var(--space-10) var(--space-20); border-radius:var(--radius-8); border:1px solid #999;}
.directions .btn-link:hover {background:#999; color:#fff;}

/* FAQ */
.faqs .item {border:1px solid #ddd; margin-bottom:var(--space-15);}
.faqs .item:last-child {margin-bottom:0;}
.faqs .item.active {background:#FAFAFA;}
.faqs .qustion {position:relative; display:flex; align-items:center; gap:var(--space-20); padding:var(--space-20) var(--space-30); cursor:pointer;}
.faqs .qustion .icon {width:42px; height:39px; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-23); line-height:1; flex-shrink:0;}
.faqs .qustion .tit {font-weight:700; font-size:var(--font-size-20); line-height:1.5em; color:#454545; flex:1 1 auto; min-width:0;}
.faqs .answer {display:none; border-top:1px solid #ddd; padding:var(--space-20) var(--space-30);}
.faqs .answer-inner {display:flex; align-items:flex-start; gap:var(--space-20);}
.faqs .answer-inner .icon {width:42px; height:39px; background:var(--color-secondary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:var(--font-size-23); line-height:1; flex-shrink:0;}
.faqs .answer-inner .txt {font-weight:400; font-size:var(--font-size-20); line-height:1.5em; color:#454545; flex:1 1 auto; min-width:0;}
.faqs .answer-inner .txt strong {font-weight:600;}

/* 클래스 안내 */
.class-wrapper {padding-top:var(--space-40); margin-top:var(--space-80);}
.class-title {text-align:center; margin-bottom:var(--space-60);}
.class-title h2 {position:relative; display:inline-block; font-weight:600; font-size:var(--font-size-50); line-height:1.2em; color:#242424; font-weight:600; margin-bottom:var(--space-20);}
.class-title h2 .inner {position:relative; z-index:2;}
.class-title h2:after {content:''; position:absolute; bottom:.1em; left:0; width:100%; height:clamp(8px, calc(11 / var(--inner) * 100vw), 11px); background:#e5bc17; z-index:1;}
.class-title h2 strong {font-weight:800; color:var(--color-primary);}
.class-title p {font-weight:500; font-size:var(--font-size-20); line-height:1.5em; color:#454545;}

.class-image {margin-bottom:var(--space-60); border-radius:var(--radius-38); overflow:hidden;}
.class-image img {width:100%; height:auto; display:block;}

.calss-table table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #454545;}
.calss-table table th {width:300px; background:#efefef; font-size:var(--font-size-20); line-height:1.3em; color:#242424; padding:var(--space-30); border:1px solid #ddd; border-top:0;}
.calss-table table td {font-weight:500; font-size:var(--font-size-18); line-height:1.67em; color:#454545; padding:var(--space-30) var(--space-40); border:1px solid #ddd; border-top:0;}
.calss-table table tr th:first-child,
.calss-table table tr td:first-child {border-left:0;}
.calss-table table tr th:last-child,
.calss-table table tr td:last-child {border-right:0;}
.calss-table table td ul li {padding-left:.7em; text-indent:-.7em;}

.side-nav {position:fixed; top:50%; left:0; z-index:50;}
.side-nav ul {display:flex; flex-direction:column; gap:var(--space-8);}
.side-nav ul li a {position:relative; display:flex; align-items:center; padding:2px 30px 0; width:147px; height:40px; overflow:hidden; border-radius:0 8px 8px 0; background:#195F93; color:#fff; font-family: "Gmarket Sans",sans-serif; font-size:var(--font-size-18); font-weight:700; line-height:1.4em;}
.side-nav ul li a:before {content:''; position:absolute; top:0; right:0; width:27px; height:100%; background:var(--color-primary); transition:.3s;}
.side-nav ul li a span {position:relative;}
.side-nav ul li a:hover::before {width:100%;}

/* 훈련장시설 */
.facility-section {margin-bottom:var(--space-120);}
.facility-section:last-child {margin-bottom:0;}
.facility-swiper {position:relative; margin-bottom:var(--space-60); border-radius:var(--radius-38); overflow:hidden;}
.facility-swiper .swiper {width:100%; height:clamp(300px, calc(500 / var(--inner) * 100vw), 500px);}
.facility-swiper .swiper-slide {width:100%;}
.facility-swiper .facility-image {width:100%; height:100%;}
.facility-swiper .facility-image img {width:100%; height:100%; object-fit:cover;}
.facility-swiper .swiper-pagination {position:absolute; bottom:var(--space-40); left:50%; transform:translateX(-50%); text-align:center; z-index:10;}
.facility-swiper .swiper-pagination-bullet {width:15px; height:15px; background:transparent; border:2px solid #fff; opacity:1; margin:0 8px;}
.facility-swiper .swiper-pagination-bullet-active {background:#fff;}
.facility-swiper .swiper-button-prev,
.facility-swiper .swiper-button-next {width:50px; height:50px; background:rgba(255,255,255,0.8); border-radius:50%; color:var(--color-primary);}
.facility-swiper .swiper-button-prev:after,
.facility-swiper .swiper-button-next:after {font-size:20px; font-weight:700;}
.facility-swiper .swiper-button-prev:hover,
.facility-swiper .swiper-button-next:hover {background:#fff;}

.facility-info {display:flex; align-items:center; gap:var(--space-40);}
.facility-info .info-left {flex:1 1 auto; min-width:0; width:1%;}
.facility-info .info-left .label {font-weight:700; font-size:var(--font-size-20); line-height:1.4em; color:var(--color-secondary); margin-bottom:var(--space-10);}
.facility-info .info-left .title {font-size:var(--font-size-32); line-height:1.28em; color:#242424; letter-spacing:-.03em; margin-bottom:var(--space-20);}
.facility-info .info-left .address {display:flex; flex-wrap:wrap; gap:var(--space-40); font-size:var(--font-size-18); line-height:1.44em; color:#454545; margin-bottom:var(--space-70);}

.facility-info .info-left .btn-link {display:inline-flex; align-items:center; gap:4px; font-weight:500; font-size:var(--font-size-20); line-height:1.5em; color:#999; padding:var(--space-10) var(--space-20); border-radius:var(--radius-8); border:1px solid #999;}
.facility-info .info-left .btn-link:hover {background:#999; color:#fff;}
.facility-info .info-right {width:55%; max-width:758px;}
.facility-info .map-area {width:100%; border-radius:var(--radius-38); overflow:hidden;}
.facility-info .map-area .root_daum_roughmap {width:100% !important;}
.facility-info .map-area .root_daum_roughmap .wrap_map {height:clamp(240px, calc(435 / var(--inner) * 100vw), 435px) !important;}
.facility-info .map-area .root_daum_roughmap .cont {display:none !important;}

/* 선수단명단 */
.roster-section {margin-bottom:var(--space-120);}
.roster-section:last-child {margin-bottom:0;}
.roster-section h2 {font-size:var(--font-size-32); line-height:1.3em; margin-bottom:var(--space-40);}

.roster-list {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-30) var(--space-40);}
.roster-list .item {display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--space-10); padding:var(--space-100) var(--space-40) var(--space-40) var(--space-40); aspect-ratio:243/256; background:url('/images/sub/uniform.svg') no-repeat center bottom / contain; color:#fff; font-weight:500; font-size:var(--font-size-20); line-height:1.5em; text-align:center; transition:.3s;}
.roster-list .item:hover {transform:scale(1.1);}

.roster-imgages {display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--space-30);}
.roster-imgages img {width:100%; height:100%; object-fit:cover; border-radius:var(--radius-30); transition:.3s;}
.roster-imgages img:hover {transform:scale(1.5);}