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

/* ---------- design tokens ---------- */
:root{
  --bg:#0E0E10;
  --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;                  /* 홈 히어로 비율 (높이=폭/비율, 화면 따라 가변). 모바일은 아래 미디어쿼리 height 고정이 우선 */
  --hero-nav-w:100px;                /* 히어로 좌우 끝 네비 hover 영역 가로 폭 */
  --hero-nav-dur:.45s;               /* 네비 등장(화살표 slide+fade · 스크림) 속도 */
  --hero-nav-shift:7px;              /* 화살표 slide-in 이동량 (바깥→안) */
  --hero-nav-scrim:.3;               /* 호버 스크림 농도 (가장자리 어둡게) */
  --hero-fade-dur:.8s;               /* 슬라이드 크로스페이드 시간 */
  --hero-slide-dur:.6s;              /* 디렉셔널 슬라이드(가로 이동) 시간 */
  --hero-slide-shift:48px;           /* 슬라이드 이동량 (들어오고/빠지는 가로 거리) */
  --line:#2A2A2C;
  --line-2:#3A3A40;
  --ink:#F2F2F5;       /* 본문 (오프화이트) */
  --muted:#8E8E93;
  --faint:#5B5B60;
  --accent:#FFFFFF;     /* 단일 악센트 = 화이트 */
  --accent-ink:#0E0E10; /* 악센트 위 텍스트(다크) */
  --status-ok:#4ade80;   /* 서버 상태 점: 정상 운영중 (녹색) */
  --status-warn:#facc15; /* 서버 상태 점: 운영중 아님 (노랑) */
  --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);  /* 이미지 ↔ 텍스트 열 간격 */
  --fc-body-px:20px;            /* 정보 카드 좌우 패딩 (상하는 --pad 27px 유지) */
  --fc-body-gap:20px;           /* 정보·메타 카드 2열 사이 간격 (column gap) */
  --fc-hero-ratio:16/9;       /* 스크린샷 이미지 비율 */
  --fc-banner-gap:var(--gap);  /* 배너 하단 거터(화면 끝까지 여백). 상단바 높이 --fc-banner-top 은 JS가 측정해 자동 주입 */
  --fc-frame-pad-y:0px;       /* 썸네일/스크린샷 박스 상하 패딩 */
  --fc-frame-pad-x:0px;       /* 스크린샷 박스 좌우 패딩 */
  --fc-img-radius:11px;       /* 대표 이미지 모서리 (정보 박스 --radius 와 동일) */
  --fc-app-icon:60px;         /* 상세 제목 좌측 앱 아이콘 크기 */
  --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 단어 상승 거리 */
  --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-hover-bg:#242428;  /* 카드 호버 배경 — surface 보다 살짝 밝게. 라이트는 theme-light 에서 override */
  --card-px:36px;          /* 카드 좌우 패딩 (홈·Related 공통 — 공통 --pad 와 분리, 이 토큰 하나로 두 카드 같이 조정) */
  --card-cursor-size:56px; /* 카드 호버 시 커서 따라다니는 앱 아이콘 크기 */

  /* 상단바 진입 모션 (좌우 펼침 + 로고 fade+rise + 프로필 팝인) */
  --tb-expand-from:.5;       /* 바 시작 가로 스케일 (1=안 늘어남, 작을수록 많이 늘어남) */
  --tb-expand-dur:1.2s;      /* 바 좌우(scaleX) 펼침 속도 */
  --tb-content-delay:.42s;   /* 로고/프로필 등장 시작 (바 펼침 도중) */
  --tb-pop-dur:.45s;         /* 프로필 사이즈 0→full 속도 */
  --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 */
  --theme-fade:.8s;          /* 라이트/다크 전환 디졸브(크로스페이드) 속도 */
  --tb-float-size:var(--bar-h); /* 우상단 플로팅 버튼 크기 = 상단바 높이(정사각형, 접힘 상태) */
  --tb-float-expanded:175px; /* 확장 한계(라벨 'PlusX Developer' 노출) — 내용폭에 가깝게 둬야 펼침이 끝까지 부드러움. width:max-content 라 실제 폭은 내용에 맞게 클램프 */

  /* chip / badge 토큰 — 칩 디자인은 여기서 일괄 조정 */
  --chip-py:9px;           /* 상하 패딩 */
  --chip-px:16px;             /* 좌우 패딩 */
  --chip-radius:999px;        /* 모서리 (알약형) */
  --chip-font:12px;         /* 글자 크기 */
  --chip-row-h:31px;                 /* 필터 칩 높이 */
  --chip-dur:.5s;                  /* 칩 색/테두리 전환 속도 */
  --chip-move-dur:1.1s;            /* 칩 접힘/펼침(중앙 이동) 전환 속도 — 느리게 부드럽게 */
  --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) 글자색 */
}

