/* =========================================================
   NORECTIA — 導入ガイドページ（guide/index.html）
   色・書体・ボタンは style.css の共通トークンを使用。
   読みやすさ優先：本文 16px、チェックボックス 28px。
   ========================================================= */

.guide-page {
  font-size: 16px;
  line-height: 1.9;
  --g-header-h: 68px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
}
.skip-link:focus { top: calc(10px + env(safe-area-inset-top, 0px)); }

/* 確定前の項目ラベル */
.todo {
  display: inline-block;
  margin-left: 10px;
  padding: 0 9px;
  font-family: var(--f-ja);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1px dashed rgba(200, 181, 141, 0.55);
  line-height: 1.8;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ---------- Header ---------- */
.g-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(11, 13, 16, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.g-header__inner {
  height: var(--g-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: calc(var(--maxw) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.g-header__brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.g-header__label {
  padding-left: 18px;
  border-left: 1px solid var(--line-strong);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--accent);
  line-height: 1.6;
  white-space: nowrap;
}
.g-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--f-ja);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--fg-2);
  white-space: nowrap;
  transition: color .3s;
}
.g-header__back:hover { color: var(--accent); }
.g-header__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.g-header__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}
@media (max-width: 520px) {
  .guide-page { --g-header-h: 60px; }
  .g-header__brand { gap: 12px; }
  .g-header__label { padding-left: 12px; letter-spacing: 0.2em; font-size: 10px; }
  .g-header__back { font-size: 13px; }
}
@media (max-width: 400px) {
  .g-header__label { display: none; }
}

/* ---------- Page head ---------- */
.g-hero {
  display: grid;
  gap: 18px;
  padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 64px);
}
.g-hero__title {
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: clamp(25px, 3vw, 40px);
  letter-spacing: 0.1em;
  line-height: 1.55;
}
.g-hero__lead { max-width: 40em; color: var(--fg-2); }

