/* 기본 */
:root { --stepbar-h: 48px; }
html, body { max-width: 100%; overflow-x: hidden; }
body { font-weight: normal; -webkit-tap-highlight-color: transparent; background: #f0f4f8; padding: 1rem; }
button { background: #fff; color: #007aff; padding: .45rem 1rem; border-radius: 18px; border: 1px solid #007aff; cursor: pointer; font-size: .9rem; font-weight: 500; }
button:hover { background: #e6f0ff; }
.ai-button { color: #5BADFF; background: #e6f4ff; border: 1px solid #b0d4f1; border-radius: 20px; padding: 6px 14px; cursor: pointer; font-size: .85rem; margin: 4px; }
.ai-button:hover { background: #d4eaff; }
.ai-msg { white-space: pre-line; }
/* 타이핑 */
.typing-wrap { display: flex; align-items: center; gap: 8px; }
.typing-bubble { padding: 10px 12px; border-radius: 12px; background: #f5f9ff; border: 1px solid #d8e8f5; }
.typing-dots { display: inline-block; width: 24px; text-align: center; }
.typing-dots span { display: inline-block; width: 4px; height: 4px; margin: 0 1px; border-radius: 50%; background: #7aa6c2; animation: blink 1s infinite both; }
.typing-dots span:nth-child(2) { animation-delay: .2s; }
.typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,80%,100%{opacity:.2} 40%{opacity:1} }
/* 고정 관련 */
#input-area { position: fixed; left: 0; right: 0; bottom: calc(var(--stepbar-h) + env(safe-area-inset-bottom,0px) + 8px); background: transparent; padding: 0; z-index: 96; color: #111; -webkit-text-fill-color: #111; }
/* 공통 패널 */
.kr-panel { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 24px; border: 1px solid #e8eef6; padding: 20px 20px 16px; box-shadow: 0 8px 24px rgba(24,39,75,.06), 0 2px 6px rgba(24,39,75,.06); }
.kr-panel h3 { font-size: 18px; font-weight: 700; color: #0b1b2b; text-align: center; margin: 4px 0 2px; }
.kr-panel p.sub { font-size: 13px; color: #8a97a8; text-align: center; margin: 0 0 14px; }
.kr-panel.inline { margin: 10px auto 6px; max-height: none;}
.kr-panel.inline.narrow { width: 90%; margin-left: auto; margin-right: auto; }
/* 성별 카드 관련 */
.kr-panel.gender-panel { padding: 16px 20px; }
.gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 6px; }
.gender-card { display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 18px; background: #fff; border: 1px solid #e9eff7; box-shadow: 0 6px 16px rgba(18,38,63,.06); padding: 14px 12px; cursor: pointer; transition: .15s ease; }
.gender-card:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(18,38,63,.08); }
.gender-card.active { outline: 2px solid #3b82f6; box-shadow: 0 10px 24px rgba(59,130,246,.18); }
.gender-card img { width: 88px; height: 88px; object-fit: contain; margin: 6px 0 8px; filter: drop-shadow(0 2px 6px rgba(16,24,40,.08)); }
.gender-card .label { font-size: 16px; font-weight: 700; color: #101828; }
/* 나이 휠 관련 */
.wheel { position: relative; height: 220px; margin: 8px auto 12px; overflow: hidden; border-radius: 18px; border: 1px solid #e9eff7; background: #fbfdff; }
.wheel-list { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; padding: 90px 0; }
.wheel-item { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 22px; color: #7a8797; user-select: none; }
.wheel .focus { pointer-events: none; position: absolute; left: 10px; right: 10px; top: calc(50% - 28px); height: 56px; border-radius: 16px; background: transparent; border: 1.5px solid #5ea2ff; box-shadow: inset 0 0 0 1px #4d92d2, 0 6px 18px rgba(46,115,255,.12); }
.wheel-item.active { color: #0b1b2b; font-weight: 700; font-size: 24px; }
/* 버튼 관련 */
.kr-chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 4px 0 10px; }
.kr-chip { border-radius: 20px; padding: 6px 12px; font-size: 13px; color: #263445; background: #fff; border: 1px solid #e7edf6; box-shadow: 0 2px 6px rgba(16,24,40,.05); cursor: pointer; }
.kr-grid-chips { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 10px 0 6px; }
@media (min-width:480px){ .kr-grid-chips { grid-template-columns: repeat(4,1fr); } }
.kr-chip-btn,
button.kr-chip-btn {
display: inline-block; width: 100%; text-align: center;
padding: 12px 14px; border-radius: 9999px;
background: #fff; border: 1px solid #e7edf6; color: #263445; font-weight: 600;
box-shadow: 0 2px 6px rgba(16,24,40,.05); appearance: none; -webkit-appearance: none;
}
.kr-chip-btn:hover { background: #f8fbff; border-color: #cfe3fb; }
.kr-chip-btn.selected {
background: linear-gradient(180deg,#e0f0ff 0%, #d9efff 100%);
border-color: #5ea2ff; box-shadow: inset 0 0 0 1px #cbe5ff, 0 6px 18px rgba(46,115,255,.12);
color: #0b1b2b;
}
.kr-chip-btn.ghost { background: #f2f4f7; border-color: #e1e6ef; color: #778196; }
.kr-chip-btn.ghost.selected { background: #5BADFF; border-color: #3b82f6; color: #3d4658; }
.kr-inline-actions { margin-top: 8px; }
/* 몸무게랑 나이 */
.stepper { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 10px 0 6px; }
.stepper .btn-round { width: 48px; height: 48px; border-radius: 9999px; border: 1px solid #e9eff7; background: #fff; box-shadow: 0 4px 10px rgba(18,38,63,.06); font-size: 24px; line-height: 48px; text-align: center; cursor: pointer; }
.stepper .display { min-width: 160px; text-align: center; font-weight: 700; font-size: 22px; color: #0f1f33; padding: 10px 18px; border-radius: 20px; border: 1.5px solid #5ea2ff; background: linear-gradient(180deg,#e0f0ff 0%,#d9efff 100%); box-shadow: inset 0 0 0 1px #cbe5ff, 0 6px 18px rgba(46,115,255,.12); }
/* 기본 */
.kr-primary { display: block; width: 100%; margin-top: 8px; background: #89919e; color: #fff; text-align: center; border: none; padding: 14px 16px; border-radius: 18px; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 8px 18px rgba(59,130,246,.22); }
/* 단계 step */
#kr-diet-steps { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom,0px); z-index: 95; pointer-events: none; }
#kr-diet-steps .steps-wrap {
--progress: 0%;
max-width: 860px; margin: 0 auto; padding: 10px 16px;
display: flex; justify-content: space-between; align-items: center;
position: relative; background: #fff; border-top: 1px solid #eef3f8;
}
#kr-diet-steps .track { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); height: 14px; border-radius: 9999px; background: #f1f5fb; pointer-events: none; box-shadow: inset 0 1px 2px rgba(10,20,40,.06); }
#kr-diet-steps .fill { width: var(--progress); height: 100%; border-radius: 9999px; background: linear-gradient(90deg,#92c5ff 0%, #5ba8ff 100%); transition: width .35s ease; }
#kr-diet-steps .dot { position: relative; z-index: 1; width: 16px; height: 16px; border-radius: 9999px; background: #dfe8f2; box-shadow: inset 0 0 0 2px #fff; transition: transform .2s, background-color .2s, opacity .2s; opacity: .9; }
#kr-diet-steps .dot.active { background: #3b82f6; transform: scale(1.05); }
#kr-diet-steps .dot.done { background: #60a5fa; }
/* 요약 관련 */
.meal-tabs { max-width: 860px; margin: 12px auto 10px; background: #fff; border: 1px solid #e8eef6; border-radius: 22px; padding: 8px; display: flex; gap: 8px; box-shadow: 0 8px 22px rgba(18,38,63,.08); }
.meal-tab { flex: 1; border: none; background: #f3f7fc; border-radius: 9999px; padding: 12px 0; font-weight: 900; color: #1e293b; cursor: pointer; }
.meal-tab.active { background: linear-gradient(180deg,#d3ebff 0%,#c6e5ff 100%); border: 1.5px solid #5ea2ff; box-shadow: inset 0 0 0 1px #cbe5ff; }
.meal-panel { max-width: 860px; margin: 8px auto 16px; background: #fff; border: 1px solid #e8eef6; border-radius: 24px; padding: 18px 20px; min-height: 120px; box-shadow: 0 12px 32px rgba(20,35,60,.08); }
.meal-panel h4 { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: #0b1b2b; }
/* 식단 관련 */
.meal-box { width: calc(100% - 20px); margin: 12px auto 16px; background: #fff; border: 1px solid #e8eef6; border-radius: 24px; box-shadow: 0 12px 32px rgba(20,35,60,.08); overflow: hidden; }
.meal-box .meal-tabs { display: flex; gap: 8px; padding: 10px; background: #fff; border: none; border-radius: 0; box-shadow: none; }
.meal-box .meal-tab { flex: 1; border: none; background: #f3f7fc; border-radius: 9999px; padding: 12px 0; font-weight: 900; color: #1e293b; cursor: pointer; }
.meal-box .meal-tab.active { background: linear-gradient(180deg,#d3ebff 0%,#c6e5ff 100%); border: 1.5px solid #5ea2ff; box-shadow: inset 0 0 0 1px #cbe5ff; }
.meal-box .meal-panel { margin: 0; border: 0; border-top: 1px solid #eef3f8; border-radius: 0; padding: 18px 20px; min-height: 120px; }
.meal-box .meal-panel h4 { margin: 0 0 10px; font-size: 18px; font-weight: 900; color: #0b1b2b; }
/*모바일 관련*/
@media (max-width:480px){
.kr-panel.inline.narrow { width: 94%; }
.stepper { gap: 10px; }
.stepper .btn-round { width: 44px; height: 44px; line-height: 44px; font-size: 22px; }
.stepper .display { min-width: 140px; font-size: 20px; padding: 8px 16px; }
/* Meal box only */
.meal-box { width: calc(100% - 20px); }
.meal-box .meal-tab { padding: 10px 0; }
.meal-box .meal-panel { padding: 14px; }
}
@media (max-width:360px){
/* (health/review 관련 규칙 제거됨) */
}
@keyframes fade-in { from {opacity:0; transform:scale(0.95);} to {opacity:1; transform:scale(1);} }
.animate-fade-in { animation: fade-in 0.3s ease-out; }
.meal-body .meal-line + .meal-line { margin-top: 8px; }
.meal-body .meal-desc { margin-top: 16px; color: #666; font-size: .92em; }
@media (min-width: 640px) {
.meal-body .meal-desc { margin-top: 16px !important; }
}
.meal-box{background:#ffffff;border:1.5px solid #dbe7f5;border-radius:24px;padding:10px;box-shadow:0 0 0 3px rgba(56,141,255,.10) inset,0 12px 24px rgba(15,35,64,.08);}
/* 상단 세그먼트 탭 컨테이너 */
.meal-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#ffffff;border:1.5px solid #dbe7f5;border-radius:18px;padding:6px;box-shadow: inset 0 1px 0 #fff;}
/* 각 탭 버튼 */
.meal-tab{appearance:none;border:0;background:transparent;color:#0f1f33; font-weight:900;letter-spacing:-.2px;padding:10px 0;border-radius:9999px;transition: all .18s ease;}
.meal-tab:hover{ background:#f7fafc; }
.meal-tab.active{color:#071a2e;background: radial-gradient(100% 120% at 50% 0%, #c4f1ff 0%, #bfe4ff 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),0 2px 6px rgba(2,6,23,.08);}
/* 내용 카드 */
.meal-panel{margin-top:12px;background:#ffffff;border:1.5px solid #dbe7f5;border-radius:22px;padding:18px 20px;box-shadow: 0 10px 22px rgba(15,35,64,.07), inset 0 1px 0 #fff;}
/* 제목은 탭에 있으니 숨김 */
.meal-panel > h4{ display:none; }
/* 식단 라인 */
.meal-body{ font-size:18px;line-height:1.6;color:#0b1b2b;font-weight:700;}
.meal-body .meal-line + .meal-line{ margin-top:14px; }
/* (선택) 하단 힌트/칼로리 바 형태 */
.meal-hint{margin-top:14px;display:flex; align-items:center; justify-content:space-between;background:#f4f6f9;border:1px solid #e8edf5;border-radius:16px;padding:12px 14px;color:#6b7280; /* gray-500 */font-weight:800;}
.meal-hint .kcal{ color:#0f1f33; }
/* 클릭 가능한 알레르기 */
.kr-pill{
-webkit-appearance:none; appearance:none;
background:transparent; border:0; box-shadow:none;
display:block;
margin:-7px -14px;
padding:7px 14px;
border-radius:9999px;
font:inherit; color:inherit; cursor:pointer;
outline:none;
}
.kr-pill.kr-pill-action:hover{ background:rgba(0,0,0,.04); }
/* 키보드 접근성(포커스) */
.kr-pill:focus-visible{
outline:2px solid #93c5fd;
outline-offset:2px;
border-radius:9999px;
}
/* 모달 */
.kr-modal.hidden{display:none;}
.kr-modal{position:fixed;inset:0;z-index:1000;}
.kr-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.kr-modal-card{position:relative;margin:auto;top:10vh;max-width:480px;width:calc(100% - 2rem);
background:#fff;border-radius:16px;border:1px solid #e6edf6;box-shadow:0 24px 48px rgba(15,35,64,.24);
padding:16px;outline:none;}
.kr-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.kr-modal-title{font-weight:900;color:#0b1b2b;}
.kr-modal-close{appearance:none;background:#f5f7fb;border:1px solid #e8edf5;border-radius:10px;
width:32px;height:32px;line-height:30px;text-align:center;font-size:18px;cursor:pointer;padding-left:10px;}
.kr-modal-body{padding:8px 2px 4px;max-height:50vh;overflow:auto;}
.kr-modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;}
.kr-chip-list{display:flex;flex-wrap:wrap;gap:8px;}
.kr-chip{background:#f6f8fb;border:1px solid #e8edf5;border-radius:9999px;padding:8px 12px;
font-weight:800;color:#263445;}
#app-scroll{
overflow-y: auto;
overscroll-behavior: contain;
scroll-behavior: smooth; /* 자연스러운 이동 */
}
/* 하단 고정 UI 높이만큼 여백(가려짐 방지) */
#chat-container{ padding-bottom: 88px; }
/* (앵커는 유지해도 되고 생략 가능) */
#chat-container > *{ overflow-anchor:none; }
#scroll-anchor{ overflow-anchor:auto; height:1px; }