/* ==========================================================
   デザイントークン
   紙質のような生成り背景 + 深い森緑（爬虫類の鱗を想起） + 真鍮色（証書の箔押し）
   見出しは明朝体（証書らしい格式）、本文はゴシック体
   ========================================================== */
:root{
  --paper: #F5F1E5;
  --paper-deep: #EDE6D4;
  --ink: #2A271F;
  --ink-soft: #5B5548;
  --forest: #1F4B43;
  --forest-deep: #163832;
  --brass: #A8823C;
  --brass-soft: #D9C79A;
  --line: #CFC5A9;
  --danger: #A63D40;
  --white: #FFFDF8;

  --serif: "Shippori Mincho", "Yu Mincho", serif;
  --sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;

  --radius: 3px;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
}

a{ color: var(--forest); }

/* ---------- 管理画面: 実務的で無装飾なUI ---------- */

.admin-shell{
  min-height:100vh;
  background: #FBFAF6;
}

.admin-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 28px;
  background: var(--forest-deep);
  color: var(--white);
}

/* タイトル（.brand）とタイトルバー・ショートカットアイコン（.topbar-shortcuts）を
   まとめて1つの塊として扱うためのラッパー。.admin-topbarの直接の子はこの
   .brand-groupとnavの2つだけに保つことで、justify-content:space-betweenの挙動
   （左端=タイトル側、右端=ナビ側）を崩さずに、その内部でショートカットアイコンを
   タイトルのすぐ右に並べられる。 */
.admin-topbar .brand-group{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.admin-topbar .brand{
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: .02em;
}

.admin-topbar .brand span{ color: var(--brass-soft); }

.admin-topbar .brand a{ color: inherit; text-decoration: none; }

.topbar-shortcuts{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.topbar-shortcut-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background: rgba(255,255,255,.16);
  font-size:1rem;
  line-height:1;
  text-decoration:none;
  flex-shrink:0;
  transition: background .15s;
}
.topbar-shortcut-icon:hover{ background: rgba(255,255,255,.3); }

.admin-topbar nav a{
  color: var(--white);
  text-decoration:none;
  margin-left: 18px;
  font-size: .88rem;
  opacity:.85;
}
.admin-topbar nav a:hover{ opacity:1; text-decoration:underline; }

.admin-main{
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}
.admin-main.admin-main-wide{
  max-width: 1300px;
}

.admin-main h1{
  font-family: var(--serif);
  font-size: 1.4rem;
  margin: 0 0 20px;
}

.admin-main h2{
  font-family: var(--serif);
  font-size: 1.1rem;
  margin: 28px 0 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
}

.toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom: 14px;
}

.btn{
  display:inline-block;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--forest);
  background: var(--forest);
  color: var(--white);
  text-decoration:none;
  font-size: .88rem;
  cursor:pointer;
}
.btn:hover{ background: var(--forest-deep); }
.btn:disabled, .btn.secondary:disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.secondary{
  background: transparent;
  color: var(--forest);
}
.btn.danger{
  background: var(--danger);
  border-color: var(--danger);
}
/* システム管理画面の.vip-badgeと同じ、小さくて丸みのあるバッジ風ボタン
   （種名マスタ管理の「和名」ボタン等、見た目は控えめに、押せることが分かるように使う） */