/* ---------- Product picker ---------- */
.g-select { padding-bottom: clamp(48px, 6vw, 80px); }
.g-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
}
.g-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.g-notice {
  margin-bottom: 20px;
  padding: 14px 18px;
  border: 1px solid rgba(200, 181, 141, 0.45);
  background: var(--accent-soft);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.g-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1080px) { .g-products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .g-products { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.g-product {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 14px;
  min-height: 140px;
  padding: 20px 20px 18px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color .3s, background-color .3s;
}
.g-product:hover { border-color: var(--line-strong); }
.g-product[aria-checked="true"] { border-color: var(--accent); background: #191e27; }
.g-product[aria-checked="true"]::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.g-product__status { font-family: var(--f-ja); font-size: 12px; letter-spacing: 0.14em; color: var(--muted); line-height: 1.5; }
.g-product__name {
  font-family: var(--f-logo);
  font-size: clamp(20px, 1.6vw, 23px);
  letter-spacing: 0.08em;
  line-height: 1.25;
  padding-right: 12px;
}
.g-product__progress { display: grid; gap: 8px; }
.g-product__count { font-size: 12.5px; letter-spacing: 0.12em; color: var(--muted); font-variant-numeric: tabular-nums; }
.g-product__bar { display: block; height: 2px; background: var(--line-strong); overflow: hidden; }
.g-product__bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transition: transform .5s var(--ease); }
.g-product.is-complete .g-product__count { color: var(--accent); }
@media (max-width: 560px) {
  .g-product { min-height: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 16px 18px; gap: 4px 16px; }
  .g-product__status { grid-column: 1; }
  .g-product__name { grid-column: 1; font-size: 20px; }
  .g-product__progress { grid-column: 2; grid-row: 1 / span 2; justify-items: end; min-width: 64px; padding-right: 14px; }
  .g-product__bar { width: 64px; }
  .g-product[aria-checked="true"]::after { top: 50%; margin-top: -4px; right: 14px; }
  .g-product[aria-checked="true"] .g-product__progress { padding-right: 18px; }
}

/* ---------- Body ---------- */
.g-body { padding-bottom: clamp(88px, 10vw, 140px); }

.g-empty {
  padding: clamp(40px, 6vw, 72px) 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
}
.g-empty__title { font-family: var(--f-ja); font-size: 17px; letter-spacing: 0.08em; }
.g-empty__text { margin-top: 8px; color: var(--muted); font-size: 14px; }

.g-guide {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}
.g-guide[hidden] { display: none; }
@media (max-width: 960px) {
  .g-guide { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* 進捗 */
.g-aside {
  position: sticky;
  top: calc(var(--g-header-h) + env(safe-area-inset-top, 0px) + 28px);
}
@media (max-width: 960px) { .g-aside { position: static; } }

.g-progress {
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.g-progress__product { font-family: var(--f-logo); font-size: 22px; letter-spacing: 0.08em; line-height: 1.3; }
.g-progress__count {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 16px;
  font-variant-numeric: tabular-nums;
}
.g-progress__count #g-done { font-family: var(--f-logo); font-size: 46px; line-height: 1; color: var(--accent); }
.g-progress__of { color: var(--muted); }
.g-progress__count #g-total { font-size: 16px; color: var(--muted); }
.g-progress__label { margin-left: 10px; font-family: var(--f-ja); font-size: 13px; letter-spacing: 0.12em; color: var(--muted); }
.g-progress__bar { margin-top: 14px; height: 2px; background: var(--line-strong); overflow: hidden; }
.g-progress__bar span { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }

.g-index { margin-top: 20px; display: grid; gap: 2px; }
.g-index a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-family: var(--f-ja);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  line-height: 1.5;
  transition: color .3s;
}
.g-index a:hover { color: var(--fg); }
.g-index__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-family: var(--f-sans);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.g-index__item.is-done .g-index__num { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.g-index__item.is-done .g-index__name { color: var(--muted); }
@media (max-width: 960px) { .g-index { display: none; } }

.g-reset { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-reset__confirm p { font-size: 14px; color: var(--fg); }
.g-reset__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 12px; }
.g-reset__yes { border-color: var(--accent); color: var(--accent); }

/* 動作要件 */
.g-meta { margin-bottom: 28px; }
.g-meta__note { font-size: 14px; color: var(--muted); }
.g-req { margin: 18px 0 0; border-top: 1px solid var(--line); }
.g-req[hidden] { display: none; }
.g-req__row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.g-req dt { font-family: var(--f-ja); font-size: 14px; color: var(--fg-2); letter-spacing: 0.06em; }
.g-req dd { margin: 0; font-size: 15px; }
.g-req dd .todo { margin-left: 0; }
@media (max-width: 560px) { .g-req__row { grid-template-columns: minmax(0, 1fr); } }

/* ステップ */
.g-steps { display: grid; gap: 16px; }
.g-step {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 3vw, 36px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  scroll-margin-top: calc(var(--g-header-h) + env(safe-area-inset-top, 0px) + 20px);
  transition: border-color .4s;
}
.g-step.is-done { border-color: rgba(200, 181, 141, 0.45); }
.g-step__head { display: grid; gap: 4px; }
.g-step__num { font-size: 12px; letter-spacing: 0.28em; color: var(--accent); font-variant-numeric: tabular-nums; }
.g-step__title {
  font-family: var(--f-ja);
  font-weight: 500;
  font-size: clamp(19px, 1.6vw, 22px);
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.g-step__body { display: grid; gap: 10px; min-width: 0; transition: opacity .4s; }
.g-step.is-done .g-step__body { opacity: 0.62; }
.g-step__lead { color: var(--fg-2); }
.g-step__sub { margin-top: 6px; font-family: var(--f-ja); font-size: 12.5px; letter-spacing: 0.2em; color: var(--muted); }
.g-step__items { display: grid; gap: 8px; font-size: 15px; }
.g-step__items li { position: relative; padding-left: 22px; line-height: 1.8; }
.g-step__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.g-step__items li.is-todo { color: var(--fg-2); }

.g-step__figure { margin: 12px 0 0; }
.g-step__figure img { width: 100%; border: 1px solid var(--line); }
.g-step__figure figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }

/* 完了チェック：行全体がクリック範囲 */
.g-step__check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  cursor: pointer;
  font-family: var(--f-ja);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  user-select: none;
}
.g-step__check input {
  position: absolute;
  opacity: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  cursor: pointer;
}
.g-step__box {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-strong);
  transition: background-color .25s, border-color .25s;
}
.g-step__box::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 7px;
  height: 14px;
  border: solid var(--ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.g-step__check:hover .g-step__box { border-color: var(--accent); }
.g-step__check input:checked + .g-step__box { background: var(--accent); border-color: var(--accent); }
.g-step__check input:checked + .g-step__box::after { opacity: 1; }
.g-step__check input:focus-visible + .g-step__box { outline: 1px solid var(--accent); outline-offset: 4px; }
.g-step.is-done .g-step__check { color: var(--accent); }

/* FAQ / トラブルシューティング */
.g-faq { display: grid; gap: 8px; margin-top: 8px; }
.g-faq__item { border: 1px solid var(--line); padding: 0 16px; }
.g-faq__item summary {
  padding: 14px 0;
  font-family: var(--f-ja);
  font-size: 15px;
  cursor: pointer;
  list-style-position: inside;
}
.g-faq__item p, .g-trouble__steps { padding-bottom: 16px; color: var(--fg-2); font-size: 15px; }
.g-trouble__steps { list-style: decimal; padding-left: 1.4em; }

.g-trouble { margin-top: clamp(56px, 7vw, 88px); display: grid; gap: 14px; scroll-margin-top: calc(var(--g-header-h) + 20px); }
.g-trouble__title { font-family: var(--f-ja); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: 0.12em; }
.g-trouble__list { display: grid; gap: 8px; margin-top: 6px; }
.g-trouble__empty { color: var(--muted); font-size: 15px; }
.g-help {
  display: grid;
  gap: 14px;
  justify-items: start;
  margin-top: 20px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.g-help p { color: var(--fg-2); font-size: 15px; max-width: 40em; }
.g-help__link { color: var(--accent); border-bottom: 1px solid var(--line-strong); }
.g-help__link:hover { border-color: var(--accent); }

/* ---------- Footer ---------- */
.g-footer {
  border-top: 1px solid var(--line);
  padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px));
}
.g-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}


/* ===========================================================
   v01 詳細導入アシスタント — 既存の色・書体・ナビをそのまま継承
   =========================================================== */
.g-progress__items { margin-top: 12px; color: var(--accent); font-size: 13px; font-variant-numeric: tabular-nums; }
.g-progress__reminder { margin-top: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.75; }
.g-qa-note { margin-top: 16px; border-left: 2px solid var(--accent); padding: 8px 0 8px 16px; color: var(--fg-2); font-size: 13px; line-height: 1.8; }
.g-step__operations { display: grid; gap: 12px; margin-top: 12px; }
.g-op { padding: 20px; border: 1px solid var(--line); background: rgba(11,13,16,.32); display: grid; gap: 12px; min-width: 0; }
.g-op.is-checked { border-color: rgba(200,181,141,.46); }
.g-op--pending { border-style: dashed; }
.g-op__header { display:flex; align-items: flex-start; justify-content:space-between; gap: 12px; }
.g-op__label { position: relative; display: flex; align-items: center; gap: 14px; min-height: 32px; cursor: pointer; flex:1; min-width: 0; }
.g-op__label input { position: absolute; width: 28px; height: 28px; opacity: 0; cursor: pointer; }
.g-op__label input:disabled { cursor: not-allowed; }
.g-op__box { width: 28px; height: 28px; border: 1px solid var(--line-strong); flex-shrink: 0; display: grid; place-items: center; }
.g-op__box::after { content:'✓'; font-size: 19px; color:var(--ink); opacity:0; }
.g-op__label input:checked + .g-op__box { background: var(--accent); border-color: var(--accent); }
.g-op__label input:checked + .g-op__box::after { opacity:1; }
.g-op__label input:focus-visible + .g-op__box { outline: 2px solid var(--accent); outline-offset: 4px; }
.g-op__title { font-family:var(--f-ja); font-weight:500; line-height:1.65; font-size:16px; overflow-wrap:anywhere; }
.g-op__instruction { color:var(--fg-2); line-height:1.8; font-size:15px; white-space:pre-line; }
.g-op__expected { display:grid; gap:2px; border-left:2px solid var(--accent); padding:2px 0 2px 12px; color:var(--fg-2); line-height:1.75; font-size:14px; }
.g-op__expected strong { font-weight:500; color:var(--fg); }
.g-op__note { font-size:13.5px; color:var(--accent); line-height:1.75; }
.g-op__link { color:var(--accent); font-size:14px; text-decoration:underline; text-underline-offset:4px; justify-self:start; }
.g-op__code-wrap { display:flex; align-items:stretch; gap:10px; min-width:0; }
.g-op__code { background:var(--ink); padding:9px 12px; font-size:12.5px; color:var(--fg); overflow-wrap:anywhere; flex:1; min-width:0; }
.g-op__copy { flex-shrink:0; padding:6px 12px; min-height:40px; font-size:13px; color:var(--accent); border:1px solid var(--line-strong); }
.g-op__image-hint { padding:12px; border:1px dashed var(--line-strong); color:var(--muted); font-size:13px; }
.g-op .g-step__figure { margin-top:3px; }
.g-image-trigger { display:block; width:100%; border:0; cursor:zoom-in; }
.g-image-trigger img { width:100%; height:auto; max-height:540px; object-fit:contain; }
.g-step__pending-note { color:var(--accent); font-size:13px; }
.g-step__nav { border-top:1px solid var(--line); padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; }
.g-step__nav a { padding:8px 0; color:var(--accent); }
.g-step__nav a:focus-visible, .g-op__copy:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.g-tips { display:grid; gap:16px; margin-top:48px; }
.g-tips[hidden], .g-mobile-status[hidden] { display:none!important; }
.g-faq { gap:8px; }
.g-trouble__label { font-size:14px; color:var(--fg-2); }
.g-trouble__search { border:1px solid var(--line-strong); background:var(--bg-2); color:var(--fg); width:100%; border-radius:0; padding:12px 15px; font:inherit; font-size:15px; min-height:48px; }
.g-trouble__search:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.g-trouble__count { font-size:13px; color:var(--muted); }
.g-trouble__category { display:inline-block; margin-right:12px; font-size:11px; color:var(--accent); white-space:nowrap; }
.g-trouble__item summary { line-height:1.6; }
.g-mobile-status { display:none; }
.g-image-dialog { background:var(--bg-2); border:1px solid var(--line-strong); color:var(--fg); margin:auto; padding:20px; max-width:min(95vw,1100px); max-height:90vh; }
.g-image-dialog::backdrop { background:rgba(0,0,0,.8); }
.g-image-dialog img { object-fit:contain; max-width:100%; max-height:calc(85vh - 120px); display:block; margin:auto; }
.g-image-dialog__close { display:block; margin-left:auto; margin-bottom:12px; color:var(--accent); padding:7px 12px; border:1px solid var(--line-strong); }
.g-image-dialog p { color:var(--fg-2); font-size:13px; margin-top:10px; }
@media (max-width:960px) {
  .g-mobile-status { display:grid; gap:3px; padding:14px 18px; border:1px solid var(--line); background:var(--bg-2); position:sticky; top:calc(var(--g-header-h) + env(safe-area-inset-top,0px)); z-index:20; }
  .g-mobile-status__product { font-family:var(--f-logo); font-size:18px; }
  .g-mobile-status__count { color:var(--accent); font-size:12px; }
  .g-mobile-status__step { color:var(--fg-2); font-size:13px; }
  .g-mobile-index summary { color:var(--accent); cursor:pointer; font-size:13px; list-style-position:inside; }
  .g-mobile-index ol { margin-top:8px; padding-left:8px; display:grid; gap:6px; }
  .g-mobile-index a { font-size:13px; color:var(--fg-2); }
  .g-guide { gap:14px; }
}
@media (max-width:560px) {
  .g-op { padding:15px; }
  .g-op__code-wrap { flex-wrap:wrap; }
  .g-op__copy { margin-left:auto; }
  .g-step__nav { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) {
  .g-progress__bar span,.g-header__bar span,.g-product__bar span { transition-duration:0s!important; }
}
/* v01 の長いPackage名・Assetパスによるスマホ横はみ出し防止 */
.g-req dd, .g-req dt, .g-op__instruction, .g-op__expected, .g-op__note, .g-op__title, .g-op__code { overflow-wrap: anywhere; }
.g-req__row, .g-meta, .g-op { min-width: 0; }

/* ---------- Editorial guide directory / reference navigation ---------- */
.g-overview {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, .85fr);
  gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(38px, 5vw, 68px);
}
.g-overview__summary { background: var(--bg-2); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 42px); }
.g-overview__eyebrow { font-size: 11px; letter-spacing: .23em; color: var(--accent); margin-bottom: 10px; }
.g-overview__summary h2 { font-size: clamp(18px, 2.1vw, 25px); font-weight: 500; letter-spacing: .05em; line-height: 1.55; margin-bottom: 13px; }
.g-overview__summary p { font-size: 15px; line-height: 1.95; color: var(--fg-2); }
.g-overview__summary .g-overview__aside { border-left: 2px solid var(--accent); padding-left: 14px; margin-top: 16px; color: var(--fg); }
.g-overview__links { display: grid; gap: 9px; align-content: stretch; }
.g-overview__links a { background: var(--bg-2); border: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 13px 18px; font-size: 14px; min-height: 64px; color: var(--fg); transition: border-color .2s; }
.g-overview__links a:hover, .g-overview__links a:focus-visible { border-color: var(--accent); }
.g-overview__links a > span:first-child { color: var(--accent); font-size: 12px; font-family: var(--f-logo); }
.g-overview__links a > span:last-child { margin-left: auto; color: var(--accent); }
@media (max-width: 850px) { .g-overview { grid-template-columns: minmax(0, 1fr); } .g-overview__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-overview__links a { padding: 14px; font-size: 13px; } }
@media (max-width: 600px) { .g-overview__links { grid-template-columns: minmax(0, 1fr); } .g-overview__links a { min-height: 50px; } }
.g-progress__refs { display: grid; gap: 7px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-progress__refs a { display: flex; justify-content: space-between; gap: 12px; color: var(--fg-2); font-size: 13px; line-height: 1.55; }
.g-progress__refs a:hover, .g-progress__refs a:focus-visible { color: var(--accent); }
.g-mobile-index__extra { margin: 10px 0 0; font-size: 13px; color: var(--fg-2); }
.g-mobile-index__extra a { color: var(--accent); }
.g-reference { scroll-margin-top: calc(var(--g-header-h) + 28px); margin-top: clamp(52px, 6vw, 84px); margin-bottom: clamp(48px, 5vw, 78px); }
.g-reference__lead { max-width: 55em; margin: 0 0 20px; color: var(--fg-2); font-size: 15px; }
.g-reference__list { display: grid; gap: 10px; }
.g-reference__item { border: 1px solid var(--line); background: var(--bg-2); }
.g-reference__item[open] { border-color: var(--line-strong); }
.g-reference__item summary { list-style-position: inside; cursor: pointer; padding: 17px 22px; font-size: 16px; min-height: 48px; }
.g-reference__item summary:hover, .g-reference__item summary:focus-visible { color: var(--accent); }
.g-reference__body { padding: 0 22px 18px; color: var(--fg-2); font-size: 15px; line-height: 1.85; }
.g-reference__body p + p { margin-top: 10px; }
.g-reference__body strong { color: var(--fg); }
.g-reference__body code { color: var(--accent); overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 520px) { .g-reference__item summary { padding: 14px 16px; } .g-reference__body { padding-inline: 16px; } }


/* ============================================================
   AFTER INSTALLATION / REFERENCE — product manual v01
   ============================================================ */
.g-overview__terms { margin-top:12px; }
.g-overview__terms a { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }
.g-manual__toc { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:24px 0 30px; }
.g-manual__toc a { display:flex; align-items:center; min-height:58px; gap:14px; padding:11px 16px; border:1px solid var(--line); background:var(--bg-2); color:var(--fg); font-size:14px; line-height:1.5; }
.g-manual__toc a:hover,.g-manual__toc a:focus-visible { border-color:var(--accent); color:var(--accent); }
.g-manual__toc a span { font-size:13px; letter-spacing:.1em; font-family:var(--f-logo); color:var(--accent); }
.g-manual { display:grid; gap:16px; }
.g-manual__section { scroll-margin-top:calc(var(--g-header-h) + 28px); border:1px solid var(--line); background:var(--bg-2); padding:clamp(20px,3vw,30px); min-width:0; }
.g-manual__eyebrow { font-family:var(--f-logo); color:var(--accent); font-size:12px; letter-spacing:.16em; margin-bottom:4px; }
.g-manual__section h3 { font-family:var(--f-ja); font-size:clamp(18px,2vw,22px); font-weight:500; letter-spacing:.08em; margin-bottom:10px; }
.g-manual__section p { color:var(--fg-2); font-size:15px; line-height:1.85; }
.g-manual__section p + p { margin-top:10px; }
.g-manual__section strong { color:var(--fg); font-weight:500; }
.g-manual__section code { color:var(--accent); white-space:normal; overflow-wrap:anywhere; }
.g-manual__tree { white-space:pre; overflow-x:auto; padding:16px; background:var(--bg); border:1px solid var(--line); font-size:12px; line-height:1.9; margin:16px 0; }
.g-manual__tree code { white-space:pre; }
.g-manual__note { border-left:2px solid var(--accent); padding:10px 0 10px 14px; margin-top:16px!important; color:var(--fg-2); }
.g-manual__note a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.g-manual__per-product,.g-manual__feature-grid { display:grid; gap:10px; margin-top:16px; }
.g-manual__product { min-width:0; padding:18px; background:var(--bg); border:1px solid var(--line); }
.g-manual__product[hidden] { display:none!important; }
.g-manual__product h4 { color:var(--accent); font-weight:500; letter-spacing:.08em; font-size:15px; margin:0 0 9px; }
.g-manual__product h4:not(:first-child) { margin-top:20px; }
.g-manual__product p { margin-top:8px; font-size:14px; }
.g-manual__product code { display:block; margin-top:6px; font-size:12.5px; overflow-wrap:anywhere; }
.g-manual__product ul { list-style:disc; padding-left:1.4em; color:var(--fg-2); font-size:14px; line-height:1.9; }
.g-manual__sub { margin-top:16px; padding:12px 15px; border:1px solid var(--line); }
.g-manual__sub summary { cursor:pointer; color:var(--fg); font-size:14px; }
.g-manual__sub p { margin-top:8px; }
.g-manual__link-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:16px 0 4px; }
.g-manual__link-grid a { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--line); background:var(--bg); padding:13px 14px; min-height:54px; font-size:14px; line-height:1.6; color:var(--fg); overflow-wrap:anywhere; }
.g-manual__link-grid a:hover,.g-manual__link-grid a:focus-visible { border-color:var(--accent); color:var(--accent); }
.g-manual__link-grid a > span:last-child { color:var(--accent); flex-shrink:0; }
.g-manual__lang { display:flex; flex-direction:column; line-height:1.4; }
.g-manual__lang small { font-size:11px; color:var(--muted); font-weight:400; }
.g-reference__optional { margin-top:30px; }
.g-manual__optional-title { font-size:18px; font-weight:500; margin:0 0 8px; letter-spacing:.08em; }
@media(max-width:620px) { .g-manual__toc,.g-manual__link-grid { grid-template-columns:minmax(0,1fr); } .g-manual__toc a { min-height:50px; } }


/* =========================================================
   NOCTELLE v01 REFERENCE 03 — 37 functions / 5 panels / 8 images
   Inherits the site's existing color, typography, and spacing system.
   ========================================================= */
.g-feature__status { border-left: 2px solid var(--accent); padding: 9px 0 9px 14px; margin: 16px 0!important; font-size: 14px!important; }
.g-feature__search-wrap { margin-top: 22px; padding: 18px 20px; border:1px solid var(--line); background:var(--bg); }
.g-feature__search-label { display:block; font-size:14px; letter-spacing:.03em; color:var(--fg); margin-bottom:9px; }
.g-feature__search-row { display:flex; align-items:stretch; gap:8px; }
.g-feature__search { min-width:0; flex:1; background:var(--bg-2); border:1px solid var(--line-strong); border-radius:0; color:var(--fg); padding:12px 14px; font:inherit; font-size:15px; }
.g-feature__search:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.g-feature__search::placeholder { color:var(--muted); opacity:1; }
.g-feature__clear { font-size:13px; color:var(--accent); border:1px solid var(--line-strong); min-width:68px; padding:0 12px; }
.g-feature__clear:hover,.g-feature__clear:focus-visible { border-color:var(--accent); }
.g-feature__count { margin-top:8px!important; font-size:13px!important; }
.g-feature__categories { display:flex; gap:7px; flex-wrap:wrap; margin:18px 0; }
.g-feature__categories[hidden],.g-feature__panels[hidden],.g-feature__gallery[hidden] { display:none!important; }
.g-feature__categories a { display:inline-flex; align-items:center; min-height:38px; padding:7px 11px; border:1px solid var(--line); color:var(--fg-2); font-size:12px; line-height:1.45; background:var(--bg); }
.g-feature__categories a:hover,.g-feature__categories a:focus-visible { border-color:var(--accent); color:var(--accent); }
.g-feature__category { scroll-margin-top:calc(var(--g-header-h) + 30px); margin-top:26px; }
.g-feature__category-title { font-family:var(--f-ja); font-size:17px; color:var(--fg); font-weight:500; padding-bottom:10px; border-bottom:1px solid var(--line-strong); display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.g-feature__category-title small { font-size:12px; color:var(--muted); white-space:nowrap; }
.g-feature__cards { display:grid; gap:8px; margin-top:12px; }
.g-feature__item { border:1px solid var(--line); background:var(--bg); min-width:0; scroll-margin-top:calc(var(--g-header-h) + 24px); }
.g-feature__item[open] { border-color:var(--line-strong); }
.g-feature__summary { position:relative; padding:16px 42px 15px 17px; cursor:pointer; list-style:none; min-height:56px; }
.g-feature__summary::-webkit-details-marker { display:none; }
.g-feature__summary::after { content:'+'; position:absolute; right:16px; top:16px; font-size:23px; line-height:1; color:var(--accent); font-weight:300; }
.g-feature__item[open] > .g-feature__summary::after { content:'−'; }
.g-feature__summary:hover,.g-feature__summary:focus-visible { background:rgba(200,181,141,.055); }
.g-feature__item-heading { display:flex; align-items:baseline; gap:12px; color:var(--fg); font-size:15px; line-height:1.65; }
.g-feature__number { color:var(--accent); font-family:var(--f-logo); font-size:13px; flex:0 0 22px; }
.g-feature__item-heading strong { font-weight:500; }
.g-feature__place { display:block; margin:2px 0 1px 34px; font-size:12px; color:var(--accent); }
.g-feature__teaser { display:block; margin:5px 0 0 34px; font-size:13px; line-height:1.75; color:var(--fg-2); }
.g-feature__bonus { display:inline-block; margin:8px 0 0 34px; padding:2px 8px; border:1px solid var(--line-strong); color:var(--accent); font-size:12px; }
.g-feature__body { border-top:1px solid var(--line); padding:18px; display:grid; gap:17px; }
.g-feature__action { padding:13px 15px; border-left:2px solid var(--accent); background:rgba(200,181,141,.055); }
.g-feature__action h5 { font-size:13px; color:var(--accent); font-weight:500; margin-bottom:4px; }
.g-feature__action p { font-size:15px; color:var(--fg); margin:0; }
.g-feature__definitions { display:grid; gap:0; }
.g-feature__definition { display:grid; grid-template-columns:minmax(115px,28%) minmax(0,1fr); padding:11px 0; gap:16px; border-bottom:1px solid var(--line); font-size:14px; line-height:1.8; }
.g-feature__definition dt { font-size:12.5px; color:var(--accent); }
.g-feature__definition dd { color:var(--fg-2); white-space:pre-line; overflow-wrap:anywhere; }
.g-feature__warning { padding:12px 14px; background:var(--bg-2); border-left:2px solid var(--line-strong); margin:0!important; display:grid; gap:5px; }
.g-feature__warning strong { font-size:13px; color:var(--accent); }
.g-feature__warning span { font-size:13px; color:var(--fg-2); }
.g-feature__figure,.g-feature__gallery-image { min-width:0; margin:0; }
.g-feature__image-button { padding:0; width:100%; display:block; border:1px solid var(--line-strong); background:var(--bg-2); cursor:zoom-in; }
.g-feature__image-button:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.g-feature__image-button img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; }
.g-feature__figure figcaption,.g-feature__gallery-image figcaption { font-size:12px; color:var(--muted); line-height:1.6; margin-top:7px; }
.g-feature__empty { padding:22px 14px; color:var(--fg-2); border:1px dashed var(--line-strong); }
.g-feature__section-heading { margin:30px 0 14px; }
.g-feature__section-heading h4 { font-size:17px; color:var(--fg); font-weight:500; margin:4px 0; }
.g-feature__section-heading p { font-size:13px; }
.g-feature__panels { scroll-margin-top:calc(var(--g-header-h) + 28px); padding-top:7px; margin-top:28px; border-top:1px solid var(--line-strong); }
.g-feature__panel-list { display:grid; gap:9px; }
.g-feature__panel { border:1px solid var(--line); background:var(--bg); }
.g-feature__panel > summary { padding:13px 17px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--fg); font-size:15px; line-height:1.6; }
.g-feature__panel > summary small { font-size:12px; color:var(--accent); white-space:nowrap; }
.g-feature__panel > summary:hover,.g-feature__panel > summary:focus-visible { background:rgba(200,181,141,.06); }
.g-feature__panel[open] { border-color:var(--line-strong); }
.g-feature__panel-body { padding:15px 17px 20px; border-top:1px solid var(--line); display:grid; gap:18px; }
.g-feature__controls { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; }
.g-feature__controls li { padding:9px 0; border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:11px; color:var(--fg-2); font-size:13px; line-height:1.7; }
.g-feature__control-number { color:var(--accent); font-family:var(--f-logo); min-width:24px; }
.g-feature__gallery { margin:28px 0; border-top:1px solid var(--line-strong); }
.g-feature__gallery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.g-feature__notes { padding-top:18px; margin-top:20px; border-top:1px solid var(--line-strong); }
.g-feature__notes h4 { font-size:15px; font-weight:500; color:var(--fg); margin-bottom:10px; }
.g-feature__notes p { font-size:13px; margin-bottom:8px; }
.g-feature__notes .g-feature__caution { margin-top:18px!important; padding:10px 14px; border-left:2px solid var(--accent); background:var(--bg); }
@media(min-width:1000px) {
  .g-feature__panel-body { grid-template-columns:minmax(0,1.1fr) minmax(230px,.9fr); align-items:start; }
  .g-feature__controls { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:620px) {
  .g-feature__search-wrap { padding:14px; }
  .g-feature__summary { padding:13px 35px 14px 12px; }
  .g-feature__summary::after { right:12px; }
  .g-feature__item-heading { gap:8px; }
  .g-feature__place,.g-feature__teaser,.g-feature__bonus { margin-left:28px; }
  .g-feature__body { padding:13px; }
  .g-feature__definition { grid-template-columns:minmax(0,1fr); gap:3px; padding:9px 0; }
  .g-feature__controls { grid-template-columns:minmax(0,1fr); }
  .g-feature__gallery-grid { grid-template-columns:minmax(0,1fr); }
  .g-feature__panel > summary { display:block; }
  .g-feature__panel > summary small { display:block; margin-top:3px; }
  .g-feature__panel-body { padding:12px; }
}

/* Mobile: the existing sticky progress header sits below the global header.
   Keep category and detail deep links clear of both sticky surfaces. */
@media (max-width:960px) {
  #ref-features,.g-feature__category,.g-feature__item,.g-feature__panels {
    scroll-margin-top:calc(var(--g-header-h) + 158px);
  }
}

/* REFERENCE 01–02 / actual Project and Hierarchy images. No script or storage changes. */
.g-structure__table-wrap { margin:16px 0; overflow-x:auto; }
.g-structure__table { width:100%; min-width:330px; border-collapse:collapse; font-size:14px; text-align:left; line-height:1.75; }
.g-structure__table thead { background:var(--bg); }
.g-structure__table th,.g-structure__table td { border:1px solid var(--line); padding:9px 12px; vertical-align:top; overflow-wrap:anywhere; }
.g-structure__table th { color:var(--accent); font-weight:500; }
.g-structure__table tbody td { color:var(--fg-2); }
.g-structure__table tbody th { white-space:nowrap; }
.g-structure__tree { max-width:100%; font-size:12.5px; line-height:1.7; overscroll-behavior-x:contain; }
.g-structure__figure { margin:14px 0 0; max-width:480px; }
.g-structure__figure--wide { max-width:100%; }
.g-structure__figure > a { display:block; position:relative; border:1px solid var(--line-strong); background:var(--bg); color:var(--accent); }
.g-structure__figure > a:hover,.g-structure__figure > a:focus-visible { border-color:var(--accent); outline-offset:3px; }
.g-structure__figure img { display:block; max-width:100%; width:auto; height:auto; }
.g-structure__open { display:block; text-align:right; padding:7px 10px; font-size:12px; }
.g-structure__figure figcaption { color:var(--muted); font-size:12px; line-height:1.65; margin-top:8px; }
.g-structure__shot { margin-top:11px; }
.g-structure__shot > summary { min-height:30px; }
.g-structure__notice { border-left:2px solid var(--line-strong); padding:8px 12px; margin-top:14px!important; }
.g-manual__product { min-width:0; }
@media(max-width:620px) {
  .g-structure__table th,.g-structure__table td { padding:8px 9px; }
  .g-structure__tree { font-size:11px; }
  .g-structure__figure { max-width:100%; }
}

/* Narrow layouts: keep complete folder names readable rather than breaking words. */
@media (max-width:620px) {
  .g-structure__table-wrap { overflow:visible; }
  .g-structure__table { width:100%; min-width:0; }
  .g-structure__table thead { display:none; }
  .g-structure__table tbody,.g-structure__table tbody tr,
  .g-structure__table tbody th,.g-structure__table tbody td { display:block; }
  .g-structure__table tbody tr { background:var(--bg); border:1px solid var(--line); padding:8px 12px; margin-bottom:8px; }
  .g-structure__table tbody th,.g-structure__table tbody td { border:0; padding:2px 0; white-space:normal; }
  .g-structure__table tbody th { font-size:13px; }
  .g-structure__table tbody td { font-size:13px; }
}
/* Both the global header and sticky progress surface occupy mobile anchor space. */
@media (max-width:960px) {
  #ref-project,#ref-scene,#ref-credits,#ref-terms {scroll-margin-top:calc(var(--g-header-h) + 158px);}
}

/* ---- REFERENCE 04: Credits & Licenses (2026-10) ---- */
.g-credit__group { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.g-credit__group h4 { color:var(--accent); letter-spacing:.045em; font-size:16px; font-weight:500; margin:0 0 12px; }
.g-credit__facts { display:grid; grid-template-columns:1fr; gap:0; border:1px solid var(--line); margin:14px 0 16px; }
.g-credit__facts > div { display:grid; grid-template-columns:minmax(145px,30%) minmax(0,1fr); border-bottom:1px solid var(--line); }
.g-credit__facts > div:last-child { border-bottom:0; }
.g-credit__facts dt,.g-credit__facts dd { padding:10px 12px; margin:0; font-size:13px; line-height:1.75; overflow-wrap:anywhere; }
.g-credit__facts dt { background:var(--bg); color:var(--muted); }
.g-credit__facts dd { color:var(--fg-2); }
.g-credit__links { margin-top:13px; }
.g-credit__pending { font-size:13px!important; border-left:2px solid var(--accent); padding-left:12px; margin-top:15px!important; }
.g-credit__assets { display:grid; gap:10px; margin-top:14px; }
.g-credit__asset { background:var(--bg); border:1px solid var(--line); padding:15px 17px; min-width:0; }
.g-credit__asset-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; }
.g-credit__asset-top strong { color:var(--fg); font-weight:500; }
.g-credit__license { color:var(--accent); border:1px solid var(--line-strong); padding:3px 9px; font-size:11px; line-height:1.6; }
.g-credit__license--pending { color:var(--fg-2); border-color:var(--line); }
.g-credit__asset p { font-size:13px; }
.g-credit__asset a { display:inline-block; font-size:13px; color:var(--accent); margin-top:11px; text-underline-offset:3px; text-decoration:underline; }
.g-credit__asset-links { display:flex; flex-wrap:wrap; gap:8px 19px; }
@media(max-width:620px) {
  .g-credit__facts > div { grid-template-columns:minmax(0,1fr); }
  .g-credit__facts dt { padding-bottom:3px; }
  .g-credit__facts dd { padding-top:3px; }
  .g-credit__asset { padding:14px 13px; }
}

/* START GUIDE / supplied PNGs, non-destructive numbered overlays */
.g-op,.g-shot { scroll-margin-top:calc(var(--g-header-h) + 24px); }
.g-op__field { display:block; color:var(--fg); font-size:13px; font-weight:500; margin-bottom:3px; }
.g-op__detail { padding:14px; border-left:2px solid var(--accent); background:var(--bg); color:var(--fg-2); font-size:14px; line-height:1.85; }
.g-shot { min-width:0; }
.g-shot .g-image-trigger { border:1px solid var(--line-strong); background:#151515; }
.g-shot .g-image-trigger:hover,.g-shot .g-image-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.g-shot__canvas { position:relative; display:block; margin:0 auto; }
.g-shot .g-shot__canvas img { width:100%; display:block; height:auto; max-height:none; border:0; }
.g-shot__mark { position:absolute; border:2px solid #ffdc79; box-shadow:0 0 0 1px #1c1a16, inset 0 0 0 1px #1c1a16; pointer-events:none; }
.g-shot__mark b { position:absolute; left:-2px; top:-2px; display:grid; place-items:center; min-width:20px; height:20px; padding:0 3px; background:#ffdc79; color:#17140d; font:700 12px/1 sans-serif; box-shadow:0 0 0 1px #17140d; }
.g-shot__open { display:block; padding:8px 12px; color:var(--accent); font-size:12px; text-align:right; }
.g-shot__legend { display:flex; gap:8px 18px; flex-wrap:wrap; margin-top:8px; list-style:none; }
.g-shot__legend li { display:flex; align-items:center; gap:7px; }
.g-shot__legend b { display:grid; place-items:center; min-width:20px; height:20px; color:var(--ink); background:#ffdc79; font:700 12px/1 sans-serif; }
.g-image-dialog { width:min(95vw,1400px); max-width:95vw; max-height:94dvh; padding:16px; overflow:auto; }
.g-image-dialog__zoom { float:left; padding:7px 12px; min-height:40px; border:1px solid var(--line-strong); color:var(--accent); }
.g-image-dialog__close { min-height:40px; }
.g-image-dialog__viewport { width:100%; max-height:calc(90dvh - 150px); overflow:auto; overscroll-behavior:contain; clear:both; background:#141414; }
.g-image-dialog .g-shot__canvas { width:100%; max-width:100%; }
.g-image-dialog .g-shot__canvas img { width:100%; height:auto; max-height:none; max-width:none; display:block; }
.g-image-dialog.is-native .g-shot__canvas { max-width:none; margin:0; }
.g-image-dialog__zoom:focus-visible,.g-image-dialog__close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
body:has(.g-image-dialog[open]) { overflow:hidden; }
@media(max-width:960px) {
  .g-step,.g-op,.g-shot { scroll-margin-top:calc(var(--g-header-h) + 172px); }
}
@media(max-width:620px) {
  .g-shot__mark { border-width:1px; }
  .g-shot__mark b { min-width:15px; height:15px; font-size:10px; left:-1px; top:-1px; }
  .g-image-dialog { padding:10px; }
  .g-image-dialog .g-shot__mark b { min-width:20px; height:20px; font-size:12px; }
}

/* v06: native step disclosure; step/operation/storage IDs remain unchanged. */
.g-step { display:block; }
.g-step__details { min-width:0; }
.g-step__details > summary { position:relative; cursor:pointer; list-style:none; padding-right:40px; min-height:52px; }
.g-step__details > summary::-webkit-details-marker { display:none; }
.g-step__details[open] > summary { margin-bottom:22px; }
.g-step__summary-state { color:var(--muted); font-size:12px; }
.g-step__toggle { position:absolute; top:50%; right:2px; transform:translateY(-50%); font-size:25px; color:var(--accent); }
.g-step.is-open { border-color:var(--accent); }
.g-step__details > .g-step__check { margin-top:20px; min-height:44px; }
.g-step__details > .g-step__nav { margin-top:18px; }
.g-op__label { min-height:44px; }
.g-op__label input { width:44px; height:44px; }
.g-op__box { width:32px; height:32px; }
.g-op__note { padding:10px 12px; border-left:2px solid var(--accent); background:rgba(200,181,141,.045); }
.g-op__copy,.g-feature__clear { min-height:44px; }
.g-mobile-index summary { min-height:44px; display:flex; align-items:center; }
.g-mobile-index a { display:block; min-height:44px; padding:8px 0; }
.g-op__instruction { font-size:16px; }
.g-step.is-done .g-step__body { opacity:1; }
@media(max-width:960px) {
 .g-step,.g-op,.g-shot { scroll-margin-top:calc(var(--g-header-h) + 190px); }
 .g-mobile-index[open] { max-height:60dvh; overflow:auto; }
}