/* ---------- 라이트 모드 (프로필 우측 점 버튼으로 토글) ----------
   다크 전용 설계라 라이트는 색 토큰만 오버라이드 → 전체 UI 가 변수로 따라옴.
   악센트는 화이트→다크로 뒤집어 라이트 배경 위 CTA·칩 대비 유지. */
html.theme-light{
  --bg:#FFFFFF;          /* 배경 = 흰색 */
  --surface:#F2F2F5;     /* 바·카드 = 얕은 회색 */
  --surface-2:#EAEAEE;   /* 카드 호버: surface 보다 약간 어둡게 */
  --line:#E2E2E6;
  --line-2:#D2D2D8;
  --ink:#0E0E10;         /* 본문 (다크) */
  --muted:#6B6B72;
  --faint:#A2A2AA;
  --accent:#1C1C1E;      /* 악센트 = 다크 (라이트 위 CTA·점) — 순검정보다 살짝 밝게 */
  --accent-ink:#FFFFFF;  /* 악센트 위 텍스트 = 화이트 */
  --tb-dot-box-bg:rgba(0,0,0,.06); /* 점 버튼 호버 박스 (라이트) — 연한 다크 틴트 */
  --drop-shadow:0 5px 20px rgba(0,0,0,.12);  /* 다크와 같은 5px/20px, 흰 배경이라 투명도만 가볍게 */
  --topbar-bg:rgba(242,242,245,.4);      /* 상단바 반투명 (라이트) */
  --card-hover-bg:#EAEAEE;  /* 카드 호버 (라이트: surface 보다 약간 어둡게) */
}

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

*{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;
}
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;
  /* 글래스모피즘: 반투명 + 뒤 콘텐츠 블러 (스트로크 없음 — 면으로 구분) */
  background:var(--topbar-bg); border-radius:var(--radius);
  -webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
          backdrop-filter:blur(var(--topbar-blur)) saturate(1.3);
  box-shadow:var(--drop-shadow);
  transform-origin:center;
  animation:tbExpand var(--tb-expand-dur) var(--rv-ease) both;
}
/* 진입 모션: 바는 제자리에서 좌우(scaleX)로 펼쳐짐 */
@keyframes tbExpand{from{transform:scaleX(var(--tb-expand-from))} to{transform:scaleX(1)}}
/* 로고: .intro 와 동일한 단어별 rise (stagger) — 바 펼쳐진 뒤 등장. 단어 span 은 템플릿이 분할 */
.topbar .logo .logo-w{display:inline-block;
  animation:tbLogoRise var(--rv-dur) var(--rv-ease) calc(var(--tb-content-delay) + var(--i,0) * var(--rv-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,.topbar .tb-dot{transform-origin:center; animation:tbProfilePop var(--tb-pop-dur) var(--rv-ease) var(--tb-content-delay) backwards}
@keyframes tbProfilePop{from{transform:scale(0)} to{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){.topbar,.topbar .logo .logo-w,.topbar .profile,.topbar .tb-dot{animation:none}}
/* 내부 이동(px-entered)엔 진입 모션 비활성 — base.html 인라인 스크립트가 클래스 부여 */
html.px-entered .topbar,html.px-entered .topbar .logo .logo-w,html.px-entered .topbar .profile,html.px-entered .topbar .tb-dot{animation:none}
/* 단, 홈(.is-home)은 내부 이동(뒤로가기 등)으로 들어와도 매번 재생 */
html.px-entered .is-home .topbar{animation:tbExpand var(--tb-expand-dur) var(--rv-ease) both}
html.px-entered .is-home .topbar .logo .logo-w{animation:tbLogoRise var(--rv-dur) var(--rv-ease) calc(var(--tb-content-delay) + var(--i,0) * var(--rv-stagger)) both}
html.px-entered .is-home .topbar .profile,html.px-entered .is-home .topbar .tb-dot{animation:tbProfilePop var(--tb-pop-dur) var(--rv-ease) var(--tb-content-delay) backwards}
.logo{font-weight:500; font-size:14px; 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{width:18px; height:18px; display:block; transition:transform .2s ease}
.logo--back:hover .logo-back-arrow{transform:translateX(-2px)}
/* 화살표 라인 드로잉 (pathLength=1 정규화 → dashoffset 1→0). 중앙 프로젝트명 타이핑 완료 후 JS 가 .is-drawn 부여 → 시작 */
.logo-back-arrow path{stroke-dasharray:1; stroke-dashoffset:1}
.logo-back-arrow.is-drawn path{animation:backArrowDraw 3s var(--rv-ease) both}
@keyframes backArrowDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.logo-back-arrow path{stroke-dashoffset:0}}
.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 14px; color:var(--ink); font-size:13px;
  letter-spacing:-.02em; white-space:nowrap; line-height:1;
  border:1px solid var(--ink); border-radius:var(--chip-radius); background:transparent}
.logo-typed:empty{border-color:transparent; padding:0}  /* 타이핑 시작 전 빈 알약 숨김 */
.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; width:var(--topbar-dot); height:var(--topbar-dot);
  padding:0; border:0; background:transparent; cursor:pointer}
.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}  /* 계정 메뉴 드롭다운은 .topbar(sticky) 기준 absolute — .profile 은 positioned 아님 */
/* 아바타(클릭 트리거) — 일반 플로우 아이템 */
.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}
.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 0 100% 0 round var(--radius)); clip-path:inset(0 0 100% 0 round var(--radius));
  /* 닫힘 트랜지션(클래스 제거 시 적용): 천천히 사라짐 */
  transition:clip-path .4s ease, -webkit-clip-path .4s ease, opacity .35s ease, visibility .4s}
