* { box-sizing: border-box; margin: 0; padding: 0; }

/* 컬러 시스템: 17번 미드나잇 + 시안 (COLOR_DARK_GUIDE.md)
   미드나잇 = 뼈대와 행동 / 시안 = AI와 발견 / 스노우·슬레이트 = 바탕
   밝은 시안(--accent)은 흰 바탕에서 글씨색으로 쓰지 않는다 → 글씨는 --accent-text
   라이트가 기본이고, 다크는 아래 [data-theme="dark"]에서 같은 변수 이름을 덮어쓴다.
   아래 규칙들에서는 모드별로 색을 따로 쓰지 말고 항상 변수만 쓴다. */
:root {
  color-scheme: light;

  /* 바탕 */
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface-sub: #F1F5F9;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;

  /* 텍스트 */
  --text: #0F172A;
  --text-sub: #64748B;
  --text-placeholder: #94A3B8;

  /* 미드나잇 (메인) */
  --primary: #0F172A;
  --primary-hover: #1E293B;
  --on-primary: #FFFFFF;
  --primary-icon: #22D3EE;   /* 메인 버튼 안의 "+" */

  /* 시안 (포인트) */
  --accent: #22D3EE;
  --accent-strong: #0891B2;
  --accent-text: #0E7490;
  --on-accent: #0F172A;
  --accent-soft: #ECFEFF;
  --accent-soft-border: #A5F3FC;
  --highlight: #A5F3FC;
  --highlight-text: #164E63;

  /* 보조 버튼·칩 */
  --chip-off: #E2E8F0;
  --chip-off-text: #334155;

  /* 상태 */
  --danger: #EF4444;
  --danger-soft: #FEF2F2;
  --success: #22C55E;

  /* 문서에 없는 화면용: 사진 뷰어(모드와 상관없이 어두운 전체 화면), 그림자, 시트 뒤 어둡게 */
  --viewer-bg: #0F172A;
  --viewer-text: #E2E8F0;
  --on-viewer: #F1F5F9;            /* 뷰어 위 아이콘·토스트 글씨 */
  --on-dark-button: rgba(255, 255, 255, 0.15);
  --toast-bg: rgba(15, 23, 42, 0.85);
  --scrim: rgba(15, 23, 42, 0.35);
  --scrim-none: rgba(15, 23, 42, 0);
  --shadow-soft: rgba(15, 23, 42, 0.1);
  --shadow-mid: rgba(15, 23, 42, 0.18);
  --shadow-strong: rgba(15, 23, 42, 0.25);
  --float-border: transparent;     /* 떠 있는 메뉴·정보 박스 테두리 (다크에서만 보임) */
}

/* 다크 모드: 배경·카드는 미드나잇 계열, 메인 버튼은 시안 */
[data-theme="dark"] {
  color-scheme: dark;

  /* 바탕 */
  --bg: #0F172A;
  --surface: #1E293B;
  --surface-sub: #334155;
  --border: #334155;
  --border-strong: #475569;

  /* 텍스트 */
  --text: #F1F5F9;
  --text-sub: #94A3B8;
  --text-placeholder: #64748B;

  /* 메인 — 다크에서는 시안 */
  --primary: #22D3EE;
  --primary-hover: #67E8F9;
  --on-primary: #0F172A;
  --primary-icon: #0F172A;

  /* 시안 (포인트) */
  --accent: #22D3EE;
  --accent-strong: #22D3EE;
  --accent-text: #22D3EE;
  --on-accent: #0F172A;
  --accent-soft: #164E63;
  --accent-soft-border: #155E75;
  --highlight: rgba(34, 211, 238, 0.25);
  --highlight-text: #A5F3FC;

  /* 보조 버튼·칩 */
  --chip-off: #1E293B;
  --chip-off-text: #CBD5E1;

  /* 상태 — 어두운 바탕용으로 한 단계 밝게 */
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --success: #4ADE80;

  /* 문서에 없는 화면용: 그림자 대신 테두리로 구분 */
  --scrim: rgba(15, 23, 42, 0.6);
  --shadow-soft: transparent;
  --shadow-mid: transparent;
  --shadow-strong: transparent;
  --float-border: #334155;
}

/* display 를 지정한 요소도 hidden 이면 숨긴다 */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, "Malgun Gothic", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px;
}

.brand {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--text);
}
/* 로고 끝 시안 점 */
.brand::after { content: ""; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 0.08em; border-radius: 50%; background: var(--accent); }

.slogan {
  color: var(--text-sub);
  margin-bottom: 32px;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form label {
  font-size: 0.9rem;
  font-weight: 700;
}

.form input {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--surface);
}

.btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover,
.btn-primary:active { background: var(--primary-hover); }
.btn-primary .plus { color: var(--primary-icon); }  /* + 스크린샷 올리기의 "+" */
.btn-secondary { background: var(--chip-off); color: var(--text); }
.btn-danger { background: var(--danger-soft); color: var(--danger); }
.btn:disabled { background: var(--surface-sub); color: var(--text-placeholder); cursor: default; }

