/* Mafia site styles (commonized + page-specific) */
@font-face {
            font-family: "Rimgul";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-4@1.1/Limgul12.woff2") format("woff2");
            font-weight: normal;
            font-display: swap;
        }
@font-face {
            font-family: "Presentation";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-1Thin.woff2") format("woff2");
            font-weight: 100;
            font-display: swap;
        }
@font-face {
            font-family: "Presentation";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-2ExtraLight.woff2") format("woff2");
            font-weight: 200;
            font-display: swap;
        }
@font-face {
            font-family: "Presentation";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-4Regular.woff2") format("woff2");
            font-weight: 400;
            font-display: swap;
        }
@font-face {
            font-family: "Presentation";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2404@1.0/Freesentation-6SemiBold.woff2") format("woff2");
            font-weight: 600;
            font-display: swap;
        }
@font-face {
            font-family: "Paperozi";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
            font-weight: 400;
            font-display: swap;
        }
@font-face {
            font-family: "Cafe24ProSlim";
            src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2511-1@1.0/Cafe24PROSlim-Regular.woff2") format("woff2");
            font-weight: 400;
            font-display: swap;
        }
@keyframes gridToastShake{
          0%   { transform: var(--toast-base-transform) translateX(0); }
          10%  { transform: var(--toast-base-transform) translateX(-6px); }
          20%  { transform: var(--toast-base-transform) translateX(6px); }
          30%  { transform: var(--toast-base-transform) translateX(-6px); }
          40%  { transform: var(--toast-base-transform) translateX(6px); }
          50%  { transform: var(--toast-base-transform) translateX(-6px); }
          60%  { transform: var(--toast-base-transform) translateX(6px); }
          70%  { transform: var(--toast-base-transform) translateX(0); }
          100% { transform: var(--toast-base-transform) translateX(0); }
        }

/* 왼쪽 아래 좌표 켜고 끄기 */
.tile-map__coord { display:  !important; }

/* JS가 주입한 것보다 우선되게: #mini-map을 붙이고 필요한 곳에 !important */
#mini-map .tile-map__route-outline {
  stroke: rgba(0,0,0,0.75) !important;
  stroke-width: 0 !important;
}

#mini-map .tile-map__route-path {
  stroke-width: 10 !important;
  stroke-dasharray: 10 20 !important; /* 점선 원하면 예: 10 6 */
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.5)) !important;
}

#mini-map .tile-map__route-dest {
  r: 16; /* 이건 CSS로 안 먹을 수 있어 아래 B 방식이 확실 */
}
:root{
  --plane-outline-color: rgba(0,0,0,0.85); /* 테두리 색 */
  --plane-outline-scale: 1.18;             /* 테두리 두께(크면 두꺼움) */
  --plane-shadow-dy: 30px;
  --plane-shadow-blur:3px ;
  --plane-shadow-opacity:1.0 ;
}
#mini-map{
  --ripple-duration: 4s;   /* 파동 속도 */
  --ripple-delay: 4.2s !important;      /* 두 번째 링 지연 */
  --ripple-opacity: 0.9;    /* 진하기 */
  --ripple-stroke: 2px;      /* 링 두께 */
  --ripple-size: 100px;
}



/* ===== Common styles ===== */
html[data-page] {
  --background: #0a0a0a;
  --panel-bg: #111111;
  --table-th: #aaaaaa;
  --table-th-bg: #353535;
  --item-bg: #3f3f3f;
  --text-money: #ffd154;
  --text-point: #f5880b;
  --text-default: #f0f0f0;
  --text-desc: #606772;
;
  --font-size-title: 32px;
  --font-size-subtitle: 18px;
  --font-size-default: 16px;
  --font-size-desc: 14px;
  --font-size-badge: 12px;
  --rank1-1: rgba(255, 241, 206, 0.3);
  --rank1-2: rgba(255, 255, 255, 0.0);
  --rank2-1: rgba(230, 230, 230, 0.2);
  --rank2-2: rgba(255, 255, 255, 0.0);
  --rank3-1: rgba(255, 238, 224, 0.1);
  --rank3-2: rgba(255, 255, 255, 0.0);

  --menu-offset: 80px;
  --layout-max: 1430px;
  --main-max: 600px;
  --side-width: 400px;
}
html[data-page] *, html[data-page] *::before, html[data-page] *::after {
  box-sizing: border-box;
}
html[data-page], html[data-page] body {
  touch-action: manipulation;
  height: 100%;
}
html[data-page] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  word-break: keep-all;
}
html[data-page] input {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}
html[data-page] body {
  font-family: "Presentation", "Noto Sans KR", sans-serif;
  background-color: var(--background);
  color: var(--text-default);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  margin: 0;
  overscroll-behavior-y: none;

  /* 고정 상단 메뉴(기본 80px) 아래로 컨텐츠를 밀어주기 */
  padding: var(--menu-offset) 16px 100px;

  /* height:100%는 부모(html) 높이가 있어야 의미가 있음 -> min-height로 보강 */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
}

html[data-page] h5 {
  font-size: var(--font-size-desc);
  line-height: 8px;
  color: var(--text-desc);
  margin: 0;
  padding: 0;
  pointer-events: none;
}
html[data-page] table {
  width: 100%;
  border-collapse: collapse;
}
html[data-page] th, html[data-page] td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid #333;
  vertical-align: middle;
}
html[data-page] td {
  text-align: left;
}
html[data-page] th {
  background-color: var(--table-th-bg);
  color: #ffffff;
  font-weight: 400;
}

