/*
 * 상세 화면 공용 스타일 — 우하단 컨트롤 묶음(#zoom-controls)과
 * 인쇄 / AI 노트 드롭업 메뉴.
 *
 * project_detail.php(서버 저장소)와 local_project_detail.php(지구·로컬 폴더)가
 * 함께 쓴다. js/detail_panels.js 와 짝이다 — 그 파일의 positionZoomControls /
 * toggleZoomControls / togglePrintMenu 가 여기 정의된 셀렉터를 전제로 동작한다.
 *
 * 지구 쪽엔 이 CSS 가 아예 없어서 컨트롤 묶음이 단순 absolute 로 떠 있었고
 * (safe-area·fixed 재배치 없음), 인쇄 메뉴는 라이트 테마에서 읽기 어려웠다.
 */

/* ===== 우하단 컨트롤 묶음 ===== */
/* body 높이를 동적 viewport(dvh) 기준으로 잡아 iOS Safari 의 URL bar 가 늘었다 줄었다
   해도 레이아웃이 100vh 만큼 오버슈트되지 않도록 — 그러지 않으면 <main> 의 bottom 이
   실제 viewport 보다 아래로 밀려 우하단의 #zoom-controls 가 화면 밖으로 잘릴 수 있다. */
@supports (height: 100dvh) {
    body.h-screen { height: 100dvh; }
}

/* #zoom-controls — 메인 패널 우하단에 떠 있는 컨트롤 묶음.
   - position: fixed 로 viewport 기준 배치하고, JS(positionZoomControls)가 <main>의
     bounding rect 를 보고 right/bottom 을 동적으로 갱신한다. fixed 로 잡아두면
     패널 사이즈 변경 / iOS URL bar 변동 / 화면 회전 어떤 상황에서도 화면 밖으로
     잘리지 않는다.
   - JS 가 아직 첫 계산을 못한 시점이나 JS 가 실패한 경우의 폴백: viewport 우하단.
   - 모바일 노치/홈 인디케이터 회피용 env() safe-area 패딩 포함. */
#zoom-controls {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    /* 토글 버튼을 항상 컨테이너 하단(= 고정 bottom offset)에 고정.
       접기/펼치기 시 #zoom-controls-items 의 높이(모바일 wrap 다중 row,
       collapsed 상태 intrinsic 높이)가 변해도 items-center 였다면 토글이
       세로 중앙으로 재정렬돼 위로 튀었음. flex-end 로 토글 위치 불변.
       ID 셀렉터라 HTML 의 .items-* Tailwind 클래스보다 우선. */
    align-items: flex-end;
}

/* Zoom controls 접기 — items 가 우측으로 슬라이드되어 사라짐.
   collapsed 상태: scale + translate + opacity 0, layout 에서 0 width 차지. */
#zoom-controls-items {
    transform-origin: right center;
}
#zoom-controls[data-collapsed="true"] #zoom-controls-items {
    transform: translateX(calc(100% + 0.5rem)) scale(0.85);
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    overflow: hidden;
    margin-right: -0.5rem;  /* gap 상쇄 */
    /* 접힌 상태에선 한 줄로. 아래 expanded 규칙의 wrap-reverse 가 max-width:0 과 만나면
       버튼 9개가 세로 한 줄씩으로 쌓여 — 투명해서 안 보일 뿐 — 컨테이너가 388px 높이가 된다
       (2026-09-30 실측). 그 투명 기둥이 iframe 위 클릭을 가로채고, 접힘 전이(max-width 0.3s)
       중 줄이 늘었다 줄었다 하는 흔들림도 있었다. */
    flex-wrap: nowrap;
}
/* items 의 expanded(펼침) 상태 — flex-wrap 으로 좁은 화면에서 다중 row 로 wrap.
 *
 * 문제: 좁은 모바일 화면(예: 360px)에서 9개 버튼이 단일 row 면 폭이 ~400px 가 돼
 * #zoom-controls 의 fixed right offset(16px) 와 합산되면 왼쪽 끝 버튼이 viewport
 * 바깥으로 밀려 잘림.
 *
 * 해결: flex-wrap: wrap-reverse 로 다중 row 허용 + max-width 를 viewport
 * 기준으로 캡(= 100vw - 좌우 여유 - 토글 버튼 폭). 좌우 마진 1rem + 토글 ~3rem +
 * gap ~1rem 보수적으로 약 6rem. justify-content: flex-end 로 wrap 된 row 들도
 * 우측 정렬 — 토글 버튼과 시각적 정렬 유지.
 *
 * wrap-reverse 인 이유: 첫 줄(앞쪽 버튼 대부분)이 맨 아래, 넘친 뒤쪽 버튼(인쇄 등)은 그
 * 윗줄에 우측 정렬로 쌓인다. 그냥 wrap 이면 넘친 버튼이 아랫줄로 떨어져 토글 옆에 인쇄
 * 버튼 하나만 덜렁 남고 그 위에 긴 줄이 떠 보였다(2026-09-28, 휴대폰).
 *
 * 데스크탑에선 자연스럽게 단일 row 유지(폭이 충분해 wrap 안 일어남).
 */
#zoom-controls-items {
    max-width: calc(100vw - 6rem);
    flex-wrap: wrap-reverse;
    justify-content: flex-end;
    row-gap: 0.5rem;  /* wrap 된 줄 사이 세로 간격 */
    transition: transform 0.3s ease, opacity 0.3s ease, max-width 0.3s ease, margin-right 0.3s ease;
}
#zoom-controls[data-collapsed="true"] #zoom-controls-chevron {
    transform: rotate(180deg);
}

