@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;600;700&family=Noto+Serif+JP:wght@300;400;500&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/* ==========================================================
   東洋美術印刷 美術ネットプリント — 共通CSS
   「画廊は夜、工房は昼」(DESIGN_SPEC §16。トークン・意匠の正は
   mock/mock.css)— 和紙ライト基調・墨文字・藍=構造・朱=選択/CTA。
   金はギャラリー・バンドとフッタ画廊リンク行(扉)のみに残す。
   ========================================================== */

/* ---------- tokens(§16 ライト化)---------- */
:root {
  --washi: #f2ede1;        /* 基調背景(和紙・昼) */
  --washi-2: #e9e2d2;      /* 深めの和紙帯(washi-zone) */
  --paper: #fbf8f1;        /* カード・フォーム地 */
  --sumi: #12100c;         /* 墨 — 扉(gallery-band)専用に後退 */
  --sumi-2: #1b1813;
  --ink: #2b2620;          /* 本文(墨文字) */
  --ink-dim: #5d5142;      /* 淡文字(和紙上 6.6:1 — AA) */
  --ink-line: rgba(43, 38, 32, 0.2);
  --aka: #9e2b25;           /* 朱 — 主アクセント(和紙上 6.4:1。藍は廃止) */
  --aka-2: #b6423b;         /* 朱の明色(hover 等) */
  --aka-line: rgba(158, 43, 37, 0.38);  /* 朱罫 */
  --aka-faint: rgba(158, 43, 37, 0.10);
  --shu: #9e2b25;          /* 朱 — CTA・選択(和紙上 6.4:1) */
  --kin: #b39449;          /* 金 — 画廊への扉だけに残す */
  --kin-2: #d8c48e;
  --text-on-sumi: #e9e2d3; /* 墨地(扉)上の文字 */
  --text-dim-on-sumi: #a99f8c;
  --ink-on-washi: var(--ink); /* 旧トークン名の互換 */
  --font-ui: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}

/* ---------- base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  background: var(--washi);
  color: var(--ink);
  line-height: 1.9;
  letter-spacing: 0.06em;
}

h1, h2, h3 { font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif; font-weight: 600; }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

[hidden] { display: none !important; }

a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 1px solid var(--aka);
  outline-offset: 3px;
}

/* ---------- トンボ(トリムマーク)モチーフ ----------
   ヒーロー四隅に細線で。印刷所の記号を控えめに。 */
.tombo {
  position: absolute;
  width: 20px; height: 20px;
  z-index: 1;
  pointer-events: none;
  opacity: 0.55;
}
.tombo::before, .tombo::after { content: ""; position: absolute; background: var(--aka); }
.tombo::before { top: 7px; left: 0; width: 20px; height: 1px; }
.tombo::after { top: 0; left: 7px; width: 1px; height: 20px; }
.tombo.tl { top: 90px; left: 26px; }
.tombo.tr { top: 90px; right: 26px; transform: scaleX(-1); }
.tombo.bl { bottom: 26px; left: 26px; transform: scaleY(-1); }
.tombo.br { bottom: 26px; right: 26px; transform: scale(-1, -1); }

/* ---------- ロゴ ---------- */
.logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.logo-plate img { display: block; height: 38px; width: auto; }
.logo-plate.large img { height: 52px; }

/* ---------- header(和紙・墨文字)---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  background: rgba(242, 237, 225, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--aka-line);
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.4; }
.brand .wordmark .ja { font-family: 'Shippori Mincho B1', serif; font-size: 1.02rem; letter-spacing: 0.18em; white-space: nowrap; color: var(--ink); }
.brand .wordmark .en { font-size: 0.62rem; letter-spacing: 0.34em; color: var(--aka); text-transform: uppercase; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; font-size: 0.86rem; letter-spacing: 0.14em; }
.site-nav a { white-space: nowrap; color: var(--ink); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color .3s, border-color .3s; }
.site-nav a:hover { color: var(--aka); border-color: var(--aka); }
.site-nav a.current { color: var(--aka); border-color: var(--aka); }

/* 認証項目(ログイン⇄マイページ)— 藍の囲い(固定高 34px 維持) */
#auth-nav > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px 0.1em;
  border: 1px solid var(--aka);
  color: var(--aka);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  white-space: nowrap;
  transition: background .35s, color .35s;
}
#auth-nav > a:hover { background: var(--aka); color: var(--washi); }

/* hamburger(mobile only)— 三本の罫。囲み・下線は持たせない */
.nav-toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  margin-right: -8px;
  padding: 0;
  background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  position: absolute;
  left: 10px; top: calc(50% - 0.6px);
  width: 20px; height: 1.2px;
  background: var(--ink);
  transition: transform .34s cubic-bezier(.4, 0, .2, 1), opacity .18s;
}
.nav-toggle span:nth-child(1) { transform: translateY(-6px) rotate(0); }
.nav-toggle span:nth-child(2) { transform: translateY(0) rotate(0); }
.nav-toggle span:nth-child(3) { transform: translateY(6px) rotate(0); }
.nav-toggle:focus-visible { outline: 1px solid var(--aka); outline-offset: 2px; }
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(0) rotate(-45deg); }
body.nav-locked { overflow: hidden; }

/* ---------- hero(TOP・全画面/昼の工房)----------
   写真は <img class="hero-photo"> を CSS filter で昼光トーンへ。
   モチーフは四隅のトンボ(交差線は扉=gallery-band のみ)。 */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--washi);
}
.hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1.3) contrast(0.88) saturate(0.82) sepia(0.14); /* 昼トーン調整 */
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(242, 237, 225, 0.95) 0%, rgba(242, 237, 225, 0.7) 46%, rgba(242, 237, 225, 0.42) 100%);
}
/* 金の交差線は工房ヒーローでは使わない(扉でのみ静的引用) */
.hero .hero-cross-lines { display: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(28px, 6vw, 80px);
  padding: 100px 24px 60px;
}

.hero-title {
  position: relative;
  isolation: isolate;
  writing-mode: vertical-rl;
  font-size: clamp(2rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1.9;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(242, 237, 225, 0.85);
}
.hero-title-line {
  position: relative;
  z-index: 2;
  display: block;
  animation: hero-title-reveal 1.25s cubic-bezier(.22, .72, .2, 1) both;
}
.hero-title-line:nth-child(1) { animation-delay: .14s; }
.hero-title-line:nth-child(2) { animation-delay: .48s; }
/* 行頭一文字(「百」など)の強調 — 朱(落款と同系) */
.hero-title-line.kin-first::first-letter {
  color: var(--shu);
  font-size: 1.3em;
  font-style: normal;
  font-weight: 800;
}

@keyframes hero-title-reveal {
  0% { opacity: 0; filter: blur(9px); transform: translate3d(0, 30px, 0) scale(.98); }
  58% { filter: blur(1px); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-height: 720px) {
  .hero-title { font-size: clamp(1.8rem, 4.6svh, 2.6rem); }
}

/* 説明ブロックは下敷きなし — 背景写真を隠さない(2026-08-14 フィードバック)。
   可読性は淡い和紙色のテキストハローで支える */
.hero-side {
  max-width: 30em;
  padding: 0;
  background: none;
  border: 0;
  text-shadow: 0 1px 16px rgba(242, 237, 225, 0.9), 0 0 3px rgba(242, 237, 225, 0.7);
}
.hero-side .cta { text-shadow: none; background: rgba(242, 237, 225, 0.55); }
.hero-side .en-label {
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.hero-side p.lead { font-size: 0.98rem; color: var(--ink); margin-bottom: 30px; font-weight: 300; } /* museum と同基準(300) */
.hero-side .logo-plate { margin-top: 26px; }

.hero-home .hero-side > .en-label,
.hero-home .hero-side > .lead,
.hero-home .hero-side > .cta {
  animation: hero-copy-reveal 1s cubic-bezier(.22, .72, .2, 1) both;
}
.hero-home .hero-side > .en-label { animation-delay: 1.76s; }
.hero-home .hero-side > .lead { animation-delay: 1.94s; }
.hero-home .hero-side > .cta { animation-delay: 2.12s; }

@keyframes hero-copy-reveal {
  0% { opacity: 0; filter: blur(6px); transform: translate3d(0, 18px, 0); }
  100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

/* ---------- page-hero(下層ページ用・小さめ)---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 300px;
  padding: 140px 24px 50px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: var(--washi);
  border-bottom: 1px solid var(--aka-line);
}
.page-hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(1.3) contrast(0.88) saturate(0.82) sepia(0.14);
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  /* 中間 stop 0.68: 藍 en-label が乗るゾーンでも AA(4.5+)を保つ */
  background: linear-gradient(180deg, rgba(242, 237, 225, 0.9) 0%, rgba(242, 237, 225, 0.68) 46%, rgba(242, 237, 225, 0.94) 100%);
}
.page-hero > *:not(.hero-photo) { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing: 0.3em; margin-bottom: 10px; color: var(--ink); }
.page-hero .en-label { font-size: 0.68rem; letter-spacing: 0.42em; color: var(--aka); text-transform: uppercase; margin-bottom: 22px; }
.page-hero .page-lead { font-size: 0.92rem; color: var(--ink); max-width: 38em; margin: 0 auto; }

/* ---------- CTA(朱・ゴシック)---------- */
.cta {
  display: inline-block;
  padding: 13px 38px;
  border: 1px solid var(--shu);
  color: var(--shu);
  font-size: 0.9rem;   /* museum の .cta と同基準 */
  letter-spacing: 0.24em;
  transition: background .35s, color .35s;
}
.cta:hover { background: var(--shu); color: var(--washi); }
/* ライト統一により on-washi は基本形と同じ(互換のため残置) */
.cta.on-washi { border-color: var(--shu); color: var(--shu); }
.cta.on-washi:hover { background: var(--shu); color: var(--washi); }
button.cta { background: none; cursor: pointer; }
button.cta:hover { background: var(--shu); }

/* ---------- sections ---------- */
.section { padding: 96px 24px; scroll-margin-top: 92px; }
.section-inner { max-width: 1080px; margin: 0 auto; }

/* section-head — 藍罫+小トンボ */
.section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 54px; }
.section-head::before {
  content: "";
  width: 46px; height: 11px;
  flex: none;
  background:
    linear-gradient(var(--aka), var(--aka)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--aka), var(--aka)) 9px 0 / 1px 100% no-repeat;
  transform: translateY(-0.3em);
}
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: 0.22em; }
.section-head .en { font-size: 0.68rem; letter-spacing: 0.36em; color: var(--aka); text-transform: uppercase; }

