/* =========================================================
   GILDONGSEKKI SUB PAGE DEPTH V2
========================================================= */


/* =========================================================
   PAGE CANVAS
========================================================= */

body.gs-depth-page{
  background:
    radial-gradient(
      circle at 8% 8%,
      rgba(220,231,211,.56) 0,
      rgba(220,231,211,0) 25%
    ),
    radial-gradient(
      circle at 92% 18%,
      rgba(237,211,155,.38) 0,
      rgba(237,211,155,0) 28%
    ),
    linear-gradient(
      180deg,
      #f5f2e9 0%,
      #f1ede3 52%,
      #ebe5d8 100%
    ) !important;
}


body.gs-depth-page main{
  position:relative;

  padding:
    30px 0 84px !important;

  background:
    transparent !important;
}


/*
 * 전체 페이지 안쪽에 아주 미세한 종이 질감 느낌
 */

body.gs-depth-page main::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.32;

  background-image:
    linear-gradient(
      rgba(79,91,76,.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(79,91,76,.012) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  z-index:0;
}


body.gs-depth-page main > *{
  position:relative;
  z-index:1;
}


/* =========================================================
   HERO CARD
========================================================= */

.gs-depth-hero-card{
  box-sizing:border-box !important;

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

  min-height:285px !important;

  margin:
    0 auto 30px !important;

  border:
    1px solid
    rgba(178,147,86,.28) !important;

  border-radius:
    28px !important;

  overflow:hidden !important;

  background:
    radial-gradient(
      circle at 79% 42%,
      rgba(246,214,148,.30) 0,
      rgba(246,214,148,.12) 22%,
      rgba(246,214,148,0) 47%
    ),
    linear-gradient(
      120deg,
      rgba(244,249,239,.98) 0%,
      rgba(253,250,240,.98) 52%,
      rgba(247,235,207,.98) 100%
    ) !important;

  box-shadow:
    0 24px 58px
      rgba(70,61,39,.105),

    0 6px 18px
      rgba(70,61,39,.065),

    inset 0 1px 0
      rgba(255,255,255,.92) !important;
}


/*
 * 기존 HERO의 큰 여백을 조금 정돈.
 */

.gs-depth-hero-card{
  padding-left:
    clamp(34px,4.5vw,68px) !important;

  padding-right:
    clamp(34px,4.5vw,68px) !important;
}


/*
 * HERO 상단 얇은 빛
 */

.gs-depth-hero-card{
  border-top-color:
    rgba(203,168,93,.45) !important;
}


/* 기존 subpage 아이콘은 보조요소로 */

.gs-depth-hero-card
.gs-subhero-visual{
  right:
    clamp(55px,8vw,125px) !important;

  width:250px !important;
  height:225px !important;
}


.gs-depth-hero-card
.gs-subhero-emblem-bg{
  width:195px !important;
  height:195px !important;

  background:
    radial-gradient(
      circle at 38% 30%,
      rgba(255,255,255,.96) 0%,
      rgba(253,247,226,.80) 47%,
      rgba(223,228,208,.48) 100%
    ) !important;

  border:
    1px solid
    rgba(168,139,79,.19) !important;

  box-shadow:
    0 18px 38px
      rgba(84,71,43,.10),

    inset 0 1px 0
      rgba(255,255,255,.95) !important;
}


.gs-depth-hero-card
.gs-subhero-image{
  width:170px !important;
  height:170px !important;

  filter:
    drop-shadow(
      0 10px 14px
      rgba(55,45,26,.18)
    ) !important;
}


.gs-depth-hero-card
.gs-subhero-tag{
  background:
    rgba(255,253,245,.86) !important;

  border:
    1px solid
    rgba(142,120,76,.20) !important;

  box-shadow:
    0 6px 18px
    rgba(63,53,35,.08) !important;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.gs-depth-content-card{
  box-sizing:border-box !important;

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

  margin:
    0 auto 28px !important;

  padding:
    clamp(28px,3.2vw,46px) !important;

  border:
    1px solid
    rgba(173,150,103,.24) !important;

  border-radius:
    24px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97) 0%,
      rgba(253,251,245,.97) 63%,
      rgba(248,243,232,.96) 100%
    ) !important;

  box-shadow:
    0 19px 48px
      rgba(65,57,41,.075),

    0 4px 13px
      rgba(65,57,41,.045),

    inset 0 1px 0
      rgba(255,255,255,.96) !important;

  overflow:hidden;
}


