/* 野球トーナメント表メーカー — style.css */
:root{
  --navy:#0b2447;
  --navy-2:#15396b;
  --grass:#2e7d32;
  --grass-2:#3a9b3f;
  --accent:#e23b2e;
  --bg:#f4f6f9;
  --card:#ffffff;
  --ink:#1f2933;
  --muted:#6b7280;
  --line:#9fb3c8;
  --border:#dfe5ec;
  --shadow:0 2px 10px rgba(11,36,71,.08);
  --radius:12px;
  --maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
}
a{color:var(--navy-2);text-decoration:none;}
a:hover{text-decoration:underline;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px;}
.sp-only{display:none;}

/* ---- ヘッダー ---- */
.site-header{
  background:linear-gradient(180deg,#0d2a55 0%,var(--navy) 100%);
  color:#fff;
  position:sticky;top:0;z-index:50;
  box-shadow:var(--shadow);
  border-bottom:3px solid var(--grass);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;}
.brand{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;}
.brand:hover{text-decoration:none;opacity:.92;}
.logo-mark{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:50%;padding:3px;line-height:0;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.logo-mark--light{box-shadow:none;}
.brand-mark{font-size:1.4rem;}
.brand-text{display:flex;flex-direction:column;line-height:1.2;font-size:1.05rem;}
.brand-sub{font-size:.66rem;font-weight:500;color:#aebfd8;letter-spacing:.02em;margin-top:1px;}
.site-nav{display:flex;gap:18px;}
.site-nav a{color:#dce6f5;font-size:.95rem;}
.site-nav a:hover{color:#fff;}

/* ---- ヒーロー ---- */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--grass) 140%);
  color:#fff;padding:42px 0 36px;position:relative;overflow:hidden;
}
.hero .container{position:relative;z-index:1;}
.hero-field{
  position:absolute;right:-22px;bottom:24px;top:auto;
  width:300px;height:auto;color:#fff;opacity:.15;pointer-events:none;z-index:0;
}
.hero h1{margin:0 0 12px;font-size:2rem;line-height:1.35;}
.hero .lead{margin:0;max-width:680px;color:#eaf1fb;font-size:1.02rem;}
.hero .lead strong{color:#fff;}
@media (max-width:760px){ .hero-field{right:-120px;width:250px;opacity:.10;} }

/* ---- ツールパネル ---- */
.tool{margin-top:-22px;position:relative;z-index:3;}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:20px;
}
.panel-row{margin-bottom:14px;}
.panel-row:last-child{margin-bottom:0;}
.field{display:flex;flex-direction:column;gap:6px;}
.field-grow{width:100%;}
.field-label{font-weight:700;font-size:.92rem;color:var(--navy);}
.field-hint{font-size:.82rem;color:var(--muted);}
input[type="text"],textarea{
  width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:1rem;font-family:inherit;background:#fff;color:var(--ink);
}
input[type="text"]:focus,textarea:focus{outline:2px solid var(--grass-2);outline-offset:1px;border-color:var(--grass-2);}
textarea{resize:vertical;}

.quick-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.actions-row{display:flex;flex-wrap:wrap;gap:8px;}

/* チーム数プルダウン */
.count-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
#count-select{
  padding:9px 12px;border:1px solid var(--border);border-radius:8px;
  font-size:1rem;background:#fff;color:var(--ink);min-width:120px;
}

/* フォーマット選択（ラジオ＋アイコン） */
.format-row{display:flex;flex-direction:column;gap:8px;}
.format-options{display:flex;gap:12px;flex-wrap:wrap;}
.format-opt{cursor:pointer;display:inline-flex;position:relative;}
.format-opt input{position:absolute;opacity:0;width:0;height:0;}
.format-card{
  display:flex;align-items:center;gap:10px;border:2px solid var(--border);
  border-radius:10px;padding:10px 14px;background:#fff;color:var(--navy-2);
  transition:border-color .15s ease, background .15s ease;
}
.format-opt input:checked + .format-card{
  border-color:var(--grass);background:#eef7ef;box-shadow:var(--shadow);
}
.format-opt input:focus-visible + .format-card{outline:2px solid var(--grass-2);outline-offset:2px;}
.format-name{font-weight:700;color:var(--navy);font-size:.92rem;}

/* SVGトーナメント表 */
.bracket-wrap{overflow:auto;text-align:center;-webkit-overflow-scrolling:touch;}
.bracket-wrap svg{display:inline-block;max-width:none;height:auto;}

/* 生成中ローディング（野球ボールのロゴがぐるぐる） */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 0;}
.loading-ball{display:inline-block;transform-origin:50% 50%;animation:ball-spin .8s linear infinite;}
@keyframes ball-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.loading-text{color:var(--navy);font-weight:700;font-size:1.02rem;margin:0;}
.loading-dots::after{content:"";animation:dots 1.2s steps(4,end) infinite;}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
.name-editor{
  position:fixed;z-index:1000;border:1px solid var(--grass);border-radius:4px;
  padding:2px 5px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink);
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* チーム選択ピッカー（位置クリックで開く） */
.team-picker{
  position:fixed;z-index:1000;background:#fff;border:1px solid var(--border);
  border-radius:9px;box-shadow:0 8px 28px rgba(0,0,0,.20);padding:6px;
  max-height:280px;overflow:auto;min-width:180px;
}
.team-picker .tp-head{font-size:.72rem;color:var(--muted);padding:3px 8px;}
.team-picker button{
  display:block;width:100%;text-align:left;border:0;background:transparent;
  padding:7px 9px;border-radius:6px;cursor:pointer;font-size:.9rem;color:var(--ink);
  white-space:nowrap;
}
.team-picker button:hover{background:#eef7ef;}
.team-picker .tp-here{color:var(--grass);font-weight:700;}
.team-picker .tp-sep{height:1px;background:var(--border);margin:5px 2px;}

/* 固定の質問バナー */
.fix-question{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff8e6;border:1px solid #ffe2a6;border-radius:9px;
  padding:10px 12px;margin:10px 0 6px;font-size:.92rem;color:#5b4500;
}
.fix-question[hidden]{display:none;}
.fix-hint{flex-basis:100%;color:#7a5a00;font-size:.85rem;line-height:1.6;}
.btn-small{padding:6px 12px;font-size:.85rem;border-radius:7px;}

.btn{
  appearance:none;border:1px solid var(--border);background:#fff;color:var(--navy);
  padding:10px 16px;border-radius:9px;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:transform .04s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover{box-shadow:var(--shadow);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--grass);border-color:var(--grass);color:#fff;}
.btn-primary:hover{background:var(--grass-2);}
.btn-ghost{background:transparent;color:var(--navy-2);border-color:var(--line);}
.share-msg{margin:10px 0 0;color:var(--grass);font-weight:700;}

/* ---- 出力エリア ---- */
.capture{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 16px;overflow-x:auto;position:relative;
}
.bracket-title{
  text-align:center;margin:0 0 18px;color:var(--navy);font-size:1.4rem;
  border-bottom:3px solid var(--grass);display:inline-block;padding-bottom:6px;
}
.capture{ text-align:center; }
.capture .bracket{ text-align:left; }
.capture-credit{ text-align:right;color:var(--muted);font-size:.78rem;margin:14px 0 0; }

/* ---- ブラケット（トーナメント表） ---- */
.bracket{display:flex;align-items:stretch;width:100%;}
.round{
  display:flex;flex-direction:column;justify-content:space-around;
  flex:1 1 0;min-width:188px;
}
.round-head{
  text-align:center;font-size:.8rem;font-weight:700;color:var(--muted);
  margin-bottom:6px;letter-spacing:.04em;
}
.match{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  flex:1 1 auto;margin:6px 11px;
}
/* 右側へ伸びる接続線（最終ラウンド以外） */
.round:not(.round--final) .match::after{
  content:"";position:absolute;left:100%;top:25%;bottom:25%;width:11px;
  border:2px solid var(--line);border-left:0;border-radius:0 8px 8px 0;
}
/* 左側から入る接続線（1ラウンド目以外） */
.round:not(.round--first):not(.round--champion) .match::before{
  content:"";position:absolute;right:100%;top:50%;width:11px;
  border-top:2px solid var(--line);
}

.slot{
  display:flex;align-items:center;gap:5px;
  background:#fff;border:1px solid var(--border);
  padding:5px 7px;min-height:38px;
}
.slot + .slot{border-top:0;}
.slot:first-child{border-radius:8px 8px 0 0;}
.slot:last-child{border-radius:0 0 8px 8px;}
.slot.is-winner{background:#eaf7ec;border-color:var(--grass-2);}
.slot.is-winner .team-name{font-weight:700;color:var(--grass);}
.slot.is-bye{background:#f3f4f6;color:var(--muted);}

.seed{
  flex:0 0 auto;min-width:17px;height:17px;border-radius:9px;padding:0 2px;
  background:var(--navy);color:#fff;font-size:.66rem;
  display:flex;align-items:center;justify-content:center;
}
.team-name{
  flex:1 1 auto;border:0;background:transparent;font-size:.9rem;
  padding:2px 0;color:var(--ink);min-width:0;
}
span.team-name,div.team-name{white-space:normal;word-break:break-word;line-height:1.25;}
.team-name.editable{cursor:text;outline:none;}
.team-name.editable:focus{outline:1px solid var(--grass-2);border-radius:4px;}
.team-name.editable:empty:before{content:attr(data-ph);color:var(--muted);}
.score{
  flex:0 0 auto;width:34px;text-align:center;border:1px solid var(--border);
  border-radius:6px;padding:3px 2px;font-size:.82rem;
  -moz-appearance:textfield;
}
.score::-webkit-outer-spin-button,.score::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.win-btn{
  flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:6px;
  width:24px;height:24px;cursor:pointer;font-size:.78rem;color:var(--muted);
}
.win-btn.on{background:var(--grass);border-color:var(--grass);color:#fff;}

/* 優勝カラム */
.round--champion{justify-content:center;flex:0 0 170px;}
.champion-box{
  border:2px solid #d4af37;background:linear-gradient(180deg,#fffdf3,#fff6da);
  border-radius:10px;padding:14px;text-align:center;box-shadow:var(--shadow);
}
.champion-label{font-size:.8rem;color:#b8860b;font-weight:700;}
.champion-name{font-size:1.1rem;font-weight:800;color:var(--navy);margin-top:4px;min-height:1.4em;}
.champion-cup{font-size:1.6rem;}

.empty-note{color:var(--muted);padding:30px 10px;text-align:center;width:100%;}

/* ---- アフィリエイト枠 ---- */
.affiliate-box{
  border:1px dashed var(--line);border-radius:var(--radius);
  padding:16px;margin:24px 0;background:#fff;text-align:center;
}
.affiliate-label{font-size:.72rem;color:var(--muted);margin:0 0 8px;letter-spacing:.08em;}
.affiliate-placeholder{color:var(--muted);font-size:.9rem;margin:0;}

/* ---- セクション共通 ---- */
.section{padding:34px 0;}
.section-title{
  font-size:1.35rem;color:var(--navy);margin:0 0 18px;
  border-left:5px solid var(--grass);padding-left:10px;
}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);color:var(--ink);transition:transform .08s ease;
}
.card:hover{transform:translateY(-3px);text-decoration:none;}
.card-emoji{font-size:1.8rem;}
.card h3{margin:8px 0 6px;font-size:1.05rem;color:var(--navy);}
.card p{margin:0;color:var(--muted);font-size:.9rem;}

.prose{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);}
.prose h3{color:var(--navy);margin:18px 0 8px;}
.prose ul{padding-left:1.2em;}
.prose p{margin:0 0 12px;}

/* 記事ページ用 */
.article{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;margin:24px 0;}
.article h1{color:var(--navy);font-size:1.6rem;margin-top:0;}
.article h2{color:var(--navy);border-left:5px solid var(--grass);padding-left:10px;margin-top:28px;}
.article .meta{color:var(--muted);font-size:.85rem;margin-bottom:18px;}
.breadcrumb{font-size:.85rem;color:var(--muted);margin:16px 0;}

/* ---- フッター ---- */
.site-footer{
  background:linear-gradient(180deg,var(--navy) 0%,#081b38 100%);
  color:#cdd9ea;margin-top:40px;padding:28px 0 22px;
  border-top:3px solid var(--grass);
}
.footer-inner{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;}
.footer-brand{display:flex;align-items:center;gap:9px;font-weight:700;color:#fff;font-size:1rem;}
.footer-tagline{margin:0;font-size:.85rem;color:#aebfd8;}
.footer-nav{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
.footer-nav a{color:#cdd9ea;font-size:.9rem;}
.copyright{margin:6px 0 0;font-size:.82rem;color:#8fa2bd;}

/* 配置の固定パネル */
.pin-panel{
  border:1px solid var(--border);border-radius:10px;background:#fbfcfe;
  padding:6px 14px;margin-bottom:14px;
}
.pin-panel > summary{
  cursor:pointer;font-weight:700;color:var(--navy);font-size:.95rem;padding:6px 0;list-style:none;
}
.pin-panel > summary::-webkit-details-marker{display:none;}
.pin-panel > summary::before{content:"▸ ";color:var(--grass);}
.pin-panel[open] > summary::before{content:"▾ ";}
.pin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin:8px 0 10px;}
.pin-row{display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:#fff;border:1px solid var(--border);border-radius:8px;padding:6px 10px;}
.pin-team{font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pin-row select{padding:5px 8px;border:1px solid var(--border);border-radius:6px;background:#fff;font-size:.85rem;flex:0 0 auto;}

/* 記事：検索＋一覧＋ページネーション */
.article-search{margin-bottom:10px;}
#article-search{
  width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:10px;
  font-size:1rem;background:#fff;box-shadow:var(--shadow);
}
#article-search:focus{outline:2px solid var(--grass-2);border-color:var(--grass-2);}
.article-count{margin:4px 2px 14px;color:var(--muted);font-size:.85rem;}
.article-list{display:flex;flex-direction:column;gap:12px;}
.article-item{
  display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow);color:var(--ink);transition:transform .08s ease,border-color .15s ease;
}
.article-item:hover{transform:translateY(-2px);border-color:var(--grass-2);text-decoration:none;}
.article-item h3{margin:0 0 6px;font-size:1.06rem;color:var(--navy);}
.article-item-excerpt{margin:0 0 8px;color:var(--muted);font-size:.9rem;}
.article-item-tags{display:flex;flex-wrap:wrap;gap:6px;}
.article-item-tags span{
  font-size:.74rem;color:var(--navy-2);background:#eef3fa;border:1px solid #dde7f3;
  border-radius:999px;padding:2px 9px;
}
.article-item-date{flex:0 0 auto;color:var(--muted);font-size:.78rem;white-space:nowrap;padding-top:2px;}
.article-empty{color:var(--muted);text-align:center;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);}

.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:20px;}
.page-btn{
  min-width:38px;padding:8px 12px;border:1px solid var(--border);background:#fff;color:var(--navy-2);
  border-radius:8px;font-size:.9rem;font-weight:700;cursor:pointer;
}
.page-btn:hover:not(:disabled){box-shadow:var(--shadow);border-color:var(--grass-2);}
.page-btn.is-active{background:var(--grass);border-color:var(--grass);color:#fff;}
.page-btn:disabled{opacity:.45;cursor:default;}
.page-ellipsis{padding:0 4px;color:var(--muted);}

@media (max-width:560px){
  .article-item{flex-direction:column;gap:8px;}
  .article-item-date{order:-1;}
}

/* ---- レスポンシブ ---- */
@media (max-width:640px){
  .sp-only{display:inline;}
  .hero h1{font-size:1.55rem;}
  .site-nav{gap:12px;}
  .site-nav a{font-size:.85rem;}
  .brand-text{font-size:.92rem;}
  .round{min-width:132px;}
  .match{margin:5px 10px;}
}

/* ---- 印刷 ---- */
@media print{
  .site-header,.site-footer,.panel,.affiliate-box,.section,.hero{display:none !important;}
  body{background:#fff;}
  .tool{margin:0;}
  .capture{box-shadow:none;border:0;}
  .bracket{display:flex;}
}