/* セクション導入リード(汎用) */
.section-lead { max-width: 44em; margin-bottom: 44px; }

/* ---------- washi-zone(深めの和紙帯 — セクション交互の淡い切替)---------- */
.washi-zone {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--washi-2);
  color: var(--ink);
}
.washi-zone p { font-size: 0.94rem; font-weight: 400; }
.washi-zone p + p { margin-top: 1.2em; }

.two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: start; }

/* ---------- info-table ---------- */
.info-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.info-table th, .info-table td { text-align: left; padding: 13px 6px; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.info-table th { white-space: nowrap; font-weight: 500; color: var(--aka); letter-spacing: 0.16em; padding-right: 22px; }
.info-table caption {
  text-align: left;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.02rem;
  letter-spacing: 0.18em;
  padding-bottom: 12px;
}
/* ライト統一により on-sumi は基本形と同じ(互換のため残置) */
.info-table.on-sumi th { color: var(--aka); }
.info-table.on-sumi th, .info-table.on-sumi td { border-bottom-color: var(--ink-line); }
.table-note { font-size: 0.76rem; color: var(--ink-dim); margin-top: 12px; letter-spacing: 0.06em; }

/* ---------- 選ばれる理由(3カード)— 角にトンボ ---------- */
.reason-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.reason-card {
  position: relative;
  border: 1px solid rgba(158, 43, 37, 0.28);
  background: var(--paper);
  padding: 38px 32px 34px;
  display: flex;
  flex-direction: column;
}
/* カード角のトリムマーク(左上) */
.reason-card::before, .reason-card::after { content: ""; position: absolute; background: var(--aka); opacity: .45; }
.reason-card::before { top: 10px; left: -7px; width: 24px; height: 1px; }
.reason-card::after { top: -7px; left: 10px; width: 1px; height: 24px; }
.reason-card .en {
  font-size: 0.64rem;
  letter-spacing: 0.32em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.reason-card .en::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--aka); vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
.reason-card h3 { font-size: 1.28rem; letter-spacing: 0.16em; margin-bottom: 14px; }
.reason-card p { font-size: 0.86rem; color: var(--ink-dim); flex-grow: 1; }

/* ---------- 商品ライン ---------- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(43, 38, 32, 0.18);
  border-top: 2px solid var(--aka);
  padding: 30px 26px 28px;
  transition: border-color .3s, transform .3s;
}
.product-grid .product-card { overflow: hidden; }
.product-card:hover { border-color: var(--aka); transform: translateY(-3px); }
/* 商品写真はカード内に収める(16:9 の額装風) */
.product-card .product-image {
  display: block;
  width: 100%;
  height: auto; /* img の height 属性より優先し、aspect-ratio を効かせる */
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0 0 20px;
  border: 1px solid rgba(43, 38, 32, .16);
}
.product-card h3 { font-size: 1.18rem; letter-spacing: 0.14em; margin-bottom: 4px; }
.product-card .en {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.product-card p { font-size: 0.84rem; color: var(--ink-dim); flex-grow: 1; }
.product-card .price {
  font-family: 'Shippori Mincho B1', serif;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--aka);
  margin: 18px 0 16px;
  border-top: 1px dashed rgba(43, 38, 32, 0.25);
  padding-top: 14px;
}
.product-card .cta { align-self: flex-start; padding: 10px 26px; font-size: 0.78rem; }

/* ---------- ご注文の流れ(4ステップ横並び)---------- */
.step-flow {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}
.step-flow li {
  counter-increment: step;
  position: relative;
  border-top: 1px solid rgba(158, 43, 37, 0.38);
  padding-top: 20px;
}
.step-flow li::before {
  content: "0" counter(step);
  display: block;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--aka);
  margin-bottom: 10px;
}
/* 罫のつなぎ目に藍の点 */
.step-flow li::after {
  content: "";
  position: absolute;
  top: -3px; left: 0;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--aka);
}
.step-flow h3 { font-size: 1.08rem; letter-spacing: 0.16em; margin-bottom: 10px; }
.step-flow p { font-size: 0.82rem; color: var(--ink-dim); }

/* ---------- 紙のカード(craft)---------- */
.paper-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 22px; }
.paper-card {
  border: 1px solid rgba(43, 38, 32, 0.18);
  background: var(--paper);
  padding: 30px 26px 26px;
  transition: border-color .3s;
}
.paper-card:hover { border-color: var(--aka); }
/* 紙肌見本 — 和紙テクスチャの小さな短冊 */
.paper-card .paper-swatch {
  display: block;
  height: 44px;
  margin-bottom: 20px;
  border: 1px solid rgba(43, 38, 32, 0.2);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.42 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    var(--washi);
}
.paper-card h3 { font-size: 1.12rem; letter-spacing: 0.14em; margin-bottom: 2px; }
.paper-card .en {
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.paper-card .paper-feel { font-size: 0.82rem; color: var(--ink-dim); }
.paper-card .paper-factor {
  margin-top: 14px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--aka);
  border-top: 1px dashed rgba(43, 38, 32, 0.25);
  padding-top: 10px;
}

/* ---------- 料金表(info-table を並べるグリッド)---------- */
.price-tables { display: grid; gap: 48px 56px; }
@media (min-width: 901px) { .price-tables { grid-template-columns: 1fr 1fr; } }
.price-tables .info-table + .info-table { margin-top: 34px; }
.order-cta-row { margin-top: 28px; }

/* ---------- 見積りシミュレーター(フォーム=ゴシック)---------- */
.sim-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 46px; align-items: start; }

.sim-form fieldset { border: none; margin: 0; padding: 0; }
.sim-form legend {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  color: var(--aka);
  margin-bottom: 16px;
}

.sim-field { margin-bottom: 24px; }
.sim-field label,
.sim-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--aka);
  margin-bottom: 8px;
}

.sim-form select,
.sim-form input[type="number"],
.sim-form input[type="text"],
.sim-form input[type="date"] {
  display: block;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.3);
  border-radius: 0;
  transition: border-color .3s;
}
.sim-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239e2b25' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}
.sim-form select:hover,
.sim-form input:hover { border-color: rgba(158, 43, 37, 0.6); }
.sim-form select:focus,
.sim-form input:focus { outline: none; border-color: var(--aka); }
.sim-form ::placeholder,
.auth-field ::placeholder { color: var(--ink-dim); opacity: 1; } /* UA 既定色は AA 未満。opacity:1 は Firefox 対策 */

