/* Vita Health 365 — /mypage/wellness/check-in
 *
 * Weekly check-in form, ported from /wellness/checkin/index.html into
 * the mypage shell. The form's visual identity (sliders, chips, BMI
 * preview, analysis panel) is intentionally preserved — only the
 * outer chrome (header, footer, disclaimer) is replaced by the mypage
 * sidebar + topbar.
 */

:root {
  --vdw-bg:        #FBF7EE;
  --vdw-card:      #FFFFFF;
  --vdw-border:    #E6DFCF;
  --vdw-ink:       #1B1F18;
  --vdw-quiet:     #80847A;
  --vdw-forest:    #2C3D2A;
  --vdw-terracotta:#C8674C;
}

.vdw-checkin-shell {
  max-width: 760px; margin: 0 auto;
  padding: 12px clamp(16px, 3vw, 28px) 40px;
  color: var(--vdw-ink);
}
.vdw-checkin-shell,
.vdw-checkin-shell * {
  font-family: 'Noto Sans', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

.vdw-back { color: var(--vdw-quiet); font-size: 13px; text-decoration: none; }
.vdw-back:hover { color: var(--vdw-forest); text-decoration: underline; }

.vdw-h1 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(26px, 4vw, 32px); line-height: 1.2;
  color: var(--vdw-ink); margin: 12px 0 8px;
}
.vdw-lede {
  color: var(--vdw-quiet); font-size: 14.5px; line-height: 1.55;
  margin: 0 0 24px; max-width: 560px;
}

.vdw-section {
  background: var(--vdw-card); border: 1px solid var(--vdw-border);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 14px;
}
.vdw-section h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 18px; margin: 0 0 6px; color: var(--vdw-ink);
}
.vdw-section .vdw-section-hint {
  color: var(--vdw-quiet); font-size: 12.5px; margin: 0 0 16px; line-height: 1.5;
}

.vdw-row { display: grid; gap: 16px; }
.vdw-row.cols-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .vdw-row.cols-2 { grid-template-columns: 1fr; } }

.vdw-field label {
  display: flex; justify-content: space-between;
  font-size: 13.5px; color: var(--vdw-ink);
  margin-bottom: 8px; font-weight: 600;
}
.vdw-field label .val {
  color: var(--vdw-forest);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 500;
}
.vdw-slider {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 6px; background: var(--vdw-border);
  border-radius: 999px; outline: none;
}
.vdw-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%; background: var(--vdw-forest); cursor: pointer;
  border: 3px solid white; box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.vdw-slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vdw-forest); cursor: pointer; border: 3px solid white;
}

.vdw-input {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--vdw-border);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  background: var(--vdw-bg); color: var(--vdw-ink);
  box-sizing: border-box;
}
.vdw-input:focus { outline: none; border-color: var(--vdw-forest); }

.vdw-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.vdw-chip {
  background: var(--vdw-card); border: 1.5px solid var(--vdw-border);
  border-radius: 999px; padding: 8px 16px; font-size: 13px;
  cursor: pointer; color: var(--vdw-ink); font-family: inherit;
  transition: background .12s ease, border-color .12s ease;
}
.vdw-chip:hover { background: #F4EFDF; }
.vdw-chip.selected {
  background: var(--vdw-forest); color: white; border-color: var(--vdw-forest);
}

.vdw-textarea {
  width: 100%; min-height: 80px; resize: vertical;
  padding: 10px 14px; border: 1px solid var(--vdw-border);
  border-radius: 10px; font-size: 14px; font-family: inherit;
  color: var(--vdw-ink); background: var(--vdw-bg);
  box-sizing: border-box;
}
.vdw-textarea:focus { outline: none; border-color: var(--vdw-forest); }

.vdw-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  padding: 12px 0 4px; margin-top: 22px;
}
.vdw-btn {
  background: var(--vdw-forest); color: white; border: none;
  padding: 11px 24px; border-radius: 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}
.vdw-btn:hover:not(:disabled) { background: #3F5236; }
.vdw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.vdw-btn-ghost {
  background: transparent; color: var(--vdw-ink);
  border: 1.5px solid var(--vdw-border);
}
.vdw-btn-ghost:hover:not(:disabled) { background: #F4EFDF; }

.vdw-error {
  background: #FBE9DC; color: #8c3a25;
  padding: 11px 16px; border-radius: 12px;
  font-size: 13.5px; margin-top: 14px;
  display: none; border: 1px solid #f0d2bf;
}
.vdw-error.show { display: block; }

/* Submitting / analysis result */
.vdw-submitting { text-align: center; padding: 56px 24px; display: none; }
.vdw-submitting.show { display: block; }
.vdw-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--vdw-border);
  border-top-color: var(--vdw-forest); border-radius: 50%;
  animation: vdw-spin 0.8s linear infinite; margin: 0 auto 16px;
}
@keyframes vdw-spin { to { transform: rotate(360deg); } }

.vdw-analysis { display: none; }
.vdw-analysis.show { display: block; }
.vdw-analysis h2 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: 22px; margin: 0 0 14px; color: var(--vdw-ink);
}
.vdw-analysis-summary {
  background: #EDF1E6; border: 1px solid #c7d6b8;
  border-radius: 12px; padding: 16px 18px; margin-bottom: 16px;
  font-size: 14.5px; line-height: 1.55; color: var(--vdw-ink);
}
.vdw-analysis-list {
  list-style: none; padding: 0; margin: 0 0 18px;
  display: grid; gap: 6px;
}
.vdw-analysis-list li {
  background: var(--vdw-card); border: 1px solid var(--vdw-border);
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; color: var(--vdw-ink); line-height: 1.5;
}
.vdw-analysis-list li::before { margin-right: 8px; font-weight: 700; }
.vdw-analysis-list.wins li::before { content: "✓"; color: var(--vdw-forest); }
.vdw-analysis-list.concerns li::before { content: "!"; color: var(--vdw-terracotta); }
.vdw-analysis h3 {
  font-family: 'Noto Sans', sans-serif; font-weight: 600;
  font-size: 12.5px; color: var(--vdw-quiet);
  letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 10px;
}
.vdw-analysis-focus {
  background: #FFFBF2; border: 1.5px solid #E8B88A; border-radius: 12px;
  padding: 14px 18px; font-size: 14px; line-height: 1.5;
  color: var(--vdw-ink); margin-bottom: 22px;
}
.vdw-analysis-focus strong {
  color: var(--vdw-terracotta);
  display: block; margin-bottom: 6px; font-weight: 700;
}

/* i18n — KO/EN pairs of spans inside `.vdw-i18n` switch on html[data-lang].
   Mirrors the pattern used by the history page so a member who toggles
   language from the mypage sidebar gets the right copy without a
   round-trip through the I18N map. */
.vdw-i18n [data-i18n]      { display: none; }
.vdw-i18n [data-i18n="en"] { display: inline; }
html[data-lang="ko"] .vdw-i18n [data-i18n="en"] { display: none; }
html[data-lang="ko"] .vdw-i18n [data-i18n="ko"] { display: inline; }