/* =====================================================================
   어사문 홈(index / appindex) 공용 스케일 시스템 — v1
   ---------------------------------------------------------------------
   설계 원칙
   1) 모든 크기/간격은 단 하나의 기준 단위 --u 의 배수로 표현한다.
      => 요소 간 비율이 어떤 화면에서도 고정된다.
   2) --u 는 (가로폭, 세로높이) 중 더 빡빡한 쪽을 따라간다.
      => 세로가 짧은 기기에서 자동으로 전체가 함께 작아진다.
   3) 그래도 넘칠 수 있는 극단적 환경은 home-scale.js 가 --fit 을
      이분 탐색으로 확정해 "잘림 0 / 스크롤 0" 을 보장한다.
   4) 기기별 @media 하드코딩은 두지 않는다. (유지보수 지점 1곳)

   Tailwind CDN 은 런타임에 <style> 을 head 끝에 주입하므로
   레이아웃을 확정해야 하는 속성만 !important 로 소유권을 가져온다.
   ===================================================================== */

:root {
    /* JS 자동 피팅 배율 (0.5 ~ 1.6). JS 미실행 시에도 1 로 정상 동작 */
    --fit: 1;

    /* 기준 단위: 폭 2.1vw 와 높이 1.05dvh 중 작은 값. 7px~13px 로 캡 */
    --u: calc(clamp(7px, min(2.1vw, 1.05dvh), 13px) * var(--fit));

    /* ---- 수직 리듬 (--u 배수) ---- */
    --gap-section: calc(var(--u) * 1.6);   /* 헤더 / 버튼 / 하단 블록 사이 */
    --gap-item: calc(var(--u) * 0.9);      /* 블록 내부 요소 사이 */
    --gap-tight: calc(var(--u) * 0.5);     /* 밀착 요소 사이 */

    /* ---- 타이포 스케일 (1.25 모듈러) ---- */
    --fs-xs: calc(var(--u) * 0.95);
    --fs-sm: calc(var(--u) * 1.15);
    --fs-md: calc(var(--u) * 1.4);
    --fs-lg: calc(var(--u) * 1.75);

    /* ---- 핵심 요소 치수 ---- */
    /* 원형 버튼: 44px(터치 최소) ~ 104px, 폭/높이 동시 제약 */
    --btn-size: calc(clamp(44px, min(17vw, 9.6dvh), 104px) * var(--fit));
    /* 헤더 캐릭터 이미지 */
    --hero-h: calc(clamp(64px, 20dvh, 240px) * var(--fit));
    /* 콘텐츠 최대 폭 (검색창·배너) */
    --content-w: min(28rem, 92vw);

    --radius-card: calc(var(--u) * 1.3);
}

/* ── 페이지 골격: 스크롤 원천 차단 ──────────────────────────────── */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

body.home-page {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* 본문 영역: 푸터를 뺀 나머지 전부. 여기서 넘치면 JS 가 --fit 을 줄인다. */
.main-content-wrapper {
    flex: 1 1 auto !important;
    min-height: 0;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    gap: var(--gap-section) !important;
    box-sizing: border-box;
    padding-top: max(var(--gap-item), env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(var(--gap-item), env(safe-area-inset-bottom, 0px)) !important;
    padding-left: max(var(--gap-item), env(safe-area-inset-left, 0px)) !important;
    padding-right: max(var(--gap-item), env(safe-area-inset-right, 0px)) !important;
}

/* 측정 정확도를 위해 직계 자식은 절대 축소되지 않는다.
   (축소되면 JS 가 "넘침"을 감지하지 못해 잘림이 생긴다) */
.main-content-wrapper > * {
    flex: 0 0 auto !important;
    width: 100%;
}

/* ── 헤더 ──────────────────────────────────────────────────────── */
.main-content-wrapper > header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-tight);
    padding: 0 !important;
    margin: 0 !important;
}

.main-header-imgbox {
    width: auto;
    max-width: 100%;
}

.main-header-img {
    display: block;
    height: var(--hero-h) !important;
    max-height: var(--hero-h) !important;
    width: auto !important;
    max-width: min(78vw, 340px) !important;
    object-fit: contain;
}

.main-header-sub {
    font-size: max(11px, var(--fs-sm)) !important;
    line-height: 1.25;
    margin: 0 !important;
    word-break: keep-all;
}

/* ── 원형 버튼 그리드 ──────────────────────────────────────────── */
.main-content-wrapper > main {
    padding: 0 !important;
    margin: 0 !important;
}

.button-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(var(--u) * 0.8) !important;
    max-width: min(56rem, 96vw);
    margin: 0 auto;
    padding: calc(var(--u) * 0.35) 0;   /* GAME 배지가 잘리지 않을 여백 */
}

.circle-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--btn-size) !important;
    height: var(--btn-size) !important;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .08);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s;
    text-decoration: none;
    background-color: #fff;
    container-type: inline-size;   /* 아이콘/라벨을 버튼 지름에 종속시킨다 */
}

.circle-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
}

/* 버튼 내부는 컨테이너 쿼리 단위(cqi)로 = 지름 대비 고정 비율 */
.button-icon {
    font-size: 34cqi !important;
    line-height: 1;
    margin-bottom: 2cqi;
}

.button-text {
    font-size: 15cqi !important;
    font-weight: 600;
    text-align: center;
    line-height: 1.05;
    word-break: keep-all;
    white-space: nowrap;
}