/* オプション checkbox — 藍罫の札(選択状態=朱系。§16 第2フィードバック) */
.sim-checks { display: grid; gap: 10px; }
.sim-check {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 16px;
  border: 1px solid rgba(158, 43, 37, 0.25);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.sim-check:hover { border-color: var(--aka); }
.sim-check:has(input:checked) { border-color: var(--shu); background: rgba(158, 43, 37, 0.07); }
.sim-check input[type="checkbox"] {
  width: 16px; height: 16px;
  flex: none;
  transform: translateY(2px);
  accent-color: var(--shu);
  cursor: pointer;
}
.sim-check .opt-price { margin-left: auto; color: var(--aka); font-size: 0.8rem; white-space: nowrap; }
.sim-check .opt-desc { display: block; font-size: 0.72rem; color: var(--ink-dim); }

.sim-note { font-size: 0.74rem; color: var(--ink-dim); letter-spacing: 0.06em; margin-top: 14px; }

/* 見積り出力パネル */
.quote-panel {
  position: sticky;
  top: 100px;
  border: 1px solid var(--aka-line);
  border-top: 2px solid var(--aka);
  background: var(--paper);
  padding: 34px 30px 30px;
}
.quote-panel .quote-kicker {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  letter-spacing: 0.36em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.quote-panel .quote-kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; background: var(--aka); vertical-align: middle; margin-right: 10px; transform: translateY(-1px); }
.quote-total {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(158, 43, 37, 0.3);
  padding-bottom: 16px;
  margin-bottom: 18px;
}
.quote-total .tax-note { font-size: 0.74rem; color: var(--ink-dim); letter-spacing: 0.12em; margin-left: 8px; }
.quote-breakdown { list-style: none; font-size: 0.84rem; }
.quote-breakdown li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(43, 38, 32, 0.22);
}
.quote-breakdown li .item-price { white-space: nowrap; color: var(--aka); }
.quote-breakdown li.discount { color: var(--aka); }
.quote-panel .quote-note { font-size: 0.72rem; color: var(--ink-dim); margin-top: 16px; letter-spacing: 0.06em; }
.quote-panel .cta { display: block; text-align: center; margin-top: 22px; }

