:root{--bg:#08070b;--panel:#101017;--text:#f6f3ff;--muted:#aaa5b6;--line:#2a2234;--purple:#9d5cff;--purple2:#6d34d9;--green:#69e0a4;--max:1180px;--shadow:0 24px 70px rgba(0,0,0,.38)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 75% -10%,rgba(119,56,209,.18),transparent 36%),var(--bg);color:var(--text);font-family:Inter,Pretendard,"Noto Sans KR",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button{font:inherit}.container{width:min(var(--max),calc(100% - 36px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(8,7,11,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{height:72px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;gap:11px;font-weight:850;letter-spacing:.08em}.brand-mark{width:34px;height:34px;border:1px solid rgba(157,92,255,.65);border-radius:11px;display:grid;place-items:center;color:#c9a8ff;background:linear-gradient(135deg,rgba(157,92,255,.17),rgba(157,92,255,.03))}.brand small{display:block;font-size:9px;color:#797383;letter-spacing:.15em;margin-top:-2px}.site-nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px;color:#c6c1cc}.site-nav a:hover{color:#fff}.nav-cta{background:var(--purple);color:#fff!important;padding:10px 16px;border-radius:12px;font-weight:800}.menu-button{display:none;margin-left:auto;background:none;color:#fff;border:1px solid var(--line);border-radius:10px;width:42px;height:42px}.hero{padding:86px 0 62px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}.eyebrow{color:#aa82ef;letter-spacing:.15em;font-size:12px;font-weight:800;text-transform:uppercase}.hero h1{font-size:clamp(46px,6.2vw,82px);line-height:1.03;margin:15px 0 24px;letter-spacing:-.045em}.hero h1 span{color:#b98aff}.hero-copy{color:#b8b2c1;font-size:18px;max-width:650px;margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 25px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:13px;font-weight:800}.button.primary{background:linear-gradient(135deg,var(--purple),var(--purple2));border-color:transparent}.button.secondary{background:#111017}.status-row{display:flex;gap:10px;flex-wrap:wrap}.pill{font-size:12px;color:#a7a1ad;border:1px solid var(--line);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.025)}.pill b{color:#fff;margin-left:4px}.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 12px var(--green)}.hero-visual{position:relative}.hero-visual:before{content:"";position:absolute;inset:10% 2% -6% 10%;background:rgba(117,62,210,.28);filter:blur(70px);z-index:-1}.hero-visual img{border-radius:26px;border:1px solid rgba(190,137,255,.28);box-shadow:var(--shadow);aspect-ratio:4/5;object-fit:cover;object-position:center 45%}.caption{position:absolute;left:18px;right:18px;bottom:18px;padding:16px 18px;border-radius:16px;background:rgba(7,7,12,.78);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09)}.caption b{display:block;font-size:17px}.caption span{color:#a49eac;font-size:13px}.section{padding:82px 0}.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0));border-top:1px solid rgba(255,255,255,.045);border-bottom:1px solid rgba(255,255,255,.045)}.section-head{max-width:720px;margin-bottom:34px}.section-head h2{font-size:clamp(30px,4vw,48px);line-height:1.15;margin:10px 0 12px;letter-spacing:-.03em}.section-head p{color:var(--muted);margin:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-card{background:linear-gradient(145deg,#121018,#0c0b10);border:1px solid var(--line);border-radius:18px;padding:24px;min-height:190px;transition:.2s ease}.feature-card:hover{transform:translateY(-3px);border-color:#4c3865}.feature-icon{font-size:28px}.feature-card h3{font-size:18px;margin:15px 0 7px}.feature-card p{color:#a7a1ad;font-size:14px;margin:0}.feature-card a{color:#c6a2ff;font-size:13px;font-weight:800;display:inline-block;margin-top:14px}.loop{display:grid;grid-template-columns:repeat(8,1fr);gap:8px}.loop-step{position:relative;text-align:center;padding:18px 8px;border:1px solid var(--line);border-radius:14px;background:#0f0e14;min-height:102px;display:flex;flex-direction:column;justify-content:center}.loop-step b{font-size:13px}.loop-step span{font-size:24px;margin-bottom:5px}.loop-step:not(:last-child):after{content:"›";position:absolute;right:-9px;top:34%;z-index:2;color:#7550a5;font-size:24px}.gallery{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:1fr 1fr;gap:14px}.shot{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#111;min-height:220px}.shot:first-child{grid-row:1/3}.shot img{width:100%;height:100%;object-fit:cover;transition:.35s ease}.shot:hover img{transform:scale(1.025)}.shot:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(4,3,7,.88))}.shot-label{position:absolute;left:17px;right:17px;bottom:15px;z-index:2}.shot-label b{display:block}.shot-label small{color:#b2abb9}.start-card{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;background:linear-gradient(135deg,#171020,#0e0c13);border:1px solid #3c2b50;border-radius:24px;padding:34px}.steps{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.steps span{background:#0d0c11;border:1px solid var(--line);border-radius:10px;padding:8px 11px;color:#c8c1cd;font-size:13px}.start-card h2{font-size:30px;margin:4px 0}.start-card p{color:#aaa4b2;margin:0}.simple-page{padding:66px 0 90px}.page-hero{padding:42px 0 30px}.page-hero h1{font-size:clamp(38px,5vw,62px);margin:8px 0 12px;letter-spacing:-.04em}.page-hero p{max-width:700px;color:var(--muted)}.command-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.command-cat{border:1px solid var(--line);background:#0f0e14;border-radius:18px;padding:23px}.command-cat h2{font-size:19px;margin:0 0 13px}.cmd-list{display:flex;flex-wrap:wrap;gap:8px}.cmd{display:inline-flex;align-items:center;gap:6px;background:#08080b;border:1px solid #2a2530;border-radius:9px;padding:7px 9px;font-size:12px;color:#d3cddd;cursor:pointer}.cmd:hover{border-color:#62488a}.command-note{margin-top:22px;padding:18px;border-radius:15px;background:#14101c;border:1px solid #332642;color:#b9b2c1}.milestones{display:grid;gap:13px}.milestone{display:grid;grid-template-columns:120px 1fr;gap:20px;border:1px solid var(--line);border-radius:17px;background:#0f0e14;padding:20px}.milestone .ver{color:#b589fb;font-weight:900}.milestone h2{font-size:19px;margin:0 0 6px}.milestone p{color:#aaa4b2;margin:0;font-size:14px}.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:26px 0 40px;color:#7f7887;font-size:12px}.footer-wrap{display:flex;justify-content:space-between;gap:20px}.footer-links{display:flex;gap:16px}.copy-toast{position:fixed;right:18px;bottom:18px;background:#17131d;border:1px solid #49365d;color:#fff;padding:11px 15px;border-radius:11px;opacity:0;transform:translateY(6px);pointer-events:none;transition:.2s;z-index:100}.copy-toast.show{opacity:1;transform:none}@media(max-width:920px){.hero-grid{grid-template-columns:1fr}.hero-visual{max-width:620px}.feature-grid{grid-template-columns:repeat(2,1fr)}.loop{grid-template-columns:repeat(4,1fr)}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}.shot:first-child{grid-row:auto;grid-column:1/3;min-height:330px}.command-cats{grid-template-columns:1fr}.site-nav{display:none;position:absolute;top:72px;left:18px;right:18px;flex-direction:column;align-items:stretch;background:#0e0c12;border:1px solid var(--line);border-radius:16px;padding:12px;box-shadow:var(--shadow)}.site-nav.open{display:flex}.site-nav a{padding:8px 10px}.menu-button{display:block}}@media(max-width:620px){.container{width:min(100% - 24px,var(--max))}.hero{padding:58px 0 42px}.hero h1{font-size:46px}.hero-copy{font-size:16px}.feature-grid{grid-template-columns:1fr}.loop{grid-template-columns:repeat(2,1fr)}.gallery{grid-template-columns:1fr}.shot:first-child{grid-column:auto;min-height:270px}.shot{min-height:230px}.start-card{grid-template-columns:1fr;padding:26px}.start-card .button{width:100%}.milestone{grid-template-columns:1fr;gap:6px}.footer-wrap{flex-direction:column}.brand small{display:none}}

/* =========================================================
   ABADDON v18.0.1 CLEAN EDITION
   IMAGE RATIO / SHOWCASE HOTFIX
   - Keep original screenshots visible without destructive crop
   - Stabilize hero mount card width
   - Normalize desktop / tablet / mobile gallery geometry
   ========================================================= */

/* FINAL hero: the mount card is 4:5, so preserve that ratio and
   prevent the visual column from becoming oversized on wide screens. */
.hero-grid{
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:52px;
}
.hero-visual{
  width:min(100%,520px);
  justify-self:end;
}
.hero-visual img{
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
}

/* IN GAME showcase
   1) Mount catalog gets its real 1600:1060-ish landscape ratio.
   2) Other UI previews use a stable 16:9 frame.
   3) Screenshots are CONTAINed instead of cropped. */
.gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto;
  gap:18px;
  align-items:start;
}
.shot{
  min-height:0;
  aspect-ratio:16/9;
  background:
    radial-gradient(circle at 50% 45%,rgba(126,72,210,.10),transparent 55%),
    #08070d;
}
.shot:first-child{
  grid-column:1/-1;
  grid-row:auto;
  aspect-ratio:1600/1060;
}
.shot img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#07060b;
}
.shot:first-child img{
  object-fit:contain;
}
.shot:hover img{
  transform:scale(1.01);
}

