/* 홈(2번 시안) — aionempire.com 구성을 상점 색으로. site.css 와 같은 규칙:
   CSS 변수·grid·flex gap·inset·min() 없이 (게임 안 N샵 창 = 크롬 43). */
.accent { color: #49b8ff; }
.mono { font-family: Consolas, "D2Coding", monospace; font-size: .8rem; color: #98a2b8; letter-spacing: .02em; }
.eyebrow { font-family: Consolas, "D2Coding", monospace; font-size: .78rem; letter-spacing: .25em; color: #dfc683; text-transform: uppercase; margin: 0 0 10px; }
.eyebrow .muted { letter-spacing: 0; text-transform: none; margin-left: 8px; }
.eyebrow__line { display: inline-block; width: 28px; height: 1px; background: #dfc683; vertical-align: middle; margin-right: 12px; opacity: .7; }
.more { color: #49b8ff; text-decoration: none; font-weight: 700; font-size: .9rem; }
.tag { display: block; font-family: Consolas, "D2Coding", monospace; font-size: .72rem; letter-spacing: .12em; color: #3ecf8e; margin-bottom: 6px; }
.btn.is-off { opacity: .55; cursor: default; }

/* 첫 화면 */
.hx { position: relative; overflow: hidden; border-bottom: 1px solid rgba(150, 175, 255, .14); }
.hx__bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #0a0d15 url(../img/hero.jpg) center 30% / cover no-repeat; }
.hx__bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(90deg, rgba(10, 13, 21, .92) 0, rgba(10, 13, 21, .55) 55%, rgba(10, 13, 21, .35) 100%),
              linear-gradient(0deg, #0a0d15 0, rgba(10, 13, 21, 0) 40%); }
.hx__in { position: relative; max-width: 1200px; margin: 0 auto; padding: 120px 16px 72px; display: flex; align-items: flex-end; justify-content: space-between; }
.hx__main { max-width: 640px; }
.hx__title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 104px; line-height: 1; letter-spacing: .04em; margin: 8px 0 18px; color: #f2f4fa; }
.hx__sub { font-family: Consolas, "D2Coding", monospace; letter-spacing: .4em; color: #49b8ff; font-weight: 700; margin: 0 0 18px; }
.hx__sub .eyebrow__line { background: #49b8ff; }
.hx__lead { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; color: #f2f4fa; margin: 0 0 10px; }
.hx__desc { font-size: 1.15rem; line-height: 1.6; color: #e8ecf5; margin: 0 0 28px; }
.hx__cta { display: flex; align-items: center; flex-wrap: wrap; }
.hx__cta > * { margin: 0 12px 12px 0; }
.hx__sep { width: 1px; height: 34px; background: rgba(150, 175, 255, .25); }
.ico-btn { display: inline-block; padding: 9px 14px; border: 1px solid rgba(150, 175, 255, .25); border-radius: 8px; color: #e8ecf5; text-decoration: none; font-weight: 700; font-size: .9rem; background: rgba(18, 24, 39, .6); }
.ico-btn:hover { border-color: #49b8ff; }
.hx__info { width: 300px; margin: 0 0 12px; }
.hx__info > div { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(150, 175, 255, .18); }
.hx__info dt { color: #98a2b8; font-size: .85rem; }
.hx__info dd { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.25rem; color: #f2f4fa; }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ecf8e; margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px #3ecf8e; }
.live--soon { background: #f0b429; box-shadow: 0 0 8px #f0b429; }
.hx__open { display: block; margin-top: 4px; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; font-size: .8rem; color: #dfc683; text-align: right; }
.hx__info dd { text-align: right; }

/* 공통 섹션 */
.sec { margin: 56px 0 80px; }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; }
.sec__title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2.6rem; line-height: 1.2; margin: 0 0 16px; }
.sec__head .sec__title { margin: 0; }
.sec__desc { color: #98a2b8; max-width: 620px; margin: 0 0 28px; }

/* 최신 소식 */
.news { display: flex; align-items: flex-start; }
.news__lead { display: block; width: 50%; padding-right: 32px; color: #e8ecf5; text-decoration: none; }
.news__lead img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid rgba(150, 175, 255, .14); margin-bottom: 16px; }
.news__lead h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.8rem; margin: 0 0 10px; }
.news__lead p { color: #98a2b8; margin: 0 0 12px; }
.news__list { width: 50%; list-style: none; margin: 0; padding: 0; }
.news__list li { border-bottom: 1px solid rgba(150, 175, 255, .14); }
.news__list a { display: block; padding: 18px 0; color: #e8ecf5; text-decoration: none; }
.news__list a:hover b { color: #49b8ff; }

/* 서버 특징 */
.feat { display: flex; flex-wrap: wrap; border-top: 1px solid rgba(150, 175, 255, .14); border-left: 1px solid rgba(150, 175, 255, .14); }
.feat__cell { width: 33.333%; padding: 28px 24px; border-right: 1px solid rgba(150, 175, 255, .14); border-bottom: 1px solid rgba(150, 175, 255, .14); background: rgba(18, 24, 39, .55); color: #e8ecf5; text-decoration: none; }
.feat__ico { display: inline-block; width: 34px; height: 34px; line-height: 32px; text-align: center; font-style: normal; color: #49b8ff; border: 1px solid rgba(73, 184, 255, .4); border-radius: 6px; margin-bottom: 16px; }
.feat__cell h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.35rem; margin: 0 0 10px; }
.feat__cell p { color: #98a2b8; font-size: .92rem; margin: 0; }
.feat__cell--cta { display: flex; flex-direction: column; justify-content: space-between; background: rgba(24, 32, 51, .8); }
.feat__cell--cta:hover { background: #182033; }

/* 클래스 */
.cls { border: 1px solid rgba(150, 175, 255, .14); border-radius: 12px; background: rgba(18, 24, 39, .55); overflow: hidden; }
.cls__tabs { display: flex; border-bottom: 1px solid rgba(150, 175, 255, .14); }
/* button 은 옛 크롬에서 flex 컨테이너가 안 되므로(flexbugs #9) 안쪽은 block 으로 쌓는다 */
.cls__tab { flex: 1; display: block; text-align: center; padding: 16px 8px 12px; background: none; border: 0; border-bottom: 2px solid transparent; color: #98a2b8; font: inherit; font-weight: 700; cursor: pointer; }
.cls__tab img { display: block; width: 56px; height: 56px; margin: 0 auto 6px; opacity: .6; }
.cls__tab span { display: block; }
.cls__tab.on, .cls__tab:hover { color: #fff; border-bottom-color: #49b8ff; background: rgba(73, 184, 255, .06); }
.cls__tab.on img, .cls__tab:hover img { opacity: 1; }
.cls__pane { display: none; padding: 28px 32px; }
.cls__pane.on { display: block; }
.cls__pane h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.6rem; margin: 0 0 12px; color: #dfc683; }
.cls__pane p { color: #c9d0de; margin: 0 0 10px; }

/* 랭킹 미리보기 — 천족·마족 두 칸 */
.rank2 { display: flex; margin: 0 -12px; }
.rank2__col { width: 50%; padding: 0 12px; }
.rank2__h { margin: 0 0 10px; display: inline-block; font-size: 1rem; padding: 3px 12px; }
.rank2__col .more { display: inline-block; margin-top: 12px; }
.race { display: inline-block; font-weight: 700; border-radius: 999px; }
.race--elyos { background: rgba(73, 184, 255, .15); color: #6cc6ff; }
.race--asmodians { background: rgba(190, 110, 255, .15); color: #c890ff; }

/* 실시간 랭킹 */
.rank { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(150, 175, 255, .14); }
.rank__row { display: flex; align-items: center; padding: 14px 8px; border-bottom: 1px solid rgba(150, 175, 255, .14); }
.rank__row > * + * { margin-left: 16px; }
.rank__no { width: 32px; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; color: #98a2b8; }
.rank__row--top .rank__no { color: #dfc683; }
.rank__name { flex: 1; font-weight: 700; color: #e8ecf5; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rank__name:hover { color: #49b8ff; }
.rank__meta { color: #98a2b8; font-size: .9rem; }
.rank__lv { width: 140px; text-align: right; font-family: Georgia, "Times New Roman", serif; color: #49b8ff; font-size: 1.1rem; }
.rank__row .dot { width: 80px; margin-top: 0; }

/* 가입 유도 */
.join { margin: 40px 0 24px; padding: 48px 0 8px; border-top: 1px solid rgba(150, 175, 255, .14); }
.join__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; }
.join__title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 2.6rem; line-height: 1.2; margin: 0; }
.join__act { max-width: 440px; }
.join__act .mono { margin: 12px 0 0; }
.pick { display: flex; flex-wrap: wrap; margin: 12px -6px 0; }
.pick__item { width: calc(16.666% - 12px); margin: 0 6px 12px; padding: 14px 10px; text-align: center; background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 10px; color: #e8ecf5; text-decoration: none; font-size: .85rem; }
.pick__item:hover { border-color: rgba(111, 125, 255, .5); }
.pick__item img { display: block; width: 72px; height: 72px; margin: 0 auto 10px; border-radius: 6px; border: 1px solid rgba(223, 198, 131, .35); }
.pick__item b { display: block; font-weight: 700; line-height: 1.35; margin-bottom: 6px; }

@media (max-width: 900px) {
  .hx__title { font-size: 76px; }
  .feat__cell { width: 50%; }
  .pick__item { width: calc(33.333% - 12px); }
}
@media (max-width: 720px) {
  .hx__in { display: block; padding: 72px 16px 40px; }
  .hx__title { font-size: 56px; }
  .hx__info { width: auto; margin-top: 24px; }
  .news { display: block; }
  .rank2 { display: block; }
  .rank2__col { width: auto; margin-bottom: 24px; }
  .news__lead, .news__list { width: auto; padding: 0; }
  .news__list { margin-top: 16px; }
  .feat__cell { width: 100%; }
  .cls__tab span { font-size: .8rem; }
  .cls__tab img { width: 40px; height: 40px; }
  .cls__pane { padding: 20px 16px; }
  .join__row { display: block; }
  .join__act { margin-top: 20px; }
  .sec__title, .join__title { font-size: 2rem; }
  .pick__item { width: calc(50% - 12px); }
  .rank__meta, .rank__row .dot { display: none; }
}