/* =====================================================================
   PlusX Store — 시안 v1 스타일
   다크 무드 · 미니멀 · 악센트=화이트 · Phosphor Regular · Strichpunkt Sans
   디자인 수정은 대부분 이 파일 + home.html 마크업에서.
   ===================================================================== */

/* ---------- design tokens ---------- */
:root{
  --bg:#121215;
  --surface:#1A1A1C;
  --surface-2:#1F1F22;
  /* 상단바 글래스모피즘 (반투명 + 뒤 블러). 라이트는 theme-light 에서 override */
  --topbar-bg:rgba(48,48,54,.4);     /* 반투명 배경 (밝은 회색 틴트) */
  --topbar-blur:20px;                /* 뒤 콘텐츠 블러 세기 */
  --hero-pull:24px;                  /* 홈 히어로 상단 위치: 클수록 상단바 뒤로 끌어올림(36↑=글래스 비침), 작을수록 아래로 내려감(36↓=상단바 아래로) */
  --hero-side:16px;                  /* 홈 히어로 좌우 총 인셋(뷰포트 끝 기준) — .wrap(--gap) 위에 추가 margin 으로 보정. 카드 등 나머진 --gap 유지 */
  --hero-ratio:3.1/1;                /* 홈 히어로 비율 (높이=폭/비율, 화면 따라 가변). 모바일은 아래 미디어쿼리 height 고정이 우선 */
  --hero-nav-w:30%;                  /* 히어로 좌우 끝 네비 영역(이동 인식) 가로 폭 — 배너 폭의 30%(반응형, 좌우 각각) */
  --hero-slide-dur:1.1s;             /* 히어로 카드 슬라이드(한 칸 이동) 시간 */
  --fc-shot-slide-dur:1s;            /* 상세 스크린샷 슬라이드(한 장 이동) 시간 — 히어로와 분리 */
  --hero-slide-ease:cubic-bezier(.22,1,.36,1);  /* 슬라이드 이징 — 빠르게 출발해 끝에서 점점 느려지며 멈춤(감속) */
  --hero-peek:0px;                   /* 히어로 카드 양옆에서 보이는 이웃 카드 영역. 0=배너 하나만 꽉 차게(이웃 안 보임), 키우면 양옆 이웃이 살짝 보임 */
  --hero-gap:18px;                   /* 히어로 카드 사이 간격 (전환 중에만 잠깐 비침) */
  --line:#2A2A2C;
  --line-2:#3A3A40;
  --ink:#F2F2F5;       /* 본문 (오프화이트) */
  --muted:#8E8E93;
  --faint:#5B5B60;
  --accent:#FFFFFF;     /* 단일 악센트 = 화이트 */
  --accent-ink:#0E0E10; /* 악센트 위 텍스트(다크) */
  --status-ok:#4ade80;   /* 서버 상태 점: 정상 운영중 (녹색) */
  --status-warn:#facc15; /* 서버 상태 점: 운영중 아님 (노랑) */
  --status-err:#f87171;  /* 오류 (빨강) — ok/warn 과 같은 채도 계열. admin 저장 실패 등 */
  --pj-dot:5px;            /* 상태 점 기본 크기 (홈 카드) — 상세는 .fc-title 에서 override */
  --radius:11px;
  --drop-shadow:0 5px 20px rgba(0,0,0,.4);  /* 프로필 메뉴·상단바 공통 드롭쉐도우 */
  --maxw:1008px;
  --gap:16px;            /* 레이아웃 간격: 카드 간격·화면 양옆 패딩·상단바 여백·상세 열 간격 공통 */
  --pad:27px;          /* 콘텐츠 박스 내부 패딩 (카드 좌우 · 상세 텍스트 박스 공통) */

  /* 상세 페이지 (앱 상세) */
  --detail-col-gap:var(--gap);  /* 이미지 ↔ 텍스트 열 간격 */
  --detail-max:1680px;          /* 상세 콘텐츠 최대 폭 (홈 --grid-max 와 동일 컨셉) — 배너·푸터는 풀 폭 유지 */
  --detail-pad-x:max(200px, calc((100vw - var(--detail-max)) / 2 - var(--gap)));  /* 좌우 = 최소 200px, 초광폭에선 콘텐츠가 --detail-max 에서 멈추고 가운데 정렬. vw 기준이라 배너 네거티브 마진과 정확히 일치 */
  --fc-body-px:0px;            /* 정보 카드 좌우 패딩 0 — 설명 문구를 스크린샷 좌측과 정렬 (상하는 --pad 27px 유지) */
  --fc-body-gap:35px;           /* 정보 카드 내부 간격 (설명 ↔ 메타) */
  --fc-meta-top:60px;           /* 메타·버전 카드: Details 메타 ↔ Version History 사이 간격 */
  --fc-hero-ratio:16/9;       /* 스크린샷 이미지 비율 */
  --fc-banner-gap:var(--gap);  /* 배너 하단 거터(화면 끝까지 여백). 상단바 높이 --fc-banner-top 은 JS가 측정해 자동 주입 */
  --fc-frame-pad-y:30px;       /* 스크린샷 박스 상하 패딩 */
  --fc-frame-pad-x:120px;      /* 스크린샷 박스 좌우 패딩 */
  --fc-img-radius:11px;       /* 대표 이미지 모서리 (정보 박스 --radius 와 동일) */
  --fc-shot-stroke:#242424;  /* 앱 아이콘·스크린샷 이미지 테두리 (다크). 라이트는 theme-light 에서 override */
  --fc-app-icon:54px;         /* 상세 제목 좌측 앱 아이콘 크기 */
  --fc-owner-av:24px;         /* 메타·버전 행 높이 기준값 (과거 Owner 아바타 크기 — 아바타는 삭제됐지만 행 높이 기준으로 유지) */
  --detail-anim:3s;           /* 상세 진입 애니메이션 속도 */

  /* 인트로 텍스트 리빌 모션 (홈 상단) — 속도·간격은 여기서 일괄 조정 */
  --rv-ease:cubic-bezier(.2,.8,.2,1);  /* 공통 이징 */
  --rv-dur:.7s;            /* .intro 단어 페이드+상승 시간 */
  --rv-stagger:.045s;      /* .intro 단어 간 딜레이 (stagger) */
  --rv-rise:13px;            /* .intro 단어 상승 거리 */
  --fsoc-line-dur:.34s;           /* 푸터 소셜 링크 호버: 하단 라인 드로잉 시간 (왼→오) */
  --rv-line-dur:.9s;       /* (미사용) 예전 .intro-statement 라인 마스크 리빌 시간 */
  --rv-line-stagger:.2s;   /* (미사용) 예전 라인 간 딜레이 */

  /* 홈 카드 스크롤 리빌 — 아래→위 상승 + 썸네일 scale-in */
  --card-rv-dur:1.5s;      /* 카드 상승 시간 */
  --card-rv-rise:36px;     /* 카드 상승 거리 (아래에서 올라옴) */
  --card-rv-stagger:.08s;  /* 같은 행 카드 간 딜레이 (좌→우 순차) */
  --card-img-scale:1.07;   /* 썸네일 시작 배율 (7% 확대 → 1로 축소) */
  --card-img-dur:3s;       /* 썸네일 축소(scale-in) 시간 */
  --card-bg:#18181A;        /* 카드 기본 배경 (홈·Related 공통) — surface 보다 어둡게. 라이트는 theme-light 에서 override */
  --card-hover-bg:#242428;  /* 카드 호버 배경 — 모션 최소화 사용자용 폴백에서만 사용. 라이트는 theme-light 에서 override */
  --card-hover-dur:.3s;     /* 카드 호버 전환 속도 (홈 카드 + 상세 관련 카드 공통) */
  --card-press-scale:.98;   /* 카드 클릭(누름) 시 축소 배율 — 1에 가까울수록 미세하게 눌림 */
  --card-press-dur:.15s;    /* 카드 누름/복귀 속도 (호버보다 빠르게 반응) */
  --card-px:20px;          /* 카드 좌우 패딩 (홈·Related 공통 — 공통 --pad 와 분리, 이 토큰 하나로 두 카드 같이 조정) */
  --card-cursor-size:56px; /* 카드 호버 시 커서 따라다니는 앱 아이콘 크기 */

  /* 상단바 진입 모션 (좌우 펼침 + 로고 fade+rise + 프로필 팝인) */
  --enter-delay:.4s;         /* 홈 첫 진입 시 상단바·인트로 모션 시작을 늦춤 (로딩 중 앞부분 놓침 방지). 0s=즉시 */
  --tb-expand-from:0;        /* 바 시작 가로 스케일 (1=안 늘어남, 작을수록 많이 늘어남, 0=가운데 한 점에서 펼쳐짐) */
  --tb-expand-dur:.7s;       /* 바 좌우(scaleX) 펼침 시간 — 오버슈트·복귀 없이 0→1로 한 번만 펼쳐짐 */
  --tb-expand-ease:cubic-bezier(.2,.8,.35,1);  /* 바 펼침 전용 이징 (테일 살짝 더 단축 = 조금 더 빠르게). 다른 상단바 요소는 --rv-ease 유지 */
  --tb-logo-delay:calc(.5s + var(--enter-delay));       /* 로고 등장 시작(바 펼침 도중) + 진입 지연 (.1s 당김: .6→.5 — 프로필·점·Developer 버튼도 동일하게 당겨서 시간차 유지) */
  --tb-logo-stagger:.07s;    /* 로고 단어 간 간격 (PlusX → Station) */
  --logo-leave-dur:.35s;     /* 홈→상세 이동 시 로고 사라짐 속도. 줄일수록 빠르고 이동까지 텀도 짧아짐(예: 더 빠르게 .25s, 천천히 .5s) */
  --tb-profile-delay:calc(.68s + var(--enter-delay));   /* 프로필 팝업 등장 시작 + 진입 지연 (.05s 추가로 늦춤: .63→.68) */
  --tb-pop-dur:.6s;          /* 프로필 사이즈 0→full 속도 */
  --tb-float-delay:calc(1.13s + var(--enter-delay));    /* Developer 버튼 등장 시작 + 진입 지연 (.1s 늦춤: 1.03→1.13) */
  --tb-float-dur:.7s;        /* Developer 버튼 슬라이드 인 속도 (프로필과 분리된 전용 토큰) */
  --tb-float-slide:28px;     /* Developer 버튼 진입 시작 위치 — 오른쪽에서 이 거리만큼 밀려있다가 제자리로 이동 */
  --tb-dot-behind:35px;      /* 점 출발 위치: 프로필 아바타 중심(제자리 기준 오른쪽) — 아바타(z:2) 뒤에 숨는 지점 */
  --tb-dot-dur:.85s;         /* 모드 전환 점 진입 모션 전체 시간 — 대기 없이 바로 굴러나와 감속 정착 */
  --tb-dot-return-ease:cubic-bezier(.4,.5,.7,1);  /* 굴러나옴 감속 곡선(살짝만 감속). 거의 등속에 가까울수록 (.5,.5,.8,1), 더 가파르게는 --rv-ease(.2,.8,.2,1) */
  --tb-dot-gap:0.18s;        /* 프로필 팝업 시작 후 토글 점 등장까지 간격 */
  --tb-dot-delay:calc(var(--tb-profile-delay) + var(--tb-dot-gap));  /* 프로필 시작 + 간격 */
  --topbar-maxw:500px;         /* 상단바 최대 너비 (가운데 정렬) */
  --bar-h:50px;                /* 상단바·하단바(상세) 공통 높이 */
  --topbar-dot:7px;            /* 프로필 좌측 점 버튼 크기 */
  --tb-dot-box:27px;         /* 점 버튼 호버 시 뒤에 보이는 원형 박스 크기 */
  --tb-dot-box-bg:rgba(255,255,255,.12);   /* 글래스 호버 틴트 (다크) — 점 버튼·계정 메뉴 항목 공통, 연한 화이트. 라이트는 theme-light 에서 override */
  --tb-menu-icon:#C7C7CC;    /* 계정 메뉴 아이콘(Admin·Logout) 색 (다크) — --muted 보다 밝게 해 눈에 띄게. 라이트는 theme-light override */
  --theme-fade:.8s;          /* 라이트/다크 전환 디졸브(크로스페이드) 속도 */
  --tb-float-size:var(--bar-h); /* 우상단 플로팅 버튼 크기 = 상단바 높이(정사각형, 라벨 비었을 때) */
  --dev-grad-in:#4E4E56;     /* Developers 아이콘 그라데이션 안쪽 (다크) — 라이트는 theme-light 에서 반전 */
  --dev-grad-out:#EBEBFD;    /* Developers 아이콘 그라데이션 바깥쪽 (다크) */

  /* chip / badge 토큰 — 칩 디자인은 여기서 일괄 조정 */
  --chip-py:9px;           /* 상하 패딩 */
  --chip-px:16px;             /* 좌우 패딩 */
  --chip-radius:999px;        /* 모서리 (알약형) */
  --chip-font:14px;         /* 글자 크기 */
  --chip-row-h:31px;                 /* 필터 칩 높이 */
  --chip-dur:.15s;                 /* 칩 색/테두리 전환 속도 */
  --chip-ease:cubic-bezier(.65,0,.35,1);  /* ease-in-out (시작·끝 감속) */
  --chip-fg:var(--muted);          /* 기본 글자색 */
  --chip-fg-hover:var(--ink);      /* 호버 글자색 */
  --chip-border:var(--line);       /* 테두리색 */
  --chip-on-bg:var(--accent);      /* 선택(on) 배경 */
  --chip-on-fg:var(--accent-ink);  /* 선택(on) 글자색 */
  --chip-hover-bg:#3E3E40;  /* 호버(미선택) 배경 — 연한 회색 (다크). 불투명 색이라 반투명 합성 깜빡임 없음. 라이트는 theme-light 에서 override */
}