.btn.btn-blue{
  padding: 1px 9px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
  background: #2563eb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.btn.btn-blue:hover{ background: #1d4fc7; }

table.data{
  width:100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
}
table.data th, table.data td{
  text-align:left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
table.data th{
  background: var(--paper-deep);
  font-weight: 700;
}
table.data tr:last-child td{ border-bottom:none; }
table.data .muted{ color: var(--ink-soft); font-size:.82rem; }
table.data th a.sort-link{
  color: var(--ink);
  text-decoration:none;
  display:inline-block;
}
table.data th a.sort-link:hover{ color: var(--forest); text-decoration:underline; }
table.users-table{ table-layout: fixed; min-width: 1380px; }
/* ユーザー名・メールアドレス・アカウント種別の3列は横スクロールしても常に見えるように固定する */
table.users-table td.sticky-col{
  position: sticky;
  z-index: 2;
  background: var(--white);
}
table.users-table th.sticky-col{
  position: sticky;
  z-index: 3;
  background: var(--paper-deep);
}
table.users-table .sticky-col-1{ left: 0; }
table.users-table .sticky-col-2{ left: 140px; }
table.users-table .sticky-col-3{
  left: 330px;
  box-shadow: 3px 0 4px rgba(0,0,0,.10);
}

.log-table-scroll{
  max-height: 640px;
  overflow-y: auto;
  overflow-x: auto;
}
.log-table-scroll table.data thead th{
  position: sticky;
  top: 0;
  z-index: 1;
}
table.users-table th, table.users-table td{ padding: 8px 10px; vertical-align: middle; overflow-wrap: break-word; }

.empty-state{
  padding: 40px;
  text-align:center;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  background: var(--white);
}

/* ---------- フォーム ---------- */

.card{
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
/* 隣接するカード同士がくっついて見えないよう、上に隣接する要素がある場合は間隔を空ける
   （ツール一覧・交配相性チェック・孵化予定日推定など、.cardを縦に並べる画面全般に適用） */
.card + .card{
  margin-top: 20px;
}

.qa-category{
  margin: 28px 0 10px;
  font-size: 1.05rem;
  color: var(--forest-deep);
}
.qa-category:first-child{ margin-top: 0; }
.qa-list{ display:flex; flex-direction:column; gap: 10px; }
.qa-item{
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-deep);
  padding: 2px 16px;
}
.qa-item summary{
  cursor: pointer;
  font-weight: 700;
  padding: 12px 0;
  list-style: none;
}
.qa-item summary::-webkit-details-marker{ display:none; }
.qa-item summary::before{
  content: "Q. ";
  color: var(--forest-deep);
}
.qa-item summary::after{
  content: "＋";
  float: right;
  color: var(--ink-soft);
}
.qa-item[open] summary::after{ content: "－"; }
.qa-item .qa-answer{
  font-size: .88rem;
  line-height: 1.85;
  padding: 0 0 14px;
  color: var(--ink);
}
.qa-item .qa-answer a{ color: inherit; }

form .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
form .grid.single{ grid-template-columns: 1fr; }

.field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
.field label{ font-size:.82rem; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: var(--sans);
  font-size: .92rem;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.field input[type="checkbox"], .field input[type="radio"]{
  width: auto;
  padding: 0;
  border: none;
  background: none;
  flex: none;
}
.field textarea{ resize: vertical; min-height: 54px; }
.field.full{ grid-column: 1 / -1; }
.hint{ font-size:.78rem; color: var(--ink-soft); margin: 4px 0 0; }

.parent-block{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: var(--paper-deep);
  margin-top: 8px;
}
.parent-block .hint{ font-size:.78rem; color: var(--ink-soft); margin: 4px 0 10px; }

.form-actions{
  margin-top: 22px;
  display:flex;
  gap:10px;
}

.error-box{
  background:#F7E4E4;
  border:1px solid var(--danger);
  color:#6b1f21;
  padding:10px 14px;
  border-radius: var(--radius);
  margin-bottom:16px;
  font-size:.88rem;
}
.error-box.with-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.error-box.with-action .btn{ flex:none; white-space:nowrap; }

/* ---------- プラン選択カード ---------- */

.plan-cards{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:stretch;
}
.plan-card{
  flex:1 1 220px;
  min-width:220px;
  max-width:320px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 22px;
  display:flex;
  flex-direction:column;
  position:relative;
}
.plan-card.current{
  border: 2px solid var(--forest);
  background: var(--paper-deep);
}
.plan-card.recommended{ border-color: var(--brass); }
.plan-card .plan-badge{
  position:absolute;
  top:-11px;
  right:18px;
  background: var(--forest);
  color: var(--white);
  font-size:.72rem;
  padding:3px 10px;
  border-radius: 12px;
  letter-spacing:.02em;
}
.plan-card h3{
  margin: 0 0 4px;
  font-family: var(--serif);
  font-size: 1.15rem;
}

/* システム管理画面: Administratorが有効期限なしで有料プランを手動付与したユーザーに付けるバッジ */
.vip-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 7px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  background:#2563eb;
  border-radius:8px;
  vertical-align:middle;
}
.plan-card .plan-tagline{
  font-size:.78rem;
  color: var(--ink-soft);
  margin-bottom: 14px;
  min-height: 2.2em;
}
.plan-card .plan-price{
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 2px;
}
.plan-card .plan-price small{ font-size:.62rem; font-weight:400; color: var(--ink-soft); }
.plan-card .plan-features{
  list-style:none;
  padding:0;
  margin: 16px 0 20px;
  font-size:.82rem;
  color: var(--ink);
  flex:1;
}
.plan-card .plan-features li{ padding: 3px 0; }
.plan-card .plan-features li::before{ content:"✓ "; color: var(--forest); font-weight:700; }
.plan-card .plan-cta{
  width:100%;
  text-align:center;
  box-sizing:border-box;
}
.plan-card .plan-note{
  font-size:.74rem;
  color: var(--ink-soft);
  text-align:center;
  margin-top:6px;
}

/* ---------- ログイン画面 ---------- */

.login-shell{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--forest-deep);
}
.login-card{
  width: 340px;
  background: var(--white);
  padding: 32px;
  border-radius: var(--radius);
}
.login-logo{
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto 16px;
}
.login-card h1{
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 4px;
  text-align: center;
}
.login-card .sub{
  font-size: .82rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.login-card .field{ margin-bottom: 14px; }
.login-card .btn{ width:100%; text-align:center; margin-top:6px; }

/* ==========================================================
   公開閲覧ページ：証書そのものとして見せる
   ========================================================== */

.cert-shell{
  padding: 48px 16px;
  display:flex;
  justify-content:center;
}

.cert{
  width: 100%;
  max-width: 1000px;
  background: var(--white);
  border: 1px solid var(--brass-soft);
  outline: 1px solid var(--forest-deep);
  outline-offset: 6px;
  padding: 44px 40px;
}

.cert-header{
  text-align:center;
  margin-bottom: 30px;
}
.cert-header .eyebrow{
  font-size: .72rem;
  color: var(--brass);
  letter-spacing: .08em;
}
.cert-header h1{
  font-family: var(--serif);
  font-size: 1.7rem;
  margin: 6px 0 4px;
  color: var(--forest-deep);
}
.cert-header .dates{
  font-size: .78rem;
  color: var(--ink-soft);
}
.cert-disclaimer{
  margin-top: 10px;
  font-size: .74rem;
  color: var(--ink-soft);
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  text-align: left;
}
.cert-disclaimer-top{
  margin-top: -32px;
  margin-bottom: 24px;
  text-align: center;
}
.cert-report{
  text-align: center;
  margin-top: 8px;
}
.cert-report summary{
  font-size: .78rem;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
}
.cert-report .report-form{
  max-width: 420px;
  margin: 10px auto 0;
  text-align: left;
}
.cert-report textarea{
  width: 100%;
  min-height: 70px;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
}
.cert-report .report-note{
  font-size: .72rem;
  color: var(--ink-soft);
  margin: 6px 0 0;
}

.cert-photo{
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 20px 0 28px;
}
.cert-photo-scroll{
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}
.cert-photo img{
  width: 152px;
  height: 152px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--paper-deep);
}
.cert-photo-scroll img{
  flex: 0 0 auto;
}
.cert-photo .placeholder{
  width:152px; height:152px;
  border: 1px dashed var(--line);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft);
  font-size: .8rem;
}

