/*
 * 메인 페이지 모바일 보정
 *
 * 데스크톱 배치는 건드리지 않습니다. 768px 이하에서만 적용됩니다.
 * 원본 page-index.css 는 그대로 두고 이 파일이 나중에 덮어씁니다.
 */

@media (max-width: 768px) {

  /* ───────────────────────────────────────────────────────
   * 1. HOW WE WORK 다이어그램
   *
   * 원본은 1200px 짜리 그림을 통째로 축소(scale 0.29)해서 글자가 안 읽혔습니다.
   * 축소를 풀고, 같은 HTML 그대로 4개 블록(PLAN/DESIGN/DEVELOP/CARE)으로 쌓습니다.
   *
   * 마크업이 종류별로 묶여 있어(이름 4개 → 설명 4개 → 단계 7개 → 산출물)
   * flex 의 order 로 블록 순서를 다시 짭니다.
   * 자식 순서를 기준으로 잡으므로, 마크업이 바뀌면 이 규칙도 함께 봐야 합니다.
   * (순서는 테스트로 고정해 두었습니다)
   *
   *   1~4   배경 원      → 감춤
   *   5~8   단계명        Plan / Design / Develop / Care
   *   9~12  한 줄 설명
   *   13    화살표       → 감춤
   *   14~20 세부 단계     리서치·기획 / UX설계·UI디자인·퍼블리싱 / 개발 / 운영
   *   21,23,25,27 잇는 선
   *   22,24,26,28 산출물
   * ─────────────────────────────────────────────────────── */

  .process-viewport {
    height: auto;
    overflow: visible;
    margin-top: 56px;
  }

  .process-stage {
    position: static;
    width: 100%;
    height: auto;
    transform: none;
    display: flex;
    flex-wrap: wrap;
    column-gap: 6px;
  }

  /* 인라인 좌표(style="left: …")를 모두 무효화하고 흐름 배치로 되돌립니다. */
  .process-stage > * {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    /* 나타나는 효과가 실패해도 내용이 보이도록 */
    opacity: 1 !important;
  }

  /* 배경 원과 가로 화살표는 세로 배치에서 쓰지 않습니다. */
  .process-stage > :nth-child(-n + 4),
  .process-stage > :nth-child(13) {
    display: none !important;
  }

  /* 단계명 — 블록의 머리 */
  .process-stage > :nth-child(5) { order: 10; }
  .process-stage > :nth-child(6) { order: 20; }
  .process-stage > :nth-child(7) { order: 30; }
  .process-stage > :nth-child(8) { order: 40; }

  .process-stage-name {
    flex: 0 0 100%;
    text-align: left !important;
    font-size: 13px;
    color: var(--c-brand);
    border-top: 0.5px solid var(--c-line-strong);
    padding-top: 20px;
  }

  /* 한 줄 설명 */
  .process-stage > :nth-child(9) { order: 11; }
  .process-stage > :nth-child(10) { order: 21; }
  .process-stage > :nth-child(11) { order: 31; }
  .process-stage > :nth-child(12) { order: 41; }

  .process-stage-desc {
    flex: 0 0 100%;
    text-align: left !important;
    margin-top: 8px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--c-text);
  }

  /* 세부 단계 — 원을 그리지 않고 글자로만, 한 줄에 이어서 */
  .process-stage > :nth-child(14),
  .process-stage > :nth-child(15) { order: 12; }
  .process-stage > :nth-child(16),
  .process-stage > :nth-child(17),
  .process-stage > :nth-child(18) { order: 22; }
  .process-stage > :nth-child(19) { order: 32; }
  .process-stage > :nth-child(20) { order: 42; }

  .process-step {
    display: block !important;
    background: none !important;
    color: var(--c-text-mute) !important;
    font-size: 14px;
    margin-top: 10px;
  }

  /* 같은 블록 안에서 단계 사이에 가운뎃점을 넣습니다. */
  .process-stage > :nth-child(14)::after,
  .process-stage > :nth-child(16)::after,
  .process-stage > :nth-child(17)::after {
    content: '·';
    margin-left: 6px;
    color: var(--c-line-strong);
  }

  /* 산출물 */
  .process-stage > :nth-child(22) { order: 13; }
  .process-stage > :nth-child(24) { order: 23; }
  .process-stage > :nth-child(26) { order: 33; }
  .process-stage > :nth-child(28) { order: 43; }

  .process-out-label {
    flex: 0 0 100%;
    text-align: left !important;
    margin-top: 10px;
    font-size: 13px;
    color: var(--c-text-mute);
  }

  .process-out-label::before {
    content: '산출물 ';
    color: var(--c-text-faint);
  }

  /* 블록을 잇는 세로 점선 — 원본의 산출물 연결선을 그대로 씁니다. */
  .process-stage > :nth-child(21) { order: 14; }
  .process-stage > :nth-child(23) { order: 24; }
  .process-stage > :nth-child(25) { order: 34; }
  .process-stage > :nth-child(27) { order: 44; }

  .process-out-line {
    flex: 0 0 100%;
    height: 28px !important;
    margin: 16px 0 4px 6px;
  }

  /* CARE 아래 — 운영은 끝나지 않고 계속된다는 표시 */
  .process-stage > :nth-child(27) {
    height: 44px !important;
    display: flex;
    align-items: flex-end;
    border-left-style: dashed;
  }

  .process-stage > :nth-child(27)::after {
    content: '넘긴 뒤에도 계속';
    padding-left: 12px;
    font-size: 12px;
    color: var(--c-text-mute);
  }

  /* ───────────────────────────────────────────────────────
   * 2. 히어로
   * ─────────────────────────────────────────────────────── */

  .hero__content {
    /* 좌우 여백이 최소 20px 은 남도록 */
    padding: 0 max(var(--pad-x), 20px);
  }

  .hero__title {
    /* 영문 headline 이 화면 밖으로 나가거나 어중간하게 잘리지 않게 */
    font-size: min(var(--fs-h1), 11vw);
  }

  .hero__line {
    white-space: nowrap;
  }

  .hero__sub {
    line-height: 1.75;
  }

  /* ───────────────────────────────────────────────────────
   * 3. PROJECTS 카드 썸네일
   *
   * 1열이 되면 카드 하나가 화면을 너무 많이 차지합니다.
   * 비율은 원본(16:9) 그대로 두고 높이 상한만 겁니다.
   *
   * 390px 화면이면 좌우 여백 20px 을 뺀 350px 폭에 높이 197px 이라
   * 상한에 걸리지 않고 원본 비율로 나옵니다.
   * 상한은 화면이 430px 을 넘을 때부터 작동합니다.
   * ─────────────────────────────────────────────────────── */

  #projects .card__thumb {
    aspect-ratio: 16 / 9;
    max-height: 220px;
  }

  /* ───────────────────────────────────────────────────────
   * 4. 업무 영역 — 목록처럼 경계를 또렷하게
   * ─────────────────────────────────────────────────────── */

  .work-grid {
    gap: 0;
  }

  .work-item {
    padding: 24px 0;
    border-top-color: var(--c-line-strong);
  }

  .work-item:last-child {
    border-bottom: 0.5px solid var(--c-line-strong);
  }

  /* ───────────────────────────────────────────────────────
   * 5. 문의 폼 안내 문구
   *    개인정보 동의는 반드시 읽혀야 하는 내용입니다.
   * ─────────────────────────────────────────────────────── */

  .form-note {
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-text-sub);
  }
}

