:root{
  --bg:#f4f7fb;--panel:#fff;--text:#172033;--muted:#667085;--line:#d8e0ea;
  --navy:#123a66;--blue:#0f7fb0;--blue2:#eaf6fb;--green:#15803d;
  --yellow:#9a6700;--yellowbg:#fff8db;--red:#b42318;--redbg:#fff1f0;
  --shadow:0 12px 30px rgba(22,34,51,.08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;line-height:1.7}
a{color:inherit}
.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.header-inner{max-width:1180px;margin:auto;min-height:78px;padding:0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-weight:900;color:var(--navy)}
.brand-mark{width:52px;height:52px;display:block;flex:0 0 auto;filter:drop-shadow(0 8px 16px rgba(18,58,102,.16))}
.brand small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.nav{display:flex;gap:10px;flex-wrap:wrap}
.nav a{padding:9px 12px;border-radius:10px;text-decoration:none;color:var(--muted);font-weight:700}
.nav a:hover{background:var(--blue2);color:var(--navy)}
main{max-width:1180px;margin:34px auto;padding:0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:16px;padding:26px;box-shadow:var(--shadow);margin-bottom:22px}
.hero{padding:34px}
.hero h1{font-size:clamp(32px,5vw,56px);line-height:1.15;margin:0 0 16px;color:var(--navy)}
.hero p{font-size:18px;color:var(--muted);max-width:820px}
.badges,.actions,.output-tabs{display:flex;gap:10px;flex-wrap:wrap}
.badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--blue2);color:var(--navy);font-size:13px;font-weight:800}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tool-card{display:block;text-decoration:none;background:white;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:16px;padding:22px;box-shadow:var(--shadow);transition:.18s}
.tool-card:hover{transform:translateY(-2px);border-color:#9ccadd}
.tool-card h2{margin:0 0 8px;color:var(--navy);font-size:21px}
.tool-card p{margin:0;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
label{display:block;font-weight:800;margin:15px 0 6px}
input,select,textarea{width:100%;border:1px solid #bfcbd8;border-radius:10px;padding:11px 12px;background:white;color:var(--text);font:inherit}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(15,127,176,.15);border-color:var(--blue)}
button,.button{border:0;border-radius:10px;padding:11px 16px;font-weight:850;font:inherit;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;background:#e9eef5;color:var(--navy)}
button.primary,.button.primary{background:var(--navy);color:white}
button.secondary{background:var(--blue);color:white}
button:hover,.button:hover{filter:brightness(.97)}
.check-row{display:flex;align-items:flex-start;gap:9px;margin:10px 0}
.check-row input{width:19px;height:19px;margin-top:4px}
.notice,.warning,.danger,.success{border-radius:12px;padding:14px 16px;margin:14px 0}
.notice{background:#eef7ff;border:1px solid #b8dcf4}
.warning{background:var(--yellowbg);border:1px solid #efd47c;color:#6b4c00}
.danger{background:var(--redbg);border:1px solid #f3b8b3;color:#8a1c13}
.success{background:#effcf3;border:1px solid #a9e2ba;color:#166534}
.result{white-space:pre-wrap;background:#101827;color:#edf5ff;border-radius:12px;padding:18px;min-height:260px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:14px}
.score{font-size:38px;font-weight:900;color:var(--navy)}
.issue-list{display:grid;gap:10px}
.issue{border-radius:10px;padding:12px 14px;border:1px solid var(--line);background:#fafcff}
.issue strong{display:block}
.footer{max-width:1180px;margin:40px auto 0;padding:28px 22px 50px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line)}
.footer a{color:var(--muted)}
.small{font-size:13px;color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
h1,h2,h3{line-height:1.3}
h1{color:var(--navy)}
h2{color:var(--navy)}
hr{border:0;border-top:1px solid var(--line);margin:24px 0}
@media(max-width:900px){.grid,.layout{grid-template-columns:1fr}.nav{display:none}.hero{padding:26px}.two-col{grid-template-columns:1fr}}
@media(max-width:560px){main{padding:0 14px}.header-inner{padding:0 14px}.card{padding:20px}.actions>button,.actions>.button{width:100%}}

.sister-layout{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.sister-layout h2{margin:10px 0 8px}
.sister-layout p{margin:0;color:var(--muted);max-width:780px}
.role-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.role-box{
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:12px;
  padding:18px;
  background:#fbfdff;
}
.role-box h3{margin-top:0;color:var(--navy)}
.role-box a{color:var(--blue);font-weight:800}
@media(max-width:760px){
  .sister-layout{display:block}
  .sister-layout .button{margin-top:16px;width:100%}
  .role-grid{grid-template-columns:1fr}
}


/* v4 サイト全体カード間隔監査 */
main > .card,
main > .grid,
main > .layout {
  margin-bottom: 24px;
}

main > :last-child {
  margin-bottom: 0;
}

.layout {
  gap: 24px;
}

.layout > .card {
  margin-bottom: 0;
}

.grid {
  gap: 20px;
}

.grid > .card,
.grid > .tool-card {
  margin-bottom: 0;
}

.card + .card {
  margin-top: 0;
}

section.card {
  scroll-margin-top: 100px;
}

.sister-section {
  margin-top: 0;
}

.role-grid,
.issue-list,
.output-tabs,
.actions,
.badges,
.two-col {
  row-gap: 14px;
}

@media (max-width: 900px) {
  main > .card,
  main > .grid,
  main > .layout {
    margin-bottom: 18px;
  }

  .layout {
    gap: 18px;
  }

  .grid {
    gap: 16px;
  }

  .layout > .card + .card {
    margin-top: 0;
  }
}

@media (max-width: 560px) {
  main {
    margin-top: 22px;
  }

  .card {
    margin-bottom: 0;
  }

  main > .card,
  main > .grid,
  main > .layout {
    margin-bottom: 16px;
  }

  .layout,
  .grid,
  .role-grid {
    gap: 14px;
  }
}

.output-format-note{
  margin:8px 0 12px;
}


.command-group-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.command-group-heading h3{
  margin:0;
}
.apply-group-button{
  padding:7px 10px;
  font-size:13px;
  background:var(--blue2);
  color:var(--navy);
  white-space:nowrap;
}
.suggestion-actions{
  margin-top:14px;
  align-items:center;
}
.suggestion-actions[hidden]{
  display:none;
}
@media(max-width:560px){
  .command-group-heading{
    align-items:stretch;
    flex-direction:column;
  }
  .apply-group-button{
    width:100%;
  }
}

.management-fields{
  margin:20px 0 4px;
  padding:18px;
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:12px;
  background:#fbfdff;
}
.management-fields h3{
  margin:0 0 8px;
  color:var(--navy);
}

.imported-review-notice{
  margin-bottom:18px;
  border-left:4px solid var(--blue);
}
#importedReviewNotice[hidden]{
  display:none;
}

.expected-result-note{
  margin:0 0 14px;
  font-size:13px;
}


.checklist-stage{
  margin-top:20px;
  padding:18px;
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:12px;
  background:#fbfdff;
}
.stage-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.stage-heading h3{
  margin:0;
}
.checklist-editor{
  display:grid;
  gap:10px;
}
.checklist-edit-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.checklist-edit-row input{
  margin:0;
}
.remove-item{
  padding:9px 12px;
}
@media(max-width:560px){
  .stage-heading{
    align-items:stretch;
    flex-direction:column;
  }
  .stage-heading button{
    width:100%;
  }
  .checklist-edit-row{
    grid-template-columns:1fr;
  }
  .remove-item{
    width:100%;
  }
}


/* v16 最終監査: 操作性・表示安定性 */
button,
input,
select,
textarea{
  max-width:100%;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.30);
  outline-offset:2px;
}

textarea[readonly]{
  background:#f8fafc;
}

.actions{
  flex-wrap:wrap;
}

.output-tabs{
  flex-wrap:wrap;
}

@media(max-width:560px){
  .actions > button,
  .actions > a.button,
  .output-tabs > button{
    width:100%;
  }

  textarea{
    min-height:220px;
  }
}


/* v17 余白再監査: ボタン・タブ・バッジの接触防止 */
.card > .actions,
.card > .output-tabs,
.card > .badges{
  margin-top:18px;
}

.card > .output-tabs{
  margin-bottom:10px;
}

.checklist-stage + .actions{
  margin-top:18px;
}

.result + .actions,
textarea + .actions{
  margin-top:14px;
}

.notice + .actions,
.warning + .actions,
.danger + .actions,
.success + .actions{
  margin-top:14px;
}

@media (max-width:560px){
  .card > .actions,
  .card > .output-tabs,
  .card > .badges,
  .checklist-stage + .actions{
    margin-top:14px;
  }
}

.brand span{display:block;line-height:1.2}
@media(max-width:560px){
  .brand-mark{width:48px;height:48px}
}