* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: Arial, Tahoma, sans-serif;
    background: #f3f6fa;
    color: #243241;
    margin: 0;
    padding: 0;
    line-height: 1.7;
}
.main-nav {
    position: sticky;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #ffffff;
    border-bottom: 1px solid #d9e4f0;
    padding: 10px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.main-nav a {
    color: #1464b4;
    text-decoration: none;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 8px;
}
.main-nav a:hover { background: #eef6ff; }
.container {
    width: min(980px, calc(100% - 32px));
    margin: 24px auto 48px;
}
.container.wide { width: min(1240px, calc(100% - 32px)); }
.hero, .form-card, .result-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 8px 24px rgba(15,23,42,.06);
    border: 1px solid #e2e8f0;
}
.compact-hero h1, .form-card h2, .result-card h2 {
    color: #1f6fc6;
    margin-top: 0;
}
.hero p { margin-bottom: 0; }
.question {
    background: #f9fbfd;
    border: 1px solid #dce6f2;
    padding: 16px;
    border-radius: 12px;
    margin: 14px 0;
}
.question label:first-child {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
}
.question-code { color: #64748b; font-weight: normal; }
.required { color: red; font-weight: bold; }
.options { display: flex; gap: 12px; flex-wrap: wrap; }
.option {
    background: #fff;
    border: 1px solid #cad8e8;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
}
.option input { margin-right: 6px; }
button, .link-btn {
    display: inline-block;
    background: #1976d2;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}
button { width: 100%; margin-top: 18px; }
button:hover, .link-btn:hover { background: #0f5ea8; }
.priority-table, .detail-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    margin-top: 14px;
}
.priority-table th, .priority-table td,
.detail-table th, .detail-table td {
    border: 1px solid #cfd8e3;
    padding: 12px;
    vertical-align: top;
}
.priority-table th, .detail-table th {
    background: #2d78bd;
    color: #ffffff;
    text-align: center;
}
.priority-table td { text-align: center; }
.simple-priority-table td:nth-child(2) { text-align: left; font-weight: bold; }
.priority-table tr:nth-child(even), .detail-table tr:nth-child(even) { background: #f6f9fc; }
.factor-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}
.factor-link-list a {
    display: inline-block;
    padding: 10px 14px;
    background: #eef6ff;
    border: 1px solid #b8d8ff;
    border-radius: 999px;
    color: #0f5ea8;
    text-decoration: none;
    font-weight: bold;
}
.factor-link-list a:hover { background: #ddecff; }
.factor-title-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 12px;
    margin-bottom: 16px;
}
.factor-title-row h2 { margin: 0; }
.factor-title-row h2 span { color: #64748b; font-size: 18px; }
.back-top {
    color: #1464b4;
    text-decoration: none;
    font-weight: bold;
}
.rule-id { font-size: 18px; font-weight: bold; margin: 8px 0 10px; }
.chart-wrap {
    background: #ffffff;
    border: 1px solid #dfe8f2;
    border-radius: 12px;
    padding: 18px;
    margin: 16px 0;
}
.clean-chart { min-height: 320px; }
.current-status-line {
    font-size: 18px;
    margin: 16px 0 22px;
}
.status { font-weight: bold; }
.status.good { color: green; }
.status.medium { color: #d38600; }
.status.bad { color: red; }
details.easy-details {
    margin-top: 16px;
    background: #ffffff;
    border: 1px solid #dae3ee;
    border-radius: 12px;
    overflow: hidden;
}
details.easy-details > summary {
    cursor: pointer;
    font-weight: bold;
    color: #123a63;
    font-size: 18px;
    padding: 14px 18px;
    background: #f1f5f9;
}
details.easy-details > *:not(summary) { margin-left: 18px; margin-right: 18px; }
.summary-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 18px;
}
.summary-box {
    background: #f7fbff;
    border: 1px solid #cfe0f3;
    border-radius: 12px;
    padding: 16px;
}
.summary-box h3 { margin-top: 0; color: #1f5f9f; }
.good-summary { border-left: 5px solid #16a34a; }
.need-summary { border-left: 5px solid #dc2626; }
.rule-box, .recommendation-box {
    background: #f7fbff;
    border: 1px solid #cfe0f3;
    border-radius: 12px;
    padding: 16px;
    margin: 16px 0;
}
.rule-box code {
    display: block;
    background: #fff;
    border: 1px solid #d7e3ef;
    padding: 12px;
    border-radius: 10px;
    color: #1a3854;
    white-space: normal;
}
.suggestion-details {
    margin-top: 20px;
    padding: 18px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: #f9f9f9;
}
.suggestion-details h3 { color: #1f6fc6; margin-top: 0; }
.suggestion-item {
    background: #eeeeee;
    border-radius: 12px;
    padding: 18px;
    margin: 14px 0;
    border: 1px solid #d3d3d3;
}
.suggestion-item.need-row { background: #fff7f5; border-color: #f1b8ab; }
.legacy-block, .human-advice {
    background: #ffffff;
    border: 1px solid #b9d8ff;
    border-radius: 10px;
    padding: 14px;
    margin-top: 12px;
}
.human-advice { border-left: 5px solid #1976d2; }
.perf-level { font-weight: bold; }
.level-0, .level-1 { color: red; }
.level-2 { color: green; }
.level-3 { color: #1168bd; }
.level-4 { color: purple; }
.small td, .small th { font-size: 14px; }
.note { color: #5b6878; }
code { background: #f1f5f9; padding: 2px 5px; border-radius: 4px; }
@media (max-width: 800px) {
    .container, .container.wide { width: min(100% - 20px, 100%); }
    .summary-columns { grid-template-columns: 1fr; }
    .factor-title-row { flex-direction: column; align-items: flex-start; }
    .priority-table, .detail-table { font-size: 14px; }
    .hero, .form-card, .result-card { padding: 16px; }
    .main-nav { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
}

/* v8 refinements */
.topbar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border-bottom: 1px solid #d9e4f0;
    padding: 10px 18px;
    box-shadow: 0 2px 10px rgba(15,23,42,.06);
}
.menu-toggle, .topbar-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid #c7ddf5;
    background: #eef6ff;
    color: #125da3;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    width: auto;
    margin: 0;
    font-size: 15px;
}
.menu-toggle:hover, .topbar-link:hover { background: #ddecff; }
.side-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(300px, 85vw);
    height: 100vh;
    background: #ffffff;
    z-index: 1100;
    padding: 26px 22px;
    box-shadow: 12px 0 30px rgba(15,23,42,.18);
    transition: left .22s ease;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.side-menu.open { left: 0; }
.side-menu a {
    color: #1976d2;
    font-size: 22px;
    font-weight: 700;
    text-decoration: none;
    padding: 10px 8px;
    border-radius: 10px;
}
.side-menu a:hover { background: #eef6ff; }
.menu-close {
    align-self: flex-end;
    background: transparent;
    color: #1976d2;
    border: 0;
    width: auto;
    margin: 0 0 6px;
    font-size: 36px;
    line-height: 1;
    padding: 0 8px;
}
.menu-close:hover { background: transparent; color: #0f5ea8; }
.menu-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15,23,42,.35);
}
.menu-backdrop.show { display: block; }
.info-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.35);
    z-index: 1200;
    align-items: center;
    justify-content: center;
    padding: 18px;
}
.info-modal.show { display: flex; }
.info-modal-card {
    width: min(680px, 100%);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(15,23,42,.22);
    padding: 26px;
}
.info-modal-card h2 { color: #1f6fc6; margin-top: 0; }
.modal-close { float: right; }
.suggestion-accordion { margin-top: 18px; }
.suggestion-accordion > summary {
    background: #eef6ff !important;
    color: #125da3 !important;
}
.compact-suggestions {
    margin: 18px !important;
    background: #ffffff;
    border: 0;
    padding: 0;
}
.suggestion-heading {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.suggestion-heading h4 { margin: 0; }
.level-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    font-weight: 700;
    background: #eaf2ff;
    color: #125da3;
    border: 1px solid #c7ddf5;
}
.level-badge.level-0 { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.level-badge.level-1 { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.level-badge.level-2 { background: #ecfdf5; color: #047857; border-color: #bbf7d0; }
.level-badge.level-3 { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.level-badge.level-4 { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; }
.factor-link-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.factor-link-list a {
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
@media (max-width: 800px) {
    .topbar { overflow-x: auto; }
    .topbar-link { white-space: nowrap; }
    .suggestion-heading { flex-direction: column; }
}


/* v9: legend modal and five-level summary */
.legend-list{display:grid;gap:14px;margin:10px 0 24px;font-size:1.05rem;line-height:1.6}
.legend-list div{display:flex;align-items:center;gap:12px}
.legend-color{width:24px;height:24px;border-radius:5px;display:inline-block;flex:0 0 auto}
.legend-color.excellent{background:rgba(128,0,128,.30);border:2px solid rgba(128,0,128,1)}
.legend-color.very-good{background:rgba(0,0,255,.30);border:2px solid rgba(0,0,255,1)}
.legend-color.good{background:rgba(0,128,0,.30);border:2px solid rgba(0,128,0,1)}
.legend-color.fair{background:rgba(255,193,7,.35);border:2px solid rgba(255,193,7,1)}
.legend-color.improve{background:rgba(255,0,0,.30);border:2px solid rgba(255,0,0,1)}
.performance-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px}
.performance-summary-card{background:#fff;border:1px solid #d7e3ef;border-radius:14px;padding:16px 18px;box-shadow:0 4px 12px rgba(15,23,42,.04)}
.performance-summary-card h3{margin:0 0 10px;color:#123a63;font-size:1.05rem}
.performance-summary-card ul{margin:0;padding-left:22px;line-height:1.65}
.performance-summary-card.excellent{border-left:6px solid rgba(128,0,128,1)}
.performance-summary-card.very-good{border-left:6px solid rgba(0,0,255,1)}
.performance-summary-card.good{border-left:6px solid rgba(0,128,0,1)}
.performance-summary-card.fair{border-left:6px solid rgba(255,193,7,1)}
.performance-summary-card.improve{border-left:6px solid rgba(255,0,0,1)}
.info-modal-card #infoText p{line-height:1.65;margin:8px 0}

/* v10: clearer correlation display and cleaner first page */
.spearman-intro{
    margin: 0 0 14px;
    color:#334155;
    line-height:1.7;
}
.spearman-table th:nth-child(2),
.spearman-table td:nth-child(2){
    width:260px;
    text-align:center;
}
.spearman-summary{
    margin-top:14px;
    padding:14px 16px;
    border-radius:12px;
    background:#eef6ff;
    border:1px solid #c7ddf5;
    color:#123a63;
    line-height:1.75;
}
.compact-hero h1{margin-bottom:0;}


/* v13: user-friendly layout refinements */
:root{
    --primary:#1f6fc6;
    --primary-dark:#0f4f93;
    --primary-soft:#eef6ff;
    --border:#dbe7f3;
    --text:#243241;
    --muted:#64748b;
    --card:#ffffff;
}
body{background:linear-gradient(180deg,#f5f9ff 0%,#eef3f8 100%);color:var(--text)}
.app-topbar{justify-content:space-between;align-items:center;padding:12px 24px;gap:14px}
.topbar-brand{text-decoration:none;display:inline-flex;align-items:center;font-weight:900;color:var(--primary-dark);letter-spacing:.04em;background:var(--primary-soft);border:1px solid #c7ddf5;border-radius:999px;padding:8px 14px}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.menu-toggle,.topbar-link{box-shadow:0 2px 8px rgba(15,23,42,.04)}
.side-menu{gap:10px;padding-top:20px}
.side-menu-title{font-weight:900;font-size:20px;color:#123a63;margin:0 0 10px;border-bottom:1px solid #e2e8f0;padding-bottom:12px}
.side-menu a{font-size:17px;border:1px solid transparent;background:#f8fbff;padding:12px 14px}
.side-menu a:hover{border-color:#c7ddf5}
.hero{position:relative;overflow:hidden}
.home-hero,.result-hero{display:flex;justify-content:space-between;align-items:center;gap:22px;background:linear-gradient(135deg,#ffffff 0%,#eef6ff 100%)}
.home-hero:after,.result-hero:after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;background:rgba(31,111,198,.08);border-radius:50%}
.eyebrow{margin:0 0 6px;color:var(--primary);font-weight:900;letter-spacing:.03em;text-transform:uppercase;font-size:13px}
.hero-subtitle{color:#475569;margin:8px 0 0;max-width:720px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.section-heading h2{margin:0;color:#123a63}
.question-count{background:#eef6ff;border:1px solid #c7ddf5;color:#125da3;border-radius:999px;padding:7px 12px;font-weight:800;white-space:nowrap}
.form-card.friendly-form{padding:28px}
.question{transition:box-shadow .18s ease,transform .18s ease;background:#fff;border-color:#e0e9f4}
.question:hover{box-shadow:0 8px 18px rgba(15,23,42,.06);transform:translateY(-1px)}
.question label:first-child{font-size:16px;color:#1e293b}
.options{gap:10px}
.option{min-width:120px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:.18s ease;border-color:#d4e0ed}
.option:hover{background:#eef6ff;border-color:#9cc5f0}
.option:has(input:checked){background:#1f6fc6;color:#fff;border-color:#1f6fc6;box-shadow:0 6px 14px rgba(31,111,198,.22)}
.option input{accent-color:#1f6fc6}
.primary-submit{font-size:18px;padding:14px 22px;border-radius:14px;box-shadow:0 10px 22px rgba(31,111,198,.18)}
.result-card{box-shadow:0 10px 28px rgba(15,23,42,.06)}
.priority-card{border-top:5px solid #1f6fc6}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#1f6fc6;color:#fff;font-weight:900}
.muted{color:var(--muted);font-weight:600}
.simple-priority-table th:first-child,.simple-priority-table td:first-child{width:100px;text-align:center}
.simple-priority-table td:nth-child(2){font-size:17px;padding-left:18px}
.factor-link-list{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.factor-link-list a{display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,#ffffff,#f7fbff);border:1px solid #d6e6f7;color:#0f5ea8}
.factor-link-list a span{font-size:17px}
.factor-link-list a small{color:#64748b;font-weight:700}
.factor-title-row{align-items:flex-start}
.factor-title-row h2 span{display:block;margin-top:2px;font-size:15px;color:#64748b;font-weight:700}
.rule-id{display:inline-flex;background:#f8fbff;border:1px solid #dbe7f3;border-radius:999px;padding:8px 14px;color:#475569;font-size:15px}
.chart-wrap{padding:20px;border-radius:16px;background:#fbfdff}
.current-status-line{display:inline-flex;align-items:center;gap:10px;background:#f8fbff;border:1px solid #dbe7f3;border-radius:14px;padding:10px 14px;margin:8px 0 18px}
.current-status-line span:first-child{color:#64748b;font-size:15px}
.current-status-line strong{font-size:18px}
details.easy-details{border-radius:16px;border-color:#dbe7f3;box-shadow:0 3px 10px rgba(15,23,42,.03)}
details.easy-details > summary{display:flex;align-items:center;gap:8px;background:#f8fbff!important;color:#123a63!important}
details.easy-details > summary::marker{color:#1f6fc6}
.performance-summary-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.performance-summary-card{box-shadow:none;background:#fbfdff}
.suggestion-item{background:#fbfdff;border-radius:14px;border:1px solid #dbe7f3;padding:16px;margin-bottom:14px}
.advice-block{background:#fff;border-color:#e1eaf4;border-left-color:#1f6fc6;line-height:1.72}
.spearman-table th,.spearman-table td{font-size:15px;line-height:1.65}
.spearman-table td:nth-child(2) strong{display:inline-block;background:#eef6ff;color:#125da3;border:1px solid #c7ddf5;border-radius:999px;padding:5px 12px;min-width:78px}
.spearman-summary{background:#f8fbff;color:#334155}
.info-modal-card{max-height:86vh;overflow:auto}
@media (max-width: 800px){
    .app-topbar{padding:10px 12px;align-items:flex-start}
    .topbar-actions{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
    .home-hero,.result-hero{display:block}
    .section-heading{align-items:flex-start;flex-direction:column}
    .form-card.friendly-form{padding:18px}
    .question{padding:14px}
    .options{display:grid;grid-template-columns:1fr;gap:8px}
    .option{width:100%}
    .summary-columns{grid-template-columns:1fr}
    .factor-title-row{display:block}
    .back-top{display:inline-block;margin-top:10px}
    .simple-priority-table td:nth-child(2){font-size:15px}
}


/* v15: center chart area only */
.chart-wrap.clean-chart {
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}
.chart-wrap.clean-chart canvas {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* v22: fix chart size after centering */
.chart-wrap.clean-chart {
    position: relative;
    width: 100%;
    max-width: 1180px;
    min-height: 430px;
    margin-left: auto;
    margin-right: auto;
}
.chart-wrap.clean-chart canvas {
    display: block;
    width: 100% !important;
    height: 400px !important;
    max-width: 100%;
}
@media (max-width: 800px){
    .chart-wrap.clean-chart { min-height: 360px; padding: 12px; }
    .chart-wrap.clean-chart canvas { height: 330px !important; }
}


/* v23: expand factor charts to full card width while keeping existing functions */
.chart-wrap.clean-chart {
    width: 100% !important;
    max-width: none !important;
    height: 520px !important;
    min-height: 520px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
.chart-wrap.clean-chart canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}
@media (max-width: 800px){
    .chart-wrap.clean-chart {
        height: 390px !important;
        min-height: 390px !important;
        padding: 12px;
    }
    .chart-wrap.clean-chart canvas {
        height: 100% !important;
    }
}


/* v24: make factor charts use the full available card width */
.factor-result .chart-wrap.clean-chart {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;
    margin: 18px 0 !important;
    padding: 18px !important;
    box-sizing: border-box !important;
}
.factor-result .chart-wrap.clean-chart canvas {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 520px !important;
    margin: 0 !important;
}
@media (max-width: 800px){
    .factor-result .chart-wrap.clean-chart {
        height: 420px !important;
        min-height: 420px !important;
        padding: 10px !important;
    }
    .factor-result .chart-wrap.clean-chart canvas {
        height: 390px !important;
    }
}