/* ══════════════════════════════════════
   INFINVEST common.css
   CSS 변수 / 리셋 / 공통 컴포넌트
   (shell.html <style> 블록과 중복 없이 분리)
══════════════════════════════════════ */

/* ── 공통 유틸 ── */
.mono { font-family:'DM Mono', monospace; }
.hidden { display:none !important; }

/* ══════════════════════════════════════
   공통 버튼
══════════════════════════════════════ */
.btn-sm {
  padding:4px 10px; border-radius:6px;
  border:1px dashed var(--border2);
  background:transparent; color:var(--dim);
  font-size:.65rem; cursor:pointer; transition:all .2s;
}
.btn-sm:hover { border-color:var(--orange); color:var(--orange); }

.btn-ghost {
  padding:7px 16px; border-radius:8px;
  border:1px solid var(--border2);
  background:transparent; color:var(--dim2);
  font-size:.78rem; cursor:pointer; transition:all .2s;
}
.btn-ghost:hover { border-color:var(--orange); color:var(--orange); }

/* ══════════════════════════════════════
   공통 카드
══════════════════════════════════════ */
.card {
  background:var(--s2); border:1px solid var(--border);
  border-radius:12px; overflow:hidden;
}
.card-h {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 16px; border-bottom:1px solid var(--border);
}
.card-t {
  font-size:.62rem; color:var(--dim2);
  letter-spacing:2px; text-transform:uppercase; font-weight:300;
}
.card-b { padding:14px; }

