@import url('_tokens.css');
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--tx);font-family:"Pretendard","Apple SD Gothic Neo","Noto Sans JP","Noto Sans KR",system-ui,sans-serif;font-size:var(--font-md);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.hdr{background:var(--bg2);border-bottom:1px solid var(--bd);padding:0;position:sticky;top:0;z-index:100}
.hdr-inner{max-width:900px;margin:0 auto;padding:0 20px;height:50px;display:flex;align-items:center;gap:10px}
.hdr-logo{font-size:var(--font-md);font-weight:var(--fw-bold);color:var(--ac)}
.hdr-sep{color:var(--bd2);font-size:var(--font-md)}
.hdr-cur{font-size:var(--font-xs);color:var(--mu)}
.wrap{max-width:900px;margin:0 auto;padding:32px 20px 60px}
/* Hero */
.g-hero{padding:32px 0 28px;border-bottom:1px solid var(--bd);margin-bottom:var(--space-7)}
.g-eyebrow{font-size:var(--font-xs);font-weight:var(--fw-bold);color:var(--ac);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.g-title{font-size:var(--font-2xl);font-weight:var(--fw-extrabold);color:var(--tx);line-height:1.2;letter-spacing:-.5px;margin-bottom:10px}
.g-title span{color:var(--ac)}
.g-desc{font-size:var(--font-sm);color:var(--mu);line-height:1.7;max-width:660px}
.g-meta{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap}
.g-badge{font-size:var(--font-xs);font-weight:var(--fw-bold);padding:3px 10px;border-radius:20px}
/* 목차 */
.toc{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:18px 22px;margin-bottom:28px}
.toc-title{font-size:var(--font-xs);font-weight:var(--fw-bold);color:var(--mu);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px}
.toc ol{padding-left:18px;display:flex;flex-direction:column;gap:4px}
.toc li a{font-size:var(--font-sm);color:var(--mu);transition:.15s}
.toc li a:hover{color:var(--ac)}
/* 섹션 */
.g-sec{margin-bottom:36px}
.g-sec h2{font-size:var(--font-xl);font-weight:var(--fw-extrabold);color:var(--tx);margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--ac);display:inline-block}
.g-sec h3{font-size:var(--font-md);font-weight:var(--fw-bold);color:var(--tx);margin:18px 0 8px}
.g-sec p{font-size:var(--font-sm);color:var(--mu);line-height:1.8;margin-bottom:12px}
.g-sec ul,.g-sec ol{padding-left:20px;margin-bottom:12px}
.g-sec li{font-size:var(--font-sm);color:var(--mu);line-height:1.75;margin-bottom:4px}
.g-sec li strong{color:var(--tx)}
/* 스텝 박스 */
.steps{display:flex;flex-direction:column;gap:10px;margin:16px 0}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px}
.step-num{width:28px;height:28px;border-radius:50%;background:var(--ac);color:var(--on-ac);font-size:var(--font-sm);font-weight:var(--fw-extrabold);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.step-body{flex:1}
.step-title{font-size:var(--font-sm);font-weight:var(--fw-bold);color:var(--tx);margin-bottom:3px}
.step-desc{font-size:var(--font-sm);color:var(--mu);line-height:1.6}
/* CTA 버튼 */
.g-cta{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--ac);color:var(--on-ac);padding:12px 22px;border-radius:9px;font-size:var(--font-sm);font-weight:var(--fw-bold);margin:8px 0;transition:.15s}
.g-cta:hover{opacity:.87}
.g-cta-outline{background:rgba(99,102,241,.08);border:2px solid var(--ac);color:var(--ac-light);font-weight:var(--fw-bold)}
.g-cta-outline:hover{background:rgba(99,102,241,.2);color:var(--tx);border-color:var(--ac-light)}
/* 현재 무료 목록 */
.now-free-sec{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px;margin-bottom:28px}
.now-free-head{display:flex;align-items:center;gap:10px;margin-bottom:var(--space-4)}
.now-free-dot{width:8px;height:8px;border-radius:50%;animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
.now-free-title{font-size:var(--font-md);font-weight:var(--fw-bold);color:var(--tx)}
.now-free-cnt{font-size:var(--font-xs);color:var(--mu);margin-left:auto}
.nf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.nf-card{background:var(--bg3);border:1px solid var(--bd2);border-radius:8px;overflow:hidden;transition:.15s}
.nf-card:hover{border-color:rgba(99,102,241,.4)}
.nf-card a{display:flex;flex-direction:column;height:100%}
.nf-thumb{aspect-ratio:16/9;background:var(--bg4);overflow:hidden}
.nf-thumb img{width:100%;height:100%;object-fit:cover}
.nf-thumb-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:var(--font-xs);color:var(--mu)}
.nf-body{padding:9px 11px}
.nf-name{font-size:var(--font-sm);font-weight:var(--fw-semibold);color:var(--tx);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.nf-orig{font-size:var(--font-xs);color:var(--mu);text-decoration:line-through}
.nf-free{font-size:var(--font-xs);font-weight:var(--fw-extrabold);color:var(--green)}
.nf-until{font-size:var(--font-xs);color:var(--mu);margin-top:3px}
/* 앱 카드 (iOS/Android) */
.nf-app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.nf-app{background:var(--bg3);border:1px solid var(--bd2);border-radius:8px;transition:.15s}
.nf-app:hover{border-color:rgba(99,102,241,.4)}
.nf-app a{display:flex;gap:11px;padding:13px 14px;align-items:center}
.nf-app-icon{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0;background:var(--bg4)}
.nf-app-icon-ph{width:52px;height:52px;border-radius:12px;background:var(--bg4);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:var(--font-lg);color:var(--mu)}
.nf-app-info{flex:1;min-width:0}
.nf-app-name{font-size:var(--font-sm);font-weight:var(--fw-bold);color:var(--tx);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nf-app-dev{font-size:var(--font-xs);color:var(--mu);margin-bottom:4px}
.nf-app-price{display:flex;align-items:center;gap:6px}
/* FAQ */
.faq{display:flex;flex-direction:column;gap:var(--space-2);margin-top:12px}
.faq-item{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden}
.faq-q{width:100%;text-align:left;background:none;border:none;padding:14px 18px;font-size:var(--font-sm);font-weight:var(--fw-semibold);color:var(--tx);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq-q:hover{background:rgba(255,255,255,.02)}
.faq-q::after{content:"▾";color:var(--mu);font-size:var(--font-xs);flex-shrink:0;transition:.2s}
.faq-item.open .faq-q::after{transform:rotate(180deg)}
.faq-a{display:none;padding:0 18px 14px;font-size:var(--font-sm);color:var(--mu);line-height:1.75}
.faq-item.open .faq-a{display:block}
/* 관련 링크 */
.related{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:12px}
.related-card{background:var(--bg2);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;transition:.15s}
.related-card:hover{border-color:var(--ac)}
.related-card a{display:flex;flex-direction:column;gap:5px}
.related-icon{font-size:var(--font-xl)}
.related-name{font-size:var(--font-sm);font-weight:var(--fw-bold);color:var(--tx)}
.related-desc{font-size:var(--font-xs);color:var(--mu)}
/* 반응형 */
@media(max-width:600px){
  .g-title{font-size:var(--font-xl)}
  .nf-grid{grid-template-columns:1fr 1fr}
  /* Phase 2-B: Android app card 2-column mobile grid */
  .nf-app-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
  .nf-app a{padding:10px 10px;gap:var(--space-2)}
  .nf-app-icon,.nf-app-icon-ph{width:44px;height:44px;border-radius:10px}
  .nf-app-icon-ph{font-size:var(--font-md)}
  .nf-app-name{font-size:var(--font-xs);white-space:normal;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;max-height:2.6em}
  .nf-app-dev{font-size:var(--font-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
  .nf-app-price{flex-wrap:wrap;gap:4px}
  .nf-orig{font-size:var(--font-xs)}
  .nf-free{font-size:var(--font-xs)}
  .nf-until{font-size:var(--font-xs);display:block;width:100%;margin-top:1px}
  .related{grid-template-columns:1fr 1fr}
}
@media(max-width:380px){
  /* Very narrow - slightly more compact */
  .nf-app a{padding:8px 9px}
  .nf-app-icon,.nf-app-icon-ph{width:40px;height:40px}
  .nf-app-name{font-size:var(--font-xs)}
  .nf-app-dev{font-size:var(--font-xs)}
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
footer{border-top:1px solid var(--bd);padding:20px;text-align:center;color:var(--bd);font-size:var(--font-xs);margin-top:var(--space-7)}
footer a{color:var(--mu)}

/* Phase 7-H: 초좁은 모바일 (<= 440px) 에서 앱 카드 1열 — 380px 갤럭시 등 */
@media(max-width:440px){
  .nf-app-grid{grid-template-columns:1fr;gap:6px}
  .nf-app a{padding:9px 10px;gap:10px}
  .nf-app-icon,.nf-app-icon-ph{width:44px;height:44px}
  .nf-app-name{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
  .nf-grid{grid-template-columns:1fr}
}

/* Phase 7-F+: guide 페이지 enrichment + via */
.nf-enrich{display:flex;gap:6px;margin:4px 0 4px;flex-wrap:wrap;align-items:center}
.nf-mc{font-size:var(--font-xs);font-weight:var(--fw-extrabold);color:var(--tx);padding:2px 7px;border-radius:4px;text-decoration:none;min-width:22px;text-align:center;display:inline-block;line-height:1.2}
.nf-mc:hover{opacity:.85}
.nf-reviews{font-size:var(--font-xs);color:var(--brand-epic);white-space:nowrap}
.nf-dev{font-size:var(--font-xs);color:var(--mu);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.nf-via{font-size:var(--font-xs);color:var(--ac);margin:3px 0 4px;display:flex;align-items:center;gap:4px}
.nf-via span{color:var(--brand-epic);font-weight:var(--fw-semibold)}
@media(max-width:640px){
  .nf-enrich{gap:5px;margin-top:3px}
  .nf-mc{font-size:var(--font-xs);padding:2px 6px;min-width:20px}
  .nf-reviews,.nf-dev,.nf-via{font-size:var(--font-xs)}
  .nf-dev{max-width:100px}
}