/* BACKSPACE Productions Inc. design-system 準拠のダーク UI
   tokens: /assets/design/tokens.css（design-system/assets/tokens.css のコピー） */

@font-face { font-family: 'itc'; src: url('/assets/design/fonts/itc-avant-garde-gothic-std-demi.otf') format('opentype'); }
@font-face { font-family: 'itc-bold'; src: url('/assets/design/fonts/ITCAvantGardeStd-Bold.otf') format('opentype'); }

/* ---- reset (destyle 相当・最小) ---- */
*, *::before, *::after { box-sizing: border-box; border-style: solid; border-width: 0; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, fieldset, legend, table, th, td { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: bottom; }
input, button, textarea, select { font: inherit; color: inherit; background: transparent; border-radius: 0; appearance: none; -webkit-appearance: none; }
button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }

/* ---- base ---- */
html {
  font-size: 10px;
  color: var(--bsp-white);
  background-color: var(--bsp-black);
  -webkit-font-smoothing: antialiased;
}
body {
  font-family: var(--bsp-font-body);
  font-weight: 700;
  letter-spacing: var(--bsp-tracking);
  font-size: var(--bsp-fs-body);
  line-height: var(--bsp-leading-body);
  background: var(--bsp-black);
  color: var(--bsp-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--bsp-light-gray); color: var(--bsp-black); }
a { color: var(--bsp-light-gray); text-decoration: underline; transition: color var(--bsp-speed); }
a:hover { color: var(--bsp-gray); }
em { font-style: normal; color: var(--bsp-light-blue); font-size: 82%; }
h1, h2, h3, h4 { font-family: var(--bsp-font-heading); line-height: var(--bsp-leading-heading); }

