:root { color-scheme: light; --ink:#29281f; --muted:#766f56; --line:#e9dfad; --lemon:#FCF9B7; --paper:#fffdf2; --shadow:0 18px 48px rgba(111,91,24,.14); font-family:Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 72% -10%, #FCF9B7 0, transparent 38rem), var(--paper); }
button, input, textarea { font:inherit; }
.app-shell { width:min(1440px, 100%); margin:0 auto; padding:34px 24px 54px; }
.topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:22px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 14px; color:#75631d; font-size:12px; letter-spacing:.18em; font-weight:700; }
h1 { max-width:760px; margin:0; font-size:clamp(34px, 5vw, 72px); line-height:1.02; letter-spacing:-.055em; font-weight:650; }
h1 em { color:#a57b00; font-style:normal; }
.lede { max-width:520px; margin:10px 0 0; color:var(--muted); font-size:16px; line-height:1.5; }
.status { color:#756b43; font-size:13px; white-space:nowrap; }
.toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0 20px; }
.toolbar-actions { display:flex; align-items:center; gap:18px; }
.search { display:flex; align-items:center; gap:14px; width:min(520px, 100%); color:var(--muted); font-size:13px; }
.search input { width:100%; border:0; border-bottom:1px solid var(--line); outline:0; padding:10px 0; color:var(--ink); background:transparent; }
.search input:focus { border-color:#d7aa16; }
.quiet-button { border:1px solid var(--line); border-radius:999px; padding:10px 16px; color:#67591d; background:rgba(255,255,255,.62); cursor:pointer; }
.quiet-button:hover { border-color:#d7aa16; background:#fffdf2; }
.content-grid { display:block; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:16px; }
.image-object { position:relative; overflow:hidden; border:0; border-radius:0; background:transparent; cursor:pointer; transition:opacity .2s ease; }
.image-object:hover { opacity:.86; }
.image-object.selected { outline:3px solid var(--lemon); outline-offset:-3px; }
.image-object img { display:block; width:100%; height:auto; object-fit:contain; background:transparent; }
.image-meta { padding:8px 0 22px; }
.annotation-preview { min-height:1.4em; color:var(--ink); font-size:13px; line-height:1.4; }
.image-date { display:block; margin-top:6px; color:#9a906d; font-size:10px; line-height:1.2; }
.interaction-hint { margin:0; color:#817642; font-size:12px; line-height:1.5; }
.note-label { display:block; margin-bottom:8px; color:#67591d; font-size:13px; }
.note-input { width:100%; min-height:150px; resize:vertical; border:1px solid var(--line); border-radius:10px; padding:12px; outline:0; color:var(--ink); background:#fff; line-height:1.6; }
.note-input:focus { border-color:#d7aa16; box-shadow:0 0 0 3px rgba(215,170,22,.16); }
.note-dialog { width:min(520px, calc(100% - 28px)); padding:0; border:1px solid #e4e4df; border-radius:16px; color:var(--ink); background:#fffdf8; box-shadow:0 24px 70px rgba(41,40,31,.22); }
.note-dialog::backdrop { background:rgba(41,40,31,.42); backdrop-filter:blur(4px); }
.note-form { padding:22px; }
.dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.dialog-kicker { margin:0 0 5px; color:#75631d; font-size:10px; letter-spacing:.18em; font-weight:700; }
.dialog-head h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.dialog-description { margin:7px 0 0; color:#817d70; font-size:13px; line-height:1.45; }
.dialog-close { width:36px; height:36px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:transparent; cursor:pointer; font-size:25px; line-height:1; }
.dialog-image { display:block; width:100%; max-height:260px; margin:18px 0; border-radius:10px; object-fit:contain; background:#f7f6ef; }
.note-dialog .note-label { margin-top:6px; }
.note-dialog .save-row { margin-top:14px; }
.save-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; }
.save-button { border:0; border-radius:999px; padding:10px 17px; color:#fffdf2; background:#5f5117; cursor:pointer; }
.save-button:disabled { cursor:wait; opacity:.6; }
.save-message { color:#756b43; font-size:12px; }
.toast { position:fixed; z-index:20; left:50%; bottom:22px; max-width:calc(100% - 32px); padding:10px 14px; border:1px solid rgba(252,249,183,.28); border-radius:8px; color:#fffdf2; background:#29281f; box-shadow:0 10px 28px rgba(41,40,31,.22); font-size:13px; opacity:0; pointer-events:none; transform:translate(-50%, 12px); transition:opacity .18s ease, transform .18s ease; }
.toast.is-visible { opacity:1; transform:translate(-50%, 0); }
.toast.is-error { border-color:#e7b0a4; }
.empty { grid-column:1/-1; padding:50px 0; color:var(--muted); }
@media (max-width: 860px) { .app-shell { width:100%; padding:22px 0 38px; } .topbar { display:block; padding:0 14px 16px; } .status { margin-top:12px; } .toolbar { align-items:flex-start; flex-direction:column; padding:12px 14px 14px; } .toolbar-actions { width:100%; justify-content:space-between; } .gallery { grid-template-columns:1fr; gap:0; } .image-meta { padding:8px 14px 18px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; } }