.cert-section{ margin: 26px 0; }
.cert-section h2{
  font-family: var(--serif);
  font-size: 1rem;
  text-align:center;
  color: var(--forest);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
  margin: 0 0 14px;
}

.cert-row{
  display:flex;
  justify-content:center;
  gap: 8px;
  font-size: .92rem;
  padding: 4px 0;
  text-align:center;
}
.cert-row .k{ color: var(--ink-soft); }
.cert-row .v{ font-weight:500; }

.cert-qr{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-top: 18px;
}
.cert-qr img{ width: 96px; height:96px; }
.cert-qr .caption{ font-size:.72rem; color: var(--ink-soft); }

.cert-footer{
  margin-top: 30px;
  text-align:center;
  font-size: .68rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 10px;
}
.cert-logo-row{
  margin-top: 16px;
  text-align: center;
}
.cert-logo-row img{
  height: 72px;
  width: auto;
  opacity: .9;
}

/* 血統書本体とは別の「追加ページ」として見せるノート欄。
   血統書カードと同じ緑ふち（outline）の様式で、血統書のすぐ下に別カードとして表示する。
   .cert-shellを血統書本体と共有せず専用のものにしているのは、.cert-shellがflexで
   子要素を横並びにするため（同じシェルに2枚のカードを置くと横に並んでしまう）。 */
.notes-shell{
  padding-top: 0;
}
.notes-page .cert-header{ margin-bottom: 18px; }
.notes-body{
  white-space: pre-wrap;
  text-align: left;
  font-size: .92rem;
  line-height: 1.8;
  color: var(--ink);
}

/* ---------- 血統図ツリー ---------- */

.pedigree-wrap{
  overflow-x:auto;
  padding: 10px 4px 20px;
  display:flex;
  justify-content:center;
}

.tree-node{
  display:flex;
  align-items:stretch;
}

.tree-children{
  display:flex;
  flex-direction:column;
  margin-left: 22px;
}
.tree-children > .tree-node{ flex: 1; }
.tree-children > .tree-node + .tree-node{ margin-top: 10px; }

