/* ════════════════════════════════════════════════════════════
   라이드웨이 소개 사이트 공통 스타일
   ─────────────────────────────────────────────────────────
   app_landing.html · features.html · bikeway.html · faq.html 이 함께 쓴다.
   색은 스플래시 그림(images/logo.jpg)에서 뽑았다 — 청록 + 주황.
   ⚠️ 앱 본체(style.css)와는 별개 파일이다. 앱 UI 색(슬레이트+파랑)과
      일부러 다르게 두었다. 소개 페이지는 브랜드 그림 쪽에 맞춘다.
   ════════════════════════════════════════════════════════════ */

:root{
  --ink:#14352f;
  --ink-soft:#4a6b64;
  --ink-mute:#7c9a93;
  --line:#dbe9e5;
  --line-soft:#eaf3f0;
  --brand:#2f7d6f;
  --brand-dark:#256256;
  --brand-tint:#eef7f5;
  --accent:#ef6c1f;
  --accent-tint:#fff2e9;
  --card:#ffffff;
  --bg:#ffffff;
  --sky-top:#cfe9ec;
  --sky-bot:#eef7f5;
  --radius:16px;
  --shadow:0 10px 30px rgba(20,53,47,.08);
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",
              system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.75; word-break:keep-all;
}
img{max-width:100%; display:block;}
a{color:var(--brand); text-decoration:none;}
a:hover{text-decoration:underline;}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px;}

/* ── 헤더 ── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
.head-in{display:flex; align-items:center; gap:18px; height:58px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--ink); font-size:17px; letter-spacing:-.3px;}
.brand:hover{text-decoration:none;}
.brand-badge{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand),#3f9b8a);
  display:grid; place-items:center; color:#fff; font-size:15px;
}
.nav{margin-left:auto; display:flex; align-items:center; gap:4px;}
.nav a{
  padding:8px 11px; border-radius:9px; font-size:14.5px; font-weight:600; color:var(--ink-soft);
}
.nav a:hover{background:var(--brand-tint); color:var(--brand-dark); text-decoration:none;}
.nav a.cta{background:var(--brand); color:#fff; padding:9px 16px;}
.nav a.cta:hover{background:var(--brand-dark); color:#fff;}
@media (max-width:640px){
  .nav a{padding:7px 8px; font-size:13.5px;}
  .nav a.cta{padding:8px 12px;}
  .nav a.hide-sm{display:none;}
}

/* ── 히어로 ── */
.hero{
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 60%,#fff 100%);
  padding:52px 0 60px;
}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;}
@media (max-width:820px){ .hero-grid{grid-template-columns:1fr; gap:28px;} }

.eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:2.4px;
  color:var(--brand); background:#fff; border:1px solid var(--line);
  padding:5px 12px; border-radius:999px; margin-bottom:16px;
}
h1{
  margin:0; font-size:clamp(28px,5.2vw,42px); line-height:1.28;
  font-weight:800; letter-spacing:-.9px;
}
h1 .hl{color:var(--brand);}
.hero p.lead{
  margin:18px 0 0; font-size:clamp(15px,2.1vw,17.5px); color:var(--ink-soft); line-height:1.8;
}
.hero-art{
  border-radius:22px; overflow:hidden; box-shadow:0 22px 50px rgba(20,53,47,.18);
  background:#dff0f2; aspect-ratio:4/3;
}
.hero-art img{width:100%; height:100%; object-fit:cover; object-position:center 42%;}

.btn-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 22px; border-radius:13px; font-size:15.5px; font-weight:700;
  border:1px solid transparent; cursor:pointer;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px rgba(47,125,111,.30);}
