/* ============================================================
   shared/glass.css — iOS 27 Liquid Glass 스킨 (페이지가 <link>로 옵트인)
   WWDC 2026 기준(26의 과한 투명도 되돌려 더 불투명·고대비·확산으로 가독성↑).
   theme.css 다음·페이지 인라인 <style> 앞에 링크 → 공통 클래스(.kh-panel 등)는
   여기서 글래스로 덮고, 페이지 고유 카드만 각 페이지에서 토큰으로 변환한다.
   theme.css·core.js는 건드리지 않는다(동시 작업 충돌 회피).
   ============================================================ */
:root {
    --glass-blur: blur(22px) saturate(165%);
    --glass-bg: rgba(255, 254, 251, .62);
    --glass-bg-solid: rgba(255, 254, 251, .74); /* 밀집 내부 카드(가독 우선) */
    --glass-bg-2: rgba(255, 254, 251, .66); /* 세그먼트/데이터 웰 등 중간 프로스트면(.62·.74 사이) */
    --glass-stroke: rgba(255, 255, 255, .7);
    --glass-spec: inset 0 1px 0 rgba(255, 255, 255, .92), inset 0 0 0 .5px rgba(255, 255, 255, .35);
    --glass-float: 0 14px 34px -14px rgba(8, 10, 16, .5), 0 4px 10px -5px rgba(8, 10, 16, .3);
    --glass-float-sm: 0 8px 20px -12px rgba(8, 10, 16, .42), 0 2px 6px -4px rgba(8, 10, 16, .26);
    --glass-d-bg: rgba(22, 17, 11, .38);
    --glass-d-stroke: rgba(255, 255, 255, .2);
    --glass-d-spec: inset 0 1px 0 rgba(255, 255, 255, .34);
    --glass-d-float: 0 12px 30px -10px rgba(0, 0, 0, .55);
}

/* hidden 속성을 권위 있게 — display 지정 클래스가 [hidden]을 덮어 빈 글래스 박스가 뜨는
   잠재버그를 전 글래스 페이지에서 일괄 차단(profile.html에서 발견한 결함의 전역 픽스). */
[hidden] { display: none !important; }

/* ===== 사진 월페이퍼 (glass.js가 --kh-scene에 내 프로필 이미지 주입, 미설정 시 기본) ===== */
body { background: #faf8f5; }
body::before {
    /* inset 단축은 Chrome 87+ — 카톡 인앱 Chrome79 기준선에선 선언 통째 드롭(월페이퍼 미표시). top/right/bottom/left 롱핸드. */
    content: ""; position: fixed; top: -8%; right: -8%; bottom: -8%; left: -8%; z-index: -2;
    background: var(--kh-scene, url("/images/heroes/hero-01-jade-mist.jpg")) center 22% / cover no-repeat;
    transform: scale(1.08); filter: blur(13px) saturate(1.08) brightness(1.02);
}
body::after {
    content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(243,238,230,.42) 0%, rgba(228,222,212,.48) 46%, rgba(210,205,197,.52) 100%),
        radial-gradient(120% 60% at 50% 0%, rgba(255,253,248,.34), transparent 60%);
}
/* admin 콘솔·법무 문서(body.kh-flat)는 사진 월페이퍼 제외 — 운영 테이블·긴 문서엔 사진 배경이
   과하고 가독·격을 해친다. 글래스 카드는 유지하되 깨끗한 한지 배경 위에 올린다(사용자 확정). */
body.kh-flat::before, body.kh-flat::after { display: none !important; }
body.kh-flat { background: radial-gradient(130% 80% at 50% 0%, #fdfbf6 0%, #f2ecde 68%, #ece4d3 100%) fixed; }

/* 카드 밖에서 사진 월페이퍼 위에 직접 깔리는 텍스트(페이지 제목·메타)는 어두운 히어로 이미지의
   어두운 영역과 겹쳐도 읽히게 — 옅은 한지빛 글로우. 밝은 영역·kh-flat(사진 없음)에선 사실상 안 보여 무해. */
body:not(.kh-flat) .kh-hero h1,
body:not(.kh-flat) .kh-hero .kh-meta {
    text-shadow: 0 1px 10px rgba(253, 250, 243, .92), 0 0 3px rgba(253, 250, 243, .6);
}

/* ===== 공통 표면(theme.css 클래스) → 글래스 타일 ===== */
.kh-panel, .kh-card, .kh-feature, .kh-metric {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-spec), var(--glass-float);
}

/* 페이지 고유 카드가 옵트인할 수 있는 유틸 (밀집 내부 카드는 더 불투명) */
.kh-glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-spec), var(--glass-float);
}
.kh-glass--inner {
    background: var(--glass-bg-solid);
    -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-spec), var(--glass-float-sm);
}

/* 하단 탭 바(core.js가 .kh-tabbar.kh-glass로 렌더): 바닥 고정이라 .kh-glass의 --glass-float
   그림자가 화면 밖(아래)으로 깔려 안 보이고, 전방위 테두리가 본문과의 구분선을 흰 줄로 덮어
   '붕 뜬' 느낌을 준다 → 위로 띄우는 그림자 + 상단 구분선만 남긴다(상단 sheen은 유지). */
.kh-tabbar.kh-glass {
    border: 0;
    border-top: 1px solid var(--glass-stroke);
    box-shadow: 0 -12px 32px -16px rgba(8, 10, 16, .42), var(--glass-spec);
}
@media (min-width: 900px) {
    /* 데스크톱은 같은 바가 상단 도킹 — 그림자/구분선 방향을 아래로 뒤집는다. */
    .kh-tabbar.kh-glass {
        border-top: 0;
        border-bottom: 1px solid var(--glass-stroke);
        box-shadow: 0 12px 32px -16px rgba(8, 10, 16, .42), var(--glass-spec);
    }
}