/* ---------- exhibit-card(artists)---------- */
.exhibits { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.exhibit-card {
  position: relative;
  border: 1px solid rgba(158, 43, 37, 0.28);
  background: var(--paper);
  padding: 40px 34px 34px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.exhibit-card .status {
  position: absolute;
  top: -1px; left: 26px;
  padding: 5px 14px 6px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  background: var(--shu);
  color: #f6efe2;
}
.exhibit-card .status.soon { background: var(--washi-2); color: var(--ink-dim); border: 1px solid var(--ink-line); }
.exhibit-card h3 { font-size: 1.42rem; letter-spacing: 0.14em; margin: 14px 0 4px; }
.exhibit-card .artist-en { font-size: 0.66rem; letter-spacing: 0.3em; color: var(--aka); text-transform: uppercase; margin-bottom: 18px; }
.exhibit-card p { font-size: 0.86rem; color: var(--ink-dim); flex-grow: 1; }
.exhibit-card .actions { margin-top: 26px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.exhibit-card .note { font-size: 0.7rem; color: var(--ink-dim); letter-spacing: 0.08em; }
.exhibit-card.soon-card { justify-content: center; align-items: center; border-style: dashed; border-color: rgba(158, 43, 37, 0.25); }
.exhibit-card.soon-card .soon-text { color: var(--ink-dim); letter-spacing: 0.3em; font-size: 0.9rem; }

/* ---------- artist chips ---------- */
.artist-strip { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 26px; }
.artist-chip {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 30px 18px 18px;
  border: 1px solid rgba(158, 43, 37, 0.28);
  background: var(--paper);
  transition: border-color .3s;
}
.artist-chip:hover { border-color: var(--aka); }
.artist-chip.soon { border-style: dashed; border-color: rgba(158, 43, 37, 0.25); }
.artist-chip.soon .chip-name, .artist-chip.soon .monogram { color: var(--ink-dim); }
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px;
  border: 1px solid var(--aka);
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.5rem;
  color: var(--aka);
  flex-shrink: 0;
}
.chip-body { display: flex; flex-direction: column; line-height: 1.5; }
.chip-name { font-family: 'Shippori Mincho B1', serif; font-size: 1.05rem; letter-spacing: 0.16em; }
.chip-en { font-size: 0.62rem; letter-spacing: 0.28em; color: var(--aka); text-transform: uppercase; }
.strip-note { font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 26px; }
.artist-strip + .exhibits { margin-top: 8px; }
.artists-cta-row { margin-top: 46px; }

/* ---------- ギャラリー・バンド(墨+金のまま残す「画廊への扉」)---------- */
.gallery-band {
  position: relative;
  overflow: hidden;
  padding: 110px 24px 100px;
  text-align: center;
  color: var(--text-on-sumi);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.7 0 0 0 0 0.62 0 0 0 0 0.45 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 90% 130% at 50% 50%, #1d1910 0%, #100e09 62%, #0c0b08 100%);
  background-color: #0c0b08;
  border-top: 1px solid rgba(179, 148, 73, 0.35);
  border-bottom: 1px solid rgba(179, 148, 73, 0.35);
}
/* 金の交差線(画廊のモチーフを扉として静的に引用) */
.gallery-band .hero-cross-lines {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(280px, 46vw, 560px);
  height: clamp(150px, 24vw, 300px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gallery-band .hero-cross-line { position: absolute; top: 50%; left: 50%; width: 100%; height: 1px; }
.gallery-band .hero-cross-line::after { content: ""; display: block; width: 100%; height: 1px; opacity: .26; }
.gallery-band .hero-cross-line.line-one { transform: translate(-50%, -50%) rotate(-25deg); }
.gallery-band .hero-cross-line.line-one::after { background: linear-gradient(90deg, transparent 2%, rgba(216, 185, 105, .16) 20%, rgba(216, 185, 105, .88) 58%, transparent 100%); }
.gallery-band .hero-cross-line.line-two { transform: translate(-50%, -50%) rotate(29deg); }
.gallery-band .hero-cross-line.line-two::after { background: linear-gradient(90deg, transparent 0%, rgba(201, 99, 84, .66) 42%, rgba(216, 185, 105, .5) 78%, transparent 98%); }
.gallery-band .hero-cross-point {
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #e2c87e;
  opacity: .4;
  transform: translate(-50%, -50%) scale(.72);
  box-shadow: 0 0 18px rgba(226, 200, 126, .58);
}

.gallery-band-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.gallery-band .en-label {
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  color: var(--kin-2);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.gallery-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); letter-spacing: 0.26em; margin-bottom: 22px; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.gallery-band .gallery-band-lead { font-size: 0.9rem; color: var(--text-on-sumi); font-weight: 300; margin-bottom: 30px; }
.gallery-band .gallery-band-note { font-size: 0.72rem; color: var(--text-dim-on-sumi); letter-spacing: 0.1em; margin-top: 18px; }
/* 扉の中の CTA だけは金のまま */
.gallery-band .cta { border-color: var(--kin); color: var(--kin-2); }
.gallery-band .cta:hover { background: var(--kin); color: var(--sumi); }

/* ---------- footer(和紙。画廊リンク行のみ墨+金)---------- */
.site-footer {
  padding: 60px 24px 48px;
  text-align: center;
  border-top: 1px solid var(--aka-line);
  background: var(--washi);
}
.site-footer .logo-plate { margin-bottom: 20px; }
.site-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px; font-size: 0.8rem; margin-bottom: 6px; letter-spacing: 0.12em; }
.site-footer .links a { color: var(--ink); }
.site-footer .links a:hover { color: var(--aka); }
.site-footer small { font-size: 0.72rem; color: var(--ink-dim); letter-spacing: 0.14em; }

/* 画廊リンク行 — 墨地+金の帯(別世界の入口) */
.footer-gallery-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 12px 28px;
  margin: 26px -24px;
  padding: 18px 24px 19px;
  background: #0c0b08;
  border-top: 1px solid rgba(179, 148, 73, 0.35);
  border-bottom: 1px solid rgba(179, 148, 73, 0.35);
}
.footer-gallery-row .row-label {
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--kin);
}
.footer-gallery-row a {
  color: var(--kin-2);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.footer-gallery-row a:hover { border-color: var(--kin); }

/* ---------- reveal(スクロール表示。site.js が .is-visible を付与)---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .72, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-title-line { animation: none; }
  .hero-home .hero-side > .en-label,
  .hero-home .hero-side > .lead,
  .hero-home .hero-side > .cta { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .product-card:hover { transform: none; }
}

/* ---------- responsive: ~1120px(ナビ折りたたみ)----------
   和紙地に品書きを並べる体裁。項目の下線・囲みは使わず、
   現在地は藍の文字と短い引き罫で示す。 */
@media (max-width: 1120px) {
  .site-header { padding: 12px 18px; }
  .nav-toggle { display: block; }

  .site-nav {
    display: flex;
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100svh - 100%);
    flex-direction: column; align-items: stretch; gap: 0;
    background: linear-gradient(180deg, #f6f1e6 0%, #efe8d9 100%);
    padding: 26px 0 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
  }
  .site-header.nav-open .site-nav {
    visibility: visible; opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .site-nav a { border-bottom: none; padding-bottom: 0; }
  .site-nav > a {
    position: relative;
    font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
    text-align: left;
    padding: 14px 30px;
    font-size: 1.02rem;
    letter-spacing: 0.22em;
  }
  .site-nav a.current { color: var(--aka); border-color: transparent; }
  .site-nav > a.current::before {
    content: "";
    position: absolute; top: 50%; left: 12px;
    width: 12px; height: 1px;
    background: var(--aka);
  }

  .two-col { grid-template-columns: 1fr; gap: 34px; }
  .sim-grid { grid-template-columns: 1fr; gap: 36px; }
  .quote-panel { position: static; }
  .step-flow { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- responsive: ~640px ---------- */
@media (max-width: 640px) {
  .section { padding: 72px 20px; }
  .page-hero { min-height: 270px; padding: 124px 20px 40px; }

  .brand { flex-wrap: wrap; row-gap: 3px; }
  .brand .wordmark { display: contents; }
  .brand .wordmark .ja { font-size: 0.88rem; }
  .brand .wordmark .en { flex-basis: 100%; }

  .hero-inner { flex-direction: column; text-align: center; padding-top: 130px; }
  .hero-title { writing-mode: horizontal-tb; font-size: 1.7rem; letter-spacing: 0.2em; }
  .hero-side .logo-plate { display: none; }
  /* ブランド折返しでヘッダー実高が伸び、上2隅は隠れるため非表示。
     トンボの意匠は下2隅で保つ */
  .tombo.tl, .tombo.tr { display: none; }

  .section-head { gap: 12px; margin-bottom: 40px; }
  .section-head::before { width: 28px; }

  .step-flow { grid-template-columns: 1fr; gap: 20px; }
  .step-flow li { border-top: none; border-left: 1px solid rgba(158, 43, 37, 0.38); padding: 0 0 4px 22px; }
  .step-flow li::before { margin-bottom: 4px; }
  .step-flow li::after { top: 0; left: -3px; }

  .reason-card { padding: 30px 24px 28px; }
  .exhibit-card { padding: 34px 26px 28px; min-height: 0; }
  .quote-panel { padding: 28px 20px 24px; }
  .quote-total { font-size: 1.7rem; }
  .sim-check { flex-wrap: wrap; }
  .sim-check .opt-price { margin-left: 28px; }

  .gallery-band { padding: 84px 20px 76px; }
  .site-footer .links { gap: 12px 20px; font-size: 0.78rem; }
  /* 画廊帯の全幅化: footer 左右 padding と揃え、和紙スジを出さない */
  .footer-gallery-row { margin-left: -20px; margin-right: -20px; }
  .info-table { font-size: 0.82rem; }
  .info-table th { padding-right: 14px; }
}

@media (max-width: 400px) {
  .brand .wordmark .ja { font-size: 0.8rem; }
  .logo-plate img { height: 30px; }
}

/* ==========================================================
   購入ウィザード(§8)・色あわせ(§9)・
   管理画面(§10)・受注可否表示(§11)の共通コンポーネント
   ========================================================== */

/* ---------- ウィザード: ステップ表示(01〜05 採番)----------
   状態(§16 承認ルール・2026-08-14 第2フィードバック改定):
   .is-done=完了(朱地・白抜き・クリック可)/
   .is-current=現在(朱枠)/ 無印=未来(淡色・クリック不可)。 */
.flow-steps {
  list-style: none;
  counter-reset: flow;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 48px;
}
.flow-step {
  counter-increment: flow;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 4px;
  background: none;
  border: none;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-align: left;
  color: var(--ink-dim);
  cursor: default;
  transition: color .3s;
}
.flow-step::before {
  content: counter(flow, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid rgba(158, 43, 37, 0.3);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  transition: background .3s, border-color .3s, color .3s;
}
.flow-step .step-label { display: block; line-height: 1.5; }
/* 完了 = 朱地・白抜き(2026-08-14 第2フィードバック改定)。戻りクリック可 */
.flow-step.is-done { color: var(--ink); cursor: pointer; }
.flow-step.is-done::before { background: var(--shu); border-color: var(--shu); color: #f6efe2; }
.flow-step.is-done:hover { color: var(--shu); }
.flow-step.is-done:hover::before { background: #b6423b; border-color: #b6423b; }
/* 現在 = 朱枠(選択ハイライトは朱系) */
.flow-step.is-current { color: var(--shu); }
.flow-step.is-current::before {
  border-color: var(--shu);
  color: var(--shu);
  background: rgba(158, 43, 37, 0.07);
  box-shadow: 0 0 0 3px rgba(158, 43, 37, 0.14);
}
/* 未来 = クリック不可の見た目 */
button.flow-step:disabled,
.flow-step.is-locked { cursor: not-allowed; }
.flow-step.is-current:disabled { cursor: default; }

/* ステップ内パネルと前後ナビ */
.flow-panel { scroll-margin-top: 110px; }
.flow-nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.flow-nav .cta { padding: 12px 32px; font-size: 0.82rem; }
.cta.subtle { border-color: rgba(43, 38, 32, 0.3); color: var(--ink-dim); }
.cta.subtle:hover { background: none; border-color: var(--aka); color: var(--aka); }
.cta:disabled, .cta[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.cta:disabled:hover { background: none; color: var(--shu); }

/* ---------- Step1: 入稿ドロップゾーン ---------- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 210px;
  padding: 36px 24px;
  border: 1px dashed rgba(158, 43, 37, 0.55);
  background: var(--paper);
  text-align: center;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.dropzone:hover { border-color: var(--aka); }
.dropzone.is-dragover {
  border-style: solid;
  border-color: var(--aka);
  background: var(--aka-faint);
}
.dropzone .dz-main { font-family: 'Shippori Mincho B1', serif; font-size: 0.98rem; letter-spacing: 0.16em; color: var(--aka); }
.dropzone .dz-sub { font-size: 0.74rem; color: var(--ink-dim); letter-spacing: 0.06em; }
.dropzone .dz-file { font-size: 0.84rem; color: var(--ink); word-break: break-all; }

/* ---------- Step1: 入稿チェック結果 ---------- */
.check-report {
  margin-top: 34px;
  border: 1px solid var(--aka-line);
  background: var(--paper);
  padding: 30px 28px 26px;
}
.check-report h3 { font-size: 1.02rem; letter-spacing: 0.2em; margin-bottom: 14px; }
.check-list { list-style: none; font-size: 0.86rem; }
.check-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(43, 38, 32, 0.22);
}
.check-list .check-label { font-size: 0.78rem; letter-spacing: 0.16em; color: var(--aka); white-space: nowrap; }
/* 判定テキスト3状態(藍=可 / 墨淡=注意 / 朱=不可) */
.status-ok { color: var(--aka); }
.status-warn { color: var(--ink-dim); }
.status-ng { color: var(--shu); }

/* サイズ別 印刷可否表 */
.size-capability {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 10px;
  margin-top: 18px;
}
.size-cap {
  border: 1px solid rgba(43, 38, 32, 0.25);
  padding: 12px 10px 10px;
  text-align: center;
  letter-spacing: 0.1em;
}
.size-cap .cap-size { display: block; font-family: 'Shippori Mincho B1', serif; font-size: 0.98rem; letter-spacing: 0.16em; }
.size-cap .cap-state { display: block; font-family: var(--font-ui); font-size: 0.68rem; margin-top: 4px; letter-spacing: 0.16em; }
.size-cap.ok { border-color: var(--aka); color: var(--aka); background: var(--aka-faint); }
.size-cap.warn { border-color: rgba(43, 38, 32, 0.45); color: var(--ink-dim); background: rgba(43, 38, 32, 0.05); }
.size-cap.ng { border-color: rgba(158, 43, 37, 0.6); color: var(--shu); background: rgba(158, 43, 37, 0.08); }

/* ---------- Step2: 色あわせ ---------- */
.color-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-bottom: 28px;
}
.compare-pane {
  border: 1px solid var(--aka-line);
  background: var(--paper);
  padding: 14px 14px 12px;
}
.compare-pane canvas { display: block; width: 100%; height: auto; }
.compare-label {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  color: var(--aka);
}

/* 色変換パッチ(チップ。選択中=朱) */
.patch-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0 14px;
}
.patch-chip {
  padding: 9px 22px;
  border: 1px solid rgba(158, 43, 37, 0.4);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background .3s, border-color .3s, color .3s;
}
.patch-chip:hover { border-color: var(--shu); color: var(--shu); }
.patch-chip.is-selected { background: var(--shu); border-color: var(--shu); color: #f6efe2; }
.patch-chip:disabled,
.patch-list.is-locked .patch-chip:not(.is-selected) { opacity: .45; cursor: not-allowed; }
.patch-desc { font-size: 0.78rem; color: var(--ink-dim); min-height: 1.9em; }

/* 色域外警告トグル */
.gamut-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 18px;
  border: 1px solid rgba(158, 43, 37, 0.3);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.gamut-toggle:hover { border-color: var(--aka); }
.gamut-toggle:has(input:checked) { border-color: var(--shu); background: rgba(158, 43, 37, 0.07); color: var(--shu); }
.gamut-toggle input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--shu); cursor: pointer; }

/* シミュレーション免責(常時表示・小) */
.sim-disclaimer {
  margin-top: 20px;
  padding: 12px 16px;
  border-left: 2px solid var(--aka);
  background: var(--aka-faint);
  font-size: 0.74rem;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}

/* ---------- Step3: 仕上がり予定(受注可 / 停止の2状態)---------- */
.delivery-info {
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid rgba(158, 43, 37, 0.4);
  background: var(--aka-faint);
  font-family: var(--font-ui);
  font-size: 0.84rem;
  letter-spacing: 0.06em;
}
.delivery-info .delivery-date { font-family: 'Shippori Mincho B1', serif; color: var(--aka); letter-spacing: 0.1em; }
.delivery-info .delivery-press { display: block; font-size: 0.74rem; color: var(--ink-dim); margin-top: 4px; }
.delivery-info.is-stopped {
  border-color: rgba(158, 43, 37, 0.55);
  background: rgba(158, 43, 37, 0.07);
  color: var(--shu);
}
.delivery-info.is-stopped .delivery-date { color: var(--shu); }

/* ---------- Step4: 注文内容の確認 ---------- */
.order-summary {
  border: 1px solid var(--aka-line);
  border-top: 2px solid var(--aka);
  background: var(--paper);
  padding: 32px 30px 28px;
}
.order-summary .summary-file {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--aka-line);
}
.order-summary .summary-thumb {
  width: 84px; height: 84px;
  object-fit: cover;
  flex: none;
  border: 1px solid var(--ink-line);
  background: var(--washi-2);
}
.order-summary .summary-file-name { font-size: 0.88rem; word-break: break-all; }
.summary-list { list-style: none; font-size: 0.86rem; }
.summary-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(43, 38, 32, 0.22);
}
.summary-list .summary-key { font-size: 0.78rem; letter-spacing: 0.16em; color: var(--aka); white-space: nowrap; }
.summary-list .summary-value { text-align: right; }
.order-summary .summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--aka-line);
}
.order-summary .summary-total .total-price { font-family: 'Shippori Mincho B1', serif; font-size: 1.7rem; color: var(--ink); }

/* 注文完了画面 */
.order-complete {
  text-align: center;
  border: 1px solid var(--aka-line);
  border-top: 2px solid var(--aka);
  background: var(--paper);
  padding: 54px 28px 48px;
}
.order-complete .complete-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  color: var(--aka);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.order-complete h3 { font-size: 1.4rem; letter-spacing: 0.24em; margin-bottom: 18px; }
.order-complete .order-no {
  font-family: 'Shippori Mincho B1', serif;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: 0.14em;
  color: var(--aka);
  margin-bottom: 6px;
}
.order-complete .complete-date { font-size: 0.9rem; margin-bottom: 18px; }
.order-complete p.note { font-size: 0.78rem; color: var(--ink-dim); max-width: 36em; margin: 0 auto; }
.order-complete .cta { margin-top: 26px; }

/* ---------- 管理画面(admin.html)---------- */
/* 認証なし注記(ページ冒頭) */
.admin-note {
  border: 1px solid rgba(158, 43, 37, 0.5);
  background: rgba(158, 43, 37, 0.07);
  color: var(--shu);
  padding: 12px 18px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

/* 状態バッジ(§16 再配色: 稼働中=藍 / メンテ=朱 / 停止=淡グレー) */
.status-badge {
  display: inline-block;
  padding: 3px 12px 4px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-badge.st-active { background: var(--aka); border-color: var(--aka); color: #f2ede1; }
.status-badge.st-maintenance { background: var(--shu); border-color: var(--shu); color: #f6efe2; }
.status-badge.st-stopped { background: var(--washi-2); border-color: rgba(43, 38, 32, 0.3); color: var(--ink); }

/* 一覧テーブル(info-table を基調に拡張。横スクロールは .table-scroll で) */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table { min-width: 760px; }
.admin-table th { font-size: 0.78rem; }
.admin-table td { font-size: 0.84rem; vertical-align: middle; }
.admin-table .cell-note { display: block; font-size: 0.72rem; color: var(--ink-dim); }
.admin-table .table-actions { display: flex; gap: 8px; white-space: nowrap; }
.order-thumb {
  display: block;
  width: 56px; height: 56px;
  object-fit: cover;
  border: 1px solid var(--ink-line);
  background: var(--washi-2);
}

/* 小型ボタン(編集・削除など) */
.mini-btn {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 5px 14px;
  border: 1px solid var(--aka);
  background: none;
  color: var(--aka);
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.mini-btn:hover { background: var(--aka); color: var(--washi); }
.mini-btn.danger { border-color: rgba(158, 43, 37, 0.6); color: var(--shu); }
.mini-btn.danger:hover { background: var(--shu); border-color: var(--shu); color: #f6efe2; }

/* 追加・編集フォーム(sim-form 部品を流用。2カラム配置) */
.admin-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; align-items: start; }
.admin-form .sim-field.wide, .admin-form .form-actions { grid-column: 1 / -1; }
.admin-form .form-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.sim-form input:disabled, .sim-form select:disabled { opacity: .45; cursor: not-allowed; }

/* 商材別受注状況プレビュー */
.availability-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.avail-card {
  border: 1px solid rgba(43, 38, 32, 0.18);
  border-top: 2px solid rgba(93, 81, 66, 0.5);
  background: var(--paper);
  padding: 26px 24px 22px;
}
.avail-card h3 { font-size: 1.05rem; letter-spacing: 0.16em; margin-bottom: 10px; }
.avail-card .avail-state { display: block; font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.16em; margin-bottom: 8px; }
.avail-card .avail-date { font-family: 'Shippori Mincho B1', serif; font-size: 1.05rem; color: var(--aka); letter-spacing: 0.1em; }
.avail-card .avail-press { display: block; font-size: 0.74rem; color: var(--ink-dim); margin-top: 4px; }
.avail-card.ok { border-top-color: var(--aka); }
.avail-card.stopped { border-top-color: var(--shu); }
.avail-card.stopped .avail-date { color: var(--shu); }
.avail-card.none { border-top-color: rgba(93, 81, 66, 0.5); opacity: .85; }

/* フッタの控えめな管理リンク */
.site-footer .links .admin-link {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
  align-self: baseline;
}
.site-footer .links .admin-link:hover { color: var(--aka); }

/* ---------- 拡張分 responsive ---------- */
@media (max-width: 900px) {
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 40px; }
  .color-compare { grid-template-columns: 1fr; }
  .admin-form { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .flow-steps { grid-template-columns: 1fr; gap: 8px; }
  .flow-step { padding: 4px 0; }
  .flow-step::before { width: 36px; height: 36px; font-size: 0.88rem; }
  .dropzone { min-height: 170px; padding: 28px 18px; }
  .check-report { padding: 24px 20px 20px; }
  .order-summary { padding: 26px 20px 22px; }
  .order-summary .summary-file { flex-wrap: wrap; }
  .order-complete { padding: 42px 20px 38px; }
  .flow-nav { flex-direction: column-reverse; align-items: stretch; }
  .flow-nav .cta { text-align: center; }
}

/* ==========================================================
   §12 — 研究活動ドロップダウン・カゴバッジ /
   マイページ(カゴ・履歴テーブル・空状態)/ flow.html 簡易試算
   ========================================================== */

/* ---------- 研究活動ドロップダウン(ライト)---------- */
.nav-drop { position: relative; }
.nav-drop-btn {
  font: inherit; letter-spacing: inherit;
  background: none; border: none; cursor: pointer;
  color: var(--ink);
  padding: 0 0 2px;
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.nav-drop-btn::after { content: " ▾"; font-size: 0.72em; color: var(--aka); }
.nav-drop:hover .nav-drop-btn, .nav-drop:focus-within .nav-drop-btn,
.nav-drop.open .nav-drop-btn { color: var(--aka); border-color: var(--aka); }
.drop-menu {
  visibility: hidden; opacity: 0;
  transition: opacity .25s;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  padding-top: 14px;
  z-index: 120;
}
.drop-menu-inner {
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(251, 248, 241, 0.98);
  border: 1px solid var(--aka-line);
  padding: 16px 22px;
  min-width: 9.5em;
  white-space: nowrap;
}
.nav-drop:hover .drop-menu, .nav-drop:focus-within .drop-menu,
.nav-drop.open .drop-menu { visibility: visible; opacity: 1; }
.drop-menu a { color: var(--ink); font-size: 0.84rem; transition: color .3s; }
.drop-menu a:hover { color: var(--aka); }

/* ---------- カゴ件数バッジ(藍の小バッジ。site.js が更新)---------- */
.cart-count {
  display: inline-block;
  min-width: 18px; height: 18px;
  margin-left: 7px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--aka);
  color: var(--washi);
  font-family: var(--font-ui);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0;
  vertical-align: 2px;
}
.cart-count[hidden] { display: none; }

/* ---------- マイページ: カゴ・購入履歴テーブル ---------- */
.table-scroll { overflow-x: auto; }
#cart-table, #history-table { min-width: 640px; }
#cart-table th, #cart-table td,
#history-table th, #history-table td { vertical-align: middle; }
#cart-table thead th, #history-table thead th {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  white-space: nowrap;
}
.row-thumb {
  display: block;
  width: 64px; height: 64px;
  object-fit: cover;
  border: 1px solid var(--ink-line);
  background: var(--washi-2);
}
/* サムネが無い項目(PDF/TIFF/PSD 入稿など)の代替枠 */
.row-thumb-none {
  display: flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  border: 1px dashed rgba(43, 38, 32, 0.35);
  font-size: 0.62rem;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-align: center;
}
.row-spec { font-size: 0.84rem; }
.row-spec .spec-sub { display: block; font-size: 0.74rem; color: var(--ink-dim); margin-top: 3px; }
.row-price { white-space: nowrap; color: var(--aka); }

/* 操作ボタン列 */
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-mini {
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  line-height: 1;
  padding: 8px 14px;
  background: none;
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.45);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-mini:hover { background: var(--ink); color: var(--washi); border-color: var(--ink); }
.btn-mini:focus-visible { outline: 1px solid var(--aka); outline-offset: 2px; }
.btn-mini:disabled { opacity: .4; cursor: not-allowed; }
.btn-mini:disabled:hover { background: none; color: var(--ink); border-color: rgba(43, 38, 32, 0.45); }
/* 削除など取り消し系 — 朱 */
.btn-mini.danger { color: var(--shu); border-color: rgba(158, 43, 37, 0.5); }
.btn-mini.danger:hover { background: var(--shu); color: var(--washi); border-color: var(--shu); }
/* まとめて注文などテーブル下の操作行 */
.table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }

/* ---------- マイページ: 空状態 ---------- */
.empty-state {
  border: 1px dashed rgba(43, 38, 32, 0.35);
  padding: 46px 24px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}
.empty-state .cta { margin-top: 22px; display: inline-block; }

/* ---------- flow.html 簡易試算(#quick-sim)---------- */
#quick-sim .sim-grid {
  border: 1px solid rgba(158, 43, 37, 0.28);
  background: var(--paper);
  padding: 40px 36px;
}
#quick-sim .quote-panel { position: static; }

/* ---------- order.html: ヒーロー小リンクと完了パネルの2ボタン並び ---------- */
.page-hero .hero-link { margin-top: 18px; font-size: 0.8rem; letter-spacing: 0.08em; }
.page-hero .hero-link a { color: var(--aka); border-bottom: 1px solid var(--aka-line); padding-bottom: 2px; transition: color .3s, border-color .3s; }
.page-hero .hero-link a:hover { color: var(--aka-2); border-color: var(--aka-2); }
.order-complete .complete-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
.order-complete .complete-actions .cta { margin-top: 0; }

/* ---------- §12 responsive(ナビ折りたたみ境界 1120px と同期)---------- */
@media (max-width: 1120px) {
  /* 研究活動: モバイルでは見出し + 平置き2リンク */
  .nav-drop { position: static; }
  .site-nav .nav-drop-btn,
  .site-nav .nav-drop.open .nav-drop-btn {
    pointer-events: none;
    display: block; text-align: left;
    padding: 24px 30px 6px;
    font-size: 0.66rem; color: var(--ink-dim); letter-spacing: 0.32em;
    border: none;
  }
  .nav-drop-btn::after { content: ""; }
  .drop-menu { position: static; transform: none; visibility: visible; opacity: 1; padding-top: 0; }
  .drop-menu-inner { border: none; background: none; padding: 0; min-width: 0; gap: 0; }
  .drop-menu a {
    display: block;
    font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
    text-align: left;
    padding: 12px 30px 12px 48px;
    font-size: 0.94rem;
    letter-spacing: 0.2em;
  }
  #quick-sim .sim-grid { padding: 28px 20px; }
}
@media (max-width: 640px) {
  #cart-table, #history-table { min-width: 560px; font-size: 0.8rem; }
  .row-thumb, .row-thumb-none { width: 52px; height: 52px; }
  .empty-state { padding: 36px 18px; }
}

/* ナビ項目が増えたための中間幅の詰め(折返し防止) */
@media (min-width: 1121px) and (max-width: 1240px) {
  .site-nav { gap: 10px 16px; font-size: 0.8rem; }
  .drop-menu { left: auto; right: 0; transform: none; }
}

/* ==========================================================
   §13 — 認証・サーバ連携の共通コンポーネント
   (#auth-nav / login・register フォーム / 未ログイン誘導 /
    serverAdjusted 注記)
   ========================================================== */

/* ---------- ナビの認証枠(#auth-nav。site.js が中身を差し替え)---------- */
#auth-nav { display: inline-flex; align-items: center; gap: 14px; }

.auth-user {
  display: inline-block;
  max-width: 9em;             /* 長い名前は省略(…)して折返しを防ぐ */
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--ink);
}

.auth-logout {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  line-height: 1;
  padding: 7px 13px;
  background: none;
  color: var(--aka);
  border: 1px solid rgba(158, 43, 37, 0.55);
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.auth-logout:hover { background: var(--aka); color: var(--washi); border-color: var(--aka); }
.auth-logout:focus-visible { outline: 1px solid var(--aka); outline-offset: 2px; }
.auth-logout:disabled { opacity: .4; cursor: wait; }

/* ---------- login / register フォームカード(和紙地・藍罫)---------- */
.auth-card {
  max-width: 480px;
  margin: 0 auto;
  padding: 46px 42px 40px;
  border: 1px solid var(--aka-line);
  border-top: 2px solid var(--aka);
  background: var(--paper);
}
.auth-card h1,
.auth-card h2 {
  font-size: 1.34rem;
  letter-spacing: 0.26em;
  margin-bottom: 10px;
}
.auth-card .auth-sub {
  font-size: 0.8rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  margin-bottom: 30px;
}

.auth-field { margin-bottom: 22px; }
.auth-field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--aka);
  margin-bottom: 8px;
}
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
  display: block;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.93rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--washi);
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.3);
  border-radius: 0;
  transition: border-color .3s;
}
.auth-field input:hover { border-color: rgba(158, 43, 37, 0.6); }
.auth-field input:focus { outline: none; border-color: var(--aka); }
.auth-field .field-note {
  display: block;
  font-size: 0.72rem;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  margin-top: 6px;
}

