/*
  tiles/ 配下のドキュメント系サブページ(編集ガイド・セルフチェックツールなど)で
  共有するスタイル。ヘッダー・hero・callout等の見た目をここに一本化することで、
  ページ間の行き来でデザインがずれないようにしている。
*/
:root{
  --bg:#10141b;
  --bg-elevated:#171d27;
  --bg-elevated-2:#1e2531;
  --line: rgba(244,239,228,0.10);
  --text:#f4efe4;
  --text-soft:#b7bfcc;
  --text-faint:#7c8494;
  --accent:#e6b73d;
  --accent-soft:#f2cc6b;
  --accent-ink:#211705;
  --tip-bg: rgba(127,178,213,0.10);
  --tip-border: rgba(127,178,213,0.38);
  --tip-ink:#9fcaea;
  --warn-bg: rgba(230,138,61,0.10);
  --warn-border: rgba(230,138,61,0.4);
  --warn-ink:#eba468;
  --danger-bg: rgba(214,69,69,0.10);
  --danger-border: rgba(214,69,69,0.42);
  --danger-ink:#ec8f8f;
  --ok-bg: rgba(84,178,118,0.10);
  --ok-border: rgba(84,178,118,0.4);
  --ok-ink:#7ed7a0;
  --radius: 14px;
  --header-h: 64px;
  --toc-w: 268px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001s !important; transition-duration:0.001s !important;}
}
html,body{margin:0;padding:0;}
body{
  background: var(--bg);
  color: var(--text);
  font-family:"Noto Sans JP", sans-serif;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{max-width:100%;display:block;}
ul, ol{padding-left:1.3em;}
li{margin:0.35em 0;}
code {
  background: rgba(244, 239, 228, 0.08);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.92em;
}

.skip-link{
  position:fixed; top:-3em; left:1em; z-index:200;
  background:var(--accent); color:var(--accent-ink); font-weight:700;
  padding:0.6em 1em; border-radius:0 0 8px 8px; transition:top .2s ease;
}
.skip-link:focus{top:0;}
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible{
  outline:3px solid var(--accent); outline-offset:2px;
}

/* ---------- progress bar ---------- */
.progress-track{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:rgba(244,239,228,0.06);
}
.progress-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-soft));
  transition:width .08s linear;
}