/* ══════════════════════════════════════
   설정 드롭다운 메뉴
══════════════════════════════════════ */
.settings-menu {
  display:none; position:fixed; top:56px; right:16px; z-index:500;
  background:var(--s1); border:1px solid var(--border2);
  border-radius:12px; padding:6px; min-width:190px;
  box-shadow:0 8px 32px #000c;
}
.settings-menu.show { display:block; }
.settings-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:8px;
  cursor:pointer; font-size:.78rem; color:var(--dim2); transition:all .15s;
}
.settings-item:hover { background:#ffffff08; color:var(--text); }
.settings-item.danger { color:var(--red); }
.settings-item.danger:hover { background:#ff4f7b10; }
.settings-divider { height:1px; background:var(--border); margin:4px 0; }

/* 모바일에서 settings-menu top 조정 */
@media (max-width:768px) {
  .settings-menu { top:52px; }
}

/* ══════════════════════════════════════
   모달
══════════════════════════════════════ */
.modal-bg {
  display:none; position:fixed; inset:0;
  background:#000a; z-index:900;
  align-items:center; justify-content:center;
}
.modal-bg.show { display:flex; }
.modal {
  background:var(--s1); border:1px solid var(--border2);
  border-radius:14px; padding:24px; width:340px;
  max-width:calc(100vw - 32px);
}
.modal-title {
  font-size:.88rem; font-weight:700;
  margin-bottom:16px; color:var(--orange);
}
.modal input {
  width:100%; padding:9px 12px; border-radius:8px;
  background:#09091a; border:1px solid var(--border2);
  color:var(--text); font-family:'DM Mono',monospace;
  font-size:.84rem; outline:none;
  margin-bottom:12px; transition:border-color .2s;
}
.modal input:focus { border-color:var(--orange); }
.modal-btns { display:flex; gap:8px; justify-content:flex-end; }
.modal-btn {
  padding:7px 16px; border-radius:7px;
  font-size:.76rem; cursor:pointer;
  border:1px solid var(--border2);
  background:transparent; color:var(--dim2);
}
.modal-btn.primary {
  border:none;
  background:linear-gradient(135deg,var(--orange),#ff6644);
  color:#000; font-weight:700;
}

/* ══════════════════════════════════════
   바텀시트 (모바일 모달 대체)
══════════════════════════════════════ */
.sheet-bg {
  display:none; position:fixed; inset:0;
  background:#000b; z-index:900;
  align-items:flex-end; justify-content:center;
}
.sheet-bg.show { display:flex; }
.sheet {
  background:var(--s1); border-radius:20px 20px 0 0;
  width:100%; max-height:88vh; overflow-y:auto;
  padding:20px 18px 40px;
}
.sheet-handle {
  width:36px; height:4px; background:var(--border2);
  border-radius:2px; margin:0 auto 16px;
}
.sheet-title {
  font-size:.92rem; font-weight:700;
  color:var(--orange); margin-bottom:16px;
}

/* PC에서는 바텀시트도 중앙 모달처럼 */
@media (min-width:769px) {
  .sheet-bg { align-items:center; }
  .sheet {
    border-radius:16px; max-width:520px;
    max-height:90vh;
  }
}

/* ══════════════════════════════════════
   백업 아이템
══════════════════════════════════════ */
.backup-item {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-radius:8px;
  background:var(--s2); border:1px solid var(--border);
  margin-bottom:6px; cursor:pointer;
  transition:all .15s; font-size:.76rem;
}
.backup-item:hover { border-color:var(--orange); }

/* ══════════════════════════════════════
   OCR 모달 공통
══════════════════════════════════════ */
.ocr-modal-bg {
  display:none; position:fixed; inset:0;
  background:#000b; z-index:950;
  align-items:flex-end; justify-content:center;
}
.ocr-modal-bg.show { display:flex; }
@media (min-width:769px) {
  .ocr-modal-bg { align-items:center; }
  .ocr-sheet { border-radius:16px !important; max-width:520px; max-height:90vh; }
}
.ocr-sheet {
  background:var(--s1); border-radius:20px 20px 0 0;
  width:100%; max-height:88vh; overflow-y:auto;
  padding:20px 18px 40px;
}
.ocr-handle {
  width:36px; height:4px; background:var(--border2);
  border-radius:2px; margin:0 auto 16px;
}
.ocr-title-row {
  display:flex; align-items:center;
  justify-content:space-between; margin-bottom:14px;
}
.ocr-title { font-size:.92rem; font-weight:700; color:var(--orange); }
.ocr-close {
  background:none; border:none; color:var(--dim2);
  font-size:1.1rem; cursor:pointer; padding:2px;
}
.ocr-upload-zone {
  border:2px dashed var(--border2); border-radius:12px;
  padding:28px 16px; text-align:center;
  cursor:pointer; transition:all .2s;
  position:relative; background:#ffffff02;
}
.ocr-upload-zone:hover,
.ocr-upload-zone.drag { border-color:var(--orange); background:#ff914408; }
.ocr-upload-zone input {
  position:absolute; inset:0; opacity:0;
  cursor:pointer; width:100%; height:100%;
}
.ocr-upload-icon { font-size:2rem; margin-bottom:8px; }
.ocr-upload-title { font-size:.82rem; font-weight:600; margin-bottom:4px; }
.ocr-upload-sub { font-size:.65rem; color:var(--dim); }
.ocr-hint-tags {
  display:flex; gap:5px; justify-content:center;
  flex-wrap:wrap; margin-top:10px;
}
.ocr-hint-tag {
  padding:2px 8px; border-radius:4px;
  font-size:.58rem; font-family:'DM Mono',monospace;
  background:var(--s2); border:1px solid var(--border2); color:var(--dim2);
}
.ocr-preview-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.ocr-thumb {
  position:relative; width:80px; height:80px;
  border-radius:8px; overflow:hidden; border:1px solid var(--border2);
}
.ocr-thumb img { width:100%; height:100%; object-fit:cover; }
.ocr-thumb-del {
  position:absolute; top:2px; right:2px;
  width:18px; height:18px; border-radius:4px;
  background:#000b; border:none; color:#fff;
  font-size:.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.ocr-compress-bar {
  background:var(--s2); border:1px solid var(--border2);
  border-radius:10px; padding:10px 14px; margin-top:12px;
}
.ocr-compress-row {
  display:flex; align-items:center;
  justify-content:space-between; gap:6px; font-size:.65rem;
}
.ocr-compress-label { color:var(--dim2); }
.ocr-compress-val { font-family:'DM Mono',monospace; color:var(--orange); }
.ocr-saving {
  font-family:'DM Mono',monospace; font-size:.62rem;
  padding:1px 7px; border-radius:4px;
  background:#00f5a012; border:1px solid #00f5a025; color:var(--green);
}
.ocr-quality-tabs { display:flex; gap:4px; margin-top:8px; }
.oqtab {
  flex:1; padding:5px 0; border-radius:6px;
  border:1px solid var(--border2); background:transparent;
  color:var(--dim2); font-size:.6rem; cursor:pointer;
  font-family:'DM Mono',monospace; transition:all .15s; text-align:center;
}
.oqtab.active {
  background:#ff914420; border-color:var(--orange); color:var(--orange);
}
.ocr-btn-analyze {
  width:100%; padding:13px; border-radius:10px; border:none;
  margin-top:12px;
  background:linear-gradient(135deg,var(--orange),#ff6644);
  color:#000; font-weight:700; font-size:.86rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  gap:8px; transition:all .2s;
}
.ocr-btn-analyze:disabled { opacity:.4; cursor:not-allowed; }
.ocr-loading { text-align:center; padding:20px 0; }
.ocr-spin {
  width:32px; height:32px;
  border:3px solid var(--border2); border-top-color:var(--orange);
  border-radius:50%; animation:ocrSpin .7s linear infinite;
  margin:0 auto 10px;
}
@keyframes ocrSpin { to { transform:rotate(360deg); } }
.ocr-load-txt {
  font-size:.72rem; color:var(--dim2); font-family:'DM Mono',monospace;
}
.ocr-load-step { font-size:.62rem; color:var(--dim); margin-top:4px; }
.ocr-result-box { margin-top:12px; }
.ocr-result-src {
  font-size:.62rem; font-family:'DM Mono',monospace;
  padding:2px 8px; border-radius:4px;
  background:#00f5a012; border:1px solid #00f5a025; color:var(--green);
}
.ocr-note {
  background:var(--s2); border:1px solid var(--border2);
  border-radius:8px; padding:9px 12px; margin:10px 0;
  font-size:.68rem; color:var(--dim2); line-height:1.6;
}
.ocr-summary {
  background:linear-gradient(135deg,#ff914408,#ffcc4406);
  border:1px solid #ff914428; border-radius:10px;
  padding:10px 14px; margin-bottom:10px;
}
.ocr-summary-row {
  display:flex; justify-content:space-between; align-items:center;
}
.ocr-summary-label { font-size:.62rem; color:var(--dim2); }
.ocr-summary-val {
  font-family:'DM Mono',monospace; font-size:.85rem;
  font-weight:700; color:var(--orange);
}
.ocr-parse-table { width:100%; border-collapse:collapse; margin-bottom:12px; }
.ocr-parse-table th {
  font-size:.56rem; color:var(--dim); letter-spacing:1px;
  text-transform:uppercase; padding:5px 8px; text-align:left;
  border-bottom:1px solid var(--border2); font-weight:300;
}
.ocr-parse-row { border-bottom:1px solid var(--border); }
.ocr-parse-row td { padding:7px 8px; font-size:.76rem; vertical-align:middle; }
.ocr-month-badge {
  font-size:.6rem; color:var(--dim2);
  font-family:'DM Mono',monospace; margin-top:2px;
}
.ocr-conf {
  display:inline-flex; align-items:center;
  font-size:.58rem; padding:1px 6px; border-radius:3px;
  font-family:'DM Mono',monospace;
}
.ocr-conf.high { background:#00f5a012; color:var(--green); border:1px solid #00f5a025; }
.ocr-conf.mid  { background:#ffcc4412; color:var(--gold);  border:1px solid #ffcc4425; }
.ocr-conf.low  { background:#ff4f7b12; color:var(--red);   border:1px solid #ff4f7b25; }
.ocr-amount-input {
  background:var(--s1); border:1px solid var(--border2);
  border-radius:5px; color:var(--text);
  font-family:'DM Mono',monospace; font-size:.74rem;
  padding:3px 7px; width:110px; text-align:right;
  outline:none; transition:border-color .2s;
}
.ocr-amount-input:focus { border-color:var(--orange); }
.ocr-month-sel,
.ocr-acct-sel {
  background:var(--s1); border:1px solid var(--border2);
  border-radius:5px; color:var(--text);
  font-family:'DM Mono',monospace; font-size:.68rem;
  padding:3px 6px; outline:none;
  transition:border-color .2s; width:100%;
}
.ocr-month-sel:focus,
.ocr-acct-sel:focus { border-color:var(--orange); }
.ocr-acct-sel { margin-bottom:3px; }
.ocr-action-row { display:flex; gap:8px; }
.ocr-btn-apply {
  flex:1; padding:12px; border-radius:9px; border:none;
  background:linear-gradient(135deg,var(--green),var(--teal));
  color:#000; font-weight:700; font-size:.82rem; cursor:pointer;
}
.ocr-btn-discard {
  padding:12px 16px; border-radius:9px;
  border:1px solid var(--border2); background:transparent;
  color:var(--dim2); font-size:.82rem; cursor:pointer;
}
.ocr-cost-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:8px; font-size:.6rem;
  color:var(--dim); font-family:'DM Mono',monospace;
}
.ocr-err {
  background:#ff4f7b0a; border:1px solid #ff4f7b30;
  border-radius:8px; padding:10px 14px;
  font-size:.72rem; color:var(--red); margin-top:10px; line-height:1.6;
}

/* ══════════════════════════════════════
   샘플 모드 — nav 위치 보정
══════════════════════════════════════ */
body.sample-mode #shellNav     { top:36px; }
body.sample-mode #shellNavMobile { top:36px; }
body.sample-mode #pageRoot     { padding-top:88px; }
@media (max-width:768px) {
  body.sample-mode #pageRoot   { padding-top:84px; }
}