.btn-primary:hover{background:var(--brand-dark); color:#fff;}
.btn-ghost{background:#fff; color:var(--brand-dark); border-color:var(--line);}
.btn-ghost:hover{background:var(--brand-tint);}
.btn svg{width:19px; height:19px; flex-shrink:0;}

.hero-note{margin:16px 0 0; font-size:13px; color:var(--ink-mute); line-height:1.7;}
.hero-note b{color:var(--accent); font-weight:700;}

/* ── 섹션 ── */
section{padding:64px 0;}
section.tint{background:var(--brand-tint);}
.sec-head{max-width:660px; margin:0 0 34px;}
.sec-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.sec-kicker{
  font-size:12.5px; font-weight:800; letter-spacing:2px; color:var(--accent);
  text-transform:uppercase; margin:0 0 10px;
}
h2{margin:0; font-size:clamp(22px,3.4vw,30px); line-height:1.35; font-weight:800; letter-spacing:-.6px;}
h3{margin:0 0 8px; font-size:18px; font-weight:700; letter-spacing:-.3px;}
.sec-head p{margin:14px 0 0; color:var(--ink-soft); font-size:15.5px;}

/* ── 카드 그리드 ── */
.grid{display:grid; gap:18px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){ .grid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .grid-3,.grid-2{grid-template-columns:1fr;} }

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 22px; box-shadow:var(--shadow);
}
.card .ico{
  width:44px; height:44px; border-radius:13px; background:var(--brand-tint);
  display:grid; place-items:center; font-size:22px; margin-bottom:14px;
}
.card p{margin:0; color:var(--ink-soft); font-size:14.8px; line-height:1.75;}

/* ── 기능 상세 행(글 + 스크린샷) ── */
.feature-row{
  display:grid; grid-template-columns:1fr 300px; gap:46px; align-items:center;
  padding:44px 0; border-top:1px solid var(--line-soft);
}
.feature-row:first-of-type{border-top:0;}
/* flip 행은 스크린샷이 왼쪽으로 간다.
   order 만 바꾸면 자동배치가 순서를 따라가서 스크린샷이 넓은 1fr 칸을 차지해 버린다
   (300px 자리가 글로 가고 사진이 694px 로 부풀던 문제). 칸 폭도 같이 뒤집어 준다. */
.feature-row.flip{grid-template-columns:300px 1fr;}
.feature-row.flip .feature-txt{order:2;}
@media (max-width:820px){
  .feature-row,.feature-row.flip{grid-template-columns:1fr; gap:26px; padding:34px 0;}
  .feature-row.flip .feature-txt{order:0;}
}
.feature-txt h3{font-size:clamp(19px,2.8vw,24px); margin-bottom:12px;}
.feature-txt p{color:var(--ink-soft); margin:0 0 12px; font-size:15.5px;}
.tag{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:1.4px;
  color:var(--accent); margin-bottom:9px;
}

/* ── 스크린샷 자리 + 이미지 자리 표시(placeholder) ──
   이미지 파일이 아직 없으면(onerror) 점선 네모 상자를 대신 보여준다.
   상자 안에는 넣어야 할 파일명(data-file)과 권장 크기(data-ph)가 적혀 있어서
   그대로 만들어 images/intro/ 에 올리면 자동으로 실제 이미지로 바뀐다.
   주소 뒤에 ?ph=1 을 붙이면(예: app_landing.html?ph=1) 이미지가 이미 있어도
   모든 자리를 상자로 강제 표시한다 — 어떤 그림이 어디에 몇 px 로 들어가는지 한 번에 보려고. */
.shot{
  position:relative; border-radius:24px; overflow:hidden;
  border:1px solid var(--line); background:var(--brand-tint);
  aspect-ratio:9/19.5; box-shadow:0 16px 38px rgba(20,53,47,.14);
}
.shot img{width:100%; height:100%; object-fit:cover;}

/* 자리 상자 본체 — 스크린샷 자리(.shot)와 히어로 그림 자리(.hero-art)가 함께 쓴다 */
.shot.ph img, .hero-art.ph img,
.force-ph .shot img, .force-ph .hero-art img{display:none;}

.shot.ph, .hero-art.ph,
.force-ph .shot, .force-ph .hero-art{
  display:grid; place-content:center; gap:10px;
  padding:18px; text-align:center;
  border:2px dashed var(--brand); box-shadow:none;
  background:
    repeating-linear-gradient(45deg,transparent 0 11px,rgba(47,125,111,.07) 11px 22px),
    var(--brand-tint);
}
/* 윗줄: 넣어야 할 파일 경로 */
.shot.ph::before, .hero-art.ph::before,
.force-ph .shot::before, .force-ph .hero-art::before{
  content:attr(data-file);
  justify-self:center; max-width:100%;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; line-height:1.5; color:var(--brand-dark);
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:6px 10px; word-break:break-all;
}
/* 아랫줄: 설명 + 권장 픽셀 크기 (줄바꿈은 
) */
.shot.ph::after, .hero-art.ph::after,
.force-ph .shot::after, .force-ph .hero-art::after{
  content:attr(data-ph);
  position:static; inset:auto; max-width:100%;
  color:var(--ink-soft); font-size:13px; font-weight:600; line-height:1.8;
  white-space:pre-line;
}

/* ?ph=1 로 들어왔을 때만 뜨는 안내 띠 */
.force-ph body::before{
  content:"이미지 자리 미리보기 모드 (?ph=1) — 주소에서 ?ph=1 을 빼면 실제 이미지가 보입니다";
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:var(--accent); color:#fff; text-align:center;
  font-size:12.5px; font-weight:700; padding:8px 14px;
}

.shot-row{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:860px){ .shot-row{grid-template-columns:repeat(2,1fr);} }
/* 좁은 화면에서 한 칸이 되면 폭을 그대로 두면 세로가 800px 을 넘어 화면을 독차지한다 */
@media (max-width:820px){ .feature-row .shot{max-width:250px; margin:0 auto;} }

/* ── 목록 ── */
ul.check{list-style:none; margin:14px 0 0; padding:0;}
ul.check li{
  position:relative; padding:6px 0 6px 26px; color:var(--ink-soft); font-size:15px; line-height:1.7;
}
ul.check li::before{
  content:""; position:absolute; left:4px; top:15px;
  width:7px; height:7px; border-radius:50%; background:var(--brand);
}
ul.check li b{color:var(--ink); font-weight:700;}

/* ── 표 ── */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; margin-top:8px;}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14.6px; background:#fff;}
caption{caption-side:top; text-align:left; color:var(--ink-mute); font-size:13.5px; padding-bottom:10px;}
th,td{padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
thead th{background:var(--brand-tint); color:var(--brand-dark); font-weight:800; font-size:13.5px; white-space:nowrap;}
th.num,td.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
tbody tr:hover{background:#fafdfc;}

/* ── FAQ ── */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line); padding:4px 0;}
.faq summary{
  cursor:pointer; list-style:none; padding:18px 34px 18px 2px; position:relative;
  font-weight:700; font-size:16.5px; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+"; position:absolute; right:6px; top:15px;
  font-size:22px; font-weight:400; color:var(--brand); line-height:1;
}
.faq details[open] summary::after{content:"−";}
.faq .a{padding:0 6px 20px 2px; color:var(--ink-soft); font-size:15.2px;}
.faq .a p{margin:0 0 10px;}
.faq .a p:last-child{margin-bottom:0;}

