/*==================================
폰트 설정
==================================*/

/* 나눔스퀘어라운드 폰트 가져오기 */
@import url('https://cdn.jsdelivr.net/gh/innks/NanumSquareRound@master/nanumsquareround.min.css');

/*==================================
루트 변수 정의
==================================*/

:root {
  /* 일관된 타이포그래피를 위한 폰트 패밀리 */
  --font-primary: 'NanumSquareRound', sans-serif;      /* 기본 폰트 (나눔스퀘어라운드) */
  --font-secondary: 'NanumSquareRound', sans-serif;    /* 보조 폰트 */

  /* 일관된 테마를 위한 색상 팔레트 */
  --color-border: #4d4e5e;                    /* 기본 테두리 색상 */
  --color-tab-border: #4a4a54;                /* 탭 테두리 색상 */
  --color-tab-hover: #AC2747;                 /* 탭 호버 시 색상 (와인 레드) */
  --color-background-primary: #11141d;        /* 주요 배경색 (어두운 남색) */
  --color-background-hover: #08081c;          /* 호버 시 배경색 (더 어두운 남색) */
  --color-block: #222432;                     /* 블록 배경색 */
  --color-block-hover: #2d2d4a;               /* 블록 호버 시 배경색 */
  --color-bookmark-icon: #1f233c;             /* 북마크 아이콘 배경색 */

  /* 애니메이션 테두리를 위한 그라데이션 정의 */
  --gradient-border: linear-gradient(90deg, #F75050, #6C033D, #F75050);

  /* 일관된 간격 스케일 */
  --spacing-xs: 5px;                          /* 초소형 간격 */
  --spacing-sm: 8px;                          /* 소형 간격 */
  --spacing-md: 10px;                         /* 중형 간격 */
  --spacing-lg: 30px;                         /* 대형 간격 */
  --spacing-xl: 40px;                         /* 초대형 간격 */

  /* 일관된 스타일링을 위한 테두리 속성 */
  --border-width: 2px;                        /* 테두리 두께 */
  --border-radius: .375rem;                   /* 테두리 둥글기 (큰 값) */
  --border-radius-sm: .275rem;                /* 테두리 둥글기 (작은 값) */

  /* 일관된 모션을 위한 애니메이션 타이밍 */
  --animation-duration: 3s;                   /* 애니메이션 지속 시간 */
  --transition-duration: 0.3s;                /* 전환 효과 지속 시간 */

  /* 레이아웃 측정값 */
  --logo-size: 66px;                          /* 로고 크기 */

  /* 탭 전용 스타일 변수 */
  --tab-border-width: 2px;                    /* 탭 테두리 두께 */
  --tab-border-radius: .375rem;               /* 탭 테두리 둥글기 */
  --tab-backdrop-filter: blur(1px);           /* 탭 배경 블러 효과 */
}

/* 모든 텍스트에 나눔스퀘어라운드 폰트 적용 */
* {
  font-family: var(--font-primary) !important;
}

/*==================================
탭 스타일
==================================*/

/* 모든 탭을 포함하는 컨테이너 */
#myTab {
  padding: var(--spacing-xs);                 /* 내부 여백 5px */
  background: none;                           /* 배경 제거 */
  backdrop-filter: none;                      /* 배경 필터 제거 */
  display: flex;                              /* 플렉스박스 레이아웃 */
  justify-content: flex-start;                /* 좌측 정렬 */
  gap: var(--spacing-xl);                     /* 탭 간 간격 40px */
}

/* 개별 탭 스타일링 */
#myTab button[id$='-tab'] {
  border-width: var(--tab-border-width);      /* 테두리 두께 2px */
  border-radius: var(--tab-border-radius);    /* 둥근 모서리 */
  border-color: var(--color-tab-border);      /* 기본 테두리 색상 */
  backdrop-filter: var(--tab-backdrop-filter); /* 1px 블러 효과 */
  padding: 1px;                               /* 내부 여백 */
  margin: 1px;                                /* 외부 여백 */
  border-spacing: 0;                          /* 테두리 간격 0 */
  transition: border-color var(--transition-duration) ease; /* 테두리 색상 전환 효과 */
}

/* 탭 호버 효과 */
#myTab button[id$='-tab']:hover {
  border-color: var(--color-tab-hover);       /* 호버 시 와인 레드 색상으로 변경 */
}

/*==================================
서비스 카드 스타일
==================================*/

/* 기본 서비스 카드 컨테이너 */
.service-card {
  position: relative;                         /* 가상 요소 위치 기준점 */
  padding: 0;                                 /* 내부 여백 제거 */
  margin: 0;                                  /* 외부 여백 제거 */
  border-radius: var(--border-radius);        /* 둥근 모서리 */
  background: transparent;                    /* 투명 배경 */
  border: var(--border-width) solid var(--color-border); /* 2px 실선 테두리 */
  overflow: visible;                          /* 넘치는 콘텐츠 표시 */
}

/* 서비스 데이터 블록 배경색 */
.bg-theme-200\/50,
.flex-1.service-block {
  background-color: var(--color-block) !important; /* 블록 배경색 */
  transition: background-color var(--transition-duration) ease; /* 배경색 전환 효과 */
}

/* 서비스 카드 호버 시 블록 색상 변경 */
.service-card:hover [class*="bg-theme-200/50"],
.service-card:hover .flex-1.service-block {
  background-color: var(--color-block-hover) !important; /* 호버 시 더 밝은 블록 배경 */
}

/* 애니메이션 테두리 그라데이션 효과 */
.service-card::before {
  content: '';                                /* 빈 콘텐츠 */
  position: absolute;                         /* 절대 위치 */
  inset: calc(-1 * var(--border-width));      /* 테두리 두께만큼 확장 (-2px) */
  background: var(--gradient-border);         /* 빨강-보라 그라데이션 */
  z-index: -2;                                /* 카드 뒤쪽에 배치 */
  border-radius: var(--border-radius);        /* 둥근 모서리 */
  background-size: 200% 100%;                 /* 그라데이션 크기 2배 확장 */
  animation: wave var(--animation-duration) linear infinite; /* 3초 무한 애니메이션 */
  opacity: 0;                                 /* 기본 상태에서 숨김 */
  transition: opacity var(--transition-duration) ease; /* 투명도 전환 효과 */
}

/* 호버 시 애니메이션 테두리 표시 */
.service-card:hover::before {
  opacity: 1;                                 /* 호버 시 애니메이션 테두리 표시 */
}

/* 테두리 그라데이션 애니메이션 키프레임 */
@keyframes wave {
  0% { background-position: 100% 0; }         /* 시작: 우측 끝 */
  100% { background-position: -100% 0; }      /* 종료: 좌측 끝 (좌우로 흐르는 효과) */
}

/* 카드 내부 배경 효과 */
.service-card::after {
  content: '';                                /* 빈 콘텐츠 */
  position: absolute;                         /* 절대 위치 */
  inset: var(--border-width);                 /* 테두리 안쪽에 배치 (2px) */
  background: var(--color-background-primary); /* 어두운 배경색 */
  border-radius: var(--border-radius-sm);     /* 작은 둥근 모서리 */
  z-index: -1;                                /* 카드 콘텐츠 뒤에 배치 */
  transition: background-color var(--transition-duration) ease; /* 배경색 전환 효과 */
}

/* 호버 시 배경색 변경 */
.service-card:hover::after {
  background: var(--color-background-hover);  /* 호버 시 더 어두운 배경 */
}

/* 호버 시 기본 테두리 숨김 (애니메이션 테두리만 표시) */
.service-card:hover {
  border-color: transparent;                  /* 기본 테두리 투명화 */
}

