:root {
  --bg:#ffffff; --bg2:#f5f5f3; --bg3:#eeede9;
  --text:#1a1a1a; --text2:#555551; --text3:#999993;
  --border:rgba(0,0,0,0.12); --border2:rgba(0,0,0,0.2);
  --radius:10px; --radius-lg:14px;
  --green-bg:#EAF3DE; --green-text:#3B6D11; --green-border:#C0DD97;
  --amber-bg:#FAEEDA; --amber-text:#854F0B; --amber-border:#FAC775;
  --blue-bg:#E6F1FB; --blue-text:#185FA5; --blue-border:#B5D4F4;
  --accent:#1a1a1a;
}
@media (prefers-color-scheme:dark) {
  :root {
    --bg:#1c1c1e; --bg2:#2c2c2e; --bg3:#000;
    --text:#f0f0ee; --text2:#aaaaaa; --text3:#666662;
    --border:rgba(255,255,255,0.1); --border2:rgba(255,255,255,0.2);
    --green-bg:#173404; --green-text:#C0DD97; --green-border:#27500A;
    --amber-bg:#412402; --amber-text:#FAC775; --amber-border:#633806;
    --blue-bg:#042C53; --blue-text:#B5D4F4; --blue-border:#0C447C;
    --accent:#f0f0ee;
  }
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:var(--bg3);color:var(--text);font-size:15px;min-height:100vh;-webkit-font-smoothing:antialiased}
button{font-family:inherit}

#app{max-width:600px;margin:0 auto;padding-bottom:140px}
.app-header{background:var(--bg);border-bottom:0.5px solid var(--border);padding:14px 16px 0;position:sticky;top:0;z-index:50}
.header-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.header-top h1{font-size:17px;font-weight:700;letter-spacing:-0.3px}
.header-sub{font-size:11px;color:var(--text3);margin-top:1px;font-weight:400}
.auth-icon-btn{background:none;border:0.5px solid var(--border2);border-radius:20px;padding:4px 10px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text2);flex-shrink:0;font-size:13px;gap:6px;white-space:nowrap}
.auth-icon-btn:hover{background:var(--bg2)}
.auth-icon-btn img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.tabs{display:flex}
.tab-btn{background:none;border:none;border-bottom:2px solid transparent;padding:10px 14px;font-size:13px;color:var(--text2);cursor:pointer;margin-bottom:-0.5px;white-space:nowrap}
.tab-btn.active{color:var(--text);border-bottom-color:var(--text);font-weight:500}
.tab-pane{display:none;padding:16px}
.tab-pane.active{display:block}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-card{background:var(--bg);border-radius:var(--radius-lg);padding:24px;width:100%;max-width:360px}
.modal-title{font-size:17px;font-weight:600;margin-bottom:6px}
.modal-sub{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:16px}
.modal-btn{display:block;width:100%;padding:11px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:14px;color:var(--text);cursor:pointer;margin-bottom:8px;text-align:center}
.modal-btn.primary{background:var(--accent);color:var(--bg);border-color:transparent}
.modal-btn.danger{color:#A32D2D;border-color:#F09595}
.modal-btn:hover{opacity:0.85}
.modal-close-link{display:block;text-align:center;font-size:13px;color:var(--text3);cursor:pointer;margin-top:4px;background:none;border:none;width:100%}
.modal-user{font-size:15px;font-weight:500;margin-bottom:4px}
.modal-user-email{font-size:13px;color:var(--text2);margin-bottom:16px}
.sync-status{font-size:12px;color:var(--text3);text-align:center;margin-bottom:12px}
.google-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;background:var(--bg2);border:0.5px solid var(--border2);border-radius:var(--radius);font-size:14px;color:var(--text);cursor:pointer;text-decoration:none;margin-bottom:8px}
.google-btn:hover{opacity:.85}
.auth-avatar{width:52px;height:52px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 10px}
.auth-initial{width:52px;height:52px;border-radius:50%;background:var(--blue-bg);color:var(--blue-text);font-size:20px;font-weight:600;display:flex;align-items:center;justify-content:center;margin:0 auto 10px}

