/* 오픈렌탈 기능소개 — /features/ 목록·글. 본문 칸 이름(nw-*)은 ORBIS 소개 글과 같다(build-features.mjs 가 본문을 그대로 옮긴다). 색은 홈 토큰 */
:root{
  --bg:#ffffff; --paper:#f7f7f5; --ink:#101012; --txt:#2c2e33; --sub:#6b6f78; --faint:#a3a7b0; --hair:#e6e6e2;
  --acc:#2638ff; --acc-soft:#eceeff; --acc-line:#c9cfff;
  --new:#2638ff; --new-bg:#eceeff; --imp:#0a8f5f; --imp-bg:#e3f6ee; --mnt:#c0283a; --mnt-bg:#fdecee; --inf:#6b6f78; --inf-bg:#f0f0ed;
}
*{margin:0;padding:0;box-sizing:border-box}
body.ft{font-family:"Pretendard",-apple-system,"Malgun Gothic",sans-serif;background:var(--bg);color:var(--txt);font-size:16px;line-height:1.7}
.ft a{color:inherit;text-decoration:none}
.ft img{display:block;max-width:100%}
.ft-wrap{max-width:1120px;margin:0 auto;padding:0 24px}

.ft-top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.ft-top .ft-wrap{display:flex;align-items:center;gap:28px;height:68px}
.ft-logo img{height:34px;width:auto}
.ft-nav{display:flex;gap:22px;font-size:15px;font-weight:600;color:var(--sub)}
.ft-nav a[aria-current]{color:var(--ink)}
.ft-try{margin-left:auto;background:var(--ink);color:#fff!important;font-weight:700;font-size:14px;padding:9px 18px;border-radius:999px}

.chip{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:5px;margin-right:6px}
.chip.NEW{color:var(--new);background:var(--new-bg)}.chip.IMPROVE{color:var(--imp);background:var(--imp-bg)}
.chip.MAINT{color:var(--mnt);background:var(--mnt-bg)}.chip.INFO{color:var(--inf);background:var(--inf-bg)}

/* 글 — 소개 글 본문 */
.nw{max-width:1000px;margin:0 auto;padding-bottom:28px}
.nw-hero{padding:48px 36px 0;background:linear-gradient(160deg,#f2f3ff 0%,#fff 72%)}
.nw-meta{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:13px}
.nw-hero h1{font-size:clamp(26px,3.6vw,38px);line-height:1.25;margin:14px 0 10px;color:var(--ink);letter-spacing:-1px;font-weight:800}
.nw-lead{font-size:17px;color:var(--sub);margin:0 0 26px;max-width:700px}
.nw-shot{border-radius:12px;overflow:hidden;border:1px solid #dcdff0;box-shadow:0 20px 50px rgba(16,16,40,.14);background:#fff}
.nw-shot .bar{height:24px;background:#f0f1f6;display:flex;gap:6px;align-items:center;padding:0 10px;border-bottom:1px solid #e3e5ee}
.nw-shot .bar i{width:9px;height:9px;border-radius:50%;background:#d3d6e0}
.nw-sec{padding:34px 36px 0}
.nw-sec h2{font-size:20px;margin:0 0 16px;color:var(--ink);font-weight:800;letter-spacing:-.4px}
.nw-pts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.nw-pt{border:1px solid var(--hair);border-radius:12px;overflow:hidden;background:#fff}
.nw-pt .im{height:136px;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--hair)}
.nw-pt .im img{width:100%;height:100%;object-fit:cover;object-position:left top}
.nw-pt .c{padding:14px 16px}
.nw-pt .ic{font-size:19px}
.nw-pt b{display:block;margin:6px 0 4px;font-size:15px;color:var(--ink)}
.nw-pt p{color:var(--sub);font-size:14px;line-height:1.65}
.nw-steps{list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:10px}
.nw-steps li{display:flex;gap:12px;align-items:flex-start}
.nw-steps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;margin-top:1px}
.nw-note{margin:26px 36px 0;padding:14px 18px;border-radius:10px;background:var(--acc-soft);border:1px solid var(--acc-line);color:var(--sub);font-size:14px}
.nw-ill{height:100%;min-height:136px;display:grid;place-items:center;font-size:42px;color:#fff;background:linear-gradient(135deg,#2638ff,#7c3aed)}
.nw-shot .nw-ill{min-height:280px;font-size:68px}

.ft-more{max-width:1000px;margin:20px auto 0;padding:26px 36px 0;border-top:1px solid var(--hair)}
.ft-more h2{font-size:17px;color:var(--ink);margin-bottom:12px}
.ft-more ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft-more li a{font-weight:600}
.ft-more li a:hover{color:var(--acc)}
.ft-all{display:inline-block;margin-top:14px;color:var(--acc)!important;font-weight:700}

/* 목록 */
.ft-list{max-width:1120px;margin:0 auto;padding:48px 24px 60px}
.ft-list h1{font-size:clamp(28px,4vw,42px);color:var(--ink);letter-spacing:-1.2px;font-weight:800;margin-bottom:26px}
.ft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ft-cd{display:block;border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}
.ft-cd:hover{box-shadow:0 14px 34px rgba(16,16,40,.12);transform:translateY(-2px)}
.ft-cd .im{display:block;height:170px;overflow:hidden;background:var(--paper);border-bottom:1px solid var(--hair)}
.ft-cd .im img{width:100%;height:100%;object-fit:cover;object-position:left top}
.ft-cd .im .nw-ill{min-height:170px}
.ft-cd .c{display:block;padding:15px 17px 18px}
.ft-cd b{display:block;margin:8px 0 6px;font-size:16.5px;color:var(--ink);line-height:1.4}
.ft-cd .p{display:block;color:var(--sub);font-size:14px;line-height:1.6;margin-bottom:8px}
.ft-cd .d{color:var(--faint);font-size:12.5px}

.ft-foot{border-top:1px solid var(--hair);margin-top:40px;padding:26px 0 34px;color:var(--faint);font-size:13px}

@media (max-width:760px){
  .ft-top .ft-wrap{gap:14px;height:58px;padding:0 16px}
  .ft-logo img{height:26px}
  .ft-nav a:not([href="/features/"]){display:none}
  .ft-try{padding:7px 13px;font-size:13px}
  .nw-hero,.nw-sec,.ft-more{padding-left:16px;padding-right:16px}
  .nw-hero{padding-top:30px}
  .nw-note{margin-left:16px;margin-right:16px}
  .nw-pts,.ft-grid{grid-template-columns:1fr}
  .ft-list{padding:30px 16px 40px}
  .ft-wrap{padding:0 16px}
}