:root{
  --purple:#8b5cf6;
  --purple2:#8a5bd4;
  --purple-soft:#f4efff;
  --ink:#1c1821;
  --muted:#716b78;
  --line:#e7e2eb;
  --bg:#f7f5fa;
  --card:#fff;
  --shadow:0 8px 24px rgba(44,30,67,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Noto Sans KR","Segoe UI",sans-serif}
body{min-height:100vh}
button,input{font:inherit}
button{cursor:pointer}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px 12px;background:#fff;border-bottom:1px solid var(--line)}
.brand-wrap{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;flex:none;border-radius:13px;background:linear-gradient(145deg,var(--purple),#9d73db);color:#fff;font-weight:900;letter-spacing:-1px;box-shadow:0 6px 16px rgba(111,66,193,.24)}
.brand-copy{min-width:0}
h1{margin:0;font-size:19px;line-height:1.2;letter-spacing:-.4px}
.topbar p{margin:4px 0 0;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-btn,.primary-btn{border:0;border-radius:12px;background:var(--purple);color:#fff;font-weight:850;padding:10px 14px}
main{width:min(920px,100%);margin:0 auto;padding:14px 14px 70px}
.search-panel{position:sticky;top:0;z-index:20;background:rgba(247,245,250,.96);backdrop-filter:blur(12px);padding-top:2px}
.searchbox{display:flex;align-items:center;gap:9px;background:#fff;border:2px solid #d9cbed;border-radius:17px;padding:0 12px;box-shadow:0 8px 24px rgba(71,48,102,.09)}
.searchbox:focus-within{border-color:var(--purple);box-shadow:0 9px 26px rgba(111,66,193,.15)}
.search-icon{font-size:26px;line-height:1;color:var(--purple);transform:rotate(-15deg)}
.searchbox input{width:100%;height:58px;border:0;outline:0;background:transparent;font-size:17px;font-weight:650;color:var(--ink);letter-spacing:-.2px}
.searchbox input::placeholder{font-weight:500;color:#aaa3af}
.clear-btn{width:34px;height:34px;flex:none;border:0;border-radius:50%;background:#f0edf3;color:#6e6873;font-size:23px;line-height:30px}
.summary-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 2px 3px;color:var(--muted)}
.summary-row>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.summary-row strong{font-size:13px;color:#4e4853}
#searchModeHint{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghost-btn{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;color:#5d5665;font-size:12px;font-weight:750}
.ghost-btn.active{background:#fff5c8;border-color:#ead172;color:#6c5400}
.category-bar{display:flex;gap:7px;overflow-x:auto;padding:8px 0 13px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.category-bar::-webkit-scrollbar{display:none}
.cat-btn{flex:none;border:1px solid var(--line);background:#fff;color:#5d5663;padding:9px 13px;border-radius:999px;font-size:13px;font-weight:750;white-space:nowrap}
.cat-btn.active{border-color:var(--purple);background:var(--purple);color:#fff;box-shadow:0 5px 12px rgba(111,66,193,.18)}
.quick-section{margin:3px 0 16px}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-head h2{font-size:15px;margin:0}
.text-btn{border:0;background:transparent;color:var(--muted);font-size:12px}
.quick-list{display:flex;gap:8px;overflow-x:auto;padding:1px 1px 5px;scrollbar-width:none}
.quick-chip{flex:none;max-width:220px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;text-align:left;box-shadow:0 3px 10px rgba(0,0,0,.035)}
.quick-chip strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-chip span{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.recipe-grid{display:grid;grid-template-columns:1fr;gap:9px}
.recipe-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid #ece5f6;border-radius:18px;padding:15px 13px 15px 16px;box-shadow:0 6px 18px rgba(32,22,45,.05);transition:.14s}
.recipe-card:active{transform:scale(.992);background:#fbf9ff}
.recipe-card.new-card{border-color:#d9c7f5;background:linear-gradient(110deg,#fff 65%,#faf6ff)}
.card-main{min-width:0;flex:1}
.card-badges{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.badge,.soft-badge{display:inline-flex;align-items:center;border-radius:7px;padding:4px 7px;font-size:10px;font-weight:900;line-height:1.1}
.badge{background:#ede7f7;color:#5b3b91}
.badge.new{background:#ffe3e8;color:#b0263d}
.soft-badge{background:var(--purple-soft);color:#61428f}
.recipe-card h3{font-size:18px;line-height:1.35;margin:0 0 8px;letter-spacing:-.45px;word-break:keep-all}
.card-meta{display:flex;align-items:center;gap:8px;min-width:0;font-size:11px;color:var(--muted)}
.card-meta .price{font-size:13px;color:#c52c43;white-space:nowrap;background:#fff2f4;border:1px solid #ffd9df;padding:4px 8px;border-radius:999px}
.card-meta span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.match-note{display:inline-block;margin-top:7px;padding:4px 7px;border-radius:6px;background:#fff6d6;color:#78631d;font-size:10px;font-weight:700}
.card-actions{display:flex;align-items:center;gap:3px;flex:none}
.fav-btn{display:grid;place-items:center;width:38px;height:38px;border:0;background:transparent;border-radius:10px;font-size:23px;color:#b2abb6}
.fav-btn.on{color:#d8a600}
.open-arrow{font-size:31px;line-height:1;color:#9b90a5;margin-left:1px}
mark{background:#ffe997;color:inherit;border-radius:3px;padding:0 2px}
.more-btn{display:block;width:100%;margin:14px 0 0;border:1px solid #d7c9e9;background:#fff;color:#654594;border-radius:13px;padding:12px;font-weight:800}
.more-btn[hidden]{display:none}
.empty-state{text-align:center;padding:64px 10px;color:var(--muted)}
.empty-state .empty-icon{font-size:36px;margin-bottom:11px}
.empty-state strong{display:block;color:#4a444e;margin-bottom:6px}
.empty-state p{margin:0;font-size:13px}
.viewer{position:fixed;inset:0;z-index:100}
.viewer-backdrop{position:absolute;inset:0;background:rgba(18,13,24,.68);backdrop-filter:blur(3px)}
.viewer-sheet{position:absolute;inset:2.5vh 0 0;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -18px 45px rgba(0,0,0,.2)}
.viewer-head{display:flex;justify-content:space-between;gap:10px;padding:13px 14px 10px;border-bottom:1px solid var(--line)}
.viewer-title-wrap{min-width:0}
.viewer-badges{display:flex;gap:5px;margin-bottom:5px}
.viewer-head h2{font-size:19px;line-height:1.25;margin:0 0 4px;letter-spacing:-.4px;word-break:keep-all}
.viewer-head p{margin:0;color:var(--muted);font-size:12px}
.icon-btn{width:40px;height:40px;flex:none;border:0;border-radius:12px;background:#f1eef4;font-size:26px;line-height:1}
.viewer-tools{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#faf9fc;border-bottom:1px solid var(--line)}
.tool-btn{height:34px;min-width:38px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:0 10px;font-weight:750;color:#554e5b;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.tool-btn.wide{font-size:12px}
#zoomLabel{width:47px;text-align:center;font-size:11px;color:var(--muted)}
.image-stage{flex:1;overflow:auto;background:#ddd9e2;padding:10px;text-align:center;overscroll-behavior:contain;touch-action:pan-x pan-y pinch-zoom;scroll-behavior:smooth}
.image-stage img{display:block;margin:0 auto;max-width:none;width:100%;height:auto;border-radius:5px;box-shadow:0 8px 24px rgba(0,0,0,.15);transform-origin:top center;transition:width .12s}
.viewer-foot{padding:9px 12px max(10px,env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line)}
.viewer-foot .primary-btn{width:100%}
@media (min-width:760px){
  main{padding-left:22px;padding-right:22px}
  .recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
  .viewer-sheet{inset:4vh 7vw 3vh;border-radius:22px}
}
@media (min-width:1100px){.viewer-sheet{inset:4vh 15vw 3vh}}

@media (max-width:640px){.topbar{align-items:flex-start;flex-wrap:wrap}.brand-tags{justify-content:flex-start;max-width:100%}.install-btn{margin-left:auto}}

.source-toggle{background:#f4efff;border-color:#ded0fb;color:#6b46c1}
@media (max-width:520px){
  .viewer-tools{overflow-x:auto;white-space:nowrap;scrollbar-width:none}
  .viewer-tools::-webkit-scrollbar{display:none}
  .tool-btn{flex:none}
}

/* v1.05 header fix */
.topbar{
  align-items:flex-start;
  padding:14px 16px 13px;
}
.brand-wrap{align-items:flex-start}
.brand-mark{
  width:52px;
  height:52px;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 7px 18px rgba(111,66,193,.16);
}
.brand-mark img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.brand-copy h1{
  margin:1px 0 0;
  font-size:20px;
  line-height:1.15;
}
.brand-copy>p{
  margin:4px 0 0;
  font-size:12px;
  color:var(--muted);
  white-space:normal;
}
.brand-tags{
  display:flex;
  gap:6px;
  margin-top:7px;
  flex-wrap:wrap;
}
.brand-tag{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  background:#f3eff8;
  border:1px solid #e5dced;
  color:#6c6472;
  font-size:10px;
  line-height:1;
  font-weight:800;
}
.brand-tag.current{
  color:#6840a0;
  background:#f1e8ff;
  border-color:#dac6f5;
}
@media (max-width:640px){
  .topbar{flex-wrap:nowrap}
  .install-btn{margin-left:auto;flex:none}
}