@font-face {
  font-family: "Galmuri11";
  src: url("./assets/fonts/Galmuri11.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Galmuri11";
  src: url("./assets/fonts/Galmuri11-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
      --bg: #070913;
      --card-bg: rgba(15, 23, 42, 0.92);
      --card-border: rgba(255, 255, 255, 0.1);
      --accent: #38bdf8;
      --accent-glow: rgba(56, 189, 248, 0.35);
      --purple: #a855f7;
      --purple-glow: rgba(168, 85, 247, 0.35);
      --pink: #f43f5e;
      --amber: #fbbf24;
      --green: #34d399;
      --text: #f8fafc;
      --subtext: #94a3b8;
      --font: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background-color: var(--bg);
      background-image: 
        radial-gradient(circle at 15% 15%, rgba(56, 189, 248, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 85% 85%, rgba(168, 85, 247, 0.08) 0%, transparent 40%),
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
      color: var(--text);
      font-family: var(--font);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 12px 24px;
      overflow-x: hidden;
    }

    /* 공통 네비게이션 헤더 */
    .top-nav {
      width: 100%;
      max-width: 1080px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      padding: 6px 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      backdrop-filter: blur(10px);
    }

    .back-btn {
      color: var(--subtext);
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: color 0.2s;
    }
    .back-btn:hover { color: var(--accent); }

    .nav-actions {
      display: flex;
      gap: 6px;
    }

    .icon-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--card-border);
      color: var(--text);
      padding: 5px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: all 0.2s;
    }
    .icon-btn:hover {
      background: rgba(255, 255, 255, 0.12);
      border-color: var(--accent);
    }

    /* 메인 컨테이너 */
    .game-container {
      width: 100%;
      max-width: 1080px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    /* 타이틀 배너 (시작 화면용) */
    .title-banner {
      width: 100%;
      height: 220px;
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      border: 1px solid var(--card-border);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: flex-end;
      background: #0d111e url('./assets/banner.jpg') center/cover no-repeat;
    }

    .title-banner-overlay {
      width: 100%;
      padding: 16px 20px;
      background: linear-gradient(0deg, rgba(7, 9, 19, 0.95) 0%, rgba(7, 9, 19, 0.6) 60%, transparent 100%);
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: 10px;
    }

    .title-banner h1 {
      font-size: 24px;
      font-weight: 900;
      color: #fff;
      text-shadow: 0 0 16px var(--accent-glow);
      letter-spacing: -0.5px;
    }

    .title-banner p {
      font-size: 12px;
      color: var(--subtext);
      margin-top: 2px;
    }

    /* 상단 상태 바 */
    .status-bar {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 8px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 12px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 800;
    }

    @media (max-width: 680px) {
      .status-bar {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .status-chip {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .status-label {
      font-size: 10px;
      color: var(--subtext);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .status-val {
      font-size: 13px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: monospace;
    }

    /* 메인 레이아웃 (좌측 던전 뷰 + 우측 캐릭터/인벤토리 패널) */
    .main-view {
      display: grid;
      grid-template-columns: 1fr 310px;
      gap: 10px;
    }

    @media (max-width: 880px) {
      .main-view {
        grid-template-columns: 1fr;
      }
    }

    /* 던전 뷰포트 & 캔버스 */
    .viewport-box {
      background: #050711;
      border: 1px solid var(--card-border);
      border-radius: 16px;
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }

    .canvas-wrapper {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 10;
      background: #04060d;
      overflow: hidden;
    }

    canvas#dungeonCanvas {
      width: 100%;
      height: 100%;
      display: block;
      image-rendering: pixelated;
    }

    /* 플로팅 층수 & 미니맵 인디케이터 */
    .floor-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(8px);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 800;
      color: var(--accent);
      z-index: 5;
    }

    .minimap-preview {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 90px;
      height: 70px;
      background: rgba(5, 7, 17, 0.9);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      overflow: hidden;
      z-index: 5;
    }

    canvas#minimapCanvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    /* 던전 하단 액션 바 (스킬 1~3, 퀵 물약 1~2, 대기) */
    .action-bar {
      padding: 8px 10px;
      background: rgba(15, 23, 42, 0.95);
      border-top: 1px solid var(--card-border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      flex-wrap: wrap;
    }

    .skill-slots {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }

    .skill-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--card-border);
      color: var(--text);
      padding: 6px 10px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s;
    }

    .skill-btn:hover:not(:disabled) {
      border-color: var(--accent);
      background: rgba(56, 189, 248, 0.15);
      box-shadow: 0 0 10px var(--accent-glow);
    }

    .skill-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      border-color: transparent;
    }

    .skill-btn.active-target {
      border-color: var(--pink);
      background: rgba(244, 63, 94, 0.2);
      box-shadow: 0 0 12px rgba(244, 63, 94, 0.4);
      animation: pulseTarget 1s infinite alternate;
    }

    @keyframes pulseTarget {
      from { transform: scale(1); }
      to { transform: scale(1.04); }
    }

    .key-badge {
      font-family: monospace;
      font-size: 9px;
      background: rgba(0, 0, 0, 0.5);
      padding: 1px 4px;
      border-radius: 4px;
      color: var(--subtext);
    }

    /* 전투 메시지 로그 뷰어 */
    .combat-log-box {
      height: 72px;
      background: rgba(0, 0, 0, 0.4);
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      padding: 6px 10px;
      overflow-y: auto;
      font-size: 11px;
      line-height: 1.4;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .log-line {
      color: var(--subtext);
    }
    .log-line.hero { color: #38bdf8; }
    .log-line.enemy { color: #f43f5e; }
    .log-line.item { color: #fbbf24; }
    .log-line.system { color: #34d399; }

    /* 우측 탭 패널 (장비 / 인벤토리 / 유물 / 정보) */
    .side-panel {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .panel-tabs {
      display: flex;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 10px;
      padding: 3px;
      gap: 3px;
    }

    .panel-tab-btn {
      flex: 1;
      background: transparent;
      border: none;
      color: var(--subtext);
      font-size: 11px;
      font-weight: 800;
      padding: 6px 4px;
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .panel-tab-btn.active {
      background: rgba(56, 189, 248, 0.2);
      color: var(--accent);
      border: 1px solid rgba(56, 189, 248, 0.35);
    }

    .tab-content {
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 380px;
    }

    /* 장비 슬롯 */
    .equip-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
    }

    .equip-slot {
      background: rgba(255, 255, 255, 0.03);
      border: 1px dashed rgba(255, 255, 255, 0.15);
      border-radius: 10px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      transition: all 0.2s;
    }

    .equip-slot:hover {
      background: rgba(255, 255, 255, 0.06);
      border-color: var(--accent);
    }

    .equip-slot-title {
      font-size: 10px;
      color: var(--subtext);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .equip-item-name {
      font-size: 11px;
      font-weight: 800;
      color: #fff;
    }

    .rarity-common { color: #e2e8f0; }
    .rarity-rare { color: #38bdf8; text-shadow: 0 0 6px var(--accent-glow); }
    .rarity-epic { color: #c084fc; text-shadow: 0 0 6px var(--purple-glow); }
    .rarity-legendary { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.4); }

    /* 인벤토리 가방 그리드 */
    .inventory-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .inv-slot {
      aspect-ratio: 1;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      cursor: pointer;
      position: relative;
      transition: all 0.2s;
    }

    .inv-slot:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .inv-slot.selected {
      background: rgba(56, 189, 248, 0.18);
      border-color: var(--accent);
      box-shadow: 0 0 10px rgba(56, 189, 248, 0.45);
      transform: scale(1.04);
    }

    .inv-slot.empty {
      border: 1px dashed rgba(255, 255, 255, 0.06);
      cursor: default;
    }
    .inv-slot.empty:hover {
      transform: none;
      border-color: rgba(255, 255, 255, 0.06);
    }

    .item-btn-group {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }

    .item-action-btn {
      flex: 1;
      padding: 6px 8px;
      font-size: 11px;
      font-weight: 800;
      border-radius: 6px;
      border: 1px solid var(--border);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.2s;
    }

    .item-action-btn.use {
      background: rgba(56, 189, 248, 0.22);
      border-color: rgba(56, 189, 248, 0.5);
      color: #38bdf8;
    }

    .item-action-btn.use:hover {
      background: rgba(56, 189, 248, 0.4);
      transform: translateY(-1px);
    }

    .item-action-btn.drop {
      background: rgba(244, 63, 94, 0.2);
      border-color: rgba(244, 63, 94, 0.45);
      color: #f43f5e;
    }

    .item-action-btn.drop:hover {
      background: rgba(244, 63, 94, 0.35);
      transform: translateY(-1px);
    }

    .inv-count {
      position: absolute;
      bottom: 2px;
      right: 4px;
      font-size: 9px;
      font-family: monospace;
      font-weight: 800;
      color: #fff;
    }

    /* 유물 (Relics) 목록 */
    .relic-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 320px;
      overflow-y: auto;
    }

    .relic-item {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 8px;
      padding: 6px 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 11px;
    }

    .relic-icon {
      font-size: 20px;
    }

    .relic-desc {
      color: var(--subtext);
      font-size: 10px;
    }

    /* 모바일 가상 컨트롤러 패드 */
    .mobile-controls {
      display: none;
      margin-top: 6px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 14px;
      padding: 10px;
      justify-content: space-around;
      align-items: center;
    }

    @media (max-width: 880px) {
      .mobile-controls {
        display: flex;
      }
    }

    .dpad-grid {
      display: grid;
      grid-template-columns: repeat(3, 44px);
      grid-template-rows: repeat(3, 44px);
      gap: 4px;
    }

    .dpad-btn {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid var(--card-border);
      border-radius: 8px;
      color: var(--text);
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;
    }
    .dpad-btn:active {
      background: rgba(56, 189, 248, 0.3);
      border-color: var(--accent);
    }

    .dpad-center {
      background: rgba(251, 191, 36, 0.15);
      border-color: rgba(251, 191, 36, 0.4);
      color: var(--amber);
      font-size: 11px;
    }

    .mobile-action-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .mobile-action-btn {
      padding: 10px 18px;
      background: rgba(56, 189, 248, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.4);
      color: #fff;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .mobile-action-btn:active {
      background: rgba(56, 189, 248, 0.3);
    }

    /* 모달 팝업 */
    .modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      padding: 16px;
    }

    .modal-backdrop.show { display: flex; }

    .modal-content {
      background: #0f172a;
      border: 1px solid rgba(56, 189, 248, 0.4);
      border-radius: 20px;
      max-width: 580px;
      width: 100%;
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px var(--accent-glow);
      max-height: 90vh;
      overflow-y: auto;
    }

    .class-select-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }

    @media (max-width: 540px) {
      .class-select-grid {
        grid-template-columns: 1fr;
      }
    }

    .class-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      cursor: pointer;
      transition: all 0.25s;
    }

    .class-card:hover {
      background: rgba(56, 189, 248, 0.12);
      border-color: var(--accent);
      transform: translateY(-2px);
    }

    .class-card.selected {
      border: 2px solid var(--accent);
      background: rgba(56, 189, 248, 0.2);
      box-shadow: 0 0 16px var(--accent-glow);
    }

    .class-card-thumb {
      width: 100%;
      height: 140px;
      object-fit: cover;
      border-radius: 8px;
      border: 1px solid rgba(255, 255, 255, 0.15);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
      margin-bottom: 4px;
    }

    .status-avatar-img {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      object-fit: cover;
      border: 1px solid var(--accent);
      box-shadow: 0 0 6px var(--accent-glow);
    }

    .class-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .class-icon { font-size: 24px; }
    .class-title { font-size: 15px; font-weight: 800; color: #fff; }

    .class-traits {
      font-size: 11px;
      color: var(--subtext);
      line-height: 1.4;
    }

    .btn-primary {
      background: linear-gradient(135deg, #0284c7, #38bdf8);
      border: none;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      padding: 12px 20px;
      border-radius: 12px;
      cursor: pointer;
      box-shadow: 0 4px 14px var(--accent-glow);
      transition: all 0.2s;
    }
    .btn-primary:hover {
      filter: brightness(1.1);
      transform: translateY(-1px);
    }

    /* 토스트 메시지 */
    #toastMsg {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(15, 23, 42, 0.95);
      border: 1px solid rgba(56, 189, 248, 0.4);
      color: #fff;
      padding: 8px 18px;
      border-radius: 99px;
      font-size: 12px;
      font-weight: 700;
      box-shadow: 0 8px 24px rgba(0,0,0,0.6);
      z-index: 9999;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s;
    }