/* (상·하단 고정 크롬은 theme.css에서 불투명 솔리드로 통일 — 글래스 톤 재정의 제거.) */

/* 칩/배지도 살짝 글래스 — 흰 페이지 잔재가 사진 위에서 붕 뜨지 않게 */
.kh-chip, .kh-pill {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}

/* ===== 버튼/컨트롤도 글래스 (사용자 확정: 모든 버튼 글래스) =====
   보조(ghost/outline/quiet/filter)는 중립 프로스티드, 주요 액션(primary/gold/danger)은
   색 틴트 글래스로 강조를 유지(완전 클리어가 아니라 반투명 틴트). */
.kh-btn { -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); }
.kh-btn--ghost, .kh-btn--outline, .kh-btn--quiet, .kh-filter {
    background: var(--glass-bg-solid);
    border-color: var(--glass-stroke);
    box-shadow: var(--glass-spec), var(--glass-float-sm);
}
.kh-btn--primary {
    background: color-mix(in srgb, var(--kh-cinnabar) 82%, transparent);
    box-shadow: var(--glass-spec), var(--glass-float-sm);
}
.kh-btn--gold {
    background: color-mix(in srgb, var(--kh-gold) 84%, transparent);
    box-shadow: var(--glass-spec), var(--glass-float-sm);
}
.kh-btn--danger {
    background: color-mix(in srgb, var(--kh-crimson-soft) 60%, var(--glass-bg-solid));
    box-shadow: var(--glass-spec), var(--glass-float-sm);
}
/* color-mix가 var()를 감싸면 카톡 인앱 Chrome79에서 computed-value-time에 무효화돼 background=투명
   (앞선 선언으로도 대체 안 됨 — augments.html .pick-tab.is-active와 동일 함정). 이 블록은 아래
   backdrop-filter 미지원 폴백과 조건이 달라(Chrome79는 backdrop-filter는 지원) 별도로 게이팅한다.
   .kh-btn--primary는 흰 글자(--kh-on-primary)라 무배경이면 밝은 한지 위에서 안 보이는 손상 —
   이 버튼 3종이 저장·다음화·강화·습득 등 전 페이지 주요 CTA라 방치 시 파급이 크다. */
@supports not (background: color-mix(in srgb, red, blue)) {
    .kh-btn--primary { background: rgba(176, 58, 46, .82); }
    .kh-btn--gold { background: rgba(154, 111, 36, .84); }
    .kh-btn--danger { background: var(--kh-crimson-soft); }
}

/* 패널 안 데이터 셀(.kh-spec) — 글래스 패널과 톤 통일(셀마다 backdrop은 안 깖, 살짝 반투명 데이터 웰). */
.kh-spec {
    background: rgba(255, 254, 251, .7);
    border: 1px solid var(--glass-stroke);
    box-shadow: var(--glass-spec);
}
/* 배지도 글래스 — 의미색(상태)은 틴트로 유지하며 프로스티드. color-mix가 var()를 감싸 카톡 인앱
   Chrome79에서 무효화되면 이 배경도 투명으로 사라진다(theme.css의 -soft 배경으로 대체되는 게
   아님 — 캐스케이드가 이미 이 규칙을 승자로 고른 뒤 계산 시점에만 실패). 다만 배지 글자색이
   전부 --kh-*-text류 어두운 톤(흰 글자 없음)이라 투명해져도 밝은 한지 위에서 대비는 유지돼
   폴백 불요. */
.kh-badge { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--glass-spec); }
.kh-badge--ok, .kh-badge--win { background: color-mix(in srgb, var(--kh-jade) 22%, rgba(255,254,251,.88)); }
.kh-badge--danger, .kh-badge--lose { background: color-mix(in srgb, var(--kh-crimson) 22%, rgba(255,254,251,.88)); }
.kh-badge--warn, .kh-badge--gold { background: color-mix(in srgb, var(--kh-gold) 24%, rgba(255,254,251,.88)); }
.kh-badge--info, .kh-badge--season { background: color-mix(in srgb, var(--kh-azure) 22%, rgba(255,254,251,.88)); }
.kh-badge--primary { background: color-mix(in srgb, var(--kh-cinnabar) 22%, rgba(255,254,251,.88)); }
.kh-badge--weekly { background: color-mix(in srgb, var(--kh-amethyst) 22%, rgba(255,254,251,.88)); }

/* ===== 폴백: backdrop-filter 미지원(구 웹뷰) · 투명도 감소 선호 → 불투명 ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .kh-panel, .kh-card, .kh-feature, .kh-metric, .kh-glass { background: rgba(255, 254, 251, .95); }
    .kh-glass--inner { background: rgba(255, 254, 251, .97); }
    /* 버튼은 솔리드로 복귀(블러 없으면 반투명이 사진과 뭉개짐) */
    .kh-btn--ghost, .kh-btn--outline, .kh-btn--quiet, .kh-filter { background: rgba(255, 254, 251, .97); }
    .kh-btn--primary { background: var(--kh-cinnabar); }
    .kh-btn--gold { background: var(--kh-gold); }
    .kh-btn--danger { background: var(--kh-crimson-soft); }
}
@media (prefers-reduced-transparency: reduce) {
    .kh-panel, .kh-card, .kh-feature, .kh-metric, .kh-glass, .kh-glass--inner {
        -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 254, 251, .96);
    }
    .kh-btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
    .kh-btn--ghost, .kh-btn--outline, .kh-btn--quiet, .kh-filter { background: rgba(255, 254, 251, .97); }
    .kh-btn--primary { background: var(--kh-cinnabar); }
    .kh-btn--gold { background: var(--kh-gold); }
    .kh-btn--danger { background: var(--kh-crimson-soft); }
}