/* 입력창 글씨 (다크 모드에서도 읽히게) */
input,
textarea,
select { color: var(--text); }

/* 입력창·버튼 포커스 링 */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }

a.btn { text-decoration: none; text-align: center; }
.top-bar .spacer { width: 72px; }
.page-title { font-size: 1.1rem; font-weight: 800; }

/* 마이페이지 */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.panel-label { font-size: 0.8rem; color: var(--text-sub); }
.panel-value { font-size: 1.1rem; font-weight: 700; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* 화면 모드 설정 */
.theme-options { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.theme-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-weight: 600; cursor: pointer; }
.theme-option input { width: 18px; height: 18px; accent-color: var(--accent-strong); }

/* 회원 탈퇴 (접혀 있음) */
.withdraw { margin-top: 40px; color: var(--text-sub); font-size: 0.85rem; }
.withdraw summary { cursor: pointer; }
.withdraw .form { margin-top: 12px; }

.hint { font-size: 0.8rem; color: var(--text-sub); }
.error { color: var(--danger); font-size: 0.9rem; min-height: 1.4em; }

.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.top-bar .btn { width: auto; padding: 8px 14px; font-size: 0.85rem; }

.greeting { margin-bottom: 16px; }

/* 업로드 영역 */
.upload-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.usage { font-size: 0.9rem; color: var(--text-sub); margin-bottom: 10px; }
/* 오늘 N/한도 숫자에 시안 형광펜 */
.usage strong { color: var(--highlight-text); background: var(--highlight); padding: 0 2px; }

.upload-btn { display: block; text-align: center; font-size: 17px; }  /* 다른 버튼(16px)보다 조금 크게 */

.notice { font-size: 0.75rem; color: var(--text-sub); margin-top: 8px; }
.notice summary { cursor: pointer; list-style: none; color: var(--accent-text); }
.notice summary::-webkit-details-marker { display: none; }
.notice p { margin-top: 4px; }

.messages { list-style: none; margin-top: 8px; font-size: 0.85rem; color: var(--chip-off-text); }
.messages li + li { margin-top: 4px; }

.empty { text-align: center; color: var(--text-placeholder); padding: 40px 0; }

/* 카드 목록 (2열) */
.cards {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  padding-bottom: 10px;
}

.card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  background: var(--surface-sub);
}

.card-cat { font-size: 0.75rem; color: var(--text-sub); padding: 8px 10px 0; min-height: 1.6em; }
.card-title { font-size: 0.9rem; font-weight: 700; padding: 0 10px; }

.badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface);
}

.badge-pending { color: var(--text-sub); }
.badge-analyzing { color: var(--accent-text); }
.badge-done { color: var(--success); }
.badge-failed { color: var(--danger); }

.retry-btn { width: calc(100% - 20px); margin: 8px 10px 0; padding: 8px; font-size: 0.85rem; }

.card { cursor: pointer; }

/* 카테고리 필터 칩 (가로 스크롤) */
.search {
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  font-size: 1rem;
  background: var(--surface);
}

.search:focus { border-color: var(--accent-strong); }
.search::placeholder { color: var(--text-placeholder); }

.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  flex-shrink: 0;
  padding: 6px 14px;
  border: 1px solid var(--chip-off);
  border-radius: 999px;
  background: var(--chip-off);
  color: var(--chip-off-text);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.chip-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-empty { opacity: 0.45; }

/* 폴더보기 / 전체보기 토글 */
.view-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.toggle-btn {
  padding: 8px 18px;
  border: none;
  border-radius: 999px;
  background: var(--chip-off);
  color: var(--chip-off-text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.toggle-active { background: var(--primary); color: var(--on-primary); }

/* 폴더보기: 대분류 섹션 */
.folder-section { margin-bottom: 24px; }
.section-title { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; }

/* 소분류 폴더 가로 스크롤 (다음 폴더가 살짝 보이게) */
.folder-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
  scroll-padding: 0 16px;
}
.folder-row::-webkit-scrollbar { display: none; }

.folder {
  flex: 0 0 44%;
  scroll-snap-align: start;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* 폴더 표지: 썸네일을 겹쳐 쌓는다 (0 = 가운데 앞, 1 = 왼쪽 뒤, 2 = 오른쪽 뒤) */
.stack {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  background: var(--surface-sub);
  overflow: hidden;
}
.stack-img {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  object-position: top;
  border-radius: 10px;
  background: var(--surface);
}
.stack-img-0 {
  width: 58%;
  height: 62%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 6px 16px var(--shadow-mid);
}
.stack-img-1,
.stack-img-2 {
  width: 46%;
  height: 50%;
  box-shadow: 0 2px 8px var(--shadow-soft);
}
.stack-img-1 { transform: translate(-95%, -44%); z-index: 2; }
.stack-img-2 { transform: translate(-5%, -44%); z-index: 1; }

.folder-title { font-weight: 700; margin-top: 8px; }
.folder-count { font-size: 0.85rem; color: var(--text-sub); }

/* 폴더를 열었을 때 맨 위 바 */
.folder-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.folder-back {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.folder-name { font-size: 1.1rem; font-weight: 800; }

body.no-scroll { overflow: hidden; }

/* 캡처 사진 전체 화면 뷰어 */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: var(--viewer-bg);
}
.viewer[hidden] { display: none; }

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
}

.icon-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--on-dark-button);
  color: var(--on-viewer);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.viewer-bar { position: relative; z-index: 2; }  /* 시트가 열려 있어도 ⋮ 를 누를 수 있게 */