/* ---------- 라이트 모드 (프로필 우측 점 버튼으로 토글) ----------
   다크 전용 설계라 라이트는 색 토큰만 오버라이드 → 전체 UI 가 변수로 따라옴.
   악센트는 화이트→다크로 뒤집어 라이트 배경 위 CTA·칩 대비 유지. */
html.theme-light{
  --bg:#F0F0F5;          /* 배경 = 연한 회색 (카드보다 어둡게 → 카드가 위로 떠 보임, 다크와 같은 관계) */
  --surface:#FFFFFF;     /* 바, 카드 = 흰색 (배경보다 밝아 떠 보임) */
  --surface-2:#EAEAEE;   /* 카드 호버: surface 보다 약간 어둡게 */
  --line:#E2E2E6;
  --line-2:#D2D2D8;
  --ink:#414147;         /* 본문 (다크) — 계정 메뉴 아이콘과 동일 톤 */
  --muted:#6B6B72;
  --faint:#A2A2AA;
  --tb-menu-icon:#414147;    /* 계정 메뉴 아이콘(Admin·Logout) 색 (라이트) — --muted 보다 어둡게 해 눈에 띄게 */
  --accent:#414147;      /* 악센트 = 다크 (라이트 위 CTA·점) — 계정 메뉴 아이콘과 동일 톤 */
  --accent-ink:#FFFFFF;  /* 악센트 위 텍스트 = 화이트 */
  --tb-dot-box-bg:rgba(0,0,0,.06); /* 점 버튼 호버 박스 (라이트) — 연한 다크 틴트 */
  --fc-shot-stroke:#E9E9ED; /* 앱 아이콘·스크린샷 이미지 테두리 (라이트) */
  --chip-hover-bg:#DEDEE3; /* 칩 호버 배경 (라이트) — 배경(--bg)보다 확실히 어두운 회색이라 호버가 또렷이 보임 */
  --drop-shadow:0 5px 20px rgba(0,0,0,.12);  /* 다크와 같은 5px/20px, 흰 배경이라 투명도만 가볍게 */
  --topbar-bg:rgba(250,250,252,.4);      /* 상단바 반투명 (라이트) — 틴트 #FAFAFC */
  --card-bg:#F9F9FB;        /* 카드 기본 배경 (라이트) — 흰색보다 살짝 어둡고 --bg(#F3F3F6)보다 밝게 */
  --card-hover-bg:#F8F8FB;  /* 카드 호버 (흰 카드에서 아주 살짝만 어둡게, 배경보다는 밝게 유지해 계속 떠 보이게) */
  --dev-grad-in:#EBEBFD;    /* Developers 아이콘 그라데이션 (라이트) — 다크와 반전: 안쪽 밝게 */
  --dev-grad-out:#4E4E56;   /* Developers 아이콘 그라데이션 (라이트) — 바깥 어둡게 */
}

/* 라이트/다크 전환을 전체 화면 디졸브(크로스페이드)로 — store.js 가 document.startViewTransition 으로 트리거.
   미지원 브라우저는 자동으로 즉시 전환(폴백). */
::view-transition-old(root),
::view-transition-new(root){animation-duration:var(--theme-fade); animation-timing-function:var(--rv-ease)}

/* 한글 폰트: Pretendard 가변(굵기 45~920 파일 하나) — static/fonts 자체 서빙(셀프호스팅)이라 외부 서버 의존 없음.
   swap: 로딩되는 잠깐은 시스템 폰트로 먼저 보여주고 준비되면 교체 (빈 글자 방지) */
@font-face{
  font-family:'Pretendard';
  src:url('../fonts/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{margin:0}
/* 아이콘(Iconify)이 async 로 늦게 로드돼도 자리 미리 예약 → 로드 시 폭 점프(layout shift) 방지 */
iconify-icon{display:inline-block; width:1em; height:1em}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Strichpunkt Sans','Pretendard',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em; font-weight:500;
  overflow-x:clip;  /* 히어로 트랙(마스킹 해제)이 화면 밖으로 이어져도 페이지 가로 스크롤 안 생기게 */
}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:var(--accent-ink)}
img{display:block; max-width:100%}