/* 「管理者として登録」トグル(register。藍罫の札 — sim-check と同じ作法) */
.auth-check {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
  padding: 13px 16px;
  border: 1px solid rgba(158, 43, 37, 0.25);
  background: var(--washi);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color .3s, background .3s;
}
.auth-check:hover { border-color: var(--aka); }
.auth-check input { accent-color: var(--aka); }

/* エラー表示(朱) */
.auth-error {
  margin-bottom: 22px;
  padding: 12px 16px;
  border: 1px solid rgba(158, 43, 37, 0.55);
  background: rgba(158, 43, 37, 0.07);
  color: var(--shu);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
}

.auth-actions { margin-top: 32px; }
.auth-actions .cta {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  cursor: pointer;
}
.auth-actions .cta:hover { background: var(--shu); }
.auth-actions .cta:disabled { opacity: .4; cursor: wait; }

.auth-alt {
  margin-top: 24px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
}
.auth-alt a {
  color: var(--aka);
  border-bottom: 1px solid var(--aka-line);
  padding-bottom: 2px;
  transition: color .3s, border-color .3s;
}
.auth-alt a:hover { color: var(--aka-2); border-color: var(--aka-2); }

/* ---------- 未ログイン誘導パネル(mypage / admin 共用)---------- */
.login-gate {
  max-width: 580px;
  margin: 0 auto;
  padding: 54px 38px 48px;
  border: 1px solid var(--aka);
  background: var(--paper);
  text-align: center;
}
.login-gate p { font-size: 0.92rem; letter-spacing: 0.1em; }
.login-gate .gate-note {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
}
.login-gate .gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 30px;
}
.login-gate .gate-actions .cta { margin-top: 0; }

