/* 앱별 홍보 랜딩페이지 — 메인 포트폴리오와 동일한 다크 시네마틱 + PANTONE 토큰 재사용 */
:root {
  --ink: #0d0b09; --fg: #f3ede1; --fg-soft: #c8bfae; --fg-mute: #8c8270;
  --accent: #e8843f; --glass: rgba(255,255,255,.05); --glass-line: rgba(255,255,255,.12);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --disp: 'Archivo', 'Pretendard', sans-serif; --sans: 'Pretendard', system-ui, sans-serif;
  --maxw: 1120px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--ink); color: var(--fg); font-family: var(--sans); line-height: 1.6; font-size: 17px; overflow-x: hidden; min-height: 100vh; }
::selection { background: var(--accent); color: #1a1206; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; color: var(--accent); }

/* 배경 — 프로젝트 색조(--pc)로 살짝 물들임 */
.bg, .bg-grid, .bg-vignette, .grain { position: fixed; inset: 0; pointer-events: none; }
.bg { z-index: -4; background:
  radial-gradient(120% 80% at 85% -10%, color-mix(in srgb, var(--pc, #3a2c1c) 40%, #1a140d) 0%, transparent 46%),
  radial-gradient(80% 60% at 60% 110%, #2a1d12 0%, transparent 55%),
  linear-gradient(160deg, #15110c 0%, #0c0a08 55%, #100d0a 100%); }
.bg::after { content: ''; position: absolute; top: -6%; right: 4%; width: 42vw; height: 42vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--pc, #e8843f) 22%, transparent) 0%, transparent 62%); filter: blur(24px); }
.bg-grid { z-index: -3; opacity: .5; background-size: 64px 64px;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); }
.bg-vignette { z-index: -2; background: radial-gradient(120% 100% at 50% 30%, transparent 40%, rgba(0,0,0,.55) 100%); }
.grain { z-index: 998; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.glass { background: var(--glass); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  border: 1px solid var(--glass-line); border-radius: 20px; box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); }

/* 상단 바 */
.sc-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 56px); backdrop-filter: blur(10px); background: linear-gradient(rgba(13,11,9,.7), rgba(13,11,9,0)); }
.sc-back { font-family: var(--mono); font-size: .76rem; letter-spacing: .08em; color: var(--fg-soft); display: inline-flex; align-items: center; gap: 8px; transition: color .2s; }
.sc-back:hover { color: var(--accent); }
.sc-brand { font-family: var(--disp); font-weight: 900; font-size: 1.1rem; letter-spacing: -.01em; }
.sc-brand b { color: var(--accent); }

/* 히어로 */
.sc-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 60px); align-items: center;
  padding: clamp(40px, 7vw, 86px) 0 clamp(34px, 5vw, 60px); }
.sc-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.sc-pantone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .62rem; letter-spacing: .04em; color: var(--fg-mute); margin-bottom: 18px; }
.sc-pantone .sw { width: 13px; height: 13px; border-radius: 3px; background: var(--pc); border: 1px solid rgba(255,255,255,.25); }
.sc-title { font-family: var(--disp); font-weight: 900; letter-spacing: -.02em; font-size: clamp(2.3rem, 6vw, 3.9rem); line-height: 1.04; }
.sc-title small { display: block; font-family: var(--mono); font-weight: 500; font-size: .9rem; color: var(--fg-mute); letter-spacing: .02em; margin-top: 12px; }
.sc-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; font-family: var(--mono); font-size: .68rem; padding: 5px 13px; border-radius: 100px; background: var(--accent); color: #1a1206; font-weight: 700; }
.sc-status.is-archived { background: transparent; color: var(--fg-soft); border: 1px solid var(--glass-line); }
.sc-desc { margin-top: 22px; color: var(--fg-soft); font-size: 1.02rem; line-height: 1.7; max-width: 46ch; }
.sc-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.btn { font-family: var(--mono); font-size: .82rem; padding: 12px 20px; border-radius: 11px; border: 1px solid var(--glass-line); color: var(--fg-soft); display: inline-flex; align-items: center; gap: 8px; transition: all .18s; }
.btn:hover { border-color: var(--accent); color: var(--fg); transform: translateY(-2px); }
.btn-fill { background: var(--accent); color: #1a1206; border-color: var(--accent); font-weight: 700; }
.btn-fill:hover { color: #1a1206; filter: brightness(1.08); }

/* 히어로 스크린샷 프레임 */
.sc-shot { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--glass-line);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sc-shot:hover { transform: perspective(1400px) rotateY(0deg) rotateX(0deg); }
.sc-shot img { display: block; width: 100%; height: auto; }
.sc-shot::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); border-radius: 18px; }
.sc-shot-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--mono); font-size: .6rem; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 7px; background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(4px); }

/* 섹션 라벨 */
.sc-sec { padding: clamp(28px, 5vw, 56px) 0; }
.sc-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--fg-mute); margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-line); }

/* 기능 카드 */
.sc-feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feat { padding: 22px; border-radius: 15px; }
.feat-n { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--accent); }
.feat-t { margin-top: 12px; font-size: .98rem; line-height: 1.6; color: var(--fg); }

/* 스택 칩 */
.sc-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-stack li { list-style: none; font-family: var(--mono); font-size: .74rem; padding: 8px 14px; border-radius: 8px;
  background: rgba(0,0,0,.25); color: var(--fg-soft); border: 1px solid var(--glass-line); }

/* 푸터 */
.sc-foot { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(20px, 5vw, 56px) 60px; border-top: 1px solid var(--glass-line);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.sc-foot a { font-family: var(--mono); font-size: .76rem; color: var(--fg-soft); transition: color .2s; }
.sc-foot a:hover { color: var(--accent); }
.sc-foot .copy { font-family: var(--mono); font-size: .7rem; color: var(--fg-mute); }

@media (max-width: 900px) {
  .sc-hero { grid-template-columns: 1fr; gap: 30px; }
  .sc-shot { transform: none; }
  .sc-feats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .sc-shot { transform: none; } }