/* =========================================================
   공통 레이아웃 (헤더 / 콘텐츠 / 바텀)
   모든 페이지가 공유. 색/폰트 토큰은 여기서 관리.
   ========================================================= */
:root {
    /* Wordle 라이트 테마 색 */
    --color-correct: #6aaa64;   /* 초록: 자리·글자 맞음 */
    --color-present: #c9b458;   /* 노랑: 글자만 맞음 */
    --color-absent:  #787c7e;   /* 회색: 없는 글자 */
    --color-empty-border: #d3d6da;
    --color-tile-border: #878a8c;
    --color-key-bg: #d3d6da;
    --color-key-text: #1a1a1b;
    --color-text: #1a1a1b;
    --color-bg: #ffffff;
    --color-header-border: #d3d6da;

    --header-height: 52px;
    --footer-max-width: 500px;
    --content-max-width: 500px;

    /* 네이버 나눔고딕 (fallback 포함) */
    --font-base: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
}

* { box-sizing: border-box; }

/* 버튼·입력 요소도 본문 폰트(나눔고딕) 상속 */
button, input, select, textarea { font-family: inherit; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

.app {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- 공통 헤더 ---------- */
.app-header {
    flex: 0 0 var(--header-height);
    height: var(--header-height);
    display: grid;
    grid-template-columns: 48px 1fr minmax(48px, auto);
    align-items: center;
    border-bottom: 1px solid var(--color-header-border);
    padding: 0 8px;
}

.app-header__title {
    margin: 0;
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.app-header__side {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text);
    text-decoration: none;
}
.app-header__side--right { justify-content: flex-end; }

/* ---------- 가운데 콘텐츠 ---------- */
.app-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 8px;
    overflow: hidden;
}

/* ---------- 공통 바텀 ---------- */
.app-footer {
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--footer-max-width);
    margin: 0 auto;
    padding: 8px;
}

/* 헤더 액션 버튼(아이콘) 공통 */
.header-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text);
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.header-btn.is-off {
    opacity: 0.45;
}

/* ---------- 등급(티어) 배지 ---------- */
/* 색은 인라인 --tier 변수로 주입. (예: style="--tier:#d9a531") */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    color: var(--tier, #787c7e);
    background: color-mix(in srgb, var(--tier, #787c7e) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--tier, #787c7e) 38%, #fff);
}
.tier-badge__ico {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    /* path fill:currentColor → 배지 색(--tier) 상속 */
}