html[data-page] .menu-container {
  width: 100%;
  height:fit-content;
  position: fixed;
  top: 0; left: 0;
  background: #00000080;
  backdrop-filter: blur(10px);
  z-index: 999;
  padding: 8px 16px;
  border-bottom: 1px solid #222;
}
html[data-page] .menu-row {
  width: 100%;
  max-width: 1430px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
html[data-page] .menu-squad {
  display: flex;
  font-family: "Paperozi", "Noto Sans KR", sans-serif;
  font-weight: 600;
  align-items: center;
  gap: 10px;
  color: var(--text-default);
  text-decoration: none;
}
html[data-page] .menu-btn {
  display: flex;
  height: 50%;
  align-items: center;
  font-family: "Paperozi", "Noto Sans KR", sans-serif;
  font-weight: 600;
  gap: 10px;
}
html[data-page] .menu-btn a {
  color: var(--text-default);
  text-decoration: none;
  color: var(--text-desc);
}
html[data-page] .menu-btn a:active{
  color: var(--text-default);
  text-decoration: underline;
}
html[data-page] .menu-btn a:hover {
  color: var(--text-point);
  text-decoration: none;
}

html[data-page] .page-title {
  font-size: var(--font-size-title);
  font-weight: 600;
  font-family: "Paperozi", "Noto Sans KR", sans-serif;
  margin: 50px 0;
}
html[data-page] .col-num {
  width: 5%;
  text-align: center;
}
html[data-page] .col-item {
  width: 45%;
}
html[data-page] .quantity-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
html[data-page] .qty-box {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
}
html[data-page] .input-wrapper {
  position: relative;
}
html[data-page] input[type="number"]::-webkit-outer-spin-button, html[data-page] input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
html[data-page] .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  background-color: #2c2c2c;
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.5);
  z-index: 100;
  margin-top: 4px;
  overflow: hidden;
}
html[data-page] .dropdown-menu.show {
  display: block;
}
html[data-page] .dropdown-item {
  padding: 8px 0;
  text-align: center;
  color: #e0e0e0;
  font-size: var(--font-size-default);
  cursor: pointer;
  transition: background 0.2s;
}
html[data-page] .dropdown-item:hover {
  background-color: var(--text-point);
  color: #000;
  font-weight: 600;
}
html[data-page] .unit-price {
  font-size: var(--font-size-desc);
  color: var(--text-desc);
  margin-top: 4px;
}
html[data-page] .selected-item .tooltip {
  position: absolute;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 120px;
  padding: 10px 16px;
  border-radius: 4px;
  background: rgba(16, 16, 16);
  border: 1px solid #333;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  color: #e0e0e0;
  font-size: var(--font-size-desc);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 50;
}
html[data-page] .selected-item .tooltip .name {
  display: block;
  font-size: var(--font-size-desc);
  font-weight: 600;
  margin-bottom: 6px;
  color: #ffffff;
}
html[data-page] .selected-item .tooltip .line {
  display: block;
  color: var(--table-th);
  font-weight: 600;
}
html[data-page] .selected-item .tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 8px solid #101010;
}
html[data-page] .selected-item .tooltip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #333;
  margin-top: 1px;
  z-index: -1;
}
html[data-page] .selected-item:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}
html[data-page] .floating-total-box.visible {
  transform: translateX(-50%) translateY(0);
}
html[data-page] .odometer {
  display: inline-flex;
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  color: var(--text-point);
  font-size: 38px;
  line-height: 38px;
  height: 38px;
  overflow: hidden;
  margin-left: 10px;
  margin-right: 6px;
  padding: 0 4px;
  box-sizing: content-box;
}
html[data-page] .digit-column {
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  text-align: center;
}
html[data-page] .digit-column span {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  line-height: 38px;
  box-sizing: border-box;
}
html[data-page] .page-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: var(--layout-max);
  margin: 0 auto;
  flex: 1 0 auto;
}


/* ===== Shared components (unified) ===== */
html[data-page] .container {
  width: 100%;
  max-width: var(--main-max);
  background: var(--panel-bg);
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  position: relative;
}

html[data-page] .main-panel-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: var(--main-max);
}

html[data-page] .side-panel-stack {
  width: var(--side-width);
  position: sticky;
  top: var(--menu-offset);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9;
}

html[data-page] .side-panel {
  width: 100%;
  min-width: 0;
  background: var(--panel-bg);
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

html[data-page] .panel-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

html[data-page] .panel-title {
  font-family: "Paperozi", "Noto Sans KR", sans-serif;
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  color: var(--text-default);
  white-space: nowrap;
}

html[data-page] .title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html[data-page] .title-bar .panel-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* tables / lists */
html[data-page] .item-list {
  width: 100%;
  border-top: 1px solid #333;
  margin-top: 16px;
}

html[data-page] .item-list th {
  color: var(--table-th);
  font-size: var(--font-size-default);
  font-weight: 600;
}

html[data-page] td.col-img {
  line-height: 0;
}

html[data-page] .col-qty {
  width: 30%;
}

html[data-page] .col-score {
  width: 15%;
  text-align: center;
}

html[data-page] .item-img {
  width: 30px;
  height: 30px;
  object-fit: cover;
  background-color: var(--item-bg);
  pointer-events: none;
  display: block;
  margin: 0 auto;
}

/* quantity controls */
html[data-page] .qty-btn {
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  width: 32px;
  height: 32px;
  background-color: #444;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-subtitle);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  touch-action: manipulation;
}

html[data-page] .qty-btn:hover {
  background-color: var(--text-point);
  color: #000;
}

html[data-page] .qty-btn:active {
  background-color: var(--text-point);
  opacity: 0.8;
  transform: scale(0.95);
}

html[data-page] .qty-btn-set {
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  width: 32px;
  height: 32px;
  background-color: var(--text-point);
  color: #00000080;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.1s;
  touch-action: manipulation;
}

html[data-page] .qty-btn-set:hover {
  color: #000;
}

html[data-page] .qty-btn-set:active {
  opacity: 0.8;
  transform: scale(0.95);
}

/* numeric inputs */
html[data-page] input[type="number"] {
  width: 60px;
  padding: 5px;
  text-align: center;
  font-size: var(--font-size-default);
  background-color: #2c2c2c;
  color: #ffffff;
  border: 1px solid #555;
  border-radius: 4px;
  outline: none;
  -moz-appearance: textfield;
  cursor: pointer;
}

html[data-page] input[type="number"]:focus {
  border-color: var(--text-point);
}

/* totals */
html[data-page] .total-box {
  width: 100%;
  background-color: #252525;
  padding: 10px 10px 20px 10px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #333;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}

html[data-page] .total-row {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

html[data-page] .total-metric {
  display: flex;
  gap: 6px;
  align-items: center;
}

html[data-page] .total-metric .val {
  color: var(--text-money);
  font-family: "Cafe24ProSlim", "Noto Sans KR", sans-serif;
  font-size: var(--font-size-default);
  font-weight: 600;
}

html[data-page] .total-metric .subval {
  color: var(--text-desc);
  font-size: var(--font-size-desc);
  font-weight: 600;
}

html[data-page] .selected-items-box {
  padding: 10px;
  background: var(--panel-bg);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 62px;
}

html[data-page] .floating-total-box {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  background-color: #252525;
  padding: 14px 16px;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.7);
  border: 1px solid #444;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: var(--font-size-default);
  font-weight: 600;
  z-index: 999;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 80%;
  max-width: 520px;
}

html[data-page] .floating-total-box .val {
  color: var(--text-money);
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  font-size: 24px;
}

/* action buttons */
html[data-page] .total-action-btn {
  width: max-content;
  height: 50px;
  padding: 0 20px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2c2c2c;
  color: #e0e0e0;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-default);
}

/* forms */
html[data-page] .submit-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-page] .send-status {
  display: none;
  font-size: var(--font-size-desc);
  text-align: center;
  color: #ffffff;
  min-height: 1em;
  white-space: pre-line;
}

html[data-page] .identity-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #333;
  background: var(--background);
  color: #fff;
}