/* ── Photo/Voice ── */
.photo-section{margin-bottom:14px}
.photo-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;background:var(--bg);border:0.5px dashed var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text2);cursor:pointer}
.photo-btn:hover{background:var(--bg2)}
.photo-btn:disabled{opacity:0.5;cursor:not-allowed}
#voice-preview{display:none;font-size:12px;color:var(--text2);text-align:center;padding:5px 8px;background:var(--bg2);border-radius:6px;margin-top:6px}
.voice-btn.recording{background:#FF3B30!important;color:white!important;border-color:#FF3B30!important;animation:pulse-rec 1s infinite}
@keyframes pulse-rec{0%,100%{opacity:1}50%{opacity:.65}}

/* ── Notice ── */
.notice-bar{display:none;align-items:center;gap:8px;background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-bottom:14px;font-size:13px;color:var(--text2)}
.notice-bar .load-btn{margin-left:auto;font-size:12px;padding:4px 10px;white-space:nowrap;background:none;border:0.5px solid var(--border2);border-radius:6px;cursor:pointer;color:var(--text)}
.notice-bar .close-btn{background:none;border:none;cursor:pointer;color:var(--text3);font-size:18px;padding:0 2px;line-height:1}

/* ── Selected area ── */
.selected-area{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px;margin-bottom:14px}
.selected-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.selected-count{font-size:13px;font-weight:500;color:var(--text)}
.pantry-btns{display:flex;gap:4px}
.pantry-icon-btn{background:none;border:0.5px solid var(--border);border-radius:6px;padding:4px 8px;font-size:14px;color:var(--text3);cursor:pointer;display:flex;align-items:center;line-height:1}
.pantry-icon-btn:hover{background:var(--bg2);color:var(--text)}
.pantry-icon-btn.saved{color:var(--green-text);border-color:var(--green-border);background:var(--green-bg)}

/* ── Category blocks ── */
.cat-block{margin-bottom:14px;background:var(--bg);border-radius:var(--radius-lg);padding:14px;border:0.5px solid var(--border)}
.cat-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cat-title{font-size:13px;font-weight:500;color:var(--text2)}
.cat-icon{font-size:16px;line-height:1}
.tag-area{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:20px;padding:4px 10px 4px 12px;font-size:12px;border:0.5px solid}
.tag.fresh{background:var(--green-bg);color:var(--green-text);border-color:var(--green-border)}
.tag.sauce{background:var(--amber-bg);color:var(--amber-text);border-color:var(--amber-border)}
.tag.dry{background:var(--blue-bg);color:var(--blue-text);border-color:var(--blue-border)}
.tag button{background:none;border:none;cursor:pointer;padding:0;color:inherit;opacity:.55;display:flex;align-items:center;font-size:14px;line-height:1}
.tag button:hover{opacity:1}
.quick-wrap{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.qbtn{background:none;border:0.5px solid var(--border);border-radius:20px;padding:3px 10px;font-size:12px;color:var(--text2);cursor:pointer}
.qbtn:hover{background:var(--bg2)}
.qbtn:focus{outline:none;background:none}
.qbtn.selected:focus{background:var(--green-bg)!important}
.qbtn:disabled{opacity:.35;cursor:default}
.more-btn{background:var(--blue-bg)!important;color:var(--blue-text)!important;border-color:var(--blue-border)!important}
.qbtn.selected{background:var(--green-bg)!important;color:var(--green-text)!important;border-color:var(--green-border)!important}
.input-row{display:flex;gap:8px}
.input-row input{flex:1;padding:8px 12px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg2);color:var(--text);min-width:0}
.input-row input:focus{outline:none;border-color:var(--blue-text)}
.input-row button{padding:8px 14px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text);cursor:pointer;white-space:nowrap}
.input-row button:hover{background:var(--bg2)}

