/* rimikimi studios — app hub v2.1 "모던" (2026-10-08, 오너 지시 "폰트·아이콘 싹 다 조사해서 모던한 페이지로") 무채색 UI + 색은 사진/로고/앱 아이콘에서만. 다크 우선. 20+페이지가 이 한 파일을 캐시 공유한다. v2.1에서 바뀐 것: Geist Mono 폐기(숫자는 tabular-nums), 타입 스케일 토큰화, 한국어 페이지는 Pretendard 우선, 앱 아이콘 스쿼클 1종, UI 아이콘 Lucide 1세트(stroke 1.5), 카드 경량화(모바일은 헤어라인 리스트), 통일 스토어 필, 56px 1행 헤더(테두리 없는 아이콘 토글 + 30px 세그먼트), 상세 팩트 그리드. */ /* ── 1. 토큰 (다크 기본) ─────────────────────────────────────────────── */ :root{ --bg:#0A0A0B; --surface:#131315; --surface-2:#1B1B1E; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --ink:#F4F4F5; --muted:#A1A1AA; --faint:#8B8B92; /* faint 실측 조정(§대비) */ --live:#22C55E; --review:#F59E0B; --soon:#8E8E93; --spot: 255,255,255; /* 스포트라이트 RGB — 라이트에서 0,0,0 로 교체 */ /* 폰트 — 역할은 '스크립트'가 아니라 '페이지 언어'로 가른다(2026-10-08): EN 페이지 = Geist(라틴 전용, 한글 글리프는 자동으로 Pretendard 폴백), KO 페이지 = Pretendard Variable 우선(한글과 설계가 맞는 라틴/숫자까지 한 벌 — 혼합 스크립트 베이스라인 불일치 제거). "Geist Fallback"은 반드시 시스템 폰트보다 먼저 와야 메트릭 보정(size-adjust)이 걸린다. 모노 폰트 없음. */ --sans:"Geist","Geist Fallback","Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,"Segoe UI",sans-serif; --sans-ko:"Pretendard Variable",Pretendard,"Geist","Geist Fallback",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",system-ui,"Segoe UI",sans-serif; /* 타입 스케일 — 크기별 트래킹(큰 글자 음수, 라벨 양수) · 행간(큰 글자 타이트) */ --t-display:clamp(42px,7.6vw,96px); --t-h1:clamp(30px,4.6vw,46px); --t-h2:clamp(20px,2.4vw,24px); --t-title:16px; --t-body:15px; --t-small:13.5px; --t-micro:12px; --t-label:11.5px; --tr-display:-0.04em; --tr-h1:-0.03em; --tr-h2:-0.02em; --tr-title:-0.012em; --tr-label:.06em; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --inset:clamp(16px, 4vw, 40px); /* 페이지 공통 좌우 인셋(모바일 16px 거터) */ --r-card:14px; --r-full:999px; --r-hero:20px; --r-icon:22.5%; /* 앱 아이콘 스쿼클(애플 아이콘 코너 비율 ≈ 22.37%) — 모든 아이콘이 이 마스크 1종 + 헤어라인 */ --nav-h:56px; --ease-decel:cubic-bezier(0.05,0.7,0.1,1.0); --ease-accel:cubic-bezier(0.3,0,0.8,0.15); --ease-std:cubic-bezier(0.2,0,0,1.0); --ease-reveal:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.23,1,.32,1); --dur-enter:400ms; --dur-exit:200ms; --dur-onscreen:500ms; --dur-micro:200ms; } @media (prefers-color-scheme:light){ :root{ --bg:#FFFFFF; --surface:#F7F7F8; --surface-2:#EFEFF1; --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.16); --ink:#0A0A0B; --muted:#52525B; --faint:#5F5F66; --spot:0,0,0; /* 라이트에서 비텍스트 대비 3:1 확보용 어두운 상태색(실측 4.68~5.02:1) */ --live:#15803D; --review:#B45309; } } :root[data-theme="dark"]{ --bg:#0A0A0B; --surface:#131315; --surface-2:#1B1B1E; --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.16); --ink:#F4F4F5; --muted:#A1A1AA; --faint:#8B8B92; --spot:255,255,255; --live:#22C55E; --review:#F59E0B; } :root[data-theme="light"]{ --bg:#FFFFFF; --surface:#F7F7F8; --surface-2:#EFEFF1; --line:rgba(0,0,0,.08); --line-strong:rgba(0,0,0,.16); --ink:#0A0A0B; --muted:#52525B; --faint:#5F5F66; --spot:0,0,0; --live:#15803D; --review:#B45309; } @view-transition{ navigation:auto; } /* 폰트 스왑 시 리플로우 방지용 metric-compatible 폴백(대략 Geist/Pretendard 배수에 맞춘 size-adjust) */ @font-face{ font-family:"Geist Fallback"; src:local("Arial"); size-adjust:104%; ascent-override:92%; descent-override:24%; line-gap-override:0%; } /* ── 2. 리셋 · 베이스 ────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-behavior:smooth} #apps-section{scroll-margin-top:calc(var(--nav-h) + 40px)} body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--t-body); line-height:1.55;letter-spacing:-0.004em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden;min-width:0;font-variant-numeric:tabular-nums;transition:background .24s var(--ease-std),color .24s var(--ease-std)} html[lang="ko"] body{font-family:var(--sans-ko);letter-spacing:0;word-break:keep-all;overflow-wrap:break-word} .wrap{max-width:1240px;margin:0 auto;padding:0 var(--inset);min-width:0} a{color:inherit;text-decoration:none} img{max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{-webkit-tap-highlight-color:transparent} h1,h2{text-wrap:balance;font-weight:600} p{text-wrap:pretty} .label{font-size:var(--t-label);font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--faint)} .num,.tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link{position:absolute;left:var(--s4);top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:var(--r-full);z-index:200;transition:top .2s var(--ease-std)} .skip-link:focus{top:var(--s4)} /* UI 아이콘 1세트 — Lucide 24 그리드, stroke 1.5, currentColor. 가 페이지 스프라이트를 참조 */ .ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em;fill:none;stroke:currentColor; stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none} /* 앱 아이콘 — 스쿼클 1종 + 1px 헤어라인(테두리는 라운드를 따라가므로 clip-path 대신 border-radius) */ .icon,.icon-lg{display:block;object-fit:cover;border-radius:var(--r-icon);border:1px solid var(--line);background:var(--surface-2)} @supports (corner-shape:squircle){ .icon,.icon-lg{corner-shape:squircle;border-radius:30%} } html[data-lang="en"] .i18n-ko{display:none!important} html[data-lang="ko"] .i18n-en{display:none!important} @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} } .js-reveal .reveal{opacity:0;transform:translateY(12px)} .js-reveal .reveal.in{opacity:1;transform:translateY(0);transition:opacity var(--dur-onscreen) var(--ease-reveal),transform var(--dur-onscreen) var(--ease-reveal)} .js-reveal .mask-line .mask-inner{transform:translateY(110%)} .js-reveal .mask-line.in .mask-inner{transform:translateY(0);transition:transform 700ms var(--ease-reveal)} .mask-line{display:block;overflow:hidden} .mask-inner{display:block;will-change:transform} /* ── 3. 네비 (56px 고정 1행 — 모바일 동일) ───────────────────────────── */ header.site{position:sticky;top:0;z-index:30;height:var(--nav-h);display:flex;align-items:center; background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4); border-bottom:1px solid transparent;transition:border-color .2s var(--ease-std)} header.site.scrolled{border-bottom-color:var(--line)} .head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;height:100%;padding:0 var(--inset)} .brand{display:flex;align-items:center;gap:20px;min-width:0} .wordmark{display:flex;align-items:center;gap:7px;flex:none} .logo{height:19px;width:auto;display:block} .logo-dark{display:none} :root[data-theme="dark"] .logo-light{display:none} :root[data-theme="dark"] .logo-dark{display:block} :root[data-theme="light"] .logo-light{display:block} :root[data-theme="light"] .logo-dark{display:none} @media (prefers-color-scheme:dark){ .logo-light{display:none} .logo-dark{display:block} } .studios{font-weight:500;letter-spacing:-0.01em;font-size:14px;color:var(--muted)} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{font-size:14px;font-weight:500;color:var(--muted);padding:7px 9px;border-radius:8px;transition:color .15s var(--ease-std),background .15s var(--ease-std)} .nav-links a[aria-current]{color:var(--ink)} @media(hover:hover){ .nav-links a:hover{color:var(--ink);background:var(--surface-2)} } .head-right{display:flex;align-items:center;gap:2px;flex:none} /* 테마 토글 — 테두리 없는 아이콘 버튼(히트 44, 시각은 아이콘 18px) */ .theme-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:var(--r-full); background:transparent;cursor:pointer;color:var(--muted);flex:none;transition:color .15s var(--ease-std),background .15s var(--ease-std),transform .16s var(--ease-out)} .theme-toggle .ico{width:18px;height:18px} @media(hover:hover){ .theme-toggle:hover{color:var(--ink);background:var(--surface-2)} } .theme-toggle:active{transform:scale(.94)} .theme-toggle .icon-sun{display:none} .theme-toggle .icon-moon{display:block} :root[data-theme="dark"] .theme-toggle .icon-sun{display:block} :root[data-theme="dark"] .theme-toggle .icon-moon{display:none} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{display:block} :root:not([data-theme="light"]) .theme-toggle .icon-moon{display:none} } /* EN/KO 세그먼트 — 시각 30px(헤어라인 박스는 ::before), 버튼 히트 44px */ .lang-toggle{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 2px} .lang-toggle::before{content:"";position:absolute;inset:7px 0;border:1px solid var(--line);border-radius:var(--r-full);pointer-events:none} .lang-toggle button{position:relative;z-index:1;height:44px;min-width:40px;padding:0 10px;border:0;background:transparent;font-size:12px; font-weight:500;letter-spacing:.02em;color:var(--muted);border-radius:var(--r-full);cursor:pointer;transition:color .2s var(--ease-std)} .lang-toggle .seg-bg{position:absolute;top:9px;left:0;height:26px;border-radius:var(--r-full); background:var(--ink);transition:transform var(--dur-onscreen) var(--ease-std),width var(--dur-onscreen) var(--ease-std);z-index:0} html[data-lang="en"] .lang-toggle [data-lang-btn="en"], html[data-lang="ko"] .lang-toggle [data-lang-btn="ko"]{color:var(--bg)} /* JS 없이도 활성 언어가 보이게 — seg-bg에 인라인 style이 없으면(=JS 미실행) 버튼 자체에 잉크 배경 */ .lang-toggle .seg-bg:not([style])~button[aria-pressed="true"]{background:var(--ink);height:26px;color:var(--bg)} @media(max-width:479px){ .studios{display:none} .brand{gap:var(--s3)} } @media(max-width:430px){ .nav-contact{display:none} /* FAB가 같은 기능을 상시 제공(오너 지시 2026-09-08) — 1행 예산 확보 */ .nav-links a{padding:7px 7px} } @media(max-width:370px){ .logo{height:17px} .brand{gap:var(--s2)} .nav-links a{font-size:13px;padding:7px 6px} .lang-toggle button{min-width:36px;padding:0 8px} } /* ── 4. 히어로 ───────────────────────────────────────────────────────── */ /* 그리드 2행(auto 카피 / minmax(0,1fr) 월): 월은 카피 "다음"에 정상 문서흐름으로 시작하고, 짧은 뷰포트에선 월 자신의 overflow:hidden이 아래쪽을 자른다(위로 침범하는 경로 없음). CLS: 월 내부 치수는 CSS 고정. */ .hero{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:100svh;overflow:hidden} .hero-copy{position:relative;z-index:2;padding:clamp(40px,9vh,96px) var(--inset) var(--s6)} .eyebrow{font-size:var(--t-label);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)} .hero h1{font-size:var(--t-display);letter-spacing:var(--tr-display);line-height:1.02;margin-top:var(--s4);word-break:keep-all} .hero p.sub{margin-top:var(--s4);word-break:keep-all;font-size:clamp(15px,2vw,18px);color:var(--muted);max-width:52ch;line-height:1.55} .hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s6)} .btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;padding:0 18px;border-radius:var(--r-full); height:44px;transition:transform 160ms var(--ease-out),background var(--dur-micro) var(--ease-std),border-color var(--dur-micro) var(--ease-std)} .btn .ico{width:16px;height:16px;margin-right:-2px} .btn:active{transform:scale(.97)} .btn-primary{background:var(--ink);color:var(--bg)} @media(hover:hover){ .btn-primary:hover{transform:translateY(-1px)} .btn-primary:hover:active{transform:scale(.97)} } .btn-ghost{border:1px solid var(--line);color:var(--ink)} @media(hover:hover){ .btn-ghost:hover{border-color:var(--line-strong);background:var(--surface)} } /* 마키 — 바깥(.marquee)은 overflow:hidden + 위쪽 마스크 페이드, 회전/스케일은 안쪽(.marquee-inner)에만. 행 위치 이동은 hub.js가 rAF로 translateX만 보간(transform 외 속성 건드리지 않음). */ .marquee{position:relative;overflow:hidden;pointer-events:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 10%, #000 100%)} .marquee-inner{position:absolute;left:0;right:0;top:0;height:calc(3 * 213px + 2 * var(--s3)); display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s3); transform:rotate(-4deg) scale(1.08);transform-origin:center;pointer-events:none} .marquee-row{display:flex;gap:var(--s3);width:max-content;will-change:transform;pointer-events:auto} .marquee-row .mq-tile{flex:none;width:160px;height:213px;border-radius:var(--r-hero);overflow:hidden;border:1px solid var(--line); background:var(--surface);cursor:zoom-in;transition:transform 200ms var(--ease-std)} .marquee-row .mq-tile img{width:100%;height:100%;object-fit:cover;display:block} .marquee-row.slow .mq-tile{transform:scale(1.04)} @media(max-width:720px){ .marquee-row .mq-tile{width:120px;height:160px} .marquee-inner{height:calc(3 * 160px + 2 * var(--s3))} } @media(prefers-reduced-motion:reduce){ .hero{min-height:0;overflow:visible} .marquee{overflow:visible;-webkit-mask-image:none;mask-image:none} .marquee-inner{position:static;height:auto;transform:none; display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--s3);margin-top:var(--s6)} .marquee-row{width:auto;display:contents} } /* ── 5. 통계 스트립 ──────────────────────────────────────────────────── */ .stats{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat{flex:1;padding:var(--s5) var(--s4);border-left:1px solid var(--line);text-align:left;min-width:0} .stat:first-child{border-left:0;padding-left:0} .stat .n{font-size:clamp(26px,3.6vw,40px);font-weight:600;letter-spacing:-0.03em;line-height:1;display:block;min-width:2ch;font-variant-numeric:tabular-nums} .stat .l{margin-top:8px;font-size:var(--t-micro);color:var(--faint);white-space:nowrap} .stat.linked a{display:block} @media(hover:hover){ .stat.linked:hover .n{color:var(--muted)} } @media(max-width:430px){ .stat{padding:var(--s4) var(--s2)} .stat .l{font-size:11.5px} } /* ── 6. 섹션 헤드 · 세그먼트 필터 · 검색 ────────────────────────────── */ .section-head-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap; padding:var(--s7) 0 var(--s4);position:sticky;top:var(--nav-h);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .section-head-row h2{font-size:var(--t-h2);letter-spacing:var(--tr-h2)} .controls-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .filters{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-full);padding:2px;position:relative} .filters [role="tab"]{position:relative;z-index:1;border:0;background:transparent;font-size:13px;font-weight:500;color:var(--muted); padding:0 12px;height:32px;display:inline-flex;align-items:center;border-radius:var(--r-full);cursor:pointer;white-space:nowrap;transition:color var(--dur-micro) var(--ease-std)} .filters [role="tab"]::before{content:"";position:absolute;inset:-6px 0} /* 히트 44px */ .filters [role="tab"][aria-selected="true"]{color:var(--bg)} .filters .pill-bg{position:absolute;top:2px;left:0;height:32px;border-radius:var(--r-full);background:var(--ink); transition:transform var(--dur-onscreen) var(--ease-std),width var(--dur-onscreen) var(--ease-std);z-index:0} .filters .pill-bg:not([style])~[role="tab"][aria-selected="true"]{background:var(--ink)} /* JS 없을 때 */ .search-wrap{display:flex;align-items:center;gap:10px;min-width:0} .search-wrap label{position:absolute;width:1px;height:1px;overflow:hidden} .search-field{position:relative;display:inline-flex;align-items:center} .search-field .ico{position:absolute;left:11px;width:15px;height:15px;color:var(--faint)} .search-field input[type="search"]{width:min(200px,42vw);min-width:132px;height:36px;border:1px solid var(--line);background:transparent; border-radius:var(--r-full);padding:0 12px 0 32px;font-size:13px;color:var(--ink);transition:border-color .15s var(--ease-std)} .search-field input[type="search"]::placeholder{color:var(--faint)} .search-field input[type="search"]:focus-visible{outline:none;border-color:var(--ink)} .results-count{font-size:var(--t-micro);color:var(--faint);white-space:nowrap} /* ── 7. 그리드 · 카드 · 상태 · 그룹 라벨 ────────────────────────────── */ .group-label{grid-column:1/-1;font-size:var(--t-label);font-weight:500;letter-spacing:var(--tr-label);text-transform:uppercase; color:var(--faint);padding:var(--s5) 0 var(--s2);border-top:1px solid var(--line);margin-top:var(--s3)} .group-label:first-of-type{border-top:0;margin-top:0} .bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:var(--s4)} @media(max-width:1024px){ .bento{grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:820px){ .bento{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:560px){ .bento{grid-template-columns:1fr;gap:0} } .card{position:relative;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);overflow:hidden; transition:border-color 200ms var(--ease-std),transform 200ms var(--ease-std)} .card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 200ms var(--ease-std); background:radial-gradient(240px at var(--mx,50%) var(--my,50%),rgba(var(--spot),.06),transparent 70%)} @media(prefers-color-scheme:light){ .card::before{background:radial-gradient(240px at var(--mx,50%) var(--my,50%),rgba(var(--spot),.04),transparent 70%)} } :root[data-theme="light"] .card::before{background:radial-gradient(240px at var(--mx,50%) var(--my,50%),rgba(var(--spot),.04),transparent 70%)} @media(hover:hover) and (pointer:fine){ .card:hover{border-color:var(--line-strong);transform:translateY(-2px)} .card:hover::before{opacity:1} } .card.hide{display:none} .card-head{display:flex;align-items:center;gap:var(--s3);min-width:0} .card .icon{width:48px;height:48px;flex:none} .card .id{min-width:0;flex:1} .card .name{font-size:var(--t-title);font-weight:600;letter-spacing:var(--tr-title);line-height:1.2;display:block; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .card .sub{font-size:var(--t-micro);color:var(--faint);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 카드 이름은 실제 (무JS 폴백) — ::after로 카드 전체를 클릭 영역으로(스트레치드 링크) */ a.card-link{color:inherit;text-decoration:none} a.card-link::after{content:"";position:absolute;inset:0;z-index:1} a.card-link:focus-visible{outline:none} .card:has(a.card-link:focus-visible){outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-card)} .card-go{width:16px;height:16px;color:var(--faint);flex:none} /* 상세 "More apps" 카드 우측 화살표 */ /* 펼침 버튼 — 32px 고스트(히트 44), 셰브런 회전으로 상태 표시 */ .card-expand{position:relative;z-index:2;flex:none;width:32px;height:32px;margin-right:-6px;border:0;border-radius:var(--r-full); background:transparent;color:var(--faint);display:flex;align-items:center;justify-content:center;cursor:pointer; transition:color 150ms var(--ease-std),background 150ms var(--ease-std),transform 160ms var(--ease-out)} .card-expand::before{content:"";position:absolute;inset:-6px} .card-expand .ico{width:16px;height:16px;transition:transform 200ms var(--ease-std)} @media(hover:hover){ .card-expand:hover{color:var(--ink);background:var(--surface-2)} } .card-expand:active{transform:scale(.92)} .card-expand[aria-expanded="true"] .ico{transform:rotate(180deg)} .card .desc{font-size:var(--t-small);color:var(--muted);line-height:1.5; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1} .card-foot{display:flex;flex-direction:column;gap:10px;margin-top:auto} .card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-micro);color:var(--faint);min-height:18px} .updated::before{content:"·";margin-right:8px;color:var(--faint)} .status-pill{display:inline-flex;width:fit-content;align-items:center;gap:6px;font-size:var(--t-micro);font-weight:500;color:var(--muted)} .status-pill .dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--soon)} .status-pill[data-status="live"] .dot{background:var(--live)} .status-pill[data-status="review"] .dot{background:var(--review)} .status-pill[data-status="soon"] .dot{background:var(--soon)} /* 통일 스토어 필 — 카드·확장 패널·갤러리 CTA 공용("App Store" / "Google Play" / 웹) */ .stores{position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px} .store-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-full); font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;max-width:100%; transition:border-color 150ms var(--ease-std),background 150ms var(--ease-std),transform 160ms var(--ease-out)} .store-btn .ico{width:14px;height:14px;color:var(--muted)} .store-btn .ico-end{width:12px;height:12px;margin-left:-2px} .store-btn[data-store="web"] span{overflow:hidden;text-overflow:ellipsis} @media(hover:hover){ a.store-btn:hover{border-color:var(--line-strong);background:var(--surface-2)} } a.store-btn:active{transform:scale(.97)} .store-btn[data-state="soon"],.store-btn[data-state="review"]{color:var(--faint);border-color:transparent;background:var(--surface-2)} .store-tag{font-size:11px;font-weight:500;color:var(--faint);padding-left:7px;margin-left:1px;border-left:1px solid var(--line-strong)} /* 모바일(≤560) — 박스를 걷어낸 헤어라인 리스트: 더 가볍고 밀도 높게(디렉터 지적 2026-10-08) */ @media(max-width:560px){ .card{background:transparent;border:0;border-radius:0;border-top:1px solid var(--line);padding:var(--s4) 0;gap:10px} .card::before{display:none} .group-label+.card{border-top:0} .card .icon{width:56px;height:56px} .card .name{font-size:17px} .card-expand{margin-right:0} .card:has(a.card-link:focus-visible){outline-offset:-2px;border-radius:8px} } /* ── "Google 이미지 검색"식 카드 확장 패널 (오너 지시 2026-09-07) ───────── 클릭한 카드가 속한 행 바로 아래 풀폭으로 끼어든다. 아래 카드 재배치는 hub.js가 FLIP으로. .expander(바깥, 캐럿 보유) > .expander-clip(overflow:hidden + height 트랜지션) 구조. */ .expander{position:relative;z-index:20;grid-column:1/-1} .expander-clip{position:relative;background:var(--surface);border:1px solid var(--line); border-radius:var(--r-card);overflow:hidden;height:0;opacity:0; transition:height 320ms var(--ease-reveal),opacity 320ms var(--ease-reveal)} .expander-caret{position:absolute;top:-8px;width:16px;height:16px;background:var(--surface); border-left:1px solid var(--line);border-top:1px solid var(--line);transform:translateX(-50%) rotate(45deg); pointer-events:none;z-index:1} @media(max-width:560px){ .expander{margin:var(--s3) 0} } .expander-close{position:absolute;top:var(--s3);right:var(--s3);width:36px;height:36px;border-radius:var(--r-full);border:1px solid var(--line); background:var(--surface);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3; transition:border-color .15s var(--ease-std),color .15s var(--ease-std),transform 160ms var(--ease-out)} .expander-close::before{content:"";position:absolute;inset:-4px} .expander-close .ico{width:16px;height:16px} @media(hover:hover){ .expander-close:hover{border-color:var(--line-strong);color:var(--ink)} } .expander-close:active{transform:scale(.94)} .expander-body{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:var(--s6);padding:var(--s6) calc(var(--s6) + 44px) var(--s6) var(--s6); opacity:1;transition:opacity 160ms var(--ease-std)} .expander-body.fade{opacity:0} @media(max-width:720px){ .expander-body{grid-template-columns:1fr;padding:var(--s5)} } .expander-shots{position:relative} .expander-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; border-radius:var(--r-hero);scroll-behavior:smooth} /* 스크린샷 컷은