/* ==========================================================================
   SELLIER — BUYMA Listing Studio
   화이트 미니멀: 넓은 여백, 얇은 선, 절제된 색. 강조는 색이 아니라
   타이포그래피(크기·자간·굵기)와 여백으로 줍니다.
   ========================================================================== */

:root {
  --ink: #14151a;          /* 본문 */
  --ink-soft: #5c6070;     /* 보조 텍스트 */
  --ink-faint: #9498a6;    /* 힌트 */
  --line: #e7e8ec;         /* 기본 경계선 */
  --line-strong: #d3d5dd;
  --paper: #ffffff;
  --paper-tint: #fafafb;   /* 카드 안쪽 옅은 면 */
  --accent: #14151a;       /* 미니멀: 강조도 먹색 */
  --accent-soft: #f2f2f4;
  --gold: #a08a5b;         /* 워드마크/포인트에만 아주 조금 */
  /* 손익·차트 색 (validate_palette.js 통과값) */
  --profit: #c2362f;       /* 이익(+) — 한국 관례상 빨강 */
  --loss: #1d4fd8;         /* 손실(−) — 파랑 */
  --chart-cost: #6e7382;   /* 원가 (맥락용 회색) */
  --chart-fee: #a8acb8;    /* 수수료 (맥락용 옅은 회색) */
  --warn-bg: #fffdf5;
  --warn-line: #ece2c4;
  --error-bg: #fdf5f5;
  --error-line: #eccfcf;
  /* 버튼: 저장 완료 배너(.saved-banner)와 같은 연두색 계열 */
  --btn-green: #4a8560;
  --btn-green-hover: #3d6f50;
  /* AI 착용컷 → 이미지 선택란으로 옮기기 버튼만 파란색으로 구분 */
  --btn-blue: #2563c7;
  --btn-blue-hover: #1e4f9e;
  --radius: 4px;
  --radius-lg: 8px;
  --serif: "Cormorant Garamond", "Noto Serif KR", Georgia, serif;
  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  /* 워드마크 로고·로그인/가입 대제목만 홈페이지와 맞춘 글꼴을 그대로 씁니다 —
     나머지 화면은 원래 쓰던 글꼴(Pretendard)로 되돌립니다. */
  --heading-sans: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------------------------------
   헤더 / 워드마크
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 40px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: inherit;
}
.wordmark__name {
  font-family: var(--heading-sans);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}
.wordmark__sub {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* flex-wrap 없이 폭이 좁아지면 각 링크가 통째로 줄바꿈되는 게 아니라
   글자 하나하나가 세로로 쪼개져 보이는 문제가 있었습니다(한글은 띄어
   쓰기가 없는 복합어가 많아 좁은 칸에서 글자 단위로 줄바꿈되기 때문).
   각 링크에 white-space: nowrap을 주고, 대신 nav 전체는 줄바꿈되게
   해서 화면이 좁을 땐 메뉴가 여러 줄로 나뉘도록 합니다. */
/* align-items: center — 링크(<a>)/드롭다운 버튼/등급 배지(.nav-plan)/
   카카오 버튼처럼 실제 높이가 서로 다른 요소들이 섞여 있어서,
   align-items 기본값(stretch)이면 기준선이 안 맞고 삐뚤빼뚤해 보였습니다. */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; column-gap: 28px; }
.site-nav a {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 3px;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }

.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0 0 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav-dropdown__trigger::after {
  content: "▾";
  font-size: 9px;
  margin-left: 4px;
  vertical-align: middle;
}
.nav-dropdown:hover .nav-dropdown__trigger,
.nav-dropdown.is-open .nav-dropdown__trigger { color: var(--ink); }
.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  padding: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(20, 21, 26, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 60;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__menu a {
  padding: 8px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-dropdown__menu a:hover { background: var(--paper-tint); }
.nav-dropdown__menu a::after { display: none; }

/* --------------------------------------------------------------------------
   본문 레이아웃
   -------------------------------------------------------------------------- */
main {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 32px 120px;
}
/* 매출전표처럼 칸이 많은 화면은 창 폭을 넓게 씁니다 */
main.main--wide { max-width: 1460px; }

/* 섹션 제목: "1. 상품 링크 불러오기" 처럼 번호가 붙은 h2.
   아래 경계선 왼쪽에 짧은 골드 선을 겹쳐 그려서 포인트를 줍니다. */
h2 {
  position: relative;
  margin: 64px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 40px;
  height: 1px;
  background: var(--gold);
}
main > h2:first-of-type { margin-top: 8px; }

hr {
  margin: 22px 0;
  border: none;
  border-top: 1px solid var(--line);
}

h3 {
  margin: 32px 0 10px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

p { margin: 10px 0; }

a { color: var(--ink); }

/* --------------------------------------------------------------------------
   카드(form / details)
   -------------------------------------------------------------------------- */
form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin: 18px 0 28px;
}

details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin: 18px 0;
  transition: border-color 0.2s ease;
}
details[open] { border-color: var(--line-strong); }
details form { border: none; padding: 0; margin: 12px 0 0; }

summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "＋";
  font-size: 12px;
  color: var(--ink-faint);
  transition: transform 0.2s ease;
}
details[open] > summary::before { content: "－"; }

/* --------------------------------------------------------------------------
   폼 요소
   -------------------------------------------------------------------------- */