/* ── 배너 CTA ── */
.cta-band{
  background:linear-gradient(135deg,var(--brand),#3f9b8a); color:#fff;
  border-radius:22px; padding:44px 32px; text-align:center;
  box-shadow:0 18px 44px rgba(47,125,111,.28);
}
.cta-band h2{color:#fff;}
.cta-band p{margin:14px auto 0; max-width:520px; color:rgba(255,255,255,.9); font-size:15.5px;}
.cta-band .btn-row{justify-content:center;}
.cta-band .btn-primary{background:#fff; color:var(--brand-dark); box-shadow:0 8px 22px rgba(0,0,0,.18);}
.cta-band .btn-primary:hover{background:#f4fbf9; color:var(--brand-dark);}

/* ── 알림 상자 ── */
.callout{
  background:var(--accent-tint); border:1px solid #f8d9c2; border-left:4px solid var(--accent);
  border-radius:12px; padding:18px 20px; color:var(--ink-soft); font-size:15px;
}
.callout b{color:var(--ink);}

/* ── 빵부스러기 ── */
.crumb{font-size:13.5px; color:var(--ink-mute); padding:18px 0 0;}
.crumb a{color:var(--ink-mute);}
.crumb .sep{opacity:.5; margin:0 7px;}

/* ── 푸터 ── */
.site-foot{
  border-top:1px solid var(--line); background:#fafdfc;
  padding:38px 0 46px; font-size:14px; color:var(--ink-soft);
}
.foot-grid{display:flex; flex-wrap:wrap; gap:26px 46px; justify-content:space-between;}
.foot-grid h4{margin:0 0 10px; font-size:13px; letter-spacing:1.4px; color:var(--ink-mute); font-weight:800;}
.foot-grid ul{list-style:none; margin:0; padding:0;}
.foot-grid li{padding:3px 0;}
.foot-grid a{color:var(--ink-soft);}
.foot-legal{margin-top:30px; padding-top:20px; border-top:1px solid var(--line); font-size:12.8px; color:var(--ink-mute); line-height:1.9;}

/* ── 다크 모드 ── */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e8f2ef; --ink-soft:#a8c1bb; --ink-mute:#7f9a94;
    --line:#2a3f3a; --line-soft:#213330;
    --brand:#5cbfab; --brand-dark:#8ad9c6; --brand-tint:#16302c;
    --accent:#ff8a45; --accent-tint:#2c2018;
    --card:#152321; --bg:#0e1a18;
    --sky-top:#16302c; --sky-bot:#101d1b;
    --shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .site-head{background:rgba(14,26,24,.9);}
  .hero{background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 60%,var(--bg) 100%);}
  .nav a.cta{background:var(--brand); color:#08201c;}
  .nav a.cta:hover{background:var(--brand-dark); color:#08201c;}
  .btn-primary{background:var(--brand); color:#08201c;}
  .btn-primary:hover{background:var(--brand-dark); color:#08201c;}
  .btn-ghost{background:var(--card);}
  table{background:var(--card);}
  tbody tr:hover{background:#1b2c29;}
  .callout{border-color:#4a3524;}
  .site-foot{background:#0b1614;}
  .cta-band{background:linear-gradient(135deg,#1f5f54,#2c7f70);}
  .cta-band .btn-primary{background:#eafaf6; color:#0d2b26;}
}