/* ---------- serverAdjusted 注記(confirm 時にサーバが金額を補正した場合)---------- */
.server-adjusted-note {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(158, 43, 37, 0.5);
  color: var(--shu);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ---------- §13 responsive ---------- */
@media (max-width: 1120px) {
  /* 認証枠の1行分だけ品書きが伸びるため、縦メニューは折返さずスクロールさせる */
  .site-nav { flex-wrap: nowrap; }

  /* モバイルメニュー内の認証枠: 藍枠ボタンとして品書き末尾に */
  #auth-nav { display: flex; align-items: center; gap: 18px; padding: 14px 30px; }
  #auth-nav > a {
    font-family: 'Shippori Mincho B1', 'Noto Serif JP', serif;
    font-size: 0.94rem;
    letter-spacing: 0.22em;
    border: 1px solid var(--aka);
    padding: 11px 26px;
    height: auto;
    color: var(--aka);
  }
  #auth-nav > a.current::before { content: none; }
  .auth-user { font-size: 0.96rem; }
  .auth-logout { padding: 9px 16px; font-size: 0.78rem; }
}
@media (max-width: 640px) {
  .auth-card { padding: 36px 22px 32px; }
  .login-gate { padding: 40px 20px 36px; }
  .login-gate .gate-actions { flex-direction: column; align-items: stretch; }
}
/* ナビ項目増(#auth-nav 枠)に伴う中間幅の詰め(折返し防止) */
@media (min-width: 1121px) and (max-width: 1310px) {
  .site-header { padding-left: 20px; padding-right: 20px; }
  .site-nav { flex-wrap: nowrap; gap: 8px; font-size: 0.74rem; }
  .site-nav > * { flex-shrink: 0; }
  #auth-nav > a { height: 30px; padding: 0 10px 0.1em; font-size: 0.74rem; }
  .drop-menu { left: auto; right: 0; transform: none; }
  #auth-nav { gap: 8px; }
}

