/* ============================================================
   custom-tools-fab.css — 「견적·사이즈」 떠 있는 단추 (2026-08-29)

   ■ 왜 전용 파일인가
     🎨 Front 조언: 공용 css/components.css 에 넣으면 **그것을 부르는 98개 화면 전부**의
     캐시 꼬리표를 올려야 한다(test/asset-cache-tag.test.js 가 잡는다).
     이 단추는 커스텀 화면 9곳에서만 쓰므로 전용 파일이 훨씬 싸다.

   ■ 자리 — js/chatbot.js 와 «같은 구석» 이라 값을 맞춘다
     chatbot 은 `bottom-5 right-4 sm:bottom-8 sm:right-6` 에 선다.
     이 파일이 만드는 #floating-fab 이 그 자리를 그대로 쓰고, 챗봇은 그 안에 합류한다
     (chatbot.js:869 가 #floating-fab 을 찾는다 — 규약은 있었는데 아무도 안 만들고 있었다).
     🚫 두 값이 갈리면 둘이 겹쳐 서로를 가린다.

   🚫 색을 직접 적지 않는다 — 반드시 var(--…). (fabric-guide 시험이 #rrggbb 를 잡는다)
   🚫 아이콘은 Material Symbols Outlined 만 쓴다.
   ✅ 누르는 곳은 44×44 이상 (이슈 #130: 모바일 삭제 X 가 0×0 이던 전례)
   ============================================================ */

#floating-fab {
    position: fixed;
    right: 1rem;                  /* chatbot 의 right-4 와 같다 */
    /* 🚨 아래에 «고정 바» 를 두는 화면이 있다 — 그만큼 위로 비켜선다.
       실측(2026-08-29 · 폰 375×812): price-guide 의 하단 요약 바(731~812)와
       단추(690~734)가 **3px 물렸다.** 겹치면 둘 다 못 누른다.
       🚫 화면마다 bottom 값을 따로 적지 마라 — 새 바가 생길 때마다 또 어긋난다.
          그 화면이 --stiz-fab-lift 만 말해 주면 된다. */
    bottom: calc(1.25rem + var(--stiz-fab-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 50;                  /* 🚫 챗봇(z-50)보다 높이지 않는다 — 챗 창을 덮으면 안 된다 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

@media (min-width: 640px) {       /* Tailwind sm: — chatbot 의 sm:bottom-8 sm:right-6 */
    #floating-fab {
        right: 1.5rem;
        /* 🚨 여기서도 --stiz-fab-lift 를 반드시 더한다 (2026-08-29 · 🎨 Front 가 잡아 줌).
           처음엔 `bottom: 2rem` 만 적었는데, 그러면 **이 규칙이 기준 규칙을 통째로 덮어**
           lift 가 사라진다. 하필 하단 바가 사는 구간(≤820px)과 이 구간(≥640px)이
           **640~820px 에서 겹쳐**, 태블릿(iPad 세로 768px)에서만 조용히 무시됐다.
           실측(768×1024): 챗봇이 y945~992 로 바(943~1024) **안에 통째로** 들어가고
           z-index 도 50 vs 120 이라 **바 뒤에 숨어 못 누른다.**
           ⚠️ 이 겹침은 내가 만든 것이 아니다 — 챗봇은 전부터 sm:bottom-8(32px) 이라
              같은 자리였다. 이제 이 그릇 안에 있으니 **함께** 비켜선다.
           🚫 bottom 을 적는 곳이 둘이면 한쪽이 반드시 변수를 빠뜨린다. 꼴을 같게 유지하라. */
        bottom: calc(2rem + var(--stiz-fab-lift, 0px) + env(safe-area-inset-bottom, 0px));
    }
}

.stiz-tools-fab {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

/* ── 단추 ── */
.stiz-tools-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;              /* ✅ 손가락이 닿는 크기 */
    min-height: 44px;
    padding: 0 14px;
    border: 2px solid var(--stiz-white, #fff);
    border-radius: 999px;
    background: var(--stiz-blue, var(--color-blue, #2563eb));
    color: var(--stiz-white, #fff);
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 25px rgb(0 0 0 / 22%);
    transition: transform .15s ease, background-color .15s ease;
}

.stiz-tools-btn:hover { transform: translateY(-1px); }
.stiz-tools-btn:focus-visible { outline: 2px solid var(--focus-ring, var(--stiz-black, #111827)); outline-offset: 3px; }
.stiz-tools-btn .material-symbols-outlined { font-size: 20px; }

/* 폰에서는 글자를 접어 동그란 단추로 — 챗봇 단추가 같은 방식이다 */
@media (max-width: 639px) {
    .stiz-tools-btn { padding: 0; width: 48px; }
    .stiz-tools-btn-label { display: none; }
}

/* ── 펼쳐지는 목록 ── */
.stiz-tools-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
    border-radius: 14px;
    background: var(--stiz-white, #fff);
    box-shadow: 0 12px 34px rgb(0 0 0 / 20%);
    border: 1px solid var(--color-border, var(--gray-200, #e5e7eb));
}

/* 🚫 hidden 을 display:flex 가 이긴다 — 명시적으로 막는다 (이 저장소가 이미 데인 곳이다) */
.stiz-tools-menu[hidden] { display: none; }

.stiz-tools-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;             /* ✅ 목록 한 줄도 손가락 크기 */
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--stiz-black, var(--color-text, #111827));
    text-decoration: none;
}

.stiz-tools-item:hover { background: var(--gray-100, #f3f4f6); }
.stiz-tools-item .material-symbols-outlined { font-size: 22px; color: var(--stiz-blue, var(--color-blue, #2563eb)); }
.stiz-tools-text { display: flex; flex-direction: column; line-height: 1.25; }
.stiz-tools-text b { font-size: 14px; font-weight: 800; }
.stiz-tools-text small { font-size: 12px; color: var(--color-muted, var(--gray-500, #6b7280)); }

/* ── 하단 고정 바가 있는 화면 ──────────────────────────────────────
   🚫 그 화면의 CSS(css/pages/price-guide.css 등)를 고치지 않는다 — 남의 파일이다.
      여기서 «그 화면일 때만» 들어 올린다. 바가 생기는 폭까지 같이 맞춘다. */
/* ⚠️ 820 이다(819 아니다) — 바 쪽 규칙이 `@media (max-width: 820px)` 라 딱 그 한 칸에서
   «바는 있는데 lift 는 0» 이 된다. 두 값을 같게 둔다. */
@media (max-width: 820px) {
    /* price-guide 는 좁은 화면에서 하단 요약 바를 띄우고 96px 를 비워 둔다 */
    .price-guide-page {
        --stiz-fab-lift: 96px;
    }
}