/* TOGE の説明書のサイト。値と部品はテーマ（assets/toge.css）から写している。
   色はテーマの既定のカラースキーム（scheme-1）。白だけ。 */

:root{
  --paper:#ffffff; --ink:#222222; --ink-2:#222222; --gray:#6b6b6b; --gray-2:#767676;
  --line:#ebebeb; --soft:#f4f4f4; --soft-ink:#222222; --link:#222222;
  --btn:#222222; --btn-label:#ffffff;

  --max:1280px; --r:4px; --nav-h:58px;
  --sans:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --disp:"Zen Kaku Gothic New",var(--sans);

  --fs-display:clamp(32px,3.6vw,44px);
  --fs-section:clamp(28px,2.6vw,34px);
  --fs-heading:clamp(20px,1.7vw,22px);
  --fs-subhead:19px; --fs-body:16px; --fs-ui:14px; --fs-meta:14px; --fs-meta-s:12px;
  --ls-tight:.01em; --ls-normal:.02em; --ls-label:.16em; --ls-meta:.04em;
  --lh-display:1.2; --lh-section:1.35; --lh-heading:1.5; --lh-body:1.9;
}
:lang(zh-TW){--sans:"Noto Sans TC","PingFang TC",system-ui,sans-serif;--disp:var(--sans)}
:lang(zh-CN){--sans:"Noto Sans SC","PingFang SC",system-ui,sans-serif;--disp:var(--sans)}
:lang(ko){--sans:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;--disp:var(--sans)}

/* 暗い画面の配色（テーマの scheme-2）。いまは使わない: TOGE もサポートのフォームも白だけなので、
   端末が暗い設定でも白で出す（UG 2026-11-04）。戻すときは下のコメントを外し、build.py の
   <meta name="color-scheme"> を "light dark" に戻す。
@media (prefers-color-scheme:dark){
  :root{
    --paper:#1e1e1e; --ink:#f2f2f2; --ink-2:#f2f2f2; --gray:#b4b4b4; --gray-2:#8c8c8c;
    --line:#3a3a3a; --soft:#2a2a2a; --soft-ink:#f2f2f2; --link:#f2f2f2;
    --btn:#f2f2f2; --btn-label:#1e1e1e;
  }
}
*/

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 24px)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--fs-body); line-height:var(--lh-body);
  letter-spacing:var(--ls-tight);
  word-break:auto-phrase; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0;font-family:var(--disp);font-weight:700;line-height:var(--lh-heading)}
a{color:inherit}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;
  padding:.1em .4em;border-radius:var(--r);background:var(--soft);color:var(--soft-ink);
  overflow-wrap:anywhere}

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;
  padding:10px 16px;background:var(--btn);color:var(--btn-label);text-decoration:none;
  border-radius:var(--r);font-size:var(--fs-ui);
  transform:translateY(-200%);transition:transform .12s}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* リンク（テーマの A: 下線が出ていて、乗ると消える） */
.link,.doc p a:not(.help),.doc li a:not(.help),.doc td a:not(.help){
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:100% 100%; background-size:100% 1px;
  padding-bottom:2px; color:var(--link);
  transition:background-size .5s cubic-bezier(.165,.84,.44,1),color .18s;
}
:is(.link,.doc p a:not(.help),.doc li a:not(.help),.doc td a:not(.help)):hover{background-size:0 1px;color:var(--gray)}
@media (prefers-reduced-motion:reduce){:is(.link,.doc p a:not(.help),.doc li a:not(.help),.doc td a:not(.help)){transition:color .18s}}
.ico-out{width:14px;height:14px;margin-left:4px;vertical-align:-2px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* 公式ヘルプへのリンク。文字の代わりに小さなアイコン、ホバー・フォーカスで行き先を出す */
.help{position:relative;display:inline-flex;vertical-align:-2px;margin-left:4px;color:var(--gray-2);transition:color .18s}
.help:hover,.help:focus-visible{color:var(--ink)}
.help__ico{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.help::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:5;
  padding:5px 10px;border-radius:var(--r);background:var(--ink);color:var(--paper);
  font-size:var(--fs-meta-s);font-weight:500;line-height:1.5;letter-spacing:var(--ls-meta);white-space:nowrap;
  opacity:0;transform:translate(-50%,4px);pointer-events:none;transition:opacity .15s,transform .15s}
.help:hover::after,.help:focus-visible::after{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.help::after{transition:opacity .15s;transform:translate(-50%,0)}}

/* ===== ヘッダー（テーマと同じ高さ・ナビの字） ===== */
.hdr{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--max);margin:0 auto;padding:0 32px;height:var(--nav-h);
  display:flex;align-items:center;gap:56px}