label {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

input[type="text"], input[type="password"], input[type="number"],
input[type="url"], input[type="email"], input[type="tel"], input[type="date"],
input[type="search"], textarea, select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 21, 26, 0.07);
}
textarea { resize: vertical; line-height: 1.6; }

select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%235c6070' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--ink); }

/* --------------------------------------------------------------------------
   버튼
   -------------------------------------------------------------------------- */
button {
  padding: 11px 22px;
  border: 1px solid var(--btn-green);
  border-radius: var(--radius);
  background: var(--btn-green);
  color: #fff;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
button:hover { background: var(--btn-green-hover); border-color: var(--btn-green-hover); }
button:active { transform: translateY(1px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }

/* 위험한 동작(초기화 등)은 outline만 — .btn-danger와 같은 색이지만
   본문 버튼 크기 그대로 씁니다. */
.btn-danger-outline {
  background: var(--paper);
  color: #b03a3a;
  border-color: #e3c4c4;
  font-weight: 500;
}
.btn-danger-outline:hover:not(:disabled) {
  background: #b03a3a;
  color: #fff;
  border-color: #b03a3a;
}

/* 북마클릿 — 즐겨찾기로 끌어다 놓는 버튼이라 눈에 띄되 과하지 않게 */
.bookmarklet-btn {
  display: inline-block;
  padding: 13px 26px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: grab;
  transition: background 0.18s ease, color 0.18s ease;
}
.bookmarklet-btn:hover { background: var(--ink); color: #fff; }

/* "계속 출품하기" — 북마클릿(끌어다 놓는) 버튼과는 성격이 다른 일반
   제출 버튼이라, 손가락 커서(grab)를 쓰지 않고 앱의 기본 강조색(초록)
   pill 버튼으로 확실한 "다음 단계" CTA처럼 보이게 합니다. */
.btn-continue {
  display: inline-block;
  padding: 14px 32px;
  border: none;
  border-radius: 999px;
  background: var(--btn-green);
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.12s ease;
}
.btn-continue:hover {
  background: var(--btn-green-hover);
  transform: translateY(-1px);
}
.btn-continue:active { transform: translateY(0); }

/* --------------------------------------------------------------------------
   안내 문구
   -------------------------------------------------------------------------- */
.hint {
  color: var(--ink-faint);
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0;
}

.notice {
  margin: 14px 0;
  padding: 13px 16px;
  border: 1px solid var(--warn-line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--warn-bg);
  color: #6b5f42;
  font-size: 13px;
  line-height: 1.65;
}

.pro-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.fallback-box {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-tint);
}
.fallback-box textarea {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11.5px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-soft);
}

.error {
  margin: 14px 0;
  padding: 13px 16px;
  border: 1px solid var(--error-line);
  border-left: 2px solid #c0564f;
  border-radius: var(--radius);
  background: var(--error-bg);
  color: #8f3f39;
  font-size: 13px;
}

code {
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
}

pre {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-tint);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  overflow-x: auto;
}

/* AI 결과처럼 본문에 바로 나오는 결과 문단 */
main > p > strong { font-weight: 600; letter-spacing: -0.015em; }

/* --------------------------------------------------------------------------
   사이즈 실측표
   -------------------------------------------------------------------------- */