.topbar.actions-open ~ .tb-menu{opacity:1; visibility:visible;
  -webkit-clip-path:inset(0 round var(--radius)); clip-path:inset(0 round var(--radius));
  /* 열림 트랜지션(클래스 추가 시 적용): 펼침 .55s + 빠른 페이드인 */
  transition:clip-path .55s cubic-bezier(.2,.8,.2,1), -webkit-clip-path .55s cubic-bezier(.2,.8,.2,1), opacity .12s ease, visibility .55s}
/* 내용 순차 등장 — fade+rise(16px), 행 단위, .2s 간격으로 또렷하게. 이름 → Admin → Logout */
.tb-menu__profile,.tb-menu__item{opacity:0; transform:translateY(16px);
  transition:opacity .45s ease, transform .45s var(--rv-ease)}
.topbar.actions-open ~ .tb-menu .tb-menu__profile{opacity:1; transform:none; transition-delay:.12s}
.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 .2s, opacity .45s ease .32s, transform .45s var(--rv-ease) .32s}
.topbar.actions-open ~ .tb-menu .tb-menu__items .tb-menu__item:nth-child(2){transition:background .2s, opacity .45s ease .52s, transform .45s var(--rv-ease) .52s}
/* 모션 최소화: 펼침/스태거 끄고 즉시 표시 */
@media (prefers-reduced-motion:reduce){
  .tb-menu{transition:opacity .12s ease, visibility .12s; -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 .2s, opacity .45s ease, transform .45s var(--rv-ease)}  /* background=호버 + opacity/transform=등장 스태거 (둘 다 있어야 스태거 안 덮임) */
.tb-menu__item:hover{background:var(--tb-dot-box-bg)}  /* 글래스용 연한 틴트 (점 버튼 호버와 동일) */
.tb-menu__item iconify-icon{font-size:18px; color:var(--muted)}

/* 좌하단 플로팅 Developer 버튼 — 흰색 solid 박스 + 다크 아이콘, 드롭쉐도우로 떠보임.
   랜딩 인트로: 하단→상단 디졸브 + 우측 확장(라벨 'PlusX Developer') → 다시 축소(아이콘만). */
.tb-float{position:fixed; top:16px; right:16px; z-index:25;
  display:flex; align-items:center; gap:8px; padding:0 calc((var(--tb-float-size) - 16px) / 2); overflow:hidden; white-space:nowrap;  /* 좌우 패딩=(박스-아이콘16)/2 → 접힘 시 아이콘 정중앙(박스 크기 바뀌어도 자동), 확장 시 우측 라벨 노출 */
  width:max-content; max-width:var(--tb-float-size); height:var(--tb-float-size);  /* 내용 폭에 맞춤 + 접힘 땐 정사각으로 클립 → 펼쳐도 글자 뒤 빈 공간 없음 */
  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, max-width 1s cubic-bezier(.65,0,.35,1)}  /* ease-in-out: 시작·끝 모두 천천히 → 부드럽게 펼침 */
.tb-float iconify-icon{flex:0 0 auto; font-size:16px; transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tb-float__label{flex:0 0 auto; font-size:13px; font-weight:500; line-height:1; letter-spacing:0; color:inherit; text-transform:uppercase;
  opacity:0; transition:opacity .3s var(--rv-ease)}  /* 평소 숨김 — 호버 확장 시 페이드인 */
.tb-float:hover iconify-icon{transform:scale(1.12)}  /* 살짝 확대 (code 아이콘이라 회전 대신) */
.tb-float:hover{max-width:var(--tb-float-expanded)}  /* 호버 시 펼쳐 라벨 노출 */
.tb-float:hover .tb-float__label{opacity:1}
.tb-float:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.tb-float,.tb-float__label{transition: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}

.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); border-radius:var(--radius); overflow:hidden;
  background:#15151a;
  display:flex; align-items:flex-end;
}
.hero.is-link{cursor:pointer}  /* 프로젝트 배너: 클릭 시 상세로 이동 */
/* 슬라이드 전환: 2레이어 디렉셔널 슬라이드 + 크로스페이드. 위치/투명도는 JS 가 인라인으로 제어 */
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  opacity:0;
  transition:opacity var(--hero-fade-dur) var(--rv-ease), transform var(--hero-slide-dur) var(--rv-ease)}