/*
 * 카드 위쪽에 아주 얇은 포인트 라인
 */

.gs-depth-content-card::before{
  content:"";

  position:absolute;

  left:30px;
  right:30px;
  top:0;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180,145,73,.34),
      transparent
    );

  pointer-events:none;
}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.gs-depth-page
.gs-depth-content-card h2,
.gs-depth-page
.gs-depth-content-card h3{
  color:#344f3e;
}


.gs-depth-page
.gs-depth-content-card > header{
  padding-bottom:18px;

  margin-bottom:24px;

  border-bottom:
    1px solid
    rgba(69,92,73,.09);
}


/* =========================================================
   MEMBERS
========================================================= */

body.gs-depth-members
[data-member-leader]{
  box-sizing:border-box;

  width:min(
    760px,
    100%
  );

  margin:
    18px auto 54px !important;

  padding:
    34px 38px !important;

  border:
    1px solid
    rgba(197,159,76,.30);

  border-radius:
    24px;

  background:
    radial-gradient(
      circle at 24% 35%,
      rgba(255,229,157,.22),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fffef9,
      #faf5e9
    );

  box-shadow:
    0 22px 48px
      rgba(77,62,35,.10),

    inset 0 1px 0
      rgba(255,255,255,.95);
}


body.gs-depth-members
[data-members-grid]{
  gap:24px !important;
}


body.gs-depth-members
[data-members-grid] > *{
  box-sizing:border-box;

  padding:
    28px 18px 26px !important;

  border:
    1px solid
    rgba(137,151,132,.19);

  border-radius:
    20px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(250,248,240,.98)
    );

  box-shadow:
    0 13px 31px
      rgba(55,69,57,.065),

    inset 0 1px 0
      rgba(255,255,255,.95);

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}


body.gs-depth-members
[data-members-grid] > *:hover{
  transform:
    translateY(-4px);

  border-color:
    rgba(174,139,71,.31);

  box-shadow:
    0 19px 38px
      rgba(55,69,57,.10),

    inset 0 1px 0
      rgba(255,255,255,.95);
}


/* =========================================================
   LIVE
========================================================= */

body.gs-depth-live
.poong-live-card{
  border:
    1px solid
    rgba(121,139,124,.18) !important;

  border-radius:
    18px !important;

  overflow:hidden;

  background:#fff;

  box-shadow:
    0 14px 34px
      rgba(52,66,55,.085),

    0 3px 9px
      rgba(52,66,55,.035) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


body.gs-depth-live
.poong-live-card:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 42px
      rgba(52,66,55,.12),

    0 4px 10px
      rgba(52,66,55,.05) !important;
}


body.gs-depth-live
.poong-live-grid{
  gap:24px !important;
}


/* =========================================================
   FARM
========================================================= */

body.gs-depth-farm
.farm-photo-card{
  border:
    1px solid
    rgba(130,150,127,.19) !important;

  border-radius:
    18px !important;

  overflow:hidden;

  background:
    #fff !important;

  box-shadow:
    0 14px 34px
      rgba(52,68,54,.075),

    0 3px 8px
      rgba(52,68,54,.035) !important;

  transition:
    transform .20s ease,
    box-shadow .20s ease;
}


body.gs-depth-farm
.farm-photo-card:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 42px
      rgba(52,68,54,.12),

    0 4px 10px
      rgba(52,68,54,.045) !important;
}


body.gs-depth-farm
.farm-photo-media{
  border-bottom:
    1px solid
    rgba(82,104,85,.08);
}


body.gs-depth-farm
.farm-photo-upload-button{
  border:
    1px solid
    rgba(255,255,255,.22);

  box-shadow:
    0 10px 24px
      rgba(55,83,62,.18),

    inset 0 1px 0
      rgba(255,255,255,.20) !important;
}


/* =========================================================
   PLAY
========================================================= */

