:root {
  --bg: #f6f4ef;
  --card: #ffffff;
  --ink: #2b2b2b;
  --sub: #777;
  --accent: #2f6f5e;
  --accent-soft: #e3efeb;
  --line: #e2ded6;
  --warn-bg: #fff6e5;
  --warn-line: #e8c987;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.7;
}

#app {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px 16px 80px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 22px;
  margin-top: 16px;
}

h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 20px; margin: 0 0 12px; color: var(--accent); }
h3 { font-size: 16px; margin: 24px 0 8px; }
.sub { color: var(--sub); font-size: 13px; margin: 0 0 16px; }
.lead { color: var(--sub); font-size: 14px; }
.intro-line { font-size: 15px; }

.group-label {
  color: var(--accent);
  border-bottom: 2px solid var(--accent-soft);
  padding-bottom: 4px;
}

/* 設問 */
.question {
  border-top: 1px solid var(--line);
  padding: 18px 0 10px;
}
.q-head { display: flex; align-items: center; gap: 8px; }
.q-no {
  font-size: 12px;
  font-weight: bold;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 8px;
}
.q-unanswered {
  font-size: 11px;
  color: #b06a00;
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 6px;
  padding: 1px 6px;
}
.q-text { font-size: 15px; font-weight: 600; margin: 8px 0 2px; }
.q-note { font-size: 13px; color: var(--sub); margin: 0 0 8px; }
.q-hint { font-size: 13px; color: var(--sub); }

/* 選択肢 */
.choice-col, .likert-col {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.likert-col { flex-direction: column; align-items: flex-start; }

.choice-btn {
  font-size: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  cursor: pointer;
  color: var(--ink);
  font-family: inherit;
}
.choice-btn:hover { border-color: var(--accent); }
.choice-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 0-10スケール */
.scale-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.scale-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
}
.scale-btn:hover { border-color: var(--accent); }
.scale-btn.selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 自由記述 */
.text-input, .other-input {
  width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  resize: vertical;
}
.text-input:focus, .other-input:focus {
  outline: none;
  border-color: var(--accent);
}
.guided-choices { margin-bottom: 6px; }
.guided-label {
  color: var(--sub);
  font-size: 11px;
  margin: 8px 0 -2px;
}

/* ボタン */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.btn-row.nav { justify-content: space-between; }
.btn {
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  font-family: inherit;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn.primary:hover { opacity: 0.9; }
.btn.ghost { background: transparent; color: var(--sub); }

/* 進捗 */
.progress-header {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 10px 0 6px;
  z-index: 10;
}
.progress-text { font-size: 12px; color: var(--sub); margin-bottom: 4px; }
.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.home-btn {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 4px 6px;
}
.home-btn:hover { text-decoration: underline; }
.progress-bar {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  transition: width 0.3s;
}

/* 結果画面 */
.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.result-note {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}
.result-note p { margin: 4px 0; }
.output-area {
  width: 100%;
  height: 320px;
  font-size: 12px;
  font-family: "SF Mono", Menlo, monospace;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: #fafaf8;
}

/* 5段階マトリクス */
.matrix-wrap { overflow-x: auto; margin: 12px 0 4px; }
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.matrix-table th, .matrix-table td {
  border: 1px solid var(--line);
  padding: 6px 8px;
}
.matrix-table th {
  background: var(--accent-soft);
  color: var(--accent);
  text-align: center;
  font-size: 12px;
}
.matrix-q { min-width: 220px; line-height: 1.5; }
.matrix-td { text-align: center; width: 44px; }
.matrix-cell {
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  font-size: 11px;
  color: #fff;
  vertical-align: middle;
}
.matrix-cell:hover { border-color: var(--accent); }
.matrix-cell.selected {
  background: var(--accent);
  border-color: var(--accent);
}
.matrix-legend { font-size: 11px; color: var(--sub); margin: 6px 0 0; }

/* 詳細設問（任意）の折りたたみ */
.detail-toggle { margin-top: 18px; border-style: dashed; }
.detail-box {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 4px 16px 12px;
  margin-top: 10px;
  background: #fbfaf7;
}

/* クエストスコア */
.score-section { margin-bottom: 20px; }
.score-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 8px 0 14px;
}
.score-table th, .score-table td {
  border: 1px solid var(--line);
  padding: 6px 10px;
  text-align: left;
}
.score-table th { background: var(--accent-soft); color: var(--accent); }
.score-table .sub-row td { color: var(--sub); font-size: 12px; }
.primary-box {
  background: var(--accent-soft);
  border-radius: 10px;
  padding: 12px 16px;
}
.primary-title { font-weight: 700; color: var(--accent); margin: 0 0 4px; }
.score-note { font-size: 12px; color: #b06a00; }

/* 目的地確認・カルテ */
.destination-section, .karte-section {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 4px;
}
.destination-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 12px 0 20px;
}
.destination-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}
.destination-card:hover { border-color: var(--accent); }
.destination-card.selected {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}
.destination-label { color: var(--accent); font-size: 12px; font-weight: 700; }
.destination-text { font-size: 13px; line-height: 1.65; }
.confirmation-fields { display: grid; gap: 14px; }
.result-field { padding-top: 6px; }
.result-label { display: block; font-size: 14px; font-weight: 700; }
.scale-row.compact .scale-btn { width: 34px; height: 34px; font-size: 13px; }
.karte-hero {
  margin-top: 20px;
  padding: 20px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
}
.karte-hero h3 { color: #fff; margin: 4px 0 8px; font-size: 20px; }
.karte-hero p { margin: 4px 0; }
.eyebrow { font-size: 12px; font-weight: 700; opacity: .8; }
.karte-block {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 18px 0;
}
.karte-block h4 { margin: 0 0 6px; color: var(--accent); }
.karte-block p, .karte-block ul, .karte-block ol { margin-top: 4px; margin-bottom: 4px; }
.karte-main { font-weight: 600; }
.disclaimer {
  color: var(--sub);
  font-size: 11px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

@media (max-width: 480px) {
  .card { padding: 18px 14px; }
  .scale-btn { width: 36px; height: 36px; }
  .destination-grid { grid-template-columns: 1fr; }
}

/* ---------- AIカルテ自動生成 ---------- */
.ai-karte {
  border-top: 1px solid var(--line);
  margin-top: 24px;
  padding-top: 18px;
}
.ai-karte h3 { margin: 0 0 4px; color: var(--accent); }
.ai-chat {
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0;
}
.ai-msg {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg.user {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
  max-width: 85%;
}
.ai-msg.assistant {
  align-self: flex-start;
  background: #f2f4f2;
  border: 1px solid var(--line);
  max-width: 100%;
}
.ai-msg.system {
  align-self: center;
  color: var(--sub);
  font-size: 12px;
}
.ai-msg.loading { color: var(--sub); font-style: italic; }
.ai-error {
  border: 1px solid #d9822b;
  background: #fdf3e7;
  border-radius: 10px;
  padding: 10px 14px;
}
.ai-steps { padding-left: 22px; font-size: 14px; margin: 14px 0 8px; }
.ai-steps li { margin: 5px 0; }
.ai-input-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.ai-input {
  flex: 1;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  resize: vertical;
}