.ycf-app {
  --ycf-ink: #31363f;
  --ycf-muted: #6b737c;
  --ycf-accent: #76abae;
  --ycf-accent-dark: #4f8f93;
  --ycf-accent-soft: #edf6f6;
  --ycf-bg: #f5f7f7;
  --ycf-card: #ffffff;
  --ycf-line: #d9e2e3;
  --ycf-shadow: 0 12px 32px rgba(49, 54, 63, 0.08);
  color: var(--ycf-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  margin: 32px auto;
  max-width: 820px;
}

.ycf-app *, .ycf-app *::before, .ycf-app *::after { box-sizing: border-box; }
.ycf-app button, .ycf-app input, .ycf-app textarea { font: inherit; }

.ycf-shell {
  background: linear-gradient(145deg, #f8fafa 0%, #eaf1f1 100%);
  border: 1px solid var(--ycf-line);
  border-radius: 18px;
  box-shadow: var(--ycf-shadow);
  overflow: hidden;
  padding: 36px;
}

.ycf-brand { margin: 0 auto 28px; text-align: center; }
.ycf-brand h2 { color: var(--ycf-ink); font-size: clamp(24px, 4vw, 34px); line-height: 1.35; margin: 8px 0 0; }
.ycf-eyebrow { color: var(--ycf-accent-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.18em; }
.ycf-eyebrow::before, .ycf-eyebrow::after { background: var(--ycf-accent); content: ""; display: inline-block; height: 1px; margin: 0 10px 4px; width: 26px; }

.ycf-app .ycf-intro > .ycf-intro-copy { font-size: 17px; margin: 0 auto 18px !important; margin-inline: auto !important; max-width: 580px; text-align: center !important; width: 100%; }
.ycf-privacy-pill { align-items: center; background: #fff; border: 1px solid var(--ycf-line); border-radius: 999px; display: flex; font-size: 13px; font-weight: 700; gap: 7px; justify-content: center; margin: 0 auto 24px; max-width: 340px; padding: 8px 14px; }
.ycf-message-card { background: #fff; border: 1px solid var(--ycf-line); border-left: 4px solid var(--ycf-accent); border-radius: 12px; margin: 24px 0; padding: 20px 22px; }
.ycf-message-card p { margin: 0 0 10px; }
.ycf-message-card p:last-child { margin-bottom: 0; }
.ycf-app .ycf-intro > .ycf-storage-note, .ycf-app .ycf-intro > .ycf-resume-note { color: var(--ycf-muted); font-size: 13px; margin: 14px auto !important; margin-inline: auto !important; max-width: 620px; text-align: center !important; width: 100%; }
.ycf-resume-note { color: var(--ycf-accent-dark); font-weight: 700; }
.ycf-intro-actions, .ycf-result-actions { align-items: stretch; display: flex; flex-direction: column; gap: 10px; margin: 28px auto 0; max-width: 440px; }

.ycf-button, .ycf-link-button {
  align-items: center;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 750;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  text-align: center;
  text-decoration: none !important;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ycf-button:hover, .ycf-link-button:hover { transform: translateY(-1px); }
.ycf-button:focus-visible, .ycf-link-button:focus-visible, .ycf-choice:focus-visible, .ycf-scale-button:focus-visible, .ycf-experience:focus-visible, .ycf-text-input:focus-visible, .ycf-other-input:focus-visible { outline: 3px solid rgba(118, 171, 174, 0.35); outline-offset: 2px; }
.ycf-button-primary, .ycf-button-copy { background: var(--ycf-ink); border: 1px solid var(--ycf-ink); color: #fff !important; }
.ycf-button-primary:hover, .ycf-button-copy:hover { background: #242931; }
.ycf-button-secondary { background: #fff; border: 1px solid var(--ycf-line); color: var(--ycf-ink) !important; }
.ycf-button-line { background: #fff; border: 2px solid #06c755; color: #087d3b !important; }
.ycf-button-line:hover { background: #f0fff6; }
.ycf-link-button { background: transparent; border: 0; color: var(--ycf-muted); font-size: 14px; min-height: 40px; text-decoration: underline !important; }

.ycf-progress-meta { color: var(--ycf-muted); display: flex; font-size: 12px; font-weight: 700; justify-content: space-between; letter-spacing: 0.04em; }
.ycf-progress { background: #dfe8e8; border-radius: 999px; height: 7px; margin: 8px 0 28px; overflow: hidden; }
.ycf-progress span { background: var(--ycf-accent); border-radius: inherit; display: block; height: 100%; transition: width 0.25s ease; }
.ycf-step-header { align-items: flex-start; display: flex; gap: 14px; margin: 0 0 22px; }
.ycf-step-number, .ycf-q-number { align-items: center; background: var(--ycf-ink); border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 12px; font-weight: 800; height: 34px; justify-content: center; line-height: 1; width: 34px; }
.ycf-step-header h3 { color: var(--ycf-ink); font-size: 24px; line-height: 1.4; margin: 0 0 4px; }
.ycf-step-header p { color: var(--ycf-muted); font-size: 14px; margin: 0; }
.ycf-soft-note, .ycf-result-note { background: var(--ycf-accent-soft); border-radius: 10px; color: #406c6e; font-size: 14px; margin: 0 0 20px; padding: 12px 15px; }

.ycf-questions { display: grid; gap: 18px; }
.ycf-question { background: #fff; border: 1px solid var(--ycf-line); border-radius: 14px; box-shadow: 0 4px 16px rgba(49, 54, 63, 0.035); padding: 22px; }
.ycf-question-title-row { align-items: flex-start; display: flex; gap: 10px; margin-bottom: 15px; }
.ycf-q-number { background: var(--ycf-accent-soft); border: 1px solid #cfe1e2; border-radius: 999px; color: var(--ycf-accent-dark); font-size: 11px; height: 28px; width: 38px; }
.ycf-question h4 { color: var(--ycf-ink); flex: 1; font-size: 17px; line-height: 1.55; margin: 0; }
.ycf-help { color: var(--ycf-muted); font-size: 13px; margin: -5px 0 15px 48px; }
.ycf-sub-label { color: var(--ycf-muted); font-size: 12px; font-weight: 700; margin: 16px 0 8px; }

.ycf-choice-grid { display: grid; gap: 9px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ycf-choice-grid-compact { margin-top: 10px; }
.ycf-choice { align-items: center; background: #fff; border: 1px solid var(--ycf-line); border-radius: 10px; color: var(--ycf-ink); cursor: pointer; display: flex; font-size: 14px; font-weight: 650; gap: 9px; line-height: 1.5; min-height: 50px; padding: 10px 12px; text-align: left; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; width: 100%; }
.ycf-choice:hover { border-color: var(--ycf-accent); }
.ycf-choice.is-selected { background: var(--ycf-accent-soft); border-color: var(--ycf-accent); box-shadow: 0 0 0 1px rgba(118, 171, 174, 0.15); }
.ycf-choice-mark { align-items: center; border: 1.5px solid #aeb9bc; border-radius: 50%; color: #fff; display: inline-flex; flex: 0 0 auto; font-size: 10px; height: 20px; justify-content: center; width: 20px; }
.ycf-choice.is-selected .ycf-choice-mark { background: var(--ycf-accent); border-color: var(--ycf-accent); }

.ycf-text-input, .ycf-other-input { background: #fff; border: 1px solid var(--ycf-line); border-radius: 9px; color: var(--ycf-ink); display: block; min-height: 46px; padding: 11px 12px; width: 100%; }
textarea.ycf-text-input { line-height: 1.65; resize: vertical; }
.ycf-other-label { color: var(--ycf-muted); display: block; font-size: 12px; font-weight: 700; margin-top: 12px; }
.ycf-other-input { margin-top: 5px; }

.ycf-matrix { display: grid; gap: 12px; }
.ycf-matrix-item { background: #fafcfc; border: 1px solid #e4ebec; border-radius: 11px; padding: 13px; }
.ycf-matrix-title { font-size: 15px; font-weight: 750; margin-bottom: 9px; }
.ycf-scale { display: grid; gap: 6px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ycf-scale-button { background: #fff; border: 1px solid var(--ycf-line); border-radius: 8px; color: var(--ycf-ink); cursor: pointer; font-size: 11px; font-weight: 750; line-height: 1.25; min-height: 48px; padding: 5px 3px; position: relative; }
.ycf-scale-button:hover { border-color: #aebfc1; }
.ycf-scale-check { display: block; font-size: 10px; height: 12px; line-height: 12px; }
.ycf-scale-ng.is-selected { background: #fae9eb; border-color: #c47c84; color: #83474e; }
.ycf-scale-weak.is-selected { background: #fff2e2; border-color: #d2a36c; color: #825c2e; }
.ycf-scale-unknown.is-selected { background: #eef1f3; border-color: #99a5ae; color: #58636b; }
.ycf-scale-interested.is-selected { background: #e9f5f5; border-color: #76abae; color: #3f7477; }
.ycf-scale-want.is-selected { background: #76abae; border-color: #5d999c; color: #fff; }
.ycf-experience { background: transparent; border: 0; color: var(--ycf-muted); cursor: pointer; font-size: 12px; margin-top: 8px; padding: 2px 0; }
.ycf-experience.is-selected { color: var(--ycf-accent-dark); font-weight: 750; }
.ycf-matrix-other-label { background: #fafcfc; border: 1px solid #e4ebec; border-radius: 11px; color: var(--ycf-ink); font-size: 14px; margin-top: 0; padding: 13px; }
.ycf-matrix-other-input { line-height: 1.55; min-height: 72px; resize: vertical; }

.ycf-ng-summary { background: #fff4f5; border: 1px solid #efd0d4; border-radius: 9px; color: #74444a; font-size: 13px; margin-bottom: 13px; padding: 12px 14px; }
.ycf-ng-summary ul { margin: 5px 0 0 18px; padding: 0; }
.ycf-nav { display: grid; gap: 10px; grid-template-columns: 0.75fr 1.5fr; margin-top: 26px; }

.ycf-result-hero { margin: 0 auto 24px; max-width: 600px; text-align: center; }
.ycf-result-kicker { color: var(--ycf-accent-dark); font-size: 11px; font-weight: 800; letter-spacing: 0.15em; }
.ycf-result-hero h3 { color: var(--ycf-ink); font-size: 25px; margin: 6px 0 4px; }
.ycf-result-hero p { color: var(--ycf-muted); font-size: 14px; margin: 0; }
.ycf-result-note { background: #fff4f5; color: #74444a; font-weight: 700; text-align: center; }
.ycf-result-sections { display: grid; gap: 14px; }
.ycf-result-section { background: #fff; border: 1px solid var(--ycf-line); border-radius: 13px; padding: 18px; }
.ycf-result-section > h4 { border-bottom: 2px solid var(--ycf-accent-soft); color: var(--ycf-ink); font-size: 18px; margin: 0 0 14px; padding-bottom: 8px; }
.ycf-result-question { border-bottom: 1px dashed var(--ycf-line); margin-bottom: 12px; padding-bottom: 12px; }
.ycf-result-question:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ycf-result-question h5 { color: var(--ycf-ink); font-size: 14px; line-height: 1.55; margin: 0 0 4px; }
.ycf-result-question p { color: var(--ycf-muted); font-size: 14px; margin: 0; white-space: pre-wrap; }
.ycf-result-question dl { margin: 7px 0 0; }
.ycf-result-question dl div { display: grid; font-size: 13px; gap: 8px; grid-template-columns: minmax(120px, 0.9fr) minmax(120px, 1.1fr); padding: 5px 0; }
.ycf-result-question dt { color: var(--ycf-muted); }
.ycf-result-question dd { font-weight: 700; margin: 0; }
.ycf-final-message { background: var(--ycf-accent-soft); border-left: 4px solid var(--ycf-accent); border-radius: 10px; font-size: 14px; margin-top: 20px; padding: 16px 18px; }
.ycf-final-message p { margin: 0 0 8px; }
.ycf-final-message p:last-child { margin-bottom: 0; }
.ycf-copy-status { color: var(--ycf-accent-dark); font-size: 13px; font-weight: 700; min-height: 24px; text-align: center; }
.ycf-noscript { background: #fff4f5; border: 1px solid #efd0d4; border-radius: 8px; padding: 15px; }
.ycf-print-sheet { display: none; }

@media (max-width: 640px) {
  .ycf-app { margin: 18px auto; width: 100%; }
  .ycf-shell { border-left: 0; border-radius: 0; border-right: 0; padding: 24px 16px; }
  .ycf-brand { margin-bottom: 22px; }
  .ycf-brand h2 { font-size: 24px; }
  .ycf-question { padding: 17px 14px; }
  .ycf-choice-grid { grid-template-columns: 1fr; }
  .ycf-question-title-row { gap: 8px; }
  .ycf-help { margin-left: 0; }
  .ycf-scale { grid-template-columns: repeat(6, 1fr); }
  .ycf-scale-button:nth-child(1), .ycf-scale-button:nth-child(2), .ycf-scale-button:nth-child(3) { grid-column: span 2; }
  .ycf-scale-button:nth-child(4), .ycf-scale-button:nth-child(5) { grid-column: span 3; }
  .ycf-scale-button { font-size: 12px; min-height: 46px; }
  .ycf-result-question dl div { grid-template-columns: 1fr; gap: 0; }
  .ycf-result-question dd { margin-top: 1px; }
}

@media (min-width: 641px) {
  .ycf-form-screen, .ycf-result, .ycf-intro { margin: 0 auto; max-width: 740px; }
}

@media print {
  @page { margin: 10mm 11mm; size: A4 portrait; }
  body * { visibility: hidden !important; }
  .ycf-app, .ycf-app *, .ycf-print-sheet, .ycf-print-sheet * { visibility: visible !important; }
  .ycf-app { color: #111; font-family: "Yu Gothic", "Noto Sans JP", sans-serif; font-size: 10.5pt; line-height: 1.35; margin: 0; max-width: none; position: static; }
  .ycf-shell { display: none !important; }
  .ycf-print-sheet { display: block !important; left: 0; position: absolute; top: 0; width: 100%; }
  .ycf-print-page { break-after: page; min-height: 270mm; padding: 0; position: relative; }
  .ycf-print-page:last-child { break-after: auto; }
  .ycf-print-page > header { align-items: center; border-bottom: 2px solid #31363f; display: flex; font-size: 12pt; justify-content: space-between; margin-bottom: 3mm; padding-bottom: 2mm; }
  .ycf-print-page > header span { font-size: 9pt; }
  .ycf-print-page > footer { bottom: 0; border-top: 1px solid #aaa; color: #555; font-size: 8.5pt; left: 0; padding-top: 2mm; position: absolute; right: 0; }
  .ycf-print-intro { background: #edf6f6; border: 1px solid #b8d1d2; margin: 0 0 3mm; padding: 2mm 3mm; }
  .ycf-print-step h2 { background: #edf6f6; border-left: 4px solid #76abae; font-size: 12pt; margin: 3mm 0 2mm; padding: 1.5mm 2mm; }
  .ycf-print-question { break-inside: avoid; margin: 0 0 2.5mm; }
  .ycf-print-question h3 { font-size: 9.5pt; margin: 0 0 1.2mm; }
  .ycf-print-question p { color: #555; font-size: 8.5pt; margin: 0 0 1mm; }
  .ycf-print-options { display: flex; flex-wrap: wrap; gap: 1mm 4mm; }
  .ycf-print-options span { display: inline-block; font-size: 8.8pt; }
  .ycf-print-line { border-bottom: 1px solid #777; font-size: 8.8pt; height: 7mm; margin-top: 1mm; }
  .ycf-print-writing { border: 1px solid #aaa; min-height: 18mm; padding: 1.5mm 2mm; white-space: pre-wrap; }
  .ycf-print-matrix-wrap { break-inside: auto; }
  .ycf-print-matrix { border-collapse: collapse; font-size: 7.8pt; line-height: 1.15; width: 100%; }
  .ycf-print-matrix th, .ycf-print-matrix td { border: 1px solid #999; padding: 1.1mm 0.8mm; text-align: center; }
  .ycf-print-matrix th:first-child, .ycf-print-matrix td:first-child { text-align: left; width: 34%; }
  .ycf-print-matrix th { background: #f0f4f4; }
  .ycf-print-confirmation { border: 1px solid #888; break-inside: avoid; margin-top: 5mm; padding: 3mm 4mm; }
  .ycf-print-confirmation h2 { border-bottom: 1px solid #999; font-size: 11pt; margin: 0 0 2mm; padding-bottom: 1.5mm; }
  .ycf-print-confirmation p { font-size: 8.5pt; margin: 0 0 3mm; }
  .ycf-print-confirmation-row { align-items: flex-end; display: flex; gap: 4mm; margin-bottom: 4mm; }
  .ycf-print-confirmation-row span { border-bottom: 1px solid #555; min-width: 62mm; padding: 0 3mm 1mm; text-align: center; }
  .ycf-print-signature-label { align-items: baseline; display: flex; gap: 3mm; }
  .ycf-print-signature-label small { color: #555; font-size: 8pt; }
  .ycf-print-signature-line { border-bottom: 1px solid #555; height: 10mm; }
}