/*==================================
북마크 섹션 스타일
==================================*/

/* 북마크 섹션 컨테이너 */
.flex.flex-col.mt-3.bookmark-list {
  border: var(--border-width) solid var(--color-border); /* 2px 실선 테두리 */
  border-radius: var(--border-radius);        /* 둥근 모서리 */
  padding: var(--spacing-md) var(--spacing-sm) 0 var(--spacing-sm); /* 상: 10px, 좌우: 8px, 하: 0 */
  margin-bottom: var(--spacing-sm);           /* 하단 여백 8px */
  background: rgba(0, 0, 0, 0.6); 
}

/* 북마크 아이콘 배경 */
.bookmark-icon {
  background-color: var(--color-bookmark-icon) !important; /* 어두운 남색 배경 */
}

/*==================================
레이아웃 그룹 스타일 - Bookmark
==================================*/

/* Bookmark 탭의 레이아웃 컨테이너 */
:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="Bookmark-tab"])) #layout-groups {
  --gap: var(--spacing-md);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap) !important;
}

/* 데스크톱 이상: 3열 */
:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="Bookmark-tab"])) #layout-groups > .bookmark-group {
  flex-basis: calc(33.33% - (var(--spacing-md) * 2 / 3)) !important;
  max-width: calc(33.33% - (var(--spacing-md) * 2 / 3)) !important;
}

/* 세로 모드 모바일: 1열 */
@media screen and (max-width: 450px) and (orientation: portrait) {
  :is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="Bookmark-tab"]))
  #layout-groups > .bookmark-group {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
}

/* 가로 모드 모바일: 2열 */
@media screen and (max-width: 950px) and (orientation: landscape) {
  :is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="Bookmark-tab"]))
  #layout-groups > .bookmark-group {
    flex-basis: calc(50% - (var(--spacing-md) / 2)) !important;
    max-width: calc(50% - (var(--spacing-md) / 2)) !important;
  }
}

/*==================================
APP 탭의 Service 섹션 스타일
==================================*/
:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="APP-tab"]))
  .services-group .services-list > .service {
  margin-bottom: var(--spacing-md);;          /* 카드들 간 세로 간격 */
}

/* 마지막 카드는 아래 여백 제거 (선택 사항) */
:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="APP-tab"]))
  .services-group .services-list > .service:last-child {
  margin-bottom: 0;
}

/*==================================
레이아웃 그룹 스타일 - APP 탭
==================================*/

/* APP 탭의 레이아웃 컨테이너 (계산식 포함) */
:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="APP-tab"])) #layout-groups {
  --gap: var(--spacing-md);                   /* 간격: 10px */
  display: flex;                              /* 플렉스박스 레이아웃 */
  flex-wrap: wrap;                            /* 줄바꿈 허용 */
  gap: var(--gap) !important;                 /* 아이템 간 간격 10px */
}

:is([id="inner_wrapper"]:has(#tabs [aria-selected="true"][id="APP-tab"])) #layout-groups > .services-group {
	margin-bottom: 10px; 
    flex-basis: 100% !important;
    max-width: 100% !important;
}

/*==================================
텍스트 스타일
==================================*/

/* 작은 텍스트 스타일링 (pre-line 공백 처리) */
.text-sm {
  white-space: pre-line;                      /* 줄바꿈 문자 인식 */
  text-align: center;                         /* 중앙 정렬 */
  font-size: 1em;                             /* 기본 폰트 크기 */
}

.text-sm::first-line {
  margin-bottom: var(--spacing-xs);           /* 첫 줄 하단 여백 5px */
}

/* _hidden 접두사로 시작하는 요소 숨김 */
[data-name^="_hidden"] .service-title,
.bookmark-group .bookmark-group-name {
  display: none;                              /* 제목 숨김 처리 */
}

/* 푸터 완전히 숨김 */
#footer {
  display: none;                              /* 푸터 제거 */
}