/* ⋮ 더보기 메뉴 */
.more-menu {
  position: absolute;
  top: 54px;
  right: 12px;
  min-width: 140px;
  padding: 6px 0;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--float-border);
  box-shadow: 0 8px 24px var(--shadow-strong);
}
.more-menu[hidden], .info-box[hidden], .viewer-toast[hidden] { display: none; }
.more-menu button {
  display: block;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: none;
  text-align: left;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
}
.more-menu button.danger { color: var(--danger); }

/* [정보] 박스 */
.info-box {
  position: absolute;
  top: 54px;
  left: 12px;
  right: 12px;
  max-width: 400px;
  margin: 0 auto;
  padding: 18px 18px 14px;
  background: var(--surface);
  border-radius: 16px;
  border: 1px solid var(--float-border);
  box-shadow: 0 8px 24px var(--shadow-strong);
}
.info-box .btn { padding: 10px; }

.viewer-toast {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--toast-bg);
  color: var(--on-viewer);
  font-size: 0.85rem;
  white-space: nowrap;
}
.viewer-date { color: var(--viewer-text); font-size: 0.85rem; text-align: center; }

.viewer-image {
  flex: 1;
  min-height: 0;  /* 남은 높이 안에 사진이 들어가도록 */
  width: 100%;
  object-fit: contain;
}

.viewer-info {
  margin: 12px auto 20px;
  padding: 12px 28px;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

/* 사진은 그대로 두고 그 위로 올라오는 상세 시트 */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--scrim-none);
  pointer-events: none;  /* 닫혀 있을 땐 사진·버튼을 가리지 않게 */
  transition: background 0.25s;
}
.sheet-backdrop.open { background: var(--scrim); pointer-events: auto; }

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 70vh;
  margin: 0 auto;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  padding: 10px 20px 24px;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.25s ease-out;
}

/* 시트 오른쪽 위 ✕ 닫기 */
.sheet-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: var(--surface-sub);
  color: var(--text-sub);
  font-size: 1.1rem;
  cursor: pointer;
}
.sheet-backdrop.open .sheet { transform: translateY(0); }

.sheet-handle {
  width: 44px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--border-strong);
}

.sheet-date { text-align: center; font-size: 0.8rem; color: var(--text-sub); margin-bottom: 14px; padding: 0 44px; }
.sheet-cat { font-size: 0.85rem; color: var(--text-sub); }

/* 카테고리 수동 수정 */
.cat-row { display: flex; align-items: center; gap: 6px; }
.cat-edit-btn { border: none; background: none; font-size: 0.95rem; padding: 4px 6px; cursor: pointer; }
.cat-edit-btn[hidden], .cat-edit[hidden] { display: none; }
.cat-edit { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.cat-edit select {
  flex: 1;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--surface);
}
.cat-edit .error { width: 100%; }
.cat-edit-actions { display: flex; gap: 8px; width: 100%; }
.cat-edit-actions .btn { padding: 10px; }
.sheet-title { font-size: 1.25rem; font-weight: 800; line-height: 1.35; margin-bottom: 16px; }

.btn-action {
  display: block;
  text-align: center;
  text-decoration: none;
  background: var(--primary);
  color: var(--on-primary);
  margin-bottom: 16px;
}
.btn-action[hidden] { display: none; }

.sheet-status { color: var(--text-sub); margin-bottom: 12px; }
.sheet-status .btn { margin-top: 8px; }

.catch {
  background: var(--surface-sub);
  border-left: 4px solid var(--accent);  /* AI가 뽑은 핵심 */
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.catch[hidden] { display: none; }
.catch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.catch-title { font-size: 1rem; color: var(--accent-text); }

/* 요약 직접 수정 */
.summary-edit { display: flex; flex-direction: column; gap: 6px; }
.summary-edit[hidden] { display: none; }
.summary-edit textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
  background: var(--surface);
}
.catch-list { padding-left: 18px; font-size: 0.92rem; }
.catch-list li + li { margin-top: 4px; }

.details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 12px;
  font-size: 0.88rem;
  margin-bottom: 14px;
}
.details dt { color: var(--text-sub); font-weight: 600; }
.details dd { word-break: break-all; }

.keywords {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.keywords li {
  font-size: 0.8rem;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-soft-border);
  padding: 3px 10px;
  border-radius: 999px;
}