/* ==========================================================
   ウィザード商品選択(order.html Step1 — §8)
   カード意匠は index.html と同じ product-grid / product-card を流用し、
   ここでは「選択カード」挙動に必要な差分だけを足す。
   ========================================================== */
@media (min-width: 901px) {
  .flow-steps { grid-template-columns: repeat(5, 1fr); }
}
/* 選択可能カード(data-product-card 付き)はカード全体をクリック可に */
#product-select .product-card[data-product-card] { cursor: pointer; }
#product-select .product-card[data-product-card] h3 { color: inherit; }
/* 選択中カードは朱枠で強調(選択ハイライトは朱系) */
#product-select .product-card.is-selected {
  border-color: var(--shu);
  box-shadow: 0 0 0 1px var(--shu), 0 0 0 4px rgba(158, 43, 37, 0.18);
}
#product-select .product-card.is-selected:hover { border-color: #b6423b; }

/* ---------- ウィザード選択内容バー(選択条件の常時表示+やり直し導線) ---------- */
.wizard-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: -26px 0 40px;
}
.bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  background: var(--paper);
  border: 1px solid rgba(158, 43, 37, 0.25);
  color: var(--ink-dim);
  font-size: 0.73rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.bar-chip.is-filled { color: var(--ink); border-color: rgba(158, 43, 37, 0.45); } /* 入力済み=朱系(§16 第2フィードバック) */
.bar-chip.is-here { border-color: var(--shu); }
.bar-chip:disabled { cursor: default; }
.bar-chip:not(:disabled):hover { border-color: var(--shu); color: var(--shu); }
.bar-key { color: var(--aka); font-size: 0.64rem; letter-spacing: 0.18em; }
.bar-val { max-width: 15em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-edit { color: var(--aka); font-size: 0.62rem; letter-spacing: 0.12em; border-bottom: 1px solid rgba(158, 43, 37, 0.4); }
.bar-total { margin-left: auto; font-family: var(--font-ui); font-size: 0.8rem; color: var(--aka); letter-spacing: 0.12em; }
@media (max-width: 640px) {
  .wizard-bar { margin-top: -18px; }
  .bar-val { max-width: 8em; }
  .bar-total { margin-left: 0; width: 100%; }
}

/* ==========================================================
   校正確認スレッド(mypage 購入履歴 — §14)
   バッジ3態(waiting=淡 / review=朱 / closed=淡地+墨文字)+
   吹き出し風ログ(system/staff=左・淡帯、user=右・藍枠)+選択肢ボタン列。
   ========================================================== */
#history-table tr:has(+ .proof-row) th,
#history-table tr:has(+ .proof-row) td { border-bottom: none; }
.proof-row td { padding: 0 6px 26px; }
.proof-thread {
  padding: 18px 20px 20px;
  background: rgba(233, 226, 210, 0.55);   /* washi-2 の淡帯 */
  border: 1px solid rgba(43, 38, 32, 0.14);
  border-left: 3px solid var(--aka);
}
.proof-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.proof-title { font-family: 'Shippori Mincho B1', serif; font-size: 0.92rem; letter-spacing: 0.18em; }
.proof-badge {
  display: inline-block;
  padding: 3px 12px 4px;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.proof-badge.is-waiting { color: var(--ink-dim); border-color: rgba(43, 38, 32, 0.25); background: rgba(242, 237, 225, 0.7); }
.proof-badge.is-review { color: #f6efe2; background: var(--shu); border-color: var(--shu); font-weight: 600; }
.proof-badge.is-closed { color: var(--ink); background: var(--washi-2); border-color: rgba(43, 38, 32, 0.3); }
.proof-log { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.proof-msg {
  max-width: min(34em, 86%);
  padding: 10px 14px 11px;
  font-size: 0.8rem;
  line-height: 1.8;
  letter-spacing: 0.04em;
}
.proof-msg.from-system, .proof-msg.from-staff {
  align-self: flex-start;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.2);
}
.proof-msg.from-user {
  align-self: flex-end;
  background: var(--washi);
  color: var(--ink);
  border: 1px solid var(--aka);
}
.proof-meta { display: block; font-size: 0.64rem; letter-spacing: 0.12em; opacity: .7; margin-bottom: 3px; }
.proof-text { display: block; }
.proof-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.proof-choice { padding: 10px 18px; font-size: 0.78rem; }
.proof-note { margin-top: 10px; font-size: 0.74rem; color: var(--shu); letter-spacing: 0.06em; }
.proof-note:empty { display: none; }
@media (max-width: 640px) {
  .proof-msg { max-width: 100%; }
  .proof-actions { flex-direction: column; align-items: stretch; }
}

/* ==========================================================
   印刷機ガント(admin.html #press-gantt・§15)
   今日から21日間・行=印刷機。§16 再配色: 藍=受注バー(確定日→
   仕上がり予定)/朱=メンテナンス/淡グレー帯=停止中。
   土日は深めの和紙帯、today 列に朱の細罫。ラベルはゴシック。
   ========================================================== */
.gantt {
  display: grid;
  grid-template-columns: 158px minmax(714px, 1fr); /* 714px = 21日 × 34px */
  min-width: max-content; /* .table-scroll 内でも枠線・背景がトラック全幅に及ぶように */
  border: 1px solid rgba(158, 43, 37, 0.28);
  background: var(--paper);
}
.gantt-corner,
.gantt-name {
  position: sticky; /* 横スクロール時も機名は左端に残す */
  left: 0;
  z-index: 2;
  background: var(--paper);
  border-right: 1px solid rgba(158, 43, 37, 0.28);
  padding: 10px 14px;
}
.gantt-corner {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--aka);
  border-bottom: 1px solid rgba(158, 43, 37, 0.28);
}
.gantt-head {
  display: grid;
  grid-template-columns: repeat(21, 1fr);
  border-bottom: 1px solid rgba(158, 43, 37, 0.28);
}
.gantt-date {
  padding: 8px 0 6px;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--ink-dim);
  border-left: 1px solid rgba(158, 43, 37, 0.1);
}
.gantt-name {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid rgba(158, 43, 37, 0.14);
}
.gantt-name .cell-note { display: block; margin-top: 2px; font-size: 0.66rem; color: var(--ink-dim); }
.gantt-lane { position: relative; border-bottom: 1px solid rgba(158, 43, 37, 0.14); }
.gantt-days { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(21, 1fr); }
.gantt-day { border-left: 1px solid rgba(158, 43, 37, 0.1); }
.gantt-date.is-weekend,
.gantt-day.is-weekend { background: rgba(43, 38, 32, 0.055); } /* 土日=深めの和紙帯 */
.gantt-date.is-weekend { color: var(--ink-dim); }
.gantt-date.is-today,
.gantt-day.is-today { border-left: 1px solid var(--shu); } /* today の朱の細罫 */
.gantt-band-stopped {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-left: 12px;
  background: rgba(43, 38, 32, 0.08); /* 停止中=淡グレーの帯 */
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
}
.gantt-bar {
  position: absolute;
  box-sizing: border-box;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
  font-family: var(--font-ui);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-bar--order {
  background: linear-gradient(180deg, #4a4238, #2b2620); /* 受注=墨(メンテ朱と描き分け) */
  border: 1px solid #2b2620;
  color: #f2ede1;
}
.gantt-bar--order.is-est { border-style: dashed; } /* press 未記録 → 推定割当(識別は破線+「(推定)」表記。opacity はラベル AA のため不可) */
.gantt-bar--maint {
  background: rgba(158, 43, 37, 0.88); /* メンテナンス=朱 */
  border: 1px solid var(--shu);
  color: #f6efe2;
}
.gantt-empty { grid-column: 1 / -1; padding: 18px 16px; font-size: 0.8rem; color: var(--ink-dim); }

/* ==========================================================
   品質帯(DESIGN_SPEC §17 — 美術ライン / クリエイターズライン)
   ========================================================== */

/* グループ見出し — 明朝・朱罫の小見出し+説明文(index 商品ライン・flow 料金表で共用) */
.product-group-head { margin: 0 0 30px; }
.product-grid + .product-group-head,
.price-tables + .product-group-head { margin-top: 64px; }
.product-group-head h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 1.18rem;
  letter-spacing: 0.2em;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--aka-line);
}
.product-group-head p {
  font-size: 0.8rem;
  color: var(--ink-dim);
  letter-spacing: 0.06em;
  max-width: 46em;
}

/* 品質帯バッジ — 操作系ゴシック・小型(§16: 操作系はゴシック) */
.tier-badge {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 10px 4px;
  white-space: nowrap;
}
/* 美術ライン = 墨地白抜き */
.tier-badge.tier-museum {
  background: var(--ink);
  border: 1px solid var(--ink);
  color: var(--washi);
}
/* クリエイターズライン = 淡墨枠・墨文字 */
.tier-badge.tier-standard {
  background: transparent;
  border: 1px solid rgba(43, 38, 32, 0.45);
  color: var(--ink-dim);
}

/* カード内バッジ(product-card は flex column のため左寄せで固定) */
.product-card .tier-badge {
  align-self: flex-start;
  margin-bottom: 12px;
}

/* 写真なしタイポカード(クリエイターズライン。既存 product-card 流用) */
.product-card--typo { border-top-color: rgba(43, 38, 32, 0.5); }
.product-card--typo .en { font-size: 0.66rem; }
/* 品質の一言(カード内)— 説明文と違い伸長させない */
.product-card .tier-note {
  flex-grow: 0;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.08em;
  margin-top: 10px;
}

/* 料金表補助: 長い行見出しは折返し可(グッズ表・品質帯の違い表) */
.info-table--wrap th { white-space: normal; }

/* 簡易見積り: 美術ライン専用オプションのロック表示 */
.sim-check:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.sim-check:has(input:disabled):hover { border-color: var(--ink-line); }

/* ---------- 印刷機の追加・編集ダイアログ(オーバーレイ表示。2026-08-14) ---------- */
.press-dialog {
  /* リセット CSS(margin:0)で UA の中央寄せが無効になるため明示する */
  position: fixed;
  inset: 0;
  margin: auto;
  border: 1px solid var(--aka-line);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  width: min(720px, 92vw);
  max-height: 86vh;
  height: fit-content;
  overflow: auto;
}
.press-dialog::backdrop { background: rgba(18, 16, 12, 0.55); }
.press-dialog-inner { padding: 28px 30px 26px; }
.dialog-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--aka-line);
}
.dialog-head h2 { font-size: 1.2rem; letter-spacing: 0.18em; }
.dialog-head .en { font-size: 0.64rem; letter-spacing: 0.32em; color: var(--aka); text-transform: uppercase; }
.dialog-close {
  margin-left: auto;
  align-self: center;
  width: 34px; height: 34px;
  background: none;
  border: 1px solid var(--ink-line);
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s, color .3s;
}
.dialog-close:hover { border-color: var(--aka); color: var(--aka); }
.press-add-row { margin-top: 16px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .press-dialog { width: 96vw; max-height: 92vh; }
  .press-dialog-inner { padding: 22px 16px 20px; }
}

