/* 모바일 앱 전용 뷰어 모양(2026-10-22). html.fp-app 일 때만 적용 — 웹 뷰어는 영향 없음.
   상단바 = [＋ Add] [FramePeek] [☰ 도구] 만 남기고, 나머지 버튼은 app-mode.js 가 도구 창(.fpa-sheet)으로 옮긴다.
   버튼은 가로로 긴 줄 대신 큰 둥근 사각형(대표 지시). */
.fp-app .topbar{flex-wrap:nowrap;gap:10px;padding:8px 10px;border-radius:20px}
.fp-app .topbar > .seglbl,
.fp-app .topbar > .spacer,
.fp-app #menuBtn{display:none}
.fp-app .topbar .title{flex:1;min-width:0;font-size:18px}
.fp-app .topbar .count{display:none}

/* 깜빡임 방지(2026-10-26): app-mode.js 가 아래 PC용 버튼들을 도구 창으로 옮기기 전,
   첫 프레임에 데스크톱 버튼 줄이 잠깐 떴다 사라지는 걸 막는다. 이 규칙은 버튼이 아직
   .topbar 안에 있을 때만 숨긴다 — 도구 창(.fpa-sheet)으로 옮겨진 뒤엔 적용되지 않아 정상 표시된다. */
.fp-app .topbar > #filterseg,
.fp-app .topbar > #sortWrap,
.fp-app .topbar .actions{display:none}

.fpa-iconbtn,.fpa-add{flex:none;min-height:44px;border-radius:14px;border:1px solid var(--line-2,rgba(255,255,255,.16));
  background:var(--bg-3,#15151b);color:var(--fg,#f5f5f2);font-size:15px;font-weight:600;cursor:pointer}
.fpa-iconbtn{width:44px;font-size:20px;line-height:1}
.fpa-add{padding:0 16px;background:#dceeff;color:#050507;border-color:transparent}

/* 아래에서 올라오는 창(도구·추가 공용) */
.fpa-bg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.55);display:none}
.fpa-bg.show{display:block}
.fpa-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;max-height:82vh;overflow-y:auto;background:#0d0d13;
  border-top:1px solid rgba(220,238,255,.18);border-radius:24px 24px 0 0;
  padding:10px 16px calc(22px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .22s ease}
.fpa-sheet.show{transform:none}
/* 도구 창은 오른쪽에서 슬라이드되는 세로 서랍(2026-10-26 대표 피드백: 아래서 올라오는 게 어색) */
.fpa-sheet.fpa-sheet-r{left:auto;right:0;top:0;bottom:0;width:min(380px,86vw);max-height:none;height:auto;
  border-top:0;border-left:1px solid rgba(220,238,255,.18);border-radius:24px 0 0 24px;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
  transform:translateX(105%)}
.fpa-sheet.fpa-sheet-r.show{transform:none}
.fpa-sheet-r .fpa-grab{display:none}
.fpa-grab{width:44px;height:5px;border-radius:3px;background:rgba(220,238,255,.18);margin:0 auto 14px}
.fpa-h{font-size:13px;color:var(--muted,#8b8b94);margin:4px 4px 10px;letter-spacing:.04em;text-transform:uppercase}
.fpa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.fpa-grid.two{grid-template-columns:1fr 1fr}

/* 도구 창 안의 버튼(옮겨 온 원래 버튼 + 새 버튼 공통) → 큰 둥근 사각형 */
.fpa-sheet .abtn,.fpa-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:78px;width:100%;padding:10px 6px;border-radius:16px;border:1px solid rgba(220,238,255,.12);
  background:#15151d;color:#f2f4f7;font-size:14px;font-weight:600;text-align:center;line-height:1.25;white-space:normal;cursor:pointer}
.fpa-sheet .abtn:active,.fpa-tile:active{background:#1d1d27}
.fpa-tile .ic{font-size:24px;line-height:1}
.fpa-tile.big{min-height:120px;font-size:16px}
.fpa-tile.big .ic{font-size:34px}
.fpa-tile small{display:block;font-weight:400;font-size:12px;color:var(--muted,#8b8b94)}

/* 필터(All·Photos·Videos) = 둥근 사각형 3칸 */
.fpa-sheet .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;background:none;border:0;border-radius:0;overflow:visible;margin-bottom:16px}
.fpa-sheet .seg button{min-height:52px;border-radius:14px;border:1px solid rgba(220,238,255,.12);background:#15151d;color:#c9d2dc;font-size:15px;font-weight:600}
.fpa-sheet .seg button.active{background:#dceeff;color:#050507;box-shadow:none;border-color:transparent}

/* 정렬·분할보기 세부 창은 도구 창 안에서 아래로 펼친다(원래는 버튼 밑에 떠 있는 작은 창) */
.fpa-sheet .sort-wrap,.fpa-sheet .split-wrap{display:block;position:static;width:100%}
.fpa-sheet .sort-panel,.fpa-sheet .split-picker{position:static!important;left:auto!important;top:auto!important;right:auto!important;
  width:auto!important;max-width:none!important;margin-top:10px}
.fpa-sheet .split-picker{flex-direction:column;gap:8px}
.fpa-sheet .split-opt{min-height:46px;border-radius:12px}
.fpa-wide{grid-column:1/-1}

/* 빈 화면 안내 칸 */
.fp-app .dropzone{border-radius:22px}

/* 아래 선택 바(공유·다운로드·이동·휴지통) 버튼도 둥근 사각형으로, 누르기 쉽게 크게 */
.fp-app .share-banner{border-radius:20px}
.fp-app .share-banner button{border-radius:14px!important;min-height:46px}
/* 확대·축소 버튼 묶음도 같은 모양 */
.fp-app .zoom{border-radius:18px}
.fp-app .zoom .zbtn,.fp-app .zoom .zlevel{border-radius:12px}