/* ---- header / footer (navigation.html) ---- */
.site-header {
  background: rgba(0, 0, 0, .9);
  padding: 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.site-header .logo { width: 26rem; display: block; }
.site-header .logo img { width: 100%; display: block; }
.site-header nav { font-family: var(--bsp-font-heading); text-transform: uppercase; text-align: right; font-size: 1.8rem; }
.site-header nav a { color: var(--bsp-white); text-decoration: none; padding: .5rem 1.2rem; }
.site-header nav a:hover { color: var(--bsp-gray); }
.site-header nav a.current { border-bottom: 2px double; }

main { flex: 1; width: 92%; max-width: var(--bsp-max-prose); margin: 0 auto; padding: 4rem 0 10rem; }
main.wide { max-width: var(--bsp-max-article); }

.site-footer {
  margin-top: 3rem;
  padding: 6rem 5rem 0;
  border-top: 1px solid var(--bsp-dark-gray);
  text-align: center;
  font-size: 1.4rem;
}
.site-footer .ci { width: 17rem; margin: 0 auto 3rem; }
.site-footer .ci img { width: 100%; }
.site-footer p { color: var(--bsp-gray); }
.site-footer .copyright { display: block; padding: 3rem; letter-spacing: 0; color: var(--bsp-gray); }

/* ---- typography (typography.html) ---- */
.page-title {
  font-size: var(--bsp-fs-h1);
  letter-spacing: var(--bsp-tracking-tight);
  line-height: 1.2;
  text-transform: uppercase;
  margin-bottom: 4rem;
}
.page-title small {
  display: block;
  color: var(--bsp-light-gray);
  font-size: 2rem;
  letter-spacing: var(--bsp-tracking);
  text-transform: none;
  margin-top: .5rem;
  font-family: var(--bsp-font-body);
}
.section-title {
  font-size: var(--bsp-fs-h3);
  letter-spacing: var(--bsp-tracking-tight);
  margin: 6rem 0 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px dotted var(--bsp-dark-gray);
}
.section-title:first-child { margin-top: 0; }
.section-title small { color: var(--bsp-gray); font-size: 1.3rem; letter-spacing: 0; margin-left: 1rem; font-family: var(--bsp-font-body); }
.meta { font-size: var(--bsp-fs-meta); color: var(--bsp-gray); letter-spacing: 0; }
.meta .sep { font-size: 1rem; color: var(--bsp-dark-gray); margin: 0 .5rem; position: relative; top: -2px; }
p + p { margin-top: 1.5rem; }
.lead { margin-bottom: 3rem; }

/* ---- CTA button (buttons.html: a.more) ---- */
.more {
  display: inline-block;
  padding: 1.6rem 3.6rem;
  border: 4px double var(--bsp-light-gray);
  color: var(--bsp-white);
  text-decoration: none;
  font-size: 2.2rem;
  font-family: var(--bsp-font-heading);
  letter-spacing: var(--bsp-tracking);
  text-transform: uppercase;
  background: transparent;
  transition: background-color .15s, color .15s;
  line-height: 1.2;
}
.more:hover { background-color: var(--bsp-light-gray); color: var(--bsp-black); }
.more[disabled], .more.is-disabled { opacity: .35; cursor: not-allowed; }
.more[disabled]:hover, .more.is-disabled:hover { background: transparent; color: var(--bsp-white); }
p.button { text-align: center; margin: 5rem 0 3rem; }
.more.small { font-size: 1.6rem; padding: 1rem 2.4rem; }

/* ---- forms ---- */
.field { margin-bottom: 2.6rem; }
.field label {
  display: block;
  font-size: var(--bsp-fs-meta);
  color: var(--bsp-gray);
  letter-spacing: 0;
  margin-bottom: .6rem;
}
.field label em { margin-left: .6rem; }
.field .hint { font-size: 1.3rem; color: var(--bsp-gray); letter-spacing: 0; margin-top: .6rem; font-weight: 400; }
.input, textarea.input, select.input {
  width: 100%;
  background: #0c0c0c;
  border: 1px solid var(--bsp-dark-gray);
  color: var(--bsp-white);
  border-radius: var(--bsp-radius-img);
  padding: 1.2rem 1.4rem;
  font-size: 1.7rem;
  letter-spacing: 0;
  font-weight: 700;
  transition: border-color var(--bsp-speed);
  outline: none;
}
.input:focus { border-color: var(--bsp-light-gray); }
textarea.input { min-height: 12rem; resize: vertical; line-height: 1.7; }
.input.code { font-family: Consolas, 'Liberation Mono', Menlo, monospace; font-size: 2.6rem; letter-spacing: .6rem; text-align: center; max-width: 24rem; }
.input[type="file"] { padding: 1rem; font-weight: 400; font-size: 1.4rem; color: var(--bsp-light-gray); }
.input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; color: var(--bsp-white);
  background: transparent; border: 1px solid var(--bsp-light-gray); border-radius: 5px;
  padding: .6rem 1.4rem; margin-right: 1.4rem; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.input[type="file"]::file-selector-button:hover { background: var(--bsp-light-gray); color: var(--bsp-black); }
.check { display: flex; align-items: flex-start; gap: 1.2rem; font-size: 1.6rem; letter-spacing: 0; cursor: pointer; }
.check input {
  width: 2.2rem; height: 2.2rem; flex: 0 0 auto; margin-top: .4rem;
  border: 1px solid var(--bsp-light-gray); border-radius: 3px; background: #0c0c0c;
  display: grid; place-content: center;
}
.check input::before { content: ''; width: 1.2rem; height: 1.2rem; background: var(--bsp-light-gray); transform: scale(0); transition: transform .15s; }
.check input:checked::before { transform: scale(1); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.inline { display: flex; gap: 1.6rem; align-items: center; flex-wrap: wrap; }
.stamp-preview {
  width: 9rem; height: 9rem; border: 1px dashed var(--bsp-dark-gray); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff;
}
.stamp-preview img { max-width: 100%; max-height: 100%; }
.stamp-preview:empty { background: transparent; }

/* ---- tags / states (buttons.html tags.selected) ---- */
.tag {
  display: inline-block; font-size: 1.3rem; letter-spacing: 0; padding: 0 1.2rem; line-height: 2.2;
  border-radius: var(--bsp-radius-pill); border: 1px solid var(--bsp-dark-gray); color: var(--bsp-light-gray);
}
.tag.signed { background: var(--bsp-light-gray); color: var(--bsp-black); border-color: var(--bsp-light-gray); }
.tag.void { color: var(--bsp-gray); text-decoration: line-through; }

/* ---- caution (content.html) ---- */
.caution {
  margin: 0 0 3rem;
  padding: 2rem 2.4rem;
  border-left: .2em solid var(--bsp-caution);
  box-shadow: 0 0 5px #505050;
  border-radius: .2em;
  font-size: 1.5rem;
  letter-spacing: 0;
}
.caution p { margin: 0; }
.notice {
  margin: 0 0 3rem; padding: 2rem 2.4rem; border-left: 6px solid var(--bsp-dark-gray);
  font-size: 1.5rem; letter-spacing: 0; color: var(--bsp-light-gray);
}
.notice p { margin: 0; }

/* ---- table (content.html) ---- */
table.list { width: 100%; font-size: 1.5rem; letter-spacing: 0; margin-bottom: 3rem; }
table.list th, table.list td { padding: 1rem .75rem; vertical-align: top; text-align: left; }
table.list thead tr { border-bottom: 2px solid var(--bsp-light-green); }
table.list tbody tr + tr { border-top: 1px solid var(--bsp-light-green); }
table.list th { color: var(--bsp-gray); font-size: 1.3rem; }
table.list td.purpose { max-width: 32rem; white-space: pre-wrap; }
table.list td.actions a { margin-right: 1.4rem; white-space: nowrap; }
table.list .meta { display: block; }

/* ---- url box ---- */
.urlbox {
  display: flex; gap: 1.2rem; align-items: stretch; margin: 2rem 0 3rem;
}
.urlbox input { flex: 1; font-family: Consolas, 'Liberation Mono', Menlo, monospace; font-size: 1.4rem; font-weight: 400; }
.urlbox button { white-space: nowrap; }

/* ---- code / mono ---- */
code, .mono { font-family: Consolas, 'Liberation Mono', Menlo, monospace; font-weight: 400; letter-spacing: 0; }
code { padding: .2em .4em; font-size: 88%; background: #161616; border-radius: 3px; color: #ff6d6d; border: 1px solid #252525; }

/* ---- contract preview wrapper ---- */
.preview { margin: 0 0 6rem; }
.preview-label { font-size: 1.3rem; color: var(--bsp-gray); letter-spacing: 0; margin-bottom: 1.4rem; }
.preview .paper { font-weight: 400; letter-spacing: 0; }

/* ---- login ---- */
main.narrow { max-width: 48rem; }

/* ---- mobile ---- */
@media (max-width: 768px) {
  body { font-size: 1.3rem; line-height: 2.0; }
  .site-header { padding: 1.4rem 1.6rem; }
  .site-header .logo { width: 20rem; }
  .site-header nav { font-size: 1.4rem; }
  .site-header nav a { padding: .4rem .6rem; }
  main { width: 92%; padding-top: 2.4rem; }
  .page-title { font-size: 3.2rem; }
  .page-title small { font-size: 1.5rem; }
  .section-title { font-size: 2.2rem; margin-top: 4rem; }
  .row { grid-template-columns: 1fr; }
  .more { font-size: 1.8rem; padding: 1.4rem 2.8rem; }
  .input { font-size: 1.6rem; }
  .site-footer { padding: 4rem 1.6rem 0; }
  table.list { font-size: 1.3rem; display: block; overflow-x: auto; }
  .urlbox { flex-direction: column; }
}

.mono, code { word-break: break-all; overflow-wrap: anywhere; }

/* ---- サンプル文（管理画面の発行フォーム） ---- */
.samples { margin-top: 1rem; font-size: 1.4rem; letter-spacing: 0; }
.samples summary { cursor: pointer; color: var(--bsp-light-gray); text-decoration: underline; list-style: none; display: inline-block; }
.samples summary::-webkit-details-marker { display: none; }
.samples summary:hover { color: var(--bsp-gray); }
.samples ul { margin: 1.2rem 0 0; border-left: 6px solid var(--bsp-dark-gray); padding-left: 1.6rem; }
.samples li { margin-bottom: 1.6rem; }
.samples li:last-child { margin-bottom: 0; }
.sample-head { display: flex; gap: 1.6rem; align-items: baseline; margin-bottom: .4rem; }
.sample-title { color: var(--bsp-gray); font-size: 1.3rem; }
.sample-head a { font-size: 1.3rem; }
.sample-text { white-space: pre-wrap; font-family: inherit; font-weight: 400; color: var(--bsp-white); line-height: 1.7; margin: 0; }