/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:13px; font-weight:500;
  padding:10px 16px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; line-height:1;
  transition:background .5s cubic-bezier(.2,.8,.2,1), filter .5s cubic-bezier(.2,.8,.2,1), border-color .5s cubic-bezier(.2,.8,.2,1), transform .15s ease;
}
.btn iconify-icon{font-size:16px}
.btn--accent{background:var(--accent); color:var(--accent-ink)}
.btn--accent:hover{filter:brightness(.92)}
.btn--ghost{background:#2c2c31; border-color:transparent; color:var(--ink)}  /* 카드(--surface-2)보다 밝은 면으로 구분 */
.btn--ghost:hover{background:#37373d}
.btn--ghost iconify-icon{color:#fff !important}  /* 다운로드 등 ghost 버튼 아이콘 = 흰색 (cascade 강제) */

/* ---------- top bar ---------- */
.topbar{
  position:sticky; top:16px; z-index:20; display:flex; align-items:center; gap:16px;
  /* 왼쪽 가장자리 = 500px 중앙정렬 위치에 항상 고정(margin-left), 오른쪽은 auto.
     → 기본 상태는 중앙정렬과 동일하게 보이고, 펼침/접힘 시 우측으로만 늘고 줄어 흔들림 없음. */
  margin:16px auto var(--gap); margin-left:max(0px, calc((100% - var(--topbar-maxw)) / 2));
  max-width:var(--topbar-maxw); width:100%; height:var(--bar-h); padding:0 22px;
  border-radius:var(--radius);
}
/* 글래스모피즘 배경(블러·그림자)을 뒤 레이어(::before)로 분리 → 이 레이어만 scaleX 로 늘었다 줄고,
   본체(로고·프로필·점)는 변형을 안 받아 제자리에 고정됨 */
.topbar::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:var(--radius);
  background:var(--topbar-bg); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  transform-origin:center;
  animation:tbExpand var(--tb-expand-dur) var(--tb-expand-ease) var(--enter-delay) both}
/* 진입 모션: 바는 제자리에서 좌우(scaleX)로 0→1까지 한 번만 펼쳐짐 (오버슈트·복귀 없음). opacity는 앞쪽 .4s~1s 구간(60%)에서만 0→1 페이드 */
@keyframes tbExpand{
  0%   {opacity:0; transform:scaleX(var(--tb-expand-from))}
  60%  {opacity:1}
  100% {transform:scaleX(1)}
}
/* 로고: 단어별 마스크 리빌 — 바깥 .logo-w 는 overflow:hidden 마스크(텍스트보다 가로 여유, 세로는 텍스트 줄높이~상단바 높이 중간),
   안쪽 .logo-w__text 가 .intro 와 동일한 rise(stagger)로 마스크 밑에서 올라오며 드러남. 단어 span 은 템플릿이 분할 */
.topbar .logo .logo-w{display:inline-block; overflow:hidden; vertical-align:middle;
  height:30.6px; line-height:30.6px; margin-right:6px}  /* margin-right = 단어 사이 간격 (4px × 1.5). 높이는 34px에서 10% 축소 */
.topbar .logo .logo-w:last-child{margin-right:0}
.topbar .logo .logo-w__text{display:inline-block; --rv-rise:26px;  /* 박스(34px) 안에서 리빌이 보이도록 이 로고에서만 상승거리 확대 (공용 --rv-rise 는 그대로) */
  animation:tbLogoRise var(--rv-dur) var(--rv-ease) calc(var(--tb-logo-delay) + var(--i,0) * var(--tb-logo-stagger)) both}
.topbar .logo .logo-w:nth-child(2){--i:1}
@keyframes tbLogoRise{from{opacity:0; transform:translateY(var(--rv-rise))} to{opacity:1; transform:none}}
/* 프로필: 사이즈 0 → full 팝인 */
.topbar .profile{transform-origin:center; animation:tbProfilePop var(--tb-pop-dur) var(--rv-ease) var(--tb-profile-delay) backwards}
@keyframes tbProfilePop{from{transform:scale(0)} to{transform:scale(1)}}
/* 우상단 Developer 버튼: 프로필과 동일 시점에 등장하되, 스케일 팝인 대신 오른쪽에서 제자리로 슬라이드 인.
   .tb-float 는 상단바 밖 body 직속이라 별도 셀렉터 */
.tb-float{animation:tbFloatSlideIn var(--tb-float-dur) var(--rv-ease) var(--tb-float-delay) backwards}
@keyframes tbFloatSlideIn{from{opacity:0; transform:translateX(var(--tb-float-slide))} to{opacity:1; transform:translateX(0)}}
/* 모드 전환 점: 프로필 아바타 뒤(z:2 아래)에 숨어 있다가 → 왼쪽 제자리로 구슬이 굴러나오듯 감속 이동.
   초반(프로필 등장 전)엔 점이 노출되면 안 되므로 시작 전까지 투명(backwards), 숨은 위치에서 페이드인 후 굴러나옴 */
.topbar .tb-dot{animation:tbDotRoll var(--tb-dot-dur) var(--rv-ease) var(--tb-dot-delay) backwards}
@keyframes tbDotRoll{
  0%   {opacity:0; transform:translateX(var(--tb-dot-behind)); animation-timing-function:var(--tb-dot-return-ease)}  /* 아바타 뒤 숨은 위치 — 대기 없이 곧장 굴러나옴 */
  5%   {opacity:1}  /* 굴러나오는 초반(≈0.1s, 아직 아바타 뒤)에 짧게 페이드인 */
  100% {opacity:1; transform:translateX(0)}  /* 제자리 정착 (감속) */
}

@media (prefers-reduced-motion:reduce){.topbar::before,.topbar .logo .logo-w__text,.topbar .profile,.topbar .tb-dot,.tb-float{animation:none}}
/* 내부 이동(px-entered)엔 진입 모션 비활성 — base.html 인라인 스크립트가 클래스 부여 */
html.px-entered .topbar::before,html.px-entered .topbar .logo .logo-w__text,html.px-entered .topbar .profile,html.px-entered .topbar .tb-dot,html.px-entered .tb-float{animation:none}
/* 내부 이동(뒤로가기 등)은 이미 로딩된 상태 → 진입 지연 불필요. --enter-delay 를 0 으로 덮어 즉시 재생.
   (외부/새로고침 진입은 px-entered 없음 → :root 의 기본 --enter-delay 유지) */
html.px-entered{--enter-delay:0s}
/* 뒤로가기(bfcache 복원) 복귀: 로고 재등장을 지연 없이 즉시 시작 (store.js pageshow 가 is-back 부여. 단어 간 시차 --tb-logo-stagger 는 유지) */
html.is-back{--tb-logo-delay:0s}
/* 단, 홈(.is-home)은 내부 이동(뒤로가기 등)으로 들어와도 매번 재생 */
html.px-entered .is-home .topbar::before{animation:tbExpand var(--tb-expand-dur) var(--tb-expand-ease) var(--enter-delay) both}
html.px-entered .is-home .topbar .logo .logo-w__text{animation:tbLogoRise var(--rv-dur) var(--rv-ease) calc(var(--tb-logo-delay) + var(--i,0) * var(--tb-logo-stagger)) both}
html.px-entered .is-home .topbar .profile{animation:tbProfilePop var(--tb-pop-dur) var(--rv-ease) var(--tb-profile-delay) backwards}
html.px-entered .is-home .topbar .tb-dot{animation:tbDotRoll var(--tb-dot-dur) var(--rv-ease) var(--tb-dot-delay) backwards}
html.px-entered .is-home ~ .tb-float{animation:tbFloatSlideIn var(--tb-float-dur) var(--rv-ease) var(--tb-float-delay) backwards}
/* 홈→상세 이동 시 로고 사라짐(아웃트로) — 등장(tbLogoRise)의 역방향: 페이드아웃 + 아래로 하강.
   별도 이름(tbLogoLeave)으로 둠 → 같은 이름이면 브라우저가 새로 재생 안 해 끝상태로 점프하는 문제 회피.
   store.js 가 카드 클릭 때 html.is-leaving 부여, 애니메이션이 끝나면 이동. is-home 포함해 위 진입 규칙과 동순위라 뒤에 와서 우선 적용 */
html.is-leaving .is-home .topbar .logo .logo-w__text{
  animation:tbLogoLeave var(--logo-leave-dur) var(--rv-ease) calc(var(--i,0) * var(--tb-logo-stagger)) both}
@keyframes tbLogoLeave{from{opacity:1; transform:none} to{opacity:0; transform:translateY(var(--rv-rise))}}
.logo{font-weight:500; font-size:15px; letter-spacing:0; text-transform:uppercase}
.logo iconify-icon{font-size:20px}
/* 상세 상단바: 로고 자리의 뒤로가기 버튼 */
.logo--back{display:inline-flex; align-items:center; gap:6px}
.logo-back-arrow{
  --back-in-dur:.9s;                        /* 진입 모션 길이 (조절용) */
  --back-in-delay:.48s;     /* 상세 화살표 진입 지연 — 홈 --enter-delay 영향 안 받도록 값 고정. 상단바 로고 등장 타이밍과 맞춤 (조절용) */
  --back-in-shift:15px;                      /* 진입 시 우측에서 출발하는 거리 = 우→좌 이동폭 (조절용) */
  width:18px; height:18px; display:block; transition:transform .2s ease;
  animation:backArrowIn var(--back-in-dur) var(--rv-ease) var(--back-in-delay) backwards}
.logo--back:hover .logo-back-arrow{transform:translateX(-2px)}
/* 진입 모션: 디졸브(페이드인) + 우→좌 슬라이드. 화살표는 상세 페이지에만 있으므로 페이지 진입 시 1회 재생. backwards: 끝나면 기본값 복귀 → 호버 translateX 유지 */
@keyframes backArrowIn{from{opacity:0; transform:translateX(var(--back-in-shift))} to{opacity:1; transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.logo-back-arrow{animation:none}}
.brand{display:inline-flex; align-items:center; min-width:0}  /* center: 로고 + 프로젝트명 알약 수직 중앙 정렬 (예전 baseline 은 텍스트 ': 이름' 용) */
/* 상세: 로고 옆 ': 앱이름' 타이핑 텍스트 (muted, store.js 가 한 글자씩 채움) */
/* 상세 상단바의 프로젝트명 알약 — 상단바 정중앙에 absolute 배치 (좌 로고·우 컨트롤 폭과 무관). typed_name 있는 상세에서만 렌더 */
.logo-typed{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:inline-flex; align-items:center;
  padding:6px 16px; color:var(--ink); font-size:14px;
  letter-spacing:-.02em; white-space:nowrap; line-height:1;
  border:1px solid transparent; border-radius:var(--chip-radius); background:transparent;
  overflow:hidden}  /* 마스킹: 진입 시 아래서 올라오는 글자(--rv-rise 13px)가 알약 라인 밖에서 안 보이게 잘라냄 */
/* 진입 모션 — store.js 가 단어 분할 + .is-drawn 부여 → 뒤로가기 화살표와 함께 즉시 시작.
   ① 테두리 SVG 드로잉(화살표와 동일 기법: pathLength=1 → stroke-dashoffset 1→0, 모서리 반경은 JS가 알약 높이 절반으로 설정 = 스타디움)
   ② 안의 글자는 홈 로고와 동일한 단어별 fade+rise(tbLogoRise · 같은 토큰 재사용) */
.logo-typed__frame{position:absolute; top:0; left:0; width:100%; height:100%; overflow:visible; pointer-events:none}
/* 드로잉 시작점=좌상단, 방향=반시계. rect 기본 경로는 좌상단에서 시작해 시계방향이므로,
   stroke-dashoffset 를 음수(-1→0)로 두어 "경로 끝에서 거꾸로" 채운다 → 좌상단에서 왼쪽 아래로 내려가는 반시계 드로잉 */
.logo-typed__frame rect{fill:none; stroke:currentColor; stroke-width:1; vector-effect:non-scaling-stroke; stroke-dasharray:1; stroke-dashoffset:-1}
.logo-typed.is-drawn .logo-typed__frame rect{animation:logoTypedDraw 1.45s var(--rv-ease) both}  /* 테두리 그려지는 시간: 1.45s (조절 지점) */
@keyframes logoTypedDraw{to{stroke-dashoffset:0}}
/* 드로잉 종료 후(.is-framed, store.js animationend) dash 해제 → 실선 복귀.
   dash 길이 반올림 오차로 경로 시작점(좌상단)에 남던 미세한 틈 제거 */
.logo-typed.is-framed .logo-typed__frame rect{animation:none; stroke-dasharray:none; stroke-dashoffset:0}
.logo-typed .logo-w{display:inline-block; opacity:0}  /* is-drawn 전 숨김 */
.logo-typed.is-drawn .logo-w{animation:tbLogoRise var(--rv-dur) var(--rv-ease) calc(.05s + var(--i,0) * var(--tb-logo-stagger)) both}  /* .05s = 글자 시작 살짝 늦춤(테두리 먼저 느낌) */
@media (prefers-reduced-motion:reduce){
  .logo-typed.is-drawn .logo-typed__frame rect{animation:none; stroke-dasharray:none; stroke-dashoffset:0}
  .logo-typed .logo-w,.logo-typed.is-drawn .logo-w{animation:none; opacity:1}
}
.search{
  flex:1; max-width:396px; margin:0 auto; display:flex; align-items:center; gap:9px;
  background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:8px 13px; color:var(--muted);
}
.search iconify-icon{font-size:16px}
.search input{flex:1; background:none; border:0; outline:0; color:var(--ink); font:inherit; font-size:13px}
.search input::placeholder{color:var(--faint)}
.search input::-webkit-search-cancel-button{filter:invert(.6)}
.topbar .right{display:flex; align-items:center; gap:18px; margin-left:auto}
/* 프로필 좌측 점 버튼 (라이트/다크 토글) — 호버 시 점 뒤로 연회색 박스(::before), 점은 ::after */
.tb-dot{flex:0 0 auto; position:relative; z-index:1; width:var(--topbar-dot); height:var(--topbar-dot);
  padding:0; border:0; background:transparent; cursor:pointer}  /* z-index:1 < 프로필(2) — 진입 시 점이 프로필 뒤에서 나오도록 */
.tb-dot::before{content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:var(--tb-dot-box); height:var(--tb-dot-box); border-radius:50%;
  background:transparent; transition:background .35s var(--rv-ease)}
.tb-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:var(--accent)}
.tb-dot:hover::before{background:var(--tb-dot-box-bg)}
.iconbtn{color:var(--muted); font-size:19px; cursor:pointer; display:grid; place-items:center; transition:color .5s cubic-bezier(.2,.8,.2,1)}
.iconbtn:hover{color:var(--ink)}
/* ---------- 프로필: 클릭 시 상단바가 아바타 우측으로 늘어나며 아이콘 버튼 노출 ---------- */
.profile{display:flex; align-items:center; z-index:2}  /* z-index:2: 진입 시 좌측 토글 점(z:1)을 가려 "뒤에서 나오는" 연출. (flex 항목이라 positioned 아니어도 z 적용 — 계정 메뉴는 외부 fixed 라 영향 없음) */
/* 아바타(클릭 트리거) — 일반 플로우 아이템 */
.pop-face{
  position:relative; flex:0 0 auto; width:27px; height:27px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; cursor:pointer;
  background:linear-gradient(135deg,#3a3a3f,#202024); border:0; padding:0;
  font-family:inherit; color:var(--ink); font-size:12px; font-weight:500;
  transition:transform .2s ease, box-shadow .25s ease;
}
.pop-face img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
/* 사진이 있으면 어두운 폴백 배경 제거 → 동그란 클리핑 가장자리(안티에일리어싱)에 어두운 배경이 비쳐 생기던 미세한 링 제거.
   사진이 없으면(onerror 로 img 제거 → 이니셜 표시) 그라데이션 배경 그대로 유지. */
.pop-face:has(img){background:transparent}
.pop-face:hover{transform:scale(1.07); box-shadow:0 0 0 2px rgba(255,255,255,.22)}
.pop-face:active{transform:scale(.96)}

/* 계정 메뉴 — 상단바 밖 형제(fixed)라야 팝업 자체 글래스(backdrop blur)가 페이지 콘텐츠를 흐림(상단바 안에 있으면 상단바 filter/transform 컨텍스트에 갇혀 블러 대상이 비어 투명해짐).
   상단바와 동일 글래스. 위치: 상단바 바로 아래 8px(top=16+바높이+8) · 우측 상단바 우측 끝과 정렬(50%-maxw/2). store.js 가 .topbar 에 actions-open 토글 */
/* 등장: clip-path 로 위→아래 천천히 펼쳐짐(.55s). overflow/max-height 대신 clip → 펼침 완료 후엔 클립이 없어 항목 rise 가 안 잘림(스태거 또렷). */
.tb-menu{position:fixed; top:calc(16px + var(--bar-h) + 8px); right:max(var(--gap), calc(50% - var(--topbar-maxw) / 2)); z-index:100;
  width:130px; padding:8px;
  background:var(--topbar-bg); border-radius:var(--radius); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3); backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  opacity:0; visibility:hidden;
  -webkit-clip-path:inset(0 -30px calc(100% + 0px) -30px round var(--radius)); clip-path:inset(0 -30px calc(100% + 0px) -30px round var(--radius));  /* top=0: 메뉴가 위(상단바)로 안 번짐 → 이중 글래스 밝은 박스 방지. 좌우/아래 -30px 는 그림자 노출. 펼침은 bottom 100%→-30px */
  /* 닫힘 트랜지션(클래스 제거 시 적용): 천천히 사라짐 */
  transition:clip-path .32s ease, -webkit-clip-path .32s ease, opacity .28s ease, visibility .32s}
.topbar.actions-open ~ .tb-menu{opacity:1; visibility:visible;
  -webkit-clip-path:inset(0 -30px calc(0% - 30px) -30px round var(--radius)); clip-path:inset(0 -30px calc(0% - 30px) -30px round var(--radius));  /* 열림: 좌우/아래 30px 그림자 노출, 위는 0(상단바 침범 방지) */
  /* 열림: 펼침(clip) .65s + opacity 를 펼침에 맞춰 천천히(.5s) — 펼쳐지기 전 불투명해지며 상단바에 생기던 흰 반짝임(이중 backdrop-filter) 방지 */
  transition:clip-path .65s cubic-bezier(.2,.8,.2,1), -webkit-clip-path .65s cubic-bezier(.2,.8,.2,1), opacity .5s ease, visibility .65s}
/* 내용 순차 등장 — fade+rise(16px), 행 단위, .2s 간격으로 또렷하게. 이름 → Admin → Logout */
.tb-menu__profile,.tb-menu__item{opacity:0; transform:translateY(16px);
  transition:opacity .36s ease, transform .36s var(--rv-ease)}
.topbar.actions-open ~ .tb-menu .tb-menu__profile{opacity:1; transform:none; transition:opacity .324s ease .086s, transform .324s var(--rv-ease) .086s}
.topbar.actions-open ~ .tb-menu .tb-menu__item{opacity:1; transform:none}
.topbar.actions-open ~ .tb-menu .tb-menu__items .tb-menu__item:nth-child(1){transition:background .16s, opacity .324s ease .23s, transform .324s var(--rv-ease) .23s}
.topbar.actions-open ~ .tb-menu .tb-menu__items .tb-menu__item:nth-child(2){transition:background .16s, opacity .324s ease .374s, transform .324s var(--rv-ease) .374s}
/* 모션 최소화: 펼침/스태거 끄고 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  .tb-menu{transition:opacity .096s ease, visibility .096s; -webkit-clip-path:none; clip-path:none}
  .topbar.actions-open ~ .tb-menu{-webkit-clip-path:none; clip-path:none}
  .tb-menu__profile,.tb-menu__item{opacity:1; transform:none; transition:none}
}
/* 프로필 행: 이름·직급 (이미지 제거) */
.tb-menu__profile{display:flex; align-items:center; padding:8px 8px 10px}
.tb-menu__id{display:flex; align-items:baseline; gap:6px; min-width:0; text-align:left}  /* 이름 + 직급 가로 배치 */
.tb-menu__name{font-size:13px; font-weight:500; color:var(--ink); letter-spacing:-.02em; white-space:nowrap}
.tb-menu__pos{font-size:13px; color:var(--ink); white-space:nowrap}
.tb-menu__items{display:flex; flex-direction:column; gap:2px}
.tb-menu__item{display:flex; align-items:center; gap:10px; padding:9px 8px; border-radius:8px;
  color:var(--ink); font-size:13px; font-weight:500;
  transition:background .16s, opacity .36s ease, transform .36s var(--rv-ease)}  /* background=호버 + opacity/transform=등장 스태거 (둘 다 있어야 스태거 안 덮임) */
.tb-menu__item:hover{background:var(--tb-dot-box-bg)}  /* 글래스용 연한 틴트 (점 버튼 호버와 동일) */
.tb-menu__item iconify-icon{font-size:16px; color:var(--tb-menu-icon)}  /* 16px → Tabler 두께 ≈1.3px. 색은 전용 토큰(--muted 와 분리) */

/* 우상단 플로팅 Developer 버튼 — 글래스(상단바와 동일). 호버 시 박스가 좌측으로 펼쳐지며 라벨이 상단바 로고와 동일한 모션(fade+rise)으로 등장. store.js 가 단어 분할 + 펼친 폭 측정. */
.tb-float{position:fixed; top:16px; right:16px; z-index:25;
  display:flex; align-items:center; padding:0 calc((var(--tb-float-size) - 20px) / 2); overflow:hidden; white-space:nowrap;  /* 좌우 패딩=(박스-아이콘20)/2 → 아이콘만일 때 정중앙. right 고정이라 라벨이 펼쳐지면 박스가 좌측으로 늘어남 */
  width:max-content; height:var(--tb-float-size);  /* 폭은 내용에 맞춤(라벨 max-width 따라 가변), 라벨 접히면 아이콘만이라 정사각 */
  border-radius:var(--radius); color:var(--ink); cursor:pointer;
  /* 글래스모피즘: 상단바와 동일(반투명 + 뒤 블러 + 동일 그림자) */
  background:var(--topbar-bg); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  transition:transform .15s ease}
.tb-float__icon{flex:0 0 auto; width:16px; height:16px; display:block}  /* 커스텀 SVG 아이콘 (그라데이션 고정색) */
/* 라벨: max-width 0→측정값(store.js)으로 부드럽게 좌측 펼침/접힘. 좌측 padding=아이콘과의 간격(접히면 함께 사라짐) */
.tb-float__label{flex:0 0 auto; display:inline-block; position:relative; overflow:hidden; max-width:0;
  font-size:15px; font-weight:500; line-height:1; letter-spacing:0; color:inherit; text-transform:uppercase; white-space:nowrap;
  transition:max-width .7s var(--rv-ease)}  /* 박스 확장 */
/* 라벨 글자: 알파벳 하나씩 오른쪽에서 슬라이드하며 등장. --i 는 JS가 왼쪽 글자=0 → 읽는 순서(좌→우). 닫힘=역방향 자동 */
.tb-float .logo-w{display:inline-block; opacity:0; transform:translateX(var(--rv-rise));  /* 스테이트먼트와 동일: 오른쪽 13px 에서 제자리로 */
  transition:opacity .15s ease, transform .15s ease}  /* 닫힘: 스태거 없이 빠르게 균일 리셋 → 재호버 때 항상 깨끗이 다시 그려짐 */
.tb-float.is-open .logo-w{opacity:1; transform:none;
  transition:opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
  transition-delay:calc(var(--i,0) * var(--rv-stagger))}  /* 열림에만 스태거 슬라이드(우측 공통점→제자리, 좌→우 순서) */
.tb-float .logo-w:first-child{margin-left:8px}  /* 아이콘과 글자 사이 간격 — 라벨 안쪽이라 접히면 함께 사라져 정사각 유지 */
.tb-float:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){
  .tb-float,.tb-float__label{transition:none}
  .tb-float .logo-w{transition:none; opacity:1; transform:none}
}

/* ---------- 하단 액션 바 (상세 전용) — 상단바와 동일한 글래스(--topbar-bg + blur + --radius + --drop-shadow) ---------- */
.botbar{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:20;
  display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px);
  height:var(--bar-h); padding:0 12px; border-radius:var(--radius);
  background:var(--topbar-bg); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  animation:botbarUp 1.2s var(--rv-ease) .4s both}  /* 상세 진입: 아래에서 위로 슬라이드(썸네일 detailIn 따라) */
/* 중앙정렬 translateX(-50%) 유지하며 아래(화면 밖)→제자리 */
@keyframes botbarUp{from{transform:translate(-50%, calc(100% + 24px)); opacity:0} to{transform:translate(-50%, 0); opacity:1}}
@media (prefers-reduced-motion:reduce){.botbar{animation:none}}
.botbar .fc-rx{margin:0; gap:6px}    /* 카드용 margin/stretch 해제 */
.botbar .rx{flex:0 0 auto}           /* 바에선 압축 (가로 채우지 않음) */
.botbar__open{flex:0 0 auto; white-space:nowrap; padding-top:var(--chip-py); padding-bottom:var(--chip-py); font-size:14px}  /* 상하 패딩=반응칩(--chip-py) → 높이 일치(36px). 좌우는 .btn 기본 16px 유지 */
/* 반응칩 ↔ 액션(Open/Download) 구분선 (양쪽 사이 간격은 .botbar gap:8px) */
.botbar__sep{flex:0 0 auto; align-self:center; width:1px; height:20px; background:rgba(255,255,255,.22)}
html.theme-light .botbar__sep{background:rgba(0,0,0,.16)}
/* 인라인 SVG 아이콘(Open·Download·반응) — 평소 다 그려진 상태, 호버 시 라인 드로잉(상단바 뒤로가기 화살표와 동일 기법: pathLength=1 → dashoffset 1→0). 모든 path 동시에 그려짐. stroke-width 2 @16px = 1.33px(전역 두께와 동일) */
.botbar__icon,.rx-icon{width:18px; height:18px; flex:0 0 auto; display:block; overflow:visible}
.botbar__icon path,.rx-icon path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0}
.botbar__open:hover .botbar__icon path,.rx:hover .rx-icon path{animation:botbarIconDraw 1.5s var(--rv-ease)}  /* 호버 드로잉 속도: 1.5s (Open·Download·반응 공통, 조절 지점) */
/* 도움돼요(전구): 광선 5개만 순차로 켜짐(각도순 좌→우 스윕). 몸통(6)·받침(7)은 위 1.5초 유지. backwards=딜레이 동안 숨김. 마지막 광선 .6+.45=1.05s → 1.5초 내 완료 */
.rx:hover .rx-icon--bulb path:nth-child(1){animation:botbarIconDraw .45s var(--rv-ease) 0s backwards}    /* 왼쪽 */
.rx:hover .rx-icon--bulb path:nth-child(4){animation:botbarIconDraw .45s var(--rv-ease) .15s backwards}  /* 좌상 */
.rx:hover .rx-icon--bulb path:nth-child(2){animation:botbarIconDraw .45s var(--rv-ease) .3s backwards}   /* 위 */
.rx:hover .rx-icon--bulb path:nth-child(5){animation:botbarIconDraw .45s var(--rv-ease) .45s backwards}  /* 우상 */
.rx:hover .rx-icon--bulb path:nth-child(3){animation:botbarIconDraw .45s var(--rv-ease) .6s backwards}   /* 오른쪽 */
@keyframes botbarIconDraw{from{stroke-dashoffset:1} to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.botbar__open:hover .botbar__icon path,.rx:hover .rx-icon path{animation:none!important}}

.wrap{max-width:none; margin:0; padding:0 var(--gap)}

/* ---------- hero ---------- */
.hero{
  position:relative; z-index:1;   /* 상단바(z:20) 아래 — 끌어올려도 상단바가 위에 떠서 블러로 비침 */
  /* 상단 끌어올림(--hero-pull)에서 36px 여백은 남김 → 히어로 상단 패딩 36px */
  margin:calc(-1 * (var(--hero-pull) - 36px)) calc(var(--hero-side) - var(--gap)) 9px; aspect-ratio:var(--hero-ratio);  /* overflow 마스킹 제거 — 슬라이드가 프레임 밖에서도 보임 */
  border-radius:var(--radius);   /* 둥글기는 고정된 마스킹 박스(프레임)에 — 슬라이드 카드는 각져서 이동 중 모서리가 같이 안 움직임 */
}
/* 필름스트립 트랙: 모든 슬라이드 카드를 가로로 나란히. JS 가 translateX 로 한 칸씩 이동(활성 카드 가운데, 양옆 카드 peek) */
.hero__track{display:flex; gap:var(--hero-gap); height:100%; will-change:transform;
  transition:transform var(--hero-slide-dur) var(--hero-slide-ease)}
@media (prefers-reduced-motion:reduce){ .hero__track{transition:none} }  /* 모션 최소화: 슬라이드 없이 즉시 전환 */
/* 슬라이드 카드: 뷰포트보다 양옆 --hero-peek 만큼 좁음. 프레임(.hero)과 카드 둘 다 둥글기 적용 */
.hero__slide{position:relative; flex:0 0 calc(100% - 2 * var(--hero-peek)); height:100%;
  border-radius:var(--radius); overflow:hidden; background:#15151a;
  display:flex; align-items:flex-end}