.size-chart-wrap {
  margin: 8px 0 4px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.size-chart {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  letter-spacing: 0;
  white-space: nowrap;
}
.size-chart th,
.size-chart td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.size-chart tr:last-child th,
.size-chart tr:last-child td { border-bottom: none; }
.size-chart th {
  background: var(--paper-tint);
  font-weight: 600;
  color: var(--ink);
}
.size-chart td { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   글자수 카운터 / 제목 미리보기
   -------------------------------------------------------------------------- */
.counter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: -12px 0 16px;
}
.counter {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.counter--near { color: var(--gold); }
.counter--over { color: #b03a3a; }

.title-preview {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: -6px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper-tint);
}
.title-preview__label {
  flex: none;
  padding-top: 1px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
#title-preview-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  word-break: break-all;
  color: var(--ink);
}
#title-preview-text.is-over {
  color: #b03a3a;
  text-decoration: underline wavy #b03a3a 1px;
}

.category-preview {
  margin: 8px 0 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.category-preview:empty { display: none; }

.size-text {
  margin: 8px 0 4px;
  white-space: pre-wrap;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   4. 이미지 갤러리
   -------------------------------------------------------------------------- */
.gallery-add-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.gallery-add-box #gallery-url-input {
  flex: 1;
  min-width: 220px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 13px;
}
.gallery-add-box .hint { flex-basis: 100%; margin: 2px 0 0; }

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.gallery-toolbar__count {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-faint);
}
.gallery-toolbar__actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* 툴바 버튼: 본문 버튼보다 작고 조용하게 */
.btn-ghost, .btn-danger {
  padding: 6px 13px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
}
.btn-ghost {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink-soft);
}
.btn-ghost:hover {
  background: var(--accent-soft);
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-danger {
  border: 1px solid #e3c4c4;
  background: var(--paper);
  color: #b03a3a;
}
.btn-danger:hover:not(:disabled) { background: #b03a3a; border-color: #b03a3a; color: #fff; }
.btn-danger:disabled { opacity: 0.4; }

/* AI 착용컷 결과를 "이미지 선택" 갤러리로 바로 옮기는 버튼 — 파란색으로 눈에 띄게 */
.btn-ghost.btn-move-to-gallery {
  border: 1px solid var(--btn-blue);
  background: var(--btn-blue);
  color: #fff;
  font-weight: 600;
}
.btn-ghost.btn-move-to-gallery:hover {
  background: var(--btn-blue-hover);
  border-color: var(--btn-blue-hover);
  color: #fff;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
  margin: 0 0 8px;
}

.image-tile {
  position: relative;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.image-tile:hover {
  border-color: var(--line-strong);
  box-shadow: 0 2px 10px rgba(20, 21, 26, 0.06);
}
.image-tile.dragging { opacity: 0.35; }
.image-tile.drag-over {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.image-tile img {
  display: block;
  width: 100%;
  height: 104px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--paper-tint);
  user-select: none;
  -webkit-user-drag: none;
}

/* 왼쪽 위 "선택"(일괄 삭제용) 체크박스 */
.image-tile__mark {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: flex;
  margin: 0;
  padding: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(20, 21, 26, 0.16);
  cursor: pointer;
}
.image-tile__mark input { width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* 사진 자체도 클릭하면 선택되므로 손가락 커서로 알려줍니다 */
.image-tile img { cursor: pointer; }

/* 일괄 삭제용으로 체크된 타일 */
.image-tile.is-marked {
  border-color: #b03a3a;
  box-shadow: 0 0 0 1px #b03a3a;
}
.image-tile.is-marked img { opacity: 0.55; }
/* 선택됐다는 걸 사진 위에 크게 표시 */
.image-tile.is-marked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #b03a3a;
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  pointer-events: none;
}
/* 선택 체크박스는 항상 보이게(마우스를 올리지 않아도) */
.image-tile__mark input { pointer-events: auto; }

.image-tile__delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  padding: 0;
  line-height: 1;
  border: none;
  border-radius: 50%;
  background: rgba(20, 21, 26, 0.55);
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.16s ease, background 0.16s ease;
}
.image-tile:hover .image-tile__delete { opacity: 1; }
.image-tile__delete:hover { background: #b03a3a; }

/* 순서 변경 전용 손잡이(사진 자체를 끄는 건 이제 "여러 장 선택" 동작이라
   순서 변경은 이 손잡이에서 시작해야만 됩니다) */
.image-tile__handle {
  position: absolute;
  top: 8px;
  right: 36px;
  z-index: 2;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(20, 21, 26, 0.55);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  cursor: grab;
  transition: opacity 0.16s ease, background 0.16s ease;
}
.image-tile:hover .image-tile__handle { opacity: 1; }
.image-tile__handle:active { cursor: grabbing; }

.image-tile__select {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 7px 2px 2px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
  cursor: pointer;
}

/* 선택된 타일 강조 */
.image-tile:has(input:checked) {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.image-tile:has(input:checked) .image-tile__select { color: var(--ink); }

/* --------------------------------------------------------------------------
   콜라주 편집기
   -------------------------------------------------------------------------- */
#collage-editor {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 18px auto 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background:
    repeating-conic-gradient(var(--paper-tint) 0% 25%, #fff 0% 50%) 50% / 16px 16px;
  overflow: visible;
}

.collage-tile {
  position: absolute;
  box-sizing: border-box;
  cursor: grab;
  touch-action: none;
  border: 1px dashed transparent;
  transform: translate(-50%, -50%);
}
.collage-tile:hover,
.collage-tile.is-dragging {
  border-color: var(--btn-blue, #2563c7);
  cursor: grabbing;
}
.collage-tile img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  transition: opacity 0.15s;
}
.collage-tile.is-cutout-loading img { opacity: 0.45; }

/* 왼쪽 위 "누끼"(배경 제거) 체크박스 — 갤러리의 선택 체크박스와 같은 느낌 */
.collage-tile__cutout {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px 6px 3px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 3px rgba(20, 21, 26, 0.16);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.collage-tile__cutout input {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
}

.collage-tile__resize {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--btn-blue, #2563c7);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--btn-blue, #2563c7);
  cursor: nwse-resize;
  z-index: 2;
}

#collage-editor-empty {
  margin: 0;
  padding-top: 142px;
  color: var(--ink-faint);
  font-size: 12.5px;
  text-align: center;
}

#collage-status {
  min-height: 18px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   저장 바 (화면에 딱 하나뿐인 저장 버튼)
   -------------------------------------------------------------------------- */
.save-bar {
  position: sticky;
  bottom: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px -28px -26px;   /* form 안쪽 여백을 상쇄해 가로로 꽉 차게 */
  padding: 16px 28px;
  background: #fff;
  border-top: 1px solid var(--line-strong);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 -6px 20px rgba(20, 21, 26, 0.07);
}
.save-bar__status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.save-bar__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9ccd4;
}
.save-bar__status.is-dirty { color: #8a6d1f; font-weight: 500; }
.save-bar__status.is-dirty::before { background: var(--gold); }
.save-bar__button {
  padding: 13px 30px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.save-bar__link {
  padding: 13px 22px;
  font-size: 14px;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  white-space: nowrap;
}
.save-bar__link:hover {
  background: #f6f6f4;
}

/* 저장 완료 배너 */
.saved-banner {
  margin: 14px 0;
  padding: 13px 16px;
  border: 1px solid #cfe3d4;
  border-left: 2px solid #4a8560;
  border-radius: var(--radius);
  background: #f6fbf7;
  color: #2f5d42;
  font-size: 13px;
}
.saved-banner strong { font-weight: 600; }
.saved-banner ul { margin: 8px 0 0; padding-left: 18px; }
.saved-banner li { margin: 3px 0; }

/* --------------------------------------------------------------------------
   마진 계산기
   -------------------------------------------------------------------------- */
.margin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 16px 0;
}
.margin-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-tint);
}
.margin-card--accent {
  border-color: var(--ink);
  background: var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.margin-card__label {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}
.margin-card__value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.margin-card__sub { font-size: 11.5px; color: var(--ink-soft); letter-spacing: 0; }

/* 손익 색 규칙 — 한국 관례대로 이익(+)은 빨강, 손실(−)은 파랑.
   대비/색각 검증(validate_palette.js)을 통과한 값입니다:
   #C2362F ↔ 회색 ΔE 12.0(deutan) / #1D4FD8 ↔ 회색 ΔE 17.8(protan),
   일반시야 최저 18.9 — 모두 기준 통과. 색만으로 전달하지 않도록
   +/− 부호와 숫자, 표를 항상 함께 보여줍니다. */
.val-pos { color: var(--profit); font-weight: 600; }
.val-neg { color: var(--loss); font-weight: 600; }
.margin-pos { color: var(--profit); font-weight: 600; }
.margin-neg { color: var(--loss); font-weight: 600; }

/* 숫자 칸은 오른쪽 정렬 + 자릿수 정렬 */
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 헤드라인: 얼마 남는가 --- */
.result-hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0 24px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-faint);
  border-radius: var(--radius-lg);
  background: var(--paper-tint);
}
.result-hero.is-pos { border-left-color: var(--profit); }
.result-hero.is-neg { border-left-color: var(--loss); }
.result-hero__label { font-size: 12px; color: var(--ink-faint); letter-spacing: 0.02em; }
.result-hero__value {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.result-hero.is-pos .result-hero__value { color: var(--profit); }
.result-hero.is-neg .result-hero__value { color: var(--loss); }
.result-hero__sub { font-size: 13px; color: var(--ink-soft); letter-spacing: 0; }

/* --- 판매가 구성 막대 (원가 / 수수료 / 남는 돈) --- */
.breakdown { margin: 12px 0 4px; }
.breakdown__bar {
  display: flex;
  height: 34px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-tint);
}
.breakdown__bar--deficit { margin-top: 4px; height: 26px; }
.breakdown__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  /* 인접한 채움 사이 2px 간격 — 경계가 뭉개지지 않게 */
  box-shadow: inset -2px 0 0 var(--paper);
  overflow: hidden;
}
.breakdown__seg:last-child { box-shadow: none; }
.breakdown__seg span {
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0;
}
.breakdown__seg--cost { background: var(--chart-cost); }
.breakdown__seg--fee  { background: var(--chart-fee); }
.breakdown__seg--pos  { background: var(--profit); }
.breakdown__seg--neg  { background: var(--loss); }
.breakdown__seg--fee span { color: var(--ink); }