/* misc */
html[data-page] .rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-desc);
  color: #e0e0e0;
  margin-top: 16px;
}

html[data-page] .item-name {
  font-size: var(--font-size-default);
  font-weight: 400;
}

html[data-page] .matchtime-label {
  font-size: var(--font-size-default);
  color: var(--text-default);
  white-space: nowrap;
}

/* search input */
html[data-page] .search-input {
  width: 240px;
  max-width: 50vw;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #121212;
  color: #fff;
  font-size: var(--font-size-default);
  outline: none;
}

html[data-page] .search-input::placeholder {
  color: #777;
}

html[data-page] .search-input:focus {
  border-color: var(--text-point);
}

/* market / chart (used on multiple pages) */
html[data-page] .market-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html[data-page] .market-chart-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 2.4/1;
  border: 1px solid #333;
  background: #121212;
  border-radius: 4px;
  overflow: hidden;
}

html[data-page] #eye-chart {
  width: 100%;
  display: block;
}

html[data-page] .chart-tooltip {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  background: rgba(16,16,16,0.96);
  color: #fff;
  font-size: var(--font-size-desc);
  line-height: 1.2;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

html[data-page] .market-metric-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

html[data-page] .market-metric {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-default);
  color: var(--text-default);
}

html[data-page] .market-metric .val {
  font-family: "Cafe24ProSlim", "Noto Sans KR", sans-serif;
  font-weight: 600;
  font-size: var(--font-size-default);
  color: var(--text-money);
}

html[data-page] .market-hint {
  font-size: var(--font-size-desc);
  color: var(--text-desc);
  line-height: 1.4;
}

/* calculator (keypad UI) */
html[data-page] .calc-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-page] .calc-result {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

html[data-page] .calc-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--font-size-default);
  font-weight: 600;
}

html[data-page] .calc-line .val {
  color: var(--text-money);
  font-family: "Cafe24ProSlim", "Noto Sans KR", sans-serif;
  font-weight: 600;
}

html[data-page] .calc-line .subval {
  color: var(--text-desc);
  font-size: var(--font-size-desc);
  font-weight: 600;
  margin-left: 6px;
}

html[data-page] .calc-val-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

html[data-page] .calc-input {
  width: 100%;
  padding: 12px 12px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #121212;
  color: #fff;
  font-size: 18px;
  outline: none;
  text-align: right;
}

html[data-page] .calc-input:focus {
  border-color: var(--text-point);
}

html[data-page] .calc-keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

html[data-page] .calc-key {
  height: 44px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2c2c2c;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

html[data-page] .calc-key:active {
  opacity: 0.75;
  transform: scale(0.98);
}

html[data-page] .calc-key--fn {
  background: var(--panel-bg);
}

html[data-page] .calc-key--ghost {
  visibility: hidden;
  border: 0;
  background: transparent;
}

html[data-page] .send-btn {
  width: 100%;
  padding: 16px 14px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2c2c2c;
  color: #fff;
  cursor: pointer;
  word-break: keep-all;
  font-size: var(--font-size-default);
}
html[data-page] .send-btn:not(:disabled):hover {
  background-color: var(--text-point);
  color: #000;
}
html[data-page] .send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-page] .submit-detail {
  border-top: 1px solid #333;
  padding-top: 8px;
  color: var(--text-desc);
  font-size: var(--font-size-desc);
  line-height: 1.5;
}
html[data-page] .identity-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
}
html[data-page] .identity-row div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
html[data-page] .submit-input {
  width: 100%;
}
html[data-page] .identity-row div span {
  padding: 10px 0;
  width: fit-content;
}
html[data-page] .identity-input::placeholder {
  color: #777;
}
html[data-page] .muted {
  color: var(--text-desc);
  text-align: center !important;
}
html[data-page] .rank-table th, html[data-page] .rank-table td {
  border-bottom: 1px solid #333;
  padding: 6px 8px;
  text-align: left;
  vertical-align: top;
}
html[data-page] .rank-table td.rank-squad, html[data-page] .rank-table td.rank-name {
  max-width: 6ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-page] .col-rank {
  width: 10%;
}
html[data-page] .col-squad {
  width: 35%;
}
html[data-page] .col-name-rank {
  width: 35%;
}
html[data-page] .col-point {
  width: 20%;
}
html[data-page] .col-time {
  width: 60%;
}
html[data-page] .rank-table th {
  color: var(--table-th);
  font-size: var(--font-size-default);
  font-weight: 600;
}
html[data-page] .rank-row {
  cursor: default;
}
html[data-page] .rank-score {
  font-weight: 600;
  color: var(--text-point);
  white-space: nowrap;
}
html[data-page] .rank-cell {
  position: relative;
  overflow: visible;
  text-align: center;
}
html[data-page] .rank-tooltip {
  position: fixed;
  left: 0;
  top: 0;
  width: 240px;
  overflow: auto;
  padding: 16px;
  background: #101010;
  border: 1px solid #333;
  border-radius: 4px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.65);
  z-index: 99999999;
  display: none;
  opacity: 1;
  pointer-events: none;
}
html[data-page] .rank-row:hover .rank-tooltip, html[data-page] .rank-row.open .rank-tooltip {
  opacity: 1;
}
html[data-page] .rank-row:hover .rank-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
html[data-page] .rank-tooltip .t-title {
  font-size: var(--font-size-default);
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}
html[data-page] .rank-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #222;
  margin: 3px 0;
  padding-bottom: 3px;
}
html[data-page] .rank-item img {
  width: 24px;
  height: 24px;
  border: 1px solid #333;
}
html[data-page] .rank-item .nm {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-page] .rank-item .qt {
  font-weight: 600;
  color: var(--text-point);
}
html[data-page] .total-box-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin-top: 10px;
}
html[data-page] .total-box-area {
  flex: 1;
}
html[data-page] .total-box-actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  justify-content: center;
}
html[data-page] .total-action-btn:hover {
  background-color: var(--text-point);
  color: #000;
}
html[data-page] .total-action-btn:active {
  opacity: 0.5;
  transform: scale(0.96);
}
html[data-page] .total-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-page] .qty-btn-set--ghost {
  visibility: hidden;
  pointer-events: none;
}
html[data-page] .side-panel-stack .rank-table {
  table-layout: fixed;
}
html[data-page] .side-panel-stack .rank-table th:nth-child(1), html[data-page] .side-panel-stack .rank-table td:nth-child(1) {
  width: 15%;
}
html[data-page] .side-panel-stack .rank-table th:nth-child(2), html[data-page] .side-panel-stack .rank-table td:nth-child(2) {
  width: 25%;
}
html[data-page] .side-panel-stack .rank-table th:nth-child(3), html[data-page] .side-panel-stack .rank-table td:nth-child(3) {
  width: 25%;
}
html[data-page] .side-panel-stack .rank-table th:nth-child(4), html[data-page] .side-panel-stack .rank-table td:nth-child(4) {
  width: 40%;
}
html[data-page] .side-panel-stack .rank-table th:nth-child(5), html[data-page] .side-panel-stack .rank-table td:nth-child(5) {
  width: 25%;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row {
  --row-grad: none;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row:nth-child(1) {
  --row-grad: linear-gradient(50deg, var(--rank1-1), var(--rank1-2));
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row:nth-child(2) {
  --row-grad: linear-gradient(50deg, var(--rank2-1), var(--rank2-2));
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row:nth-child(3) {
  --row-grad: linear-gradient(50deg, var(--rank3-1), var(--rank3-2));
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td {
  background-image: var(--row-grad);
  background-repeat: no-repeat;
  background-clip: padding-box;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td:nth-child(1) {
  background-size: 1000% 100%;
  background-position: 0% 0%;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td:nth-child(2) {
  background-size: 400% 100%;
  background-position: 13.3333% 0%;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td:nth-child(3) {
  background-size: 400% 100%;
  background-position: 46.6667% 0%;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td:nth-child(4) {
  background-size: 500% 100%;
  background-position: 75% 0%;
}
html[data-page] .side-panel-stack .rank-table tbody tr.rank-row > td:nth-child(5) {
  background-size: 500% 100%;
  background-position: 100% 0%;
}
html[data-page] .rarity-tag {
  font-size: var(--font-size-desc);
  font-weight: 400;
  margin-bottom: 4px;
}
html[data-page] .r-Common {
  color: #ababab;
}
html[data-page] .r-Rare {
  color: #59bbff;
}
html[data-page] .r-Epic {
  color: #cd8dff;
}
html[data-page] .r-Legendary {
  color: #ffcc55;
}
html[data-page] .r-Ultimate {
  color: #ff6f6b;
}
html[data-page] .matchtime-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
}
html[data-page] .matchtime-select {
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #333;
  background: var(--panel-bg);
  color: #fff;
}
html[data-page] .rules-level {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 8px;
}
html[data-page] .rules-level div {
  width: 100%;
  background: var(--background);
  color: var(--text-color);
  font-size: var(--font-size-default);
  border-radius: 4px;
  padding: 16px 0;
  text-align: center;
}
html[data-page] .rules-detail {
  border-top: 1px solid #333;
  margin-top: 16px;
  padding-top: 8px;
  color: var(--text-desc);
  font-size: var(--font-size-desc);
  line-height: 1.5;
}


/* =============================
   아이템 이미지: 등급 배경 + 전경(시트 아이콘) 오버레이
   - JS에서 <div class="icon-stack" data-rarity="Rare">...</div> 형태로 렌더링
   - 배경 파일만 교체하면 등급 리브랜딩/색상 변경이 쉬움
   ============================= */
html[data-page="goblin"] .icon-stack {
  position: relative;
  width: 60px;
  height: 60px;
  background-color: #2c2c2c;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  display: block;
  margin: 0 auto;
}

html[data-page="goblin"] .icon-stack--md {
  width: 60px;
  height: 60px;
}

html[data-page="goblin"] .icon-stack--sm {
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1px solid #333;
}

html[data-page="goblin"] .icon-stack .icon-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 아이템 PNG(투명배경) 기준 */
  border: 0;
}

/* 랭킹 툴팁에선 기존 .rank-item img 규칙을 피해가도록 */
html[data-page="goblin"] .rank-item .icon-fg {
  width: 100%;
  height: 100%;
  border: 0;
}

/* 등급 배경 이미지 매핑 (필요 시 경로/파일명만 수정) */
html[data-page="goblin"] .icon-stack[data-rarity="Common"]     { background-image: url("/img/rarity/common.png"); }
html[data-page="goblin"] .icon-stack[data-rarity="Rare"]       { background-image: url("/img/rarity/rare.png"); }
html[data-page="goblin"] .icon-stack[data-rarity="Epic"]       { background-image: url("/img/rarity/epic.png"); }
html[data-page="goblin"] .icon-stack[data-rarity="Legendary"]  { background-image: url("/img/rarity/legendary.png"); }
html[data-page="goblin"] .icon-stack[data-rarity="Ultimate"]   { background-image: url("/img/rarity/ultimate.png"); }


html[data-page="goblin"] .selected-items-box.inventory-grid {
  --inv-cols: 10;
  --inv-rows: 20;
  --inv-cell: 33px;
  --inv-pad: 6px;
  --grid-line: 3px;
  position: relative;
  display: inline-grid;
  align-self: center;
  margin: 0 auto;
  max-width: 100%;
  grid-template-columns: repeat(var(--inv-cols), var(--inv-cell));
  grid-template-rows: repeat(var(--inv-rows), var(--inv-cell));
  grid-auto-rows: var(--inv-cell);
  justify-content: start;
  align-content: start;
  padding: var(--inv-pad);
  background-image: repeating-linear-gradient(
      to right,
      #090909 0,
      #090909 var(--grid-line),
      transparent var(--grid-line),
      transparent var(--inv-cell)
    ),
    
    repeating-linear-gradient(
      to bottom,
      #090909 0,
      #090909 var(--grid-line),
      transparent var(--grid-line),
      transparent var(--inv-cell)
    ),
    
    linear-gradient(#1a1a1a, #1a1a1a),
    
    linear-gradient(#000, #000);
  background-repeat: repeat, repeat, no-repeat, no-repeat;
  background-origin: content-box, content-box, content-box, border-box;
  background-clip: content-box, content-box, content-box, border-box;
  background-position: calc(var(--grid-line) / -2) 0,
    0 calc(var(--grid-line) / -2),
    0 0,
    0 0;
}
html[data-page="goblin"] .inventory-empty-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
html[data-page="goblin"] .selected-block {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
html[data-page="goblin"] .selected-block.is-editing {
  box-shadow: inset 1px 1px 0 var(--text-point), inset -1px -1px 0 var(--text-point);
}
html[data-page="goblin"] .selected-block.is-dragging-source {
  opacity: 0;
  pointer-events: none;
}
html[data-page="goblin"] .inv-drag-preview {
  position: relative;
  pointer-events: none;
  background: rgb(50, 230, 50);
  mix-blend-mode: color-dodge;
  z-index: 75;
}
html[data-page="goblin"] .inv-drag-preview.is-invalid {
  background: rgb(200, 0, 0);
  mix-blend-mode: color-dodge;
}
html[data-page="goblin"] .inv-drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 99999999;
  opacity: 0.3;
  transform: scale(0.9);
  transform-origin: top left;
}
html[data-page="goblin"] .inv-drag-ghost .ghost-block {
  width: 100%;
  height: 100%;
}
html[data-page="goblin"] .inv-drag-ghost .ghost-block .selected-block {
  width: 100%;
  height: 100%;
  cursor: grabbing;
}
html[data-page="goblin"] .inv-drag-ghost .ghost-block .qty-badge {
  display: none;
}
html[data-page="goblin"] .selected-items-box.inventory-grid {
  touch-action: pan-y;
}
html[data-page="goblin"] .selected-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  overflow: visible;
}
html[data-page="goblin"] .selected-block img:hover {
  filter: opacity(50%);
}
html[data-page="goblin"] .selected-block .img-wrap {
  width: 100%;
  height: 100%;
  position: relative;
}
html[data-page="goblin"] .selected-block.is-rotated .img-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}
html[data-page="goblin"] .selected-block .qty-badge {
  position: absolute;
  left: 1px;
  bottom: 1px;
  font-size: var(--font-size-badge);
  color: #ffffff;
  line-height: 1;
  background-color: rgb(0, 0, 0);
  padding: 1px 2px;
}
html[data-page="goblin"] .selected-block .qty-badge.is-fixed {
  color: var(--text-point);
}
html[data-page="goblin"] .side-panel-link {
  width: 100%;
  padding: 16px 0;
}
html[data-page="goblin"] .send-btn-wrap {
  position: relative;
  width: 100%;
}
html[data-page="goblin"] .send-btn-overlay {
  position: absolute;
  inset: 0;
  display: none;
  cursor: not-allowed;
  background: transparent;
}
html[data-page="goblin"] .send-btn-wrap.is-disabled .send-btn-overlay {
  display: block;
}
html[data-page="goblin"] .grid-toast {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --toast-bg: #1b1b1b;
  --toast-border: #333;
  background: var(--toast-bg);
  color: #fff;
  border: 1px solid var(--toast-border);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 80;
  max-width: min(92%, 320px);
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.6);
  pointer-events: none;
  line-height: 1.35;
}
html[data-page="goblin"] .grid-toast.is-warn {
  --toast-bg: #550e0e;
  --toast-border: rgb(95, 45, 45);
}
html[data-page="goblin"] .grid-toast.grid-toast--shake {
  animation: gridToastShake 520ms ease-in-out;
}
html[data-page="goblin"] .grid-toast.grid-toast--below::after {
  top: -6px;
  bottom: auto;
  transform: translateX(-50%) rotate(180deg);
}
html[data-page="goblin"] .grid-toast.grid-toast--center::after {
  display: none;
}
html[data-page="goblin"] .stack-editor {
  position: absolute;
  z-index: 60;
  background: #111;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px 10px 8px 10px;
  width: 190px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.65);
  transform: translate(-50%, -100%);
}
html[data-page="goblin"] .stack-editor-title {
  font-size: var(--font-size-default);
  font-weight: 700;
  color: var(--text-point);
  margin-bottom: 8px;
  line-height: 1.2;
  word-break: keep-all;
}
html[data-page="goblin"] .stack-editor-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
html[data-page="goblin"] .stack-editor-input {
  width: 86px;
  padding: 6px 8px;
  border: 1px solid #333;
  background: #0b0b0b;
  color: #fff;
  outline: none;
  font-size: var(--font-size-desc);
}
html[data-page="goblin"] .stack-editor-max {
  font-size: var(--font-size-desc);
  color: var(--text-desc);
  flex: 1;
  text-align: left;
  line-height: 1.2;
}
html[data-page="goblin"] .stack-editor-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
html[data-page="goblin"] .stack-editor-btn {
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #1b1b1b;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
}
html[data-page="goblin"] .stack-editor-btn.primary {
  background: var(--text-point);
  color: #000;
  border-color: transparent;
  font-weight: 700;
}
html[data-page="goblin"] .inventory-save-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}
html[data-page="goblin"] .saved-inv-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
html[data-page="goblin"] .saved-inv-row {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  border-radius: 4px;
  border: 0;
  background: #2c2c2c;
  overflow: hidden;
}
html[data-page="goblin"] .saved-inv-row:hover {
  background: #151515;
}
html[data-page="goblin"] .save-btn-wrap {
  position: relative;
  display: inline-block;
  width: fit-content;
}
html[data-page="goblin"] .save-btn-wrap.is-disabled .send-btn-overlay {
  display: block;
}
html[data-page="goblin"] .save-btn {
  width: max-content;
  padding: 8px 16px;
  border-radius: 4px;
  border: 0;
  background: #2c2c2c;
  color: #fff;
  cursor: pointer;
  word-break: keep-all;
  font-size: var(--font-size-default);
}
html[data-page="goblin"] .save-btn:hover {
  background: #151515;
}
html[data-page="goblin"] .saved-inv-load-btn {
  flex: 1;
  min-width: 0;
  background-color: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: var(--font-size-default);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 16px;
}
html[data-page="goblin"] .saved-inv-load-btn:hover {
  color: var(--table-th);
}
html[data-page="goblin"] .saved-inv-name-input {
  flex: 1;
  min-width: 0;
  padding: 8px;
  border: 1px solid #333;
  background: var(--background);
  color: #fff;
  font-size: var(--font-size-default);
  outline: none;
  margin: 10px;
}
html[data-page="goblin"] .saved-inv-row.editing .saved-inv-load-btn {
  display: none;
}
html[data-page="goblin"] .saved-inv-row:not(.editing) .saved-inv-name-input {
  display: none;
}
html[data-page="goblin"] .saved-inv-action-btn {
  width: 56px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  font-size: var(--font-size-desc);
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
html[data-page="goblin"] .saved-inv-action-btn:hover {
  color: var(--table-th);
}
html[data-page="goblin"] .saved-inv-action-btn:active {
  opacity: 0.5;
  transform: scale(0.96);
}
html[data-page="goblin"] .saved-inv-action-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
html[data-page="goblin"] .saved-inv-del-btn img {
  filter: invert(80%) sepia(21%) saturate(28%) hue-rotate(314deg) brightness(97%) contrast(98%);
}
html[data-page="goblin"] .saved-inv-del-btn img:hover {
  filter: invert(40%) sepia(21%) saturate(28%) hue-rotate(314deg) brightness(97%) contrast(98%);
}
html[data-page="goblin"] .saved-inv-empty {
  padding: 8px 0;
}
html[data-page="goblin"] .rules-panel .panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
html[data-page="goblin"] .rules-toggle-btn {
  width: 34px;
  height: 34px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0;
}
html[data-page="goblin"] .rules-toggle-btn:active {
  opacity: 0.5;
}
html[data-page="goblin"] .rules-toggle-btn img {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
  filter: invert(1);
}
html[data-page="goblin"] .rules-panel.is-open .rules-toggle-btn img {
  transform: rotate(180deg);
  transition: transform 220ms ease;
}
html[data-page="goblin"] .rules-panel:not(.is-open) .rules-toggle-btn img {
  transform: rotate(0deg);
  transition: transform 220ms ease;
}
html[data-page="goblin"] .rules-collapsible {
  overflow: hidden;
  height: auto;
  transition: height 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: height;
}
html[data-page="goblin"] .rules-collapsible-inner {
  padding-top: 8px;
}

/* ===== Shop page only ===== */

html[data-page="shop"] .selected-item {
  position: relative;
  width: 56px;
  height: 56px;
  overflow: visible;
  border: 1px solid #333;
  background: #2c2c2c;
  cursor: default;
}
html[data-page="shop"] .selected-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
html[data-page="shop"] .selected-item .qty-badge {
  position: absolute;
  left: 1px;
  bottom: 1px;
  font-size: var(--font-size-badge);
  padding: 1px;
  color: #ffffff;
  line-height: 1;
  background-color: rgb(0, 0, 0);
  padding: 1px 2px;
}
html[data-page="shop"] th.sortable {
  cursor: pointer;
  user-select: none;
}
html[data-page="shop"] th.sortable:hover {
  color: var(--text-point);
}
html[data-page="shop"] .sort-indicator {
  display: inline-block;
  margin-left: 6px;
  color: var(--text-point);
  font-size: 12px;
  vertical-align: middle;
}
html[data-page] .add-btn {
  width: 100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2c2c2c;
  color: #fff;
  cursor: pointer;
  font-size: var(--font-size-desc);
  white-space: nowrap;
}
html[data-page] .add-btn:hover {
  background-color: var(--text-point);
  color: #000;
}
html[data-page] .add-btn:active {
  opacity: 0.7;
  transform: scale(0.98);
}

/* ===== mini map (tile-based; shared) ===== */
html[data-page] .map-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html[data-page] .map-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html[data-page] .map-btn {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #2c2c2c;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  font-size: 18px;
  touch-action: manipulation;
}

html[data-page] .map-btn:hover {
  background: var(--text-point);
  color: #000;
}

html[data-page] .map-btn:active {
  opacity: 0.75;
  transform: scale(0.98);
}

html[data-page] .tile-map {
  --map-tile-size: 256px;
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  touch-action: none;
  cursor: grab;
}

html[data-page] .tile-map.is-dragging {
  cursor: grabbing;
}

html[data-page] .tile-map .map-stage {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

html[data-page] .tile-map .map-tiles,
html[data-page] .tile-map .map-markers {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

html[data-page] .tile-map .map-tile {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--map-tile-size);
  height: var(--map-tile-size);
  object-fit: cover;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

html[data-page] .tile-map .map-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--text-point);
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px var(--text-point);
  pointer-events: none;
}

/* ===== Responsive / media queries (merged) ===== */
@media (max-width: 900px) {
  /* common */
  html[data-page] body {
    padding: var(--menu-offset) 8px 100px;
  }
  html[data-page] .container {
    padding: 16px;
  }
  html[data-page] .col-num, html[data-page] .col-score {
    display: none;
  }
  html[data-page] .floating-total-box {
    width: calc(100% - 32px);
  }
  html[data-page] .page-layout {
    flex-direction: column;
    align-items: center;
  }
  html[data-page] .side-panel {
    position: static;
  }
  html[data-page] .icon-btn {
    right: 0;
  }
  html[data-page] .submit-row {
    flex-direction: column;
  }
  html[data-page] .identity-row {
    width: 100%;
  }
}

@media (min-width: 431px) and (max-width: 1400px) {
  /* common */
  html[data-page] .page-layout {
    flex-direction: column;
    align-items: center;
  }
  html[data-page] .total-box-wrapper {
    flex-direction: column;
  }
  html[data-page] .total-box-actions {
    flex-direction: row;
  }
  html[data-page] .side-panel-stack {
    width: 100%;
    max-width: 600px;
    position: relative;
    top: 0;
  }
  html[data-page] .captcha-row {
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 430px) {
  /* common */
  html[data-page] td {
    text-align: left;
  }
  html[data-page] .col-item {
    width: 30%;
  }
  html[data-page] .item-list {
    width: 100%;
    table-layout: fixed;
  }
  html[data-page] .item-list th, html[data-page] .item-list td {
    font-size: var(--font-size-default);
  }
  html[data-page] .item-name {
    font-size: var(--font-size-default);
  }
  html[data-page] .col-img {
    width: 10px !important;
  }
  html[data-page] .col-qty {
    width: 20px !important;
  }
  html[data-page] .col-name {
    width: 15px !important;
  }
  html[data-page] .quantity-control {
    display: flex;
    flex-direction: column;

  }
  html[data-page] .qty-box {
    width: 100%;
    justify-content: space-between;
  }
  html[data-page] .qty-btn-set--ghost{
    display: none;;
  }
    html[data-page] .qty-btn-set {
    width: 100%;
  }
  html[data-page] .side-panel-stack {
    width: 100%;
    max-width: 600px;
    position: relative;
    top: 0;
  }
  html[data-page] .captcha-row {
    flex-direction: column;
    gap: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* goblin only */
  html[data-page="goblin"] .grid-toast.grid-toast--shake {
    animation: none !important;
  }
}

@media (max-width: 430px) {
  /* goblin only */
  html[data-page="goblin"] .saved-inv-action-btn {
    width: 50px;
  }
  /* iOS Safari: font-size < 16px이면 포커스 시 자동 확대(화면 점프) 발생 -> 16px 이상으로 고정 */
  html[data-page="goblin"] .stack-editor-input {
    font-size: 16px;
  }

}

@media (max-width: 520px) {
  /* shop only */
  html[data-page] .search-input {
    width: 160px;
  }
  html[data-page] .add-btn {
    padding: 8px 8px;
  }
}


/* iOS Safari/모바일: input 폰트가 16px 미만이면 포커스 시 자동 확대(화면 점프) 발생 방지 */
@media (hover: none) and (pointer: coarse) {
  html[data-page="goblin"] .stack-editor-input {
    font-size: 16px;
  }
}
/* ===== Mini map (tile map) ===== */
html[data-page="squad-map"] .map-block,
html[data-page="squad-map-admin"] .map-block {
  width: 100%;
  height: 100%;
}

html[data-page] .map-controls {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

html[data-page] .map-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  cursor: pointer;
  font-family: "Rimgul", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

html[data-page] .map-btn:active {
  opacity: 0.8;
  transform: scale(0.95);
}

html[data-page="squad-map"] .tile-map,
html[data-page="squad-map-admin"] .tile-map {
  width: 100%;
  border-radius: 0;
  background: #000;
  overflow: hidden;
  position: relative;
  touch-action: none; /* 드래그/핀치 제스처를 JS에서 처리 */
}

html[data-page] .tile-map__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
}

html[data-page] .tile-map__viewport.is-dragging {
  cursor: grabbing;
}

html[data-page] .tile-map__world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}

html[data-page] .tile-map__tile {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background: #000; /* 로딩 중 깜빡임 완화 */
}

html[data-page] .tile-map__marker {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* Per-marker color (set via CSS variables from JS) */
  --marker-color: var(--text-point);
  --marker-rgb: 245 136 11;
  background: var(--marker-color);
  border: 2px solid #ffffff;
  box-shadow: 0 0 14px rgb(var(--marker-rgb) / 0.9);
  pointer-events: none;
}

/* Base marker icon (initial-marker) */
html[data-page] .tile-map__marker--base {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;

}

html[data-page] .tile-map__marker--base::before,
html[data-page] .tile-map__marker--base::after {
  content: none;
  animation: none !important;
}

html[data-page] .tile-map__marker--base .tile-map__marker-icon {
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.75));
}

/* Pulse ripple (4s) */
html[data-page] .tile-map__marker::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgb(var(--marker-rgb) / 0.8);
  transform: scale(0.6);
  opacity: 0;
  animation: tileMapMarkerPulse 2s ease-out infinite;
  pointer-events: none;
}

html[data-page] .tile-map__marker::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
}

@keyframes tileMapMarkerPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.6);
    opacity: 0;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}