/* ── Tools ── */
.tool-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:14px}
.tool-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.tool-chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 12px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:11px;color:var(--text2);cursor:pointer;min-width:60px}
.tool-chip i{font-size:20px}
.tool-chip svg{width:20px;height:20px}
.tool-chip:hover{background:var(--bg2)}
.tool-chip.on{background:var(--blue-bg);color:var(--blue-text);border-color:var(--blue-border)}

/* ── Filters ── */
.filter-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:14px}
.filter-row{margin-bottom:12px}
.filter-row:last-child{margin-bottom:0}
.filter-label{font-size:11px;color:var(--text3);display:block;margin-bottom:8px;font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.chip-row{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:none;border:0.5px solid var(--border2);border-radius:20px;padding:5px 11px;font-size:12px;color:var(--text2);cursor:pointer}
.chip:hover{background:var(--bg2)}
.chip.diet-on{background:var(--green-bg);color:var(--green-text);border-color:var(--green-border)}
.chip.mood-on{background:var(--blue-bg);color:var(--blue-text);border-color:var(--blue-border)}
.chip.ingcount-on{background:var(--amber-bg);color:var(--amber-text);border-color:var(--amber-border)}

/* ── Error/Loading ── */
#error-msg{display:none;font-size:13px;color:#A32D2D;background:#FCEBEB;border:0.5px solid #F09595;border-radius:var(--radius);padding:10px 12px;margin-bottom:14px}
@media(prefers-color-scheme:dark){#error-msg{background:#4a1313;color:#F09595;border-color:#791F1F}}
#loading{display:none;text-align:center;padding:2rem;color:var(--text3);font-size:14px;background:var(--bg);border-radius:var(--radius-lg);border:0.5px solid var(--border);margin-bottom:14px}

/* ── Recipe cards ── */
#result-area:not(:empty){margin-bottom:14px}
.recipe-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px}
.recipe-title{font-size:17px;font-weight:600;margin-bottom:4px}
.recipe-meta{font-size:12px;color:var(--text3);margin-bottom:8px}
.recipe-desc{font-size:13px;color:var(--text2);line-height:1.65;margin-bottom:12px}
.ing-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.ing-table td{padding:5px 0;border-bottom:0.5px solid var(--border);font-size:13px;vertical-align:middle}
.ing-table tr:last-child td{border-bottom:none}
.ing-name{color:var(--text)}
.ing-status{padding:0 10px;white-space:nowrap;font-size:12px}
.status-have{color:var(--green-text)}
.status-need{color:var(--amber-text)}
.ing-amount{color:var(--text3);text-align:right;font-size:12px}
.card-btns{display:flex;gap:7px}
.card-btn{flex:1;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);padding:8px 6px;font-size:12px;color:var(--text2);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-btn:hover{background:var(--bg2)}
.card-btn:disabled{opacity:.5;cursor:not-allowed}
.card-btn.done{background:var(--green-bg);border-color:var(--green-border);color:var(--green-text)}
.card-btn.bookmarked{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber-text)}
.detail-expand{margin-top:12px;padding-top:12px;border-top:0.5px solid var(--border)}
.detail-rating{margin-top:16px;padding-top:14px;border-top:0.5px solid var(--border)}
.detail-rating-label{font-size:12px;color:var(--text2);line-height:1.6;margin-bottom:10px}
.detail-action-row{display:flex;gap:8px;margin-top:10px}
.detail-action-row button{flex:1;padding:9px 10px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text);cursor:pointer}
.detail-action-row button:hover{background:var(--bg2)}
.detail-action-row button.bookmarked{background:var(--amber-bg);color:var(--amber-text);border-color:var(--amber-border)}
.refresh-btn{width:100%;padding:10px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text2);cursor:pointer}
.refresh-btn:hover{background:var(--bg2)}
.log-inline{display:none;margin-top:12px;padding-top:12px;border-top:0.5px solid var(--border)}
.log-inline.open{display:block}
.log-inline p{font-size:13px;font-weight:500;margin-bottom:8px}
.stars{display:flex;gap:5px;margin-bottom:10px}
.star{font-size:26px;cursor:pointer;color:var(--text3);line-height:1}
.star.on{color:#EF9F27}
.log-inline input{width:100%;padding:8px 12px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:13px;background:var(--bg2);color:var(--text);margin-bottom:10px}
.log-inline button{padding:7px 16px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text);cursor:pointer}
.log-inline button:hover{background:var(--bg2)}