.breakdown__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: -1px;
}
.swatch--cost { background: var(--chart-cost); }
.swatch--fee  { background: var(--chart-fee); }
.swatch--pos  { background: var(--profit); }
.swatch--neg  { background: var(--loss); }

/* 마진율별 표의 미니 막대 */
.minibar-cell { width: 90px; }
.minibar {
  display: block;
  height: 6px;
  min-width: 2px;
  border-radius: 3px;
  background: var(--profit);
  opacity: 0.85;
}
.size-chart tr.row-total th,
.size-chart tr.row-total td {
  border-top: 1px solid var(--line-strong);
  font-size: 14px;
}

/* 입력칸 2열 배치 — 빠르게 적고 넘어가도록 */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 16px;
}
.calc-grid__wide { grid-column: 1 / -1; }
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0 16px;
}

/* --------------------------------------------------------------------------
   매출전표
   -------------------------------------------------------------------------- */
.ledger-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  position: sticky;
  top: 88px;
  z-index: 30;
  margin: 16px 0 10px;
  padding: 10px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ledger-toolbar__status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-faint); letter-spacing: 0;
}
.ledger-toolbar__status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #c9ccd4;
}
.ledger-toolbar__status.is-dirty { color: #8a6d1f; font-weight: 500; }
.ledger-toolbar__status.is-dirty::before { background: var(--gold); }
.ledger-toolbar__actions { display: flex; gap: 8px; align-items: center; }

.ledger-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
}
.ledger th, .ledger td {
  padding: 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.ledger thead th {
  padding: 8px 7px;
  line-height: 1.25;
  background: var(--paper-tint);
  font-weight: 600;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ledger td.calc, .ledger tfoot td, .ledger tfoot th { padding: 8px 7px; }
.ledger td.calc { color: var(--ink-soft); font-variant-numeric: tabular-nums; background: var(--paper); }
.ledger input {
  width: 100%;
  margin: 0;
  padding: 8px 7px;
  border: none;
  border-radius: 0;
  background: var(--paper-tint);
  font-size: 12px;
  font-family: inherit;
}
.ledger input:focus {
  outline: none;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.ledger input.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger__idx {
  width: 34px; text-align: center; color: var(--ink-faint);
  background: var(--paper-tint); font-size: 11px; padding: 8px 0;
}
.ledger__name input { min-width: 150px; }
.ledger__memo input { min-width: 100px; }
.ledger tr.is-empty .ledger__idx { color: #c9ccd4; }
.ledger tr.is-empty input { background: #fff; }
.ledger tbody tr:hover input { background: #fbfbfc; }
.ledger tfoot tr {
  position: sticky;
  bottom: 0;
  background: var(--accent-soft);
  font-weight: 600;
}
.ledger tfoot td, .ledger tfoot th {
  background: var(--accent-soft);
  border-top: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
}

/* 시세 표의 상품명 링크 */
#market-table td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
#market-table td a:hover { border-bottom-color: var(--ink); }
#market-table td:first-child { white-space: normal; min-width: 260px; }

/* --------------------------------------------------------------------------
   AI 착용컷 생성
   -------------------------------------------------------------------------- */
.ai-shot {
  margin-top: 14px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-tint);
}
.ai-shot label { margin-bottom: 14px; }
.ai-shot input, .ai-shot select { background: var(--paper); }

.ai-shot__result {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.ai-shot__result img {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
}
.ai-shot__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
/* 내려받기는 <a>라 버튼 모양을 따로 맞춰줍니다 */
a.btn-ghost {
  display: inline-block;
  text-decoration: none;
  line-height: 1.5;
}

#ai-status { min-height: 18px; margin-top: 8px; }

/* --------------------------------------------------------------------------
   푸터
   -------------------------------------------------------------------------- */
.site-footer {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 32px 56px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: 0;
}

.site-footer__legal {
  margin-top: 6px;
  opacity: 0.8;
}

.site-footer__legal a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   홈 (대시보드)
   -------------------------------------------------------------------------- */
.home-hero {
  margin: 8px 0 24px;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--paper) 0%, var(--paper-tint) 100%);
}
.home-hero__eyebrow {
  margin: 0 0 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--btn-green, var(--ink-faint));
}
.home-hero__title {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink);
}

.home-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}
.home-quick-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.home-quick-card:hover {
  border-color: var(--btn-green, var(--ink));
  box-shadow: 0 6px 18px rgba(20, 21, 26, 0.06);
  transform: translateY(-1px);
}
.home-quick-card--accent {
  border-color: var(--btn-green, var(--ink));
  background: var(--warn-bg);
}
.home-quick-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 14px;
  color: var(--ink);
}
.home-quick-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.home-quick-card__desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* --------------------------------------------------------------------------
   콜라주 테두리/로고 패널
   -------------------------------------------------------------------------- */
