/* 폰트 교체 시 깜빡임(FOUT) 없이, 로드 전까지는 텍스트를 잠깐 숨겼다가 Pretendard로만 그림 */
@font-face {
  font-family: "Pretendard Variable";
  font-weight: 45 920;
  font-style: normal;
  font-display: block;
  src: url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2/PretendardVariable.woff2") format("woff2-variations");
}

:root {
  /* 라이트 전용 사이트임을 브라우저에 알림. 안드로이드 크롬 등의 자동 다크 변환이
     색을 임의로 뒤집어 배색이 깨지는 것을 막아준다 (다크모드 지원 시 이 값을 함께 변경) */
  color-scheme: light;

  --bg: #ffffff;
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --ink: #18181b;
  --muted: #71717a;
  --muted-weak: #a1a1aa;
  --line: #e4e4e7;
  --accent: #18181b;
  --accent-weak: #f4f4f5;
  --high: #b45309;
  --high-weak: #fef3e2;
  --low: #0f766e;
  --low-weak: #ecfaf8;
  --danger: #b91c1c;
  --radius: 8px;
  --radius-sm: 6px;
  --mono: var(--sans); /* Pretendard Variable로 통일 */
  --sans: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Segoe UI", "Noto Sans KR", Roboto, sans-serif;
  --brand: var(--ink);
  --brand-weak: var(--accent-weak);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

html {
  overflow-x: hidden;
  overflow-y: scroll; /* 세로 스크롤바를 항상 고정해서, 콘텐츠 길이에 따라 화면이 좌우로 밀리는 현상 방지 */
  width: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100vw;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 24px 88px;
}
@media (max-width: 600px) {
  .wrap { padding: 24px 16px 56px; }
}

/* ── 헤더 ── */
.topbar {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  /* 모바일은 제목/안내 문구가 줄바꿈되면서 세로로 쌓여 아래 요소와 더 멀어 보이므로 여백을 더 줄임.
     gap도 PC에서는 가로 간격이지만 줄바꿈되면 세로 간격으로 쓰여서 같이 줄임 */
  .topbar { margin-bottom: 18px; gap: 4px; }
  /* 화면이 넓은 모바일 기기(갤럭시 S20 울트라 등)에서는 한 줄에 다 들어가버려 폭이 꽉 차 보이므로,
     기기 폭과 무관하게 항상 다음 줄로 내려가도록 강제 */
  .topbar .tag { flex-basis: 100%; }
}
.topbar h1 {
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin: 0;
}
.topbar .tag {
  font-size: 14px;
  color: var(--muted);
}
.topbar a.back {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
}
.topbar a.back:hover { color: var(--ink); }

/* ── 카드 ── */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card h2 {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 18px;
  color: var(--ink);
}

.cols {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 16px;
  margin-bottom: 24px;
  align-items: start;
}

/* 결과 입력 폼 높이를 최근 입력(5줄) 카드에 맞추기 위해 여백을 조정 */
.result-form { padding: 20px 22px; display: flex; flex-direction: column; }
.result-form h2 { margin-bottom: 14px; padding-bottom: 8px; }
.result-form .field { margin-bottom: 11px; flex: 1; display: flex; flex-direction: column; }
.result-form .field label { margin-bottom: 4px; }
.result-form .field input { padding: 8px 10px; }
.result-form .field textarea { flex: 1; resize: none; }
.result-form .row2 { gap: 10px; }
.result-form .checkbox-label { margin-top: 5px; }
.result-form button.primary { margin-top: 6px; padding: 10px; }
.result-form .note { margin-top: 5px; }
.result-form .toast { margin-top: 9px; min-height: 16px; }
@media (max-width: 820px) {
  .cols { grid-template-columns: 1fr; }
  .result-form { height: auto !important; }
}

/* ── 폼 ── */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.12s ease;
}
.field input::placeholder { color: var(--muted-weak); }
.field input:focus {
  outline: none;
  border-color: var(--ink);
}
.field input.num { font-family: var(--sans); }
.field input:disabled { background: var(--surface-alt); color: var(--muted-weak); }

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  resize: vertical;
  transition: border-color 0.12s ease;
}
.field textarea::placeholder { color: var(--muted-weak); }
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) {
  .row2 { grid-template-columns: 1fr; }
}

