/* ============================================================
   雀ロク モックアップ — トップ画面 v4（案B + タブ切替）
   ─ 中央の作成カードに「単発」「シーズン」のタブ
   ─ 単発がデフォルト（多数派）、シーズンは累計を取りたい時
   ============================================================ */

/* ── タブ ── */
.top2-tabs{
  display:flex;
  border-bottom:1px solid var(--moss-700);
  margin-bottom:0;
  position:relative;
  width:100%;
  box-sizing:border-box;
}
.top2-tab{
  flex:1 1 0;min-width:0;
  box-sizing:border-box;
  background:var(--moss-25);
  border:1px solid var(--moss-300);border-bottom:none;
  padding:14px 16px 12px;
  font-family:var(--f-mincho);font-weight:700;font-size:14px;
  color:var(--moss-500);letter-spacing:.04em;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  position:relative;
  transition:all .12s;
  text-align:center;
}
.top2-tab + .top2-tab{margin-left:-1px}
.top2-tab .lbl{
  font-family:var(--f-mono);font-size:8px;font-weight:700;letter-spacing:.3em;
  color:var(--moss-300);
}
.top2-tab .nm{font-size:15px;line-height:1.2}
.top2-tab .desc{
  font-family:var(--f-mincho);font-size:11px;font-weight:500;
  color:var(--moss-300);letter-spacing:.02em;margin-top:2px;
}
.top2-tab:hover{color:var(--moss-700);background:#fff}
.top2-tab:hover .lbl,.top2-tab:hover .desc{color:var(--moss-500)}

.top2-tab.active{
  background:#fff;color:var(--moss-900);
  border-color:var(--moss-700);
  z-index:2;
}
.top2-tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:#fff;
}
.top2-tab.active .lbl{color:var(--shu-500)}
.top2-tab.active .desc{color:var(--moss-500)}
.top2-tab.active .nm::before{
  content:"";display:inline-block;width:3px;height:13px;background:var(--shu-500);
  margin-right:8px;vertical-align:-1px;
}

.top2{
  min-height:920px;
  background:var(--paper-100);
  padding:40px 32px 56px;
  position:relative;
  display:flex;flex-direction:column;
  background-image:
    radial-gradient(rgba(60,80,60,.025) 1px,transparent 1px),
    radial-gradient(rgba(180,160,120,.04) 1px,transparent 1px);
  background-size:3px 3px,7px 7px;
  background-position:0 0,1px 1px;
}

/* ── 上部：横ロゴ＋セッションへのキー（差し色として落款だけ） ── */
.top2-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:24px;border-bottom:1px solid var(--moss-200);
  margin-bottom:48px;
}
.top2-logo{
  display:flex;align-items:center;gap:0;
}
.top2-logo img{
  display:block;height:64px;width:auto;
}
.top2-tagline{
  font-family:var(--f-mincho);font-size:12px;color:var(--moss-500);
  letter-spacing:.2em;line-height:1.6;text-align:right;
  display:flex;flex-direction:column;gap:4px;
}
.top2-tagline b{
  font-family:var(--f-mincho);font-weight:700;font-size:13px;
  color:var(--moss-700);letter-spacing:.15em;
}

/* ── センターステージ ── */
.top2-stage{
  flex:1;
  display:flex;justify-content:center;align-items:flex-start;
  position:relative;
  min-height:280px;
}
.top2-create{width:100%;max-width:100%}

/* 中央：新規シリーズ作成（主役） */
.top2-create{
  width:100%;
  background:#fff;border:1px solid var(--moss-700);border-top:none;
  box-shadow:0 1px 0 rgba(26,38,32,.04),0 16px 48px -20px rgba(26,38,32,.22);
  position:relative;
}
.top2-create::before{
  /* 朱の落款を左上にあしらう（session画面の韻） */
  content:"創";
  position:absolute;top:-42px;left:-14px;
  width:34px;height:34px;
  background:var(--shu-500);color:#fff;
  font-family:var(--f-mincho);font-weight:900;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  letter-spacing:0;line-height:1;z-index:3;
}
.top2-create-head{
  padding:18px 28px 16px;
  border-bottom:1px solid var(--moss-200);
  background:linear-gradient(180deg,#fff 0%,var(--moss-25) 100%);
}
.top2-create-head .lbl{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.35em;
  color:var(--shu-500);margin-bottom:6px;
}
.top2-create-head h2{
  font-family:var(--f-mincho);font-weight:900;font-size:22px;
  color:var(--moss-900);letter-spacing:.04em;line-height:1.3;
}
.top2-create-head .sub{
  font-family:var(--f-mincho);font-size:12px;color:var(--moss-500);
  margin-top:4px;letter-spacing:.04em;
}

.top2-create-body{
  padding:24px 28px 22px;
  display:flex;flex-direction:column;gap:18px;
}

/* フィールド */
.top2-field{display:flex;flex-direction:column;gap:6px}
.top2-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-family:var(--f-mincho);font-weight:600;font-size:13px;
  color:var(--moss-900);letter-spacing:.03em;
}
.top2-label .req{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.2em;
  color:var(--shu-500);
}
.top2-label .opt{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.2em;
  color:var(--moss-500);
}
.top2-input{
  width:100%;padding:11px 14px;
  border:1px solid var(--moss-300);background:#fff;
  font-family:var(--f-gothic);font-size:14px;color:var(--moss-900);
}
.top2-input:focus{
  outline:none;border-color:var(--shu-500);
  box-shadow:0 0 0 2px rgba(181,74,58,.15);
}
.top2-input::placeholder{color:var(--moss-300)}
.top2-hint{
  font-family:var(--f-mincho);font-size:11px;color:var(--moss-500);
  line-height:1.6;letter-spacing:.02em;
}