.collage-style-panel {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-tint);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
}
.collage-style-panel__field {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.collage-style-panel__field input[type="color"] {
  width: 32px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}
.collage-style-panel__field input[type="range"] {
  width: 110px;
}
.collage-style-panel__field span {
  font-weight: 400;
  color: var(--ink-faint);
  min-width: 32px;
}
.collage-style-panel__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.collage-style-panel__logo input[type="checkbox"] {
  width: auto;
}
.collage-style-panel p.hint { flex-basis: 100%; }
#logo-position-wrap { flex-basis: 100%; }
.logo-position-box {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 4px 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background-color: var(--paper);
  background-size: cover;
  background-position: center;
  cursor: crosshair;
  overflow: hidden;
  touch-action: none;
}
#logo-position-item {
  position: absolute;
  transform: translate(-50%, -50%);
  cursor: grab;
  /* 클릭/드래그로 자리를 옮길 때는 스르륵 부드럽게, 드래그 중일 때는(아래
     .is-dragging) 커서를 그대로 따라가도록 transition을 꺼서 밀리지
     않게 합니다. */
  transition: left 0.16s ease, top 0.16s ease;
}
#logo-position-item.is-dragging,
#logo-position-item.is-resizing {
  transition: none;
}
#logo-position-preview {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.25));
}
#logo-position-resize {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: var(--btn-blue, #2563c7);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--btn-blue, #2563c7);
  cursor: nwse-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #fff;
  line-height: 1;
}


/* --------------------------------------------------------------------------
   홈 화면의 "기본설정하기" 안내 카드
   -------------------------------------------------------------------------- */
.help-setup-pin {
  margin: 4px 0 22px;
  padding: 18px 22px;
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 6px 18px rgba(20, 21, 26, 0.08);
}
.help-setup-pin__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.help-setup-pin__desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.help-setup-pin__list {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.help-setup-pin__list li { margin: 3px 0; }
.help-setup-pin__button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.help-setup-pin__button:hover { opacity: 0.9; }

/* --------------------------------------------------------------------------
   도움말
   -------------------------------------------------------------------------- */
.help-item {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-tint);
  overflow: hidden;
}
.help-item + .help-item { margin-top: 10px; }
.help-item summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  user-select: none;
}
.help-item summary::-webkit-details-marker { display: none; }
.help-item summary::before {
  content: "▸";
  display: inline-block;
  width: 1em;
  color: var(--ink-faint);
  transition: transform 0.15s ease;
}
.help-item[open] summary::before { transform: rotate(90deg); }
.help-item[open] summary {
  border-bottom: 1px solid var(--line);
}
.help-item__body {
  padding: 4px 18px 16px;
}
.help-item__body p {
  margin: 10px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-faint);
}
.help-item__body ol {
  margin: 10px 0;
  padding-left: 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink-faint);
}
.help-item__body strong { color: var(--ink); }
.help-item__body code {
  font-size: 12px;
}
.help-item__body a { color: var(--ink); text-decoration: underline; }
.help-item__body .notice { font-size: 12.5px; }

