/* monoca2-kr.sola-air.com — site-specific additions. Loaded after kanri.css (the shared base: tokens, header/footer,
   buttons, app-page hero pieces). Pages carry <body class="kanri m2 tint-monoca">, so the monoca amber tint
   (--t-bg / --t-line / --t-ink / --t-label / --t-accent / --t-glow) is available everywhere. */

.m2 .k-nav>a[aria-current="page"]{color:var(--k-head);font-weight:700}
.m2-official{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;color:var(--t-ink);background:var(--t-bg);border:1px solid var(--t-line);border-radius:999px;padding:8px 14px;white-space:nowrap}
.m2-official:hover{color:var(--t-ink);border-color:var(--t-accent)}
.m2-official svg{flex:none}
.m2-official .short{display:none}
.m2-lead{margin:0;max-width:460px;font-size:14px;line-height:1.8;color:var(--k-muted)}
.m2-lead b{color:var(--t-label);font-weight:700}

/* ---------- hero ---------- */
.m2-blob-1{right:-140px;top:-180px;width:540px;height:540px;background:var(--t-glow)}
.m2-blob-2{left:-160px;bottom:-200px;width:420px;height:420px;background:#dcecf5;opacity:.8}
.m2 .k-app-name{white-space:nowrap}
.m2 .k-app-id .k-icon-tile{background:#fff}
.m2 .k-app-id .k-icon-tile img{width:64px;height:64px}
.m2 .k-store{gap:12px}
.m2 .k-store .badge{height:44px}
.m2 .k-store .k-btn-ghost{min-height:44px;padding:0 16px;font-size:14px}
.m2-note{display:flex;gap:10px;align-items:flex-start;margin:0;max-width:540px;padding:12px 16px;border-radius:12px;background:var(--k-surface);border:1px solid var(--k-line);font-size:13px;line-height:1.7;color:var(--k-muted)}
.m2-note svg{flex:none;margin-top:3px;color:var(--k-brand)}
.m2-note a{font-weight:700;color:var(--k-brand-strong)}
.m2-hero-media{border-radius:36px;overflow:hidden;border:1px solid var(--t-line);background:var(--t-bg);aspect-ratio:4/3}
.m2-hero-media img,.m2-photo img,.m2-dl-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- about ---------- */
.m2-split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.m2-photo{margin:0;border-radius:28px;overflow:hidden;border:1px solid var(--t-line);aspect-ratio:4/3}
.m2-about{display:flex;flex-direction:column;gap:14px}
.m2-about p:not(.k-kicker){margin:0;font-size:15px;line-height:1.9;color:var(--k-muted)}

/* ---------- everyday / features (3-up) ---------- */
.m2-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.m2-pain{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:20px;background:#fff;border:1px solid var(--k-line)}
.m2-pain img{width:56px;height:56px;flex:none}
.m2-pain p{margin:0;font-size:14px;line-height:1.8;color:var(--k-text)}
.m2-feat{display:flex;flex-direction:column;gap:8px;padding:22px 24px;border-radius:18px;background:#fff;border:1px solid var(--k-line)}
.m2-feat svg{color:var(--t-label)}
.m2-feat h3{margin:0;font-size:16px;font-weight:700;color:var(--k-head)}
.m2-feat p{margin:0;font-size:13px;line-height:1.75;color:var(--k-muted)}

/* ---------- 3 STEP ---------- */
.m2-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.m2-step{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:22px;background:var(--t-bg);border:1px solid var(--t-line)}
.m2-step.result{background:#fff;border-color:var(--k-line)}
.m2-step-label{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--t-label)}
.m2-step.result .m2-step-label{color:var(--k-muted)}
.m2-step-media{height:220px;display:flex;justify-content:center;overflow:hidden;border-radius:14px}
.m2-step-media img{display:block;height:100%;width:auto;max-width:none}
.m2-step p{margin:0;font-size:14px;line-height:1.7;font-weight:600;color:var(--k-head)}
.m2-step.result p{font-weight:400;color:var(--k-muted)}

/* ---------- price ---------- */
.m2-price{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.m2-plan{display:flex;flex-direction:column;gap:16px;padding:30px 32px;border-radius:24px;background:#fff;border:1px solid var(--k-line)}
.m2-plan.full{background:var(--t-bg);border-color:var(--t-line)}
.m2-plan-name{font-size:12px;letter-spacing:2px;font-weight:800;color:var(--k-muted)}
.m2-plan.full .m2-plan-name{color:var(--t-label)}
.m2-plan-price{margin:0;font-size:40px;font-weight:800;letter-spacing:-1px;color:var(--k-head);line-height:1.1}
.m2-plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:1.7;color:var(--k-text)}
.m2-plan li{display:flex;gap:10px;align-items:flex-start}
.m2-plan li svg{flex:none;margin-top:3px;color:var(--k-muted)}
.m2-plan.full li svg{color:#b7791f}

/* ---------- download band ---------- */
.m2-dl{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:40px 44px;border-radius:28px;background:#16262d;color:#fff;overflow:hidden}
.m2-dl .k-blob{right:-80px;bottom:-140px;width:360px;height:360px;background:var(--t-accent);opacity:.45}
.m2-dl-copy{position:relative;display:flex;flex-direction:column;gap:16px}
.m2-dl-id{display:flex;align-items:center;gap:14px}
.m2-dl-id span{width:64px;height:64px;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.m2-dl-id img{width:48px;height:48px;object-fit:contain}
.m2-dl h2{margin:0;font-size:26px;letter-spacing:-.6px;font-weight:700;color:#fff}
.m2-dl p{margin:0;font-size:14px;line-height:1.8;color:#c5d3d8}
.m2-dl .k-btn-ghost{border-color:#fff;color:#16262d}
.m2-dl .k-btn-ghost:hover{border-color:var(--t-glow);background:var(--t-glow);color:#16262d}
.m2-dl-photo{position:relative;margin:0;border-radius:22px;overflow:hidden;aspect-ratio:4/3}

/* ---------- footer ---------- */
.m2 .k-footer-links a.official{color:var(--t-ink);font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .m2-six,.m2-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .m2-split,.m2-price,.m2-dl{grid-template-columns:1fr;gap:24px}
  .m2-dl{padding:28px 24px}
  .m2-hero-media{border-radius:24px}
}
@media (max-width:560px){
  .m2-six{grid-template-columns:1fr}
  .m2-steps{gap:12px}
  .m2-step{padding:14px;border-radius:18px}
  .m2-step-media{height:auto}
  .m2-step-media img{width:100%;height:auto;max-width:100%}
  .m2-step p{font-size:12px}
  .m2-plan{padding:22px}
  .m2-plan-price{font-size:32px}
  .m2-official{font-size:12px;padding:7px 11px}
  .m2-official .full{display:none}
  .m2-official .short{display:inline}
  .m2 .k-app-kicker{font-size:11px;letter-spacing:1px}
  .m2-note{font-size:12px}
  .m2 .k-store{gap:10px}
  .m2 .k-store .k-btn-ghost{flex:1 1 100%}
}