:root{
  --navy:#16233f; --teal:#3dbe9b; --bg:#f5f7fa; --card:#fff;
  --textP:#1f2733; --textS:#5b6776;
  --safe:#34b36b; --warn:#f2bd33; --danger:#d94545;
  --s1:#f2bd33; --s2:#ed7d2e; --s3:#d94545; --s4:#8c59b3;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{font-family:-apple-system,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;background:var(--bg);color:var(--textP);font-size:17px;line-height:1.5}
body{max-width:520px;margin:0 auto;padding-bottom:78px;min-height:100vh;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:10;background:var(--navy);color:#fff;display:flex;justify-content:space-between;align-items:center;padding:14px 18px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.3px}
.stage-badge{font-size:13px;font-weight:700;background:rgba(255,255,255,.15);padding:5px 11px;border-radius:20px}
main{padding:18px}
h1{font-size:27px;color:var(--navy);margin-bottom:6px}
h2{font-size:20px;color:var(--navy);margin:20px 0 10px}
.sub{color:var(--textS);font-size:16px;margin-bottom:8px;white-space:pre-line}
.card{background:var(--card);border-radius:16px;padding:18px;box-shadow:0 3px 10px rgba(0,0,0,.06);margin-bottom:14px}
.btn{display:block;width:100%;border:none;border-radius:14px;padding:16px;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--teal);color:#fff}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{background:transparent;color:var(--textS);font-weight:700}
.row{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.row .k{font-weight:800;color:var(--teal);min-width:64px;font-size:15px}
.row .v{color:var(--textP);font-size:16px}
.dot{width:14px;height:14px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:7px}
.food-item{display:flex;align-items:center;gap:14px;cursor:pointer}
.food-item .emoji{font-size:38px}
.food-item .name{font-size:19px;font-weight:700}
.food-item .cat{font-size:14px;color:var(--textS)}
.food-item .arrow{margin-left:auto;color:var(--textS);font-size:20px}
.seg{display:flex;background:#e9edf2;border-radius:12px;padding:4px;margin:14px 0}
.seg button{flex:1;border:none;background:transparent;padding:10px;border-radius:9px;font-size:15px;font-weight:700;color:var(--textS);cursor:pointer;font-family:inherit}
.seg button.on{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.1)}
.guide-block{margin-top:14px}
.guide-block .label{font-weight:800;color:var(--teal);font-size:15px;margin-bottom:3px}
.guide-block .text{font-size:16px;white-space:pre-line}
.divider{height:1px;background:#eceff3;margin:14px 0}
.choice{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1.5px solid #e6e9ee;border-radius:14px;padding:16px;margin-bottom:10px;font-size:18px;cursor:pointer}
.choice.on{border-color:var(--teal);background:rgba(61,190,155,.1)}
.choice .ck{color:var(--teal);font-weight:800}
.progress{height:8px;background:#e6e9ee;border-radius:5px;overflow:hidden;margin-bottom:14px}
.progress>span{display:block;height:100%;background:var(--teal);transition:width .25s}
.qmeta{color:var(--teal);font-weight:700;font-size:14px;margin-bottom:6px}
.qtext{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:18px}
.result-score{font-size:58px;font-weight:900;text-align:center}
.result-stage{font-size:24px;font-weight:800;color:var(--navy);text-align:center;margin-bottom:6px}
.bar{height:9px;background:#e6e9ee;border-radius:5px;overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%}
.dom-head{display:flex;justify-content:space-between;font-size:15px;font-weight:700}
.warn-text{color:var(--danger);font-size:13px;margin-top:5px}
.cam-frame{height:280px;border-radius:20px;background:rgba(22,35,63,.06);display:flex;align-items:center;justify-content:center;text-align:center;margin-bottom:16px;flex-direction:column;gap:12px;padding:20px}
.cam-frame .big{font-size:64px}
.cam-frame .conf{font-size:16px;font-weight:800}
.note{font-size:13px;color:var(--textS);margin-top:12px;white-space:pre-line}
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:520px;margin:0 auto;background:#fff;border-top:1px solid #e6e9ee;display:flex;padding:8px 0 14px}
.tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:22px;color:#aab2bd;cursor:pointer;font-family:inherit}
.tab span{font-size:11px;font-weight:700}
.tab.active{color:var(--teal)}
.spinner{width:46px;height:46px;border:5px solid #d7dde4;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}