.hero__slide.is-link{cursor:pointer}  /* 프로젝트 배너: 클릭 시 상세로 이동 */
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
/* 텍스트 가독성용 어두운 스크림 (좌측 + 하단) */
.hero .glow{position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(10,10,12,1) 0%, rgba(10,10,12,1) 40%, transparent 70%),
             linear-gradient(0deg, rgba(10,10,12,1), transparent 50%)}
.hero .meta{position:relative; z-index:2; padding:31px 34px 28px; max-width:504px}
/* 문구 오버레이: 슬라이드 밖 고정(프레임 좌하단) — 전환 시 JS 가 단어 span 재생성 → 아래 애니메이션 재생.
   모션 = 인트로 스테이트먼트와 동일: 단어별 오른쪽→왼쪽 fade+슬라이드, --i 시차 (거리·시간·시차 토큰 공유) */
.hero .hero__meta{--hm-delay:.55s;
  position:absolute; left:0; bottom:0; pointer-events:none}  /* 문구 시작 지연 */
.hero__meta .hm-w{--hm-dur:1.1s; --hm-fade:1.25s; --hm-stagger:.09s; --hm-rise:40px; display:inline-block;
  animation:hmSlide var(--hm-dur) var(--rv-ease) calc(var(--hm-delay) + var(--i,0) * var(--hm-stagger)) both,
            hmFade var(--hm-fade) var(--rv-ease) calc(var(--hm-delay) + var(--i,0) * var(--hm-stagger)) both}  /* 이동(.95s)과 페이드(1.15s) 분리 — 같은 지연·시차 */
@keyframes hmSlide{from{transform:translateX(var(--hm-rise, var(--rv-rise)))} to{transform:none}}
@keyframes hmFade{from{opacity:0} to{opacity:1}}
/* 아이브로우만 다른 모션: 단어가 아래에서 위로 통째로 올라옴(페이드 없음) — 컨테이너 hidden 이 마스크 */
.hero__meta .eyebrow{overflow:hidden}
.hero__meta .eyebrow .hm-w{--hm-eb-delay:.42s; animation-name:heroEbUp; animation-delay:calc(var(--hm-delay) + var(--hm-eb-delay))}  /* 시차 없이 한꺼번에, 공통 지연 + 아이브로우 추가 지연 .5s */
@keyframes heroEbUp{from{transform:translateY(100%)} to{transform:none}}
@media (prefers-reduced-motion:reduce){.hero__meta .hm-w{animation:none}}
.hero .eyebrow{display:block; margin:0 0 2px; font-size:15px; color:#fff; font-weight:500; letter-spacing:0; text-transform:uppercase; opacity:.7}  /* 이미지 위라 라이트에서도 화이트 (슬라이드별 NEWS/NEW) */
.hero h1{margin:0; font-size:38px; font-weight:500; letter-spacing:-.03em; line-height:1.05;
  color:#fff;  /* 이미지 위라 라이트 모드에서도 화이트 고정 */
  white-space:nowrap; text-shadow:0 2px 4px rgba(0,0,0,.25)}
.hero p{margin:0 0 16px; color:#c7c7cc; font-size:14px}
/* 좌우 끝 네비 영역: 가로 --hero-nav-w, 전체 높이. 시각 효과(스크림·화살표) 없음 —
   호버 시 store.js 가 마우스를 따라다니는 커스텀 커서(칩)로 PREV/NEXT/VIEW 표시. 클릭으로 이동. */
.hero-nav{position:absolute; top:0; bottom:0; width:var(--hero-nav-w); z-index:3; border:0; background:transparent}
.hero-nav--prev{left:0}
.hero-nav--next{right:0}

/* 히어로 커스텀 커서 — 홈 필터 칩과 동일한 고스트 알약(투명·흰 테두리·흰 글자). 마우스를 따라다님(store.js).
   좌측 PREV, 우측 NEXT, 가운데(프로젝트 배너만) VIEW. pointer-events 없음 → 클릭 방해 안 함. */
.hero-cursor{position:fixed; left:0; top:0; z-index:30; pointer-events:none;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1;
  padding:6px 14px; border-radius:var(--chip-radius);
  color:#fff; background:transparent; border:1px solid #fff;
  mix-blend-mode:difference;  /* 차이(반전) 합성 — 뒤 배경색의 반대색으로 보여 어떤 컬러 위에서도 또렷함(흰색이라야 반전됨) */
  font-size:13px; letter-spacing:0; text-transform:uppercase; font-weight:500;
  opacity:0; transform:translate(-50%,-50%) scale(.8);
  transition:opacity .18s var(--rv-ease), transform .18s var(--rv-ease)}
.hero-cursor.is-on{opacity:1; transform:translate(-50%,-50%) scale(1)}
/* 알약 박스는 고정, 안의 글자만 상단바 로고와 동일한 라이즈+페이드(tbLogoRise). 문구 바뀔 때 store.js 가 재시작 */
.hero-cursor__label{display:inline-block; animation:tbLogoRise var(--rv-dur) var(--rv-ease) both}
@media (prefers-reduced-motion:reduce){ .hero-cursor{transition:opacity .18s linear} .hero-cursor__label{animation:none} }
/* 커스텀 커서 활성 동안 히어로 내부 기본 커서 전부 숨김(슬라이드의 cursor:pointer 포함). JS 가 클래스 토글 */
.hero.is-cursor-custom, .hero.is-cursor-custom *{cursor:none}

/* ---------- intro ---------- */
.intro{text-align:center; color:var(--ink); font-size:23px; line-height:1.5; letter-spacing:-.02em; text-transform:capitalize; margin:165px auto 14px; max-width:none; white-space:nowrap}
.intro-statement{text-align:center; margin:0 auto 165px; font-size:23px; line-height:1.5; letter-spacing:-.02em; color:var(--ink)}

/* ---------- 인트로 텍스트 리빌 ---------- */
/* .intro = 단어별 fade+rise (stagger) · .intro-statement = 라인별 마스크 wipe-up.
   단어/라인 분할과 .rv-in 토글은 store.js 가 담당. JS 없으면 평문 그대로 노출. */
/* 단어별 리빌 — .intro 와 .intro-statement 공용 (--i 로 stagger). 방향만 다름: 윗줄=아래→위, 아랫줄=오른쪽→왼쪽 */
.intro .rv-w,.intro-statement .rv-w{display:inline-block; opacity:0; transform:translateY(var(--rv-rise));
  transition:opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
  transition-delay:calc(var(--enter-delay) + var(--i,0) * var(--rv-stagger)); will-change:opacity,transform}
.intro-statement .rv-w{--stmt-delay:1s;
  transform:translateX(var(--rv-rise));  /* 아랫줄: 오른쪽 13px 에서 왼쪽 제자리로 */
  transition-delay:calc(var(--stmt-delay) + var(--i,0) * var(--rv-stagger))}  /* 시작만 0.7s 로 지연 — 시차 0.045·등장 0.7s 는 공용 유지 (마지막 단어 ≈2.26s 종료) */
.intro.rv-in .rv-w,.intro-statement.rv-in .rv-w{opacity:1; transform:none}
/* 푸터 마지막 줄 문구 — 단어별 fade+rise, 시작 지연 --fbrand-delay (스크롤 시점 리빌이라 --enter-delay 는 제외) */
.footer .rv-w{--fbrand-delay:.4s; --fbrand-rise:16px; display:inline-block; opacity:0; transform:translateX(var(--fbrand-rise));  /* 우→좌, 이동 거리 전용 토큰 */
  transition:opacity var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
  transition-delay:calc(var(--fbrand-delay) + var(--i,0) * var(--rv-stagger)); will-change:opacity,transform}
.footer.rv-in .rv-w{opacity:1; transform:none}

/* statement 각 줄 = 한 줄(블록). 개별 요소 intro-statement_1/2/3 로 줄별 제어 가능 */
.intro-statement__line{display:block}

@media (prefers-reduced-motion:reduce){   /* 모션 비활성: 즉시 노출 */
  .intro .rv-w,.intro-statement .rv-w,.footer .rv-w,.footer .fsoc{opacity:1; transform:none; transition:none}
}

/* ---------- browse head ---------- */
.browsehead{display:flex; align-items:center; justify-content:center; gap:14px; margin:27px 0 24px; flex-wrap:wrap}
.chips{display:flex; justify-content:center; flex-wrap:wrap; margin-left:0; align-items:center; min-height:var(--chip-row-h)}
/* gap 대신 칩 margin(0 4px=간격 8px). 칩은 선택 여부와 무관하게 항상 제자리에 노출. */

/* 필터 칩: 각 알약마다 라벨 항상 노출 (점↔알약 호버 모핑 제거).
   idle = 고스트(테두리·투명) · 선택(is-active) = 화이트 채움. 반응 칩(.fc-rx .rx)과 동일 패턴. */
.chip{
  display:inline-flex; align-items:center; margin:0 4px;
  padding:0; border:0; background:transparent;
  font:inherit; font-size:var(--chip-font); cursor:pointer;
}
/* 상세 상단바 알약(.logo-typed)과 동일 사이즈: 14px / padding 8px 16px (둘이 매칭) */
.chip__pill{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1;
  padding:8px 16px; border-radius:var(--chip-radius);
  color:var(--ink); background:transparent; border:1px solid var(--ink);
  font-size:14px; letter-spacing:-.02em;
  transition:color var(--chip-dur) var(--chip-ease), background var(--chip-dur) var(--chip-ease), border-color var(--chip-dur) var(--chip-ease),
             transform .15s cubic-bezier(.2,.8,.2,1);  /* 누름/복귀 축소 전환 (카드 press 와 동일 속도) */
}
/* 검색 칩: 돋보기 아이콘만 — 텍스트 칩과 같은 높이(32px)의 원형 알약. 기능은 추후 연결 */
.chip--search .chip__pill{padding:7px}
.chip--search iconify-icon{display:block; font-size:16px}  /* 16px → Tabler 두께 ≈1.3px (전역 통일) */
/* 호버 배경 변화 없음 — 호버 반응은 라벨 롤업이 담당 */
/* 클릭(누르는 동안): 알약 살짝 축소 — 눌리는 느낌 (반응 칩 .rx:active 와 동일 배율) */
.chip:active .chip__pill{transform:scale(.97)}
/* 호버: 라벨 롤업 — 카드 텍스트 호버와 동일 (원본 위로·복제 아래서, 2겹 구조는 store.js 가 생성) */
.chip__label{display:inline-block}
.chip__label .cw{--cw-dur:.6s; --chip-roll:1.4em; display:inline-block; overflow:hidden; position:relative; vertical-align:top;
  padding:.15em 0 .35em; margin:-.15em 0 -.35em}  /* 클립 상자에 어센더/디센더 여유(레이아웃 불변) — line-height:1 알약이라 글리프가 상자보다 큼 */
.chip__label .cw__t{display:block; transition:transform var(--cw-dur) var(--rv-ease)}
.chip__label .cw__t--dup{position:absolute; left:0; top:.15em; width:100%; transform:translateY(var(--chip-roll))}  /* 원본과 같은 기준선에서 1.4em 아래 대기 */
.chip:hover .chip__label .cw__t{transform:translateY(calc(-1 * var(--chip-roll)))}
.chip:hover .chip__label .cw__t--dup{transform:translateY(0)}  /* 복제는 제자리로 */
@media (prefers-reduced-motion:reduce){.chip__label .cw__t{transition:none}}
/* 선택(on): 흰색으로 채우고 글자는 어두워짐 (Event 처럼) */
.chip.is-active .chip__pill{background:var(--chip-on-bg); border-color:var(--chip-on-bg); color:var(--chip-on-fg)}

/* ---------- grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); --grid-pad-x:200px; --grid-max:1680px;
  padding:0 max(var(--grid-pad-x), calc((100% - var(--grid-max)) / 2)) 54px}  /* 좌우 = 최소 200px, 초광폭에선 그리드가 --grid-max 에서 멈추고 가운데 정렬 (900px 이하 해제는 기존 그대로) */
.card{
  background:var(--card-bg); border:0; border-radius:var(--radius); overflow:hidden;
  cursor:pointer;
  padding:60px var(--card-px);   /* 카드 여백: 상하 60 / 좌우 --card-px */
  /* 스크롤 리빌 시작 상태: 아래로 내려가 숨김. --ci(열 인덱스) 로 같은 행 좌→우 순차 */
  opacity:0; transform:translateY(var(--card-rv-rise));
  transition:background var(--card-hover-dur) cubic-bezier(.2,.8,.2,1),
             translate var(--card-hover-dur) cubic-bezier(.2,.8,.2,1),
             scale var(--card-press-dur) cubic-bezier(.2,.8,.2,1),
             opacity var(--card-rv-dur) var(--rv-ease) calc(var(--ci,0) * var(--card-rv-stagger)),
             transform var(--card-rv-dur) var(--rv-ease) calc(var(--ci,0) * var(--card-rv-stagger));
}
.card.is-in{opacity:1; transform:none}
.thumb{aspect-ratio:16/10; position:relative; background:#222; margin:0; border-radius:4px; overflow:hidden}
/* img·오버레이에도 같은 radius → overflow 클립만으로 생기던 1px 다크 심(모서리 지저분함) 완화 */
.thumb > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit;
  transform:scale(var(--card-img-scale));   /* 리빌 전: 7% 확대(1.07) → is-in 에서 1로 축소 */
  transition:transform var(--card-img-dur) var(--rv-ease) calc(var(--ci,0) * var(--card-rv-stagger))}
.card.is-in .thumb > img{transform:scale(1)}
/* 호버 시 메인(배너) 이미지 크로스페이드 — 썸네일 위에 겹쳐두고 opacity 만 전환 (홈·Related 공통) */
.thumb .thumb__alt, .fc-related__thumb .thumb__alt{--thumb-fade-dur:.3s;
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit;
  opacity:0; transition:opacity var(--thumb-fade-dur) cubic-bezier(.2,.8,.2,1)}
.card:hover .thumb__alt, .fc-related__card:hover .thumb__alt{opacity:1}
@media (prefers-reduced-motion:reduce){.thumb .thumb__alt, .fc-related__thumb .thumb__alt{transition:none}}
/* 클릭(누르는 동안): 떠 있던 카드가 제자리로 가라앉으며 살짝 축소 — 꾹 눌리는 느낌 */
.card:active{translate:0 0; scale:var(--card-press-scale)}
/* [비활성화] 카드 호버 커서 — 커서 따라다니는 앱 아이콘 (주석처리)
.card-cursor{position:fixed; left:0; top:0; z-index:90; pointer-events:none; opacity:0;
  transform:translate(12px,12px) scale(.7); transition:opacity .18s var(--rv-ease), transform .18s var(--rv-ease)}
.card-cursor.is-on{opacity:1; transform:translate(12px,12px) scale(1)}
.card-cursor img{display:block; width:var(--card-cursor-size); height:var(--card-cursor-size); border-radius:12px; object-fit:cover; box-shadow:var(--drop-shadow)} */
/* 모션 최소화 사용자: 카드/썸네일 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  .card{opacity:1; transform:none; transition:background var(--card-hover-dur) cubic-bezier(.2,.8,.2,1)}
  .card:hover, .fc-related__card:hover{translate:none; background:var(--card-hover-bg)}  /* 모션 최소화: 떠오름 대신 배경색 변화 */
  .card:active, .fc-related__card:active{scale:none}  /* 모션 최소화: 누름 축소도 끔 */
  .thumb > img{transform:none; transition:none}
}
/* 썸네일 없음/로드 실패 시 .thumb{background:#222} 가 폴백 (위 366줄) — 다크 테마와 일관 */

/* 카드 메타: [프로젝트명] 좌 · [아이콘] 우 — 홈 카드는 썸네일 "아래" 배치, 상세 Related 카드는 썸네일 하단 오버레이 유지 */
.card__meta{--card-meta-top:14px; display:flex; align-items:center; justify-content:flex-start; gap:10px; margin-top:var(--card-meta-top)}  /* 프로젝트명 왼쪽 · 아이콘 오른쪽 끝 */
.card__icon{flex:0 0 auto; order:2; margin-left:auto; width:36px; height:36px; border-radius:7px; object-fit:cover;
  border:1px solid var(--fc-shot-stroke)}  /* 앱 아이콘 36×36 — order+margin-left:auto 로 우측 배치. 상세 앱 아이콘과 동일한 연한 스트로크 */
.card__text{display:flex; flex-direction:column; gap:2px; min-width:0}  /* 이름 위 · 태그라인 아래 */
.card .name, .fc-related__card .name{display:flex; align-items:center; gap:7px; min-width:0; color:var(--ink); font-weight:500; font-size:15px; letter-spacing:-.02em}  /* 카드 면 위 텍스트 → 테마 글자색 (홈·Related 공통) */
.card__name-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}  /* 이름이 길면 줄바꿈 대신 말줄임(…) */
/* 카드 호버: 단어별 롤업 — 원본이 위로 말려 올라가고 아래에서 복제가 이어 올라옴 (단어 순차, 각 단어 상자가 마스크) */
.card__text .cw{--cw-dur:.6s; --cw-stagger:.05s; display:inline-block; overflow:hidden; position:relative; vertical-align:top}
.card__text .cw__t{display:block; transition:transform var(--cw-dur) var(--rv-ease) calc(var(--i,0) * var(--cw-stagger))}
.card__text .cw__t--dup{position:absolute; left:0; top:100%; width:100%}  /* 복제본 — 원본 바로 아래 대기 */
.card:hover .card__text .name .cw__t, .fc-related__card:hover .card__text .name .cw__t{transform:translateY(-100%)}  /* 롤업은 프로젝트명만 */
/* [주석처리] 태그라인 롤업 — 복구하려면 아래 줄 살리기
.card:hover .card__text .sub .cw__t, .fc-related__card:hover .card__text .sub .cw__t{transform:translateY(-100%)} */
@media (prefers-reduced-motion:reduce){.card__text .cw__t{transition:none}}
.card .sub, .fc-related__card .sub{--card-sub-size:12.5px; color:var(--muted); font-size:var(--card-sub-size); line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}  /* 프로젝트명 아래 한 줄 문구(tagline) — 넘치면 말줄임 (홈·Related 공통) */
.tag{display:inline-block; font-size:10px; color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:2px 6px; margin-top:8px}
.react{display:flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; white-space:nowrap}
.react iconify-icon{font-size:16px}  /* 16px → Tabler 두께 ≈1.3px (전역 통일) */