button.primary {
  margin-top: 6px;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
button.primary:hover { opacity: 0.85; }
button.primary:disabled { opacity: 0.4; cursor: default; }

.note {
  font-size: 13px;
  color: var(--muted-weak);
  margin-top: 6px;
}
.toast {
  font-size: 14px;
  margin-top: 10px;
  min-height: 18px;
}
.toast.ok { color: var(--low); }
.toast.err { color: var(--danger); }

/* ── 표 ── */
#itemTableWrap, #historyWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
}
#itemTableWrap table { min-width: 640px; table-layout: fixed; }
/* 이미지 열은 썸네일(32px)에 맞춰 좁게. 넓게 잡으면 이미지와 아이템 이름이 멀어져
   한 아이템이라는 묶음으로 읽히지 않으므로, 여기서 줄인 폭은 뒤쪽 숫자 열들이 나눠 가져가게 함
   (이름 열 폭은 그대로 32%로 둬서 이름-최소입찰가 거리는 안 바뀜)
   이미지 왼쪽 여백(12px)은 그대로 둬서 이미지 위치 자체는 안 움직이고,
   이미지 뒤 빈 공간(오른쪽 여백)과 이름 칸 왼쪽 여백만 줄여서 텍스트가 이미지 쪽으로 붙게 함 */
#itemTableWrap th:nth-child(1), #itemTableWrap td:nth-child(1) { width: 44px; padding-right: 0; }
#itemTableWrap th:nth-child(2), #itemTableWrap td:nth-child(2) { width: 32%; padding-left: 6px; }
#itemTableWrap th:nth-child(3), #itemTableWrap td:nth-child(3) { width: 12%; }
#itemTableWrap th:nth-child(4), #itemTableWrap td:nth-child(4) { width: 8%; }
#itemTableWrap th:nth-child(5), #itemTableWrap td:nth-child(5) { width: 14%; }
#itemTableWrap th:nth-child(6), #itemTableWrap td:nth-child(6) { width: 13%; }
#itemTableWrap th:nth-child(7), #itemTableWrap td:nth-child(7) { width: 13%; }

/* ── 아이템 목록: 모바일 카드형 ── */
.item-cards { display: none; }
@media (max-width: 700px) {
  #itemTableWrap { display: none; }
  .item-cards {
    display: flex;
    flex-direction: column;
  }
}
.item-card {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.item-card:last-child { border-bottom: none; }
.item-card:active { background: var(--surface-alt); }
.item-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.item-card-thumb { width: 40px; height: 40px; flex: none; }
.item-card-name {
  flex: 1;
  font-size: 15.5px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: keep-all;
}
.item-card-date {
  flex: none;
  font-size: 12px;
  color: var(--muted-weak);
  white-space: nowrap;
  /* 카드가 세로로 쌓이며 날짜가 줄지어 비교되므로 숫자 폭 고정 (정렬 유지한 채 살짝 조임) */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
.item-card-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.item-card-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.item-card-stat .k { font-size: 14px; color: var(--muted); }
.item-card-stat .v {
  font-size: 16px;
  font-family: var(--sans);
  font-weight: 400;
  overflow-wrap: break-word;
}
@media (max-width: 380px) {
  .item-card-stat .k { font-size: 12px; }
  .item-card-stat .v { font-size: 14.5px; }
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.page-btn {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.page-btn:hover:not(:disabled) { border-color: var(--ink); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.history-more-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
}
.page-btn-hidden { visibility: hidden; }
.page-info { font-size: 13px; font-family: var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }

.page-numbers { display: flex; align-items: center; gap: 4px; }
.page-num {
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--muted);
  font-size: 13px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
@media (max-width: 380px) {
  .pagination { gap: 8px; }
  .page-btn { padding: 6px 10px; font-size: 13px; }
  .page-numbers { gap: 2px; }
  .page-num { min-width: 22px; height: 24px; padding: 0 3px; font-size: 13px; }
}
.page-num:hover { border-color: var(--line); color: var(--ink); }
.page-num.active {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.search-field {
  position: relative;
  margin-bottom: 20px;
}
.search-field .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted-weak);
  pointer-events: none;
}
.search-field input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-family: var(--sans);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-field input::placeholder { color: var(--muted-weak); }
.search-field input:focus {
  outline: none;
}
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
th {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}
td.num, th.num { text-align: right; }
td.num { font-family: var(--sans); font-variant-numeric: tabular-nums; font-size: 13.5px; }
/* 아직 더보기로 펼치지 않은 기록의 가장 긴 값을 헤더에 투명하게 심어 열 너비를 미리 확보
   (더보기 시 긴 값이 새로 나타나며 열 너비가 재계산돼 화면이 오른쪽으로 밀리는 현상 방지)
   → 실제 값과 같은 폰트(td.num과 동일)로 측정해야 너비가 정확함 */
.col-sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 400;
}
td.date-col, th.date-col { white-space: nowrap; }
/* 진행 시각은 기기와 무관하게 항상 한 줄 유지 */
#historyWrap th:first-child, #historyWrap td:first-child { white-space: nowrap; }
/* 시각/날짜도 세로로 줄지어 비교되는 값이라 숫자 폭을 고정 (1이 많으면 좁고 2가 많으면 넓어지는 현상 방지)
   letter-spacing은 모든 글자에 균일하게 적용되므로 세로 정렬은 유지한 채 퍼진 느낌만 완화 */
#historyWrap td:first-child, td.date-col {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
}
@media (max-width: 480px) {
  /* 중간 폭(갤럭시 S20 울트라 412px, 아이폰 프로 맥스 430px 등):
     여백만 줄이면 한 줄이 들어가므로 글자 크기는 원래대로 유지 */
  #historyWrap th, #historyWrap td { padding: 10px 6px; font-size: 13.5px; }
}
@media (max-width: 400px) {
  /* 아주 좁은 폭(아이폰 SE 375px, 소형 갤럭시 360px 등):
     여백만으로는 부족해서 글자도 1px 압축 (육안으로 거의 구분 안 됨) */
  #historyWrap th, #historyWrap td { padding: 10px 3px; font-size: 12.5px; }
  #historyWrap td.num { font-size: 12.5px; }
  .col-sizer { font-size: 12.5px; }
}
tbody tr { transition: background 0.1s ease; }
tbody tr:hover { background: var(--surface-alt); }
tbody tr:last-child td { border-bottom: none; }
/* 행 전체에 이미 hover 배경색(tbody tr:hover)이 있어 밑줄은 중복 피드백이라 생략 */
a.item-link { color: var(--ink); text-decoration: none; font-weight: 550; }

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-weak);
  color: var(--muted);
  margin-left: 6px;
}
.hi { color: var(--high); }
.lo { color: var(--low); }

