/* スキルのページ。assets/guide.css の変数と部品に重ねて使う。 */
.sk-return{margin:0 0 18px;font-size:14px}
.sk-return a{color:var(--muted);text-decoration:none}
.sk-return a:hover{color:var(--ink);text-decoration:underline}

/* 今試す・続けて使う：見出しの下に置く小さな操作の帯。2つを1組として細い線で分ける */
.sk-panel{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:24px;margin-top:48px;padding:20px 0 0;border-top:1px solid var(--ink)}
.sk-panel+.sk-panel{margin-top:32px;border-top-color:var(--line)}
.sk-panel-h{margin:0;font-size:14px;line-height:1.7;font-weight:600;color:var(--ink)}
.sk-panel-sub{display:block;font-size:13px;font-weight:400;color:var(--muted)}
.sk-panel-body{min-width:0}
.sk-included{margin:0;font-size:15px;line-height:1.7;color:var(--text)}
.sk-inc-guide{font-weight:600;color:var(--ink)}
.sk-n{margin-right:6px;font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--accent)}
.sk-chars{margin-left:12px;font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.sk-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.sk-btn{font:inherit;font-size:14px;line-height:1.2;padding:10px 16px;border:1px solid var(--ink);border-radius:4px;background:transparent;color:var(--ink);cursor:pointer}
.sk-btn:hover{background:var(--surface)}
.sk-btn.primary{background:var(--ink);color:var(--bg)}
.sk-btn.primary:hover{background:var(--text);border-color:var(--text)}
.sk-btn:active{transform:translateY(1px)}
.sk-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.sk-btn:disabled:hover{background:transparent}
.sk-tools{display:flex;flex-wrap:wrap;gap:0 18px;margin-left:auto}
.sk-toggle{display:inline-flex;align-items:center;gap:7px;padding:10px 0;border:0;background:none;font:inherit;font-size:14px;line-height:1.2;color:var(--accent);cursor:pointer}
.sk-toggle::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.sk-toggle[aria-expanded='true']::after{transform:translateY(1px) rotate(225deg)}
.sk-toggle:hover{text-decoration:underline;text-underline-offset:.24em}
.sk-toggle:active{opacity:.7}
.sk-status{margin:0;font-size:14px;line-height:1.7;color:var(--text)}
.sk-status:not(:empty){margin-top:10px}
.sk-status[data-state='failed']{font-weight:600;color:var(--ink)}
.sk-drawer{margin-top:14px;padding:16px 0 4px;border-top:1px solid var(--line)}
.sk-note{margin:18px 0 0;font-size:14px;color:var(--muted)}
.sk-note-tight{margin-top:4px}
.sk-error{margin:0;font-weight:600;color:var(--ink)}

/* 続けて使う：ZIPと置き場所 */
.sk-desc{margin:0;max-width:38em;font-size:15px;line-height:1.7;color:var(--text)}
a.sk-btn{display:inline-block;text-align:center;text-decoration:none}
.sk-meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.sk-places{display:grid;grid-template-columns:7rem minmax(0,1fr);margin:18px 0 0;border-top:1px solid var(--line-strong);font-size:14.5px;line-height:1.6}
.sk-places dt,.sk-places dd{margin:0;padding:10px 0;border-bottom:1px solid var(--line)}
.sk-places dt{padding-left:4px;font-weight:600;color:var(--ink)}
.sk-sub{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.sk-panel code{padding:.06em .3em;font-family:var(--mono);font-size:.86em;border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow-wrap:anywhere}

/* 資料の選択 */
.sk-field{min-width:0;margin:0;padding:0;border:0}
.sk-field+.sk-field{margin-top:24px}
.sk-field>legend{float:left;width:100%;margin:0 0 10px;padding:0;font-size:14px;font-weight:600;color:var(--ink)}
.sk-field>legend+*{clear:both}
.sk-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px}
.sk-group{min-width:0;margin:0;padding:0;border:0}
.sk-group>legend{float:left;width:100%;margin:0 0 6px;padding:0;font-size:12.5px;letter-spacing:.06em;color:var(--muted)}
.sk-group>legend+*{clear:both}
.sk-list{border-top:1px solid var(--line-strong)}
.sk-opt{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6;cursor:pointer}
.sk-opt:hover{background:var(--surface)}
.sk-opt input{width:16px;height:16px;margin:4px 0 0;accent-color:var(--accent);cursor:pointer}
.sk-name{min-width:0;color:var(--text)}
.sk-opt input:checked+.sk-name{font-weight:600;color:var(--ink)}
.sk-path{display:block;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}

/* コピーする全文（コピーできなかったときの代わり） */
.sk-check-head{display:flex;justify-content:flex-end;margin:0 0 8px}
#sk-full{display:block;width:100%;padding:10px 12px;font:13.5px/1.75 var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--line-strong);border-radius:4px;resize:vertical;scroll-margin-top:calc(var(--top) + 24px)}
.sk-link{padding:0;border:0;background:none;font:inherit;font-size:13.5px;color:var(--accent);text-decoration:underline;text-underline-offset:.24em;cursor:pointer}
.sk-link:active{opacity:.7}

/* スキル本文と読み方の指示 */
.sk-part{margin-top:56px;padding-top:28px;border-top:1px solid var(--ink)}
.sk-part>h2{margin:0}
.sk-part-lead{margin:10px 0 0;max-width:38em;font-size:15px;color:var(--muted)}
.sk-doc{margin:24px 0 0;padding:28px 32px 30px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-size:15.5px}
.sk-doc>:first-child{margin-top:0}
.sk-doc>:last-child{margin-bottom:0}
.sk-doc h3{margin:22px 0 12px;font-size:22px;line-height:1.4}
.sk-doc h4{margin:32px 0 10px;padding-top:20px;border-top:1px solid var(--line);font-size:16.5px;line-height:1.6}
.sk-doc ul,.sk-doc ol{margin:0 0 1em;padding-left:1.4em}
.sk-doc li{margin:5px 0}
.sk-doc li::marker{color:var(--muted)}
.sk-doc code{padding:.06em .3em;font-family:var(--mono);font-size:.86em;border:1px solid var(--line);border-radius:3px;background:var(--bg);overflow-wrap:anywhere}
.sk-doc a{text-decoration:none}
.sk-doc a code{color:var(--accent);border-color:var(--line-strong)}
.sk-doc a:hover code{text-decoration:underline}
.sk-fm{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:8px 20px;margin:0 0 6px;padding:0 0 18px;border-bottom:1px solid var(--line);font-size:14.5px}
.sk-fm dt{padding-top:2px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.sk-fm dd{margin:0}

/* 目次の小見出し */
.toc .sub a{padding-left:24px;font-size:13px}

@media (max-width:899px){
  .sk-panel{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:40px}
  .sk-groups{grid-template-columns:minmax(0,1fr)}
  .sk-btn{flex:1 1 auto}
  .sk-tools{flex-basis:100%;margin-left:0}
  .sk-part{margin-top:48px}
  .sk-doc{padding:20px 18px 22px;font-size:15px}
  .sk-fm{grid-template-columns:minmax(0,1fr);gap:2px}
  .sk-fm dd+dt{margin-top:10px}
}