.node-box{
  width: 168px;
  flex-shrink:0;
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 8px 10px;
  font-size: .74rem;
  position: relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height: 74px;
}
.node-box.has-link{
  background: #EAF1EE;
  border-color: var(--forest);
}
.node-box.closed-box{
  background: repeating-linear-gradient(
    45deg,
    var(--paper-deep),
    var(--paper-deep) 6px,
    #E4E0D4 6px,
    #E4E0D4 12px
  );
  border-color: var(--line);
  align-items:center;
  text-align:center;
}
.node-box.closed-box .no-data{
  font-size:.68rem;
  line-height:1.4;
}
.node-label{
  font-size: .64rem;
  color: var(--brass);
  letter-spacing: .04em;
  margin-bottom:3px;
}
.node-name{ font-weight:700; }
.node-code, .node-notes{ color: var(--ink-soft); font-size:.68rem; }
.node-box .no-data{
  color: var(--ink-soft);
  font-size:.72rem;
  text-align:center;
}
.node-link-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
}
.node-link-row img{ width: 34px; height:34px; }
.node-link-row a{
  font-size:.66rem;
  text-decoration:none;
}

.not-found{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:10px;
  font-family: var(--sans);
  color: var(--ink-soft);
}

.maintenance-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--sans);
}
.maintenance-box{
  max-width:480px;
  margin:24px;
  padding:32px 28px;
  text-align:center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
}
.maintenance-box .maintenance-icon{ font-size:2.4rem; margin-bottom:8px; }
.maintenance-box h1{ font-size:1.2rem; margin:0 0 14px; }
.maintenance-box p{ color: var(--ink-soft); line-height:1.7; }

/* ---------- アルバム機能 ---------- */

.album-frame{
  border: 5px solid var(--forest-deep);
  border-radius: var(--radius);
  background: var(--white);
  padding: 20px;
}

.album-strip{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.album-thumb{
  position:relative;
  width: 100px;
  height: 100px;
  border-radius: 6px;
  border: 2px solid var(--line);
  overflow:hidden;
  cursor:pointer;
  background: var(--paper-deep);
  flex: none;
}
.album-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.album-thumb.selected{
  border-color: var(--forest-deep);
  border-width: 3px;
}
.album-thumb-delete{
  display:none;
  position:absolute;
  left:0; right:0; bottom:0;
  border:none;
  background: var(--danger);
  color: var(--white);
  font-size:.72rem;
  padding: 4px 0;
  cursor:pointer;
}
.album-thumb.selected .album-thumb-delete{ display:block; }

.album-add-tile{
  width: 100px;
  height: 100px;
  border-radius: 6px;
  border: 2px dashed var(--forest);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.8rem;
  color: var(--forest);
  cursor:pointer;
  flex: none;
}
.album-add-tile:hover{ background: var(--paper-deep); }

.album-preview{
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.album-preview img{
  max-width:100%;
  max-height: 520px;
  object-fit:contain;
  display:block;
}
.album-empty{
  color: var(--ink-soft);
  font-size:.9rem;
  padding: 40px 20px;
  text-align:center;
}

@media (max-width: 640px){
  form .grid{ grid-template-columns: 1fr; }
  .cert{ padding: 28px 18px; }
  .album-thumb, .album-add-tile{ width: 80px; height: 80px; }

  /* ヘッダー（.admin-topbar）は、既定ではタイトル（.brand-group）とナビ（nav）を横並びに
     するだけで、幅の狭い画面向けの折り返し対応を特に行っていない。そのためリンク数が多い
     ページ（管理画面等）でスマホ幅の実機で開くと、タイトルの文字列とnav内の各リンクが
     どちらも中途半端に折り返され、互いに入り乱れて読みにくくなってしまう。
     レプノート機能（repnote_view_toggle.html）は専用のPC/スマホ切替トグルを持ち、
     body.repnote-mobileクラスの有無でこれと似た2段レイアウト（タイトル上段・ナビ下段）に
     切り替えているが、それ以外の画面（約40テンプレート）には同等の対応が無かった。
     ここでは実際の画面幅（メディアクエリ）を基準に、同じ考え方の2段レイアウトを
     サイト全体のヘッダーに適用する（body.repnote-mobile側の指定の方が詳細度が高いため、
     レプノートページでは引き続きそちらが優先される＝このルールと競合しない）。 */
  .admin-topbar{
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
  }
  .admin-topbar .brand-group{ flex: 1 1 100%; }
  .admin-topbar .brand{ font-size: .95rem; }
  .admin-topbar nav{
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    width: 100%;
    justify-content: flex-end;
  }
  .admin-topbar nav a{ margin-left: 0; }
}