/* --------------------------------------------------------------------------
   좁은 화면
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .site-header { padding: 18px 20px; }
  .wordmark__name { font-size: 22px; letter-spacing: 0.26em; text-indent: 0.26em; }
  main { padding: 36px 20px 80px; }
  form { padding: 20px; }
  h2 { margin-top: 44px; font-size: 17px; }
  /* 편집기 타일 위치는 자바스크립트가 320px 기준 픽셀로 잡으므로
     크기는 그대로 두고, 화면이 좁으면 가로 스크롤로 처리합니다. */
  #collage-editor { margin-left: 0; margin-right: 0; }
  .home-hero { padding: 22px 20px; }
  .home-hero__title { font-size: 19px; }
  .help-item summary { padding: 13px 16px; }
  .help-item__body { padding: 4px 16px 14px; }
}

/* --------------------------------------------------------------------------
   웹앱판: 로그인/등급 표시/알림 메시지
   -------------------------------------------------------------------------- */
.nav-plan {
  padding: 2px 10px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0.8;
}
.flash-messages { list-style: none; padding: 0; margin: 0 0 20px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; font-size: 14px; }
.flash--success { background: #e6f4ea; color: #1e6b34; }
.flash--error { background: #fdecea; color: #a4262c; }

/* --------------------------------------------------------------------------
   로그인 / 회원가입 / 비밀번호 찾기
   -------------------------------------------------------------------------- */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 40px 0 24px;
}
.auth-card {
  width: 100%;
  max-width: 380px;
}
.auth-card__head {
  margin-bottom: 28px;
  text-align: center;
}
.auth-card__title {
  margin: 0 0 8px;
  font-family: var(--heading-sans);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.auth-card__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
}
.auth-card form {
  margin: 0 0 18px;
}
.auth-card label { margin-bottom: 16px; }
.auth-card label:last-of-type { margin-bottom: 0; }
.auth-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}
.auth-card__row label {
  margin-bottom: 0;
}
.auth-card__link {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.auth-card__link:hover {
  color: var(--ink);
  border-bottom-color: var(--line-strong);
}
.auth-card button[type="submit"] {
  width: 100%;
  margin-top: 6px;
  padding: 12px 22px;
}
.auth-card__foot {
  margin: 0;
  font-size: 13px;
  text-align: center;
  color: var(--ink-faint);
}
.auth-card__foot a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}
.auth-card__foot a:hover { border-bottom-color: var(--ink); }
.auth-card__divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  color: var(--ink-faint);
  font-size: 12px;
}
.auth-card__divider::before, .auth-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-card__google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 22px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #ffffff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  box-sizing: border-box;
}
.auth-card__google-btn:hover { background: var(--paper-tint); }
.auth-card__notice {
  margin: 0 0 22px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--paper-tint);
  color: var(--ink-soft);
  font-size: 12.5px;
  line-height: 1.65;
}
.auth-card__notice strong { color: var(--ink); }

/* --------------------------------------------------------------------------
   매출전표 — 줄 삭제 / 캘린더 보기
   -------------------------------------------------------------------------- */
.ledger__idx { position: relative; }
.ledger__idx-num { display: inline-block; min-width: 14px; }
.ledger__del {
  display: none;
  margin-left: 4px;
  border: none;
  background: none;
  color: var(--loss);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  vertical-align: middle;
}
.ledger tbody tr:hover .ledger__del { display: inline-block; }
.ledger__del:hover { background: var(--error-bg); }
.ledger tbody tr.is-flash { animation: ledgerFlash 1.6s ease; }
@keyframes ledgerFlash {
  0%, 100% { background: transparent; }
  15%, 60% { background: var(--warn-bg); }
}