.hero__img.is-active{opacity:1; transform:translateX(0)}  /* 초기(서버 렌더) 상태 — 이후 JS 가 갱신 */
@media (prefers-reduced-motion:reduce){
  .hero__img{transition:opacity var(--hero-fade-dur) linear}  /* 슬라이드 비활성, 페이드만 */
}
/* 텍스트 가독성용 어두운 스크림 (좌측 + 하단) */
.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}
.hero .eyebrow{display:block; margin:0 0 8px; font-size:12px; color:#fff; font-weight:500; letter-spacing:0; text-transform:uppercase; opacity:.7}  /* 이미지 위라 라이트에서도 화이트 (슬라이드별 NEWS/NEW) */
.hero h1{margin:0; font-size:35px; 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, 전체 높이.
   호버 시 ① 스크림이 가장자리에서 안으로 닦이며 ② 화살표가 바깥→안으로 slide-in + fade (동시).
   화살표 slide 부호는 prev/next 각각 --dir 로 제어, 스크림 먼저 약간 일찍 시작. */
.hero-nav{position:absolute; top:0; bottom:0; width:var(--hero-nav-w); z-index:3; border:0; cursor:pointer;
  background:transparent; display:flex; align-items:center; color:var(--ink); font-size:30px}
/* 스크림 레이어(::before): 안쪽에 있다가 호버 시 바깥쪽으로 이동 + fade */
.hero-nav::before{content:""; position:absolute; inset:0; opacity:0;
  transform:translateX(calc(var(--dir) * -1 * var(--hero-nav-shift)));
  transition:opacity var(--hero-nav-dur) var(--rv-ease), transform var(--hero-nav-dur) var(--rv-ease)}
.hero-nav--prev::before{background:linear-gradient(90deg, rgba(0,0,0,var(--hero-nav-scrim)), transparent)}
.hero-nav--next::before{background:linear-gradient(270deg, rgba(0,0,0,var(--hero-nav-scrim)), transparent)}
.hero-nav:hover::before{opacity:1; transform:translateX(0)}
/* 화살표: 안쪽 → 바깥쪽 slide-in + fade (스크림보다 살짝 뒤 .05s) */
.hero-nav iconify-icon{position:relative; opacity:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));
  transform:translateX(calc(var(--dir) * -1 * var(--hero-nav-shift)));
  transition:opacity var(--hero-nav-dur) var(--rv-ease) .05s,
             transform var(--hero-nav-dur) var(--rv-ease) .05s}
