@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --paper: #EFE7D8;
  --paper-panel: #F7F2E7;
  --ink: #221F1A;
  --ink-soft: #55503F;
  --line: #C7B896;
  --navy: #2B3A55;
  --navy-soft: #4C5C7A;
  --seal: #A63A2E;
  --seal-soft: #C97B6C;
  --good: #3D6B4A;
  --radius-doc: 2px;

  --tint-sand:  #F1E9D6;
  --tint-sky:   #E7EEF2;
  --tint-sage:  #E9EFE4;
  --tint-blush: #F3E6E1;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.015) 0px, rgba(0,0,0,0.015) 1px, transparent 1px, transparent 3px);
  color: var(--ink);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.7;
}

h1,h2,h3,h4{
  font-family: 'Shippori Mincho', serif;
  font-weight: 700;
  margin: 0 0 .3em;
  color: var(--ink);
}

/* ---------- top nav ---------- */
.site-nav{
  border-bottom: 1px solid var(--line);
  background: var(--paper-panel);
}
.site-nav ul{
  max-width: 780px; margin: 0 auto; padding: .7rem 1.4rem;
  list-style:none; display:flex; flex-wrap:wrap; gap: 1.4rem;
}
.site-nav a{
  font-size: .84rem; color: var(--navy); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover{ border-bottom-color: var(--navy); }
.site-nav a[aria-current="page"]{ color: var(--seal); border-bottom-color: var(--seal); }

/* ---------- header ---------- */
.site-header{
  border-bottom: 3px double var(--line);
  padding: 2.4rem 1.4rem 2rem;
}

/* ---------- simple page header (sub-pages) ---------- */
.page-header{
  border-bottom: 3px double var(--line);
  padding: 2rem 1.4rem 1.6rem;
}
.page-header .header-inner{ display:flex; align-items:center; gap: 1.4rem; }
.page-header-icon{ flex: 0 0 auto; width: 60px; height: 60px; }
.page-header-text{ flex: 1; min-width:0; }
.page-header h1{ font-size: 1.5rem; margin-bottom: .5rem; }
.page-header .lede{ max-width: 62ch; }
@media (max-width: 480px){
  .page-header .header-inner{ align-items:flex-start; }
  .page-header-icon{ width:44px; height:44px; }
}

/* ---------- article content (sub-pages) ---------- */
.article{ max-width: 680px; margin: 0 auto; }
.article section{
  margin-bottom: 1.8rem;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius-doc);
  background: var(--tint-sand);
}
.article section:nth-of-type(4n+2){ background: var(--tint-sky); }
.article section:nth-of-type(4n+3){ background: var(--tint-sage); }
.article section:nth-of-type(4n+4){ background: var(--tint-blush); }
.article h2{ font-size: 1.15rem; margin-bottom: .6rem; }
.article h3{ font-size: 1rem; margin: 1.1rem 0 .4rem; font-family:'Noto Sans JP',sans-serif; font-weight:700; }
.article h3:first-child{ margin-top: 0; }
.article p{ margin: 0 0 .9rem; color: var(--ink); }
.article ul, .article ol{ margin: 0 0 .9rem; padding-left: 1.3rem; }
.article li{ margin-bottom: .35rem; }
.article table{ width:100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 1.2rem; font-size:.88rem; background: transparent; }
.article th, .article td{
  border-bottom: 1px solid var(--line); padding:.5rem .5rem; text-align:left; vertical-align:top;
  overflow-wrap: break-word; word-break: break-word;
}
.article th{ color: var(--ink-soft); font-weight:500; width: 32%; }

/* 取得する情報などの一覧を、行の高さがバラつく表の代わりに使う定義リスト */
.info-list{ margin: 0 0 1rem; }
.info-item{ padding: .6rem 0; border-bottom: 1px solid var(--line); }
.info-item:last-child{ border-bottom: none; }
.info-item dt{ font-weight: 700; margin-bottom: .2rem; }
.info-item dd{ margin: 0; color: var(--ink-soft); font-size: .88rem; }