/* ---------- header ---------- */
.doc-header{
  position:sticky; top:0; z-index:110; height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(16,20,27,0.82);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.doc-header.with-progress{ margin-top:3px; }
.doc-header-inner{
  width:100%; max-width:1320px; margin:0 auto;
  padding:0 clamp(14px,3vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.home-link{
  display:flex; align-items:center; gap:0.5em;
  text-decoration:none; color:var(--text-soft); font-size:0.86rem; font-weight:500;
  padding:0.5em 0.7em; border-radius:8px; transition:color .2s ease, background-color .2s ease;
  white-space:nowrap;
}
.home-link:hover{color:var(--text); background:var(--bg-elevated);}
.home-link.home-link-accent i{color:var(--accent);}
.doc-title{
  font-size:0.9rem; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-align:center; flex:1; padding:0 0.5rem;
}
.toc-toggle{
  display:none; align-items:center; gap:0.4em;
  background:var(--bg-elevated); border:1px solid var(--line); color:var(--text);
  border-radius:8px; padding:0.5em 0.8em; font-size:0.82rem; font-weight:700; cursor:pointer;
}

/* ---------- shell / toc ---------- */
.doc-shell{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:var(--toc-w) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
  padding:0 clamp(14px,3vw,32px);
}
.toc{
  position:sticky; top:calc(var(--header-h) + 3px + 24px);
  align-self:start;
  max-height:calc(100dvh - var(--header-h) - 3px - 48px);
  overflow-y:auto;
  padding:1.2rem 0 2rem;
}
.toc-label{
  font-size:0.72rem; letter-spacing:0.14em; color:var(--text-faint);
  font-weight:700; margin:0 0 0.8rem;
}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc;}
.toc li{margin:0;}
.toc a{
  counter-increment:toc;
  display:flex; align-items:baseline; gap:0.55em;
  text-decoration:none; color:var(--text-soft); font-size:0.86rem;
  padding:0.5em 0.6em; border-radius:8px; border-left:2px solid transparent;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease;
}
.toc a::before{
  content:counter(toc, decimal-leading-zero); font-family:"Audiowide", sans-serif; font-size:0.7rem;
  color:var(--text-faint); min-width:1.4em;
}
.toc a:hover{color:var(--text); background:var(--bg-elevated);}
.toc a.active{color:var(--accent-soft); border-left-color:var(--accent); background:var(--bg-elevated);}
.toc a.active::before{color:var(--accent);}

.toc-overlay{
  display:none; position:fixed; inset:0; z-index:130;
  background:rgba(8,10,14,0.6);
}
.toc-overlay.open{display:block;}

/* ---------- main / hero ---------- */
main{min-width:0;}
.container{max-width:900px; margin:0 auto; padding:0 clamp(14px,3vw,32px);}
.hero{padding:clamp(28px,5vw,56px) 0 clamp(20px,4vw,32px);}
.hero-eyebrow{
  font-family:"Audiowide", sans-serif; font-size:0.7rem; letter-spacing:0.2em;
  color:var(--accent-soft); margin:0 0 0.9em;
}
.hero h1{
  font-size:clamp(1.7rem, 4vw, 2.6rem); margin:0 0 0.6em; line-height:1.3;
  text-wrap:balance;
}
.hero p{color:var(--text-soft); margin:0.7em 0; font-size:0.98rem;}
.hero blockquote{
  margin:1.4em 0 0; padding:0.9em 1.1em; border-left:3px solid var(--accent);
  background:var(--bg-elevated); border-radius:0 10px 10px 0;
  color:var(--text-soft); font-size:0.9rem;
}

/* ---------- quick nav ---------- */
.quicknav{padding:0.5rem 0 clamp(32px,5vw,56px);}
.quicknav h2{font-size:1.2rem; margin:0 0 1rem;}
.quicknav-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:0.8rem;
}
.quicknav-card{
  display:flex; align-items:center; gap:0.9rem;
  text-decoration:none; color:var(--text);
  background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:var(--radius); padding:0.95rem 1.1rem;
  transition:border-color .2s ease, background-color .2s ease, transform .2s cubic-bezier(.16,1,.3,1);
}
.quicknav-card:hover{border-color:rgba(230,183,61,0.4); background:var(--bg-elevated-2); transform:translateY(-2px);}
.quicknav-card i.q-icon{font-size:1.35rem; color:var(--accent); flex:none;}
.quicknav-card span{font-size:0.88rem; font-weight:500; line-height:1.4;}
.quicknav-card i.q-arrow{margin-left:auto; color:var(--text-faint); transition:transform .2s ease, color .2s ease; flex:none;}
.quicknav-card:hover i.q-arrow{transform:translateX(3px); color:var(--accent);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);}
.reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- chapters ---------- */
.chapter{padding:clamp(40px,6vw,64px) 0; border-top:1px solid var(--line); scroll-margin-top:calc(var(--header-h) + 20px);}
.chapter:first-of-type{border-top:1px solid var(--line);}
.chapter-head{display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem;}
.chapter-num{
  font-family:"Audiowide", sans-serif; font-size:1.5rem; color:var(--accent);
  flex:none; width:2.4rem;
}
.chapter-icon{
  flex:none; width:44px; height:44px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--line); font-size:1.25rem; color:var(--accent-soft);
}
.chapter h2{font-size:clamp(1.25rem,2.4vw,1.55rem); margin:0; line-height:1.4;}
.chapter > p{color:var(--text-soft);}
.chapter h3{font-size:1.05rem; margin:1.8em 0 0.6em;}
.chapter h4{font-size:0.94rem; margin:1.4em 0 0.5em; color:var(--accent-soft);}

