@charset "UTF-8";

/* LINE Seed JP © LY Corporation / SIL Open Font License 1.1
   同梱WOFF2から配信し、入力文字に応じた外部フォント通信を発生させない */
@font-face {
  font-family: "LINE Seed JP";
  src: url("LINE_Seed_JP/Web/WOFF2/LINESeedJP_OTF_Rg.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed JP";
  src: url("LINE_Seed_JP/Web/WOFF2/LINESeedJP_OTF_Bd.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed JP";
  src: url("LINE_Seed_JP/Web/WOFF2/LINESeedJP_OTF_Eb.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

/* ============================================================
   KUMITATE — スケジュール表作成ツール
   コンセプト: 製図台の白。黒インクと朱一点の精密工程表
   ============================================================ */

:root {
  --ink: #1A1311;
  --text: #26211E;
  --muted: #6F6863;
  --faint: #736C67;
  --bg: #F6F5F3;
  --summary-bg: #FBFAF8;
  --surface: #FFFFFF;
  --line: #E8E5E1;
  --line-strong: #D8D4CF;
  --accent: #E3691C;
  --accent-soft: #FFF1E8;
  --holiday-bg: #EFEDEA;
  --holiday-ink: #736C67;
  --sun: #B5493C;
  --sat: #46688F;
  --row-h: 36px;      /* app.js の ROW_H と同期させること */
  --day-col-w: 76px;
  --radius: 12px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --shadow-1: 0 1px 2px rgba(26, 19, 17, 0.04), 0 4px 16px rgba(26, 19, 17, 0.05);
  --shadow-2: 0 4px 12px rgba(26, 19, 17, 0.10), 0 16px 40px rgba(26, 19, 17, 0.12);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  /* 未収録・未ロードのグリフは端末標準の日本語フォントで補完する */
  font-family: "LINE Seed JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
}

img { max-width: 100%; }

button, input, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 200;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.site-main { min-width: 0; }

/* ------------------------------------------------------------
   アプリバー
   ------------------------------------------------------------ */

.appbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px 36px 18px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.appbar-main {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand-copy {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.brand-title {
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.brand-function {
  min-width: 0;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

.logo {
  height: 22px;
  width: auto;
  display: block;
  user-select: none;
}

.appbar-banner {
  flex-shrink: 0;
  display: block;
  border-radius: 7px;
  transition: opacity 0.25s var(--ease);
}

.appbar-banner:hover { opacity: 0.78; }

.appbar-banner img {
  height: 46px;
  width: auto;
  display: block;
  user-select: none;
}

.section-kicker {
  margin-bottom: 7px;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ハンバーガーボタン（スマホ・タブレットのみ表示） */
.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.menu-toggle:hover { border-color: var(--ink); }

.menu-toggle .mt-bar {
  transform-origin: center;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.menu-toggle.open .mt-top { transform: translateY(5px) rotate(45deg); }

.menu-toggle.open .mt-mid { opacity: 0; }

.menu-toggle.open .mt-bottom { transform: translateY(-5px) rotate(-45deg); }

.undo-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.icon-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--ink);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.icon-btn:hover:not(:disabled) { background: var(--bg); }

.icon-btn:disabled { opacity: 0.28; cursor: default; }

.appbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   ボタン
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn.primary {
  background: var(--ink);
  color: #FFFFFF;
}

.btn.primary:hover { background: #3A322E; }

.btn.ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink);
}

.btn.ghost:hover { background: var(--surface); border-color: var(--ink); }

.btn.accent {
  background: var(--accent);
  color: #FFFFFF;
}

.btn.accent:hover { background: color-mix(in srgb, var(--accent) 84%, var(--ink)); }

/* 破壊的な操作だとわかるゴースト。既定は控えめで、ホバー時に赤く出す */
.btn.danger-ghost:hover {
  border-color: var(--sun);
  color: var(--sun);
  background: #F9ECEA;
}

.btn.copied {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.btn.subtle {
  background: var(--bg);
  color: var(--ink);
}

.btn.subtle:hover { background: var(--line); }

.btn.danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--sun);
}

.btn.danger:hover { background: #F9ECEA; }

.link-btn {
  font-size: 12.5px;
  color: var(--accent);
  padding: 8px 4px;
  border-radius: 6px;
  transition: opacity 0.25s var(--ease);
}

.link-btn:hover { opacity: 0.72; }

/* ------------------------------------------------------------
   ツールバー
   ------------------------------------------------------------ */

.toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 36px;
  padding: 28px 36px 0;
}

.toolbar-left {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.field input[type="month"],
.field input[type="text"],
.field select {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  height: 38px;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field input[type="month"]:hover,
.field input[type="text"]:hover,
.field select:hover { border-color: var(--ink); }

.field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field input[type="text"]::placeholder { color: var(--faint); font-weight: 400; }

/* プロジェクト名は長くなりやすいので広めに取る */
.field-project { flex: 1; min-width: 220px; max-width: 420px; }

.field-project input[type="text"] { width: 100%; }

.toolbar .btn.accent { height: 38px; }

/* 凡例（担当の色分け・右上） */

.legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 52%;
}

.legend-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
}

.chip:hover { border-color: var(--chip-c, var(--ink)); }

.chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--chip-c, var(--muted));
  flex-shrink: 0;
}

.chip .chip-edit {
  color: var(--faint);
  flex-shrink: 0;
  transition: color 0.25s var(--ease);
}

.chip:hover .chip-edit { color: var(--accent); }

.chip.add {
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted);
  font-weight: 400;
}

.chip.add:hover { color: var(--ink); border-color: var(--ink); }

/* ------------------------------------------------------------
   ヒント
   ------------------------------------------------------------ */

.hint {
  padding: 14px 36px 0;
  font-size: 12.5px;
  line-height: 2.1;
  color: var(--muted);
}

.hint[hidden] { display: none; }

/* ------------------------------------------------------------
   ボード（月カラム）
   ------------------------------------------------------------ */

.board-wrap {
  padding: 24px 36px 64px;
  overflow-x: auto;
}

.board {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  min-width: 100%;
}

/* ------------------------------------------------------------
   検索・AIにも意味が伝わる短いツール説明
   ------------------------------------------------------------ */

.tool-summary {
  width: calc(100% - 72px);
  margin: 0 auto 58px;
  padding: 36px clamp(28px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
  gap: 72px;
  background: var(--summary-bg);
  border-radius: 16px;
}

.tool-summary-head h2 {
  color: var(--ink);
  font-size: clamp(18px, 1.8vw, 25px);
  font-weight: 800;
  line-height: 1.55;
}

.tool-summary-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-summary-body p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.9;
}

.tool-summary-body strong { color: var(--text); }

.use-case-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  list-style: none;
}

.use-case-list li {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.5;
}

.use-case-list li:not(:last-child)::after {
  content: '/';
  margin: 0 9px;
  color: var(--line-strong);
  font-weight: 400;
}

.tool-summary-body a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .tool-summary-body a:hover { color: var(--accent); }
}

/* ------------------------------------------------------------
   機能説明・よくある質問
   ------------------------------------------------------------ */

.product-info,
.faq {
  width: min(1180px, calc(100% - 72px));
  margin: 0 auto;
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

.product-info {
  padding: 12px 0 68px;
  border-top: 1px solid var(--line-strong);
}

.product-info-head {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  column-gap: 72px;
  align-items: end;
  padding: 42px 0 34px;
}

.product-info-head .section-kicker { grid-column: 1 / -1; }

.product-info-head h1,
.faq-head h2 {
  color: var(--ink);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  line-height: 1.5;
}

.product-info-head > p:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.product-info-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.65fr);
  gap: 72px;
  align-items: start;
}

.feature-detail > h2,
.data-note h2,
.feature-detail > h3,
.data-note h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.feature-detail > h2,
.feature-detail > h3 { margin-bottom: 4px; }

.feature-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr);
  gap: 28px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.feature-list dt {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.feature-list dd,
.data-note p,
.faq-list p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.9;
}