body.gs-depth-play
.game-card,
body.gs-depth-play
.play-card,
body.gs-depth-play
.functional-content-card{
  border:
    1px solid
    rgba(181,148,81,.25) !important;

  border-radius:
    20px !important;

  background:
    linear-gradient(
      145deg,
      #fffdf7,
      #f8f0df
    ) !important;

  box-shadow:
    0 15px 35px
      rgba(85,66,34,.08),

    inset 0 1px 0
      rgba(255,255,255,.94) !important;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


body.gs-depth-play
.game-card:hover,
body.gs-depth-play
.play-card:hover,
body.gs-depth-play
.functional-content-card:hover{
  transform:
    translateY(-4px);

  box-shadow:
    0 21px 42px
      rgba(85,66,34,.12),

    inset 0 1px 0
      rgba(255,255,255,.94) !important;
}


/* =========================================================
   COMMUNITY
========================================================= */

body.gs-depth-community
table{
  overflow:hidden;

  border-collapse:
    separate !important;

  border-spacing:
    0 !important;

  border:
    1px solid
    rgba(99,119,102,.14);

  border-radius:
    13px;

  background:#fff;

  box-shadow:
    0 9px 24px
      rgba(51,65,54,.045);
}


body.gs-depth-community
table thead{
  background:
    linear-gradient(
      180deg,
      #f5f7f3,
      #edf1eb
    );
}


body.gs-depth-community
table tbody tr{
  background:
    rgba(255,255,255,.98);

  transition:
    background .15s ease;
}


body.gs-depth-community
table tbody tr:hover{
  background:
    #f8faf6;
}


body.gs-depth-community
.community-tabs,
body.gs-depth-community
.board-tabs{
  padding:
    7px;

  border:
    1px solid
    rgba(126,145,127,.16);

  border-radius:
    14px;

  background:
    rgba(255,255,255,.66);

  box-shadow:
    0 7px 20px
      rgba(54,68,57,.04);
}


/* =========================================================
   INPUTS / BUTTONS
========================================================= */

body.gs-depth-page
input,
body.gs-depth-page
textarea,
body.gs-depth-page
select{
  border-color:
    rgba(103,125,106,.22);

  box-shadow:
    inset 0 1px 2px
    rgba(40,55,44,.025);
}


body.gs-depth-page button{
  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


body.gs-depth-page button:hover{
  transform:
    translateY(-1px);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

  .gs-depth-hero-card,
  .gs-depth-content-card{
    width:
      calc(100% - 28px) !important;

    border-radius:
      21px !important;
  }


  .gs-depth-hero-card
  .gs-subhero-visual{
    right:25px !important;

    opacity:.85;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  body.gs-depth-page main{
    padding:
      14px 0 48px !important;
  }


  .gs-depth-hero-card{
    width:
      calc(100% - 18px) !important;

    min-height:230px !important;

    margin-bottom:
      16px !important;

    padding:
      32px 22px !important;

    border-radius:
      17px !important;
  }


  .gs-depth-content-card{
    width:
      calc(100% - 18px) !important;

    margin-bottom:
      16px !important;

    padding:
      22px 16px !important;

    border-radius:
      17px !important;
  }


  .gs-depth-hero-card
  .gs-subhero-visual{
    right:-35px !important;

    opacity:.18 !important;
  }


  body.gs-depth-members
  [data-member-leader]{
    padding:
      24px 16px !important;

    border-radius:
      18px;
  }


  body.gs-depth-members
  [data-members-grid]{
    gap:10px !important;
  }


  body.gs-depth-members
  [data-members-grid] > *{
    padding:
      20px 8px !important;

    border-radius:
      15px;
  }

}


/* SUBPAGE_HERO_FIX_V30_BEGIN */

/* =========================================================
   SUBPAGE HERO V30
   기존 좋은 구성 복구 + 은은한 배경 깊이만 추가
========================================================= */


/* ---------------------------------------------------------
   HERO CARD SIZE
--------------------------------------------------------- */

.gs-depth-hero-card{

  position:relative !important;

  min-height:285px !important;

  overflow:hidden !important;

  isolation:isolate;

  padding-top:
    46px !important;

  padding-bottom:
    46px !important;
}


/* =========================================================
   IMPORTANT
   기존 아이콘이 일반 흐름으로 떨어지던 문제 해결
========================================================= */

.gs-depth-hero-card
> .gs-subhero-visual{

  position:absolute !important;

  top:50% !important;

  right:
    clamp(60px,8vw,125px) !important;

  left:auto !important;

  bottom:auto !important;

  width:250px !important;
  height:225px !important;

  margin:0 !important;

  transform:
    translateY(-50%) !important;

  z-index:5 !important;
}


/* FARM도 오른쪽 고정 */

.gs-depth-hero-card[data-gs-page="farm"]
> .gs-subhero-visual{

  right:
    clamp(180px,19vw,330px) !important;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.gs-depth-hero-card
> *:not(.gs-subhero-visual){

  position:relative;

  z-index:3;
}


/* =========================================================
   BACKGROUND
   사진/아이콘 추가 없이 분위기만 만든다.
========================================================= */

.gs-depth-hero-card{

  background:

    /* 오른쪽 따뜻한 빛 */
    radial-gradient(
      circle at 83% 36%,
      rgba(235,197,117,.23) 0%,
      rgba(235,197,117,.10) 19%,
      rgba(235,197,117,0) 43%
    ),

    /* 왼쪽 연한 녹색 빛 */
    radial-gradient(
      circle at 8% 76%,
      rgba(115,148,113,.09) 0%,
      rgba(115,148,113,0) 30%
    ),

    /* 미세한 사선 패턴 */
    repeating-linear-gradient(
      135deg,
      rgba(83,103,84,.016) 0px,
      rgba(83,103,84,.016) 1px,
      transparent 1px,
      transparent 18px
    ),

    /* 기본 */
    linear-gradient(
      118deg,
      #eff5eb 0%,
      #faf8ef 51%,
      #f3e7cd 100%
    ) !important;
}


/* =========================================================
   아주 큰 원형 레이어
========================================================= */

.gs-depth-hero-card::after{

  content:"" !important;

  position:absolute !important;

  width:360px !important;
  height:360px !important;

  right:-70px !important;
  top:-125px !important;

  border-radius:50% !important;

  border:
    1px solid
    rgba(87,107,88,.055) !important;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.12),
      transparent 68%
    ) !important;

  box-shadow:
    0 0 0 44px
      rgba(87,107,88,.018),

    0 0 0 88px
      rgba(87,107,88,.009) !important;

  pointer-events:none !important;

  z-index:1 !important;
}


/* =========================================================
   WATERMARK
========================================================= */

.gs-depth-hero-card::before{

  content:"GILDONGSEKKI" !important;

  position:absolute !important;

  right:36px !important;
  bottom:18px !important;

  width:auto !important;
  height:auto !important;

  border:0 !important;

  border-radius:0 !important;

  background:none !important;

  box-shadow:none !important;

  color:
    rgba(58,77,63,.045) !important;

  font-family:
    Georgia,
    "Times New Roman",
    serif !important;

  font-size:
    clamp(35px,4vw,65px) !important;

  font-weight:700 !important;

  letter-spacing:.17em !important;

  white-space:nowrap !important;

  pointer-events:none !important;

  z-index:1 !important;
}


/* =========================================================
   ICON CIRCLE
========================================================= */

.gs-depth-hero-card
.gs-subhero-emblem-bg{

  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:190px !important;
  height:190px !important;

  transform:
    translate(-50%,-50%) !important;

  border-radius:50% !important;

  background:
    radial-gradient(
      circle at 38% 31%,
      rgba(255,255,255,.96) 0%,
      rgba(255,252,239,.82) 46%,
      rgba(228,230,211,.45) 100%
    ) !important;

  border:
    1px solid
    rgba(164,138,80,.16) !important;

  box-shadow:
    0 18px 38px
      rgba(74,64,43,.09),

    inset 0 1px 0
      rgba(255,255,255,.98) !important;
}


/* =========================================================
   ICON
========================================================= */

.gs-depth-hero-card
.gs-subhero-image{

  position:absolute !important;

  left:50% !important;
  top:50% !important;

  width:168px !important;
  height:168px !important;

  margin:0 !important;

  transform:
    translate(-50%,-50%) !important;

  object-fit:contain !important;

  z-index:3 !important;

  filter:
    drop-shadow(
      0 11px 16px
      rgba(58,48,29,.17)
    ) !important;
}


/* =========================================================
   LABELS
========================================================= */

.gs-depth-hero-card
.gs-subhero-tag{

  position:absolute !important;

  min-height:28px !important;

  padding:
    0 12px !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  border:
    1px solid
    rgba(120,128,101,.14) !important;

  border-radius:
    999px !important;

  background:
    rgba(255,255,255,.82) !important;

  color:
    #6e796f !important;

  font-size:
    8px !important;

  box-shadow:
    0 6px 18px
    rgba(52,63,53,.055) !important;

  z-index:4 !important;
}


.gs-depth-hero-card
.gs-subhero-tag-one{

  left:-8px !important;

  bottom:28px !important;
}


.gs-depth-hero-card
.gs-subhero-tag-two{

  right:-9px !important;

  top:27px !important;
}


/* =========================================================
   FARM UPLOAD BUTTON
========================================================= */

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

  position:absolute !important;

  right:
    clamp(42px,5vw,75px) !important;

  top:50% !important;

  transform:
    translateY(-50%) !important;

  z-index:7 !important;
}


/*
 * FARM은 업로드 버튼 공간 때문에
 * 아이콘을 버튼 왼쪽으로 이동.
 */

body.gs-depth-farm
.gs-depth-hero-card
> .gs-subhero-visual{

  right:
    clamp(235px,21vw,350px) !important;
}


/* =========================================================
   FARM TITLE AREA 보호
========================================================= */

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

  position:relative !important;

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

  max-width:1180px !important;

  margin:
    0 auto !important;

  min-height:86px !important;

  display:flex !important;

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


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

  position:relative !important;

  z-index:6 !important;

  max-width:590px !important;
}