/* ---------- callouts ---------- */
.callout{
  display:flex; gap:0.8rem; padding:1rem 1.15rem; border-radius:12px;
  border:1px solid var(--line); margin:1.4em 0;
}
.callout i{flex:none; font-size:1.2rem; margin-top:0.1em;}
.callout p, .callout div{margin:0; font-size:0.92rem; color:var(--text-soft);}
.callout.tip{background:var(--tip-bg); border-color:var(--tip-border);}
.callout.tip i{color:var(--tip-ink);}
.callout.warn{background:var(--warn-bg); border-color:var(--warn-border);}
.callout.warn i{color:var(--warn-ink);}
.callout.danger{background:var(--danger-bg); border-color:var(--danger-border);}
.callout.danger i{color:var(--danger-ink);}
.callout ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.45rem;}
.callout ul li{
  position:relative; padding-left:1.1em; margin:0; color:var(--text-soft); font-size:0.9rem;
}
.callout ul li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:5px; height:5px; border-radius:50%; background:currentColor; opacity:0.7;
}

/* ---------- lists with icons ---------- */
.icon-list{list-style:none; padding:0; margin:1.2em 0; display:flex; flex-direction:column; gap:0.6rem;}
.icon-list li{
  position:relative; padding-left:1.85em; margin:0;
  color:var(--text-soft); font-size:0.94rem;
}
.icon-list i{position:absolute; left:0; top:0.2em; color:var(--accent); font-size:1.05rem;}

