/* ============================================================
   menu.css — "오늘 뭐 먹지?" 전용 스타일
   ★ 이 도구의 모양만 바꾸고 싶을 때 이 파일을 수정하세요.
   ============================================================ */

.stage{
  background:linear-gradient(180deg,var(--card),#141631);
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px 22px 28px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

/* --- 상황 선택 --- */
.step-label{text-align:center;font-size:15px;font-weight:700;color:var(--muted);margin-bottom:18px}
.occasion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.occasion{
  padding:20px 8px 16px;border-radius:16px;font-size:30px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--text);
}
.occasion span{font-size:14px;font-weight:700}
.occasion:hover{border-color:rgba(242,201,76,.5);background:rgba(242,201,76,.06)}

/* --- 질문 --- */
.progress{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:18px}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-soft),var(--gold));transition:width .3s ease}
.q-count{text-align:center;font-size:12px;font-weight:800;color:var(--gold);letter-spacing:.12em;margin-bottom:8px}
.q-text{text-align:center;font-size:19px;font-weight:800;margin-bottom:22px;line-height:1.5}
.q-options{display:grid;gap:10px}
.q-opt{
  padding:16px;border-radius:14px;font-size:15px;font-weight:700;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  text-align:center;
}
.q-opt:hover{border-color:rgba(242,201,76,.5);background:rgba(242,201,76,.07)}
.q-skip{
  margin-top:4px;padding:10px;font-size:13px;color:var(--muted);
  background:none;border:none;
}
.q-skip:hover{color:var(--text)}

/* --- 결과 --- */
#stepResult{text-align:center}
.r-label{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.1em}
.r-emoji{font-size:72px;margin:14px 0 6px;animation:bounce .6s cubic-bezier(.18,1.4,.4,1)}
@keyframes bounce{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.r-name{font-size:30px;font-weight:800;color:var(--gold);margin-bottom:10px}
.r-why{font-size:14px;color:var(--muted);margin-bottom:20px;line-height:1.6}
.r-alts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.r-alt{
  padding:9px 14px;border-radius:99px;font-size:13px;font-weight:700;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--text);
}
.r-alt:hover{border-color:rgba(242,201,76,.5)}
.r-actions{display:flex;gap:10px}
.btn-gold{
  flex:1;padding:15px;font-size:15px;color:#241c00;border-radius:14px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold));
  box-shadow:0 12px 24px -10px rgba(242,201,76,.5);
}
.btn-ghost{
  flex:1;padding:15px;font-size:14px;font-weight:700;color:var(--text);border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover{background:rgba(255,255,255,.09)}

@media (max-width:420px){
  .occasion-grid{grid-template-columns:repeat(2,1fr)}
  .q-text{font-size:17px}
  .r-name{font-size:26px}
}

/* --- 맛집 찾기 --- */
.find-box{
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:16px;padding:16px 15px;margin-bottom:20px;
}
.find-label{font-size:13px;font-weight:700;color:var(--gold-soft);margin-bottom:11px}
.find-row{display:flex;gap:8px;margin-bottom:10px}
.find-input{
  flex:1;min-width:0;padding:12px 14px;border-radius:11px;font-size:14.5px;
  font-family:inherit;color:var(--text);
  background:rgba(255,255,255,.06);border:1px solid var(--line);
}
.find-input:focus{outline:none;border-color:rgba(242,201,76,.5)}
.find-gps{
  flex-shrink:0;padding:12px 13px;border-radius:11px;font-size:12.5px;font-weight:700;
  color:var(--gold);background:rgba(242,201,76,.1);border:1px solid rgba(242,201,76,.3);
}
.find-gps:hover{background:rgba(242,201,76,.18)}
.find-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.map-btn{
  display:block;text-align:center;text-decoration:none;
  padding:12px 6px;border-radius:11px;font-size:13.5px;font-weight:800;
  border:1px solid transparent;
}
.map-btn.naver{background:#03c75a;color:#fff}
.map-btn.kakao{background:#fee500;color:#3c1e1e}
.map-btn.google{background:rgba(255,255,255,.09);color:var(--text);border-color:var(--line)}
.map-btn:hover{filter:brightness(1.08)}

@media (max-width:420px){
  .find-row{flex-direction:column}
  .find-gps{width:100%}
}