.hdr__brand{display:inline-flex;align-items:center;gap:18px;flex:0 0 auto;color:var(--ink);text-decoration:none}
.hdr__logo{display:block;width:120px;height:auto}
.hdr__docs{font-size:var(--fs-meta-s);font-weight:500;letter-spacing:var(--ls-label);color:var(--gray);text-transform:uppercase}
:lang(ja) .hdr__docs,:lang(zh) .hdr__docs,:lang(ko) .hdr__docs{letter-spacing:.08em}
.nav{position:relative;align-self:stretch;display:flex;gap:34px;font-size:var(--fs-meta);font-weight:500;letter-spacing:.1em;color:var(--ink-2)}
.nav__link{position:relative;display:flex;align-items:center;white-space:nowrap;text-decoration:none;transition:color .18s}
/* ホバー・フォーカスした項目の下に 1px の線。項目から項目へ滑って移る（テーマの .hdr__bar と同じ。位置は下の script） */
.nav__bar{position:absolute;left:0;top:0;height:1px;width:0;background:currentColor;color:var(--ink);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.165,.84,.44,1),width .4s cubic-bezier(.165,.84,.44,1),opacity .25s}
.nav__bar.is-on{opacity:1}
.nav__bar.is-jump{transition:opacity .25s}
@media (prefers-reduced-motion:reduce){.nav__bar{transition:opacity .25s}}
.nav__link[aria-current="page"]{color:var(--ink)}
/* 今のページの下線は、ヘッダーの下の罫線に重ねる（ホバーの線も同じ位置。位置は build.py の script） */
.nav__link[aria-current="page"]::after{content:"";position:absolute;left:0;right:.1em;bottom:-1px;height:3px;background:currentColor}

/* 言語（テーマのフッターの選択と同じ） */
.locale__select{position:relative;display:block;margin-left:auto}
.locale__select select{height:34px;min-width:180px;padding:0 38px 0 12px;
  border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font:inherit;font-size:var(--fs-ui);
  appearance:none;-webkit-appearance:none;cursor:pointer}
.locale__select select:hover{border-color:var(--gray-2)}
.locale__chev{position:absolute;right:12px;top:50%;width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== 本文と目次 ===== */
.wrap{max-width:var(--max);margin:0 auto;padding:64px 32px 0;
  display:grid;grid-template-columns:220px minmax(0,760px);gap:80px;justify-content:start}
.is-faq .wrap,.is-404 .wrap{grid-template-columns:minmax(0,760px)}
.toc{position:relative}
.toc__box{position:sticky;top:calc(var(--nav-h) + 40px)}
.toc__head{display:flex;align-items:center;gap:8px;list-style:none;cursor:default;
  font-size:var(--fs-meta-s);font-weight:500;letter-spacing:var(--ls-label);color:var(--gray);text-transform:uppercase}
:lang(ja) .toc__head,:lang(zh) .toc__head,:lang(ko) .toc__head{letter-spacing:.08em}
.toc__head::-webkit-details-marker{display:none}
.toc__head::marker{content:""}
.toc__chev{display:none;width:18px;height:18px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.toc__list{margin:14px 0 0;padding:0;list-style:none;font-size:var(--fs-ui);line-height:1.6}
.toc__list li+li{margin-top:10px}
.toc__list a{color:var(--gray);text-decoration:none;transition:color .18s}
.toc__list a:hover,.toc__list a.is-on{color:var(--ink)}

.doc__title{margin:0 0 32px;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-tight)}
.doc>p{margin:0 0 1em;color:var(--ink-2)}
.doc h2{margin:80px 0 24px;
  font-size:var(--fs-section);line-height:var(--lh-section);letter-spacing:var(--ls-normal)}
.doc h3{margin:40px 0 14px;font-size:var(--fs-heading);letter-spacing:var(--ls-normal)}
.doc ul,.doc ol{margin:0 0 1em;padding-left:1.3em}
.doc li{line-height:var(--lh-body)}
.doc li+li{margin-top:.45em}
.doc strong{font-weight:700}

.tbl{margin:24px 0 32px}  /* PC は表が幅に収まるので、はみ出しの指定はスマホだけ（ヘルプのツールチップが切れないように） */
.tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-ui);line-height:1.7}
.tbl th,.tbl td{text-align:left;padding:12px 24px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl th{font-weight:700;color:var(--ink);border-bottom-color:var(--ink);white-space:nowrap}
.tbl td:first-child{white-space:nowrap}

/* ===== FAQ（テーマの .acc と同じ開閉） ===== */
.faq__list{border-top:1px solid var(--line)}
.acc{display:block;border-bottom:1px solid var(--line)}
.acc__head{display:flex;align-items:center;gap:14px;padding:19px 0;cursor:pointer;list-style:none}
.acc__head::-webkit-details-marker{display:none}
.acc__head::marker{content:""}
.acc__t{font-size:var(--fs-body);font-weight:500;letter-spacing:var(--ls-meta)}
.acc__chev{flex:0 0 auto;width:18px;height:18px;margin-left:auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.acc[open]>.acc__head .acc__chev{transform:rotate(180deg)}
.acc__body{padding:0 0 26px;color:var(--ink-2)}
.acc__body p{margin:0 0 .9em}
.acc__body>:last-child{margin-bottom:0}
.faq__more{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:40px 0 0;font-size:var(--fs-ui);color:var(--gray)}
.faq__more .link{color:var(--ink);font-weight:500}

/* ===== フッター ===== */
.ftr{margin-top:120px;border-top:1px solid var(--line);color:var(--gray);font-size:var(--fs-ui)}
.ftr__in{max-width:var(--max);margin:0 auto;padding:32px 32px 48px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.ftr .link{color:var(--ink)}

/* ===== 920px 以下（テーマと同じ区切り） ===== */
@media (max-width:920px){
  .wrap,.is-faq .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-top:32px}
  .toc{margin-bottom:40px}
  .toc__box{position:static;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .toc__head{padding:16px 0;cursor:pointer}
  .toc__chev{display:block}
  .toc__box[open] .toc__chev{transform:rotate(180deg)}
  .toc__list{margin:0;padding:0 0 18px}
  .hdr__in{gap:24px}
}
@media (max-width:760px){
  .hdr__in{padding:0 16px;gap:16px;flex-wrap:wrap;height:auto;padding-top:14px;padding-bottom:0}
  .hdr__logo{width:clamp(84px,30vw,120px)}
  .nav{order:3;width:100%;gap:0 20px;flex-wrap:wrap;letter-spacing:.04em;padding:0}
  .nav__link{padding:6px 0 12px}
  .hdr__docs{display:none}
  .locale__select select{min-width:0;width:156px;padding-right:32px}
  .locale__chev{right:10px}
  .wrap{padding:28px 16px 0}
  .doc h2{margin-top:56px}
  .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ftr{margin-top:80px}
  .ftr__in{padding:24px 16px 40px}
}