/* ============================================================
   Delino Map 랜딩(index.php) 전용 스타일
   공용 토큰·컴포넌트(.topbar .brand .btn 등)는 app/_inc/head.php 에서 로드
   ============================================================ */
.topbar a.btn{text-decoration:none;}
.lnav{display:flex; gap:2px;}
.lnav a{padding:7px 12px; border-radius:9px; font-size:13.5px; font-weight:600;
  color:var(--body); text-decoration:none;}
.lnav a:hover{background:var(--bg); color:var(--ink);}
.btn.soon{opacity:.55; cursor:default;}
.btn.soon:hover{background:var(--bg);}

.chip{display:inline-block; font-size:11px; font-weight:700; border-radius:20px; padding:3px 10px; white-space:nowrap;}
.chip.live{background:var(--accent-soft); color:var(--weak-fg);}
.chip.soon{background:var(--bg); color:var(--sub);}
.chip.admin{background:#fdf3dc; color:#9a6b00;}

/* Hero */
.hero{display:grid; grid-template-columns:1.05fr .95fr; gap:36px; align-items:center; padding:34px 0 10px;}
.kicker{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--body);}
.hero h1{font-size:34px; line-height:1.25; font-weight:800; letter-spacing:-.02em; margin-top:14px;}
.hero h1 .soft{color:var(--sub);}
.hero .lead{margin-top:14px; font-size:15px; color:var(--body); max-width:44ch;}
.ctas{display:flex; gap:8px; margin-top:22px;}
.ctas .btn{padding:12px 18px; font-size:14px; text-decoration:none;}
/* 보조 CTA: 페이지 배경(var(--bg))과 같은 회색이라 묻히므로 흰 배경 + 테두리로 구분 */
.ctas .btn:not(.primary){background:#fff; border:1.5px solid var(--line); color:var(--ink);}
.ctas .btn:not(.primary):hover{background:#fff; border-color:#c9cfd6;}
.trust{margin-top:16px; font-size:12.5px; color:var(--sub);}

/* Hero 미리보기 — 층안내(좌석)와 미팅 룸(타임라인)은 실제 앱처럼 별도 카드로 분리 */
.pv-stack{display:flex; flex-direction:column; gap:14px;}
.preview{background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
  box-shadow:0 8px 24px rgba(25,31,40,.06);}
.pv-bar{display:flex; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--bg);}
.pv-dot{width:9px; height:9px; border-radius:50%; background:#d7dce2; display:inline-block;}
.pv-title{font-size:12px; font-weight:700; color:var(--body); margin-left:6px;}
.pv-body{padding:16px;}
.pv-row{display:flex; gap:8px;}
.pv-seat{flex:1; background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px 6px 8px; text-align:center;}
.pv-seat.hit{box-shadow:0 0 0 3px var(--accent); border-color:transparent;}
.pv-seat.empty{border-style:dashed; opacity:.6;}
.pv-face{width:34px; height:34px; border-radius:50%; margin:0 auto 6px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:var(--body); border:1.5px solid rgba(0,0,0,.12);}
.pv-name{font-size:12px; font-weight:700; color:var(--ink);}
.pv-seat.empty .pv-name{color:var(--sub); font-weight:600;}
.pv-aisle{margin:10px 0; text-align:center; font-size:10.5px; font-weight:700; color:var(--sub);
  background:var(--bg); border-radius:8px; padding:4px;}

/* Sections */
.sec{margin-top:52px;}
.sec-head h2{font-size:21px; font-weight:800; letter-spacing:-.02em;}
.sec-head p{margin-top:6px; font-size:13.5px; color:var(--body); max-width:70ch;}
.sec-head a{color:var(--accent);}
.feature-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(225px,1fr)); gap:10px; margin-top:18px;}
.feature-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px;}
.feature-card .top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px;}
.feature-card h3{font-size:14.5px; font-weight:800;}
.feature-card p{font-size:12.5px; color:var(--body);}
.feature-card.is-soon h3{color:var(--body);}

.why-list{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px;}
.why-list article{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px;}
.why-list .pain{font-size:12.5px; color:var(--sub); font-weight:600;}
.why-list .gain{margin-top:6px; font-size:14px; font-weight:700; color:var(--ink);}

.prod-footer{display:flex; justify-content:space-between; gap:10px; margin-top:56px; padding:18px 0 0;
  border-top:1px solid var(--line); font-size:12.5px; color:var(--sub); font-weight:600;}

@media (max-width:900px){
  .hero{grid-template-columns:1fr; gap:24px; padding-top:20px;}
  .hero h1{font-size:27px;}
  .lnav{display:none;}
  .why-list{grid-template-columns:1fr;}
}