html[data-page] .tile-map__marker--player {
  /* player markers get color via inline styles */
  pointer-events: auto;
  cursor: pointer;
}

html[data-page] .tile-map__marker--offline {
  --marker-color: rgba(160,160,160,0.9);
  --marker-rgb: 160 160 160;
  box-shadow: 0 0 10px rgba(160,160,160,0.55);
}

html[data-page] .tile-map__marker-name {
  font-weight: 700;
}

html[data-page] .tile-map__marker-sub {
  opacity: 0.85;
  font-size: 10px;
}

@media (hover: none) {
  html[data-page] .tile-map__marker--player .tile-map__marker-label {
    opacity: 0;
    visibility: hidden;
  }
  html[data-page] .tile-map__marker--player.tile-map__marker--show-label .tile-map__marker-label {
    opacity: 1;
    visibility: visible;
  }
}

/* Squad roster (click to focus) */
html[data-page] .mini-map-roster {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

html[data-page] .mini-map-roster__item {
  appearance: none;
  border: 1px solid #333;
  background: #121212;
  color: #fff;
  border-radius: 8px;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-align: left;
}

html[data-page] .mini-map-roster__item:hover {
  border-color: #555;
}

html[data-page] .mini-map-roster__item.is-following {
  border-color: #777;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18) inset;
}

html[data-page] .mini-map-roster__item.is-offline {
  opacity: 0.7;
}

html[data-page] .mini-map-roster__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

html[data-page] .mini-map-roster__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

html[data-page] .mini-map-roster__name {
  font-size: 12px;
  font-weight: 700;
}

html[data-page] .mini-map-roster__status {
  font-size: 11px;
  opacity: 0.8;
}



html[data-page] .mini-map-roster__hp{
  width: 120px;
  height: 6px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(0,0,0,0.35);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 2px;
}
html[data-page] .mini-map-roster__hp-fill{
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0,0,0,0.25);
}

