/* 가스펠 랩 — DESIGN.md(A "곡면 전시장") 기준. 외부 글꼴·요청 없음. */
:root{
  --paper:#E6E6E4; --dot:#C9C9C5; --ink:#161616; --ink-2:#4A4A47;
  --bar:#1C1C1C; --panel:#141414; --panel-2:#1F1F1F; --line:#2C2C2A;
  --yellow:#FFF36B; --orange:#FF4F1F;
  --sans: Pretendard, "Pretendard Variable", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{
  font-family:var(--sans); color:var(--ink); font-size:16px; line-height:1.6; word-break:keep-all;
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.nav :focus-visible, .pill :focus-visible, .panel :focus-visible{outline-color:var(--yellow)}
.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}
.wrap{max-width:1240px; margin:0 auto; padding:0 20px}

/* 떠 있는 상단 메뉴 */
.nav{position:sticky; top:14px; z-index:20; margin:14px auto 0; max-width:1240px; padding:0 20px}
.nav-in{display:flex; align-items:center; gap:18px; background:var(--bar); color:#F2F2EF;
  border-radius:12px; padding:8px 8px 8px 18px; box-shadow:0 10px 30px rgba(0,0,0,.18)}
.brand{display:flex; align-items:center; gap:10px; min-height:44px; text-decoration:none; font-weight:700; letter-spacing:-.01em}
.brand svg{flex:none}
.brand small{font-weight:500; color:#A9A9A4; font-size:13px}
.nav-links{display:flex; gap:4px; margin-left:auto}
.nav-links a{display:inline-flex; align-items:center; min-height:44px; font-size:14px; text-decoration:none; color:#D6D6D2; padding:0 12px; border-radius:8px}
.nav-links a:hover, .nav-links a[aria-current="page"]{background:#2A2A2A; color:#fff}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px;
  border-radius:9px; font-weight:700; font-size:14px; text-decoration:none; color:#141414; transition:transform .12s}
.btn:active{transform:scale(.97)}
.btn-y{background:var(--yellow)}
.btn-o{background:var(--orange)}
.nav-cta{display:flex; gap:6px}

/* 첫 화면 헤드라인 */
.hero{text-align:center; padding:80px 20px 0}
.eyebrow{display:inline-block; font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--ink-2); text-transform:uppercase}
.hero h1{margin:18px auto 0; font-family:var(--serif); font-weight:400; font-size:clamp(44px,7.4vw,104px);
  line-height:1.02; letter-spacing:-.025em; max-width:14ch}
.hero h1 em{font-style:italic}
.hero .ko{margin:22px auto 0; font-size:clamp(18px,2vw,22px); font-weight:600; letter-spacing:-.01em}
.hero .en{margin:8px auto 0; font-size:16px; color:var(--ink-2)}

/* 3D 곡면 캐러셀 — 가운데 작고 양끝 크게 */
.stage{position:relative; height:clamp(280px,30vw,400px); margin:8px 0 0; perspective:1100px; perspective-origin:50% 50%; overflow:hidden}
.ring{position:absolute; left:50%; top:50%; width:0; height:0; transform-style:preserve-3d;
  transform:translateZ(640px); animation:sway 16s ease-in-out infinite alternate}
.shot{position:absolute; width:250px; height:164px; left:-125px; top:-82px; margin:0;
  transform:rotateY(var(--a)) translateZ(-860px); border-radius:14px; overflow:hidden;
  background:#111; box-shadow:0 24px 50px rgba(20,20,20,.22)}
.shot img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.shot figcaption{position:absolute; left:10px; bottom:10px; background:rgba(20,20,20,.86); color:#F4F4F1;
  font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px}
@keyframes sway{from{transform:translateZ(640px) rotateY(-4deg)} to{transform:translateZ(640px) rotateY(4deg)}}
@media (prefers-reduced-motion:reduce){.ring{animation:none}}

/* 소개 + 알약형 찾기 바 + 분류 칩 */
.intro{text-align:center; padding-top:28px}
.intro p{margin:0 auto; max-width:34em; font-size:17px; color:var(--ink-2)}
.pill{margin:26px auto 0; max-width:760px; background:var(--bar); border-radius:999px; padding:6px 6px 6px 22px;
  display:flex; align-items:center; gap:10px; box-shadow:0 14px 34px rgba(0,0,0,.16)}
.pill svg{flex:none}
.pill input{flex:1; min-width:0; min-height:44px; background:transparent; border:0; outline:0; color:#F4F4F1; font:500 16px var(--sans)}
.pill input::placeholder{color:#9A9A95}
.pill .go{min-height:44px; border:0; border-radius:999px; padding:0 20px; background:var(--yellow); font:700 14px var(--sans); color:#141414; cursor:pointer}
.chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:16px auto 0; max-width:820px}
.chip{min-height:44px; padding:0 16px; border-radius:999px; border:1px solid #BDBDB8; background:rgba(255,255,255,.45);
  font:600 14px var(--sans); color:var(--ink); cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:#fff}

/* 어두운 포트폴리오 패널 */
.panel{margin:84px 0 0; scroll-margin-top:90px; background-color:var(--panel); color:#EDEDEA; border-radius:28px; padding:64px 44px 56px;
  background-image:radial-gradient(#2A2A28 1px, transparent 1.2px); background-size:22px 22px}
.panel-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.panel h2{margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,56px); line-height:1.05; letter-spacing:-.02em}
.panel h2 span{display:block; font-family:var(--sans); font-size:17px; font-weight:600; color:#B4B4AF; letter-spacing:0; margin-top:12px}
.count{margin:0; font-size:14px; color:#B4B4AF}
.cat{margin-top:52px}
.cat-head{display:flex; align-items:center; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.tag{background:var(--orange); color:#141414; font-size:13px; font-weight:700; padding:4px 11px; border-radius:6px}
.cat-head h3{margin:0; font-size:20px; letter-spacing:-.01em}
.cat-head small{color:#9C9C97; font-size:14px}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:18px}
.card{background:var(--panel-2); border:1px solid var(--line); border-radius:16px; overflow:hidden; display:flex; flex-direction:column}
.card .thumb{aspect-ratio:16/10; background:#262624; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; object-position:top; display:block}
.card .mono{aspect-ratio:16/10; display:flex; flex-direction:column; justify-content:flex-end; padding:16px;
  background:#262624; color:#9C9C97; font-size:13px; font-weight:600}
.card .mono b{font-weight:700; font-size:26px; letter-spacing:-.02em; color:#DADAD6; line-height:1.15; margin-bottom:6px}
.card .body{padding:16px 16px 18px; display:flex; flex-direction:column; gap:8px; flex:1}
.card h4{margin:0; font-size:17px; letter-spacing:-.01em}
.card p{margin:0; font-size:15px; color:#BDBDB8; line-height:1.5}
.meta{display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:6px}
.st{font-size:12.5px; font-weight:700; padding:3px 9px; border-radius:999px; border:1px solid #4A4A47; color:#DADAD6}
.st.live{border-color:var(--yellow); color:var(--yellow)}
.st.dev{border-style:dashed; color:#A9A9A4}
.st.play{border-color:#6B6B66}
.card a.open{display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:4px; font-size:14px; font-weight:700; color:#fff; text-decoration:none}
.card a.open:hover{color:var(--yellow)}
.empty{color:#9C9C97; margin:40px 0 0}

/* 핵심 가치 */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:72px 0 0; scroll-margin-top:90px}
.value{border-top:1px solid #B9B9B4; padding-top:18px}
.value b{display:block; font-size:18px}
.value span{color:var(--ink-2); font-size:16px}

/* 하위 페이지 본문(읽기 폭) */
.doc{max-width:720px; margin:0 auto; padding:80px 20px 0}
.doc .page-title{margin:0; font-family:var(--serif); font-weight:400; font-size:clamp(34px,4.4vw,56px); line-height:1.05; letter-spacing:-.02em}
.doc .page-title span{display:block; font-family:var(--sans); font-size:17px; font-weight:600; color:var(--ink-2); letter-spacing:0; margin-top:12px}
.doc .lead{margin:28px 0 0; font-size:18px; font-weight:600}
.doc h2{margin:44px 0 10px; font-size:20px; letter-spacing:-.01em}
.doc h2 .en{font-size:14px; font-weight:600; color:var(--ink-2); margin-left:6px}
.doc p, .doc li{font-size:17px}
.doc ul, .doc ol{padding-left:1.3em}
.doc a:not(.btn){font-weight:600; text-underline-offset:3px}
.doc .meta-line{color:var(--ink-2); font-size:16px}
.contact{margin:28px 0 0; padding:22px 24px; background:rgba(255,255,255,.5); border:1px solid #C3C3BE; border-radius:16px}
.contact p{margin:0}
.contact p + p{margin-top:12px}
.faq details{border-top:1px solid #C3C3BE}
.faq details:last-child{border-bottom:1px solid #C3C3BE}
.faq summary{min-height:44px; display:flex; align-items:center; padding:10px 0; font-weight:700; font-size:17px; cursor:pointer}
.faq details p{margin:0 0 16px}
.policy-links li{margin:6px 0}
.actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:28px}

/* 하단 */
.site-footer{margin-top:80px; padding-top:36px; padding-bottom:48px; border-top:1px solid #C3C3BE; font-size:14px; color:var(--ink-2)}
.site-footer nav{display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px}
.site-footer nav a{display:inline-flex; align-items:center; min-height:44px; font-weight:700; color:var(--ink); text-decoration:none}
.site-footer dl{display:flex; flex-wrap:wrap; gap:4px 18px; margin:0}
.site-footer dt{display:inline; font-weight:600}
.site-footer dd{display:inline; margin:0 0 0 6px}
.copy{margin:14px 0 0}

@media (max-width:860px){
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav-cta .btn-y{display:none}
  .panel{padding:44px 20px 40px; border-radius:22px; margin-top:60px}
  .values{grid-template-columns:1fr; margin-top:56px}
}
@media (max-width:640px){
  .hero{padding-top:56px}
  .doc{padding-top:56px}
  .stage{perspective:none; height:auto; margin-top:28px}
  .ring{position:static; width:auto; height:auto; transform:none; animation:none; display:flex; gap:12px;
    overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 20px 18px}
  .shot{position:relative; left:auto; top:auto; transform:none; flex:none; width:78vw; height:auto; aspect-ratio:16/10; scroll-snap-align:center}
  .pill{padding-left:16px}
  .pill .go{padding:0 14px}
  .brand small{display:none}
}