/* ============================================
 Responsive Styles (반응형 스타일)
 ============================================ */

/* GNB: 가로 1200px 이하 햄버거·전체화면 패널 */
@media (max-width: 1200px) {
  .header-frame {
    padding: 0 20px;
    min-height: 64px;
    background-color: rgba(0, 0, 0, 0);
  }

  .header-logo {
    width: 88px;
    height: 64px;
  }

  .header-line {
    display: block;
    top: 64px;
  }

  .header-nav-panel-top {
    padding: 12px 20px 10px;
  }

  .header-nav-panel-logo {
    width: 88px;
    height: 48px;
  }

  .header-nav-panel-scroll {
    padding: 4px 20px 40px;
  }

  .header-menu-link {
    font-size: 18px;
  }
}

/* 모바일·태블릿: 메인 등 레이아웃 */
/* 모바일 전용 줄바꿈 */
.br-mo-only { display: none; }
@media (max-width: 1200px) {
  .br-mo-only { display: block; }
}

/* 메인 영어 슬로건 모바일 분기 */
@media (max-width: 1200px) {
  .main3-en-comma { display: none; }
  .main3-en-excl  { display: inline !important; }
}


@media (max-width: 1200px) {
  :root {
    --section-padding-x: 20px;
  }

  .inner-container {
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
    box-sizing: border-box;
  }

  .footer-section-info {
    padding: 20px 0;

  }

  .about-page-main .subpage-section-content > .inner-container > p.text-t22 br {
    display: none;
  }

  .footer-middle {
    margin-top: 30px;
  }

  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .footer-dropdowns {
    width: 100%;
    justify-content: flex-start;
  }

  /* 트리거가 왼쪽 정렬일 때 right:0이면 패널이 뷰포트 왼쪽으로 밀려 나감 → 왼쪽 기준으로 펼침 */
  .footer-dropdown-panel {
    left: 0;
    right: auto;
    max-width: calc(100vw - 2 * var(--section-padding-x));
    min-width: min(240px, calc(100vw - 2 * var(--section-padding-x)));
    box-sizing: border-box;
  }

  .footer-bottom {
    margin-top: 30px;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
  }

  .footer-copyright {
    width: 100%;
  }

  .footer-social {
    width: 100%;
    justify-content: flex-start;
  }

  .footer-info {
    font-size: 12px;
  }

  .greeting-content-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .greeting-portrait-area {
    order: -1;
  }

  .greeting-portrait-wrapper {
    justify-content: center;
  }

  .greeting-portrait-image {
    width: 100%;
    max-width: min(100%, 420px);
    height: auto;
    margin: 0 auto;
  }

  .philosophy-cards {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }

  .philosophy-card {
    width: 100%;
    height: 237px;
    padding: 14px;
  }

  .ci-middle-section {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
  }

  .ci-box {
    padding: 20px;
    height: 167px;
  }

  .ci-content-description p {
    font-size: 14px;
    font-weight: 400;
  }

  .ci-main-logo {
    max-width: 100%;
  }

  .ci-download-wrapper {
    display: none;
  }

  .growth-content-block {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .growth-cert-text .text-t29 {
    margin-bottom: 0px;
  }


  .subpage-section-content,
  .innovation-section-content,
  .recruit-section {
    padding-left: 0;
    padding-right: 0;
  }

  .intro-slider {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .intro-text-layer {
    left: var(--section-padding-x);
    right: var(--section-padding-x);
    justify-content: flex-start;
    padding-top: 110px;
    box-sizing: border-box;
  }

  .intro-text p.slider-title,
  .intro-text p.slider-title span {
    font-size: clamp(26px, 7vw, 44px);
  }

  .intro-text p.slider-subtitle,
  .intro-text p.slider-subtitle span {
    font-size: clamp(16px, 4vw, 24px);
  }

  .intro-text.text-4 {
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 var(--section-padding-x);
    box-sizing: border-box;
  }

  .first-page-layer {
    right: 0;
    left: 0;
    justify-content: center;
    align-items: flex-end;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .first-page-layer .first-page-content {
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: 0;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    padding-left: var(--section-padding-x);
    padding-right: var(--section-padding-x);
    padding-bottom: calc(39px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
  }

  .first-page-menu {
    width: 100%;
    max-width: 100%;
    margin: 0;
    margin-top: 0;
    align-items: stretch;
    padding: 0;
    box-sizing: border-box;
  }

  .first-page-menu .menu-item-label {
    font-size: 13px;
    font-weight: 500;
  }

  .first-page-menu .menu-item-arrow {
    width: 16px;
    height: 16px;
  }

  .first-page-menu .menu-item {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 100px;
    padding: 14px;
    box-sizing: border-box;
  }

  .first-page-menu .menu-item-text {
    font-size:14px;
    white-space: normal;
    flex-wrap: wrap;
  }

  .first-page-menu .menu-item-content {
    gap:0px;
  }

  .first-page-menu .menu-item-text span {
    font-size: 16px;
  }

  /* 메인 main2: 좌우 여백은 패딩이 아닌 마진(전역 .inner-container 패딩 제거) */
  .main2-section .main2-inner.inner-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: var(--section-padding-x);
    margin-right: var(--section-padding-x);
    width: calc(100% - 2 * var(--section-padding-x));
    max-width: 100%;
    box-sizing: border-box;
  }

  .main2-content {
    width: 100%;
    max-width: 100%;
    padding: 48px 20px 48px 20px;
  }

  .main2-dual {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  .main2-dual-stack--primary,
  .main2-dual-stack--side {
    display: contents;
  }

  .main2-dual-eyebrow {
    order: 1;
    font-size: 16px;
  }

  /* 위→아래 풀폭 (좌우로 쪼개지 않음) */
  .main2-dual-figure--01 {
    order: 2;
    width: 100%;
    max-width: 100%;
    height: auto;
    align-self: stretch;
    margin: 0;
    padding-right: 20%;
  }

  .main2-dual-figure--01 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 297 / 228;
    object-fit: cover;
  }

  .main2-dual-figure--02 {
    order: 3;
    width: 100%;
    max-width: 100%;
    height: auto;
    align-self: stretch;
    margin: 0;
    padding-left: 20%;

  }

  .main2-dual-figure--02 img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 251 / 314.67;
    object-fit: cover;
  }

  .main2-dual-caption-stack {
    order: 4;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin: 0;
    text-align: left;
    align-items: flex-start;
    padding-left: 20%;
  }

  .main2-dual-caption-lead {
    font-size: 16px;
    text-align: left;
    width: 100%;
  }

  .main2-dual-caption {
    font-size: 16px;
    text-align: left;
    width: 100%;
  }

  .main2-dual-welcome {
    order: 5;
    margin-top: 20px;
    font-size: 24px;
    font-weight: 300;
  }

  .main2-dual-welcome-strong {
    font-weight: 600;
  }

  .main3-section {
    padding: 46px 0 64px;
  }

  .main3-section .main3-inner {
    padding-left: 0;
    padding-right: 0;
    margin-left: var(--section-padding-x);
    margin-right: var(--section-padding-x);
    width: calc(100% - 2 * var(--section-padding-x));
    max-width: 100%;
    box-sizing: border-box;
  }

  .main3-header {
    margin-bottom: 40px;
  }

  .main3-title {
    font-size: 24px;
    font-weight: 300;
  }

  .main3-title span {
    font-size: inherit;
    font-weight: 600;
  }

  .main3-subtitle,
  .main3-subtitle-en {
    font-size: 14px;
    font-weight: 300;
  }

  .main3-subtitle span,
  .main3-subtitle-en span {
    font-size: inherit;
    font-weight: 600;
  }

  .main3-cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .main3-card-image {
    aspect-ratio: 337 / 187;
  }

  .main3-card-body {
    padding: 20px;
  }

  .main3-card-text {
    font-size: 18px;
  }

  .main3-card-link {
    font-size: 18px;
  }

  .sub-hero-header {
    min-height: auto;
    height: auto;
    box-sizing: border-box;
    display: block;
  }
  .sub-hero-header::before {
    content: "";
    display: block;
    padding-bottom: 61.17%; /* 모바일 이미지 비율 (230/376 = 61.17%) */
  }
  .sub-hero-header--short {
    min-height: auto;
    height: auto;
  }
  .sub-hero-bg {
    top: 0;
    height: 100%;
    background-size: cover;
  }
  .sub-hero-text-overlay {
    top: auto;
    bottom: 20px;
    left: var(--section-padding-x);
    gap: 2px;

  }
  .sub-hero-text-overlay h1 {
    font-size: 14px;
    text-align: left;
  }
  .sub-hero-text-overlay p {
    font-size: 14px;
    text-align: left;
    opacity: 0.8;
  }
  .sub-hero-content {
    padding: 32px var(--section-padding-x);
  }

  .philosophy-card-icon {
    margin-bottom: 20px;
  }

  .philosophy-card-icon img { 
    width: 77px; 
    height: 77px; 
  }

  .philosophy-card-list li {
    font-size: 14px;
    font-weight: 400;
  }


  .philosophy-card-title-en {
    margin: 0 0 0px 0;
    font-size: 16px;
    font-weight: 600;
  }

  .philosophy-card-list {
    gap: 0px;
  }

  .philosophy-card-title-ko {
    margin: 0 0 0px 0;
    font-size: 16px;
    font-weight: 600;
  }

  .philosophy-text {
    margin: 0 0 12px 0;
  }
}

/* Propellant 반응형 스타일 */
@media (max-width: 1440px){
 #propellant .propellant-content { padding: 80px 120px; } 
 
 .propellant-header { width: 100%; max-width: 1040px; margin-right: 0; } 
 
 .propellant-slider { margin-right: 0; } 
 
 .propellant-slider-wrapper { max-width: 100%; } 
 
 .propellant-card-list { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } 
 
 .propellant-card-list::-webkit-scrollbar { display: none; } 
 
 .propellant-card { scroll-snap-align: start; flex-shrink: 0; } 
 }
 
/* 2400px 이상일 때 forest-image-area gap 변경 */
@media (min-width: 2400px) {
 .forest-image-area { gap: 400px; }
}

/* About 페이지 반응형 스타일 - 1600px 이하일 때 세로 배치 */
@media (max-width: 1200px) {
    /* 이미지와 목록 그리드를 세로로 변경 */
    .about-content-grid,
    .innovation-content-grid,
    .efficiency-content-grid,
    .growth-cert-grid { 
        grid-template-columns: 1fr; 
    } 

    .growth-cert-grid,
    .innovation-forbes-section {
        gap: 12px;
    }

    .growth-cert-image,
    .innovation-forbes-image {
        justify-content: flex-start;
    }

    .about-content-grid {
        margin-top: 0px;
        gap: 0px;
    }

    /* 목록 영역 높이 자동 조정 */
    .about-content-list,
    .innovation-list,
    .efficiency-list { 
        height: auto; 
        min-height: auto; 
    } 

    .search-container {
        justify-content: flex-start;
        margin-bottom: 20px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .news-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 10px;
    }

    .news-item-date, 
    .news-item-author {
      font-size: 12px;
      color: #555555;
      font-weight: var(--font-weight-regular);
    }

    .news-item-left {
        padding-right: 0;
    }
    
    .news-item-right {
        width: 100%;
        justify-content: flex-start;
        gap: 4px;
    }

    .reference-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px 20px;
    }

    .social-esg-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 0px;
    }

    .about-content-list-item { 
        flex: none; 
        border-bottom: none;
    } 

  .innovation-list-item {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .innovation-list-item-first {
      padding-top: 10px;
  }

  .expertise-content-block {
      margin-top: 12px;
      margin-bottom: 12px;
  }

  .subpage-section-content,
  .innovation-section-content,
  .efficiency-section-content,
  .news-section-content,
  .reference-section-content,
  .social-section-content {
      padding: 20px 0;
  }

  .about-content-list-text {
      gap: 0px;
  }

 .about-content-image,
 .efficiency-content-image { 
     min-height: 300px; 
     padding: 12px 0; 
 }

 .about-content-list,
 .innovation-list,
 .efficiency-list { 
     padding: 0px 0; 
 }

 .about-content-list-item { 
     padding: 0px 0; 
     padding-bottom: 0px; 
     gap: 16px; 
      align-items: flex-start;
 }
  #propellant .propellant-content {
    padding: 80px var(--section-padding-x);
  }

  #white-section.page-section {
    padding: 100px var(--section-padding-x);
  }

  .expertise-cert-text {
      margin-top: 16px;
  }

  .innovation-content-grid {
    margin-top: 10px;
  }

  .innovation-list-text .text-t33 {
    font-weight: 500 !important;
  }

  .innovation-list-text {
    padding: 0px;
  }

  .innovation-forbes-section {
  margin-top: 16px;
  }

  .efficiency-list-text {
    gap: 4px;
    padding-bottom: 0px;
    margin-bottom: 0px;
  }

  .efficiency-list-item {
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .efficiency-list-item-first {
    padding-top: 10px;
  }

  .efficiency-content-grid {
    gap: 6px;
    margin-bottom: 16px;
  }
  
  .efficiency-list {
    gap: 0px;
  }

  .news-item-category {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    margin-bottom: 4px;
  }

  .news-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-1e1e1e);
  }

  .news-item-right {
    font-size: 12px;
    font-weight: 400;
    color: #555555;
    gap: 4px;
  }

    .news-detail-category {
      font-size: 12px;
      font-weight: 500;
      color: #555555;
      margin-bottom: 0px;
    }

    .news-detail-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-text-1e1e1e);
      line-height: 1.4;
    }

    .news-detail-content, .news-detail-text {
      font-size: 14px;
      font-weight: 400;
      color: #555555;
      padding: 0px;
    }

    .news-detail-dat, .news-detail-author {
      font-size: 12px;
      font-weight: 400;
      color: #555555;
    }

    .news-detail-image {
      margin-bottom: 20px;
    }

    .news-detail-header { flex-direction: column; align-items: flex-start; gap: 0px; }
    .news-detail-header-right { text-align: left; }
    .news-detail-title { font-size: 24px; }
    .news-nav-item { padding: 15px; }
    .news-nav-title { font-size: 14px; }

    .recruit-header-title { 
      font-size: 16px;
      font-weight: 600;
    }
    .mobile-recruit-icon {
      display: block;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin-bottom: 20px;
    }
    .recruit-apply-btn {
      font-size: 12px;
      font-weight: 500;
      padding: 8px 12px;
    }
    .recruit-apply-btn img {
      width: 16px;
      height: 16px;
    }

    .benefit-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 12px;
    }

    .benefit-title {
      font-size: 14px;
      font-weight: 500;
    }

    .benefit-desc {
      font-size: 14px;
      font-weight: 400;
    }

    .benefit-item {
      padding: 14px;
    }

    .recruit-section {
      padding: 20px 0px;
    }

    .recruit-header {
      margin-top: 12px;
      margin-bottom: 8px;
    }

    .recruit-visual-area {
      padding-bottom: 0px;
    }

    .process-img-pc {
      display: none;
    }
    .process-img-mo {
      display: block;
      width: 100%;
      height: auto;
    }

    .job-info-image {
      display: none;
    }

    .job-info-label {
      width: 20%;
      font-size: 14px;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .job-info-text {
      width: 80%;
      font-size: 14px;
      font-weight: 400;
      padding: 10px;
    }

    .job-detail-section {
      padding: 20px 0px;
    }

    .job-info-block {
      margin-bottom: 20px;
    }

    .recruit-description {
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 400;
    }

    .apply-detail-section {
      padding: 10px 0px;
    }
    .apply-categories-row {
      flex-direction: column;
      gap: 0;
    }
    .apply-category-group {
      width: 100%;
      margin-bottom: 0px;
    }
    .apply-categories-row > .apply-category-group[style*="visibility: hidden"] {
      display: none;
    }
    .apply-grid {
      display: grid !important;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-bottom: 12px;
    }
    .apply-card {
      width: 100%;
      height: 50px;
      padding: 0 20px;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
    .apply-card-title {
      font-size: 16px;
    }
    .apply-card-icon {
      width: 20px;
      height: 20px;
      align-self: auto;
    }

    .apply-category-group .recruit-header {
        border-bottom: 0px solid #1E1E1E;
        padding-bottom: 0px;
        margin-bottom: 12px;
    }

    /* 지원서 작성 모달 - 모바일 폼 레이아웃 */
    .apply-modal {
        align-items: flex-start;
        overflow: hidden; /* 오버레이 자체는 스크롤 안 함 */
    }
    .apply-modal-container {
        padding: 40px 20px;
        width: 100%;
        max-width: 100%;
        height: 100dvh;               /* 뷰포트 전체 높이 */
        max-height: 100dvh;
        overflow-y: scroll;           /* 컨테이너가 스크롤 담당 */
        -webkit-overflow-scrolling: touch; /* iOS 터치 스크롤 */
        overscroll-behavior: contain; /* 스크롤 체이닝 방지 */
    }
    .apply-modal-title {
        font-size: 24px;
        margin-bottom: 24px;
    }
    .apply-form {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .apply-form-group.full-width,
    .apply-submit-btn {
        grid-column: span 1 !important;
        width: 100%;
        max-width: none;
    }

    .apply-description {
      font-size: 14px;
      font-weight: 400;
    }

    .social-activities-section {
      margin-bottom: 0px;
    }

    .social-section-title {
      margin-bottom: 0px;
    }

    .social-esg-section {
      margin-top: 0px;
    }

    .social-esg-card {
      padding: 14px;
      gap: 8px;
      min-height: 0px;
    }

    .social-esg-text {
      font-size: 14px;
      font-weight: 500;
    }

    .social-activities-section .news-pagination {
      margin-top: 10px;
      margin-bottom: 12px;
    }

    .social-section-desc {
      margin-bottom: 12px;
    }

    /* 지점 안내 반응형 */
    .branch-section {
      padding: 40px 0;
    }
    .branch-header {
      margin-bottom: 20px;
    }
    .branch-header h2 {
      font-size: 20px;
      margin-bottom: 10px;
    }
    .branch-header p {
      font-size: 14px;
    }
    .branch-tabs {
      display: none;
    }
    .branch-mobile-select-wrapper {
      display: block;
      margin-bottom: 20px;
    }

    /* 커스텀 드롭다운 */
    .branch-mobile-dropdown {
      position: relative;
      width: 100%;
      user-select: none;
    }
    .branch-mobile-dropdown-selected {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border: 1px solid #e0e0e0;
      background-color: #fff;
      cursor: pointer;
    }
    .branch-mobile-dropdown-label {
      font-size: 16px;
      font-weight: 600;
      color: #000;
    }
    .branch-mobile-dropdown-arrow {
      color: #333;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .branch-mobile-dropdown.open .branch-mobile-dropdown-arrow {
      transform: rotate(180deg);
    }
    .branch-mobile-dropdown-list {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #fff;
      border: 1px solid #e0e0e0;
      border-top: none;
      z-index: 100;
      max-height: 300px;
      overflow-y: auto;
    }
    .branch-mobile-dropdown.open .branch-mobile-dropdown-list {
      display: block;
    }
    .branch-mobile-dropdown-item {
      padding: 14px 16px;
      font-size: 16px;
      font-weight: 400;
      color: #333;
      cursor: pointer;
      border-bottom: 1px solid #f0f0f0;
    }
    .branch-mobile-dropdown-item:last-child {
      border-bottom: none;
    }
    .branch-mobile-dropdown-item:hover {
      color: #0088C7;
    }
    .branch-mobile-dropdown-item.active {
      color: #0088C7;
      font-weight: 600;
    }
    .branch-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }
    .branch-card {
      padding: 20px;
      gap: 10px;
    }
    .branch-card-name {
      font-size: 16px;
    }
    .branch-card-address,
    .branch-card-phone {
      font-size: 13px;
    }
}


/* =============================================
   개인정보처리방침 - 표 모바일 카드형 레이아웃
   ============================================= */
@media (max-width: 768px) {
  /* 가로 스크롤 제거 */
  .privacy-table-wrap {
    overflow-x: visible;
  }

  /* 표 헤더 숨김 */
  .privacy-table thead {
    display: none;
  }

  /* 각 행을 카드 블록으로 */
  .privacy-table,
  .privacy-table tbody,
  .privacy-table tr {
    display: block;
    width: 100%;
  }

  .privacy-table tr {
    border: 1px solid #d0d0d0;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
  }

  /* 각 셀을 라벨 + 값 형태로 */
  .privacy-table td {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    line-height: 1.6;
    align-items: baseline;
  }

  .privacy-table td:last-child {
    border-bottom: none;
  }

  /* data-label 을 컬럼명으로 표시 */
  .privacy-table td::before {
    content: attr(data-label);
    flex-shrink: 0;
    min-width: 72px;
    font-weight: 700;
    color: #1a2a4a;
    font-size: 12px;
  }

  /* 짝수 행 배경 유지 */
  .privacy-table tbody tr:nth-child(even) {
    background-color: #f8f9fb;
  }
}