.empty{grid-column:1/-1; color:var(--muted); text-align:center; padding:54px 0}

.footer{display:flex; justify-content:space-between; align-items:flex-end; gap:43px;
  padding:140px 0 25px; margin:0;
  color:var(--faint); font-size:12px; text-align:left}  /* 좌=로고·문구, 우하단=소셜 링크 */
.footer__mark-link{display:inline-block; margin:0 0 14px; cursor:pointer}  /* 로고 클릭 → 홈 이동 */
.footer__mark{height:45px; width:auto; display:block; color:var(--ink)}  /* 로고 SVG — 색은 테마 글자색(currentColor) */
.footer__mark path{stroke:currentColor; stroke-width:2}  /* 항상 그려진 상태 (드로잉 리빌 제거) */
.footer__brand{margin:0 0 2px; font-size:13px; color:var(--ink)}  /* 브랜드 문구 — 화이트(테마 글자색) */
.footer__copy{margin:0; font-size:13px; color:var(--faint)}
.footer__social{display:flex; gap:20px; flex:0 0 auto;
  overflow:hidden; padding-bottom:2px; margin-bottom:-2px}  /* 리빌 마스크 (아래 여유 2px = 호버 밑줄 안 잘리게) */
/* 소셜 링크 리빌 — 히어로 아이브로우와 동일한 롤업(페이드 없음), 좌→우 순차 (--fsoc-stagger) */
.footer .fsoc{--fsoc-rv-dur:.9s; opacity:1; transform:translateY(100%);
  transition:transform var(--fsoc-rv-dur) var(--rv-ease)}
.footer.rv-in .fsoc{--fsoc-stagger:.1s; opacity:1; transform:none;
  transition-delay:calc(.4s + var(--i,0) * var(--fsoc-stagger))}  /* 시작 .4s + 버튼별 순차 시차 */
.fsoc{position:relative; color:var(--ink); font-size:13px}
.fsoc .logo-w{display:inline-block}
/* 호버: 텍스트 하단 라인이 왼→오로 그려짐 (scaleX 0→1, origin 좌측) */
.fsoc::after{content:""; position:absolute; left:0; right:0; bottom:-0.5px; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--fsoc-line-dur, .34s) cubic-bezier(.2,.8,.2,1)}
.fsoc:hover::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.fsoc::after{transition:none}}

/* ---------- 상세 페이지 (앱 상세) ---------- */
.detail-wrap{margin:0; display:flex; align-items:flex-start; gap:var(--gap)}  /* 화면 꽉 참 — 좌우 11px는 .wrap 패딩이 담당 */
/* 스택: 배너 → 정보 카드 → 이미지 카드 (order 로 정렬). 2열 그리드 — 메타 카드(좌)·버전 카드(우)만 나란히, 나머지는 풀 폭(1/-1) */
.detail{flex:1; min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start;
  gap:var(--detail-col-gap); margin-bottom:72px; padding:0 var(--detail-pad-x);
  animation:detailIn var(--detail-anim) cubic-bezier(.2,.8,.2,1) both}
@keyframes detailIn{from{transform:translateY(50px); opacity:0} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.detail{animation:none}}
.fc-media{grid-column:1/-1; order:2; position:relative; display:flex; flex-direction:column; gap:var(--gap); min-width:0; margin:0}  /* 스크린샷 — 위아래 섹션과 동일하게 상세 좌우 패딩(--detail-pad-x) 안쪽 배치. 2장 이상이면 JS 가 캐러셀 트랙으로 전환 */
/* 스크린샷 필름스트립(2장 이상일 때 JS 가 생성): 배경 카드(.fc-shot)는 고정, 안의 이미지만 슬라이드 (히어로와 동일 이징) */
.fc-media__viewport{border-radius:4px}  /* 마스킹 해제 — 히어로처럼 옆 이미지가 카드 밖에서도 보임 */
.fc-media__track{--fc-shot-gap:120px; display:flex; gap:var(--fc-shot-gap); will-change:transform; transition:transform var(--fc-shot-slide-dur) var(--hero-slide-ease)}  /* 스크린샷 이미지 간 간격·슬라이드 시간 — 전용 토큰 (이징은 히어로 공유) */
.fc-media__cell{flex:0 0 100%; min-width:0}
@media (prefers-reduced-motion:reduce){.fc-media__track{transition:none}}  /* 모션 최소화: 즉시 전환 */
.fc-media.is-cursor-custom, .fc-media.is-cursor-custom *{cursor:none}  /* 커스텀 커서 활성 동안 기본 커서 숨김 (히어로와 동일) */
/* 이미지 하단 페이지 점 (2장 이상일 때 JS 가 생성): 현재 장 = 밝게 */
.fc-media__dots{display:flex; justify-content:center; gap:8px; margin-top:20px}
.fc-media__dot{width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--muted); opacity:.35; cursor:pointer;
  transition:opacity .34s cubic-bezier(.2,.8,.2,1), background .34s cubic-bezier(.2,.8,.2,1)}
.fc-media__dot.is-on{background:var(--ink); opacity:1}
.fc-media.is-cursor-custom .fc-media__dot{cursor:pointer}  /* 점 위에선 기본 포인터 복원 */
.fc-hero{position:relative}  /* 썸네일: 박스/패딩 없이 이미지만 */
.fc-hero img{display:block; width:100%; aspect-ratio:var(--fc-hero-ratio); object-fit:cover; border-radius:var(--fc-img-radius)}
/* 대표 썸네일 배너 — 정보/이미지 카드 위 full-width, 첫 화면(상단바 아래~하단 거터)을 꽉 채움. dvh로 모바일 주소창 대응 */
.fc-banner{grid-column:1/-1; order:0; height:calc(100dvh - var(--fc-banner-top, 96px) - var(--fc-banner-gap)); margin:0 calc(-1 * var(--detail-pad-x)) calc(var(--gap) * 2)}  /* height: 측정한 상단바 아래 ~ 화면 하단 거터까지(잘림 없음). 좌우 네거티브 마진: .detail 패딩(--detail-pad-x)을 벗어나 풀 폭 유지. margin-bottom: 다음 카드를 fold 밑으로(스크롤하면 보임) */
.fc-banner img{height:100%; aspect-ratio:auto}
/* 스크린샷: 홈 프로젝트 카드와 동일한 박스 (배경 --card-bg · 테두리 없음 · 상하 60/좌우 --card-px 패딩) */
.fc-shot{background:var(--card-bg); border-radius:var(--radius); padding:var(--fc-frame-pad-y) var(--fc-frame-pad-x); overflow:hidden}  /* 카드 경계에서 마스킹 — 옆 이미지는 패딩 영역까지만 보이고 카드 밖으론 안 나감 */
/* 스크린샷 이미지는 비율 고정 안 함 — 원본 비율대로 높이 자동(잘림 없음). 모서리는 홈 카드 썸네일(4px)과 동일 */
.fc-shot img{aspect-ratio:auto; height:auto; object-fit:fill; border-radius:4px; border:1px solid var(--fc-shot-stroke)}  /* 앱 아이콘과 동일한 연한 스트로크 (토큰 공유) */
/* Related Apps — 이미지 영역 하단 */
.fc-related{grid-column:1/-1; order:5; margin-top:120px}  /* .detail 직속: 버전 카드(4) 다음, 맨 아래 — 풀 폭 */
.fc-related__title{margin:0 0 20px; font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.02em; text-align:left}
.fc-related__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}  /* 홈 그리드와 동일 3열 */
.fc-related__card{display:block; background:var(--card-bg); border-radius:var(--radius); overflow:hidden;
  padding:60px var(--card-px); transition:translate var(--card-hover-dur) cubic-bezier(.2,.8,.2,1), scale var(--card-press-dur) cubic-bezier(.2,.8,.2,1)}  /* 홈 카드처럼 surface 박스로 감쌈 (상하 60·좌우 --card-px 홈과 동일) */
.fc-related__card:active{translate:0 0; scale:var(--card-press-scale)}
.fc-related__thumb{aspect-ratio:16/10; margin:0; border-radius:4px; overflow:hidden; background:#222; position:relative}
.fc-related__thumb > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit}  /* 썸네일 이미지 (홈 .thumb > img 와 동일) */
.fc-body{grid-column:1/-1; order:1; padding:var(--pad) var(--fc-body-px); background:transparent; border-radius:var(--radius);
  align-self:start;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--fc-body-gap); align-items:start}  /* 카드 내부 2열: 좌=설명 문구+Details 메타(세로 스택) · 우=빈 공간 */
/* 메타 카드: .detail 직속(스크린샷 뒤) — 내부 2열: 좌=아이콘+프로젝트명 · 우=Version History (열 간격 토큰 --fc-meta-top) */
.fc-body--dup{order:3; grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--fc-meta-top)}
.fc-body--dup .fc-versions{margin-top:0; grid-column:1}  /* 좌측 열 배치 (우측 열은 빈 공간) — 좌우 2영역 분할 유지 */
.fc-body__right{min-width:0; grid-column:2; order:1}  /* 설명 — 우측 열 맨 위 */
.fc-body__right .fc-desc{margin-top:0; margin-bottom:0}  /* 상하 마진 제거 — 메타와의 간격은 카드 gap(--fc-body-gap)만으로 */
.fc-body .fc-details{grid-column:2; order:2}  /* Details 메타 — 정보 카드 우측 열, 설명 아래 */
.fc-body > .fc-top{grid-column:1; order:0}  /* 아이콘+프로젝트명 — 정보 카드 좌측 열 맨 위 */
.fc-top{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
.fc-app-icon{flex:0 0 auto; width:var(--fc-app-icon); height:var(--fc-app-icon);
  border-radius:12px; object-fit:cover; background:var(--surface);
  border:1px solid var(--fc-shot-stroke)}  /* 스크린샷과 동일한 연한 스트로크(같은 토큰 공유) */
.fc-title{flex:1}
.fc-title h2{margin:0; font-size:24px; font-weight:500; letter-spacing:-.03em}
/* 서버 상태 점 (프로젝트명 옆): 운영중=녹색, 그 외=노랑 */
.pj-dot{display:inline-block; width:var(--pj-dot); height:var(--pj-dot); border-radius:50%; margin-left:7px;
  background:var(--status-ok); vertical-align:middle}
.pj-dot--warn{background:var(--status-warn)}
.fc-title .pj-dot{--pj-dot:6px; margin-left:9px}  /* 상세 제목(큰 글씨)은 점·간격 약간 크게 */
.fc-title .ver{color:var(--muted); font-size:17px; margin-top:4px}
.fc-react{display:flex; align-items:center; gap:6px; color:var(--ink); font-size:14px; white-space:nowrap}
.fc-react iconify-icon{font-size:16px}  /* 16px → Tabler 두께 ≈1.3px (전역 통일) */
.fc-desc{color:var(--ink); font-size:15px; line-height:1.4; margin:16px 0 14px}  /* 전체 노출(접힘/더보기 없음) */
.fc-rx{display:flex; gap:7px; margin:25px 0 5px}  /* 최하단 — 1열 fill (줄바꿈 없음) */
.fc-rx .rx{display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1; min-width:0;
  font:inherit; font-size:var(--chip-font);
  color:var(--ink); background:transparent; border:1px solid var(--ink);  /* 선·아이콘·글자 모두 고대비 전경(--ink) → 라이트 블랙 / 다크 화이트 */
  border-radius:var(--chip-radius); padding:var(--chip-py) var(--chip-px); cursor:pointer;
  transition:color .4s cubic-bezier(.2,.8,.2,1), background .4s cubic-bezier(.2,.8,.2,1), border-color .4s cubic-bezier(.2,.8,.2,1)}
.fc-rx .rx iconify-icon{font-size:18px}
.fc-rx .rx b{color:var(--ink); font-weight:500}
.fc-rx .rx:hover{color:var(--chip-fg-hover); border-color:var(--ink)}
.fc-rx .rx.on{background:var(--chip-on-bg); border-color:var(--chip-on-bg); color:var(--chip-on-fg)}
.fc-rx .rx.on b{color:var(--chip-on-fg)}

/* 버전 내역 — 앱스토어 버전 히스토리 스타일 (반응 하단). 버전명·날짜·내용, 최신 위 */
.fc-versions{margin-top:28px}
.fc-versions__title,.fc-meta-title{margin:0 0 14px; font-size:16px; font-weight:500; color:var(--ink); letter-spacing:-.02em}  /* 섹션 제목 (Details · Version History 공통) */
.fc-versions__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--fc-meta-item-gap, 14px)}  /* 버전 항목 사이 간격 — 메타 항목 간격과 동일 */
/* 버전 아코디언: 항목마다 [버전·날짜·우측 끝 셰브론] 라벨 행 — 클릭 시 상세 문구 펼침 (grid-rows 0fr→1fr 높이 트랜지션) */
.fc-version__head{display:flex; align-items:baseline; justify-content:flex-start; gap:12px; width:100%;
  margin:0; padding:0; border:0; background:transparent; font:inherit; color:inherit; text-align:left}
button.fc-version__head{cursor:pointer}
.fc-version__chev{margin-left:auto; align-self:center; font-size:16px; color:var(--muted); transition:transform .34s cubic-bezier(.2,.8,.2,1), color .34s cubic-bezier(.2,.8,.2,1)}  /* 라벨 우측 끝 셰브론 */
button.fc-version__head:hover .fc-version__chev{color:var(--ink)}
.fc-version.is-open .fc-version__chev{transform:rotate(180deg)}
.fc-version__body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.fc-version__body > .fc-version__note{overflow:hidden; min-height:0; padding-top:4px}  /* 펼침 시 라벨과의 간격 */
.fc-version.is-open .fc-version__body{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){.fc-version__body{transition:none} .fc-version__chev{transition:none}}
.fc-version{padding:0 0 7px; display:flex; flex-direction:column; align-items:stretch; gap:0; line-height:1.6;
  border-bottom:1px solid var(--line)}  /* [버전+날짜 라벨] 위 / [내용] 아래 — 항목 하단 스트로크 */
.fc-version__name{font-size:13.5px; font-weight:500; color:var(--muted)}  /* Details 메타 라벨과 동일 스타일 (13.5px·muted) */
.fc-version__date{font-size:13.5px; color:var(--muted); white-space:nowrap}
.fc-version__note{margin:0; font-size:15px; line-height:1.6; color:var(--ink); text-align:left}  /* 좌측 정렬. 카드 폭 끝까지(너비 제한 없음). 색상=메타 값과 동일 --ink */
.fc-rx .rx:active{transform:scale(.95)}
.fc-meta{--fc-meta-item-gap:18px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--fc-meta-item-gap); color:var(--muted); font-size:13.5px; margin-top:0}  /* 3열×2행 배치 (항목 6개). 라벨 13.5px (값은 아래 b 15px) */
.fc-meta > div{display:flex; flex-direction:column; align-items:flex-start; gap:4px}  /* 한 항목: 라벨 위 / 값 아래 */
/* 메타·버전 "값"만 Pretendard (라벨은 기본 스택 유지) — 라틴도 Strichpunkt 대신 Pretendard 로 */
.fc-meta b, .fc-dev, .fc-version__name, .fc-version__date, .fc-version__note{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}
.fc-meta b{color:var(--ink); font-weight:500; font-size:15px; text-align:left}
.fc-meta .fc-owner{display:inline-flex; align-items:center; gap:7px}  /* Owner 값: 이름 + 직급 가로 정렬 (아바타는 삭제됨) */
.fc-meta .fc-devices{display:flex; flex-direction:row; flex-wrap:wrap; gap:8px; margin:0}  /* Available on 기기 칩 — 가로 정렬(한 칸 안에서 줄바꿈) */

/* 지원 디바이스 칩 + 본문 문단 (Station 신규 구조 노출) */
.fc-devices{display:flex; gap:7px; flex-wrap:wrap; margin:14px 0 4px}
.fc-dev{display:inline-flex; align-items:center; gap:3px; font-size:15px; color:var(--ink)}
.fc-dev iconify-icon{font-size:16px; flex:0 0 auto}  /* 16px → Tabler 두께 ≈1.3px (전역 통일) */
.fc-dev-sep{width:1px; align-self:center; height:14px; background:var(--line); margin:0 3px}  /* 기기 ↔ OS 구분선 (Available on) */
.fc-desc p{margin:0 0 11px}
.fc-desc p:last-child{margin-bottom:0}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr); --grid-pad-x:0px}  /* 좁은 화면: 그리드 좌우 여백 해제(카드 폭 확보) */
  .detail{--detail-pad-x:0px; grid-template-columns:1fr}  /* 좁은 화면: 상세 좌우 여백 해제 + 메타·버전 카드 1열 스택 */
  /* 좁은 화면: 한 줄 강제(nowrap) 해제 → 가로 오버플로 방지. normal 은 줄바꿈을 '허용'만 하므로
     한 줄에 들어가는 폭(≈640px↑)에선 그대로 한 줄, 안 맞을 때만 줄바꿈. (>900px 는 기존 nowrap 유지) */
  .intro{white-space:normal}
  .hero{height:270px}
  .hero h1{font-size:27px}
  /* 상세는 데스크톱에서 이미 1열 스택(정보 위/이미지 아래) — 모바일도 동일, 별도 순서 override 불필요 */
}
@media (max-width:600px){
  .topbar{padding:0 16px; gap:11px}
  .wrap{padding:0 var(--gap)}
  .grid{grid-template-columns:1fr}
  .chips{margin-left:0; width:100%}
  .fc-body{grid-template-columns:1fr}  /* 카드 내부 2열 → 1열 스택 */
}