.hero-nav:hover iconify-icon{opacity:1; transform:translateX(0)}
.hero-nav:active iconify-icon{transform:translateX(calc(var(--dir) * 4px)); transition-duration:.12s}  /* 클릭: 그 방향 nudge */
.hero-nav--prev{--dir:-1; left:0; justify-content:flex-start; padding-left:18px}
.hero-nav--next{--dir:1; right:0; justify-content:flex-end; padding-right:18px}
@media (prefers-reduced-motion:reduce){
  .hero-nav iconify-icon{transition:opacity var(--hero-nav-dur) linear; transform:none}
  .hero-nav:hover iconify-icon,.hero-nav:active iconify-icon{transform:none}
}

/* ---------- intro ---------- */
.intro{text-align:center; color:var(--ink); font-size:20px; line-height:1.5; letter-spacing:-.02em; text-transform:capitalize; margin:150px auto 22px; max-width:none; white-space:nowrap}
.intro-statement{text-align:center; margin:0 auto 150px; font-size:20px; 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 공용 (각 단어 fade+rise, --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(--i,0) * var(--rv-stagger)); will-change:opacity,transform}
.intro.rv-in .rv-w,.intro-statement.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{opacity:1; transform:none; transition:none}
}

/* ---------- browse head ---------- */
.browsehead{display:flex; align-items:center; justify-content:center; gap:14px; margin:27px 0 16px; flex-wrap:wrap}
.seg{display:inline-flex; background:var(--surface); border:0; border-radius:var(--radius); padding:3px}
.seg button{
  border:0; background:none; color:var(--muted); font:inherit; font-size:12px; font-weight:500;
  padding:6px 12px; border-radius:7px; cursor:pointer; display:flex; align-items:center; gap:5px;
  transition:background .5s cubic-bezier(.2,.8,.2,1), color .5s cubic-bezier(.2,.8,.2,1);
}
.seg button iconify-icon{font-size:14px}
.seg button.on{background:var(--surface-2); color:var(--ink)}
.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) — 선택 시 비활성 칩의 max-width·margin 을 0 으로 트랜지션해 부드럽게 접힘(이웃이 줄며 선택 칩이 중앙으로 슬라이드) */

/* 필터 칩: 각 알약마다 라벨 항상 노출 (점↔알약 호버 모핑 제거).
   idle = 고스트(테두리·투명) · 선택(is-active) = 화이트 채움. 반응 칩(.fc-rx .rx)과 동일 패턴. */
.chip{
  display:inline-flex; align-items:center; margin:0 4px; max-width:180px; overflow:hidden;
  padding:0; border:0; background:transparent;
  font:inherit; font-size:var(--chip-font); cursor:pointer;
  transition:max-width var(--chip-move-dur) var(--chip-ease), opacity var(--chip-move-dur) var(--chip-ease), margin var(--chip-move-dur) var(--chip-ease);
}
/* 상세 상단바 프로젝트명 알약(.logo-typed)과 동일 디자인: 흰색(--ink) 텍스트+테두리, 투명, 13px, padding 6px 14px */
.chip__pill{
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; line-height:1;
  padding:6px 14px; border-radius:var(--chip-radius);
  color:var(--ink); background:transparent; border:1px solid var(--ink);
  font-size:13px; 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);
}
/* 호버·선택 모두: 흰색 배경으로 점점 채워지고 텍스트는 어두워짐 (--chip-dur 0.5s 트랜지션) */
.chip:hover .chip__pill,.chip.is-active .chip__pill{background:var(--chip-on-bg); border-color:var(--chip-on-bg); color:var(--chip-on-fg)}
/* 클릭(활성) 시: 비활성 칩을 max-width·opacity·margin 0 으로 부드럽게 접음 → 선택 칩만 중앙에 남음. 재클릭하면 펼쳐지며 복귀 */
.chips.has-active .chip:not(.is-active){max-width:0; opacity:0; margin:0}

