@charset "utf-8";

/* =========================================================================
   Section 1: Hero
   ========================================================================= */
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; padding-top: 4rem; padding-bottom: 2rem; }
.hero-img-wrap { min-height: 25rem; border-radius: 1rem; overflow: hidden; }
.hero-img { width: 100%; height: 37.5rem; object-fit: cover; object-position: center; display: block; }

.hero-right-col { display: grid; grid-template-rows: auto auto; gap: 1rem; }
.hero-icon-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

.hero-icon-card { background-color: transparent; padding: 1.75rem 1rem; min-height: 8.125rem; gap: 0.75rem; position: relative; border: none; transition: transform 0.3s; border-radius: 1rem; }
.hero-icon-card:hover { transform: translateY(-3px); }
.hero-card-border-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.hero-card-base-rect { fill: none; stroke: #c5a059; stroke-width: 1.2; stroke-opacity: 0.45; vector-effect: non-scaling-stroke; transition: stroke-opacity 0.4s ease; }
.hero-icon-card:hover .hero-card-base-rect { stroke-opacity: 0.8; transition-delay: 1.9s; }
.hero-card-comet-rect { fill: none; stroke: #c5a059; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 20 80; stroke-dashoffset: 0; stroke-opacity: 0; }
.hero-icon-card:hover .hero-card-comet-rect { animation: rectCometSweep 2.2s forwards; }

@keyframes rectCometSweep { 0% { stroke-dashoffset: 0; stroke-opacity: 0; } 5% { stroke-opacity: 1; } 80% { stroke-opacity: 1; } 100% { stroke-dashoffset: -100; stroke-opacity: 0; } }

.hero-icon-card-icon, .hero-icon-card-label { position: relative; z-index: 2; transition: transform 0.3s ease; }
.hero-icon-card-icon { color: #c5a059; }
.hero-icon-card:hover .hero-icon-card-icon { transform: scale(1.05); }
.hero-icon-card-label { font-size: 1.5rem; color: #FAFAF8; font-weight: 700; transition: color 0.3s ease; }
.hero-icon-card:hover .hero-icon-card-label { color: #c5a059; }

.hero-info-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.info-hover-card { background-color: #FFFFFF; padding: 1.5rem; min-height: 10rem; display: flex; flex-direction: column; justify-content: space-between; border-radius: 1rem; overflow: hidden; position: relative; }
.info-hover-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; filter: blur(0px); transform: scale(1); transition: filter 0.4s ease, transform 0.4s ease; }
.info-hover-card:hover .info-hover-card-bg { filter: blur(4px); transform: scale(1.05); }
.info-hover-card-overlay { position: absolute; inset: 0; background-color: rgba(0,0,0,0.3); z-index: 1; transition: background-color 0.4s ease; }
.info-hover-card:hover .info-hover-card-overlay { background-color: rgba(0,0,0,0.65); }
.info-hover-card-content { position: relative; z-index: 2; }
.info-hover-card-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.4rem; }
.info-hover-card-title.has-bg { color: #FAFAF8; }
.info-hover-card-main { font-size: 1.25rem; }
.info-hover-card-main.has-bg { color: #FAFAF8; }
.info-hover-card-sub { font-size: 1rem; margin-top: 0.5rem; opacity: 0; transition: opacity 0.3s ease; line-height: 1.6; }
.info-hover-card:hover .info-hover-card-sub { opacity: 1; }
.info-hover-card-sub.has-bg { color: #FAFAF8; }
.info-hover-card-icon-wrap { position: absolute; bottom: 1rem; right: 1rem; opacity: 1; transition: opacity 0.3s ease; z-index: 2; }
.info-hover-card:hover .info-hover-card-icon-wrap { opacity: 0; }


/* =========================================================================
   Section 2: Mission
   ========================================================================= */
.mission-grid { display: grid; grid-template-columns: 2fr 1.8fr; gap: 8.5rem; padding-top: 4rem; padding-bottom: 2rem; align-items: stretch; }
.mission-h2 { font-size: 3.5rem; font-family: 'BookendBatang', Georgia, serif; color: #c5a059; line-height: 1.08; font-weight: 700; margin-bottom: 1.5rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mission-desc { font-size: 1.125rem; color: #AAAAAA; line-height: 1.85; font-weight: 300; }
.mission-btn-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mission-action-btn { aspect-ratio: 1/1; border-radius: 3.75rem; padding: 0.3rem 1rem; }
.mission-action-btn-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.mission-action-btn-base-path { fill: none; stroke: #c5a059; stroke-opacity: 0.45; stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke-opacity 400ms ease; }
.mission-action-btn:hover .mission-action-btn-base-path { stroke-opacity: 0.9; transition: stroke-opacity 500ms ease 1900ms; }
.mission-action-btn-comet-path { fill: none; stroke: #c5a059; stroke-width: 0.8; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-dasharray: 220 780; stroke-dashoffset: 0; stroke-opacity: 0; }
.mission-action-btn:hover .mission-action-btn-comet-path { animation: cometSweep 2200ms forwards; }

@keyframes cometSweep { 0% { stroke-dashoffset: 0; stroke-opacity: 0; } 6% { stroke-opacity: 0.95; } 82% { stroke-opacity: 0.95; } 100% { stroke-dashoffset: -1000; stroke-opacity: 0; } }

.mission-action-btn-icon-wrap { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2; color: #c5a059; transition: color 500ms ease; }
.mission-action-btn-label-wrap { position: absolute; bottom: 1.25rem; left: 1.25rem; z-index: 2; }
.mission-action-btn-label { font-size: 1.5rem; color: #FAFAF8; font-weight: 700; transition: color 500ms ease; }
.mission-action-btn:hover .mission-action-btn-label { color: #c5a059; }


/* =========================================================================
   Section 3: Community
   ========================================================================= */
.community-grid { display: grid; grid-template-columns: 1fr 1.8fr; gap: 8.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; align-items: start; }
.comm-tabs-header { gap: 1.25rem; margin-bottom: 0.75rem; }
.comm-tab-btn { font-size: 2.25rem; font-family: Pretendard, Georgia, serif; color: #555555; font-weight: 400; transition: color 0.2s; }
.comm-tab-btn.active { color: #FAFAF8; font-weight: 600; }
.comm-tabs-divider { height: 0.0625rem; background-color: #333333; margin-bottom: 0.5rem; }
.comm-item { padding: 1rem 0; position: relative; transition: opacity 0.2s; }
.comm-item:hover { opacity: 0.75; }
.comm-item-title { font-size: 1.25rem; color: #FAFAF8; font-weight: 500; margin-bottom: 0.25rem; }
.comm-item-excerpt { font-size: 1rem; color: #888888; }
.comm-item-date { font-size: 0.875rem; color: #888888; white-space: nowrap; padding-top: 0.125rem; }
.comm-item-bottom-line { position: absolute; bottom: 0; left: 0; right: 0; height: 0.0625rem; background-color: #2A2A2A; }
.view-all-btn-wrap { display: flex; justify-content: flex-end; margin-top: 1.5rem; }
.view-all-btn { font-size: 1rem; color: #AAAAAA; gap: 0.4rem; transition: color 0.2s; }
.view-all-btn:hover { color: #FAFAF8; }

.ex-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ex-header-title { font-size: 2.25rem; font-family: Pretendard, Georgia, serif; color: #FAFAF8; font-weight: 600; }
.ex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ex-card { aspect-ratio: 3 / 4; border-radius: 1rem; overflow: hidden; position: relative; }
.ex-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.ex-card:hover .ex-card-img { transform: scale(1.05); }
.ex-card-overlay-gradient { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0) 70%); pointer-events: none; }
.ex-card-overlay-text-wrap { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; pointer-events: none; }
.ex-card-title { font-size: 1.5rem; color: #FAFAF8; font-weight: 600; line-height: 1.4; }


/* =========================================================================
   Section 4: Location
   ========================================================================= */
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8.5rem; padding-top: 5rem; padding-bottom: 5rem; align-items: stretch; }
.location-map { min-height: 20rem; border-radius: 1rem; overflow: hidden; }
.location-map iframe { width: 100%; height: 100%; min-height: 20rem; border: none; display: block; }
.transport-info-col { display: flex; flex-direction: column; gap: 0.85rem; justify-content: center; }
.transport-card { padding: 1.25rem 0.25rem; gap: 1rem; }
.transport-card.has-divider { border-bottom: 0.0625rem solid #FAFAF8; }
.transport-card-icon-wrap { width: 3rem; height: 3rem; }
.transport-card-icon-wrap svg { color: #c5a059; }
.transport-card-title { font-size: 1.5rem; color: #FAFAF8; font-weight: 600; margin-bottom: 0.25rem; }
.transport-card-detail { font-size: 1.125rem; color: #AAAAAA; line-height: 1.7; }


/* =========================================================================
   Icon Draw Animation
   ========================================================================= */
@keyframes drawStroke { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
.draw-icon path, .draw-icon circle, .draw-icon line, .draw-icon polyline, .draw-icon rect, .draw-icon ellipse { stroke-dasharray: 300; stroke-dashoffset: 300; animation: drawStroke 3s cubic-bezier(0.4, 0, 0.2, 1) forwards; }


/* =========================================================================
   Media Queries (Main Page only)
   ========================================================================= */
@media (max-width: 64rem) {
  .hero-grid { grid-template-columns: 1fr !important; padding-top: 2rem !important; }
  .hero-img { height: 42vw !important; }
  .mission-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .community-grid { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
  .location-grid { grid-template-columns: 1fr !important; gap: 2rem !important; padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .location-map { min-height: 22rem !important; }
  .location-map iframe { height: 22rem !important; min-height: 22rem !important; }
  .ex-grid { grid-template-columns: 1fr !important; }
  .ex-card-second { display: none !important; }
}

@media (max-width: 48rem) {
  .hero-grid { padding-top: 1.5rem !important; padding-bottom: 1rem !important; }
  .hero-img { height: 56vw !important; }
  .hero-img-wrap { min-height: unset !important; }
  .hero-icon-row { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .hero-icon-card { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; min-height: unset !important; padding: 1.2rem 1.25rem !important; gap: 0.85rem !important; border: 1px solid rgba(197, 160, 89, 0.5) !important; border-radius: 1rem !important; background-color: transparent !important; box-shadow: none !important; transform: none !important; }
  .hero-icon-card .hero-card-border-svg { display: none !important; }
  .hero-info-row { grid-template-columns: 1fr !important; }
  .mission-grid { padding-top: 2rem !important; padding-bottom: 2rem !important; gap: 1.5rem !important; }
  .mission-h2 { font-size: 2rem !important; }
  .mission-desc { font-size: 1rem !important; }
  .mission-btn-row { grid-template-columns: 1fr !important; gap: 0.6rem !important; }
  .mission-action-btn { aspect-ratio: unset !important; min-height: unset !important; padding: 1.2rem 1.25rem !important; border-radius: 1rem !important; border: 1px solid rgba(197, 160, 89, 0.5) !important; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 0.85rem !important; }
  .mission-action-btn .mission-action-btn-svg { display: none !important; }
  .mission-action-btn .mission-action-btn-icon-wrap, .mission-action-btn .mission-action-btn-label-wrap { position: static !important; display: flex !important; align-items: center !important; }
  .comm-tab-btn { font-size: 1.5rem !important; }
  .community-grid, .location-grid { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .location-map { min-height: 16rem !important; }
  .location-map iframe { height: 16rem !important; min-height: 16rem !important; }
}