/* ---------- Lenis smooth scroll ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* 스크롤바 항상 숨김 (휠·트랙패드·키보드 스크롤 기능은 유지) — 페이지 전체 */
::-webkit-scrollbar{width:0; height:0}          /* Chrome·Safari·Edge */
html{scrollbar-width:none; -ms-overflow-style:none}  /* Firefox / 구형 Edge */

/* ---------- Store Admin (/admin/) — 토큰만 사용해 라이트/다크 자동 대응. adm- 접두어로 기존 화면 영향 없음 ---------- */
.adm{max-width:1060px; margin:0 auto; padding-top:36px; padding-bottom:80px}  /* 폭 = 좌측 네비(190) + 콘텐츠 */
.adm-help{margin:0; font-size:13px; line-height:1.6; color:var(--muted)}
/* 좌측 사이드 네비 + 콘텐츠 2열 (탭 전환 — admin.js) */
.adm-layout{display:grid; grid-template-columns:190px minmax(0,1fr); gap:40px; align-items:start; margin-top:40px}
.adm-nav{position:sticky; top:96px; display:flex; flex-direction:column; gap:2px}  /* 스크롤해도 상단바 아래 고정 */
.adm-nav__item{display:flex; align-items:center; gap:10px; padding:10px 12px; border:0; border-radius:9px;
  background:transparent; font:inherit; font-size:14px; color:var(--muted); cursor:pointer; text-align:left;
  transition:background .2s ease, color .2s ease}
.adm-nav__item:hover{background:var(--chip-hover-bg); color:var(--ink)}
.adm-nav__item.is-active{background:var(--chip-hover-bg); color:var(--ink); font-weight:500}
.adm-nav__item iconify-icon{font-size:17px; flex:0 0 auto}
.adm-nav__dot{flex:0 0 auto; width:6px; height:6px; margin-left:auto; border-radius:50%; background:var(--status-warn)}  /* 섹션에 미저장 변경 있음 */
@media (max-width:760px){  /* 좁은 화면: 네비를 가로 줄로 */
  .adm-layout{grid-template-columns:1fr; gap:24px}
  .adm-nav{position:static; flex-direction:row; flex-wrap:wrap}
}

.adm-section{margin-top:0}
.adm-section__title{margin:0 0 6px; font-size:20px; font-weight:500; letter-spacing:-.02em; color:var(--ink)}
.adm-section .adm-help{margin-bottom:16px}
.adm-list{display:flex; flex-direction:column; gap:8px}

/* 행 카드: 홈 카드와 동일 문법 — 면 색(--card-bg)만으로 구분, 스트로크 없음 */
.adm-row{display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--card-bg); border-radius:var(--radius)}
.adm-row--slim{padding:10px 16px}
.adm-row--ghost{opacity:.55}
.adm-move{display:flex; flex-direction:column; gap:2px; flex:0 0 auto}
.adm-iconbtn{display:grid; place-items:center; width:26px; height:26px; padding:0;
  border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; font-size:16px;
  transition:color .2s ease, background .2s ease}
.adm-iconbtn:hover{background:var(--chip-hover-bg); color:var(--ink)}
.adm-iconbtn:disabled{opacity:.3; cursor:default; background:transparent; color:var(--muted)}
.adm-iconbtn--danger:hover{color:var(--status-err)}
.adm-rowactions{display:flex; align-items:center; gap:4px; margin-left:auto; flex:0 0 auto}

/* 히어로 슬라이드 프리뷰 (홈 카드 썸네일과 같은 비율·둥글기)
   히어로 탭에선 label = 업로드 버튼: 이미지 없으면 빈 슬롯(+아이콘), 있으면 호버 시 교체 오버레이 */
.adm-thumb{position:relative; flex:0 0 auto; width:128px; aspect-ratio:16/10; margin:0; border-radius:4px; overflow:hidden; background:#222}
.adm-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.adm-thumb--mini{width:64px}
label.adm-thumb{cursor:pointer}
.adm-thumb--empty{display:grid; place-items:center; background:var(--bg); color:var(--muted); font-size:20px;
  transition:color .2s ease}
.adm-thumb--empty:hover{color:var(--ink)}
.adm-thumb__hint{position:absolute; inset:0; display:grid; place-items:center; font-size:18px; color:#fff;
  background:rgba(0,0,0,.45); opacity:0; transition:opacity .2s ease}
label.adm-thumb:hover .adm-thumb__hint{opacity:1}
.adm-thumb--empty .adm-thumb__hint{display:none}  /* 빈 슬롯은 +아이콘이 본체라 오버레이 불필요 */

/* 입력 필드 */
.adm-fields{display:flex; flex-direction:column; gap:8px; flex:1; min-width:0}
.adm-fields__line{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* 입력 필드: 스트로크 없이 "카드 위에 파인 어두운 면"(--bg) 으로 형태 구분. 포커스 때만 라인 */
.adm-input{flex:1; min-width:0; padding:8px 12px; font:inherit; font-size:14px; color:var(--ink);
  background:var(--bg); border:1px solid transparent; border-radius:9px; outline:0;
  transition:border-color .2s ease}
.adm-input:focus{border-color:var(--muted)}
.adm-input--eyebrow{flex:0 1 220px; text-transform:uppercase; font-size:12px; letter-spacing:.02em}
.adm-input--cat{flex:0 1 240px}
/* 프로젝트 선택 커스텀 드롭다운 — 트리거는 입력 필드와 같은 파인 면, 패널은 계정 메뉴와 같은 글래스 */
.adm-dd{position:relative; flex:0 0 auto}
.adm-dd__btn{display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:170px;
  padding:8px 12px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--bg); border:1px solid transparent; border-radius:9px; cursor:pointer;
  transition:border-color .2s ease}
.adm-dd.is-open .adm-dd__btn{border-color:var(--muted)}
.adm-dd__btn iconify-icon{font-size:14px; color:var(--muted); transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.adm-dd.is-open .adm-dd__btn iconify-icon{transform:rotate(180deg)}
.adm-dd__menu{position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:100%; width:max-content;
  max-height:264px; overflow:auto; padding:8px; border-radius:var(--radius);
  background:var(--topbar-bg); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  animation:admFade .18s ease both}
.adm-dd__menu[hidden]{display:none}
.adm-dd__opt{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  padding:9px 10px; border:0; border-radius:8px; font:inherit; font-size:13px; text-align:left;
  color:var(--muted); background:transparent; cursor:pointer;
  transition:background .15s ease, color .15s ease}
.adm-dd__opt:hover{background:var(--chip-hover-bg); color:var(--ink)}
.adm-dd__opt.is-sel{color:var(--ink)}
.adm-dd__opt iconify-icon{font-size:14px; flex:0 0 auto}

/* General|Project 타입 토글 — 입력 필드와 같은 파인 면 트랙, 선택은 칩 on 토큰 */
.adm-toggle{display:inline-flex; flex:0 0 auto; background:var(--bg); border-radius:var(--chip-radius); overflow:hidden}
.adm-toggle__btn{padding:8px 14px; border:0; background:transparent; font:inherit; font-size:12px; color:var(--muted); cursor:pointer;
  transition:background .2s ease, color .2s ease}
.adm-toggle__btn.is-on{background:var(--chip-on-bg); color:var(--chip-on-fg)}

/* 상태 배지 */
.adm-badge{flex:0 0 auto; padding:4px 9px; font-size:11px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; white-space:nowrap}
.adm-badge--warn{color:var(--status-warn); border-color:color-mix(in srgb, var(--status-warn) 35%, transparent)}
.adm-badge--btn{cursor:pointer; background:transparent; font:inherit; color:var(--ink); transition:background .2s ease}
.adm-badge--btn:hover{background:var(--chip-hover-bg)}
.adm-unreg{margin:10px 0 0; font-size:12px; color:var(--faint); display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.adm-inline{display:flex; align-items:center; gap:8px; margin-top:14px}
.adm-inline .adm-input{flex:0 1 280px; background:var(--card-bg)}  /* 카드 밖(페이지 배경 위) 필드 — 배경과 같은 --bg 면은 안 보여서 카드 면으로 */
.adm-inline .adm-input, .adm-inline .btn{height:38px}  /* 입력창과 Add 버튼 높이 통일 (세로 정렬) */
/* 추가 버튼: 면 채움 + 글자는 활성색(ink) — muted 면 비활성처럼 읽힘. (.btn--ghost 는 다크 고정색이라 미사용) */
.adm-add{background:var(--chip-hover-bg); border-color:transparent; color:var(--ink)}
.adm-add:hover{background:var(--card-hover-bg)}
/* Hero 의 Add Slide: 리스트에 이어지는 "빈 슬롯" 행 — 카드와 같은 폭·면·둥글기 */
.adm-add--row{width:100%; justify-content:center; margin-top:8px; padding:16px;
  background:var(--card-bg); border-radius:var(--radius)}
.adm-add--row:hover{background:var(--card-hover-bg)}
.adm-name{font-size:14px; font-weight:500; color:var(--ink); letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.adm-meta{display:flex; align-items:center; gap:8px; margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap;
  font-family:'Pretendard',-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif}  /* 제작자 · 릴리즈 일자 (우측 정렬) — Pretendard */
/* 노출/미노출 토글 (눈 아이콘, 메타 우측) + 미노출 행은 내용만 흐리게 (버튼은 유지) */
.adm-vis{margin-left:12px}
.adm-row--off .adm-thumb, .adm-row--off .adm-name, .adm-row--off .adm-meta{opacity:.4}
.adm-meta__sep{width:2px; height:2px; border-radius:50%; background:var(--faint)}

/* 탭별 하단 액션 바 (상태줄 + Revert + Save) — 각 섹션 맨 아래 */
/* 탭 이탈 확인 모달 — 상단바와 동일한 글래스(반투명 + 블러 + 그림자) */
.adm-modal{position:fixed; inset:0; z-index:100; display:grid; place-items:center}
.adm-modal[hidden]{display:none}
.adm-modal__scrim{position:absolute; inset:0; background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:admFade .25s ease both}
.adm-modal__box{position:relative; width:min(400px, calc(100% - 48px)); padding:28px;
  border-radius:var(--radius); background:var(--topbar-bg); box-shadow:var(--drop-shadow);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  animation:admModalIn .35s var(--rv-ease) both}
.adm-modal__title{margin:0 0 8px; font-size:16px; font-weight:500; letter-spacing:-.02em; color:var(--ink)}
.adm-modal__msg{margin:0 0 22px; font-size:13px; line-height:1.6; color:var(--muted)}
.adm-modal__actions{display:flex; justify-content:flex-end; gap:8px}
@keyframes admFade{from{opacity:0}}
@keyframes admModalIn{from{opacity:0; transform:translateY(10px) scale(.98)}}
@media (prefers-reduced-motion:reduce){.adm-modal__scrim,.adm-modal__box{animation:none}}

.adm-actions{display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:40px}  /* 구분선 없이 여백으로 분리 */
.adm-actions .btn:disabled{opacity:.4; cursor:default}
.adm-actions .btn:disabled:hover{filter:none}
.adm-actions__status{margin-right:auto; font-size:12px; color:var(--faint)}
.adm-actions__status.is-dirty{color:var(--muted)}
.adm-actions__status.is-ok{color:var(--status-ok)}
.adm-actions__status.is-error{color:var(--status-err)}