.article section.note-box{
  background: rgba(166,58,46,.07); border-left:3px solid var(--seal);
  padding: 1.1rem 1.2rem; font-size: .88rem; color: var(--ink-soft);
}
.article .updated{ font-size: .8rem; color: var(--ink-soft); margin-top: -1rem; margin-bottom: 1.4rem; background:none; padding:0; }

/* ---------- 小さな挿絵アイコン（section-icon） ---------- */
.section-icon{ display:block; width:48px; height:48px; margin: 0 0 .6rem; }
.expert-callout .section-icon{ margin: 0 auto .6rem; }

/* ---------- 専門家への案内（トップページ） ---------- */
.expert-callout{
  background: var(--navy) !important;
  color: #fff;
  text-align: center;
  padding: 1.8rem 1.6rem;
}
.expert-callout h3{ color:#fff; margin-top:0; }
.expert-callout p{ color: rgba(255,255,255,.85); }
.expert-callout-link{
  display:inline-block; width:auto; margin-top:.6rem;
  background:#fff; color: var(--navy); border-color:#fff;
}
.expert-callout-link:hover{ background: var(--tint-sand); }

/* ---------- ホームのイラスト（ログインへのリンク） ---------- */
.hero-illustration-link{
  display:block; max-width: 780px; margin: 1.6rem auto 0; padding: 0 1.4rem;
  text-decoration:none; text-align:center;
}
.hero-illustration{ width:100%; max-width: 480px; height:auto; }
.hero-illustration-caption{
  display:block; margin-top:.5rem; font-size:.85rem; color: var(--navy);
  border-bottom: 1px solid transparent;
}
.hero-illustration-link:hover .hero-illustration-caption{ border-bottom-color: var(--navy); }
.hero-illustration-link:hover .hero-illustration{ filter: brightness(1.03); }

/* ---------- レイアウト用 header-inner ---------- */
.header-inner{
  max-width: 780px;
  margin: 0 auto;
  display:flex;
  gap: 1.6rem;
  align-items:flex-start;
}
.header-text{ flex:1; min-width:0; }
.site-header h1{ font-size: 2.1rem; margin-bottom:.5rem; }
.lede{ margin:0; color: var(--ink-soft); max-width: 58ch; }
.lede-notes{ margin:.7rem 0 0; padding-left: 1.2rem; max-width: 62ch; color: var(--ink-soft); font-size: .95rem; }
.lede-notes li{ margin-bottom:.4rem; }
.lede-notes li:last-child{ margin-bottom:0; }

/* ---------- layout ---------- */
main{ max-width: 780px; margin: 0 auto; padding: 2rem 1.4rem 4rem; }

.panel{
  background: var(--paper-panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-doc);
  padding: 1.8rem 1.6rem;
  margin-bottom: 1.6rem;
}
.panel--sage{ background: var(--tint-sage); }
.panel--sky{ background: var(--tint-sky); }
.panel--sand{ background: var(--tint-sand); }
.panel--blush{ background: var(--tint-blush); }
.panel h2{ font-size: 1.2rem; display:flex; align-items:center; gap:.7rem; margin-bottom:1.1rem;}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.7rem; height:1.7rem; border:1px solid var(--navy); color:var(--navy);
  font-family:'Shippori Mincho',serif; font-size:.95rem; border-radius:50%;
  flex:0 0 auto;
}

.hint{ font-size:.85rem; color: var(--ink-soft); margin:.6rem 0 0; }

/* ---------- 実行回数（stats） ---------- */
.stats-list{ list-style:none; margin: 0; padding:0; display:flex; flex-wrap:wrap; gap: 1.4rem; }
.stats-list li{
  display:flex; flex-direction:column; gap:.2rem;
  background: rgba(255,255,255,.5); border:1px solid var(--line); border-radius: var(--radius-doc);
  padding: .8rem 1.1rem; min-width: 160px;
}
.stats-label{ font-size:.78rem; color: var(--ink-soft); }
.stats-value{ font-family:'Shippori Mincho',serif; font-size:1.6rem; color: var(--navy); }

input[type=text], input[type=email], textarea{
  font-family:'Noto Sans JP',sans-serif;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-doc);
  font-size: .92rem;
}
input:focus, textarea:focus{ outline: 2px solid var(--navy-soft); outline-offset:1px; }

