:root{
  --navy:#16233f; --teal:#2fa888; --teal-d:#268a70;
  --bg:#eef1f5; --card:#ffffff; --line:#d4dae2;
  --textP:#1f2733; --textS:#5b6776;
  --safe:#2f9e63; --warn:#e0a91f; --danger:#d23f3f;
  --s1:#e0a91f; --s2:#dd6f24; --s3:#d23f3f; --s4:#7e4ca8;
}
*{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:80px;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;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.brand{font-weight:800;font-size:18px;letter-spacing:-.3px}
.stage-badge{font-size:13px;font-weight:700;background:rgba(255,255,255,.18);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:22px 0 10px}
.sub{color:var(--textS);font-size:16px;margin-bottom:8px;white-space:pre-line}

/* 카드 — 배경과 확실히 구분되도록 테두리+그림자 */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(22,35,63,.07);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;box-shadow:0 3px 10px rgba(47,168,136,.3)}
.btn-primary:active{background:var(--teal-d)}
.btn-navy{background:var(--navy);color:#fff}
.btn-ghost{display:block;width:100%;background:transparent;border:none;color:var(--textS);font-weight:700;font-size:16px;cursor:pointer;font-family:inherit;padding:12px}
.row{display:flex;gap:10px;align-items:flex-start;margin-top:8px}
.row .k{font-weight:800;color:var(--teal-d);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}
.divider{height:1px;background:#e7ebf0;margin:14px 0}

.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:#aab2bd;font-size:24px}

/* 세그먼트 — 미선택도 보이게 */
.seg{display:flex;background:#dde3ea;border:1px solid var(--line);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,.15)}

.guide-block{margin-top:14px}
.guide-block .label{font-weight:800;color:var(--teal-d);font-size:15px;margin-bottom:3px}
.guide-block .text{font-size:16px;white-space:pre-line}

/* 선택지 — 미선택도 흰 배경+또렷한 테두리 */
.choice{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px;font-size:18px;cursor:pointer;box-shadow:0 1px 4px rgba(22,35,63,.05)}
.choice.on{border-color:var(--teal);background:#e9f6f1;box-shadow:0 2px 8px rgba(47,168,136,.18)}
.choice .ck{color:var(--teal-d);font-weight:800}

.progress{height:9px;background:#dde3ea;border-radius:5px;overflow:hidden;margin-bottom:14px}
.progress>span{display:block;height:100%;background:var(--teal);transition:width .25s}
.qmeta{color:var(--teal-d);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:#dde3ea;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:#fff;border:1px solid var(--line);box-shadow:0 2px 10px rgba(22,35,63,.07);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 var(--line);display:flex;padding:8px 0 14px;box-shadow:0 -2px 8px rgba(22,35,63,.06)}
.tab{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:22px;color:#9aa3af;cursor:pointer;font-family:inherit}
.tab span{font-size:11px;font-weight:700}
.tab.active{color:var(--teal-d)}

.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)}}

/* ===== 인적사항 입력 폼 ===== */
.form-head{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:var(--navy);margin-bottom:6px}
.form-head .ic{color:var(--teal-d)}
.field{margin-top:14px}
.field>label{display:block;font-size:14px;font-weight:700;color:var(--textS);margin-bottom:6px}
.field input,.field select{width:100%;border:1.5px solid #cdd4dd;border-radius:12px;padding:14px;font-size:17px;font-family:inherit;background:#fff;color:var(--textP)}
.field input::placeholder{color:#aab2bd}
.field input:focus,.field select:focus{outline:2px solid rgba(47,168,136,.25);outline-offset:0;border-color:var(--teal)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dob{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.dob input{text-align:center}
.notice{background:#fdf3da;border:1px solid #ecd596;border-left:5px solid var(--s2);border-radius:14px;padding:16px;margin:18px 0;box-shadow:0 2px 8px rgba(221,111,36,.08)}
.notice .badge{display:inline-block;background:var(--s2);color:#fff;font-size:13px;font-weight:800;padding:4px 12px;border-radius:10px;margin-bottom:8px}
.notice .lead{font-size:16px;font-weight:700;color:var(--textP);line-height:1.55}
.notice .desc{font-size:14px;color:#6b5a32;margin-top:8px;line-height:1.55}
.notice .warn{font-size:13px;color:#a9741a;margin-top:10px;padding-top:10px;border-top:1px dashed #e0c889;line-height:1.55}
.who-line{font-size:14px;color:var(--textS);margin-bottom:10px;font-weight:600}

/* 홈 복귀 버튼 스타일 */
.home-return-button {
  position: fixed; /* 화면에 고정 */
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background-color: rgba(255, 255, 255, 0.9); /* 반투명 흰색 */
  border: 1px solid #ddd;
  border-radius: 30px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 9999; /* 다른 요소보다 위에 표시 */
  transition: all 0.3s ease;
}

.home-return-button:hover {
  background-color: #000; /* 마우스 올리면 검은색으로 */
  color: #fff;
  transform: translateY(-2px);
}

.home-icon {
  font-size: 18px;
}

.home-text {
  font-size: 14px;
}