.empty {
  color: var(--muted);
  font-size: 14.5px;
  padding: 20px 4px;
  text-align: center;
}

/* ── 최근 입력 리스트 ── */
.recent-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink); /* <a> 태그 기본 링크색 대신 본문 색을 씀 */
  text-decoration: none;
  /* 클릭은 되지만 강조하고 싶진 않아서, 배경색/밑줄 같은 hover 효과는 넣지 않고
     마우스 커서(포인터)만으로 클릭 가능함을 은은하게 알림 */
}
.recent-item:last-child { border-bottom: none; }
.recent-item .r-name { font-weight: 550; }
.recent-item .r-meta { color: var(--muted-weak); font-size: 13px; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -0.05em; }
.recent-item .r-vals { font-family: var(--sans); white-space: nowrap; }
@media (min-width: 601px) {
  /* PC에서는 카드 전체가 아니라 아이템 이름만 클릭되게, 카드 전체 클릭은 꺼두고
     이름 부분만 다시 켬 (모바일은 600px 이하라 이 규칙이 적용 안 되어 카드 전체 클릭 유지) */
  .recent-item { pointer-events: none; }
  .recent-item .r-name { pointer-events: auto; cursor: pointer; }
}

/* ── 상세 페이지 ── */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.stat {
  flex: 1 1 130px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.stat .k { font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.stat .v { font-size: 19px; font-family: var(--sans); font-weight: 500; }
.stat.high .v { color: var(--high); }
.stat.low .v { color: var(--low); }
@media (max-width: 600px) {
  /* 모바일에서는 기록 수를 통계 표에서 빼고(위쪽 배지로 대체), 나머지 4개가 2개씩 자연스럽게 짝지어지게 함 */
  .stat-row .stat:first-child { display: none; }
}

.chart-card { margin-bottom: 22px; }
.chart-container { position: relative; height: 280px; }
.chart-card canvas { cursor: grab; touch-action: none; }
.chart-card canvas:active { cursor: grabbing; }
@media (max-width: 600px) {
  /* 폭이 좁아져도 세로 공간은 넉넉한 모바일 화면 특성을 살려 높이를 고정 유지 */
  .chart-container { height: 260px; }
}

/* ── 사이트 네비게이션 ── */
.site-nav {
  border-bottom: 1px solid var(--line);
}
.site-nav .inner {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  min-height: 54px;
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .site-nav .inner { padding: 0 16px; gap: 14px; }
  .site-nav a.nav-link { font-size: 13.5px; }
}
@media (max-width: 380px) {
  .site-nav .brand { display: none; }
}
.site-nav .brand {
  font-weight: 650;
  font-size: 15.5px;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
  white-space: nowrap;
}
.site-nav a.nav-link {
  font-size: 14.5px;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a.nav-link:hover { color: var(--ink); }
.site-nav a.nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--ink);
  font-weight: 600;
}

/* ── 홈 히어로 ── */
.hero {
  padding: 56px 0 40px;
}
.hero h1 {
  font-size: 29px;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.hero p {
  color: var(--muted);
  font-size: 15.5px;
  margin: 0 0 24px;
  max-width: 560px;
}
.hero .cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .hero { padding: 36px 0 28px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 14.5px; }
  .hero .btn { flex: 1 1 auto; text-align: center; }
  /* 문의는 보조 동작이라, 좁은 화면에서 주 버튼과 폭을 반씩 나눠 갖지 않도록 글자 크기만큼만 차지하게 함 */
  .hero .btn-ghost { flex: 0 0 auto; }
}
.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-arrow { display: inline-block; transition: transform 0.15s ease; }
.btn-primary:hover .btn-arrow { transform: translateX(3px); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }


/* ── 홈 통계 카드 ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 28px;
  overflow: hidden;
}
.stat-grid .stat {
  flex: none;
  border: none;
  border-radius: 0;
  background: var(--surface);
}
.stat-grid .stat .v { font-size: 22px; }
@media (max-width: 600px) {
  .stat-grid { display: none; }
}

/* ── 아이템 이미지 ── */
.thumb {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  border: 1px solid var(--line);
}
.thumb-empty {
  background: var(--surface-alt);
}

.item-hero {
  display: flex;
  gap: 20px;
  align-items: center; /* 이미지(96px)가 텍스트보다 훨씬 커서, 위쪽 정렬 시 아래쪽에 빈 공간이 크게 남아 균형이 안 맞았음 */
  margin-bottom: 28px;
}
@media (max-width: 500px) {
  .item-hero { flex-direction: column; align-items: center; text-align: center; }
  .hero-actions { justify-content: center; }
}
.item-image {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.item-image img { width: 100%; height: 100%; object-fit: cover; }
.item-image-empty { font-size: 12px; color: var(--muted-weak); }
.item-hero-body { flex: 1; min-width: 0; }
.item-hero-body h1 { font-size: 21px; font-weight: 650; margin: 0 0 12px; }
.skeleton-bar {
  display: inline-block;
  border-radius: 4px;
  background: var(--surface-alt);
}
.title-skeleton {
  display: inline-block;
  width: 160px;
  height: 21px;
  border-radius: 4px;
  background: var(--surface-alt);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.link-btn {
  display: none;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}
.link-btn:hover { color: var(--ink); }

.min-bid-badge {
  display: inline-block;
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-weak);
  border-radius: 999px;
  padding: 3px 10px;
}
.min-bid-badge .min-bid-value { font-family: var(--sans); }
#minBidEditor { margin-bottom: 8px; }
.image-edit { display: flex; flex-wrap: wrap; gap: 8px; max-width: 420px; margin-bottom: 8px; }
.image-edit input { min-width: 0; }
@media (max-width: 500px) {
  .image-edit { max-width: none; }
  .image-edit input { flex: 1 1 100%; }
  .image-edit button { flex: 1 1 100%; }
}
.image-edit input[type="file"] {
  padding: 6px 0;
  border: none;
  background: transparent;
}
.image-edit input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--surface);
  color: var(--ink);
}
.image-edit input:focus { outline: none; border-color: var(--ink); }
.image-edit button {
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.image-edit button:hover { opacity: 0.85; }
.image-edit button:disabled { opacity: 0.4; cursor: default; }

/* ── 일괄 입력: 미등록 아이템 ── */
.missing-box {
  margin-bottom: 11px;
  padding: 12px 14px;
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  background: #fef2f2;
}
.missing-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--danger);
  margin: 0 0 8px;
}
.missing-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.missing-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.missing-list > li:last-child { border-bottom: none; }
.missing-list .link-btn { display: inline; font-size: 13.5px; }

.register-form {
  width: 100%;
  padding: 8px 0 4px;
}
.register-form .field { margin-bottom: 8px; }
.register-form .field input:disabled { background: var(--surface-alt); color: var(--muted); }
.register-form button.primary { width: auto; padding: 7px 16px; margin-top: 2px; }

/* ── 홈 섹션 제목 ── */
.section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 16px;
}

/* ── 푸터 ── */
/* 비공식 사이트 고지/저작권 안내. 항상 눈에 띌 필요 없는 법적 문구라 페이지 맨 아래에 조용히 둠 */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.site-footer .inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 24px 32px;
  text-align: center;
}
.site-footer p {
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-weak);
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.site-footer a:hover { color: var(--ink); }
@media (max-width: 600px) {
  .site-footer .inner { padding: 16px 16px 24px; }
}

/* ── 로그인 모달 ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--bg);
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 320px;
}
.modal-box h2 {
  font-size: 16px;
  font-weight: 650;
  margin: 0 0 16px;
}