/* ---------- buttons ---------- */
.btn{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:500;
  font-size:.92rem;
  padding: .6rem 1.2rem;
  border-radius: var(--radius-doc);
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor:pointer;
  transition: transform .12s ease, background .15s ease;
}
.btn:hover:not(:disabled){ background: var(--navy-soft); }
.btn:active:not(:disabled){ transform: translateY(1px); }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-quiet{ background: transparent; color: var(--navy); }
.btn-quiet:hover:not(:disabled){ background: rgba(43,58,85,0.08); }
.btn-danger{ border-color: var(--seal); color: var(--seal); }
.btn-danger:hover{ background: rgba(166,58,46,0.08); }
.btn-primary{ display:block; width:100%; margin-top: .4rem; padding:.8rem; font-size:1rem; }

/* ---------- upload ---------- */
.upload-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 640px){ .upload-grid{ grid-template-columns: 1fr; } }

.upload-col h3{ font-size: 1rem; margin-bottom:.6rem; }
.upload-col h3 .sub{ display:block; font-family:'Noto Sans JP',sans-serif; font-weight:400; font-size:.78rem; color:var(--ink-soft); margin-top:.15rem; }

.dropzone{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-doc);
  padding: 1.6rem 1rem;
  text-align:center;
  cursor:pointer;
  background: rgba(255,255,255,.4);
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover{ border-color: var(--navy-soft); background: rgba(255,255,255,.7); }
.dz-main{ font-size:.9rem; }
.dz-sub{ font-size:.76rem; color: var(--ink-soft); }

.thumb-list{
  list-style:none; margin: .8rem 0 0; padding:0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap:.5rem;
}
@media (max-width:480px){ .thumb-list{ grid-template-columns: repeat(3, 1fr); } }
.thumb-list li{
  position:relative; aspect-ratio: 210/297;
  border:1px solid var(--line); background:#fff; overflow:hidden; border-radius:2px;
}
.thumb-list img{ width:100%; height:100%; object-fit:cover; display:block; }
.thumb-list button{
  position:absolute; top:2px; right:2px; width:18px; height:18px; line-height:1;
  border:none; border-radius:50%; background: rgba(34,31,26,.75); color:#fff; font-size:.7rem; cursor:pointer;
}

/* ---------- analyze / score ---------- */
#analyze-status{ min-height:1.2em; }

.score-block{ display:flex; align-items:center; gap:1.4rem; margin: 1.2rem 0 1.6rem; flex-wrap:wrap; }
.score-ring{
  flex:0 0 auto; width:104px; height:104px; border-radius:50%;
  border: 6px solid var(--navy);
  display:flex; align-items:baseline; justify-content:center;
  font-family:'Shippori Mincho',serif;
}
#score-number{ font-size:2rem; }
.score-percent{ font-size:1rem; margin-left:.1rem; }
.score-text{ flex:1; min-width:180px; }
.score-verdict{ font-family:'Shippori Mincho',serif; font-size:1.15rem; margin:0 0 .3rem; }
.score-detail{ margin:0; color:var(--ink-soft); font-size:.88rem; }

.feature-table{ width:100%; border-collapse: collapse; margin-bottom:1.4rem; font-size:.85rem; }
.feature-table th, .feature-table td{ border-bottom:1px solid var(--line); padding:.5rem .4rem; text-align:left; }
.feature-table th{ color:var(--ink-soft); font-weight:500; }

/* ---------- certificate controls ---------- */
.cert-controls{ display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end; margin-bottom:1.4rem; }
.cert-controls label{ display:flex; flex-direction:column; gap:.3rem; font-size:.8rem; color:var(--ink-soft); flex:1 1 200px; }
.cert-controls input{ flex:none; }
.cert-controls .btn{ margin-left:auto; }

.cert-inquire-link{ display:block; width: fit-content; margin: 1.2rem auto 0; text-decoration:none; text-align:center; }