/* =========================================================
   PAGE COLORS
========================================================= */

body.gs-depth-members
.gs-depth-hero-card{

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(225,190,105,.22),
      transparent 41%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(74,100,78,.015) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(
      118deg,
      #edf5e9,
      #faf8ef 52%,
      #f2e7ce
    ) !important;
}


body.gs-depth-live
.gs-depth-hero-card{

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(219,132,100,.14),
      transparent 40%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(74,100,78,.015) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(
      118deg,
      #edf4ea,
      #faf8ef 52%,
      #f1e6d0
    ) !important;
}


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

  background:
    radial-gradient(
      circle at 79% 35%,
      rgba(123,159,101,.17),
      transparent 40%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(74,100,78,.015) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(
      118deg,
      #eaf4e6,
      #faf8ee 52%,
      #f0e7d0
    ) !important;
}


body.gs-depth-play
.gs-depth-hero-card{

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(226,174,68,.18),
      transparent 40%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(74,100,78,.015) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(
      118deg,
      #edf4e8,
      #faf7eb 52%,
      #f0e3c8
    ) !important;
}


body.gs-depth-community
.gs-depth-hero-card{

  background:
    radial-gradient(
      circle at 82% 36%,
      rgba(187,145,80,.17),
      transparent 40%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(74,100,78,.015) 0 1px,
      transparent 1px 18px
    ),
    linear-gradient(
      118deg,
      #edf4ea,
      #faf8ef 52%,
      #efe4cb
    ) !important;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

  .gs-depth-hero-card
  > .gs-subhero-visual{

    right:25px !important;

    opacity:.72;
  }


  body.gs-depth-farm
  .gs-depth-hero-card
  > .gs-subhero-visual{

    right:185px !important;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:720px){

  .gs-depth-hero-card{

    min-height:225px !important;
  }


  .gs-depth-hero-card
  > .gs-subhero-visual{

    right:-35px !important;

    opacity:.16 !important;
  }


  body.gs-depth-farm
  .gs-depth-hero-card
  > .gs-subhero-visual{

    right:-35px !important;
  }


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

    position:relative !important;

    right:auto !important;
    top:auto !important;

    transform:none !important;

    margin-top:20px !important;
  }


  .gs-depth-hero-card::before{

    display:none !important;
  }

}

/* SUBPAGE_HERO_FIX_V30_END */