/* ---------- grid / cards ---------- */
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); padding-bottom:54px}
.grid.gallery{grid-template-columns:repeat(2,1fr); gap:var(--gap)}
.card{
  background:var(--surface); border:0; border-radius:var(--radius); overflow:hidden;
  cursor:pointer;
  padding:90px var(--card-px);   /* 카드 여백: 상하 90 / 좌우 --card-px */
  /* 스크롤 리빌 시작 상태: 아래로 내려가 숨김. --ci(열 인덱스) 로 같은 행 좌→우 순차 */
  opacity:0; transform:translateY(var(--card-rv-rise));
  transition:background .6s 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 0 12px; border-radius:4px; overflow:hidden}
.grid.gallery .thumb{aspect-ratio:16/9}
/* 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)}
.thumb::after{content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}
/* 호버: 카드 면만 한 단계 밝아짐 (썸네일 이미지는 그대로 — 다크=밝게 / 라이트=약간 어둡게) */
.card:hover{background:var(--card-hover-bg)}
/* [비활성화] 카드 호버 커서 — 커서 따라다니는 앱 아이콘 (주석처리)
.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 .6s cubic-bezier(.2,.8,.2,1)}
  .thumb > img{transform:none; transition:none}
}
/* 썸네일 없음/로드 실패 시 .thumb{background:#222} 가 폴백 (위 366줄) — 다크 테마와 일관 */

.card .body{padding:0; display:flex; align-items:flex-start; gap:9px}
.card .body .t{flex:1; min-width:0}
.card .name{font-weight:500; font-size:14px; letter-spacing:-.02em}
.card .sub{color:var(--muted); font-size:11px; margin-top:3px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.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:15px}
.grid.gallery .card .sub,.grid.gallery .tag{display:none}

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

.footer{display:flex; align-items:center; justify-content:space-between; gap:43px;
  padding:140px 0 50px; margin:0;
  color:var(--faint); font-size:12px; text-align:left}
