/* =============================================================
   design-system.css — 기능 페이지 간 시각 규격 통일
   기능별로 각자 만든 헤더(.chess-hero, .jwt-hero, .stocks-hero,
   .hero-panel, .section-header, 게임 셸의 topbar)가 제목 크기·여백·
   버튼 높이에서 제각각이었다. 여기서 한 규격으로 맞춘다.
   styles.css 뒤(그리고 페이지 전용 CSS 앞뒤 모두)를 이기도록 body
   클래스를 얹은 선택자를 함께 둔다.
   (충돌 회피: 공유 styles.css 는 건드리지 않는 별도 파일)
   ============================================================= */

/* ---------- 1. 페이지 헤더 ----------
   .page-hero 는 "이 헤더는 페이지 최상단 제목"이라는 표시다. 레이아웃은
   각 페이지가 이미 쓰던 것(.section-header 의 flex, .stocks-hero 의 grid)을
   그대로 두고, 제목 규격만 이 스코프 안에서 통일한다. */
.page-hero {
    margin-bottom: 1.6rem;
}

/* 페이지 제목 — 기존에 hero-title(최대 4.5rem)과 section-title(최대 2.15rem)로
   두 배 가까이 벌어져 있던 것을 하나로 모은다. */
/* body 를 앞에 붙여, extra_head 에서 뒤늦게 로드되는 페이지 전용 CSS
   (jwt-tools.css 의 .jwt-hero .hero-title 등)보다 우선하게 한다. */
body .page-hero .hero-title,
body .page-hero .section-title,
body .page-hero .panel-title,
body .page-hero h1,
body .tetris-brand h1,
body .minesweeper-brand h1 {
    /* 굴절 그라디언트는 요소 박스 전체에 깔린다. 블록 h1 은 컨테이너 폭까지
       늘어나 짧은 제목이 그라디언트 앞부분(파랑)만 보여주는 탓에, 페이지마다
       제목 색이 달라 보였다. 글자 폭에 맞춰 항상 같은 색 흐름이 나오게 한다. */
    width: fit-content;
    max-width: min(24ch, 100%);
    margin: 0;
    font-size: clamp(1.9rem, 3.2vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    background: linear-gradient(100deg,
        var(--lg-cool), var(--lg-iris) 42%, var(--lg-rose) 70%, var(--lg-warm));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 페이지 헤더 안의 eyebrow 는 제목에 더 붙인다 (기본 1rem 은 헤더에서 과하다) */
body .page-hero .eyebrow,
body .page-hero .section-kicker {
    margin-bottom: 0.55rem;
}

/* ---------- 2. eyebrow ----------
   .section-kicker 는 스타일 정의가 아예 없어 게임 페이지에서만 맨 텍스트로
   나오고 있었다. eyebrow 와 같은 알약 형태로 맞춘다. */
.section-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.55rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.76rem;
}

.section-kicker::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #ffd4ab);
    box-shadow: 0 0 18px rgba(255, 156, 82, 0.45);
}

/* ---------- 3. 버튼 ----------
   orange 계열(min-height 2.9rem)과 sky 계열(높이 지정 없음), 부트스트랩
   기본 버튼(각진 모서리)이 한 줄에 섞이면 높이와 모서리가 어긋났다.
   색 체계는 그대로 두고 형태만 맞춘다. */
.btn-orange:not(.btn-sm),
.btn-secondary-soft:not(.btn-sm),
.btn-sky:not(.btn-sm),
.btn-ghost-sky:not(.btn-sm),
.btn-ghost:not(.btn-sm),
.btn-outline-light:not(.btn-sm),
.btn-outline-danger:not(.btn-sm),
.btn-outline-warning:not(.btn-sm),
.btn-outline-secondary:not(.btn-sm) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.7rem;
    padding: 0.6rem 1.15rem;
    font-weight: 600;
}

/* 포털의 나머지 요소가 전부 알약 형태라 부트스트랩 버튼도 맞춘다 (작은 버튼 포함) */
.btn-orange,
.btn-secondary-soft,
.btn-sky,
.btn-ghost-sky,
.btn-ghost,
.btn-outline-light,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-secondary,
.btn-close,
.google-button {
    border-radius: 999px;
}

/* .btn-ghost 는 게임 페이지(줄넘기/테트리스/지뢰찾기)에서만 쓰이는데 색 정의가
   어디에도 없어, 부트스트랩 기본 .btn(어두운 본문색 글자 + 투명 배경)으로
   렌더돼 어두운 패널 위에서 거의 보이지 않았다. btn-ghost-sky 와 같은
   글래스 톤으로 맞춘다. */
.btn-ghost {
    border: 1px solid var(--panel-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    transition: border-color 0.2s var(--ease-out-soft),
                background 0.2s var(--ease-out-soft),
                transform 0.2s var(--ease-out-soft);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
    border-color: rgba(121, 212, 255, 0.55);
    background: var(--sky-soft, rgba(121, 212, 255, 0.16));
    color: var(--text);
}

.btn-ghost:disabled,
.btn-ghost.disabled {
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted);
}

.btn-sm.btn-outline-light,
.btn-sm.btn-outline-danger,
.btn-sm.btn-outline-warning,
.btn-sm.btn-orange {
    min-height: 2.1rem;
    padding: 0.3rem 0.85rem;
    font-weight: 600;
}

/* 헤더 우측에 버튼이 여러 개 놓이는 자리 — 줄바꿈과 간격을 통일 */
.page-hero .calendar-actions,
.page-hero .chat-header-actions,
.section-header .calendar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}