/* ============================================================
   공통 베이스 — 폰트 + 라이트박스 기본 스타일의 "단일 소스".
   모든 레이아웃(layout/main · admin/shell)이 이 파일 하나만 import.
   화면마다 @font-face·리셋을 따로 박지 말 것.
   ============================================================ */

/* 폰트(omyu pretty) — 한 곳에서만 정의, 필요한 레이아웃이 이 파일을 import해 사용 */
@font-face {
    font-family: 'omyu pretty';
    src: url('/fonts/omyu_pretty.woff2') format('woff2');
    font-display: swap;
    size-adjust: 118%;
}

/* 라이트박스(ui.js #lightbox) 공통 기본스타일 —
   사용자 페이지는 Tailwind preflight가 깔리지만, 관리자 셸은 preflight가 없어서
   버튼 기본 회색/패딩·동영상 미축소 등 차이가 났음. 그 차이를 여기 한 곳에서 흡수.
   :where() = 특이도 0 → Tailwind 유틸(bg-white/15, max-w-full …)이 항상 정상 우선. */
:where(#lightbox), :where(#lightbox) * { box-sizing: border-box; }
:where(#lightbox) { font-family: 'omyu pretty', system-ui, -apple-system, sans-serif; }
:where(#lightbox) button {
    -webkit-appearance: none; appearance: none;
    background-color: transparent; background-image: none;
    border: 0; padding: 0; margin: 0; cursor: pointer;
    color: inherit; font-family: inherit; line-height: inherit;
}
:where(#lightbox) img, :where(#lightbox) svg, :where(#lightbox) video { display: block; }
:where(#lightbox) img, :where(#lightbox) video { max-width: 100%; height: auto; }
/* 동영상은 화면(뷰포트) 안에 contain — 잘리지 않게. 상단 X·정보 아이콘과 안 겹치게 위 공간(5.5rem) 확보 */
:where(#lightbox) .lb-stage video { max-height: calc(100vh - 5.5rem); object-fit: contain; }

/* ===== 공통 로딩 스피너 — leapfrog: 맨앞 점이 위로 튀어 맨뒤로 점프, 나머지는 앞으로 슬라이드(반복) ===== */
@keyframes lp-leap {
    0%   { transform: translate(0, 0); }                 /* slot0 — 제자리 2번 튀기 */
    6%   { transform: translate(0, -7px); }
    12%  { transform: translate(0, 0); }
    18%  { transform: translate(0, -7px); }
    22%  { transform: translate(0, 0); }
    25%  { transform: translate(7px, -12px); }           /* slot0→slot2 곡선 점프(맨앞→맨뒤) */
    28%  { transform: translate(14px, -16px); }
    31%  { transform: translate(21px, -12px); }
    33%  { transform: translate(28px, 0); }              /* slot2 착지 — 2번 튀기 */
    39%  { transform: translate(28px, -7px); }
    45%  { transform: translate(28px, 0); }
    51%  { transform: translate(28px, -7px); }
    55%  { transform: translate(28px, 0); }
    60%  { transform: translate(21px, -6px); }           /* 앞으로 슬라이드 → slot1 */
    66%  { transform: translate(14px, 0); }              /* slot1 — 2번 튀기 */
    72%  { transform: translate(14px, -7px); }
    78%  { transform: translate(14px, 0); }
    84%  { transform: translate(14px, -7px); }
    88%  { transform: translate(14px, 0); }
    94%  { transform: translate(7px, -6px); }            /* 앞으로 슬라이드 → slot0 */
    100% { transform: translate(0, 0); }
}
.lp-dots { position: relative; display: inline-block; width: 36px; height: 26px; }
.lp-dots > i { position: absolute; left: 0; bottom: 0; width: 8px; height: 8px; border-radius: 9999px; background: linear-gradient(135deg, #fb7185, #fb923c, #fbbf24); animation: lp-leap 4.5s infinite ease-in-out; }
.lp-dots > i:nth-child(2) { animation-delay: -1.5s; }
.lp-dots > i:nth-child(3) { animation-delay: -3s; }

/* ===== 공통 토스트 — 위에서 아래로 슬라이드 ===== */
.lp-toast { position: fixed; top: 0; left: 50%; z-index: 400; max-width: 90vw;
    display: flex; align-items: center; gap: .45rem; padding: .72rem 1.15rem;
    border-radius: 9999px; background: linear-gradient(135deg, #fb7185, #fb923c, #fbbf24); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.22); font-weight: 700; font-size: .9rem;
    box-shadow: 0 12px 32px rgba(251,146,60,.4); white-space: nowrap; pointer-events: none;
    transform: translate(-50%, -280%); transition: transform .6s cubic-bezier(.16,1,.3,1); }
.lp-toast.show { transform: translate(-50%, 3.6rem); }

/* ===== 공통 선택 표시 — 노을 점(원 안 원). 메인·태그·가린항목·패밀리 그리드 모두 동일(.sel-check + [data-pid].is-sel) ===== */
html.selecting .sel-check { display: flex; }
.sel-check { display: none; color: transparent; }
[data-pid].is-sel .sel-check::after { content: ''; display: block; width: 15px; height: 15px; border-radius: 9999px; background: linear-gradient(135deg, #fb7185, #fb923c, #fbbf24); }
[data-pid].is-sel { outline: 3px solid #fb923c; outline-offset: -3px; border-radius: .5rem; }

/* ===== 가로 스크롤바 숨김 — 패밀리 상단 알약탭·구성원 필터 스트립 ===== */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ===== 패밀리 구성원 필터 칩 — 기본 회색 테두리, 선택(is-on)=노을 채움 ===== */
.mem-chip { border-color: #e2e8f0; color: #64748b; background: #fff; }
.mem-chip.is-on { background: linear-gradient(135deg, #fb7185, #fb923c, #fbbf24); color: #fff; border-color: transparent; }
/* 특정 구성원 필터 선택 시 업로더 아바타 숨김(전체일 때만 표시) */
.hide-owner .owner-badge { display: none; }

/* ===== iOS 입력 포커스 자동 줌 방지 — 텍스트 입력류 최소 16px(핀치줌·라이트박스 줌은 유지). Tailwind text-sm(14px) 오버라이드 위해 :not 다중 지정으로 특이도 확보. ===== */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
textarea,
select { font-size: 16px; }