/* ---------- stepper ---------- */
.stepper{list-style:none; margin:1.3em 0; padding:0;}
.stepper > li{
  position:relative; padding:0 0 1.4rem 2.2rem; margin:0;
  border-left:2px solid var(--line);
}
.stepper > li:last-child{border-color:transparent; padding-bottom:0;}
.stepper > li::before{
  content:attr(data-step);
  position:absolute; left:-0.85rem; top:0;
  width:1.7rem; height:1.7rem; border-radius:50%;
  background:var(--bg-elevated-2); border:1px solid var(--accent);
  color:var(--accent-soft); font-size:0.78rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.stepper p, .stepper .step-sub{margin:0; font-size:0.92rem; color:var(--text-soft);}
.stepper .step-sub{list-style:disc; margin-top:0.4em; padding-left:1.1em;}

/* ---------- table ---------- */
.table-wrap{overflow-x:auto; margin:1.3em 0; border:1px solid var(--line); border-radius:var(--radius);}
table{width:100%; border-collapse:collapse; font-size:0.88rem; min-width:480px;}
thead th{
  text-align:left; padding:0.75em 1em; background:var(--bg-elevated-2);
  color:var(--accent-soft); font-weight:700; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
tbody td{padding:0.75em 1em; border-bottom:1px solid var(--line); color:var(--text-soft); vertical-align:top;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover td{background:rgba(244,239,228,0.02);}

/* ---------- accordion (details) ---------- */
details.accordion{
  border:1px solid var(--line); border-radius:var(--radius); margin:0.8em 0;
  background:var(--bg-elevated); overflow:hidden;
}
details.accordion summary{
  list-style:none; cursor:pointer; padding:1rem 1.15rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:700; font-size:0.96rem;
}
details.accordion summary::-webkit-details-marker{display:none;}
details.accordion summary .caret{
  flex:none; color:var(--text-faint); transition:transform .2s ease;
}
details.accordion[open] summary .caret{transform:rotate(180deg);}
details.accordion .accordion-body{
  padding:0 1.15rem 1.15rem; color:var(--text-soft); font-size:0.92rem;
}
details.accordion .accordion-body p{margin:0.7em 0;}

/* ---------- tool toggle (GIMP / Photopea) ---------- */
.tool-toggle{
  display:inline-flex; gap:0.3rem; padding:0.3rem;
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:999px;
  margin:0.6em 0 1.6em;
}
.tool-toggle-btn{
  display:inline-flex; align-items:center; gap:0.5em;
  border:none; background:transparent; color:var(--text-soft);
  font-family:inherit; font-size:0.9rem; font-weight:700; cursor:pointer;
  padding:0.6em 1.2em; border-radius:999px;
  transition:background-color .2s ease, color .2s ease;
}
.tool-toggle-btn i{font-size:1.05rem;}
.tool-toggle-btn:hover{color:var(--text);}
.tool-toggle-btn.is-active{background:var(--accent); color:var(--accent-ink);}
.tool-panel[hidden]{display:none;}

/* ---------- solid pill button (shared primary action style) ---------- */
.btn-pill{
  display:inline-flex; align-items:center; gap:0.55em;
  font-family:inherit; font-size:0.92rem; font-weight:700;
  padding:0.65em 1.3em; border:none; border-radius:999px;
  background:var(--accent); color:var(--accent-ink); cursor:pointer;
  text-decoration:none; white-space:nowrap;
  transition:background-color .2s ease, transform .2s ease;
}
.btn-pill:hover{background:var(--accent-soft); transform:translateY(-1px);}
.btn-pill:active{transform:translateY(0);}
.btn-pill:disabled{opacity:0.4; cursor:not-allowed; transform:none;}

/* ---------- checklist ---------- */
.checklist{list-style:none; margin:1.3em 0; padding:0; display:flex; flex-direction:column; gap:0.6rem;}
.checklist li{
  display:flex; gap:0.7em; align-items:flex-start;
  padding:0.8rem 1rem; background:var(--bg-elevated); border:1px solid var(--line);
  border-radius:10px; margin:0;
}
.checklist input[type="checkbox"]{
  flex:none; width:1.15em; height:1.15em; margin:0.15em 0 0; accent-color:var(--accent);
}
.checklist label{font-size:0.92rem; color:var(--text); cursor:pointer;}

/* ---------- final notice ---------- */
.final-notice{
  margin:clamp(40px,6vw,64px) 0 0; padding:1.4rem 1.5rem;
  border:1px solid var(--warn-border); background:var(--warn-bg);
  border-radius:var(--radius); display:flex; gap:1rem;
}
.final-notice i{flex:none; font-size:1.4rem; color:var(--warn-ink); margin-top:0.1em;}
.final-notice strong{display:block; margin-bottom:0.4em; font-size:0.98rem;}
.final-notice p{margin:0; font-size:0.9rem; color:var(--text-soft);}

/* ---------- footer ---------- */
.site-footer{
  border-top:1px solid var(--line); margin-top:clamp(40px,6vw,64px);
  padding:1.6rem clamp(14px,3vw,32px) 3rem;
}
.footer-inner{
  max-width:1320px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  color:var(--text-faint); font-size:0.8rem;
}
.footer-inner a{color:var(--text-soft); text-decoration:none; display:inline-flex; align-items:center; gap:0.4em;}
.footer-inner a:hover{color:var(--accent-soft);}

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed; right:clamp(14px,3vw,32px); bottom:clamp(14px,3vw,32px); z-index:90;
  width:46px; height:46px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink); border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.15rem;
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, background-color .2s ease;
  box-shadow:0 10px 26px -10px rgba(230,183,61,0.6);
}
.back-to-top.visible{opacity:1; pointer-events:auto; transform:translateY(0);}
.back-to-top:hover{background:var(--accent-soft);}

/* ================================================================
   セルフチェックツール専用コンポーネント
   ================================================================ */

.upload-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-elevated); padding: 1.4rem 1.5rem;
  margin-bottom: clamp(24px, 5vw, 40px);
}
.file-label {
  display: flex; align-items: center; gap: 0.6em;
  font-weight: 700; font-size: 0.98rem; color: var(--text);
  margin-bottom: 0.9rem;
}
.file-label i { color: var(--accent); font-size: 1.15rem; }

.upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; }

input[type="file"] {
  flex: 1 1 240px; min-width: 200px;
  font-size: 0.86rem; color: var(--text-soft);
  font-family: inherit;
}
input[type="file"]::file-selector-button {
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--text); background: var(--bg-elevated-2);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 0.5em 0.9em; margin-right: 0.8em; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
  border-color: rgba(230, 183, 61, 0.4); background: var(--bg-elevated);
}

.selected-count { font-size: 0.85rem; color: var(--text-faint); }

/* ---------- status ---------- */
.status[hidden] { display: none; }
.status {
  display: flex; align-items: center; gap: 0.7em;
  margin-bottom: clamp(20px, 4vw, 28px);
  padding: 0.8rem 1.1rem; border-radius: 10px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  font-size: 0.88rem; color: var(--text-soft);
}
.status::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--accent);
  animation: status-spin 0.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .status::before { animation: none; }
}
@keyframes status-spin { to { transform: rotate(360deg); } }

/* ---------- results / player cards ---------- */
.results { display: flex; flex-direction: column; gap: 1.1rem; }

.player-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.35rem; background: var(--bg-elevated);
}
.player-card.ok { background: var(--ok-bg); border-color: var(--ok-border); }
.player-card.ng { background: var(--danger-bg); border-color: var(--danger-border); }

.player-card h2 {
  font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem;
  display: flex; align-items: center; gap: 0.6em; color: var(--text);
}

.badge {
  display: inline-flex; align-items: center;
  font-family: "Audiowide", sans-serif;
  font-size: 0.68rem; letter-spacing: 0.06em;
  padding: 0.3em 0.7em; border-radius: 999px; color: var(--accent-ink);
}
.badge.ok { background: var(--ok-ink); }
.badge.ng { background: var(--danger-ink); }

.player-card .meta {
  font-size: 0.85rem; color: var(--text-faint); margin: 0 0 0.6rem;
}

.player-card .reasons {
  list-style: none; margin: 0.6rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.player-card .reasons li {
  position: relative; padding-left: 1.15em; font-size: 0.9rem; color: var(--danger-ink); margin: 0;
}
.player-card .reasons li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--danger-ink);
}

.player-card .detail-line {
  font-size: 0.9rem; margin: 0.25rem 0; color: var(--text-soft);
}

.preview { margin-top: 0.9rem; }
.preview canvas {
  max-width: 100%; display: block; border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(45deg, rgba(244,239,228,0.08) 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(-45deg, rgba(244,239,228,0.08) 25%, transparent 25%) -8px 0 / 16px 16px,
    linear-gradient(45deg, transparent 75%, rgba(244,239,228,0.08) 75%) -8px 0 / 16px 16px,
    linear-gradient(-45deg, transparent 75%, rgba(244,239,228,0.08) 75%) -8px 0 / 16px 16px,
    #0b0e13;
}
.preview p {
  font-size: 0.78rem; color: var(--text-faint); margin: 0.5rem 0 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1000px){
  .doc-shell{grid-template-columns:1fr;}
  .toc-toggle{display:inline-flex;}
  .toc{
    position:fixed; top:0; bottom:0; left:0; z-index:140;
    width:min(84vw, 320px); max-height:none;
    background:var(--bg); border-right:1px solid var(--line);
    padding:1.4rem 1.2rem 2rem;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .toc.open{transform:translateX(0);}
  .quicknav-grid{grid-template-columns:1fr;}
}
@media (max-width: 620px){
  .chapter-head{align-items:flex-start;}
  table{min-width:420px;}
}
@media (max-width: 560px) {
  .doc-title { display: none; }
  .upload-row { flex-direction: column; align-items: stretch; }
  .upload-row .btn-pill { justify-content: center; }
  /* flex-basis is a height basis once the row becomes a column; pin it back to auto */
  .upload-row input[type="file"] { flex: none; min-width: 0; width: 100%; }
}