/* 提出ボタン（session画面の btn-confirm と同じ語彙） */
.top2-submit{
  width:100%;padding:14px;margin-top:4px;
  background:var(--moss-700);color:#fff;border:none;
  font-family:var(--f-mincho);font-weight:700;font-size:15px;
  letter-spacing:.12em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:12px;
  transition:background .12s;
}
.top2-submit:hover{background:var(--moss-900)}
.top2-submit .seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;background:var(--shu-500);color:#fff;
  font-family:var(--f-mincho);font-weight:900;font-size:12px;
  letter-spacing:0;line-height:1;
}

/* シーズン用：日付範囲の2列グリッド */
.top2-field-row{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}

/* バッジ（最近リスト用） */
.recent-badge{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.15em;
  padding:2px 6px;border:1px solid var(--moss-300);color:var(--moss-700);
  flex-shrink:0;
}
.recent-badge.season{color:var(--shu-500);border-color:var(--shu-300)}
.recent-badge.single{color:var(--moss-700);border-color:var(--moss-300)}

/* 最近リストにバッジ列を追加（5列で上書き — 元ルールより後で使うため詳細度を上げる） */
.top2-recents .top2-recents-list li{
  grid-template-columns:auto auto 1fr auto auto;
}

/* ── 下部：サンプル誘導 / 最近のシリーズ ── */
.top2-foot{
  margin-top:64px;padding-top:36px;
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
  max-width:1080px;margin-left:auto;margin-right:auto;width:100%;
}

.top2-foot-block{
  display:flex;flex-direction:column;gap:14px;
}
.top2-foot-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--moss-200);padding-bottom:8px;
}
.top2-foot-head h3{
  font-family:var(--f-mincho);font-weight:700;font-size:14px;
  color:var(--moss-900);letter-spacing:.05em;
  display:flex;align-items:baseline;gap:10px;
}
.top2-foot-head h3::before{
  content:"";display:inline-block;width:3px;height:12px;background:var(--shu-500);
}
.top2-foot-head .meta{
  font-family:var(--f-mono);font-size:9px;font-weight:700;letter-spacing:.25em;
  color:var(--moss-500);
}

/* サンプル */
.top2-sample{
  background:#fff;border:1px solid var(--moss-300);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:12px;
}
.top2-sample p{
  font-family:var(--f-mincho);font-size:13px;color:var(--moss-700);
  line-height:1.7;letter-spacing:.02em;
}
.top2-sample-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  flex:1 1 auto;
  padding:9px 16px;border:1px solid var(--moss-700);background:#fff;
  font-family:var(--f-mincho);font-weight:600;font-size:13px;
  color:var(--moss-900);letter-spacing:.06em;text-decoration:none;cursor:pointer;
}
.top2-sample-btn:hover{background:var(--moss-700);color:#fff}
.top2-sample-btn::after{content:"→";font-size:14px}

/* 最近のシリーズ */
.top2-recents{
  background:#fff;border:1px solid var(--moss-300);
}
.top2-recents-list{list-style:none}
.top2-recents-list li{
  display:grid;grid-template-columns:auto 1fr auto auto;
  gap:12px;align-items:center;
  padding:11px 18px;border-bottom:1px solid var(--moss-100);
}
.top2-recents-list li:last-child{border-bottom:none}
.top2-recents-list li:hover{background:var(--moss-25)}
.top2-recents-list .no{
  font-family:var(--f-mincho);font-weight:700;font-size:18px;
  color:var(--moss-300);width:24px;text-align:center;line-height:1;
}
.top2-recents-list .nm{
  font-family:var(--f-mincho);font-weight:600;font-size:14px;
  color:var(--moss-900);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.top2-recents-list .nm:hover{color:var(--shu-500)}
.top2-recents-list .dt{
  font-family:var(--f-mono);font-size:11px;color:var(--moss-500);
}
.top2-recents-list .del{
  width:22px;height:22px;
  border:1px solid var(--moss-200);background:#fff;
  color:var(--moss-500);font-size:12px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--f-mincho);
}
.top2-recents-list .del:hover{color:var(--negative);border-color:var(--negative)}

.top2-recents-foot{
  padding:10px 18px;border-top:1px solid var(--moss-200);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-mincho);font-size:11px;color:var(--moss-500);
  background:var(--moss-25);letter-spacing:.04em;
}

/* ── ページ最下：使い方 ── */
.top2-bottom{
  margin-top:48px;padding-top:18px;
  border-top:1px solid var(--moss-200);
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.25em;
  color:var(--moss-500);font-weight:700;
}
.top2-bottom a{color:var(--moss-500);text-decoration:none}
.top2-bottom a:hover{color:var(--shu-500)}

/* エラーメッセージ（実装独自） */
.top2-error{
  padding:8px 12px;border:1px solid var(--negative);
  background:rgba(192,57,43,.06);color:var(--negative);
  font-family:var(--f-gothic);font-weight:600;font-size:12px;
}
.top2-error[hidden]{display:none}

/* 「これまでの記録」が空のときの表示（実装独自） */
.top2-recents.top2-recents-empty{
  background:#fff;
}

/* タブ切替制御（mockup ではインラインだった分） */
.top2-pane{display:none}
.top2-pane.active{display:flex;flex-direction:column;gap:18px}