/* Keep labels readable without hiding too much of the full screenshot. */
.shot:after{
  inset:62% 0 0;
  background:linear-gradient(transparent,rgba(4,3,7,.94));
}
.shot-label{
  left:18px;
  right:18px;
  bottom:16px;
}

/* Desktop: avoid the hero card dwarfing the intro copy. */
@media(min-width:1200px){
  .hero-visual{max-width:500px}
}

/* Tablet */
@media(max-width:920px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .hero-visual{
    width:min(100%,480px);
    justify-self:center;
    margin-inline:auto;
  }
  .gallery{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .shot:first-child{
    grid-column:1/-1;
  }
}

/* Mobile */
@media(max-width:620px){
  .hero-visual{
    width:min(100%,430px);
  }
  .gallery{
    grid-template-columns:1fr;
    gap:14px;
  }
  .shot,
  .shot:first-child{
    grid-column:auto;
    aspect-ratio:16/10;
  }
  .shot:first-child{
    aspect-ratio:1600/1060;
  }
  .shot:after{
    inset:58% 0 0;
  }
}

/* Very narrow phones */
@media(max-width:420px){
  .shot-label{
    left:13px;
    right:13px;
    bottom:11px;
  }
  .shot-label b{font-size:14px}
  .shot-label small{font-size:11px}
}

/* v18.1 PUBLIC LAUNCH pages */
.api-card{border:1px solid var(--line);background:#0f0e14;border-radius:18px;padding:22px}.api-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.leader-row{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}.leader-rank{font-size:20px;font-weight:900;color:#ba8cff}.leader-meta{color:var(--muted);font-size:13px}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.tab{cursor:pointer;background:#111017;color:#d6cfdd;border:1px solid var(--line);border-radius:10px;padding:9px 13px}.tab.active{border-color:#8255bd;background:#1b1326}.profile-card{display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:center}.profile-avatar{width:96px;height:96px;border-radius:24px;object-fit:cover;background:#17131e;border:1px solid var(--line)}.notice{padding:14px 16px;border:1px solid #3c2b50;border-radius:13px;background:#14101c;color:#c8c0d0}.policy{max-width:850px}.policy h2{margin-top:34px}.policy li{color:#b6afbd;margin:6px 0}@media(max-width:720px){.api-grid{grid-template-columns:1fr}.profile-card{grid-template-columns:1fr}.leader-row{grid-template-columns:42px 1fr}.leader-row>div:last-child{grid-column:2}}