/* ─── DragonRaid 공식 홈페이지 ───
   수치·색상 = 피그마 export 값 그대로. 데스크톱 기본 + 768 이하 모바일 */
:root {
  --primary: #1478E0;
  --shop-cta: #F5A623;
  --shop-cta-hover: #D68910;
  --dark: #12161D;
  --page-bg: #F2F4F7;
  --card: #FFFFFF;
  --line: #DDE1E8;
  --t-title: #343A46;
  --t-body: #4A5160;
  --t-sub: #7A8394;
  --t-cap: #9AA3B2;
  --gold: #C4A15A;
  --pill-line: #C9CFDA;
  --tag-notice: #1478E0;
  --tag-event: #00C9B7;
  --tag-update: #27AE60;
  --tag-maint: #E67E22;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
  background: var(--page-bg);
  color: var(--t-title);
  font-size: 15px;
  word-break: keep-all;        /* 한글 어절 단위 줄바꿈 */
  overflow-wrap: break-word;   /* 그래도 넘치면 강제 분리 */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* 초광폭: 스테이지 1920 중앙 고정 */
.stage { max-width: 1920px; margin: 0 auto; background: var(--page-bg); overflow: hidden; position: relative; }
.inner { width: 1280px; max-width: calc(100% - 32px); margin: 0 auto; }

/* ── 탭바 (D h72 / M h56) ── */
.tabbar { position: sticky; top: 0; z-index: 100; height: 72px; background: var(--page-bg); border: 0; box-shadow: 0 2px 10px rgba(18,22,29,.07); display: flex; align-items: center; justify-content: center; }
/* 상단바는 웹스토어(.ws-bar)와 같이 화면 폭 전체를 쓴다 — 1920 을 넘는 화면에서
   두 사이트의 로고 위치가 어긋나지 않게. 본문은 .stage 가 1920 에서 잡아 준다. */
.tabbar .inner { width: 100%; max-width: none; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; gap: 48px; height: 100%; }
.tabbar .logo img { height: 44px; width: auto; }
.tabbar nav { flex: 1; display: flex; align-items: center; gap: 8px; }
.tabbar nav a { height: 72px; display: flex; align-items: center; padding: 0 20px; font-size: 16px; font-weight: 500; color: var(--t-title); }
.tabbar nav a:hover { color: var(--primary); }
.shop-cta { height: 48px; border-radius: 8px; background: var(--shop-cta); color: var(--t-title); font-weight: 700; font-size: 16px; display: flex; align-items: center; padding: 0 28px; }
.shop-cta:hover { background: var(--shop-cta-hover); }
/* 언어 선택 — 탭바·푸터·모바일 메뉴 공통 (Footer / Desktop 779:501 규격으로 통일) */
/* 피그마 테두리가 안쪽 정렬이라 115×38 안에 1px이 포함됨 → 패딩에서 1px씩 뺌 */
.lang-sel, .f-lang { border-radius: 100px; border: 1px solid var(--line); display: flex;
  align-items: center; padding: 9px 15px 9px 17px; gap: 8px; font-family: inherit;
  font-size: 15px; line-height: 18px; font-weight: 500; color: var(--t-title);
  background: none; cursor: pointer; }
.menu-btn { display: none; background: none; border: 0; padding: 4px; cursor: pointer; color: var(--t-title); }

/* Material Symbols Rounded 공통 — 피그마 Icons 세트(579:594) 경로 그대로 */
.mi { width: 24px; height: 24px; flex: none; fill: currentColor; display: block; }
.mi-globe { width: 16px; height: 16px; }
.mi-caret { width: 16px; height: 16px; transform: rotate(180deg); transition: transform .15s; }   /* 드롭다운이 위로 열림 → 위 방향 */
.dd-open .mi-caret { transform: rotate(0deg); }   /* 드롭다운 열림 = 닫기 방향 */

/* ── 스크롤 페이드인 (site.js가 대상 자동 지정) ── */
.fade-in { opacity: 0; transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease; will-change: opacity, transform; }
.fade-in.in { opacity: 1; transform: none; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* ── 모바일 메뉴 (Mobile Menu (Open) 16:31) ── */
.m-menu { display: none; }
.m-menu[hidden] { display: none; }
@media (max-width: 768px) {
  /* z 96 = 쿠키 배너(95) 위, 탭바(100) 아래 — 햄버거는 계속 눌릴 수 있어야 함 */
  .m-menu { position: fixed; top: 56px; left: 0; right: 0; bottom: 0; z-index: 96;
    background: #fff; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
  .m-menu[hidden] { display: none; }
  .m-row { height: 60px; flex: none; display: flex; align-items: center; padding: 0 20px;
    border-bottom: 1px solid var(--line); font-size: 16px; line-height: 19px;
    font-weight: 700; color: var(--t-title); }
  .m-lang-row { margin-top: auto; height: 64px; flex: none; display: flex; align-items: center;
    justify-content: space-between; padding: 0 20px; border-top: 1px solid var(--line); }
  .m-lang-label { font-size: 14px; line-height: 17px; font-weight: 500; color: var(--t-cap); }
  body.menu-open { overflow: hidden; }
}

/* ── 히어로 (D h920) ── */
/* 시안 기준: 히어로 1760x1080. 로고·태그라인은 상단 중앙, 배지 줄은 하단 중앙에 겹친다. */
.hero { height: 1080px; background: #CDEBFB; overflow: hidden; padding: 0; position: relative; }
/* 시안 8:18 — 키비주얼이 히어로 폭(최대 1920)을 꽉 채우고, 1920 을 넘는 영역은 배경만 깔린다 */
.hero-media { position: absolute; inset: 0;
  background: linear-gradient(180deg, #8BD5F6, #8BD5F6 50%, #CDEBFB); overflow: hidden; }
.hero-media .kv { position: absolute; inset: 0;
  background: url("../assets/img/hero_desktop.jpg?v=3") center/cover no-repeat; }
/* 로고는 폭이 아니라 높이로 잡는다 — ko/ja/en 의 비율이 서로 달라(1.61 / 1.38 / 1.61)
   폭을 고정하면 언어마다 높이가 달라져 아래 태그라인과 겹친다. 시안 아트 높이 254 기준. */
.hero-media .hero-logo { position: absolute; top: 104px; left: 50%; margin-left: -506px;
  transform: none; height: 254px; width: auto; }
/* 히어로 로고 — 언어별 3종. i18n.js 가 <html lang> 을 박아 주므로 CSS 만으로 갈린다.
   기본은 영어, 한국어·일본어만 덮어쓴다(나머지 11개 언어는 영어 로고). */
.hero-media .hero-logo { content: url("../assets/img/hero_logo_en.svg"); }
html[lang="ko"] .hero-media .hero-logo { content: url("../assets/img/hero_logo_ko.svg"); }
html[lang="ja"] .hero-media .hero-logo { content: url("../assets/img/hero_logo_ja.svg"); }

.hero-content { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-content > * { pointer-events: auto; }
.hero-content .sub { position: absolute; top: 382px; left: 50%;
  transform: translateX(calc(-50% - 274px)); width: 604px; text-align: center;
  font-size: 24px; font-weight: 600; color: #fff; }
/* 배지 줄 — 높이 고정, 간격은 배지 높이의 1/4 이상(공식 클리어스페이스 규정) */
.dl-row { --badge-h: 56px; position: absolute; top: 441px; left: 50%;
  transform: translateX(calc(-50% - 274px));
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.dl-row .game-icon { display: none; }   /* 시안에서 숨김 */
.dl-badge { display: block; line-height: 0; }
.dl-badge img { display: block; width: auto; height: var(--badge-h); }

/* ── 소개 영상 ── */
.video-sec { background: linear-gradient(180deg, #CDEBFB, var(--page-bg) 78%, var(--page-bg));
  display: flex; flex-direction: column; align-items: center; padding: 120px 0; }
.video-sec .video { width: 1280px; max-width: calc(100% - 32px); aspect-ratio: 16 / 9; border-radius: 12px;
  overflow: hidden; display: block; position: relative; cursor: pointer; background: #000; }
.video-sec .video .poster { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-sec .video .poster img { width: 100%; height: 100%; object-fit: cover; }
.video-sec .video .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 88px; height: 62px; border: 0; border-radius: 16px; background: rgba(18,22,29,.72);
  cursor: pointer; transition: background .2s; }
.video-sec .video .play::after { content: ""; position: absolute; left: 50%; top: 50%;
  transform: translate(-40%,-50%); border-style: solid; border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff; }
.video-sec .video:hover .play { background: #FF0033; }
.video-sec .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-sec .video.on .poster, .video-sec .video.on .play { display: none; }

/* ── 새소식 (아치+패턴은 배경 이미지에 포함) ── */
.news-sec { position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; padding: 180px 0 160px; }
.news-sec .bg-pattern { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.news-sec .bld { position: absolute; z-index: 1; }
.news-sec .bld.r { width: 500px; top: 0; right: -56px; }
.news-sec .bld.l { width: 300px; top: 159px; left: -21px; }
.news-content { width: 1280px; max-width: calc(100% - 32px); display: flex; flex-direction: column;
  align-items: center; gap: 72px; z-index: 3; }
.sec-head { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
/* 피그마 테두리는 안쪽 정렬이라 195×60 안에 2px가 포함됨 → 패딩에서 2px씩 뺌 */
.sec-pill { border-radius: 999px; border: 2px solid #fff; padding: 10px 54px;
  font-size: 30px; line-height: 36px; font-weight: 700; color: #fff; }   /* 2+10+36+10+2 = 60 */
.sec-head .sub { font-size: 18px; line-height: 22px; color: #fff; }
.news-cards { align-self: stretch; display: flex; align-items: flex-start; gap: 24px; }
/* 새소식 이미지 칸은 운영툴 이미지 규격(2.4:1 인게임 프레임)에 맞춰 비율 고정 — 높이는 폭을 따라간다.
   카드 높이는 썸네일 + 본문(고정 178)으로 정해진다 (문서 1328) */
.news-card { flex: 1; height: auto; border-radius: 12px; background: var(--card); border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s; }
.news-card:hover { box-shadow: 0 8px 24px rgba(18,22,29,.14); }   /* 시안 State=Hover */
.news-card[hidden] { display: none; }   /* display:flex 가 [hidden] 을 덮으므로 명시 */
.news-card .thumb { aspect-ratio: 2.4 / 1; flex: none; background: var(--line); display: flex; align-items: center;
  justify-content: center; font-size: 13px; line-height: 16px; color: var(--t-cap); }
.news-card .cbody { flex: none; height: 178px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 20px 20px 24px; gap: 12px; }
.news-card .info { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.news-card h3 { font-size: 18px; line-height: 22px; font-weight: 700; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tag { height: 28px; border-radius: 100px; background: #fff; border: 1px solid; display: inline-flex;
  align-items: center; padding: 0 12px; gap: 5px; font-size: 12px; font-weight: 500; }
.tag.notice { color: var(--tag-notice); border-color: var(--tag-notice); }
.tag.event  { color: var(--tag-event);  border-color: var(--tag-event); }
.tag.update { color: var(--tag-update); border-color: var(--tag-update); }
.tag.maint  { color: var(--tag-maint);  border-color: var(--tag-maint); }
.ico { width: 16px; height: 16px; flex: none; }   /* 인라인 SVG 기본 크기 */
.ico-x { width: 10px; height: 10px; flex: none; }
.tag .ico { width: 12px; height: 12px; }
.period .ico { width: 14px; height: 14px; }
.period { display: flex; align-items: center; gap: 5px; font-size: 13px; line-height: 16px;
  font-weight: 500; color: var(--t-sub); white-space: nowrap; }   /* 기간은 절대 줄바꿈 금지 */
.news-card .date { font-size: 13px; line-height: 16px; color: var(--t-cap); }
.pill-btn { border-radius: 999px; background: #fff; padding: 14px 40px; font-size: 16px;
  line-height: 19px; font-weight: 700; color: var(--primary); display: inline-block; }   /* 14+19+14 = 47 */

/* ── 게임 정보 ~ 월드맵 공통 밴드 ── */
.band { background: linear-gradient(180deg, #367BDE, #54B1ED); overflow: visible;
  display: flex; flex-direction: column; align-items: center; position: relative;
  container-type: inline-size; }
.band .texture { position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 1476px;
  object-fit: cover; z-index: 0; }
.trail { position: absolute; z-index: 1; pointer-events: none; height: auto; }
.trail-dragon { position: absolute; object-fit: contain; z-index: 5; }
.float-dragon { position: absolute; object-fit: contain; z-index: 9; }

.game-info { align-self: stretch; display: flex; flex-direction: column; align-items: center;
  padding: 120px 0; position: relative; gap: 64px; z-index: 8; }
.lore-card { --tower-h: 720px; width: 1280px; max-width: calc(100% - 32px); box-shadow: 0 6px 24px rgba(31,41,56,.08);
  border-radius: 20px; background: #fff; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; position: relative; text-align: center; }
.lore-card .tower { align-self: stretch; height: var(--tower-h); border-radius: 20px 20px 0 0; object-fit: cover; }
.lore-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--tower-h);
  background: linear-gradient(rgba(255,255,255,0) 68%, #fff 100%); pointer-events: none; z-index: 1; }
.lore-logo { position: absolute; top: 479px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center; gap: 24px; z-index: 3; }
.lore-logo .line { display: flex; align-items: center; gap: 8px; }
.lore-logo .dia { width: 9px; height: 9px; background: #fff; transform: rotate(-45deg); }
.lore-logo .bar { width: 200px; height: 2px; background: #fff; }
.lore-logo img { width: 190px; }
.lore-body { align-self: stretch; display: flex; flex-direction: column; align-items: center;
  padding: 0 120px 120px; gap: 18px; }
.lore-label { width: 104.4px; height: 112px; position: relative; }
.lore-label img { position: absolute; top: calc(50% - 41px); left: calc(50% - 29.01px); width: 58px; height: 82px; }
.lore-label span { position: absolute; top: 52.1px; left: 26.69px; font-size: 16px; font-weight: 700;
  letter-spacing: 3px; color: var(--gold); }
.lore-body h2 { font-size: 34px; font-weight: 700; }
.lore-body p { width: 860px; max-width: 100%; font-size: 16px; line-height: 180%; color: var(--t-body); }
.lore-end { padding-bottom: 44px; }
.lore-end img { width: 26px; }
.leaf { position: absolute; object-fit: contain; }

/* 시안 Card Divider 60x184 — 상하 여백 60 + 그래픽 64. 카드 사이 전부 같은 값이다 */
.card-div { display: flex; justify-content: center; z-index: 3; padding: 60px 0; }
.card-div img { height: 64px; opacity: .95; }

.feat-card { width: 1280px; max-width: calc(100% - 32px); box-shadow: 0 12px 32px rgba(31,59,110,.1);
  border-radius: 24px; background: var(--page-bg); display: flex; flex-direction: column;
  align-items: center; padding: 280px 96px 72px; position: relative; gap: 18px; }
.card-pill { border-radius: 999px; border: 1.5px solid var(--pill-line); display: flex; align-items: center;
  padding: 12px 32px; gap: 12px; font-size: 24px; font-weight: 700; color: var(--t-title); }
.card-pill img { width: 16px; height: 16px; }
.feat-card .lead { width: 640px; max-width: 100%; font-size: 18px; font-weight: 700; line-height: 165%; text-align: center; }
.feat-card .desc { width: 640px; max-width: 100%; font-size: 16px; line-height: 180%; color: var(--t-body); text-align: center; }
/* 캐릭터는 카드 위로 그림 높이의 20%만 — 흰 카드가 이미지 뒤 80%까지 올라옴.
   이미지 비율이 달라 카드별 top이 다름 (레이드 1296×886 · 코스튬 809×605) */
.feat-card .ground { position: absolute; left: 50%; transform: translateX(-50%);
  width: 300px; height: 44px; border-radius: 50%; background: rgba(52,58,70,.1); }
.feat-card .chara { position: absolute; left: 50%; transform: translateX(-50%);
  width: 400px; height: 400px; object-fit: contain; }
.cg-raid .feat-card .chara { top: -118px; }
.cg-raid .feat-card .ground { top: 197px; }
.game-info > .feat-card .chara { top: -110px; }   /* 코스튬 */
.game-info > .feat-card .ground { top: 217px; }

.split-card { width: 1280px; max-width: calc(100% - 32px); height: 440px; box-shadow: 0 10px 26px rgba(31,59,110,.1);
  border-radius: 24px; background: #fff; overflow: hidden; display: flex; align-items: center; }
.split-card.rev { flex-direction: row-reverse; }
.split-card .txt { flex: 1; align-self: stretch; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 56px; gap: 24px; }
.split-card .card-pill { padding: 10px 28px; font-size: 22px; }
.split-card .txt p { align-self: stretch; font-size: 16px; line-height: 185%; color: var(--t-body); }
.split-card .pic { width: 43.75%; height: 446px; flex: none; object-fit: cover; }   /* 560/1280 — 카드와 같은 비율로 축소 */

/* 월드맵 */
.worldmap { align-self: stretch; display: flex; flex-direction: column; align-items: center;
  padding: 120px 0 150px; position: relative; gap: 36px; z-index: 8; text-align: center; }
.deco-row { display: flex; align-items: center; gap: 16px; }
.deco-row .s { width: 22px; }
.deco-row .c { width: 68px; }
.worldmap .sec-head { gap: 24px; }                                  /* 새소식은 32, 월드맵은 24 */
.worldmap .sub { font-size: 16px; line-height: 19px; color: #fff; }
/* 지도 임베드 — 크기는 더미 이미지 시안값 그대로(1280×720·r28). 카드 배경에 옛 더미 이미지를 깔아
   iframe 이 뜨기 전(lazy)·지도 서버 장애 시에도 빈 네모가 아니라 지도 그림이 보이게 한다. */
.map-card { width: 1280px; max-width: calc(100vw - 32px); height: 720px; border-radius: 28px; overflow: hidden;
  background: #dbe9f6 url(../assets/img/worldmap.png) center / cover no-repeat; }
.map-card iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ── 다운로드 CTA ── */
.cta-sec { height: 913px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 72px 16px 80px; gap: 16px; background: url("../assets/img/download.jpg") top/cover no-repeat;
  text-align: center; }
.cta-sec .logo-wrap { padding: 20px 0; }
.cta-sec .logo-wrap img { width: 477px; }
.cta-sec .copy { font-size: 40px; font-weight: 700; color: var(--t-title); line-height: 1.35; }
.cta-sec .badges-wrap { height: 365px; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; padding-top: 230px; }
.badges { --badge-h: 56px; --badge-space: calc(var(--badge-h) / 4);
  display: flex; align-items: center; flex-wrap: wrap; }
.badges a { display: inline-flex; padding: var(--badge-space); line-height: 0; }
.badges img { display: block; width: auto; height: var(--badge-h); }
/* App Store 출시 전 임시 배지 (시안 badge/appstore-comingsoon) — 반투명 흰 판 + 사과 + Coming Soon.
   높이는 옆 배지와 같은 --badge-h, 폭·글자 크기는 자리마다 시안값(--soon-w, --soon-fs) */
.badge-soon { --soon-w: 182px; --soon-fs: 15px; display: inline-flex; align-items: center; justify-content: center;
  gap: calc(var(--badge-h) * .14); width: var(--soon-w); height: var(--badge-h); padding: 0 8px;
  border-radius: 8px; background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  color: #fff; font-size: var(--soon-fs); font-weight: 700; line-height: 1.2; white-space: nowrap;
  cursor: default; user-select: none; }
.badge-soon .soon-apple { flex: none; width: auto; height: calc(var(--badge-h) * .375); }
.badges .badge-soon { margin: var(--badge-space); }
.dl-row .badge-soon { --soon-fs: 16px; }

/* ── 푸터 ── */
.footer { background: var(--page-bg); display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 40px 0; }
.footer-content { width: 1280px; max-width: calc(100% - 32px); display: flex; flex-direction: column;
  align-items: center; padding-bottom: 32px; gap: 20px; }
.footer .fs-logo { width: 162px; }
.f-links { display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
.f-links a { font-size: 15px; font-weight: 500; color: var(--t-title); }
.sns { display: flex; gap: 16px; }
.sns a { width: 40px; height: 40px; border-radius: 100px; background: rgba(52,58,70,.1);
  display: flex; align-items: center; justify-content: center; }
.sns img { width: 20px; height: 20px; }
/* .f-lang 규격은 상단 공통 규칙(.lang-sel, .f-lang)에 통합됨 */

/* ── 언어 드롭다운 (WS Language Dropdown 597:5328 규격 공용) ── */
.lang-dd { position: fixed; z-index: 120; width: 280px; padding: 8px 0; border-radius: 14px;
  background: #fff; box-shadow: 0 6px 24px -4px rgba(0,0,0,.18); }
.lang-dd .dd-item { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 11px 16px; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14px; line-height: 17px; color: var(--t-title); }
.lang-dd .dd-item:hover { background: var(--page-bg); }
.lang-dd .dd-item.on { background: #EDF6FD; font-weight: 700; color: var(--primary); }
.lang-dd .dd-check { width: 16px; height: 16px; flex: none; color: var(--primary); }
.biz { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  font-size: 13px; color: var(--t-sub); }
.copyright { font-size: 13px; color: var(--t-sub); }

/* ── 떠 있는 UI ── */
.to-top { position: fixed; right: 40px; bottom: 100px; width: 48px; height: 48px; border-radius: 100px;
  background: var(--dark); box-shadow: 0 4px 12px rgba(18,22,29,.25); display: flex; align-items: center;
  justify-content: center; z-index: 90; border: 0; cursor: pointer; color: #fff; }
.to-top .mi { width: 20px; height: 20px; }
.cookie { position: fixed; left: 0; right: 0; bottom: 0; height: 80px; background: rgba(255,255,255,.72);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(18,22,29,.12);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center; padding: 24px 40px; z-index: 95; color: var(--t-body); }
.cookie .cinner { width: 1280px; max-width: 100%; display: flex; align-items: center; gap: 32px; font-size: 15px; }
.cookie p { flex: 1; }
.cookie a { text-decoration: underline; color: var(--primary); }
.cookie .acts { display: flex; gap: 10px; font-size: 14px; }
.cookie button { height: 36px; border-radius: 8px; padding: 0 16px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; }
.cookie .deny { border: 1.5px solid var(--primary); background: none; color: var(--primary); }
.cookie .accept { border: 0; background: var(--primary); color: #fff; }

/* ── 서브 페이지 ── */
.page-wrap { width: 880px; max-width: calc(100% - 32px); margin: 0 auto; padding: 72px 0 120px; }
.page-wrap h1 { font-size: 34px; margin-bottom: 40px; }
.page-wrap h2 { font-size: 18px; margin-bottom: 12px; }
.page-wrap p { font-size: 15px; line-height: 1.8; }
.placeholder { background: var(--card); border: 1px dashed var(--line); border-radius: 16px;
  padding: 48px 32px; color: var(--t-cap); text-align: center; font-size: 15px; line-height: 1.8; }
/* ── 새소식 목록 (News List 44:186 / 46:474) ── */
.nl-head { display: flex; justify-content: center; padding: 56px 0 24px;
  position: relative; z-index: 41; }   /* 필터 패널을 딤 위로 — 아래 .filter-wrap 주석 참고 */
.nl-head-inner { width: 880px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 10px; }
.nl-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nl-title-row h1 { font-size: 36px; line-height: 43px; font-weight: 700; color: var(--t-title); }
.applied-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.applied-row[hidden] { display: none; }
.applied-row .tag { font-family: inherit; cursor: pointer; }   /* × = 그 조건만 해제 */

.filter-wrap { position: relative; flex: none; z-index: 41; }   /* 딤 위로 (버튼·패널 모두) */
.filter-btn { height: 40px; border-radius: 8px; background: #fff; border: 1px solid var(--line);
  padding: 0 16px; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 14px; line-height: 17px; font-weight: 500; color: var(--t-body); cursor: pointer; }
.filter-btn .ico { width: 16px; height: 16px; flex: none; }
.filter-btn.on { color: var(--primary); border-color: var(--primary); }
.filter-btn .fcount { min-width: 18px; height: 18px; border-radius: 100px; background: var(--primary);
  color: #fff; font-size: 11px; font-weight: 700; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; }
.filter-btn .fcount[hidden] { display: none; }

/* 패널 열릴 때 뒤 목록 40% 딤 — 밖 클릭 시 변경 버리고 닫힘 */
.nl-dim { position: fixed; inset: 0; z-index: 30; background: rgba(18, 22, 29, .4); }
.nl-dim[hidden] { display: none; }
.filter-panel { position: absolute; top: 48px; right: 0; z-index: 41; width: 360px; padding: 20px;
  border-radius: 12px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 12px 32px rgba(18,22,29,.12); display: flex; flex-direction: column; gap: 20px; }
.filter-panel[hidden] { display: none; }
.fp-label { font-size: 13px; line-height: 16px; font-weight: 500; color: var(--t-cap); }
.fp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fp-chips .tag { font-family: inherit; cursor: pointer; }
.fp-div { height: 1px; background: var(--line); }
.fp-sort { display: flex; flex-direction: column; gap: 12px; }
.fp-sort label { display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 15px; line-height: 18px; color: var(--t-body); }
.fp-sort input { appearance: none; width: 18px; height: 18px; flex: none; margin: 0;
  border-radius: 100px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.fp-sort input:checked { border: 5px solid var(--primary); }
.fp-sort input:checked + span { font-weight: 500; color: var(--t-title); }
.fp-acts { display: flex; gap: 10px; }
.btn-line, .btn-fill { flex: 1; height: 36px; border-radius: 8px; font-family: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; }
.btn-line { border: 1.5px solid var(--primary); background: #fff; color: var(--primary); }
.btn-fill { border: 0; background: var(--primary); color: #fff; }

/* 태그 칩 선택 상태 */
.tag.all { color: var(--t-sub); border-color: var(--line); }
.tag.on { color: #fff; }
.tag.all.on    { background: var(--primary);    border-color: var(--primary); }
.tag.notice.on { background: var(--tag-notice); border-color: var(--tag-notice); }
.tag.event.on  { background: var(--tag-event);  border-color: var(--tag-event); }
.tag.update.on { background: var(--tag-update); border-color: var(--tag-update); }
.tag.maint.on  { background: var(--tag-maint);  border-color: var(--tag-maint); }

/* 행형 카드 (Layout=Row) */
.nl-list-wrap { display: flex; justify-content: center; padding-bottom: 40px; }
.nl-list { width: 880px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 12px; }
.news-card.row { flex: none; flex-direction: row; align-items: center; height: 230px;
  gap: 28px; padding: 24px 28px 24px 24px; }
.news-card.row .thumb { width: 280px; flex: none; border-radius: 8px; font-size: 12px; }
.news-card.row .cbody { flex: 1; min-width: 0; height: 182px; padding: 0; }
.news-card.row h3, .news-card.row .desc { align-self: stretch; }
.news-card.row .desc { font-size: 15px; line-height: 150%; color: var(--t-body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* 페이지네이션 */
.nl-paging { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 64px; }
.nl-paging a { width: 40px; height: 40px; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 18px; font-weight: 500; color: var(--t-body); }
.nl-paging a.on { background: var(--primary); color: #fff; font-weight: 700; }
.nl-paging a.arw { color: var(--t-sub); font-weight: 400; }
.nl-paging[hidden] { display: none; }   /* 1페이지면 숨김 */

/* ── 새소식 상세 (News Detail 54:186 / 54:825) ── */
.article { padding: 48px 0 72px; display: flex; justify-content: center; }
.article-inner { width: 760px; max-width: calc(100% - 32px); display: flex; flex-direction: column; gap: 16px; }
.a-back { font-size: 14px; line-height: 17px; font-weight: 500; color: var(--primary); }
.a-date { font-size: 14px; line-height: 17px; color: var(--t-cap); }
.article-inner h1 { font-size: 34px; line-height: 140%; font-weight: 700; color: var(--t-title); }
.article-inner > .tag { align-self: flex-start; }
.tag .ico { width: 12px; height: 12px; flex: none; }
.a-period { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 18px;
  font-weight: 500; color: var(--t-sub); }
.a-period .ico { width: 16px; height: 16px; flex: none; }
.img-ph { height: 360px; border-radius: 12px; background: var(--page-bg); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 17px;
  color: var(--t-cap); }
.img-ph.top-img { height: auto; aspect-ratio: 2.4 / 1; }   /* .hero 는 히어로 섹션과 충돌하므로 사용 금지 */
.article-inner .top-img img { aspect-ratio: 2.4 / 1; object-fit: cover; }   /* 실제 이미지도 같은 비율로 */
.a-body { font-size: 16px; line-height: 170%; color: var(--t-body); }
.btn-ws { align-self: flex-start; height: 48px; border-radius: 8px; background: var(--shop-cta);
  padding: 0 28px; display: inline-flex; align-items: center; font-size: 16px; line-height: 19px;
  font-weight: 700; color: var(--t-title); }
.btn-ws:hover { background: var(--shop-cta-hover); }
.a-div { height: 1px; background: var(--line); }
.share { display: flex; align-items: center; gap: 12px; }
.share .s-label { font-size: 14px; line-height: 17px; font-weight: 500; color: var(--t-sub); }
.s-btn { width: 40px; height: 40px; flex: none; border-radius: 100px; background: #fff;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  color: var(--t-body); cursor: pointer; }
.s-btn svg { width: 16px; height: 16px; }
.s-btn.kakao { background: #FEE51E; border-color: #FEE51E; color: #3A2929; }
.s-btn.kakao svg { width: 18px; height: 18px; }
.pn { display: flex; gap: 20px; padding-top: 40px; }
.pn-col { flex: 1; min-width: 0; max-width: calc(50% - 10px); display: flex; flex-direction: column; gap: 8px; }
.pn-col[hidden] + .pn-col { margin-left: auto; }   /* 이전 글이 없어도 다음 글은 오른쪽 반 칸 */
.pn-label { font-size: 16px; line-height: 19px; font-weight: 700; color: var(--t-title); }
.pn-label.right { text-align: right; }
.pn .news-card { flex: none; height: auto; }
.btn-primary { display: inline-block; background: var(--primary); color: #fff; font-weight: 700;
  font-size: 16px; padding: 14px 40px; border-radius: 999px; }
.err-wrap { text-align: center; padding: 140px 16px 160px; }
.err-wrap .code { font-size: 96px; font-weight: 700; color: var(--primary); }
.err-wrap h1 { font-size: 24px; margin: 16px 0 10px; }
.err-wrap p { color: var(--t-sub); font-size: 15px; margin-bottom: 36px; }
/* 점검 페이지 — 태그 칩 .maint 와 겹치지 않도록 .maint-page 로 분리 */
.maint-page { background: var(--dark); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.maint-page .box { text-align: center; padding: 40px 16px; }
.maint-page h1 { color: #fff; font-size: 28px; margin: 28px 0 12px; }
.maint-page p { color: var(--t-cap); font-size: 15px; line-height: 1.8; }

/* ══ 모바일 (768 이하) — export 모바일 값 ══ */
/* ── 중간 해상도 규칙 (시안은 1920·360만 정의 — 그 사이 전환)
   ※ 반드시 기본 규칙보다 뒤에 있어야 이긴다 (같은 특이성은 소스 순서 승부) ── */
@media (max-width: 1100px) {
  /* 홈 새소식: 3열이 좁아져 내용이 꺾이기 전에 세로 스택으로 전환 */
  .news-cards { flex-direction: column; align-self: stretch; gap: 16px; }
  .news-cards .news-card { flex: none; align-self: stretch; }
}
@media (max-width: 900px) {
  /* 가로형 콘텐츠 카드: 텍스트가 짓눌리기 전에 세로 스택으로 전환 */
  .split-card, .split-card.rev { height: auto; flex-direction: column; }
  .split-card .pic { width: 100%; height: 240px; order: -1; }
}

@media (max-width: 768px) {
  body { font-size: 14px; }
  .inner { max-width: calc(100% - 32px); }

  .tabbar { height: 56px; }
  .tabbar .inner { gap: 12px; justify-content: flex-start; padding: 0 16px; }
  .shop-cta { margin-left: auto; }
  .tabbar .logo img { height: 32px; }
  .tabbar nav, .tabbar .lang-sel { display: none; }   /* 모바일 메뉴 안의 .lang-sel 은 보여야 함 */
  .menu-btn { display: block; }
  .shop-cta { height: 36px; padding: 0 16px; font-size: 14px; }

  /* 시안 기준: 모바일 히어로 360x515(= 원본 750x1072 비율), 데스크탑과 동일한 오버레이 구조.
     높이를 고정하지 않고 비율로 잡는다 — 폭이 360 보다 넓은 기기에서 좌우가 잘리는 대신
     세로가 같이 길어져 키비주얼 전체가 보인다. 겹치는 요소도 전부 비율값(시안 360x515 기준). */
  .hero { height: auto; aspect-ratio: 750 / 1072; flex: none; padding: 0; }
  .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero-media .kv { position: absolute; inset: 0; background-image: url("../assets/img/hero_mobile.jpg?v=2"); }
  .hero-media .hero-logo { position: absolute; top: 1.9417%; left: 2.2222%;
    margin-left: 0; transform: none; height: 22.1359%; width: auto; }
  /* 태그라인은 로고 폭 안에서 두 줄로 접힌다 */
  /* 시안은 줄바꿈이 박혀 2줄이지만 실제 문구는 i18n 한 줄이라, 폭으로 2줄이 되게 잡는다 */
  .hero-content .sub { top: 26.0194%; left: 10.2778%; right: auto; width: 40%;
    transform: none; font-size: 12px; }
  .dl-row .badge-soon { --soon-w: 130px; --soon-fs: 13px; }
  .dl-row { --badge-h: 40px; top: auto; bottom: 2.9126%; left: 0; right: 0;
    transform: none; display: flex; align-items: center; justify-content: center; gap: 10px; }

  .video-sec { padding: 56px 16px; }
  .video-sec .video { width: 100%; border-radius: 12px; }   /* 높이는 aspect-ratio 16:9 로 자동 */
  .video-sec .video .play { width: 60px; height: 42px; border-radius: 12px; }
  .video-sec .video .play::after { border-width: 8px 0 8px 14px; }

  .news-sec { padding: 88px 16px 72px; }
  .news-content { gap: 28px; width: 100%; max-width: 100%; }
  .sec-head { gap: 16px; }
  .sec-pill { padding: 6px 34px; font-size: 20px; line-height: 24px; }   /* 2+6+24+6+2 = 40 */
  .sec-head .sub { font-size: 15px; line-height: 18px; }
  .news-cards { flex-direction: column; align-self: stretch; gap: 16px; }
  .news-card { flex: none; align-self: stretch; height: auto; }
  /* 썸네일은 데스크톱과 같은 2.4:1 비율 고정 */
  .news-sec .bld.r { width: 160px; top: 14px; left: 220px; right: auto; }
  .news-sec .bld.l { width: 110px; top: 150px; left: -26px; }
  .pill-btn { padding: 12px 32px; font-size: 15px; line-height: 18px; }   /* 12+18+12 = 42 */

  .band .texture { height: 1100px; }
  .game-info { padding: 56px 16px; gap: 24px; }
  .lore-card { --tower-h: 230px; align-self: stretch; width: 100%; max-width: 100%; border-radius: 16px; box-shadow: 0 4px 16px rgba(31,41,56,.08); }
  .lore-card .tower { border-radius: 16px 16px 0 0; }
  .lore-logo { top: 147.43px; gap: 14px; }
  .lore-logo .dia { width: 7px; height: 7px; background: var(--gold); }
  .lore-logo .bar { width: 56px; background: var(--gold); }
  .lore-logo img { width: 120px; }
  .lore-body { padding: 48px 22px 40px; gap: 12px; }
  .lore-label { width: 80.2px; height: 86px; }
  .lore-label img { top: 0; left: calc(50% - 45px); width: 90px; height: 86px; }
  .lore-label span { top: 38.8px; left: 18.08px; font-size: 14px; letter-spacing: 2.5px; }
  .lore-body h2 { font-size: 24px; }
  .lore-body p { width: 100%; font-size: 15px; }
  .lore-end { padding-bottom: 28px; }
  .lore-end img { width: 20px; }

  .card-div { padding: 16px 0; }   /* 카드 간 128 — 여백 24 + 장식 80 + 여백 24 */   /* 시안 45x128 */
  .card-div img { height: 48px; }
  .feat-card { width: 100%; max-width: 100%; border-radius: 20px; padding: 160px 22px 36px;
    box-shadow: 0 8px 20px rgba(31,59,110,.1); }
  .card-pill { padding: 8px 20px; font-size: 18px; }
  .card-pill img { width: 12px; height: 12px; }
  .feat-card .lead { width: 100%; font-size: 15px; }
  .feat-card .desc { width: 100%; font-size: 14px; text-align: left; }
  .feat-card .ground { width: 170px; height: 26px; }
  .feat-card .chara { width: 220px; height: 220px; }
  .cg-raid .feat-card .chara { top: -65px; }
  .cg-raid .feat-card .ground { top: 107px; }
  .game-info > .feat-card .chara { top: -61px; }   /* 코스튬 */
  .game-info > .feat-card .ground { top: 119px; }

  .split-card, .split-card.rev { width: 100%; max-width: 100%; height: auto; flex-direction: column;
    border-radius: 20px; box-shadow: 0 8px 20px rgba(31,59,110,.1); }
  .split-card .pic { width: 100%; height: 240px; order: -1; }
  .split-card .txt { padding: 24px 20px 28px; gap: 16px; }
  .split-card .card-pill { padding: 8px 20px; font-size: 18px; }
  .split-card .txt p { font-size: 14px; line-height: 180%; }

  .worldmap { padding: 72px 16px 88px; gap: 24px; }
  .deco-row { gap: 12px; }
  .deco-row .s { width: 16px; }
  .deco-row .c { width: 48px; }
  .worldmap .sec-head { gap: 16px; }
  .worldmap .sub { font-size: 15px; line-height: 18px; }
  /* 모바일: 흰 테두리 카드(8px) 안에 220px 지도 — 시안의 더미 이미지 규격 그대로 */
  .map-card { width: 100%; height: auto; border-radius: 20px; background: #fff; padding: 8px; overflow: visible; }
  .map-card iframe { height: 220px; border-radius: 14px;
    background: #dbe9f6 url(../assets/img/worldmap.png) center / cover no-repeat; }

  .cta-sec { height: 560px; padding: 48px 16px 40px; gap: 8px; }
  .cta-sec .logo-wrap { padding: 0; }
  .cta-sec .logo-wrap img { width: 170px; }
  .cta-sec .copy { font-size: 28px; }
  .cta-sec .badges-wrap { height: auto; padding-top: 110px; }
  .badges { --badge-h: 48px; flex-direction: column; }
  .badges .badge-soon { --soon-w: 160px; --soon-fs: 14px; }

  .footer { padding: 32px 16px; gap: 20px; }
  .footer-content { width: 100%; max-width: 100%; gap: 20px; padding-bottom: 0; }
  .footer .fs-logo { width: 127px; }
  .f-links { gap: 10px 20px; }
  .f-links a { font-size: 14px; }
  .sns { gap: 10px; }
  .sns a { width: 36px; height: 36px; }
  .lang-sel, .f-lang { padding: 8px 13px 8px 15px; font-size: 14px; line-height: 17px; }
  .lang-sel .caret, .f-lang .caret { font-size: 12px; }
  .biz { font-size: 12px; }   /* 시안 1480:917 — 모바일도 왼쪽 정렬 */
  .copyright { font-size: 12px; }

  .to-top { right: 16px; bottom: 116px; }
  .cookie { height: auto; padding: 20px; }
  .cookie .cinner { flex-direction: column; align-items: stretch; gap: 20px; font-size: 14px; }
  .cookie .acts { gap: 8px; }
  .cookie button { flex: 1; }

  /* 새소식 상세 */
  .article { padding: 24px 16px 48px; }
  .article-inner { width: 100%; max-width: 100%; gap: 14px; }
  .article-inner h1 { font-size: 24px; }
  .a-period { font-size: 14px; line-height: 17px; }
  .img-ph { height: 180px; }
  .img-ph.top-img { height: auto; }
  .a-body { font-size: 15px; }
  .btn-ws { align-self: stretch; justify-content: center; }
  .pn { gap: 12px; padding-top: 28px; }
  .pn-col { max-width: calc(50% - 6px); }
  .pn-label { font-size: 14px; line-height: 17px; }
  .pn .news-card { height: auto; }

  /* 새소식 목록 */
  .nl-head { padding: 24px 16px 16px; }
  .nl-head-inner { width: 100%; max-width: 100%; gap: 8px; }
  .nl-title-row h1 { font-size: 26px; line-height: 31px; }
  .filter-panel { width: calc(100vw - 32px); }
  .nl-list-wrap { padding: 0 16px 24px; }
  .nl-list { width: 100%; max-width: 100%; gap: 10px; }
  .news-card.row { flex-direction: column; align-items: stretch; height: auto; gap: 0; padding: 0; }
  .news-card.row .thumb { width: auto; border-radius: 0; font-size: 13px; }
  .news-card.row .cbody { flex: none; height: 220px; padding: 20px 20px 24px; }
  .news-card.row .desc { font-size: 14px; }
  .nl-paging { gap: 6px; padding-bottom: 40px; }
  .nl-paging a { width: 36px; height: 36px; font-size: 14px; line-height: 17px; }

  .page-wrap h1 { font-size: 24px; }
  .err-wrap .code { font-size: 64px; }
}

/* ── 카드 그룹: 궤적·드래곤·잎이 카드에 종속 (피그마 Card Group과 1:1) ──
   좌표는 카드 폭 기준. left/width 는 %, top/height 는 cqw(카드 폭의 1%)라
   카드가 줄면 궤적도 가로·세로 같은 비율로 함께 줄어든다. */
.card-group { align-self: stretch; position: relative; container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; }
/* 그리기 순서 역전 — 장식(궤적·드래곤)이 위쪽 카드를 침범해도 항상 그 카드 "뒤"로 지나가게.
   위 카드일수록 높은 z. 코스튬 카드(그룹 없음)도 사이 값으로 편입 */
.cg-lore { z-index: 7; }
.cg-raid { z-index: 6; }
.game-info > .feat-card { z-index: 5; }
.cg-wanted { z-index: 4; }
.cg-dispatch { z-index: 3; }
.cg-tower { z-index: 2; }
.card-group > .lore-card,
.card-group > .feat-card,
.card-group > .split-card { position: relative; z-index: 2; }
.card-group > .trail { z-index: 0; max-width: none; }   /* 전역 img max-width:100% 무효화 */
.card-group > .trail-dragon { z-index: 1; transform-origin: 0 0; }
.card-group > .leaf { z-index: 3; }

.cg-lore .lf-sharp { left: 31.875%; top: 10.938cqw; width: 2.917%; height: 3.125cqw; }
.cg-lore .lf-blur { left: 91.927%; top: 9.792cqw; width: 11.979%; height: 10cqw; }
.cg-raid .t1 { left: -3.125%; top: -17.865cqw; width: 106.25%; }
.cg-raid .d1 { left: 3.385%; top: -16.823cqw; width: 5%; height: 5cqw; transform: rotate(10deg); }
.cg-wanted .t2 { left: -3.125%; top: -18.646cqw; width: 106.25%; }
.cg-wanted .d2 { left: 90%; top: .417cqw; width: 6.585%; height: 6.585cqw; transform: rotate(33.68deg); }
.cg-dispatch .t3 { left: -3.125%; top: .469cqw; width: 106.25%; }
.cg-tower .t4 { left: -3.125%; top: 14.427cqw; width: 106.25%; }
.cg-tower .d3 { left: 36.354%; top: 19.844cqw; width: 5%; height: 5cqw; transform: rotate(-2.93deg); }

/* 부유 드래곤 — f02는 밴드(1920) 기준, f03은 흑화단의 탑 카드 그룹 기준(콘텐츠를 따라다님) */
.float-dragon.f02 { left: 81.25%; top: -8.594cqw; width: 15.625%; }
/* 돼지 — 카드 하단에 px 고정: 폭이 바뀌어도 항상 카드 바로 아래 */
.cg-tower .f03 { left: 70px; top: calc(100% + 16px); width: 270px; }

@media (max-width: 768px) {
  /* 모바일 장식은 시안(360) px 값으로 전부 고정 — 세로 위치는 카드 기준,
     폭이 변해도 미끄러지지 않는다 */
  .cg-lore .lf-sharp { left: 2px; top: 154px; width: 36px; height: 39px; }
  .cg-lore .lf-blur { left: 290px; top: 94px; width: 110px; height: 92px; }
  .cg-raid .t1 { left: -40px; top: -174px; width: 440px; content: url("../assets/img/trail/m1.svg"); }
  .cg-raid .d1 { left: 130px; top: -188px; width: 56px; height: 56px; transform: rotate(8deg); }
  .cg-wanted .t2 { left: -30px; top: -93px; width: 440px; content: url("../assets/img/trail/m2.svg"); }
  .cg-wanted .d2 { left: 162px; top: -109px; width: 56px; height: 56px; transform: rotate(-10deg); }
  .cg-dispatch .t3 { display: none; }
  .cg-tower .t4 { left: -20px; top: calc(100% + 6px); width: 430px; content: url("../assets/img/trail/m3.svg"); }
  .cg-tower .d3 { left: 167px; top: calc(100% + 30px); width: 56px; height: 56px; transform: rotate(6deg); }
  .float-dragon.f02 { left: 266px; top: -71px; width: 130px; }
  .cg-tower .f03 { left: -19px; top: calc(100% + 12px); width: 118px; }
}

@media (max-width: 768px) {
  .hero-media .hero-logo { order: -1; }
}