/* 기본 상태(비추적)에서는 체력바 숨김: 추적중/추적중(R)일 때만 표시 */
html[data-page] .mini-map-roster__item:not(.is-following) .mini-map-roster__hp{
  display: none;
}

/* ===== Survival HUD (Wave / elapsed / total) ===== */
html[data-page] .sv-wave-hud{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 9999;
  pointer-events: none;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  font-weight: 700;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
html[data-page] .sv-wave-hud__wave{
  font-size: 12px;
  opacity: 0.95;
}
html[data-page] .sv-wave-hud__time{
  margin-top: 4px;
  font-size: 14px;
  letter-spacing: 0.2px;
}
html[data-page] .sv-wave-hud__sep{ opacity: 0.6; }
html[data-page] .tile-map__marker-label {
  font-family: 'Presentation';
  position: absolute;
  width: fit-content;
  left: 50%;
  top: -6px;
  transform: translate(-50%, -100%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}


/* ===== Region Builder (map) ===== */
.region-builder{
    position:fixed; right:14px; top:14px; z-index:9999;
    width:min(390px, 92vw); max-height:calc(100vh - 28px);
    overflow:auto;
    background:rgba(0,0,0,0.72);
    color:#fff;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:14px;
    backdrop-filter: blur(10px);
    padding:12px;
    font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  }
  .rb-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
  .rb-title{font-size:14px;font-weight:700;}
  .rb-sub{opacity:.8}
  .rb-row{display:flex;align-items:center;gap:10px;margin:8px 0;}
  .rb-row label{width:92px;opacity:.9}
  .rb-row input,.rb-row select{
    flex:1;
    background:rgba(0,0,0,0.35);
    color:#fff;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:10px;
    padding:8px 10px;
    outline:none;
  }
  .rb-toggles{justify-content:flex-start}
  .rb-toggles label{width:auto}
  .rb-actions{justify-content:space-between}
  .region-builder button{
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(255,255,255,0.10);
    color:#fff;
    padding:8px 10px;
    border-radius:10px;
    cursor:pointer;
  }
  .region-builder button:hover{border-color:rgba(255,255,255,0.35)}
  .region-builder button.primary{background:rgba(114,210,58,0.22); border-color:rgba(114,210,58,0.55)}
  .region-builder button.danger{background:rgba(255,80,80,0.18); border-color:rgba(255,80,80,0.55)}
  .region-builder button.ghost{background:transparent}
  .rb-hr{border:none;border-top:1px solid rgba(255,255,255,0.12); margin:10px 0;}
  .rb-list-head{display:flex;align-items:center;justify-content:space-between;margin:6px 0}
  .rb-list{display:flex;flex-direction:column;gap:6px}
  .rb-item{
    display:flex;gap:8px;align-items:center;justify-content:space-between;
    padding:8px 10px;border-radius:10px;
    border:1px solid rgba(255,255,255,0.12);
    background:rgba(0,0,0,0.25);
    cursor:pointer;
  }
  .rb-item:hover{border-color:rgba(255,255,255,0.28)}
  .rb-item .id{font-weight:700}
  .rb-item .meta{opacity:.8;font-size:11px}
  .rb-output{
    width:100%; min-height:150px; margin-top:8px;
    background:rgba(0,0,0,0.35);
    color:#eaeaea;
    border:1px solid rgba(255,255,255,0.18);
    border-radius:12px;
    padding:10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:11px;
    line-height:1.35;
    white-space:pre;
  }

  /* Center icon overlay */
  .rb-center-icons{
    position:absolute; inset:0;
    pointer-events:none;
    z-index: 8; /* above regions/trails/route, below markers z? */
  }
  .rb-center-icon{
    position:absolute;
    transform: translate(-50%, -50%);
    pointer-events:none;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.45));
  }
  .rb-center-icon img{display:block; width:100%; height:100%;}

