/* 업클릭 매거진 월간호 — .mgi- 네임스페이스 (기존 .mag-/.ugb-/.ugl- 와 충돌 없음) */
.mgi-body{margin:0;background:var(--mgi-bg)}
.mgi{
  --mgi-bg:#f7f6f2; --mgi-paper:#ffffff; --mgi-ink:#16181d; --mgi-sub:#5d6370; --mgi-line:#e4e2db;
  --mgi-accent:#2457ff; --mgi-accent-soft:#e8edff; --mgi-tint:#efece4; --mgi-noimg:linear-gradient(135deg,#dfe6ff,#f1e9ff);
  font-family:Pretendard,-apple-system,system-ui,'Apple SD Gothic Neo',sans-serif;
  color:var(--mgi-ink); background:var(--mgi-bg);
  max-width:1160px; margin:0 auto; padding:0 20px 72px; box-sizing:border-box;
  -webkit-font-smoothing:antialiased; word-break:keep-all;
}
@media (prefers-color-scheme:dark){
  .mgi-body,.mgi{--mgi-bg:#121317;--mgi-paper:#1b1d23;--mgi-ink:#eceef2;--mgi-sub:#a2a8b4;--mgi-line:#2b2e36;
    --mgi-accent:#7a95ff;--mgi-accent-soft:#232a45;--mgi-tint:#181a20;--mgi-noimg:linear-gradient(135deg,#252c48,#33284a)}
  .mgi-body{background:#121317}
}
.mgi *{box-sizing:border-box}
.mgi a{color:inherit;text-decoration:none}
.mgi img{max-width:100%}

/* 상단 */
.mgi-top{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:2px solid var(--mgi-ink)}
.mgi-brand{font-weight:800;letter-spacing:.08em;font-size:14px}
.mgi-top-r{font-size:11px;letter-spacing:.2em;color:var(--mgi-sub)}
.mgi-preview{margin-top:16px;padding:10px 14px;border-radius:8px;background:#fff4d6;color:#7a5200;font-size:13px;font-weight:600}

/* 헤더 */
.mgi-head{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:end;padding:48px 0 40px;border-bottom:1px solid var(--mgi-line)}
.mgi-issue-no{font-size:clamp(96px,14vw,168px);font-weight:900;line-height:.82;letter-spacing:-.05em;color:var(--mgi-accent)}
.mgi-issue-no small{display:block;font-size:20px;letter-spacing:0;font-weight:700;color:var(--mgi-ink);margin-top:14px}
.mgi-kicker{margin:0 0 10px;font-size:12px;letter-spacing:.18em;color:var(--mgi-sub);font-weight:600}
.mgi-title{margin:0;font-size:clamp(26px,3.4vw,40px);line-height:1.25;font-weight:800;letter-spacing:-.02em}
.mgi-intro{margin:16px 0 0;font-size:16px;line-height:1.75;color:var(--mgi-sub);max-width:640px}
.mgi-stats{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin:22px 0 0;padding:0;font-size:13px;color:var(--mgi-sub)}
.mgi-stats b{display:block;font-size:22px;color:var(--mgi-ink);font-weight:800;font-variant-numeric:tabular-nums}

/* 공통 */
.mgi-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--mgi-accent);background:var(--mgi-accent-soft);padding:3px 8px;border-radius:4px}
.mgi-meta{font-size:12px;color:var(--mgi-sub);font-variant-numeric:tabular-nums}
.mgi-noimg{display:block;background:var(--mgi-noimg)}
.mgi-cover-media,.mgi-card-media{background:var(--mgi-noimg)}
.mgi-rank{position:absolute;left:0;bottom:0;background:var(--mgi-ink);color:var(--mgi-bg);font-weight:900;font-size:28px;padding:6px 14px;letter-spacing:-.02em}
.mgi-rank.sm{font-size:16px;padding:4px 10px}

/* 커버 */
.mgi-cover{display:grid;grid-template-columns:1.35fr 1fr;gap:36px;align-items:center;padding:40px 0;border-bottom:1px solid var(--mgi-line)}
.mgi-cover-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px}
.mgi-cover-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.mgi-cover:hover .mgi-cover-img{transform:scale(1.03)}
.mgi-cover-txt h2{margin:14px 0 12px;font-size:clamp(24px,2.8vw,34px);line-height:1.3;font-weight:800;letter-spacing:-.02em}
.mgi-cover-txt p{margin:0 0 16px;font-size:15px;line-height:1.75;color:var(--mgi-sub)}