.footer__logo{height:45px; width:auto; display:block; flex:0 0 auto}
.footer__copy{margin:0; font-size:13px; color:var(--faint)}
.footer__social{display:flex; gap:20px; margin-top:16px}
.fsoc{position:relative; color:var(--muted); font-size:13px; transition:color .34s cubic-bezier(.2,.8,.2,1)}
.fsoc::after{content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.fsoc:hover{color:var(--ink)}
.fsoc:hover::after{transform:scaleX(1)}

/* ---------- 상세 페이지 (앱 상세) ---------- */
.detail-wrap{margin:0; display:flex; align-items:flex-start; gap:var(--gap)}  /* 화면 꽉 참 — 좌우 11px는 .wrap 패딩이 담당 */
/* 1열 스택: 배너 → 정보 카드 → 이미지 카드 (order 로 정보 위 / 이미지 아래) */
.detail{flex:1; min-width:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:start;
  gap:var(--detail-col-gap); margin-bottom:72px;
  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{order:2; display:flex; flex-direction:column; gap:var(--gap); min-width:0; width:50%; margin-left:auto}  /* 스크린샷 1열(세로 나열) — 우측 절반에만 배치(좌측 비움) */
.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-bottom:calc(var(--gap) * 2)}  /* height: 측정한 상단바 아래 ~ 화면 하단 거터까지(잘림 없음). margin-bottom: 다음 카드를 fold 밑으로(스크롤하면 보임) */
.fc-banner img{height:100%; aspect-ratio:auto}
/* 스크린샷만: 홈 카드처럼 surface 박스 안에 좌우상하 패딩으로 프레임 */
.fc-shot{background:var(--surface-2); border-radius:var(--radius); padding:var(--fc-frame-pad-y) var(--fc-frame-pad-x)}
/* 스크린샷 이미지는 비율 고정 안 함 — 원본 비율대로 높이 자동(잘림 없음) */
.fc-shot img{aspect-ratio:auto; height:auto; object-fit:fill}
/* Related Apps — 이미지 영역 하단 */
.fc-related{order:5; margin-top:200px}  /* .detail 직속: 버전 카드(4) 다음, 맨 아래 */
.fc-related__title{margin:0 0 16px; font-size:20px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.fc-related__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.fc-related__card{display:block; background:var(--surface); border-radius:var(--radius); overflow:hidden;
  padding:90px var(--card-px); transition:background .6s cubic-bezier(.2,.8,.2,1)}  /* 홈 카드처럼 surface 박스로 감쌈 (좌우 --card-px 공유) */
.fc-related__card:hover{background:var(--card-hover-bg)}
.fc-related__thumb{aspect-ratio:16/10; margin:0 0 12px; border-radius:4px; overflow:hidden; background:#222; position:relative}
.fc-related__thumb > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}  /* 썸네일 이미지 (홈 .thumb > img 와 동일) */
.fc-related__name{font-size:14px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.fc-body{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열 (1:1 동일 너비): 좌=비움(아이콘·제목·액션은 하단바로 이동) · 우=설명·메타·반응 */
/* 반응 카드: .detail 직속(스크린샷 뒤·Next Projects 앞). 정보 카드(.fc-body)의 2열 그리드를 그대로 상속 — 좌=반응 · 우=메타+버전 (동일 너비 1:1) */
.fc-body--dup{order:3}  /* display:grid·2열·gap(--pad)·padding 은 .fc-body 에서 상속 */
.fc-body--ver{order:4}  /* 버전 히스토리 — Details 와 별도 카드 (메타 다음) */
.fc-dup-info{grid-column:2; min-width:0; display:flex; flex-direction:column; gap:18px}  /* 우측 열(좌측 칸은 비움): Owner~Available on + 버전 */
.fc-dup-info .fc-meta{margin-top:0}
.fc-dup-info .fc-versions{margin-top:0}
.fc-body__right{min-width:0}
.fc-body__right .fc-desc{margin-top: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)}
.fc-title{flex:1}
.fc-title h2{margin:0; font-size:32px; 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:14px; 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:17px}
.fc-desc{color:var(--ink); font-size:14px; line-height:1.65; 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(--chip-fg); background:transparent; border:1px solid var(--chip-fg);  /* 테두리=아이콘/글자색(--chip-fg) 동일 */
  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:16px}
.fc-rx .rx b{color:var(--ink); font-weight:500}
.fc-rx .rx:hover{color:var(--chip-fg-hover); border-color:var(--line-2)}
.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; padding-bottom:14px; border-bottom:1px solid var(--muted); 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:4px}
.fc-version{padding:0; min-height:var(--fc-owner-av); display:flex; justify-content:space-between; align-items:flex-start; gap:18px; line-height:1.6}  /* 좌: 버전명+날짜 / 우: 내용(note) — 상단 정렬. line-height 를 note(1.6)와 맞춰 첫 줄 글자 정렬 */
.fc-version__row{display:flex; align-items:baseline; justify-content:flex-start; gap:12px}
.fc-version__name{font-size:14px; font-weight:500; color:var(--ink)}
.fc-version__date{font-size:14px; color:var(--muted); white-space:nowrap}
.fc-version__note{margin:0; max-width:450px; font-size:14px; line-height:1.6; color:var(--ink); text-align:right}  /* 우측 정렬 (줄바꿈된 줄도 우측). 너비 제한. 색상=메타 값과 동일 --ink */
.fc-rx .rx:active{transform:scale(.95)}
.fc-meta{display:flex; flex-direction:column; gap:4px; color:var(--muted); font-size:14px; margin-top:0}  /* 가로 나열: 항목별 한 줄(라벨 좌/값 우), 세로로 스택. 위 여백은 Details 제목이 담당 */
.fc-meta > div{display:flex; flex-direction:row; justify-content:space-between; align-items:center; gap:18px; min-height:var(--fc-owner-av)}  /* 한 항목: 라벨 왼쪽 / 값 오른쪽. 높이는 Owner(아바타) 기준 고정 — hug 대신 모든 행 동일 */
.fc-meta b{color:var(--ink); font-weight:500; font-size:14px; text-align:right}
.fc-meta .fc-owner{display:inline-flex; align-items:center; gap:7px}  /* Owner 값: 프로필 이미지 + 이름 가로 정렬 */
.fc-owner-av{flex:0 0 auto; width:var(--fc-owner-av); height:var(--fc-owner-av); border-radius:50%; object-fit:cover; background:var(--surface)}
.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:14px; color:var(--ink)}
.fc-dev iconify-icon{font-size:14px; flex:0 0 auto}
.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)}
  /* 좁은 화면: 한 줄 강제(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.gallery{grid-template-columns:1fr}
  .chips{margin-left:0; width:100%}
  .fc-body{grid-template-columns:1fr}  /* 정보 카드 내부 2열 → 1열 스택 (아이콘·제목·Open → 설명·메타·반응) */
  .fc-body__right .fc-desc{margin-top:16px}  /* 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}