/* 아이폰(390px)에서만 쓴다. 뷰어의 피드백 CSS 를 베끼지 않았다 —
   그쪽은 데스크톱 3단 중첩 전제이고, 모바일에서 가로 스크롤이 나는
   우선순위 버그까지 안고 있다. */

:root{
  --bg:#101416; --panel:#181E21; --line:#2A3438; --raised:#212A2E;
  --ink:#EDF2F4; --muted:#93A4AB; --faint:#66787F;
  --go:#C58BD6; --ok:#5EC08D; --warn:#E0AC5E; --bad:#E37B6C;
  --tap:44px;                 /* 애플 권고 최소 탭 크기 */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;
  /* ★ vh 금지. 사파리 주소창 때문에 어긋난다. */
  min-height:100dvh;
  -webkit-text-size-adjust:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
[hidden]{display:none !important}
.dim{color:var(--faint)}
.small{font-size:12px}

/* ── 열쇠 화면 ───────────────────────────────────────────── */
.gate{display:flex;flex-direction:column;justify-content:center;
  min-height:100dvh;padding:0 24px;gap:14px}
.gate h1{margin:0;font-size:28px;letter-spacing:-.02em}
.gate-lead{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.gate input{
  width:100%;min-height:var(--tap);padding:12px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:16px;   /* 16px 미만이면 아이폰이 확대한다 */
}
.gate input:focus{outline:none;border-color:var(--go)}
.gate-error{margin:0;color:var(--bad);font-size:13px}
.btn-primary{
  min-height:var(--tap);border:none;border-radius:12px;
  background:var(--go);color:#1A1020;font-size:16px;font-weight:700;
}

/* ── 공통 틀 ─────────────────────────────────────────────── */
.view{display:flex;flex-direction:column;min-height:100dvh}
.bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:rgba(16,20,22,.92);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.bar h1{margin:0;font-size:19px;letter-spacing:-.02em}
.count{color:var(--faint);font-size:13px;font-weight:500;margin-left:4px}
.btn-icon{
  min-width:var(--tap);min-height:var(--tap);
  border:1px solid var(--line);border-radius:12px;
  background:var(--raised);color:var(--ink);font-size:18px;
}
.btn-back{
  min-height:var(--tap);padding:0 12px 0 4px;
  border:none;background:none;color:var(--go);font-size:17px;
}

/* ── 거르개 ──────────────────────────────────────────────── */
.filters{padding:12px 16px;display:flex;flex-direction:column;gap:10px}
.filters input{
  width:100%;min-height:var(--tap);padding:10px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  color:var(--ink);font-size:16px;
}
.filters input:focus{outline:none;border-color:var(--go)}
.chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.chip{
  min-height:36px;padding:0 14px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:14px;
}
.chip.is-on{background:var(--go);border-color:var(--go);color:#1A1020;font-weight:700}
.chip-sep{width:1px;height:20px;background:var(--line);margin:0 2px}

.status{padding:0 16px 8px;color:var(--faint);font-size:13px;min-height:20px}

/* ── 목록 ────────────────────────────────────────────────── */
.list{list-style:none;margin:0;padding:0 12px 28px;display:flex;flex-direction:column;gap:8px}
.row{
  display:flex;gap:12px;align-items:flex-start;
  width:100%;min-height:var(--tap);padding:12px;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  color:var(--ink);
}
.row:active{background:var(--raised)}
/* ★ 그림이 있을 때만 자리를 만든다. 36건이 그림이 없어서,
   빈 네모를 두면 목록이 텅 빈 상자 줄로 보인다. */
.thumb{width:46px;height:64px;flex:none;border-radius:6px;object-fit:cover;background:var(--raised)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.row-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.row-title{font-size:15px;font-weight:650;line-height:1.35;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 스캐너가 읽은 글자 — 사람 글이 아니므로 고정폭으로 낮춰 구분한다 */
.ocr{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:500;color:var(--muted)}
.row-sub{color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
/* 메시지는 44건 중 6건뿐이고 그게 진짜 신호다. 눈에 띄어야 한다. */
.row-msg{
  margin-top:2px;padding:8px 10px;border-radius:9px;
  background:rgba(224,172,94,.10);border-left:2px solid var(--warn);
  color:var(--ink);font-size:13px;line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
}

.pill{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;
  background:var(--raised);color:var(--muted);
}
.pill.scan{background:rgba(197,139,214,.16);color:var(--go)}
.pill.card{background:rgba(94,192,141,.16);color:var(--ok)}
.pill.photo{background:rgba(94,192,141,.14);color:var(--ok)}
.pill.msg{background:rgba(224,172,94,.16);color:var(--warn)}
/* 내가 매긴 표시 — 테두리를 줘서 자료에서 온 알약과 구분한다. */
.pill.mark{border:1px solid currentColor;background:transparent}
.pill.mark.done{color:var(--ok)}
.pill.mark.todo{color:var(--bad)}

/* ── 표시 단추 ───────────────────────────────────────────── */
.marks{display:flex;gap:8px}
.btn-mark{
  flex:1;min-height:var(--tap);border-radius:12px;
  border:1px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:15px;font-weight:650;
}
.btn-mark.done.is-on{background:rgba(94,192,141,.16);border-color:var(--ok);color:var(--ok)}
.btn-mark.todo.is-on{background:rgba(227,123,108,.16);border-color:var(--bad);color:var(--bad)}

/* ── 상세 ────────────────────────────────────────────────── */
.detail{padding:8px 16px 40px;display:flex;flex-direction:column;gap:14px}
.dhead{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.dhead h2{margin:0;font-size:22px;letter-spacing:-.02em}
.dhead p{margin:0;font-size:13px}

.block{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.block h3{margin:0 0 10px;font-size:12px;letter-spacing:.06em;color:var(--faint);font-weight:700}
.block.accent{background:rgba(224,172,94,.08);border-color:rgba(224,172,94,.28)}
.msg{margin:0;white-space:pre-wrap;line-height:1.65}
.lbl{margin:12px 0 6px;font-size:12px;letter-spacing:.06em;color:var(--faint);font-weight:700}

/* 카드 정보 — 그림은 공개 CDN 주소라 서명이 필요 없다. */
.cardbox{display:flex;gap:14px;align-items:flex-start}
.cardbox img{width:92px;height:128px;flex:none;border-radius:8px;object-fit:cover;background:var(--raised)}
.cardbox .kv{flex:1;min-width:0}

/* 이름표와 값을 한 줄에 짝지어 둔다 */
.kv{margin:0;display:flex;flex-direction:column;gap:9px}
.kv div{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.kv dt{color:var(--faint);font-size:13px;flex:none}
.kv dd{margin:0;font-size:13.5px;text-align:right;overflow-wrap:anywhere}

/* 스캐너가 읽은 글자 전문 */
.ocrfull{
  margin:0;padding:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;
  font-size:12px;line-height:1.55;white-space:pre-wrap;word-break:break-word;
  color:var(--muted);max-height:220px;overflow-y:auto;
}

/* 피드백 사진 — 서명 주소가 필요하고 5분이면 죽는다. */
.photo-box img{width:100%;border-radius:10px;display:block;margin-top:10px}
.btn-wide{width:100%;min-height:var(--tap);border-radius:12px;
  border:1px solid var(--line);background:var(--raised);color:var(--ink);font-size:15px}

details summary{
  min-height:var(--tap);display:flex;align-items:center;
  color:var(--muted);font-size:14px;cursor:pointer;
}
details[open] summary{margin-bottom:8px}
details pre{
  margin:0;padding:12px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;
  font-size:11px;line-height:1.5;overflow-x:auto;white-space:pre-wrap;word-break:break-word;
}