:root {
  --bg: #f5f5f5;
  --bg-card: #ffffff;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-soft: #eff6ff;
  --text-main: #111827;
  --text-muted: #6b7280;
  --bg-hover: #f9fafb;
  --bg-soft: #f3f4f6;
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #111827;
  --input-placeholder: #9ca3af;
  --input-focus: rgba(37, 99, 235, 0.35);
  --bg-page: #f3f4f6; /* 라이트모드 배경 */
}

/* ✅ 다크 모드 */
body.theme-dark {
  --bg: #0b1220;
  --bg-card: #111a2e;
  --border: #25324a;
  --accent: #60a5fa;
  --accent-soft: rgba(96,165,250,0.18);
  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --bg-hover: #16233c;
  --bg-soft: #16233c;
  --input-bg: #0f172a;          /* 입력칸 배경 */
  --input-border: #2b3b57;      /* 테두리 */
  --input-text: #e5e7eb;        /* 글자 */
  --input-placeholder: #94a3b8; /* placeholder */
  --input-focus: rgba(96,165,250,0.35);  
  --bg-page: #070b14; /* 다크모드 배경 */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text-main);
}

a { color: inherit; text-decoration: none; }

/* ===== 헤더 ===== */
/* ===== Header 정리(좌측/상단 눌림 개선) ===== */
header{
  display:flex;
  align-items:center;              /* 세로 정렬 */
  justify-content:space-between;
  padding: 14px 28px;              /* 상단/좌우 여백 증가(눌림/좌측붙음 해결) */
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.06);
}

/* ===== 브랜드 로고 왼쪽 배치 강제 ===== */
.brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;

  cursor: pointer;
  user-select: none;
}

/* 로고 이미지 */
.brand-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

/* 텍스트 묶음 */
.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* “메키지지” */
.brand-title{
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;               /* 위아래 눌림 방지 */
  margin: 0;                       /* 혹시 기본 margin 있으면 제거 */
}

/* 서브 문구 */
.brand-sub{
  font-size: 0.9rem;
  line-height: 1.2;
  color:#6b7280;
  margin: 0;
}

/* 우측 영역도 세로 정렬 */
.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-version {
  font-size: 12px;
  color: var(--text-muted);
}

.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.icon-btn:hover {
  background: #f9fafb;
  box-shadow: 0 6px 15px rgba(15,23,42,0.08);
  transform: translateY(-1px);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 32px;
}

/* ===== 공통 버튼 ===== */
button {
  font-family: inherit;
  cursor: pointer;
}

.btn-secondary {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s.ease, transform 0.05s ease, box-shadow 0.15s ease;
}

.btn-secondary:hover {
  background: #f9fafb;
  transform: translateY(-1px);
  box-shadow: 0 6px 15px rgba(15,23,42,0.08);
}

.btn-ghost-disabled {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  color: #9ca3af;
  font-size: 14px;
  font-weight: 500;
  cursor: default;
}

/* ===== 메인 홈 페이지 (mesu.live 스타일) ===== */
.home-main-full {
  min-height: 480px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
}

.home-inner {
  max-width: 900px;
  width: 100%;
  text-align: center;
}

.home-main-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 24px;
}

.home-section {
  margin-bottom: 40px;
}

.home-section-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 16px;
}

.home-card-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
}

.home-card {
  width: 150px;
  padding: 16px 10px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 10px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.08s ease, background 0.08s ease;
}

.home-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 20px;
  background: #f3f4f6; /* background-image 로 실제 아이콘 교체 예정 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 4px;
}

.home-card-label-main {
  font-size: 1.05rem;   /* 기본 1rem → 1.15~1.2 권장 */
  font-weight: 700;
  margin-top: 6px;
}

.home-card-label-sub {
  font-size: 12px;
  color: #6b7280;
}

.home-card--active {
  cursor: pointer;
}

.home-card--active:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37,99,235,0.18);
  border-color: #bfdbfe;
  background: #eff6ff;
}

.home-card--disabled {
  cursor: default;
  opacity: 0.55;
}

.home-helper-text {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 8px;
}

/* ===== 공통 카드/레이아웃 (EV/시뮬/공지) ===== */
.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.page-header-row h1 {
  margin: 0;
  font-size: 20px;
}

.page-header-row p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 260px;
  gap: 20px;
}

.tool-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0; /* <- 이거 추가 */
}