.data-note {
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

.data-note h2,
.data-note h3 { margin-bottom: 10px; }

.data-note a {
  display: inline-block;
  margin-top: 15px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .data-note a:hover { color: var(--accent); }
}

.faq {
  padding: 62px 0 76px;
  border-top: 1px solid var(--line-strong);
}

.faq-head {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  column-gap: 72px;
  align-items: end;
  margin-bottom: 26px;
}

.faq-head .section-kicker { grid-column: 1 / -1; }

.faq-list { border-top: 1px solid var(--line); }

.faq-list section {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 72px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.faq-list h3 {
  position: relative;
  padding-left: 24px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

.faq-list h3::before {
  content: 'Q';
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
}

.about-main {
  min-height: calc(100dvh - 76px);
  padding-top: 20px;
}

.about-main .product-info {
  padding-top: 0;
  border-top: 0;
}

.about-footer {
  margin-top: 0;
}

.month {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* 高さを固定：フォントの差で印刷時の総高が変わらないようにする */
.month-head {
  height: 54px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.month-head .year {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.month-remove {
  margin-left: auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: var(--faint);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.month:hover .month-remove,
.month-remove:focus-visible { opacity: 1; }

.month-remove:hover { background: var(--accent-soft); color: var(--accent); }

@media (hover: none) {
  .month-remove { opacity: 1; }
}

.add-month {
  flex: 0 0 52px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 18px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: transparent;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.add-month:hover { border-color: var(--ink); color: var(--ink); background: var(--surface); }

.add-month .plus { font-size: 16px; font-weight: 700; }

.add-month .vtext {
  writing-mode: vertical-rl;
  font-size: 12px;
  font-weight: 700;
}

.month-body {
  display: flex;
  flex: 1;
}

/* 日付カラム */

.day-col {
  width: var(--day-col-w);
  flex-shrink: 0;
  border-right: 1px solid var(--line);
}

.day-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--row-h);
  padding: 0 8px 0 12px;
  border-bottom: 1px solid #F3F1EE;
  cursor: pointer;
  transition: background-color 0.2s var(--ease);
}

.day-cell:last-child { border-bottom: none; }

.day-cell:hover { background: var(--accent-soft); }

.day-cell.holiday { background: var(--holiday-bg); }

.day-cell.holiday:hover { background: #E7E3DE; }

.d-num {
  width: 18px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.d-wd {
  font-size: 11.5px;
  color: var(--muted);
  flex-shrink: 0;
}

.day-cell.sun .d-num, .day-cell.sun .d-wd,
.day-cell.hol .d-num, .day-cell.hol .d-wd { color: var(--sun); }

.day-cell.sat .d-num, .day-cell.sat .d-wd { color: var(--sat); }

.day-cell.holiday .d-num, .day-cell.holiday .d-wd { opacity: 0.75; }

.d-mark {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 4px;
  border-radius: 4px;
  flex-shrink: 0;
}

.d-mark.hol { color: #FFFFFF; background: var(--sun); }

.d-mark.custom { color: #FFFFFF; background: var(--holiday-ink); }

.d-mark.work { color: var(--muted); border: 1px solid var(--line-strong); background: var(--surface); }

.day-cell.today .d-num {
  width: 20px;
  height: 20px;
  margin-left: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 50%;
  font-size: 11px;
}

/* レーン領域 */

.lanes {
  --gutter: 44px; /* 右端の常時空きスペース（帯がある日でもここから工程を追加できる） */
  position: relative;
  cursor: crosshair;
  flex: 1;
}

.rowline {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--row-h);
}

/* 休日グレーと罫線は帯より手前に重ねる装飾層（クリックは下の層へ透過） */
.rowcover {
  position: absolute;
  left: 0;
  right: 0;
  height: var(--row-h);
  z-index: 5;
  pointer-events: none;
  border-bottom: 1px solid rgba(26, 19, 17, 0.055);
}

.rowcover.holiday { background: rgba(239, 237, 234, 0.84); }

.rowline::after {
  content: '＋';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
}

.rowline:hover::after { opacity: 0.55; }

body.dragging .rowline::after { opacity: 0; }

.holiday-name {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--holiday-ink);
  pointer-events: none;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 工程バンド */

.band {
  position: absolute;
  touch-action: none;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c) 24%, white);
  color: color-mix(in srgb, var(--c) 58%, var(--ink));
  padding: 7px 9px;
  overflow: hidden;
  cursor: grab;
  z-index: 3;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 22%, white);
  transition: filter 0.2s var(--ease);
}

.band:hover {
  filter: saturate(1.12);
  z-index: 4;
}

.band.cut-top { border-top-left-radius: 0; border-top-right-radius: 0; }
.band.cut-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.band-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  word-break: break-all;
}

.band.one .band-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.1;
  padding-top: 2px;
}

.band-dates {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.h-start, .h-end {
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  cursor: ns-resize;
  touch-action: none;
  z-index: 2;
}

.h-start { top: 0; }
.h-end { bottom: 0; }

.band.drag-source { opacity: 0.25; pointer-events: none; }

/* ドラッグ・作成プレビュー */

.preview-band {
  position: absolute;
  left: 4px;
  right: calc(var(--gutter, 0px) + 4px);
  border-radius: 7px;
  background: color-mix(in srgb, var(--c, var(--accent)) 26%, white);
  border: 1.5px solid var(--accent);
  padding: 6px 9px;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.preview-band .band-label {
  color: color-mix(in srgb, var(--c, var(--accent)) 58%, var(--ink));
}

body.dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

body.dragging .lanes { cursor: grabbing; }

/* ------------------------------------------------------------
   ポップオーバー
   ------------------------------------------------------------ */

.popover {
  position: fixed;
  z-index: 60;
  /* 日付入力2つ（各170px）＋区切り＋余白が収まる幅 */
  width: min(420px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 20px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.popover.show { opacity: 1; transform: translateY(0); }

.popover-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 4px;
}

.popover-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.popover .form-row { margin-bottom: 12px; }

.popover label.form-row { display: block; }

.popover .form-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 5px;
}

.popover input[type="text"],
.popover input[type="date"],
.popover select {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: max(16px, 1rem);
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.25s var(--ease);
  height: 38px;
}

.popover input:focus, .popover select:focus {
  outline: none;
  border-color: var(--accent);
}

.date-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}

.date-range .tilde { color: var(--faint); font-size: 12px; text-align: center; }

.date-range input[type="date"] { min-width: 0; }

.swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--c);
  position: relative;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}

.swatch:hover { transform: scale(1.12); }

.swatch.selected { border-color: var(--ink); box-shadow: inset 0 0 0 2px #FFFFFF; }

.popover-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.popover-actions .spacer { flex: 1; }

.popover-actions .btn { padding: 8px 14px; font-size: 12.5px; }

.popover .status-line {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.popover .status-line strong { color: var(--ink); }

.popover .stack { display: flex; flex-direction: column; gap: 8px; }

.popover .stack .btn { justify-content: center; }

/* ------------------------------------------------------------
   フッター・SNS共有
   ------------------------------------------------------------ */

.site-foot {
  padding: 0 36px 36px;
  text-align: center;
  font-size: 11px;
  line-height: 2;
  color: var(--faint);
}

.sns-share {
  margin-bottom: 18px;
}

.sns-share > p {
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.sns-share-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  list-style: none;
}

.sns-share-button {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.sns-share-button img {
  width: 17px;
  height: 17px;
  display: block;
}

@media (hover: hover) {
  .sns-share-button:hover {
    border-color: var(--ink);
    background: var(--bg);
    transform: translateY(-2px);
  }
}

.sns-share-button:active { transform: translateY(0); }

.foot-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 7px;
}

.foot-nav a { color: inherit; text-underline-offset: 3px; }

.font-license { margin-top: 4px; }

.font-license a,
.foot-link {
  color: inherit;
  text-underline-offset: 2px;
}

.foot-link {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  text-decoration: underline;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .font-license a:hover,
  .foot-link:hover { color: var(--muted); }
}

/* みんなの累計利用数（ヘッダー・使い方の左） */
.usage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin-right: 8px;
}

.usage-stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
}

.usage-stat-num {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.usage-stat-unit {
  font-size: 11px;
  font-weight: 700;
  margin-left: 1px;
}

/* ------------------------------------------------------------
   使い方ガイド
   ------------------------------------------------------------ */

.guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(26, 19, 17, 0.38);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}

.guide-overlay[hidden] { display: none; }

.guide-overlay.show { opacity: 1; }

.guide {
  position: relative;
  width: min(660px, 100%);
  max-height: calc(100dvh - 56px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow-2);
  transform: translateY(12px) scale(0.985);
  transition: transform 0.32s var(--ease);
}

.guide-overlay.show .guide { transform: translateY(0) scale(1); }

body.dialog-open { overflow: hidden; }

.guide-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  color: var(--muted);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

.guide-close:hover { background: var(--bg); color: var(--ink); }

.guide-body {
  padding: 44px 44px 28px;
  overflow-y: auto;
}

.guide-step-no {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}

.guide-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
}

.guide-lead {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--muted);
  margin-bottom: 26px;
}

.guide-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  margin-bottom: 26px;
  background: var(--bg);
  border-radius: 12px;
}

.guide-figure svg { display: block; max-width: 100%; height: auto; }

.guide-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
}

.guide-points li {
  display: flex;
  gap: 11px;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--text);
}

.guide-points li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.guide-points strong { font-weight: 700; color: var(--ink); }

.guide-note {
  margin-top: 24px;
  padding: 18px 20px;
  border-radius: 11px;
  background: var(--accent-soft);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--text);
}

.guide-note strong { font-weight: 700; color: var(--ink); }

.guide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 44px 28px;
}

.guide-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.guide-dot:hover { background: var(--muted); }

.guide-dot.active { background: var(--accent); transform: scale(1.35); }

.guide-nav { display: flex; align-items: center; gap: 10px; }

.guide-nav .btn[disabled] { opacity: 0.32; cursor: default; }

.guide-nav .btn[disabled]:hover { background: var(--bg); }

/* ガイド内の図版で使う共通色 */
.g-line { stroke: #D8D4CF; stroke-width: 1; }
.g-fill-bg { fill: #FFFFFF; }
.g-gray { fill: #EFEDEA; }
.g-text { fill: #B3ACA6; }
.g-ink { fill: #1A1311; }
.g-accent { fill: #E3691C; stroke: #E3691C; }

@media (max-width: 640px) {
  .guide-body { padding: 38px 24px 24px; }
  .guide-foot { padding: 16px 24px 24px; flex-wrap: wrap; }
  .guide-title { font-size: 18px; }
}

/* 通信・保存・フォントライセンスの詳細表示 */
.privacy-dialog { width: min(720px, 100%); }

.privacy-body { padding-bottom: 38px; }

.privacy-lead { margin-bottom: 6px; }

.privacy-list { margin-top: 8px; }

.privacy-item {
  padding: 22px 0;
  border-top: 1px solid var(--line);
}

.privacy-item h3 {
  margin-bottom: 13px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
}

.privacy-item > p {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.9;
}

.privacy-facts {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.privacy-facts > div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 14px;
  font-size: 12.5px;
  line-height: 1.8;
}

.privacy-facts dt {
  color: var(--muted);
  font-weight: 700;
}

.privacy-facts dd { color: var(--text); }

.privacy-item .privacy-note {
  margin-top: 11px;
  color: var(--muted);
  font-size: 11.5px;
}

.privacy-item a {
  color: var(--text);
  text-underline-offset: 3px;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .privacy-item a:hover { color: var(--accent); }
}

.privacy-footnote {
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.8;
}

@media (max-width: 640px) {
  .privacy-overlay { padding: 16px; }
  .privacy-dialog { max-height: calc(100dvh - 32px); }
  .privacy-facts > div { grid-template-columns: 1fr; gap: 1px; }
  .privacy-body { padding-bottom: 28px; }
}

/* ------------------------------------------------------------
   通信とプライバシー（恒久URL）
   ------------------------------------------------------------ */

.legal-page { background: var(--surface); }

.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 36px;
  border-bottom: 1px solid var(--line);
}

.legal-header > a:first-child { display: flex; align-items: center; }

.legal-back {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .legal-back:hover { color: var(--accent); }
}

.legal-main {
  width: min(920px, calc(100% - 72px));
  margin: 0 auto;
  padding: 72px 0 80px;
}

.legal-title {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  column-gap: 72px;
  align-items: end;
  padding-bottom: 44px;
}

.legal-title .section-kicker { grid-column: 1 / -1; }

.legal-title h1 {
  color: var(--ink);
  font-size: clamp(27px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.35;
}

.legal-title > p:last-child {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.9;
}

.legal-summary {
  padding: 26px 30px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
}

.legal-summary h2 {
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.legal-summary p,
.legal-sections section > p {
  color: var(--text);
  font-size: 13px;
  line-height: 2;
}

.legal-sections { margin-top: 46px; }

.legal-sections > section {
  position: relative;
  padding: 34px 0 38px 72px;
  border-top: 1px solid var(--line);
}

.legal-sections > section:last-child { border-bottom: 1px solid var(--line); }

.legal-number {
  position: absolute;
  top: 37px;
  left: 0;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.legal-sections h2 {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
}

.legal-sections .privacy-facts { margin-bottom: 16px; }

.legal-sections section > p + p { margin-top: 12px; }

.legal-sections a,
.legal-footer a {
  color: inherit;
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}

@media (hover: hover) {
  .legal-sections a:hover,
  .legal-footer a:hover { color: var(--accent); }
}

.legal-updated {
  margin-top: 24px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: right;
}

.legal-footer {
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

@media (max-width: 720px) {
  .legal-header { padding: 20px; }
  .legal-header .logo { height: 18px; }
  .legal-main { width: min(100% - 40px, 920px); padding: 52px 0 64px; }
  .legal-title { grid-template-columns: 1fr; gap: 12px; padding-bottom: 34px; }
  .legal-sections > section { padding-left: 44px; }
}

@media (max-width: 480px) {
  .legal-header { align-items: flex-start; }
  .legal-back { max-width: 108px; text-align: right; }
  .legal-summary { padding: 22px; }
  .legal-sections > section { padding-left: 0; padding-top: 54px; }
  .legal-number { top: 24px; }
}

/* 印刷時のみ表示する上下の白帯（画面では非表示） */
.print-mask { display: none; }

/* ------------------------------------------------------------
   ドラッグ&ドロップ読み込み
   ------------------------------------------------------------ */

.dropzone {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(246, 245, 243, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.dropzone[hidden] { display: none; }

.dropzone.show { opacity: 1; }

.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(560px, 100%);
  padding: 64px 40px;
  border: 2px dashed var(--accent);
  border-radius: 18px;
  background: var(--surface);
  color: var(--accent);
  text-align: center;
  box-shadow: var(--shadow-2);
  transform: scale(0.97);
  transition: transform 0.28s var(--ease);
}

.dropzone.show .dropzone-inner { transform: scale(1); }

.dropzone-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.dropzone-note {
  font-size: 12.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------
   モーダル・トースト
   ------------------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(26, 19, 17, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}

.modal-overlay[hidden] { display: none; }

.modal-overlay.show { opacity: 1; }

.modal {
  width: min(400px, calc(100vw - 48px));
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 28px;
  transform: translateY(10px);
  transition: transform 0.25s var(--ease);
}

.modal-overlay.show .modal { transform: translateY(0); }

.modal-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }

.modal-text { font-size: 13px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }

.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 90;
  background: var(--ink);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------------
   印刷用ヘッダー（画面では非表示。スタイルは高さ計測でも使うため基本側に定義）
   ------------------------------------------------------------ */

.print-head {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 0 0 14px;
}

.print-head .ph-title { font-size: 16px; font-weight: 800; color: var(--ink); }

.print-head .ph-period { font-size: 12px; color: var(--muted); }

.print-head .ph-legend {
  margin-left: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.print-head .ph-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
}

.print-head .ph-item .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--chip-c);
}

/* ------------------------------------------------------------
   印刷（PDF出力）
   ------------------------------------------------------------ */

@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* margin:0 でブラウザ自動のヘッダー（日時・タイトル）とフッター（URL）を非表示にし、
     余白はページ内側のpaddingで確保する */
  @page { size: A4 landscape; margin: 0; }

  html, body { background: #FFFFFF; min-height: 0; height: auto; }

  /* @page の余白0はブラウザの日付・URL印字を消すため。
     実際の印字領域は環境の余白設定でさらに狭まる場合があるため、
     こちらで足す余白は5mmにとどめる（寸法計算側も同じ前提）。
     100vh＝実際の印字領域の高さを基準に、中身を上下中央に置く */
  body {
    padding: 5mm;
    min-height: 100vh; /* box-sizing:border-boxのためpadding込みでちょうど印字領域の高さ */
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* ページ上端の白帯。下側は置き場所が環境で変わり安全に置けないため、
     寸法計算の余裕で代替する */
  .print-mask {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4mm;
    z-index: 999;
  }

  .print-mask.bottom { display: none; }

  .appbar, .toolbar, .hint, .skip-link, .tool-summary,
  .popover, .modal-overlay, .toast,
  .dropzone, .site-foot, .guide-overlay { display: none !important; }

  .print-head { display: flex; }

  .board-wrap { padding: 0; overflow: visible; }

  /* 縮小は zoom で行う。transform と違いレイアウト上の寸法ごと縮むため、
     枠もクリップも不要で、改ページ計算が常に見た目と一致する */
  .board {
    width: var(--print-board-min, max-content);
    min-width: 0;
    margin: 0 auto; /* 印字領域が広い環境では左右も中央に */
    zoom: var(--print-zoom, 1);
  }

  .month { box-shadow: none; border-color: var(--line-strong); }

  .add-month, .month-remove { display: none !important; }

  .rowline::after { display: none; }

  /* 印刷時は追加用ガターを畳み、帯を月幅いっぱいに */
  .lanes { --gutter: 0px; }

  .band { box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, white); }

  .lanes { cursor: default; }
}

/* ------------------------------------------------------------
   レスポンシブ（タブレット以下は横スクロール前提）
   ------------------------------------------------------------ */

@media (max-width: 1280px) {
  .appbar { position: relative; padding: 10px 20px 14px; gap: 8px; }
  .appbar-main { gap: 12px; }
  .tool-summary { width: calc(100% - 40px); }
  .menu-toggle { display: inline-flex; flex-shrink: 0; margin-left: auto; }

  .appbar-actions {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 45;
    width: min(268px, calc(100vw - 40px));
    margin-left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-2);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .appbar-actions.open { opacity: 1; transform: translateY(0); pointer-events: auto; }

  .appbar-actions .btn {
    width: 100%;
    justify-content: flex-start;
    padding: 11px 14px;
  }

  .usage-stat {
    width: 100%;
    margin: 0 0 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .appbar-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    border-radius: 0;
  }

  .appbar-banner img { height: 42px; }
}

@media (max-width: 900px) {
  .toolbar, .hint { padding-left: 20px; padding-right: 20px; }
  .board-wrap { padding: 20px 20px 48px; }
  .product-info,
  .faq,
  .tool-summary { width: min(100% - 40px, 1180px); }
  .product-info-head,
  .product-info-layout,
  .faq-head,
  .faq-list section { grid-template-columns: 1fr; gap: 12px; }
  .product-info-layout { gap: 34px; }
  .tool-summary { grid-template-columns: 1fr; gap: 14px; }
  .product-info-head { padding-top: 34px; }
  .feature-list > div { gap: 18px; }
  .legend { max-width: 100%; justify-content: flex-start; }

  .field-project { min-width: 100%; max-width: none; }

  /* iOS Safariのフォーカス時自動ズームを防ぐ */
  .field input[type="month"],
  .field input[type="text"],
  .field select { font-size: max(16px, 1rem); }
}

@media (max-width: 640px) {
  .brand-copy { gap: 8px; }
  .brand-title { font-size: 8.5px; }
  .brand-function { font-size: 8.5px; }
  .logo { height: 19px; }
  .tool-summary { margin-bottom: 48px; padding: 26px 24px; }
  .product-info { padding-bottom: 54px; }
  .product-info-head { grid-template-columns: 1fr; padding-bottom: 26px; }
  .feature-list > div { grid-template-columns: 1fr; gap: 5px; }
  .faq { padding: 50px 0 60px; }
  .faq-list section { padding: 21px 0; }
  .site-foot { padding-left: 20px; padding-right: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}