/* ============================================
   MidiPad — Product Page
   ============================================ */

/* Layout */
.container { max-width:1080px; margin:0 auto; padding:0 24px; }
.section { padding:64px 0; }

/* ── Hero ── */
.mp-hero { padding:48px 0 64px; }
.mp-hero__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.mp-hero__screenshot { border-radius:12px; overflow:hidden; border:1px solid #3a3a3a; background:var(--card); }
.mp-hero__screenshot img { width:100%; display:block; }
.mp-hero__text { display:flex; flex-direction:column; gap:16px; }
.mp-hero__name { font-size:2rem; font-weight:800; line-height:1.2; }
.mp-hero__pricing { font-size:0.9rem; font-weight:600; color:var(--accent); letter-spacing:-0.01em; word-break:keep-all; }
.mp-hero__desc { color:#aaa; font-size:0.95rem; line-height:1.8; word-break:keep-all; }
.mp-hero__badges { display:flex; flex-wrap:wrap; gap:8px; }
.mp-hero__badge { padding:4px 12px; background:rgba(0,229,160,0.08); color:var(--accent); font-size:0.75rem; font-weight:600; border-radius:100px; }
.mp-hero__cta { display:inline-block; width:fit-content; margin-top:8px; padding:14px 32px; background:var(--primary); color:var(--bg); font-weight:700; font-size:1rem; border-radius:12px; text-decoration:none; transition:opacity 0.2s, transform 0.15s; }
.mp-hero__cta:hover { opacity:0.9; transform:translateY(-1px); }

/* ── Features ── */
.mp-features { background:var(--bg); }
.mp-features .section__title { font-size:1.5rem; font-weight:700; margin-bottom:32px; }
.mp-features__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.mp-feature-card { background:var(--surface); border:1px solid #3a3a3a; border-radius:12px; padding:24px; transition:border-color 0.3s; }
.mp-feature-card:hover { border-color:var(--primary); }
.mp-feature-card__icon { font-size:1.5rem; margin-bottom:12px; }
.mp-feature-card__title { font-size:0.95rem; font-weight:700; margin-bottom:8px; }
.mp-feature-card__desc { color:#aaa; font-size:0.85rem; line-height:1.7; word-break:keep-all; }

/* ── Download ── */
.mp-download { background:var(--card); }
.mp-download .section__title { font-size:1.5rem; font-weight:700; margin-bottom:8px; }
.mp-download__version { color:#aaa; font-size:0.9rem; margin-bottom:32px; }
.mp-download__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.mp-download__card { display:flex; flex-direction:column; gap:6px; background:var(--surface); border:1px solid #3a3a3a; border-radius:12px; padding:24px; text-decoration:none; color:var(--text); transition:border-color 0.3s, transform 0.15s; }
.mp-download__card:hover { border-color:var(--primary); transform:translateY(-2px); }
.mp-download__head { display:flex; align-items:center; gap:8px; }
.mp-download__icon { flex-shrink:0; display:block; }
.mp-download__icon--win { padding:0 2px; box-sizing:content-box; }
.mp-download__platform { font-size:0.95rem; font-weight:700; }
.mp-download__file { color:#aaa; font-size:0.8rem; }
.mp-download__note { color:var(--accent); font-size:0.75rem; font-weight:600; }
.mp-download__rec { display:inline-block; padding:2px 8px; background:rgba(255,118,77,0.12); color:var(--primary); font-size:0.7rem; font-weight:600; border-radius:100px; width:fit-content; }

/* ── Install ── */
.mp-install { background:var(--bg); }
.mp-install .section__title { font-size:1.5rem; font-weight:700; margin-bottom:32px; }
.mp-install__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.mp-install__block h3 { font-size:1.05rem; font-weight:700; margin-bottom:16px; color:var(--primary); }
.mp-install__block ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:12px; }
.mp-install__block li { color:#bbb; font-size:0.88rem; line-height:1.7; padding-left:16px; position:relative; word-break:keep-all; }
.mp-install__block li::before { content:''; position:absolute; left:0; top:10px; width:6px; height:6px; border-radius:50%; background:var(--primary); }
.mp-install__block strong { color:var(--text); }

/* ── Footer ── */
.mp-footer { padding:24px 20px; border-top:1px solid var(--surface); text-align:center; }
.mp-footer p { color:var(--text-muted); font-size:0.8rem; }
.mp-footer a { color:var(--text-muted); text-decoration:underline; }
.mp-footer a:hover { color:var(--text); }
.mp-footer__disclaimer { font-size:0.7rem; color:var(--text-muted); opacity:0.6; max-width:640px; margin:8px auto 0; line-height:1.5; word-break:keep-all; }

/* ── Responsive ── */
@media (max-width:767px) {
  .mp-hero__grid { grid-template-columns:1fr; gap:24px; }
  .mp-hero__name { font-size:1.5rem; }
  .mp-features__grid { grid-template-columns:1fr; }
  .mp-download__grid { grid-template-columns:1fr; }
  .mp-install__grid { grid-template-columns:1fr; gap:32px; }
  .section { padding:40px 0; }
  .mp-hero { padding:24px 0 40px; }
}

@media (min-width:768px) and (max-width:1024px) {
  .mp-features__grid { grid-template-columns:repeat(2,1fr); }
}

/* ── MidiPad 전용 ── */
.mp-hero__actions { display:flex; flex-wrap:wrap; gap:12px; }
.mp-hero__cta--ghost { background:transparent; color:var(--text); border:1px solid #3a3a3a; }
.mp-hero__cta--ghost:hover { border-color:var(--primary); }
.mp-steps { background:var(--card); }
.mp-steps .section__title { font-size:1.5rem; font-weight:700; margin-bottom:32px; }
.mp-steps__list { list-style:none; padding:0; margin:0; counter-reset:step; display:flex; flex-direction:column; gap:16px; }
.mp-steps__list li { counter-increment:step; position:relative; padding:16px 20px 16px 64px; background:var(--surface); border:1px solid #3a3a3a; border-radius:12px; color:#bbb; font-size:0.9rem; line-height:1.7; word-break:keep-all; }
.mp-steps__list li::before { content:counter(step); position:absolute; left:20px; top:16px; width:28px; height:28px; border-radius:50%; background:var(--primary); color:var(--bg); font-weight:800; font-size:0.85rem; display:flex; align-items:center; justify-content:center; }
.mp-steps__list strong { color:var(--text); }
.mp-faq { background:var(--bg); }
.mp-faq .section__title { font-size:1.5rem; font-weight:700; margin-bottom:32px; }
.mp-faq__item { border-bottom:1px solid #2a2a2a; padding:20px 0; }
.mp-faq__q { font-size:0.98rem; font-weight:700; margin-bottom:8px; }
.mp-faq__a { color:#aaa; font-size:0.88rem; line-height:1.8; word-break:keep-all; }
.mp-faq__a a, .mp-contact a { color:var(--primary); }
.mp-contact { margin-top:32px; color:#bbb; font-size:0.95rem; }