.game-badge {
    position: absolute;
    top: -4cqi;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11cqi !important;
    padding: 1.5cqi 4cqi !important;
    line-height: 1.2;
    white-space: nowrap;
    border-radius: 999px;
}

/* ── 검색창 ────────────────────────────────────────────────────── */
.search-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-item);
    padding: 0 !important;
    margin: 0 !important;
}

.search-container-box {
    position: relative;
    width: var(--content-w);
    margin: 0 !important;
}

.search-input-box {
    display: block;
    width: 100%;
    box-sizing: border-box;
    /* 16px 미만이면 iOS Safari 가 포커스 시 자동 확대되어 레이아웃이 깨진다 */
    font-size: max(16px, var(--fs-md)) !important;
    line-height: 1.2;
    padding: calc(var(--u) * 0.9) calc(var(--u) * 5.6) calc(var(--u) * 0.9) calc(var(--u) * 3.4) !important;
    border-radius: 999px;
}

.search-icon-box {
    width: calc(var(--u) * 1.5) !important;
    height: calc(var(--u) * 1.5) !important;
}

.search-icon-wrap {
    padding-left: calc(var(--u) * 1.2) !important;
}

.search-btn-box {
    position: absolute;
    top: calc(var(--u) * 0.45) !important;
    bottom: calc(var(--u) * 0.45) !important;
    right: calc(var(--u) * 0.45) !important;
    padding: 0 calc(var(--u) * 1.3) !important;
    font-size: var(--fs-sm) !important;
    border-radius: 999px;
    line-height: 1;
}

/* ── 앱설치 배너 ───────────────────────────────────────────────── */
.app-banner-container-box {
    width: var(--content-w);
    margin: 0 !important;
}

.app-banner-inner-box {
    padding: calc(var(--u) * 0.6) 0 !important;
    border-radius: var(--radius-card);
}

.app-banner-title-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-tight);
    margin: 0 0 var(--gap-tight) !important;
    padding: 0 calc(var(--u) * 0.3) !important;
}

.app-banner-title-text {
    font-size: max(11px, var(--fs-sm)) !important;
    line-height: 1.2;
}

.app-banner-title-badge,
.app-banner-title-hint {
    font-size: var(--fs-xs) !important;
    line-height: 1.2;
}

.app-banner-notice-box {
    margin: 0 0 var(--gap-tight) !important;
    padding: 0 !important;
}

.app-banner-notice-box > div {
    padding: calc(var(--u) * 0.5) calc(var(--u) * 0.8) !important;
    border-radius: calc(var(--u) * 0.8);
}

.app-banner-notice-text-box {
    font-size: max(10px, var(--fs-xs)) !important;
    line-height: 1.35;
    word-break: keep-all;
}

.app-banner-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gap-tight);
}

.app-banner-row {
    display: flex;
    gap: var(--gap-tight);
}

.app-banner-btn-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--u) * 0.6) !important;
    padding: calc(var(--u) * 0.7) calc(var(--u) * 0.9) !important;
    border-radius: calc(var(--u) * 0.9);
    min-height: calc(var(--u) * 3.4);
    box-sizing: border-box;
}

/* 공유 버튼은 아이콘만 — 황금비에 가까운 정폭으로 고정 */
.app-banner-btn-share {
    flex: 0 0 auto;
    width: calc(var(--u) * 5.4);
}

.app-banner-btn-icon-box {
    width: calc(var(--u) * 1.8) !important;
    height: calc(var(--u) * 1.8) !important;
    flex-shrink: 0;
}

.app-banner-btn-text-sub-box {
    font-size: calc(var(--u) * 0.8) !important;
    line-height: 1.15;
}

.app-banner-btn-text-main-box {
    font-size: max(11px, var(--fs-sm)) !important;
    line-height: 1.15;
}

/* ── 푸터 ──────────────────────────────────────────────────────── */
.site-footer {
    width: 100%;
    flex: 0 0 auto;
    background-color: #142814;
    color: #6b7c65;
    padding: calc(var(--u) * 0.8) calc(var(--u) * 1.2) !important;
    padding-bottom: calc(var(--u) * 0.8 + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-tight) calc(var(--u) * 1.2);
    padding: 0 !important;
    text-align: center;
}

.footer-copy,
.footer-links a {
    font-size: max(9px, var(--fs-xs)) !important;
    color: #6b7c65;
    margin: 0;
    line-height: 1.3;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-tight) calc(var(--u) * 1.1);
}

.footer-links a {
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
}

.footer-links a:hover { color: #FFE135; }

/* 넓은 데스크톱에서는 저작권/링크를 양끝 정렬 */
@media (min-width: 768px) {
    .footer-container {
        justify-content: space-between;
        max-width: 72rem;
        margin: 0 auto;
    }
}

/* ── 기타 ──────────────────────────────────────────────────────── */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* 자동 피팅이 끝나기 전 한 프레임 깜빡임 방지.
   .fit-pending 는 home-scale.js 가 직접 붙이므로
   JS 가 없거나 실패해도 콘텐츠가 숨겨진 채 남지 않는다. */
body.fit-pending:not(.fit-ready) .main-content-wrapper {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .circle-button,
    .animate-urgent-blink {
        transition: none !important;
        animation: none !important;
    }
}