/* === #zoom-controls 라이트 테마 가독성 보강 =================================
 * Tailwind `bg-black/50` + `shadow-lg`(회색 그림자) 조합이 라이트 본문(흰색/
 * 옅은 톤) 위에선 경계가 묻혀 버튼들이 작은 흐릿한 덩어리로 보임. 라이트에서만:
 *   - bg-black/50 → 진한 슬레이트(불투명도↑) + 화이트 ring 으로 경계 강조
 *   - shadow-lg 의 검은 그림자 진하기 ↑ 로 떠 보이게
 * 그라데이션·blue 버튼(매직 / 오디오 오버뷰 / 코드 수정) 은 이미 진한 컬러라
 * 그대로 두고 ring 만 살짝.
 *
 * 선택자: #zoom-controls 안의 모든 button + a 에 base 톤 강제. 개별 Tailwind
 * bg- 클래스 위에 `!important` 로 색만 override (gradient/blue 버튼은
 * background-image 가 우선해 유지됨).
 */
html:not(.dark) #zoom-controls button.bg-black\/50,
html:not(.dark) #zoom-controls a.bg-black\/50,
html:not(.dark) #zoom-controls [class*="bg-black/50"] {
    background-color: rgba(17, 24, 39, 0.85) !important;  /* gray-900 / 0.85 */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}
html:not(.dark) #zoom-controls button.bg-black\/50:hover,
html:not(.dark) #zoom-controls a.bg-black\/50:hover,
html:not(.dark) #zoom-controls [class*="bg-black/50"]:hover {
    background-color: rgba(17, 24, 39, 0.95) !important;
}
/* 매직 / 오디오 오버뷰 버튼 — Tailwind `from-purple-600/80 to-indigo-600/80`
 * 의 /80 알파가 흰 본문과 블렌딩되면 거의 흰색-에 가까운 옅은 보라/인디고로
 * 보여 다른 버튼들 사이에서 묻혀버린다. 라이트 한정으로 그라데이션을 100%
 * 불투명 + 채도 진한 톤으로 덮어 다른 버튼(짙은 슬레이트 / 블루)과 같은
 * 시각 무게로 맞춤. background-image 우선이라 Tailwind bg-gradient-to-r
 * 와의 충돌 없이 자연 override. */
html:not(.dark) #zoom-controls #btn-magic-wand,
html:not(.dark) #zoom-controls #btn-audio-overview-main {
    background-image: linear-gradient(to right, #7c3aed, #4f46e5) !important;  /* purple-600 → indigo-600 */
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.30) inset !important;
}
html:not(.dark) #zoom-controls #btn-magic-wand:hover,
html:not(.dark) #zoom-controls #btn-audio-overview-main:hover {
    background-image: linear-gradient(to right, #6d28d9, #4338ca) !important;  /* purple-700 → indigo-700 */
    box-shadow: 0 6px 18px rgba(79, 70, 229, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.36) inset !important;
}
/* 블루(코드 수정) — 이미 진하므로 ring 으로 경계만 보강. */
html:not(.dark) #zoom-controls #btn-edit-code {
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.25) inset !important;
}

/* ===== 인쇄 / AI 노트 드롭업 메뉴 ===== */
/* AI 요약 노트 / 인쇄 메뉴 — 양 테마 모두에서 가독성 보장.
   이전엔 inline style 로 다크 배경 강제했으나 라이트 테마에서도 어두운 메뉴가
   뜨던 문제. 두 테마 분기로 본문/글자/구분선 모두 자연스럽게. */
#ai-note-menu, #print-menu {
    background-color: #1a1c2a;
    color: #e5e7eb;
    border-color: rgba(255, 255, 255, 0.1);
}
#ai-note-menu button:hover,
#print-menu button:hover {
    background-color: rgba(255, 255, 255, 0.10);
}
html:not(.dark) #ai-note-menu,
html:not(.dark) #print-menu {
    background-color: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 4px 10px -3px rgba(0, 0, 0, 0.10) !important;
}
html:not(.dark) #ai-note-menu button,
html:not(.dark) #print-menu button {
    color: #1f2937 !important;
}
html:not(.dark) #ai-note-menu button:hover,
html:not(.dark) #print-menu button:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}
/* 메뉴 항목 사이 구분선(border-t border-white/5) — 라이트에선 옅은 검정. */
html:not(.dark) #ai-note-menu button.border-t,
html:not(.dark) #print-menu button.border-t {
    border-top-color: rgba(0, 0, 0, 0.06) !important;
}
/* 라이트 모드 — 부가 설명 텍스트(text-gray-400) 는 회색 톤 다운. */
html:not(.dark) #ai-note-menu .text-gray-400,
html:not(.dark) #print-menu .text-gray-400 {
    color: #6b7280 !important;
}
/* 라이트 모드 — 색상 아이콘은 흰 배경에서도 또렷한 톤으로. */
html:not(.dark) #ai-note-menu .text-indigo-300  { color: #4f46e5 !important; }
html:not(.dark) #ai-note-menu .text-emerald-300 { color: #047857 !important; }
html:not(.dark) #ai-note-menu .text-amber-400   { color: #b45309 !important; }
html:not(.dark) #ai-note-menu .text-pink-400    { color: #be185d !important; }
html:not(.dark) #print-menu .text-indigo-300    { color: #4f46e5 !important; }
html:not(.dark) #print-menu .text-emerald-300   { color: #047857 !important; }