/* ---------- certificate document ---------- */
.certificate{
  position: relative;
  background:#fff;
  border: 1px solid var(--line);
  padding: 2.4rem 2rem;
  max-width: 680px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(34,31,26,.07);
  overflow: hidden;
}
/* 様式の模倣・偽造対策の透かし。サイト名を背景に薄く繰り返し表示する。
   コンテンツ本文は不透明色で上に重なるため、可読性には影響しない。 */
.certificate::before{
  content: "筆跡照合支援ツール　筆跡照合支援ツール　筆跡照合支援ツール";
  position: absolute;
  top: 0; left: -20%;
  width: 140%;
  text-align: center;
  transform: rotate(-24deg);
  transform-origin: center;
  font-family: 'Shippori Mincho', serif;
  font-size: 1.3rem;
  line-height: 4.4rem;
  letter-spacing: .18em;
  color: rgba(43,58,85,.05);
  white-space: pre-wrap;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.cert-header, .cert-meta, .cert-result, .cert-features, .cert-note, .cert-disclaimer{
  position: relative;
  z-index: 1;
}
.cert-header{ text-align:center; border-bottom:2px solid var(--ink); padding-bottom:1rem; margin-bottom:1.4rem; break-inside: avoid; page-break-inside: avoid; }
.cert-header h3{ font-size:1.5rem; letter-spacing:.25em; text-indent:.25em; }
.cert-id{ font-size:.75rem; color:var(--ink-soft); margin:.4rem 0 0; }
.cert-verify{ font-size:.72rem; color:var(--ink-soft); margin:.2rem 0 0; letter-spacing:.03em; }

.cert-meta{ width:100%; border-collapse:collapse; margin-bottom:1.6rem; font-size:.9rem; break-inside: avoid; page-break-inside: avoid; }
.cert-meta th{ width:7em; text-align:left; color:var(--ink-soft); font-weight:500; padding:.4rem 0; vertical-align:top; }
.cert-meta td{ padding:.4rem 0; }

.cert-result{ text-align:center; margin: 1.6rem 0; break-inside: avoid; page-break-inside: avoid; }
.cert-result h4{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.4rem; }
.cert-score{ font-family:'Shippori Mincho',serif; font-size:2.6rem; margin:0; }
.cert-verdict{ margin:.2rem 0 0; font-size:1rem; }

.cert-features h4{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.5rem; }
.cert-feature-table{ width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:1.6rem; }
.cert-feature-table th, .cert-feature-table td{ border-bottom:1px solid var(--line); padding:.4rem; text-align:left; }
.cert-feature-table tr{ break-inside: avoid; page-break-inside: avoid; }

.cert-note h4{ font-size:.9rem; color:var(--ink-soft); margin-bottom:.3rem; }
.cert-note p{ margin:0 0 1.6rem; }

.cert-disclaimer{ background: rgba(166,58,46,.05); border-left:3px solid var(--seal); padding: .9rem 1rem; margin-bottom:1.8rem; break-inside: avoid; page-break-inside: avoid; }
.cert-disclaimer h4{ font-size:.82rem; color:var(--seal); margin-bottom:.3rem; }
.cert-disclaimer p{ margin:0; font-size:.82rem; color:var(--ink-soft); }

/* ---------- inquiry form ---------- */
.inquiry-form{ display:flex; flex-direction:column; gap:.7rem; max-width: 480px; }
.inquiry-form textarea{ resize: vertical; font-family:inherit; }
.inquiry-form .btn{ align-self:flex-start; }

/* ---------- footer ---------- */
.site-footer{ text-align:center; padding: 1.6rem; font-size:.78rem; color: var(--ink-soft); }

/* ---------- print ---------- */
@page{ size: A4; margin: 15mm; }
@media print{
  .site-header, .site-nav, .site-footer, .page-header,
  #panel-auth, #panel-case, #panel-upload, #panel-analyze, #panel-about,
  .expert-callout, .hero-illustration-link,
  #panel-certificate > h2,
  .cert-controls, .cert-inquire-link{ display:none !important; }
  body{ background:#fff; }
  main{ margin:0; padding:0; }
  #panel-certificate{ padding:0; margin:0; background:none; }
  .certificate{ box-shadow:none; border:none; margin:0; max-width:none; }
}