/* ── History/Saved ── */
.hist-card,.saved-card{background:var(--bg);border:0.5px solid var(--border);border-radius:var(--radius-lg);padding:14px 16px;margin-bottom:10px}
.hist-name,.saved-name{font-size:15px;font-weight:500;margin-bottom:4px}
.hist-meta,.saved-meta{font-size:12px;color:var(--text3);margin-bottom:6px}
.hist-stars{color:#EF9F27;margin-right:6px}
.hist-note{font-size:13px;color:var(--text2);margin-bottom:8px}
.saved-desc{font-size:13px;color:var(--text2);line-height:1.6;margin-bottom:10px}
.saved-tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.saved-tag{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--bg2);color:var(--text3);border:0.5px solid var(--border)}
.del-btn{background:none;border:0.5px solid var(--border);border-radius:6px;padding:4px 10px;font-size:12px;color:var(--text3);cursor:pointer}
.del-btn:hover{color:#A32D2D}
.empty-state{text-align:center;padding:3rem 1rem;color:var(--text3);font-size:14px;line-height:1.8}

/* ── Bottom bar ── */
.bottom-fixed{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--bg);border-top:0.5px solid var(--border);padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
.bottom-wrap{max-width:600px;margin:0 auto}
.loading-hint{display:none;text-align:center;font-size:12px;color:var(--text3);margin-bottom:6px}
#user-note{display:block;width:100%;padding:8px 12px;border:0.5px solid var(--border);border-radius:var(--radius);font-size:12px;background:var(--bg2);color:var(--text);font-family:inherit;margin-bottom:8px}
#user-note:focus{outline:none;border-color:var(--blue-text)}
.rc-btn{background:none;border:0.5px solid var(--border);border-radius:5px;padding:2px 7px;font-size:12px;color:var(--text3);cursor:pointer}
.rc-btn.rc-on{background:var(--accent);color:var(--bg);border-color:transparent}
.bottom-btns{display:flex;gap:8px;align-items:center;margin-top:0}
#save-pantry-btn{padding:12px 14px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:13px;color:var(--text2);cursor:pointer;white-space:nowrap}
#save-pantry-btn:hover{background:var(--bg2)}
#dessert-btn{padding:0 13px;height:44px;background:none;border:0.5px solid var(--border2);border-radius:var(--radius);font-size:18px;cursor:pointer;flex-shrink:0;line-height:1}
#dessert-btn:hover{background:var(--bg2)}
#dessert-btn.active{background:var(--amber-bg);border-color:var(--amber-border)}
#ask-btn{flex:1;padding:0 12px;height:44px;background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius);font-size:15px;font-weight:500;cursor:pointer}
#ask-btn:disabled{opacity:.6;cursor:not-allowed}

/* ── Shopping list ── */
.shop-trigger{width:100%;padding:8px;margin-bottom:10px;background:var(--amber-bg);border:0.5px solid var(--amber-border);border-radius:var(--radius);font-size:12px;color:var(--amber-text);cursor:pointer;display:flex;align-items:center;justify-content:center}
.shop-trigger:hover{opacity:.85}
.shop-item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:0.5px solid var(--border);cursor:pointer}
.shop-item:last-child{border-bottom:none}
.shop-item input{width:18px;height:18px;flex-shrink:0;accent-color:var(--green-text);cursor:pointer}
.shop-name{flex:1;font-size:14px;color:var(--text)}
.shop-amt{font-size:12px;color:var(--text3);white-space:nowrap}
.shop-item.checked .shop-name{text-decoration:line-through;color:var(--text3)}
.shop-list-box{max-height:50vh;overflow-y:auto;margin-bottom:16px}

/* ── Toast ── */
#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#1a1a1a;color:white;padding:9px 18px;border-radius:20px;font-size:13px;z-index:300;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap}