/* =========================================================
   GILDONGSEKKI SUBPAGE LAYOUT FINAL V1
   2026-09-29

   최종 목적
   - 헤더 바로 아래부터 시작
   - 소개 배너를 상단 탭 정도의 높이로 통일
   - 실제 콘텐츠를 첫 화면에서 바로 노출
   - 기존 페이지별 CSS보다 마지막에 로드
========================================================= */


/* =========================================================
   1. HEADER -> MAIN 불필요한 24px 제거
========================================================= */

body.gs-depth-page > main{
  padding-top:0 !important;
}


/*
 * 기존:
 * main padding-top 14px
 * hero margin-top 10px
 *
 * 둘 다 제거한다.
 */
body.gs-depth-page
.gs-depth-hero-card{
  margin-top:0 !important;
}


/* 혹시 동적으로 삽입된 네이티브 상태바가 있다면
   main 최상단에서는 노출하지 않는다. */
body.gs-depth-page > main > progress,
body.gs-depth-page > main > meter,
body.gs-depth-page > main > input[type="range"]{
  display:none !important;
}


/* =========================================================
   2. COMMON HERO
   MEMBERS / LIVE / PLAY / COMMUNITY
========================================================= */

body.gs-depth-page
.functional-page-hero.gs-subhero.gs-depth-hero-card{

  box-sizing:border-box !important;

  width:
    min(
      1180px,
      calc(100% - 48px)
    ) !important;

  max-width:1180px !important;

  height:88px !important;
  min-height:88px !important;
  max-height:88px !important;

  /*
   * 헤더와 살짝 분리하고
   * 좌우는 정확하게 중앙정렬
   */
  margin:
    14px auto 12px !important;

  padding:
    8px 22px !important;

  overflow:hidden !important;
}


/* 내부 폭/정렬은 기존 사이트 기준 유지 */
body.gs-depth-page
.functional-page-hero
.functional-wrap{

  width:100% !important;
  max-width:none !important;

  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;

  box-sizing:border-box !important;
}


/* 작은 영문 */
body.gs-depth-page
.functional-page-hero small{

  margin:
    0 0 3px !important;

  font-size:7px !important;
  line-height:1 !important;
}


/* 제목 */
body.gs-depth-page
.functional-page-hero h1{

  margin:
    0 0 4px !important;

  font-size:26px !important;
  line-height:1 !important;
}


/* 설명 */
body.gs-depth-page
.functional-page-hero p{

  margin:0 !important;

  font-size:9px !important;
  line-height:1.3 !important;
}


/* =========================================================
   COMMON HERO RIGHT ICON
========================================================= */

body.gs-depth-page
.functional-page-hero
.gs-subhero-visual{

  width:74px !important;
  height:74px !important;

  right:
    max(4vw,34px) !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;
}


body.gs-depth-page
.functional-page-hero
.gs-subhero-emblem-bg{

  width:68px !important;
  height:68px !important;
}


body.gs-depth-page
.functional-page-hero
.gs-subhero-image{

  width:56px !important;
  height:56px !important;
}


/*
 * PROFILE / CREW 같은 작은 떠있는 태그는
 * 얇은 hero에서는 불필요.
 */
body.gs-depth-page
.functional-page-hero
.gs-subhero-tag{

  display:none !important;
}


/* 큰 장식 텍스트 제거 */
body.gs-depth-page
.functional-page-hero.gs-subhero::after{

  display:none !important;
}


/* 배경 원도 축소 */
body.gs-depth-page
.functional-page-hero.gs-subhero::before{

  width:140px !important;
  height:140px !important;

  top:-58px !important;
  right:-28px !important;
}


/* =========================================================
   3. MEMBERS
========================================================= */

body.gs-depth-members
.crew-members-section{

  padding:
    18px 0 60px !important;
}


body.gs-depth-members
.crew-section-intro{

  margin-bottom:
    18px !important;
}


body.gs-depth-members
.crew-section-intro small{

  font-size:8px !important;
}


body.gs-depth-members
.crew-section-intro h2{

  margin:
    5px 0 5px !important;

  font-size:28px !important;
  line-height:1.15 !important;
}


body.gs-depth-members
.crew-section-intro p{

  font-size:10px !important;
  line-height:1.45 !important;
}


/* 수장 카드와 다음 영역 사이도 과도하지 않게 */
body.gs-depth-members
.crew-leader{

  margin-bottom:
    42px !important;
}


/* =========================================================
   4. LIVE
========================================================= */