/* ============================================================
   §18 決済(Stripe Checkout)
   パレットは §16 のまま(和紙地・墨文字・朱アクセント)。藍・金は使わない。
   admin: #payment-settings / mypage: .pay-badge・.pay-result
   ============================================================ */

/* ---------- admin: 決済設定(superuser のみ) ---------- */
.pay-settings > p { max-width: 62ch; }

/* 状態表(info-table の2列版。admin-table の min-width は付けない) */
.pay-status-table { max-width: 720px; margin-top: 26px; }
.pay-status-table th { width: 15em; font-size: 0.78rem; }
.pay-status-table td { font-family: var(--font-ui); font-size: 0.82rem; letter-spacing: 0.06em; }

/* 状態バッジ(mypage と共通の .pay-badge を流用) */
.pay-badge {
  display: inline-block;
  padding: 3px 12px 4px;
  font-family: var(--font-ui);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.pay-badge.is-paid { background: var(--aka); border-color: var(--aka); color: #f2ede1; }   /* 支払済(mypage・admin 受注一覧) */
.pay-badge.is-test {                                                                       /* テスト決済 */
  background: rgba(158, 43, 37, 0.08);
  border-color: var(--aka-line);
  color: var(--aka);
}
.pay-badge.is-live { background: var(--shu); border-color: var(--shu); color: #f6efe2; }    /* 本番モード */
.pay-badge.is-unset {                                                                      /* 未設定・—  */
  background: var(--washi-2);
  border-color: rgba(43, 38, 32, 0.3);
  color: var(--ink-dim);
}

/* Webhook URL(読み取り専用+コピー) */
.pay-webhook { margin-top: 34px; }
.pay-webhook-row { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.pay-webhook-row input[type="text"] {
  flex: 1 1 380px;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 11px 16px;
  background: var(--washi-2);
  color: var(--ink);
  border: 1px solid var(--ink-line);
  border-radius: 0;
}
.pay-webhook-row input[type="text"]:focus { outline: none; border-color: var(--aka); }
.pay-webhook-row .mini-btn { flex: none; align-self: center; }
.pay-copy-msg { margin-left: 10px; color: var(--aka); }

/* 入力フォーム(sim-form / admin-form を流用) */
.pay-form { margin-top: 34px; }
.pay-form input[type="password"] {   /* .sim-form の text/number/date と同じ意匠 */
  display: block;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 0.93rem;
  letter-spacing: 0.14em;
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid rgba(43, 38, 32, 0.3);
  border-radius: 0;
  transition: border-color .3s;
}
.pay-form input[type="password"]:hover { border-color: rgba(158, 43, 37, 0.6); }
.pay-form input[type="password"]:focus { outline: none; border-color: var(--aka); }
.pay-form input[type="password"]:disabled {
  background: var(--washi-2);
  opacity: .55;
  cursor: not-allowed;
}
.pay-form ::placeholder { color: var(--ink-dim); opacity: 1; }

/* 入力欄下の状態注記(値は出さない。末尾4文字のみ) */
.pay-field-state {
  font-family: var(--font-ui);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--ink-dim);
  margin-top: 8px;
}
.pay-field-state.is-set { color: var(--aka); }
.pay-field-state.is-env {
  color: var(--ink-dim);
  border-left: 2px solid var(--ink-line);
  padding-left: 10px;
}

/* 「保存済みの値を削除する」(sim-check の小型版) */
.pay-clear { margin-top: 10px; padding: 8px 12px; font-size: 0.76rem; }
.pay-clear input[type="checkbox"] { width: 14px; height: 14px; }

/* 本番モードの警告(朱・§18.6) */
.pay-warning {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--shu);
  background: rgba(158, 43, 37, 0.08);
  color: var(--shu);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}
#payment-settings.is-live .pay-form { border-left: 2px solid var(--shu); padding-left: 22px; }

/* 接続テストの結果 */
.pay-test-result {
  grid-column: 1 / -1;
  margin-top: 14px;
  padding: 11px 16px;
  border: 1px solid var(--ink-line);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.pay-test-result.is-pending { color: var(--ink-dim); }
.pay-test-result.is-ok { border-color: var(--aka-line); background: rgba(158, 43, 37, 0.06); color: var(--aka); }
.pay-test-result.is-error { border-color: var(--shu); background: rgba(158, 43, 37, 0.1); color: var(--shu); }

/* ---------- mypage: 支払い結果パネル(?paid= / ?payment=canceled) ---------- */
.pay-result {
  border: 1px solid var(--ink-line);
  border-top: 2px solid var(--ink-dim);
  background: var(--paper);
  padding: 24px 26px 22px;
  margin-bottom: 30px;
}
.pay-result h3 {
  font-size: 1.05rem;
  letter-spacing: 0.16em;
  margin-bottom: 8px;
}
.pay-result p { font-size: 0.88rem; line-height: 1.9; }
.pay-result .pay-result-order {
  display: block;
  font-family: 'Shippori Mincho B1', serif;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  color: var(--aka);
  margin-top: 10px;
}
.pay-result .pay-result-note { font-size: 0.76rem; color: var(--ink-dim); margin-top: 8px; }
.pay-result .pay-badge { margin-bottom: 10px; }
.pay-result.is-ok { border-top-color: var(--aka); }
.pay-result.is-pending { border-top-color: var(--ink-dim); }
.pay-result.is-canceled { border-top-color: rgba(93, 81, 66, 0.5); }
.pay-result.is-error { border-top-color: var(--shu); }
.pay-result.is-error h3, .pay-result.is-error .pay-result-order { color: var(--shu); }

@media (max-width: 640px) {
  .pay-status-table th { width: auto; }
  .pay-webhook-row .mini-btn { align-self: flex-start; }
  .pay-result { padding: 20px 18px 18px; }
}