@media (max-width: 800px) {
  body { overflow-x: hidden; }
  .site-header { height: auto; min-height: 72px; gap: 8px; min-width: 0; max-width: 100%; overflow: visible; }
  .header-actions { position: absolute; right: 14px; top: 18px; margin-left: 0; flex-shrink: 0; min-width: 0; max-width: calc(100% - 150px); overflow: visible; }
  .header-actions .btn-user { padding: 8px 6px; font-size: 12px; max-width: 68px; line-height: 1.05; }
  .header-actions .btn-primary { padding: 10px 12px; font-size: 12px; }
  .header-actions #startBtn { display: none; }
  .menu-btn { display: block; flex: 0 0 auto; }
  .main-nav.is-open { display: flex; position: absolute; top: 68px; left: 14px; right: 14px; z-index: 5; padding: 14px; background: #fff; border-radius: 10px; box-shadow: 0 10px 30px #102a4320; flex-direction: column; gap: 12px; }
  .hero, .hero-copy, .hero-text { min-width: 0; max-width: 100%; }
  .hero-text { width: 100%; max-width: calc(100vw - 40px) !important; overflow-wrap: anywhere; }
  .hero-visual { width: 100%; min-height: 360px; overflow: hidden; }
  .visual-orbit.one { width: 360px; height: 360px; }
  .visual-orbit.two { width: 270px; height: 270px; }
  .insight-card { max-width: calc(100vw - 64px); }
  .floating-note { max-width: 170px; }
}
@media (max-width: 480px) {
  .site-header { padding-left: 14px; padding-right: 14px; }
  .brand { gap: 7px; font-size: 16px; }
  .brand-mark { width: 34px; height: 34px; }
  .hero-text { font-size: 16px; }
  .hero-visual { min-height: 330px; }
  .insight-card { width: 290px; }
}
.edit-draft { float: none; margin-top: 8px; color: #315e7c; }
.empty-state { color: #6b7d8f; }
.progress-value { width: 78%; }