:root{--primary:#14b8a6;--primary-dark:#0d9488;--primary-light:#ccfbf1;--text-main:#1f2937;--text-muted:#6b7280;--bg-body:#f3f4f6;--bg-app:#ffffff;--border-color:#e5e7eb;--grade-safe:#34d399;--grade-caution:#fbbf24;--grade-danger:#ef4444}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Pretendard',-apple-system,BlinkMacSystemFont,system-ui,Roboto,'Helvetica Neue','Segoe UI','Apple SD Gothic Neo','Noto Sans KR','Malgun Gothic',sans-serif;-webkit-tap-highlight-color:transparent}
body{background-color:var(--bg-body);color:var(--text-main);display:flex;justify-content:center;min-height:100vh}
a{color:var(--text-main);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--primary);text-decoration:none}
a:focus-visible{outline:2px solid var(--primary-light);outline-offset:2px;border-radius:8px}
#app-container{width:100%;max-width:600px;background-color:var(--bg-app);min-height:100vh;position:relative;box-shadow:0 0 20px rgba(0,0,0,0.05);padding-bottom:70px;display:flex;flex-direction:column;overflow-x:hidden}
header{position:sticky;top:0;background-color:var(--bg-app);z-index:100;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color)}
.logo{font-size:24px;font-weight:800;color:var(--primary);letter-spacing:-0.5px}
.header-icons{display:flex;gap:16px}
.icon-btn{background:none;border:none;cursor:pointer;color:var(--text-main);display:flex;align-items:center;justify-content:center}
.search-section{padding:20px;background-color:var(--primary);color:#fff;border-bottom-left-radius:24px;border-bottom-right-radius:24px}
.search-title{font-size:20px;font-weight:700;margin-bottom:16px;line-height:1.4}
.search-bar{display:flex;background-color:#fff;border-radius:12px;padding:12px 16px;align-items:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1)}
.search-bar input{border:none;outline:none;flex:1;font-size:16px;color:var(--text-main);background:transparent}
.search-bar input::placeholder{color:#9ca3af}
.category-section{padding:24px 20px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center}
.category-item{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;text-decoration:none;color:var(--text-main)}
.category-icon{width:56px;height:56px;background-color:var(--primary-light);border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:24px;transition:transform .2s ease}
.category-item:hover .category-icon{transform:scale(1.05)}
.category-name{font-size:13px;font-weight:600}
.content-section{padding:0;flex:1}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-top:10px}
.section-title{font-size:18px;font-weight:700}
.section-more{font-size:13px;color:var(--text-muted);text-decoration:none}
.food-list{display:flex;flex-direction:column;gap:16px}
.food-card{display:flex;gap:16px;padding:16px;border:1px solid var(--border-color);border-radius:16px;background:#fff;transition:box-shadow .2s;cursor:pointer}
.food-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.05)}
.food-card{text-decoration:none;color:var(--text-main)}
.food-rank{font-size:18px;font-weight:800;color:var(--primary);min-width:20px}
.food-image{width:70px;height:70px;background-color:#f8fafc;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;border:1px solid var(--border-color)}
.food-info{flex:1;display:flex;flex-direction:column;justify-content:space-between}
.food-brand{font-size:12px;color:var(--text-muted);margin-bottom:4px}
.food-name{font-size:15px;font-weight:600;margin-bottom:8px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.food-meta{display:flex;align-items:center;gap:8px;font-size:12px}
.rating{display:flex;align-items:center;color:var(--text-main);font-weight:600;gap:2px}
.review-count{color:var(--text-muted)}
.ingredient-badges{display:flex;gap:6px;margin-top:10px}
.badge{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 8px;border-radius:20px;background-color:#f3f4f6}
.badge-dot{width:6px;height:6px;border-radius:50%}
.dot-safe{background-color:var(--grade-safe)}
.dot-caution{background-color:var(--grade-caution)}
.dot-danger{background-color:var(--grade-danger)}
.bottom-nav{position:fixed;bottom:0;width:100%;max-width:600px;background-color:var(--bg-app);border-top:1px solid var(--border-color);display:flex;justify-content:space-around;padding:12px 0;z-index:100;left:50%;transform:translateX(-50%)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:6px;color:#9ca3af;text-decoration:none;font-size:11px;font-weight:600;flex:1;cursor:pointer}
.nav-item.active{color:var(--primary)}
.nav-item svg{width:24px;height:24px}
.view{display:none;animation:fadeIn .3s ease}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.community-post{padding:16px;border-bottom:1px solid var(--border-color)}
.comm-tag{font-size:11px;color:var(--primary);background:var(--primary-light);padding:2px 6px;border-radius:4px;margin-bottom:8px;display:inline-block}
.comm-title{font-size:15px;font-weight:600;margin-bottom:8px}
.comm-desc{font-size:13px;color:var(--text-muted);line-height:1.4;margin-bottom:12px}
.comm-meta{font-size:12px;color:#9ca3af;display:flex;gap:10px}
.ui-card{background:#fff;border-radius:16px;padding:20px;margin-bottom:16px;border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0,0,0,0.02)}
.ui-card-title{font-size:16px;font-weight:700;margin-bottom:16px;color:var(--text-main);display:flex;align-items:center;gap:8px}
.input-group{margin-bottom:16px}
.input-group:last-child{margin-bottom:0}
.input-label{display:block;font-size:13px;font-weight:600;color:var(--text-main);margin-bottom:6px}
.input-control{width:100%;padding:12px 14px;border:1px solid var(--border-color);border-radius:8px;font-size:15px;color:var(--text-main);background:#fff;transition:all .2s}
.input-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.input-control::placeholder{color:#9ca3af}
.input-textarea{resize:vertical;min-height:100px}
.input-select{appearance:none;background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.check-group{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:8px}
.check-label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;color:var(--text-main)}
.check-input{accent-color:var(--primary);width:18px;height:18px;cursor:pointer}
.ui-fieldset{border:1px solid var(--border-color);border-radius:12px;padding:16px}
.ui-legend{font-size:13px;font-weight:600;color:var(--primary);padding:0 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:14px;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;border:none;transition:background .2s}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:active{background:var(--primary-dark)}
.btn-secondary{background:var(--bg-body);color:var(--text-main)}
.btn-outline{background:#fff;border:1px solid var(--border-color);color:var(--text-main)}
.btn-sm{padding:8px 12px;width:auto;font-size:14px;border-radius:8px}
.filter-bar{display:grid;grid-template-columns:1fr 52px 52px;gap:8px;align-items:center;margin-bottom:12px}
.icon-btn-sm{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--border-color);background:#fff;color:var(--text-main);cursor:pointer}
.icon-btn-sm.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
.icon-btn-sm svg{width:22px;height:22px}
.icon-btn-sm i{font-size:20px;line-height:1}
.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 8px;border-radius:999px;background:#f3f4f6;border:1px solid var(--border-color)}
.tag .remove{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#fff;border:1px solid var(--border-color);color:#6b7280;text-decoration:none;font-size:12px}
.filter-accordion{border:1px solid var(--border-color);border-radius:12px;overflow:hidden;max-height:0;transition:max-height .25s ease;background:#fff}
.filter-accordion.open{max-height:2200px}
.filter-accordion .body{padding:16px}
.actions-row{display:flex;justify-content:space-between;gap:12px;margin-top:8px}
.actions-row .btn{width:48%}
.fab{position:fixed;right:20px;bottom:90px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.15);text-decoration:none;z-index:150}
.fab svg{width:28px;height:28px}
.dropzone{border:2px dashed var(--border-color);border-radius:12px;background:#fafafa;padding:16px;text-align:center;color:var(--text-muted);cursor:pointer;transition:border-color .2s}
.dropzone:hover{border-color:var(--primary)}
.dz-instructions{font-size:13px;margin-top:8px}
.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb{position:relative;width:100px;height:100px;border:1px solid var(--border-color);border-radius:10px;overflow:hidden;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-remove{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:12px;color:#6b7280;text-decoration:none}
.p-20{padding:20px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.spacer-20{height:20px}
.text-muted-14{color:var(--text-muted);font-size:14px;line-height:1.4}
.view-header{padding:20px;background:#fff;border-bottom:1px solid var(--border-color)}
.view-title{font-size:20px;font-weight:700}
.view-subtitle{color:var(--text-muted);font-size:13px;margin-top:4px}
.check-group-vertical{flex-direction:column;gap:12px;margin-top:8px}
.btn-group-vertical{display:flex;flex-direction:column;gap:12px}
.profile-container{padding:40px 20px;text-align:center}
.profile-icon{width:80px;height:80px;background:var(--primary-light);border-radius:50%;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:32px}
.terms-box{border:1px solid var(--border-color);padding:12px;border-radius:8px;font-size:13px;color:var(--text-muted);height:120px;overflow-y:auto}
.btn-primary-dark{background:var(--primary-dark)!important;color:#fff}
.btn-danger{background:var(--grade-danger)!important;color:#fff}
/* detail */
.product-hero{width:100%;aspect-ratio:1/1;background:#f8fafc;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;font-size:48px}
.product-info-section{padding:24px 20px}
.product-brand{font-size:13px;color:var(--text-muted);font-weight:600;margin-bottom:6px}
.product-title{font-size:22px;font-weight:700;line-height:1.4;margin-bottom:12px}
.rating-summary{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:20px}
.price-box{border-top:1px solid var(--border-color);padding-top:16px;margin-top:16px;display:flex;justify-content:space-between;align-items:flex-end}
.price-label{font-size:13px;color:var(--text-muted)}
.price-value{font-size:24px;font-weight:800;color:var(--text-main)}
.tab-nav{display:flex;border-bottom:1px solid var(--border-color);position:sticky;top:57px;background:#fff;z-index:90}
.tab-item{flex:1;text-align:center;padding:14px 0;font-size:15px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent}
.tab-item.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab-content{display:none;padding:32px 20px}
.tab-content.active{display:block}
.section-title{font-size:18px;font-weight:700;margin-bottom:20px;display:flex;align-items:center;gap:8px}
.ingredient-summary{display:flex;background:var(--bg-body);border-radius:12px;padding:20px;justify-content:space-around;text-align:center;margin-bottom:32px}
.ing-stat-box{display:flex;flex-direction:column;align-items:center;gap:8px}
.ing-circle{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800;background:#fff;border:3px solid var(--border-color)}
.stat-safe .ing-circle{border-color:var(--primary);color:var(--primary)}
.stat-caution .ing-circle{border-color:var(--grade-caution);color:var(--grade-caution)}
.stat-danger .ing-circle{border-color:var(--grade-danger);color:var(--grade-danger)}
.ing-label{font-size:13px;font-weight:600;color:var(--text-main)}
.nutrition-list{display:flex;flex-direction:column;gap:16px}
.nutri-row{display:flex;align-items:center;gap:12px}
.nutri-label{width:60px;font-size:14px;font-weight:600;color:var(--text-main)}
.nutri-bar-bg{flex:1;height:8px;background:var(--bg-body);border-radius:4px;overflow:hidden}
.nutri-bar-fill{height:100%;background:var(--primary);border-radius:4px}
.nutri-value{width:40px;font-size:13px;color:var(--text-muted);text-align:right}