/* ───────────────────────────────────────────────────────
 * 6. 상단 로고의 글자 부분(워드마크)
 *
 * 원본은 680px 아래에서 워드마크를 통째로 감췄습니다. 원래 크기(202×13)로는
 * 마크 68 + 간격 14 + 워드마크 202 = 284px 이라, 햄버거 44px 와 좌우 여백 20px 를
 * 더하면 375px 폰에서 9px 넘치기 때문입니다.
 *
 * 다만 680px 은 너무 크게 잡은 기준이어서, 자리가 남는 400~680px 구간까지
 * 회사 이름이 사라지고 있었습니다. 그래서 워드마크를 11px 로 줄여 되살립니다.
 * 줄인 크기로는 로고가 251px 이라 360px 폰에서도 들어갑니다.
 *
 * 메인은 워드마크가 <span> 안에 밝은판·어두운판 두 장을 겹쳐 둔 구조라
 * (히어로 위에서는 밝은판, 스크롤하면 어두운판), 바깥 크기만 줄이면 둘 다 따라 줄어듭니다.
 * ─────────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .brand-logo {
    gap: 12px;
  }

  .brand-logo__wordmark {
    display: block;
    width: 171px;
    height: 11px;
  }
}

/* 그보다 좁은 화면은 자리가 나오지 않으므로 마크만 남깁니다 */
@media (max-width: 359px) {
  .brand-logo__wordmark {
    display: none;
  }
}