/* Introduction pages */

/* =========================
       Introduction - 회사연혁 및 조직도
       ========================= */
    .history {
      max-width: 900px;
      margin: 2.8rem auto 4rem;
    }

    .history-item {
      display: flex;
      gap: 1rem;
      padding: 1.35rem 0;
      border-bottom: 1px solid #e5e5e5;
    }

    .history-year {
      width: 110px;
      flex: 0 0 110px;
      font-weight: 700;
      font-size: 1.5rem;
      align-self: flex-start;
      margin: 0.3rem 0 0;
      color: #e74c3c;
    }

    .history-content {
      text-align: left;
      margin-left: 20px;
      flex: 1;
    }

    .history-content p {
      font-weight: 500;
      margin: 0.3rem 0;
    }

    .history-detailed {
      max-width: 1000px;
      margin-top: 0;
      margin-bottom: 0;
      overflow-x: clip;
    }

    .history-detailed .history-item {
      padding: 2.4rem 0;
    }

    .history-detailed.is-reveal-ready .history-year {
      opacity: 0;
      transform: translateX(-80px);
    }

    .history-detailed.is-reveal-ready .history-content > p {
      opacity: 0;
      transform: translateX(80px);
    }

    .history-detailed.is-reveal-ready .history-year.is-visible {
      animation: history-year-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }

    .history-detailed.is-reveal-ready .history-content > p.is-visible {
      animation: history-category-reveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) var(--history-delay, 0ms) forwards;
    }

    @keyframes history-year-reveal {
      from {
        opacity: 0;
        transform: translateX(-80px);

      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes history-category-reveal {
      from {
        opacity: 0;
        transform: translateX(80px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    .history-detailed .history-content p {
      margin: 0;
      color: #555;
      font-weight: 400;
      line-height: 1.75;
    }

    .history-detailed .history-content p + p {
      margin-top: 0.9rem;
    }

    .history-category {
      display: block;
      margin-bottom: 0.2rem;
      color: #d84333;
      font-size: 0.85rem;
      font-weight: 700;
    }

    .history-company {
      display: inline-block;
      margin-right: 0.55rem;
      color: #111;
      font-weight: 600;
    }

    .organization-chart {
      max-width: 1000px;
      margin: 3rem auto 0;
    }

    .org-node {
      box-sizing: border-box;
      padding: 1rem 1.25rem;
      border: 1px solid #ccc;
      border-radius: 6px;
      background: #fff;
    }

    .org-node strong,
    .org-node span {
      display: block;
    }

    .org-node span {
      color: #777;
      font-size: 0.9rem;
    }

    .org-ceo {
      width: 240px;
      margin: 0 auto;
      border-color: #d84333;
      background: #d84333;
      color: #fff;
    }

    .org-ceo span {
      color: #fff;
    }

    .org-support {
      width: 200px;
      margin: 1.25rem auto 2.5rem;
      transform: translateX(clamp(3rem, 13vw, 10rem));
    }

    .org-divisions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .org-division {
      padding: 1.5rem;
      border: 1px solid #ddd;
      border-top: 3px solid #d84333;
      background: #fff;
      text-align: left;
    }

    .org-division h3 {
      margin: 0 0 1rem;
      text-align: center;
    }

    .org-division ul {
      margin: 0;
      padding-left: 1.15rem;
      color: #555;
    }

    .org-division li + li {
      margin-top: 0.45rem;
    }

.map-actions {
      margin-top: 0.55rem;
      text-align: right;
      font-size: 1.02rem;
    }

    .map-actions a {
      color: #666;
      text-decoration: none;
    }

    .map-actions a:hover {
      color: #e74c3c;
      text-decoration: underline;
    }

    .map-divider {
      margin: 0 0.45rem;
      color: #bbb;
    }

/* =========================
       Introduction - 오시는 길 지도
       ========================= */

    .map {
      width: 100%;
      height: auto;
      aspect-ratio: 2 / 1;
      margin: 0;
      overflow: hidden;
      border: 1px solid #ddd;
      box-sizing: border-box;
    }

    .map .root_daum_roughmap,
    .map .wrap_map {
      width: 100% !important;
      height: 100% !important;
    }

/* =========================
       Introduction - 회사개요 및 오시는 길
       ========================= */
    .fact-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      margin-top: 3rem;
      background: #ddd;
      border: 1px solid #ddd;
    }

    .fact-grid div {
      padding: 2rem 1rem;
      background: #fff;
    }

    .fact-grid strong,
    .fact-grid span {
      display: block;
    }

    .fact-grid strong {
      color: #d84333;
      font-size: 1.45rem;
    }

    .fact-grid span {
      margin-top: 0.45rem;
      color: #666;
      font-size: 1rem;
    }

    .location-info {
      text-align: left;
    }

    .location-info h2,
    .location-map-section h2 {
      margin: 0 0 2rem;
      font-size: 2rem;
      text-align: left;
    }

    .location-details {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 3rem;
      border-top: 1px solid #ddd;
    }

    .location-details p {
      display: grid;
      grid-template-columns: 80px 1fr;
      margin: 0;
      padding: 1.2rem 0;
      border-bottom: 1px solid #ddd;
    }

    .location-info span {
      color: #555;
    }

    .location-map-section {
      background: #f6f7f8;
    }

.intro-about { --intro-image: url("/img/intro/Intro_About.webp"); }
    .intro-location { --intro-image: url("/img/intro/Intro_Location.webp"); }
    .intro-organization { --intro-image: url("/img/intro/Intro_Organization.webp"); }

@media (max-width: 1000px) {
  .org-divisions { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .org-support { transform: none; }

  .history-item {
    align-items: flex-start;
  }

  .history-year {
    width: 90px;
    flex-basis: 90px;
    font-size: 1.05rem;
  }

  .history-content {
    margin-left: 0;
  }

  .fact-grid { grid-template-columns: 1fr; }

  .location-details {
    grid-template-columns: 1fr;
  }

  .location-map-section .map {
    min-height: 360px;
    aspect-ratio: auto;
  }
}