/* 섹션 */
.mgi-sec{padding:44px 0 8px}
.mgi-sec-tint{background:var(--mgi-tint);margin:40px -20px 0;padding:44px 20px 40px}
.mgi-sec-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin:0 0 22px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.mgi-sec-h span{font-size:12px;letter-spacing:.14em;color:var(--mgi-accent);font-weight:800}
.mgi-sec-h em{font-style:normal;font-size:13px;font-weight:500;color:var(--mgi-sub)}

.mgi-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 22px}
.mgi-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}

.mgi-card-media{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;margin-bottom:12px}
.mgi-card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.mgi-card:hover .mgi-card-img{transform:scale(1.04)}
.mgi-card h4{margin:8px 0 6px;font-size:16px;line-height:1.45;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mgi-card:hover h4,.mgi-eng:hover h4,.mgi-list a:hover strong{color:var(--mgi-accent)}

.mgi-eng{display:block;background:var(--mgi-paper);border-radius:6px;overflow:hidden}
.mgi-eng-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.mgi-eng>div{padding:16px 18px 20px}
.mgi-ratio{font-size:12px;font-weight:800;color:#e0406a}
.mgi-eng h4{margin:6px 0 8px;font-size:17px;line-height:1.45;font-weight:700}
.mgi-eng p{margin:0;font-size:14px;line-height:1.65;color:var(--mgi-sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.mgi-list{list-style:none;margin:0;padding:0;counter-reset:mgi}
.mgi-list li{counter-increment:mgi;border-top:1px solid var(--mgi-line)}
.mgi-list li:last-child{border-bottom:1px solid var(--mgi-line)}
.mgi-list a{display:grid;grid-template-columns:36px auto 1fr auto;gap:14px;align-items:center;padding:15px 0}
.mgi-list a::before{content:counter(mgi,decimal-leading-zero);font-weight:800;color:var(--mgi-sub);font-size:14px}
.mgi-list strong{font-size:15px;font-weight:600;line-height:1.5}

/* 아카이브 */
.mgi-archive{margin-top:56px;padding-top:24px;border-top:2px solid var(--mgi-ink)}
.mgi-archive p{margin:0 0 12px;font-size:12px;letter-spacing:.18em;color:var(--mgi-sub);font-weight:700}
.mgi-archive div{display:flex;flex-wrap:wrap;gap:8px}
.mgi-archive div a{padding:7px 14px;border:1px solid var(--mgi-line);border-radius:99px;font-size:13px}
.mgi-archive div a.on{background:var(--mgi-ink);color:var(--mgi-bg);border-color:var(--mgi-ink)}
.mgi-home{display:inline-block;margin-top:20px;font-size:14px;font-weight:600;color:var(--mgi-accent)}
.mgi-empty{padding:120px 0;text-align:center;color:var(--mgi-sub)}

/* 반응형 */
@media (max-width:960px){
  .mgi-grid4{grid-template-columns:repeat(2,1fr)}
  .mgi-grid3{grid-template-columns:1fr 1fr}
  .mgi-cover{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  .mgi{padding:0 16px 56px}
  .mgi-head{grid-template-columns:1fr;gap:12px;padding:32px 0 28px}
  .mgi-issue-no{font-size:88px}
  .mgi-grid4{gap:22px 14px}
  .mgi-grid3{grid-template-columns:1fr}
  .mgi-sec-tint{margin:32px -16px 0;padding:36px 16px}
  .mgi-list a{grid-template-columns:28px 1fr auto;gap:10px}
  .mgi-list .mgi-chip{display:none}
  .mgi-card h4{font-size:14px}
}