/* ══════════════════════════════════════════════
   about.html — 모바일 반응형 오버라이드 CSS
   @media (max-width: 768px) 중심
   기존 style.css에 추가하거나 <link>로 마지막에 불러오세요
══════════════════════════════════════════════ */

/* ── 768px 이하 (태블릿 ~ 모바일) ─────────────── */
@media (max-width: 768px) {

  /* ── 섹션 공통 ── */
  .section {
    padding: 40px 20px !important;
    max-width: 100% !important;
    min-height: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .section + .section {
    border-top: 1px solid #E5E5E5;
  }

  .section-label {
    margin-bottom: 12px !important;
  }

  .section-label span {
    font-size: 12px !important;
    letter-spacing: 0.08em !important;
  }

  .section-heading {
    font-size: clamp(28px, 7vw, 36px) !important;
    margin-bottom: 20px !important;
    line-height: 1.2 !important;
  }

  .section-sub {
    font-size: 14px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
  }

  /* ── 디렉터 소개 섹션 ── */
  .section-wrapper {
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    gap: 0 !important;
  }

  .section-wrapper div {
    padding: 0 !important;
  }

  .director-img {
    width: 100% !important;
    height: 100vw !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 12px !important;
  }

  /* 디렉터 텍스트 컨테이너 */
  .section-wrapper > div:last-child {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .quote-text {
    width: 100% !important;
    height: auto !important;
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.35 !important;
    margin-bottom: 16px !important;
    color: #F75800 !important;
  }

  .subtitle {
    width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: normal !important;
    margin-bottom: 18px !important;
    line-height: 1.5 !important;
  }

  /* 본문 좌우 → 세로 쌓기 */
  .section-wrapper div > div[style*="flex-direction: row"] {
    flex-direction: column !important;
    gap: 0 !important;
  }

  .body-left,
  .body-right {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-bottom: 14px !important;
  }

  /* ── 스크롤링 텍스트 배너 ── */
  .scrolling-text-container {
    margin: 0 !important;
    padding: 12px 0 !important;
    height: auto !important;
  }

  .scrolling-text {
    gap: 24px !important;
  }

  .scrolling-text span {
    font-size: 28px !important;
  }

  .scrolling-text img {
    width: 32px !important;
    height: 36px !important;
    margin: 0 0 !important;
  }

  /* ── 미래 비전 섹션 (dark bg) ── */
  .future-section {
    padding: 48px 0 !important;
    width: 100% !important;
  }

  .future-inner {
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
    gap: 0 !important;
  }

  .future-title-col {
    padding-top: 0 !important;
    margin-bottom: 24px !important;
  }

  .future-title {
    font-size: clamp(24px, 7vw, 36px) !important;
    white-space: normal !important;
    line-height: 1.3 !important;
  }

  .star-icon {
    width: 28px !important;
    height: 28px !important;
    margin-left: 4px !important;
    margin-bottom: 0 !important;
  }

  .future-content-col {
    gap: 0 !important;
  }

  .divider {
    margin-bottom: 14px !important;
  }

  .future-text {
    font-size: 14px !important;
    line-height: 1.75 !important;
    margin-bottom: 20px !important;
    color: rgba(222,222,222,0.9) !important;
  }

  .section-gap {
    height: 20px !important;
  }

  /* ── 소소 소개 섹션 ── */
  div[style*="background: #FFFEF9"] .section > div[style*="flex-direction: row"] {
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* SVG 타원 컨테이너 → 모바일에서 숨김 또는 축소 */
  .container {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    margin: 32px auto 0 !important;
    display: block !important;
  }

  .container svg {
    width: 100% !important;
    height: auto !important;
  }

  /* ── 비즈니스 가치 카드 ── */
  .cards-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
  }

  /* 별 구분자 → 가로 구분선으로 */
  .star-divider {
    width: 100% !important;
    height: 1px !important;
    background: #E5E5E5 !important;
    margin: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .star-divider svg.star-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .card {
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 4px 0 !important;
  }

  .card-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 6px !important;
  }

  .card-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #616161 !important;
  }

  .card-desc br {
    display: none !important;
  }

  /* 비즈니스 가치 섹션 내부 .section 중첩 패딩 제거 */
  .section .section {
    padding-bottom: 13vh !important;
    min-height: auto !important;
    max-width: 100% !important;
  }

  /* ── 연혁 (타임라인) ── */
  .about-history-section {
    padding: 0 !important;
  }

  .history-timeline {
    padding-left: 20px !important;
  }

  .history-timeline::before {
    left: 0 !important;
  }

  .timeline-item {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 32px !important;
    grid-template-columns: unset !important;
    padding-left: 16px !important;
  }

  .timeline-dot {
    left: -24px !important;
    top: 5px !important;
    width: 8px !important;
    height: 8px !important;
  }

  .timeline-dot.orange {
    background: #F75800 !important;
  }

  .timeline-date {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #F75800 !important;
    margin-left: 0 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
  }

  .timeline-content {
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #434343 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
  }

  .timeline-content.orange {
    color: #F75800 !important;
    font-weight: 600 !important;
  }

  /* ── 헤더 컨테이너 마진 ── */
  #header-container {
    margin-bottom: 48px !important;
  }

  /* ── 백그라운드 래퍼 div들의 overflow 방지 ── */
  div[style*="background: #111111"],
  div[style*="background: white"],
  div[style*="background: #FFFEF9"] {
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 480px 이하 (소형 모바일) ─────────────────── */
@media (max-width: 480px) {

  .section {
    padding: 32px 16px !important;
  }

  .section-heading {
    font-size: clamp(24px, 8vw, 30px) !important;
    margin-bottom: 16px !important;
  }

  .quote-text {
    font-size: clamp(20px, 7vw, 28px) !important;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
  }

  .subtitle {
    font-size: 13px !important;
    margin-bottom: 14px !important;
  }

  .body-left,
  .body-right {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  .future-title {
    font-size: clamp(22px, 8vw, 28px) !important;
  }

  .future-text {
    font-size: 13px !important;
  }

  .future-section {
    padding: 40px 0 !important;
  }

  .future-inner {
    padding: 0 16px !important;
  }

  .card-title {
    font-size: 15px !important;
  }

  .card-desc {
    font-size: 12px !important;
  }

  .timeline-item {
    margin-bottom: 26px !important;
  }

  .timeline-content {
    font-size: 12px !important;
  }

  .section-sub {
    font-size: 13px !important;
  }

  .scrolling-text span {
    font-size: 22px !important;
  }

  .scrolling-text img {
    width: 26px !important;
    height: 28px !important;
  }
}