*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:#f1f5f9;
  padding:8px;
  color:#1e293b;
  line-height:1.6;
}
.container{
  width:100%;
  max-width:600px;
  margin:0 auto;
  background:#fff;
  border-radius:28px;
  box-shadow:0 20px 40px rgba(0,0,0,0.1);
  overflow:hidden;
}

.header{
  background:linear-gradient(135deg,#4f46e5,#7c3aed);
  color:#fff;
  text-align:center;
  padding:35px 20px;
}
.header h1{
  font-size:1.8rem;
  font-weight:900;
  margin-bottom:8px;
}
.header p{
  opacity:.9;
  font-size:.95rem;
}

.section{
  padding:20px;
  border-bottom:1px solid #f1f5f9;
}
.section-title{
  font-weight:800;
  font-size:1.05rem;
  color:#334155;
  margin-bottom:15px;
  display:block;
}

.btn-group{
  display:flex;
  gap:12px;
}
.toggle-btn{
  flex:1;
  padding:16px;
  border:2px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  font-weight:800;
  cursor:pointer;
  transition:all .2s;
  font-size:1rem;
}
.toggle-btn.active{
  background:#4f46e5;
  color:#fff;
  border-color:#4f46e5;
  box-shadow:0 4px 12px rgba(79,70,229,0.4);
}

.num-box{
  width:100%;
  padding:15px;
  font-size:2rem;
  text-align:center;
  border:2px solid #e2e8f0;
  border-radius:16px;
  font-weight:900;
}
select{
  width:100%;
  height:56px;
  padding:12px;
  font-size:1rem;
  border:2px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  font-weight:700;
}

.pain-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px;
}
.pain-item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:2px solid #f1f5f9;
  border-radius:12px;
  cursor:pointer;
  background:#f8fafc;
  transition:.2s;
  font-weight:500;
  position:relative;
}
.pain-item input{
  position:absolute;
  opacity:0;
}
.pain-item.checked{
  background:#eef6ff;
  border-color:#4f46e5;
  color:#4f46e5;
  font-weight:700;
}

.range-row{margin-top:10px}
.range-label{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  color:#64748b;
  margin-bottom:4px;
}
.range-row input[type=range]{width:100%}

.analyze-btn{
  width:calc(100% - 40px);
  margin:25px 20px;
  padding:18px;
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff;
  border:none;
  border-radius:20px;
  font-size:1.15rem;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(16,185,129,0.3);
}

#resultSection{
  padding:20px 20px 120px;
  background:#fff;
}
.res-card{
  margin:15px 0 20px;
  padding:25px;
  background:#f8fafc;
  border-radius:20px;
  border-left:5px solid #4f46e5;
}
.card-title{
  margin:0 0 20px;
  font-size:1.15rem;
  font-weight:900;
  color:#1e293b;
  display:flex;
  align-items:center;
  gap:8px;
}
.mode-badge{
  font-size:0.8rem;
}

.stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin:20px 0;
}
.stat-box{
  text-align:center;
  background:#fff;
  padding:20px;
  border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.05);
}
.stat-val{
  font-size:1.5rem;
  font-weight:900;
  color:#ef4444;
  margin-bottom:4px;
  display:block;
}
.stat-lab{
  font-size:.8rem;
  color:#64748b;
  font-weight:600;
}

.status-summary{
  font-size:.95rem;
  color:#475569;
  font-weight:600;
  margin-top:10px;
  line-height:1.6;
}

.info-card{
  margin:15px 0;
  padding:25px;
  background:#fff;
  border-radius:20px;
  border:1px solid #e2e8f0;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
}
.pro-item{
  display:flex;
  gap:15px;
  padding:18px 0;
  border-bottom:1px solid #f1f5f9;
  align-items:flex-start;
}
.pro-time{
  min-width:90px;
  background:#eef2ff;
  color:#4f46e5;
  font-size:.8rem;
  font-weight:800;
  padding:8px;
  border-radius:12px;
  text-align:center;
}
.pro-content{
  font-size:.95rem;
  font-weight:600;
  color:#334155;
  line-height:1.6;
  flex:1;
}

.nutrition-content{
  font-size:.95rem;
  font-weight:600;
  color:#334155;
  line-height:1.65;
  white-space:pre-wrap;
}

.summary-list{
  margin-bottom:12px;
  font-size:0.9rem;
  color:#0f172a;
  font-weight:600;
  line-height:1.5;
  padding-left:16px;
}
.summary-list li{list-style:disc}

.note-text{
  margin-top:15px;
  font-size:0.78rem;
  color:#94a3b8;
  line-height:1.5;
}

.mini-trend,
.week-forecast{
  font-size:0.82rem;
  color:#475569;
  line-height:1.6;
}

#historyList{max-height:220px;overflow-y:auto}
.history-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #e5e7eb;
  font-size:.9rem;
  font-weight:600;
  cursor:pointer;
}
.history-row:hover{background:#f8fafc}
.history-meta{
  font-size:.8rem;
  color:#94a3b8;
  margin-top:2px;
}
.history-empty{
  text-align:center;
  color:#94a3b8;
  font-size:.95rem;
  padding:30px;
  font-style:italic;
}

.share-btn{
  width:calc(100% - 40px);
  margin:20px auto;
  display:block;
  padding:16px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8);
  color:#fff;
  border:none;
  border-radius:16px;
  font-weight:800;
}
.del-btn{
  width:100%;
  margin-top:15px;
  padding:12px;
  border:none;
  border-radius:12px;
  background:#ef4444;
  color:#fff;
  font-weight:700;
}

/* 긴 문장 줄바꿈 보정 */
#statusSummary,
#recoveryImmediate,
#recovery1Hour,
#recoveryEvening,
#recoveryBedtime,
#nutritionStrategy{
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* =========================
   모바일 최적화
   ========================= */
@media (max-width:480px){
  body{
    padding:6px;
  }
  .container{
    max-width:480px;
    border-radius:20px;
  }
  .header{
    padding:24px 16px;
  }
  .header h1{
    font-size:1.35rem;
  }
  .header p{
    font-size:0.8rem;
  }
  .section{
    padding:14px 14px;
  }
  .section-title{
    font-size:0.9rem;
    margin-bottom:10px;
  }
  .num-box{
    font-size:1.6rem;
    padding:12px;
  }
  .toggle-btn{
    padding:12px;
    font-size:0.9rem;
  }
  .pain-grid{
    gap:8px;
  }
  .pain-item{
    padding:10px;
    font-size:0.8rem;
  }
  .analyze-btn{
    width:calc(100% - 28px);
    margin:18px 14px;
    padding:14px;
    font-size:1rem;
  }
  .res-card{
    padding:18px 14px;
  }
  .card-title{
    font-size:1rem;
  }
  .stat-grid{
    gap:8px;
    margin:14px 0;
  }
  .stat-box{
    padding:12px 8px;
  }
  .stat-val{
    font-size:1.25rem;
  }
  .stat-lab{
    font-size:0.7rem;
  }
  .info-card{
    padding:18px 14px;
  }
  .pro-time{
    min-width:76px;
    font-size:0.7rem;
    padding:6px;
  }
  .pro-content,
  .nutrition-content,
  .mini-trend,
  .week-forecast{
    font-size:0.82rem;
  }
  .history-row{
    font-size:0.82rem;
  }
  .history-meta{
    font-size:0.7rem;
  }
  .share-btn{
    width:calc(100% - 28px);
    padding:13px;
    font-size:0.95rem;
  }
}