body.gs-depth-live
.live-page-section{

  padding:
    18px 0 65px !important;
}


body.gs-depth-live
.live-page-section
.layout-block-head{

  margin-bottom:
    12px !important;
}


/* =========================================================
   5. FARM
   공통 hero와 별개 구조라 직접 통일
========================================================= */

body.gs-depth-farm
.farm-photo-hero.gs-depth-hero-card{

  box-sizing:border-box !important;

  width:
    min(
      1180px,
      calc(100% - 48px)
    ) !important;

  max-width:1180px !important;

  height:88px !important;
  min-height:88px !important;
  max-height:88px !important;

  margin:
    14px auto 12px !important;

  padding:
    8px 22px !important;

  overflow:hidden !important;
}


body.gs-depth-farm
.farm-photo-hero-inner{

  width:100% !important;
  max-width:none !important;

  height:100% !important;

  margin:0 !important;
  padding:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:20px !important;

  box-sizing:border-box !important;
}


body.gs-depth-farm
.farm-photo-hero-inner > div:first-child{

  max-width:
    56% !important;
}


body.gs-depth-farm
.farm-photo-hero small{

  margin:
    0 0 3px !important;

  font-size:7px !important;
  line-height:1 !important;
}


body.gs-depth-farm
.farm-photo-hero h1{

  margin:0 !important;

  font-size:26px !important;
  line-height:1 !important;
}


body.gs-depth-farm
.farm-photo-hero p{

  margin:
    4px 0 0 !important;

  font-size:9px !important;
  line-height:1.3 !important;
}


/* FARM 장식 아이콘 */
body.gs-depth-farm
.farm-photo-hero
.gs-subhero-visual{

  width:70px !important;
  height:70px !important;

  right:25% !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;
}


body.gs-depth-farm
.farm-photo-hero
.gs-subhero-emblem-bg{

  width:64px !important;
  height:64px !important;
}


body.gs-depth-farm
.farm-photo-hero
.gs-subhero-image{

  width:52px !important;
  height:52px !important;
}


body.gs-depth-farm
.farm-photo-hero
.gs-subhero-tag{

  display:none !important;
}


/* 업로드 버튼 */
body.gs-depth-farm
.farm-photo-upload-button{

  min-width:108px !important;
  height:32px !important;

  padding:
    0 12px !important;

  font-size:10px !important;

  position:relative !important;

  z-index:10 !important;
}


body.gs-depth-farm
.farm-feed-area{

  padding-top:
    18px !important;
}


/* =========================================================
   6. PLAY
========================================================= */

body.gs-depth-play
.play-coming-soon{

  min-height:
    350px !important;

  padding:
    32px 24px !important;

  margin-top:0 !important;
}


/* =========================================================
   7. COMMUNITY
========================================================= */

body.gs-depth-community
#community-app{

  padding-top:
    18px !important;

  padding-bottom:
    65px !important;
}


/* =========================================================
   8. MISSION
   이 페이지만 독립 hero 구조
========================================================= */

.mission-page{

  width:
    min(
      1180px,
      calc(100% - 24px)
    ) !important;

  padding:
    14px 0 60px !important;
}


.mission-hero{

  box-sizing:border-box !important;

  min-height:72px !important;

  padding:
    7px 16px 9px !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;
}


.mission-hero-kicker{

  font-size:7px !important;
  line-height:1 !important;
}


.mission-hero h1{

  margin:
    3px 0 4px !important;

  font-size:27px !important;
  line-height:1 !important;
}


.mission-hero p{

  margin:0 !important;

  font-size:9px !important;
  line-height:1.3 !important;
}


.mission-summary{

  margin-top:
    5px !important;
}


/* =========================================================
   9. TABLET / MOBILE
========================================================= */

@media(max-width:800px){

  body.gs-depth-page
  .functional-page-hero.gs-subhero.gs-depth-hero-card,
  body.gs-depth-farm
  .farm-photo-hero.gs-depth-hero-card{

    height:82px !important;
    min-height:82px !important;
    max-height:82px !important;

    width:
      calc(100% - 20px) !important;

    margin:
      10px auto 8px !important;

    padding:
      7px 12px !important;
  }


  body.gs-depth-page
  .functional-page-hero h1,
  body.gs-depth-farm
  .farm-photo-hero h1{

    font-size:22px !important;
  }


  body.gs-depth-page
  .functional-page-hero p,
  body.gs-depth-farm
  .farm-photo-hero p{

    font-size:8px !important;
  }


  body.gs-depth-page
  .functional-page-hero
  .gs-subhero-visual{

    width:62px !important;
    height:62px !important;

    right:10px !important;
  }


  body.gs-depth-page
  .functional-page-hero
  .gs-subhero-emblem-bg{

    width:56px !important;
    height:56px !important;
  }


  body.gs-depth-page
  .functional-page-hero
  .gs-subhero-image{

    width:46px !important;
    height:46px !important;
  }


  /*
   * FARM은 작은 화면에서
   * 업로드 버튼과 장식 아이콘이 충돌하므로
   * 장식만 숨긴다.
   */
  body.gs-depth-farm
  .farm-photo-hero
  .gs-subhero-visual{

    display:none !important;
  }


  body.gs-depth-farm
  .farm-photo-hero-inner > div:first-child{

    max-width:
      calc(100% - 120px) !important;
  }


  body.gs-depth-farm
  .farm-photo-upload-button{

    min-width:100px !important;
    height:30px !important;

    font-size:9px !important;
  }


  body.gs-depth-members
  .crew-members-section{

    padding-top:
      14px !important;
  }


  body.gs-depth-members
  .crew-section-intro{

    margin-bottom:
      14px !important;
  }


  body.gs-depth-members
  .crew-section-intro h2{

    font-size:
      24px !important;
  }

}

/* =========================================================
   /GILDONGSEKKI SUBPAGE LAYOUT FINAL V1
========================================================= */


/* =========================================================
   MISSION SHARED HERO ALIGNMENT V1
   다른 서브페이지와 동일한 상단 카드 구조
========================================================= */


/*
 * mission-page 자체는 이제 전체 페이지 컨테이너.
 * 실제 콘텐츠 폭은 dashboard에서 제한한다.
 */
body.gs-depth-mission
main.mission-page{

  width:100% !important;
  max-width:none !important;

  margin:0 !important;

  padding:
    0 0 60px !important;
}


/*
 * HERO는 COMMON HERO 규칙을 그대로 사용.
 * mission 전용 중앙정렬 규칙만 제거한다.
 */
body.gs-depth-mission
.mission-hero{

  text-align:left !important;
}


/*
 * 실제 미션 콘텐츠는 다른 페이지의
 * functional-wrap과 동일한 1180 기준.
 */
body.gs-depth-mission
.mission-dashboard{

  width:
    min(
      1180px,
      calc(100% - 48px)
    ) !important;

  max-width:1180px !important;

  margin:
    0 auto !important;

  box-sizing:border-box !important;
}


/*
 * 예전 mission hero 아래 여백 보정 제거
 */
body.gs-depth-mission
.mission-summary{

  margin-top:0 !important;
}


/* 오른쪽 도전미션 아이콘 */
body.gs-depth-mission
.mission-hero
.gs-subhero-visual{

  width:74px !important;
  height:74px !important;

  right:
    max(4vw,34px) !important;
}


body.gs-depth-mission
.mission-hero
.gs-subhero-emblem-bg{

  width:68px !important;
  height:68px !important;
}


body.gs-depth-mission
.mission-hero
.gs-subhero-image{

  width:56px !important;
  height:56px !important;
}


/* MOBILE */
@media(max-width:800px){

  body.gs-depth-mission
  .mission-dashboard{

    width:
      calc(100% - 20px) !important;
  }

}

/* /MISSION SHARED HERO ALIGNMENT V1 */


/* =========================================================
   MISSION TITLE TYPOGRAPHY V1
   다른 서브페이지 제목과 동일한 serif 계열
========================================================= */

body.gs-depth-mission
.mission-hero h1{

  margin:
    0 0 4px !important;

  color:
    #435348 !important;

  font-family:
    "Noto Serif KR",
    Georgia,
    serif !important;

  font-size:
    26px !important;

  font-weight:
    500 !important;

  line-height:
    1 !important;

  letter-spacing:
    -.045em !important;
}


/* 상단 영문도 다른 카드와 동일한 톤 */
body.gs-depth-mission
.mission-hero small{

  color:
    #9c8465 !important;

  font-family:
    Georgia,
    serif !important;

  font-weight:
    700 !important;

  letter-spacing:
    .16em !important;
}


/* 설명 */
body.gs-depth-mission
.mission-hero p{

  color:
    #777b75 !important;

  font-weight:
    400 !important;

  letter-spacing:
    normal !important;
}


/* MOBILE */
@media(max-width:800px){

  body.gs-depth-mission
  .mission-hero h1{

    font-size:
      22px !important;
  }

}

/* /MISSION TITLE TYPOGRAPHY V1 */