.tool-ad {
  min-height: 240px;
  border-radius: 14px;
  border: 1px dashed var(--border);
  background-color: var(--bg-card); /* 카드톤 */
  padding: 12px;
}

.card {
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  padding: 16px 18px;
  box-shadow: 0 4px 10px rgba(15,23,42,0.03);
}

.card h2 {
  margin: 0 0 6px;
  font-size: 16px;
}

.desc {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--text-muted);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.col {
  flex: 1 1 160px;
  min-width: 0;
}

label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
}

select, input[type="number"], input[type="text"] {
  width: 100%;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: var(--text-main);
  font-size: 13px;
}

select:focus, input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.primary-btn {
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: 500;
}

.primary-btn:hover {
  background: #1d4ed8;
}

/* 트랙 공통: 결과 박스 (최종 1개만 유지) */
.result-box{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #e9ecef;
  background: #fff;

  /* 핵심: 템플릿 문자열 줄바꿈/들여쓰기 때문에 빈줄이 생기는 현상 방지 */
  white-space: pre-line;

  line-height: 1.45;
  font-family: inherit;
  min-height: 0;
}

.muted {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* 트랙3 체크박스 */
.item-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  font-size: 12px;
}

.item-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
}

.item-checkbox input {
  width: 14px;
  height: 14px;
}

/* 시뮬레이터 버튼 동일 폭 */
.sim-btn-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sim-btn-row button {
  flex: 1 1 160px;
}

/* 등급 요약 스타일 */
.grade-summary {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.grade-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.grade-chip span {
  margin-left: 4px;
}

.grade-normal   { background:#e5e7eb; color:#374151; }
.grade-rare     { background:#dbeafe; color:#1d4ed8; }
.grade-epic     { background:#ede9fe; color:#6d28d9; }
.grade-unique   { background:#fef9c3; color:#92400e; }
.grade-legendary{ background:#dcfce7; color:#15803d; }
.grade-mystic   { background:#fee2e2; color:#b91c1c; }
.grade-unknown  { background:#e5e7eb; color:#6b7280; }

/* 공지 */
.notice-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 800px;
  margin: 0 auto;
}

.notice-list {
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 960px) {
  .home-main-full {
    padding-top: 24px;
  }
  .home-card {
    width: 44%;
    min-width: 140px;
  }
  .tool-layout {
    grid-template-columns: minmax(0,1fr);
  }
  .tool-ad {
    min-height: 120px;
  }
}

.track3-row-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.track3-row {
  display: flex;
  gap: 8px;
}

.track3-row .track3-col-select {
  flex: 2 1 0;
}

.track3-row .track3-col-count {
  flex: 1 1 0;
}

/* 등급별 이름 색상 */
.tier-normal {
  color: #000000;   /* 검은색 */
  font-weight: 600;
}

.tier-rare {
  color: #0288d1;   /* 짙은 하늘색 (원하시면 다른 코드로 조정 가능) */
  font-weight: 600;
}

.tier-epic {
  color: #a855f7;  /* 보라색 (Tailwind violet-500 느낌) */
  font-weight: 600;
}

.tier-unique {
  color: #eab308;  /* 노랑 (amber-500 느낌) */
  font-weight: 600;
}

.tier-legendary {
  color: #22c55e;  /* 초록 (green-500 느낌) */
  font-weight: 600;
}

.tier-mystic {
  color: #d32f2f;   /* 빨간색 */
  font-weight: 600;
}

.tier-ancient {
  color: #1565c0;   /* 진한 파란색 */
  font-weight: 600;
}

/* =========================
   어빌리티 슬롯 2열 레이아웃 (교체용)
   ========================= */

.ability-slot-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* 화면이 좁으면 1열 */
@media (max-width: 720px){
  .ability-slot-grid{
    grid-template-columns: 1fr;
  }
}

.ability-slot-card{
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  background-color: #151515;
  border: 1px solid #333;
}

.ability-slot-title{
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.ability-slot-fields{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 6px;
}

.ability-slot-fields select{
  width: 100%;
}

.ability-slot-min{
  width: 100%;
  padding: 6px 8px;
}

.ability-slot-range{
  font-size: 0.8rem;
  opacity: 0.85;
  margin-top: 4px;
}

.ability-slot-lock{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  margin-top: 6px;
}

/* 어빌리티 슬롯: 한 줄에 2개(좌/우) */
.ability-slot-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.ability-slot-row{
  width: 100%;
}

.slot-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
}

.slot-range{
  grid-column: 1 / -1;
  font-size: 0.85rem;
  opacity: 0.85;
}

/* ===== Ability Simulator grade tag ===== */
.grade-tag{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.3;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(0,0,0,0.08);
}

/* 기존 프로젝트에서 쓰던 톤과 비슷하게 "보라/노랑/초록" 계열 유지 */
.grade-normal    { background:#e9ecef; color:#495057; }
.grade-rare      { background:#d0ebff; color:#1864ab; }  /* 필요 시 조정 */
.grade-epic      { background:#e5dbff; color:#5f3dc4; }  /* 보라 */
.grade-unique    { background:#fff9db; color:#ad6800; }  /* 노랑 */
.grade-legendary { background:#d3f9d8; color:#2b8a3e; }  /* 초록 */
.grade-mystic    { background:#ffe3e3; color:#c92a2a; }
.grade-ancient   { background:#d0ebff; color:#1971c2; }

.slot-range-inline{
  margin-left: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap;
}

/* =========================================================
   Ability Simulator - UI 안정화(버튼 위치 고정용)
   - 슬롯 카드 높이 변동으로 인해 아래 버튼이 밀리는 현상 방지
   ========================================================= */

/* simulator.js에서 wrap.className = "ability-slot" 를 쓰므로, 이 클래스에 최소 높이를 부여 */
.ability-slot{
  padding: 10px 12px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  background: #fff;
  min-height: 110px;          /* 핵심: 슬롯 카드 높이 최소 확보 */
}

/* 슬롯 제목 */
.ability-slot-head{
  font-weight: 800;
  margin-bottom: 6px;
}

/* 등급/옵션/수치 라인: 2줄(본문 + 범위) 기준으로 공간 확보 */
.slot-line{
  min-height: 54px;           /* 핵심: 내용 바뀌어도 슬롯 내부 높이 안정 */
  display: block;
}

/* 슬롯 한 줄 표시를 '2줄 구조'로 고정 */
.slot-line .slot-mainline{
  display: block;
  font-weight: 700;
  line-height: 1.35;
}

.slot-line .slot-rangeline{
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap;        /* 범위는 한 줄 유지(원하면 제거 가능) */
  overflow: hidden;
  text-overflow: ellipsis;    /* 너무 길면 ... 처리 */
}

/* 트랙 공통: 버튼 줄 */
.card-section .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===== 주문서 시뮬레이터 슬롯(10칸) ===== */
.scroll-slots{
  display:grid;
  grid-template-columns: repeat(10, minmax(28px, 1fr));
  gap:10px;
  margin: 10px 0 14px 0;
}

.scroll-slot{
  position:relative;
  height:54px;
  border-radius:12px;
  border:1px solid #dee2e6;
  background:#f8f9fa;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  user-select:none;
}

.scroll-slot.is-idle{
  background:#f1f3f5;
}

.scroll-slot.is-success{
  background:#d3f9d8;
  border-color:#8ce99a;
}

.scroll-slot.is-fail{
  background:#ffe3e3;
  border-color:#ffa8a8;
}

.scroll-slot.is-current{
  outline:2px solid #228be6;
  outline-offset:2px;
}

.scroll-slot-label{
  font-size:16px;
  color:#343a40;
}

.scroll-slot-dot{
  position:absolute;
  right:10px;
  bottom:10px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#adb5bd; /* idle */
}

.scroll-slot.is-success .scroll-slot-dot{ background:#2f9e44; }
.scroll-slot.is-fail .scroll-slot-dot{ background:#e03131; }

.scroll-sim-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* 스타포스 단가 2행2열 레이아웃 */
.sf-price-grid-2x2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ===== form-grid: 2열 입력 레이아웃(스타포스 트랙 공통) ===== */
.form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.form-field{
  min-width: 0;
}

@media (max-width: 720px){
  .form-grid{
    grid-template-columns: 1fr;
  }
}

/* ===== Starforce Simulator (1-try UI) ===== */
.sf-sim-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.sf-starline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  gap:10px;
}

.sf-starline-label{
  font-weight:600;
  color:#111827;
}

.sf-starline-value{
  font-weight:700;
}

.sf-stars{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 0 0 0;
  min-height:28px;
}

.sf-star{
  width:18px;
  height:18px;
  line-height:18px;
  text-align:center;
  border-radius:4px;
  font-size:14px;
  user-select:none;
}

.sf-star.on{
  background:#fde68a; /* 노랑 */
  color:#111827;
}

.sf-star.off{
  background:#e5e7eb; /* 회색 */
  color:#6b7280;
}

/* ===== Starforce Simulator: result whitespace tighten ===== */

/* 결과 박스 자체 여백/최소높이 제거 */
#sfSimResultBox.result-box {
  padding: 14px 16px;
  min-height: 0;      /* 혹시 기존에 min-height가 있으면 제거 */
}

/* 결과 라인 간 간격 축소 */
#sfSimResultBox .result-line {
  margin: 6px 0;
  line-height: 1.35;
}

/* 구분선 간격 축소 */
#sfSimResultBox .result-hr {
  margin: 10px 0;
}

/* 카드 내부 기본 p/desc 여백이 큰 경우 대비 */
#page-starforce-sim .card-section > p,
#page-starforce-sim .desc {
  margin: 6px 0 10px;
}

/* 현재 상태 카드 안쪽 레이아웃이 넓게 벌어지는 경우 */
#page-starforce-sim .sf-starline {
  margin-bottom: 8px;
}
#page-starforce-sim .sf-stars {
  margin: 8px 0 12px;
}
#sfLuckOut { white-space: pre-line; }

.sub-title{
  margin-top: 1.5rem;   /* 인라인과 동일하게 CSS로 통일(선택) */
  margin-bottom: 6px;   /* 핵심: 아래 여백 줄이기 */
}

.home-card-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.card-weapon       .home-card-icon { background-image: url("./img/home/weapon.png"); }
.card-companion    .home-card-icon { background-image: url("./img/home/companion.png"); }
.card-ability      .home-card-icon { background-image: url("./img/home/ability.png"); }
.card-scroll       .home-card-icon { background-image: url("./img/home/scroll.png"); }
.card-starforce    .home-card-icon { background-image: url("./img/home/starforce.png"); }
.card-potential    .home-card-icon { background-image: url("./img/home/potential.png"); }
.card-relic        .home-card-icon { background-image: url("./img/home/relic.png"); }
.card-relic-pot    .home-card-icon { background-image: url("./img/home/relic_potential.png"); }

.home-card-icon {
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}

.home-card:hover .home-card-icon {
  transform: scale(1.08);
  transition: transform 0.15s ease;
}

/* 주문서 Track1 - 프리미엄 / 길드버프 완전 동일 사이즈 기준화 */

/* 한 줄 정렬 */
.inline-check-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size: 12px;
}

/* label 자체를 기준으로 통일 */
.inline-check{
  display:inline-flex;
  align-items:center;
  gap:6px;                 /* 프리미엄과 동일한 간격 */
  margin:0;
  padding:0;
  font: inherit;           /* ★ 핵심: 부모(프리미엄)와 완전 동일 */
  line-height: normal;     /* ★ 브라우저 기본값으로 복귀 */
  font-weight: 400;        /* 얇은 기준 */
  white-space: nowrap;
}

/* 체크박스 크기: 브라우저 기본 크기 사용 */
.inline-check input[type="checkbox"]{
  margin:0;
  padding:0;
  width:auto;              /* ★ 강제 사이즈 제거 */
  height:auto;
  transform:none;          /* 확대/축소 제거 */
}

/* 프리미엄 | 길드 사이 구분선 */
.inline-check-row__divider{
  width:1px;
  height:1em;              /* 텍스트 높이 기준 */
  background:#e5e7eb;
}

/* 길드 버프 묶음 */
.guild-buff-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font: inherit;           /* ★ 프리미엄과 동일 */
  font-weight: 400;
}

/* "길드 버프:" 텍스트도 동일 두께 */
.guild-buff-inline__title{
  font: inherit;
  font-weight: 400;
  margin:0 2px 0 0;
}

/* guide(SEO 랜딩)에서만 result-box의 줄바꿈 렌더링 방지 */
.seo-guide .result-box{
  white-space: normal;   /* pre-line 해제: 빈 줄처럼 보이는 현상 제거 */
  margin-top: 0;         /* 박스 위 여백도 같이 정리(선택이지만 추천) */
  line-height: 1.35;     /* 텍스트 밀도 약간 개선 */
}

/* ===== 다크모드 대응: 폼 컨트롤 ===== */
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
select,
textarea {
  background: var(--input-bg);
  color: var(--input-text);
  border: 1px solid var(--input-border);
  border-radius: 10px;
  outline: none;

  /* 기존 레이아웃이 있다면 충돌 없도록 최소만 */
}

input::placeholder,
textarea::placeholder {
  color: var(--input-placeholder);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* 포커스(클릭했을 때) */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus);
}

/* 비활성/readonly 처리 */
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* 옵션 드롭다운(브라우저마다 제한 있지만 넣는 게 도움 됨) */
select option {
  background: var(--input-bg);
  color: var(--input-text);
}

/* ================================
   다크모드: 흰색으로 남는 UI 강제 보정
   (style.css 맨 아래에 추가)
================================ */

/* 1) 상단 헤더(현재 흰색) */
body.theme-dark header {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* 헤더 내부 텍스트(서브타이틀 등) */
body.theme-dark header .brand-title,
body.theme-dark header .brand-sub {
  color: var(--text-main) !important;
}
body.theme-dark header .brand-sub {
  color: var(--text-muted) !important;
}

/* 2) 헤더 우측 아이콘 버튼(흰 원 버튼) */
body.theme-dark .icon-btn {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
}
body.theme-dark .icon-btn:hover {
  background: var(--bg-hover) !important;
}

/* 3) "메인 페이지로" 버튼(흰색으로 남는 케이스) */
body.theme-dark .btn-secondary,
body.theme-dark button.btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
}
body.theme-dark .btn-secondary:hover,
body.theme-dark button.btn-secondary:hover {
  background: var(--bg-hover) !important;
}

/* 4) 결과창(흰 박스) — 프로젝트에서 결과창은 대체로 output/result 계열 div */
body.theme-dark .result,
body.theme-dark .result-box,
body.theme-dark .output,
body.theme-dark .output-box,
body.theme-dark .result-area,
body.theme-dark pre,
body.theme-dark .mono-box {
  background: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border) !important;
}

/* 5) 광고창(우측 큰 흰 박스) — 이름이 어떤 것이든 우측 영역/점선 박스까지 같이 잡기 */
body.theme-dark .tool-side,
body.theme-dark .tool-side .card,
body.theme-dark .ad,
body.theme-dark .ad-box,
body.theme-dark .ad-panel,
body.theme-dark .ad-placeholder {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

body.theme-dark .slot-card,
body.theme-dark .ability-slot,
body.theme-dark .slot-box,
body.theme-dark .slot-item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
}

/* 점선 테두리 광고박스가 있다면 */
body.theme-dark .ad-placeholder,
body.theme-dark .ad-box {
  border: 1px dashed var(--border) !important;
}

/* 6) 메인 페이지 아이콘 카드(현재 흰색 카드)도 다크로 맞추고 싶다면 */
body.theme-dark .home-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-main) !important;
}
body.theme-dark .home-card-label,
body.theme-dark .home-card-label-sub {
  color: var(--text-main) !important;
}
body.theme-dark .home-card-label-sub {
  color: var(--text-muted) !important;
}
body.theme-dark .home-card-icon {
  background-color: var(--bg-soft) !important;
}

body.theme-dark .card-weapon    .home-card-icon { background-image: url("./img/home/weapon_dark.png"); }
body.theme-dark .card-companion .home-card-icon { background-image: url("./img/home/companion_dark.png"); }
body.theme-dark .card-ability   .home-card-icon { background-image: url("./img/home/ability_dark.png"); }
body.theme-dark .card-scroll    .home-card-icon { background-image: url("./img/home/scroll_dark.png"); }
body.theme-dark .card-starforce .home-card-icon { background-image: url("./img/home/starforce_dark.png"); }
body.theme-dark .card-potential .home-card-icon { background-image: url("./img/home/potential_dark.png"); }
body.theme-dark .card-relic     .home-card-icon { background-image: url("./img/home/relic_dark.png"); }
body.theme-dark .card-relic-pot .home-card-icon { background-image: url("./img/home/relic_potential_dark.png"); }

/* =========================================================
   Mobile (<= 520px) – Header + Home grid + ScrollSim slots + Header row
   목표:
   - 홈 화면: 한 줄 4개 고정
   - 아이콘: 카드 안에서 "꽉 찬" 영역 + 아래에 이름
   - 카드 박스: aspect-ratio로 안정화(늘었다 줄었다 방지)
   - 주문서 강화 진행: 2줄(5x2)
   - 페이지 헤더: 제목 길이에 따른 버튼 겹침 방지
========================================================= */

/* =========================
   Page header (좌 제목 / 우 버튼) 겹침 방지 (공통)
========================= */
.page-header-row{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.page-header-row > div:first-child{
  min-width: 0;
  flex: 1 1 auto;
}

.page-header-row > div:last-child{
  flex: 0 0 auto;
}

.page-header-row h1{
  margin: 0;
  word-break: keep-all;
}

.page-header-row .btn-secondary{
  white-space: nowrap;
}

/* =========================
   Mobile (<=520px)
========================= */
@media (max-width: 520px){

  /* ----- Header fixes ----- */
  header{
    position: sticky;
    top: 0;
    z-index: 50;
  }

  .header-row,
  .header-inner,
  .topbar{
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .brand{
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand-logo{
    width: 38px;
    height: 38px;
  }

  .brand-title{
    font-size: 18px;
    line-height: 1.1;
  }

  .brand-sub{
    display: none;
  }

  .header-right{
    margin-left: auto;
    gap: 8px;
  }

  .icon-btn{
    width: 38px;
    height: 38px;
  }

  /* ----- Page background ----- */
  body{
    background: var(--bg-page);
  }

  /* ----- Home layout spacing ----- */
  .home-main-full{
    padding-top: 18px;
    min-height: auto;
  }

  .home-main-title,
  .home-section-title{
    font-size: 20px;
    margin-bottom: 12px;
  }

  .home-section{
    margin-bottom: 26px;
  }

  /* ----- 홈 카드 그리드 4열 고정 ----- */
  .home-card-row{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    justify-content: initial !important;

    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* =====================================================
     홈 카드: "꽉 찬 아이콘 + 아래 이름" 레이아웃으로 고정
  ===================================================== */
/* =====================================================
   홈 카드: "꽉 찬 아이콘 + 아래 이름" 레이아웃으로 고정
===================================================== */
.home-card{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 6px 6px !important;     /* ✅ 패딩 더 회수(아이콘 공간 확보) */
  border-radius: 14px;

  /* ✅ 카드 전체 높이를 조금 더 확보해서 아이콘이 커질 여지 추가 */
  aspect-ratio: 1 / 1.35;          /* (기존 1 / 1.28) → 약간 더 세로로 */
  height: auto !important;
  min-height: 0 !important;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* ----- 아이콘: 카드 폭을 "꽉" 채우는 정사각형(=더 큼) 영역 ----- */
.home-card-icon{
  width: 100% !important;
  aspect-ratio: 1 / 1;             /* ✅ 핵심: 정사각형으로 세로 확장 */
  height: auto !important;

  border-radius: 14px !important;
  margin: 0 auto 6px !important;

  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ----- 라벨: 공간을 조금만 차지하게(아이콘 더 키움) ----- */
.home-card-label-main{
  display: flex;
  align-items: center;
  justify-content: center;

  height: 22px;                    /* (기존 26px) → 라벨 공간 회수 */
  padding: 0 4px;

  font-size: clamp(12px, 3.2vw, 14px) !important;
  line-height: 1.15 !important;

  margin-top: 0 !important;
  text-align: center;

  word-break: keep-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

  .home-card-label-sub{
    font-size: clamp(11px, 2.8vw, 12px) !important;
    margin-top: 2px !important;
    text-align: center;
    word-break: keep-all;
  }

/* ----- 잠재&에디셔널: 한 줄 유지 + 폭 기준으로 정상 ellipsis 동작 ----- */
.home-card.card-potential .home-card-label-main{
  display: block !important;              /* ✅ flex 해제(ellipsis 정상화) */
  width: 100% !important;                /* ✅ 라벨 폭을 카드 폭에 고정 */
  box-sizing: border-box !important;

  font-size: clamp(9px, 2.4vw, 12px) !important; /* ✅ 더 강하게 축소 */
  letter-spacing: -0.03em !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-align: center !important;          /* ✅ 가운데 정렬은 text-align로 */
  padding: 0 2px !important;              /* ✅ 좌우 잘림 방지용 최소 패딩 */
  max-width: 100% !important;
}

  /* =========================
     주문서 시뮬레이터: 강화 진행(10칸) - 2줄(5x2)
  ========================= */
  #scrollSimSlots.scroll-slots{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  #scrollSimSlots .scroll-slot{
    width: auto !important;
    min-width: 0 !important;
  }

  /* =========================
     Mobile: page header row (버튼 겹침 원천 차단)
  ========================= */
  .page-header-row{
    flex-direction: column;
    align-items: stretch;
  }

  .page-header-row > div:last-child{
    display: flex;
    justify-content: flex-end;
  }

  .page-header-row .btn-secondary{
    width: auto;
    min-height: 40px;
  }
}