.ledger-calendar {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 20px 20px;
  margin-bottom: 18px;
  background: var(--paper-tint);
}
.ledger-calendar__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 12px;
}
.ledger-calendar__title { font-weight: 600; font-size: 15px; min-width: 110px; text-align: center; }
.ledger-calendar__nav {
  border: 1px solid var(--line-strong);
  background: var(--paper);
  border-radius: 50%;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.ledger-calendar__nav:hover { background: var(--accent-soft); }
.ledger-calendar__weekdays, .ledger-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.ledger-calendar__weekdays {
  margin-bottom: 6px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.ledger-calendar__cell {
  position: relative;
  aspect-ratio: 1 / 0.72;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--paper);
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  cursor: default;
  font-family: var(--sans);
}
.ledger-calendar__cell.is-blank { background: transparent; border: none; cursor: default; }
.ledger-calendar__cell.is-today { border-color: var(--gold); }
.ledger-calendar__cell.has-entries { cursor: pointer; border-color: var(--line-strong); }
.ledger-calendar__cell.has-entries:hover { background: var(--accent-soft); }
.ledger-calendar__day { font-size: 12px; color: var(--ink-soft); }
.ledger-calendar__badge {
  font-size: 10px;
  color: var(--ink-faint);
}
.ledger-calendar__margin {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   요금제 / 내 정보 (billing)
   -------------------------------------------------------------------------- */
:root {
  --forest: #2b4029;
  --forest-line: #3d5a3a;
  --kakao: #fee500;
  --kakao-ink: #391b1b;
}

.pricing-tabs { display: flex; gap: 6px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.pricing-tabs__btn {
  border: none; background: none; cursor: pointer;
  padding: 10px 4px; margin-right: 18px;
  font-size: 14.5px; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
}
.pricing-tabs__btn.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }

.plan-current-banner {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  font-size: 13.5px;
  margin-bottom: 22px;
}

.cycle-tabs { display: flex; gap: 8px; margin-bottom: 22px; }
.cycle-tabs__btn {
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  font-size: 13.5px; color: var(--ink-soft);
  display: inline-flex; align-items: center; gap: 6px;
}
.cycle-tabs__btn.is-active { color: #fff; background: var(--ink); border-color: var(--ink); font-weight: 600; }
.cycle-tabs__badge {
  font-size: 11px; font-weight: 700; color: #e0524a;
  background: rgba(224, 82, 74, 0.12); border-radius: 999px; padding: 1px 6px;
}
.cycle-tabs__btn.is-active .cycle-tabs__badge { color: #fff; background: rgba(255, 255, 255, 0.22); }

.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 8px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

.plan {
  position: relative;
  padding: 38px 36px;
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-name { font-size: 13px; letter-spacing: 0.04em; color: var(--ink-soft); text-transform: uppercase; }
.plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan-price .price-was { font-size: 13px; color: var(--ink-faint); text-decoration: line-through; flex-basis: 100%; }
.plan-price b { font-weight: 800; font-size: 42px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.plan-price span:not(.price-was) { font-size: 13.5px; color: var(--ink-soft); }
.plan-note {
  font-size: 12.5px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  display: inline-block;
  width: fit-content;
}
.plan ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plan li { font-size: 13.5px; color: var(--ink); padding-left: 20px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.plan-note-pro-only { color: var(--ink-faint); font-size: 12.5px; }
.plan-note-pro-only::before { content: "—" !important; }
.plan-cta { text-align: center; margin-top: 10px; }
.plan-alt-link { border: none; background: none; color: var(--ink-soft); font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 0; text-align: left; }
.plan-alt-link:hover { color: var(--ink); }
.plan-fineprint { font-size: 11px; color: var(--ink-faint); margin: 0; }
.plan-badge {
  position: absolute; top: -15px; left: 36px;
  background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  padding: 6px 16px; border-radius: 999px;
}

.plan.is-featured { background: var(--forest); border-color: var(--forest-line); box-shadow: 0 22px 48px rgba(20, 21, 26, 0.22); }
.plan.is-featured .plan-name { color: rgba(255, 255, 255, 0.72); }
.plan.is-featured .plan-price b,
.plan.is-featured .plan-price span:not(.price-was) { color: #fff; }
.plan.is-featured .plan-price .price-was { color: rgba(255, 255, 255, 0.55); }
.plan.is-featured .plan-note { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.plan.is-featured li { color: rgba(255, 255, 255, 0.86); }
.plan.is-featured li::before { color: #fff; }
.plan.is-featured .btn.plan-cta { background: #fff; color: var(--forest); border-color: #fff; }
.plan.is-featured .btn.plan-cta:hover { opacity: 0.9; }
.plan.is-featured .plan-alt-link { color: rgba(255, 255, 255, 0.68); }
.plan.is-featured .plan-alt-link:hover { color: #fff; }
.plan.is-featured .plan-badge { background: #fff; color: var(--forest); }

.btn.plan-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; text-decoration: none;
  padding: 12px 18px; border-radius: var(--radius); font-weight: 600; font-size: 13.5px;
  border: 1px solid var(--ink);
}
.btn.plan-cta:hover { opacity: 0.9; }
.btn.plan-cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .account-grid { grid-template-columns: 1fr; } }
.account-grid .card {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px 28px; background: var(--paper);
}
.account-grid .card h3 { margin-top: 0; font-size: 15px; }
.account-plan-label { font-size: 20px; font-weight: 700; margin: 6px 0; }
.account-form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.account-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--ink-soft); }
.account-form input {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 9px 11px; font-size: 14px; font-family: var(--sans); color: var(--ink);
}
.account-form button[type="submit"] {
  align-self: flex-start; margin-top: 4px;
  background: var(--ink); color: #fff; border: none;
  padding: 9px 18px; border-radius: var(--radius); cursor: pointer; font-size: 13.5px;
}

.pay-backdrop {
  position: fixed; inset: 0; background: rgba(20, 21, 26, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
/* [hidden]이 같은 특이도의 .pay-backdrop{display:flex}에 밀려 무시되던 문제 —
   결제 모달이 닫히지 않던 원인. hidden 상태를 항상 최우선으로 강제합니다. */
.pay-backdrop[hidden] {
  display: none !important;
}
.pay-modal {
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 30px 30px 26px; max-width: 380px; width: 100%;
  position: relative; box-shadow: 0 30px 60px rgba(0,0,0,0.25);
}
.pay-modal__close { position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 20px; cursor: pointer; color: var(--ink-soft); }
.pay-modal__sub { font-size: 13px; color: var(--ink-soft); margin: 0 0 4px; }
.pay-modal__amount { font-size: 26px; font-weight: 800; margin: 0 0 18px; }
.method-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.method-tabs__btn {
  flex: 1; border: 1px solid var(--line-strong); background: var(--paper);
  padding: 8px; border-radius: var(--radius); font-size: 13px; cursor: pointer;
}
.method-tabs__btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pay-placeholder { font-size: 13px; color: var(--ink-soft); background: var(--paper-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.bank-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; background: var(--paper-tint); }
.bank-box__row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 0; }
.bank-box__row span { color: var(--ink-soft); min-width: 56px; }
.btn-copy { margin-left: auto; padding: 3px 10px; font-size: 11.5px; }
#method-transfer .btn, #method-card .btn {
  width: 100%; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  padding: 11px; border-radius: var(--radius); font-size: 14px; cursor: pointer;
}
#method-card .btn:disabled { background: var(--line-strong); border-color: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; }

.toast {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; z-index: 300; box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.collage-modal-backdrop {
  position: fixed; inset: 0; background: rgba(20, 21, 26, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 200; padding: 20px;
}
.collage-modal-backdrop[hidden] { display: none !important; }
.collage-modal {
  background: var(--paper); border-radius: var(--radius-lg);
  padding: 18px 22px 22px; max-width: 760px; width: 100%;
  box-shadow: 0 30px 60px rgba(0,0,0,0.3);
}
.collage-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 15px; margin-bottom: 12px;
}
.collage-modal__close {
  border: none; background: none; font-size: 22px; cursor: pointer; color: var(--ink-soft);
  line-height: 1;
}
.collage-modal__body { display: flex; justify-content: center; }
#collage-editor.is-expanded {
  width: min(80vw, 640px);
  height: min(80vw, 640px);
}

.kakao-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--kakao); color: var(--kakao-ink);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,0.2); text-decoration: none;
}
.kakao-fab:hover { filter: brightness(0.97); }
.kakao-fab svg { width: 26px; height: 26px; }

/* KSE 발송 관리 */
.kse-sender-phone { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.kse-sender-phone input { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 5px 8px; font-size: 12.5px; width: 130px; }
.kse-table th:first-child, .kse-table td:first-child { width: 28px; text-align: center; }

.nav-kakao {
  background: var(--kakao);
  color: var(--kakao-ink) !important;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.nav-kakao:hover { filter: brightness(0.97); }

/* 회원관리 */
.admin-bulk-form { margin-top: 14px; }
.admin-toolbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap;
}
.admin-search {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 8px 12px; font-size: 13.5px; min-width: 220px;
}
.admin-toolbar__count { font-size: 12.5px; color: var(--ink-soft); }
.admin-toolbar__spacer { flex: 1; }
#bulk-plan { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 10px; font-size: 13px; }
#bulk-apply {
  background: var(--ink); color: #fff; border: none; border-radius: var(--radius);
  padding: 8px 16px; font-size: 13px; cursor: pointer;
}
#bulk-apply:disabled { background: var(--line-strong); color: var(--ink-faint); cursor: not-allowed; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.admin-table th, .admin-table td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.admin-table th:first-child, .admin-table td:first-child { width: 24px; }
.admin-row-save {
  border: 1px solid var(--line-strong); background: var(--paper); border-radius: var(--radius);
  padding: 5px 10px; font-size: 12px; cursor: pointer;
}
.admin-row-save:hover { background: var(--accent-soft); }
.admin-row-delete {
  border: 1px solid #e3c4c4; background: var(--paper); color: #b03a3a; border-radius: var(--radius);
  padding: 5px 10px; font-size: 12px; cursor: pointer; margin-left: 6px;
}
.admin-row-delete:hover { background: #b03a3a; color: #fff; border-color: #b03a3a; }

/* 마진 계산기 — 실시간 미리보기 / 마진 프리셋 버튼 */
.price-live-result {
  display: block; margin-top: 6px; font-size: 13.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.price-live-result.val-pos { color: var(--profit); }
.price-live-result.val-neg { color: var(--loss); }
.margin-presets {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 16px;
}
.margin-presets__label { font-size: 12.5px; font-weight: 600; color: var(--ink); margin-right: 2px; }
.margin-preset-btn {
  border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.margin-preset-btn:hover { background: var(--accent-soft); }
.margin-preset-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.ref-price-chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px dashed var(--line-strong); background: var(--paper-tint); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.ref-price-chip:hover { background: var(--accent-soft); color: var(--ink); }
.ref-price-chip b { font-weight: 700; color: var(--ink); }

/* --------------------------------------------------------------------------
   여러 상품 한번에 출품하기 (대기열)
   -------------------------------------------------------------------------- */
.batch-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.batch-toolbar__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.batch-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.batch-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.batch-item__check {
  flex: none;
  display: flex;
  align-items: center;
}
.batch-item__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
.batch-item__thumb {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-soft, #f4f4f2);
  border: 1px solid var(--line);
}
.batch-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.batch-item__body {
  flex: 1 1 auto;
  min-width: 0;
}
.batch-item__title {
  margin: 0 0 4px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.batch-item__status {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.batch-item__actions {
  display: flex;
  gap: 6px;
  flex: none;
}
.batch-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}
.batch-badge--pending { background: #eceef1; color: var(--ink-soft); }
.batch-badge--processing { background: #fff2cc; color: #8a6d1f; }
.batch-badge--done { background: #dff3e3; color: #1f7a3a; }
.batch-badge--error { background: #fbe1e1; color: #a52b2b; }