/* ===== Survival Wave HUD (top-right corner) ===== */
html[data-page] #mini-map .mini-map-wave-hud{
  position:absolute;
  top:10px;
  right:10px;
  z-index:60;
  pointer-events:none;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color:#fff;
  line-height:1.1;
}
html[data-page] #mini-map .mini-map-wave-hud__wave{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.5px;
  opacity:0.95;
}
html[data-page] #mini-map .mini-map-wave-hud__time{
  margin-top:4px;
  font-size:12px;
  font-weight:600;
  opacity:0.9;
}

.sv-auth-panel{
  position: fixed;
  left: 12px;
  top: 12px;
  z-index: 10000;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,0.78);
  color: #fff;
  backdrop-filter: blur(6px);
  font-size: 13px;
}
.sv-auth-panel input{
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #fff;
  outline: none;
}
.sv-auth-panel button{
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  color: #fff;
  cursor: pointer;
}
.sv-lock-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(0,0,0,0.88);
}
.sv-lock-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(420px, calc(100% - 32px));
  border-radius: 14px;
  padding: 16px 18px;
  background: rgba(20,20,20,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}
.sv-lock-title{ font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.sv-lock-desc{ font-size: 13px; opacity: 0.9; }
html.sv-locked .sv-lock-overlay{ display: block; }
html.sv-locked #mini-map{ filter: blur(2px) brightness(0.7); pointer-events: none; }