*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none;
}

img {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

html {
  background: var(--gb-bg);
}

body {
  max-width: var(--cc-app-width);
  margin: 0 auto;
  background: var(--gb-bg);
  color: var(--gb-text);
  font-family: var(--gb-font);
  line-height: var(--cc-leading-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--cc-size-tabbar) + var(--cc-space-24));
}

/* 한국어만 어절 단위로 줄을 바꾼다. 일본어·중국어는 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다 */
:lang(ko) body {
  word-break: keep-all;
}

body:has(.cc-screen--bare) {
  padding-bottom: calc(var(--cc-size-cta-height) + var(--cc-space-32) + var(--cc-space-4));
}

@media (width > 480px) {
  body {
    border-right: 1px solid var(--gb-border);
    border-left: 1px solid var(--gb-border);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

.gb-skip-link {
  position: fixed;
  top: 0.5rem;
  inset-inline-start: max(var(--cc-space-8), calc((100vw - var(--cc-app-width)) / 2 + var(--cc-space-8)));
  z-index: var(--cc-z-sheet);
  transform: translateY(-200%);
  padding: var(--cc-space-8) var(--cc-space-12);
  border-radius: var(--gb-radius-sm);
  background: var(--gb-surface);
  color: var(--gb-text);
  font-weight: var(--cc-weight-bold);
}

.gb-skip-link:focus-visible {
  transform: none;
}

.gb-sidebar:empty {
  display: none;
}

body > footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cc-space-12);
  padding: var(--cc-space-24) var(--gb-gutter) 0;
  border-top: 1px solid var(--gb-border);
  background: var(--gb-bg);
  color: var(--gb-text-dim);
  font-size: var(--cc-text-14);
}

footer nav {
  width: 100%;
}

footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--cc-space-16);
  margin: 0;
  padding: 0;
  list-style: none;
}

footer p {
  margin: 0;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-12);
}

footer a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  font-size: var(--cc-text-14);
}

.gb-lang-switch a,
.gb-lang-switch span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cc-fg-muted);
  font-size: var(--cc-text-14);
}

.gb-lang-switch a {
  text-decoration: none;
}

.gb-lang-switch [aria-current='true'] {
  color: var(--cc-fg);
  font-weight: var(--cc-weight-semibold);
}

.gb-lang-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-12);
  margin: var(--cc-space-16) var(--gb-gutter) 0;
  padding: var(--cc-space-8) var(--cc-space-12);
  border-radius: var(--gb-radius);
  background: var(--cc-surface);
  color: var(--cc-fg);
  font-size: var(--cc-text-14);
}

.gb-lang-offer button,
.gb-lang-offer [data-close] {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--gb-radius);
  background: transparent;
  color: var(--cc-fg-muted);
  font: inherit;
}

/* 엔진 화면(게시판·글·계정)은 플러그인 화면 틀이 없어 본문 여백을 여기서 준다 */
main:not(:has(> .gb-plugin-page)) {
  padding: var(--cc-space-20) var(--gb-gutter) var(--cc-space-24);
}

/* 홈처럼 위젯 영역으로 짠 화면은 영역마다 여백을 가진다 */
main:has(> .gb-area) {
  padding: 0;
}

main > h1 {
  margin: 0 0 var(--cc-space-16);
  font-size: var(--cc-text-22);
  font-weight: var(--cc-weight-bold);
}

/* 마우스로 쓰는 화면: 가로 줄은 얇은 스크롤바를 보이고 끌어서 넘긴다(끌기는 client.ts) */
@media (hover: hover) and (pointer: fine) {
  .l-scroll-x,
  .cc-explore-filters,
  .cc-new-run__roles {
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: var(--cc-border-strong) transparent;
  }

  .l-scroll-x:hover,
  .cc-explore-filters:hover,
  .cc-new-run__roles:hover {
    scrollbar-color: var(--cc-fg-faint) transparent;
  }
}

.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}