/* 新卒クエスト — ガチ研修モード（js/gachi/ui.js・work.js・me.js）。決まりは app/docs/ui_rules.md「ガチ研修：まじめ寄り」。
   代表 11-05「ガチ研修は、割と真面目寄りのUIデザインでもいい」：落ち着いた仕事・学びの道具の見た目。
   ・ゲームと同じもの：紺の文字（--v1-ink #2E3A6E）、丸ゴシックの見出し＋BIZ UDPゴシックの本文、黄色の大きいボタン（1画面に1つ）、
     上の帯（skin.css の白い帯）、フォーカスの枠、判定の3色（合格＝緑・あと一歩＝橙・未達＝赤）。
   ・ちがうもの：地は明るい無地（ドットもイラストもなし）、色は紺と判定の3色だけ（桃は使わない）、角丸は小さめ（6〜12px）でピル形を減らす、
     影は薄く線で区切る、NEW・絵文字のタイルなし、文字は大きめ（本文15px〜）。
   ・赤ペンは未達と同じ赤（色を増やさない）。#1F3A5F（テンプレのファイルの紺）は画面では使わない。
   ・古い版の決まり（js/skin.js：角を四角く）は .fx 全体にかかるので、#gachi の中では角丸を戻す。 */
#gachi{
  /* 共通の色（ui_rules.md 3章） */
  --ink:var(--v1-ink,#2E3A6E); --ink-d:#1C2550; --sub:#555B78; --line:#ECE3D4; --soft:#F4EEE4; --navy-soft:#E9ECF6;
  --sub2:#3F4A75; --ground:#F4F5F8; --line2:#E3E6EE; --pk-soft:#FCE4EA; --pk-ink:#A3284D;
  --yel:var(--v1-yel,#FFD36E); --yel-lip:var(--v1-yel-lip,#D9A93A); --key-soft:#FFF6DA;
  --pan:#FFFFFF; --pan-ln:var(--line2); --pan-sub:var(--sub); --tile:#F7F8FB; --tile-h:#EEF0F6;
  --good:#1E7F4F; --good-ink:#1B6B43; --good-bg:#E3F4EA; --warn:#9A5B00; --warn-bg:#FFF0D2; --crit:#C23A3A; --crit-ink:#A32A2A; --crit-bg:#FDE4E1;
  --round:var(--v1-round,"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","BIZ UDPGothic",system-ui,sans-serif);
  --body:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  --r:12px; --sh:0 1px 2px rgba(30,40,80,.06);
  --fg:var(--ink); --fs:var(--sub); --uid-bg:var(--navy-soft); --uid-fg:var(--ink); --gh-bg:#FFFFFF; --gh-fg:var(--ink); --gh-bd:var(--line2); --rule:var(--line2); --link:var(--ink);
  color:var(--fg); font-family:var(--body);
  background:var(--ground)!important;
}
/* 白い紙（読む所・書く所） */
#gachi :is(.gk-box,.gk-urow-b,.gk-map,.gk-hist,.gk-work,.gk-res-l,.gk-res-r,.gk-cardsheet,.gk-me,.gk-card-b,.gk-uc-b,.gk-osit,.gk-pc-sheet){
  --fg:var(--ink); --fs:var(--sub); --uid-bg:var(--navy-soft); --uid-fg:var(--ink); --gh-bg:#FFFFFF; --gh-fg:var(--ink); --gh-bd:var(--line); --rule:var(--line); --link:var(--ink);
  color:var(--fg); font-family:var(--body)}
#gachi .fx-wrap{max-width:1180px}
#gachi[data-r="task"] .fx-wrap,#gachi[data-r="result"] .fx-wrap{max-width:1560px}
#gachi[data-r="task"]:not([data-k="mail"]) .fx-wrap,#gachi[data-r="result"]:not([data-k="mail"]) .fx-wrap{max-width:1240px}
#gachi .fx-view{display:grid;gap:16px}
#gachi :is(p,li,dd,small,td,blockquote,label,em){font-weight:400}
html.gk-open body>.kd-tv{display:none!important}
#gachi h1,#gachi h2,#gachi h3{font-family:var(--round);color:inherit;margin:0;letter-spacing:.01em}
#gachi h1{font-size:28px;line-height:1.3;font-weight:800}
#gachi p{margin:0}
#gachi button{font:inherit;color:inherit;cursor:pointer}
#gachi button:disabled{cursor:default}
#gachi#gachi :focus-visible{outline:3px solid var(--v1-pink,#F07C98)!important;outline-offset:2px}
#gachi [tabindex="-1"]:focus{outline:none!important}
#gachi .gk-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 上の帯：ゲームと同じ白い帯（skin.css）。ロゴの「ガチ」だけ紺 ---------- */
#gachi .fx-top{border:1px solid var(--line2)!important;box-shadow:none!important;border-radius:12px!important}
#gachi .fx-logo::before{content:"ガチ";display:inline-block;background:var(--ink);color:#FFFFFF;border-radius:6px!important;padding:0 8px;margin-right:6px;font-size:.8em;vertical-align:.1em}

/* ---------- ボタン ---------- */
/* 黄色の大きいボタン（ゲームと同じ色）。1つの画面に1つ。まじめ寄りなので角は 10px */
#gachi#gachi button.primary{background:var(--yel)!important;color:var(--ink)!important;border:0!important;border-radius:10px!important;box-shadow:0 4px 0 var(--yel-lip)!important;
  font-family:var(--round)!important;font-weight:900!important;letter-spacing:.02em;min-height:46px;padding:10px 24px;transition:transform .08s,box-shadow .08s}
#gachi#gachi button.primary:hover{filter:brightness(1.05)}
#gachi#gachi button.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--yel-lip)!important}
#gachi#gachi button.primary:disabled{background:#EFE7DA!important;color:#6B6F86!important;box-shadow:0 4px 0 #DCD2C2!important;filter:none;transform:none}
/* 2番目：白に線 */
#gachi#gachi button.ghost{background:var(--gh-bg)!important;color:var(--gh-fg)!important;border:1px solid var(--gh-bd)!important;border-radius:10px!important;box-shadow:none!important;font-family:var(--round);font-weight:800!important;min-height:44px;padding:8px 18px}
#gachi#gachi button.ghost:hover{background:var(--navy-soft)!important}
#gachi .gk-link{background:none!important;border:0!important;box-shadow:none!important;padding:4px 2px!important;min-height:32px;color:var(--link)!important;text-decoration:underline;text-underline-offset:3px;font-weight:700;font-family:inherit}
#gachi .gk-mini{min-height:32px;min-width:32px;padding:2px 10px;border-radius:8px!important;border:0;background:var(--soft);color:var(--ink);font-weight:800;font-size:13px;font-family:var(--body)}
#gachi .gk-mini:hover:not(:disabled){background:var(--navy-soft)}
#gachi .gk-mini:disabled{opacity:.45}

/* ---------- 文字 ---------- */
#gachi .gk-eyebrow{font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--sub2)}
#gachi .gk-lead{font-size:15px;line-height:1.75;color:var(--fs);margin-top:6px!important;font-family:var(--body);text-wrap:pretty}
#gachi .gk-p{font-size:15px;line-height:1.75;margin:6px 0!important}
#gachi .gk-note{font-size:13px;color:var(--fs);line-height:1.6}
#gachi .gk-h2{font-size:19px!important;font-weight:800;margin:4px 0 10px!important;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#gachi .gk-h2 small,#gachi .gk-h3 small{font-family:var(--body);font-size:13px;font-weight:700;color:var(--fs)}
#gachi .gk-h3{font-size:15px!important;font-weight:800;margin:14px 0 8px!important}
#gachi .gk-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px}
#gachi .gk-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#gachi .gk-two-7{grid-template-columns:1.25fr 1fr}
#gachi .gk-uid{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12px;font-weight:700;color:var(--uid-fg);background:var(--uid-bg);border-radius:6px!important;padding:1px 6px;white-space:nowrap}
#gachi .gk-dim{color:var(--fs);font-size:13px}
#gachi .flash{animation:gcflash 1.6s ease-out}
@keyframes gcflash{0%{box-shadow:0 0 0 4px var(--yel)}100%{box-shadow:0 0 0 0 transparent}}

/* パンくず */
#gachi .gk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--sub);font-family:var(--body)}
#gachi .gk-crumb{background:none;border:0;padding:2px;color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:32px}
#gachi .gk-crumb-now{font-weight:700;color:var(--ink)}

/* ---------- 印（ラベル）：判定の3色と、目安・準備中 ---------- */
#gachi :is(.gk-st,.gk-soon,.gk-badge,.gk-dot){display:inline-flex;align-items:center;white-space:nowrap;border-radius:6px!important;padding:2px 10px;font-size:12px;font-weight:800;line-height:1.5;font-family:var(--body)}
#gachi :is(.gk-st-pass,.gk-b-ok,.gk-dot-ok){background:var(--good-bg);color:var(--good-ink)}
#gachi :is(.gk-st-try,.gk-b-near,.gk-dot-near){background:var(--warn-bg);color:var(--warn)}
#gachi :is(.gk-st-ng,.gk-b-ng,.gk-dot-ng){background:var(--crit-bg);color:var(--crit-ink)}
#gachi :is(.gk-st-none,.gk-st-seen){background:var(--soft);color:var(--sub)}
#gachi .gk-soon{background:#F1ECE2;color:var(--sub);font-weight:700}
#gachi .gk-dot{padding:0 8px}
/* 目安：色分けしない（判定の色とまぎれるので）。必須だけ桃 */
#gachi .gk-lv{display:inline-flex;align-items:center;gap:1px;border-radius:6px!important;padding:0 6px;font-size:12px;font-weight:800;white-space:nowrap;background:var(--navy-soft);color:var(--ink);font-family:var(--body)}
#gachi .gk-lv b{color:#6E4C0E;font-size:12px}
#gachi .gk-lv-must{background:var(--pk-soft);color:var(--pk-ink)}
#gachi .gk-min{font-size:12px;color:var(--fs);white-space:nowrap;font-family:var(--body)}
#gachi .gk-kadai{font-size:12px;font-weight:800;color:#FFFFFF;background:var(--ink);border-radius:4px!important;padding:0 6px}
#gachi .gk-c-ok{color:var(--good-ink)}#gachi .gk-c-near{color:var(--warn)}#gachi .gk-c-ng{color:var(--crit-ink)}
/* 説明文の中の 合格・あと一歩・未達 は、印と同じ形で */
#gachi .gk-hero :is(.gk-c-ok,.gk-c-near,.gk-c-ng){border-radius:6px!important;padding:0 6px;margin:0 1px}
#gachi .gk-hero .gk-c-ok{background:var(--good-bg)}#gachi .gk-hero .gk-c-near{background:var(--warn-bg)}#gachi .gk-hero .gk-c-ng{background:var(--crit-bg)}
#gachi .gk-bar{display:block;height:8px;border-radius:99px!important;background:#E6E8EF;overflow:hidden}
#gachi .gk-bar i{display:block;height:100%;background:var(--ink);border-radius:99px!important;min-width:4px}

/* ---------- 枠のパネル（白・薄い線） ---------- */
#gachi :is(.gk-hero,.gk-pagehead,.gk-uhead,.gk-wtop,.gk-verdict,.gk-pc,.gk-notice,.gk-how,.gk-stepper,.gk-up){background:var(--pan);border:1px solid var(--pan-ln);border-radius:var(--r)!important;box-shadow:var(--sh)}
#gachi .gk-pagehead{border:0;box-shadow:none;background:transparent;padding:6px 2px!important}
#gachi .gk-pagehead{display:grid;gap:4px;padding:18px 22px}
#gachi .gk-pagehead .gk-search{margin-top:12px}

/* 研修トップ */
#gachi .gk-hero{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:22px 26px;border-top:4px solid var(--ink)}
#gachi .gk-hero h1{font-size:32px;margin:4px 0 2px}
#gachi .gk-hero-r{display:grid;gap:8px;align-content:start;background:var(--tile);border:1px solid var(--pan-ln);border-radius:12px!important;padding:14px 18px;min-width:220px}
#gachi .gk-prog{display:flex;align-items:baseline;gap:8px}#gachi .gk-prog b{font-family:var(--round);font-size:34px;color:var(--ink);line-height:1}#gachi .gk-prog span{font-weight:700;font-size:14px;color:var(--pan-sub)}
#gachi .gk-prog2 b{font-size:26px}
#gachi .gk-doors-h{margin:6px 0 -4px!important}
#gachi .gk-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
#gachi .gk-door{position:relative;display:grid;gap:8px;align-content:start;background:var(--pan);border:1px solid var(--pan-ln);border-radius:var(--r)!important;box-shadow:var(--sh);padding:18px 20px 20px;transition:border-color .12s}
#gachi .gk-door:hover{border-color:var(--ink)}
#gachi .gk-door-main{all:unset;cursor:pointer;display:block;font-family:var(--round)}
#gachi .gk-door-main::after{content:"";position:absolute;inset:0;border-radius:var(--r)!important}
#gachi .gk-door-main:focus-visible::after{outline:3px solid var(--v1-pink,#F07C98);outline-offset:2px}
#gachi .gk-door-main b{font-size:22px;font-weight:800;color:var(--ink)}
#gachi .gk-door-k{justify-self:start;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px!important;background:var(--ink);color:#FFFFFF;font-weight:800;font-size:16px}
#gachi .gk-door-w{font-size:14px;line-height:1.65;color:var(--pan-sub);font-family:var(--body)}
#gachi .gk-door-n{font-size:13px;font-weight:700;color:var(--ink);font-family:var(--body)}
#gachi .gk-cont,#gachi .gk-door-me{position:relative;z-index:1}
#gachi#gachi button.gk-cont{display:grid;justify-items:start;gap:0;text-align:left;width:100%;margin-top:6px;padding:10px 48px 12px 18px!important;min-height:64px}
#gachi .gk-cont small{font-size:13px;font-weight:800;color:#5A430E}
#gachi .gk-cont b{font-size:16px;font-weight:900;line-height:1.35;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#gachi .gk-cont i{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-style:normal;font-size:20px;color:var(--ink)}
#gachi .gk-door-me{justify-self:start}
#gachi .gk-more{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#gachi .gk-more-b{display:grid;gap:2px;text-align:left;background:#FFFFFF;border:1px solid var(--pan-ln);border-radius:10px!important;padding:12px 16px;min-height:60px}
#gachi .gk-more-b:hover{border-color:var(--ink)}
#gachi .gk-more-b b{font-size:16px;font-weight:800}#gachi .gk-more-b small{font-size:13px;color:var(--pan-sub);font-family:var(--body)}
#gachi .gk-how{padding:0 20px}
#gachi .gk-how summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font-weight:800;font-size:16px}
#gachi .gk-how[open]{padding-bottom:18px}
#gachi .gk-how .gk-flow{margin:4px 0 14px}
#gachi .gk-how-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:14px;line-height:1.65;font-family:var(--body)}
#gachi .gk-how-dl dt{font-weight:800;color:var(--ink);font-family:var(--round)}
#gachi .gk-how-dl dd{margin:0;color:var(--pan-sub)}

/* 道すじ（おすすめの順）：タブ・目安ごとの段 */
#gachi .gk-ptabs,#gachi .gk-seg{display:flex;gap:4px;flex-wrap:wrap;margin-top:10px}
#gachi :is(.gk-ptab,.gk-seg-b){min-height:44px;padding:6px 18px;border:1px solid var(--line2);border-radius:8px!important;background:#FFFFFF;color:var(--ink);font-weight:800;font-family:var(--round)}
#gachi :is(.gk-ptab,.gk-seg-b):hover{background:var(--tile-h)}
#gachi :is(.gk-ptab,.gk-seg-b).gk-is-on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}
#gachi .gk-lvs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#gachi .gk-lv-step{background:var(--pan);border:1px solid var(--pan-ln);border-radius:var(--r)!important;padding:14px 16px}
#gachi .gk-lv-step.gk-is-now{border-left:4px solid var(--ink)}
#gachi .gk-lv-h{display:grid;grid-template-columns:auto auto 1fr minmax(120px,220px);gap:10px;align-items:center;margin-bottom:10px}
#gachi .gk-lv-h b{font-size:18px;font-weight:800;font-family:var(--round)}
#gachi .gk-lv-h small{font-size:13px;color:var(--pan-sub);font-family:var(--body)}
#gachi .gk-lv-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px!important;background:var(--navy-soft);font-weight:800}
#gachi .gk-is-now .gk-lv-n{background:var(--ink);color:#FFFFFF}
#gachi .gk-ucs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
#gachi .gk-uc-b{position:relative;width:100%;height:100%;display:grid;gap:6px;align-content:start;justify-items:start;text-align:left;background:#FFFFFF;border:1px solid var(--line2);border-radius:10px!important;padding:12px 14px}
#gachi button.gk-uc-b:hover{border-color:var(--ink)}
#gachi .gk-uc-b b{font-size:14px;font-weight:700;line-height:1.5}
#gachi .gk-uc-m{display:flex;gap:8px;align-items:center}
#gachi .gk-off .gk-uc-b{background:var(--tile);border-style:dashed;color:#4F556C}
#gachi .gk-here .gk-uc-b{border:2px solid var(--ink);background:var(--key-soft)}
#gachi .gk-here-k{justify-self:start;background:var(--ink);color:#FFFFFF;border-radius:6px!important;padding:1px 8px;font-size:12px;font-weight:800}
#gachi .gk-rest{font-size:13px;color:var(--pan-sub);margin-top:8px!important;font-family:var(--body)}

/* 検索 */
#gachi .gk-search{display:flex;gap:8px;max-width:680px}
#gachi .gk-search input{flex:1;min-width:0;min-height:46px;border:2px solid var(--line2);border-radius:10px!important;padding:8px 16px;font:inherit;font-family:var(--body);font-size:15px;background:#FFFFFF;color:var(--ink)}
#gachi .gk-search input:focus{border-color:var(--ink);outline:none}
#gachi .gk-search input::placeholder{color:#6B6F86}
#gachi .gk-search-wide{max-width:none}

/* 一覧（単元の行は白い紙・場面とスキルは暗いタイル） */
#gachi .gk-ulist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#gachi .gk-urow-b{width:100%;display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;text-align:left;background:#FFFFFF;border:1px solid var(--line2);border-radius:10px!important;padding:10px 14px;min-height:48px}
#gachi button.gk-urow-b:hover{border-color:var(--ink);box-shadow:inset 4px 0 0 var(--ink)}
#gachi .gk-off .gk-urow-b{background:var(--tile);border-style:dashed}
#gachi .gk-off .gk-uname{color:#4F556C}
#gachi .gk-uname{font-weight:700;font-size:15px;min-width:0}
#gachi .gk-umeta{display:flex;gap:6px;align-items:center}
#gachi .gk-ust{justify-self:end}
#gachi .gk-grp{display:grid;gap:8px}
#gachi .gk-gid{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px!important;background:var(--ink);color:#FFFFFF;font-size:14px}
#gachi .gk-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
#gachi :is(.gk-sit,.gk-area,.gk-tpl){color:#4F556C;background:var(--tile);border:1px dashed #CFD3DE;border-radius:10px!important}
#gachi :is(.gk-sit,.gk-area,.gk-tpl).gk-is-on{color:var(--ink);background:#FFFFFF;border:1px solid var(--line2);box-shadow:inset 4px 0 0 var(--ink)}
#gachi .gk-sit{width:100%;height:100%;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:2px 10px;align-items:center;text-align:left;padding:10px 14px}
#gachi .gk-sit b{font-size:15px;font-weight:700}#gachi .gk-sit small{grid-column:2/3;font-size:13px;color:var(--sub);line-height:1.5;font-family:var(--body)}
#gachi .gk-sit>.gk-st,#gachi .gk-sit>.gk-soon{grid-row:1/3;grid-column:3}
#gachi button:is(.gk-sit,.gk-area).gk-is-on:hover{border-color:var(--ink)}
#gachi .gk-areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
#gachi .gk-skill-on{grid-column:1/-1;display:grid;grid-template-columns:minmax(220px,1fr) 3fr;gap:10px;align-items:start}
#gachi .gk-area{width:100%;height:100%;display:grid;gap:6px;align-content:start;text-align:left;padding:12px 14px}
#gachi .gk-area b{font-size:16px;font-family:var(--round)}#gachi .gk-area small{font-size:13px;color:var(--sub);font-family:var(--body)}
#gachi .gk-area .gk-soon{justify-self:start}
#gachi :is(.gk-path-n,.gk-area-n){font-size:13px;color:var(--ink);font-weight:700;font-family:var(--body)}
#gachi .gk-area-lv{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:12px;color:var(--pan-sub);font-family:var(--body)}
#gachi .gk-clist{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#gachi .gk-clist li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:6px 4px;border-bottom:1px solid var(--rule);font-size:14px;font-family:var(--body)}
#gachi .gk-star{color:#6E4C0E}
#gachi .gk-cu{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
#gachi .gk-steps{margin:0 0 6px;padding-left:22px;display:grid;gap:6px;line-height:1.7;font-size:15px}
#gachi .gk-shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#gachi .gk-card-b{width:100%;height:100%;display:flex;gap:8px;align-items:center;text-align:left;border:0;background:#FFFFFF;border:1px solid var(--line2);border-radius:10px!important;padding:10px 12px;font-size:14px;font-weight:700;min-height:48px}
#gachi .gk-card-b:hover{border-color:var(--ink)}
#gachi .gk-osits{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#gachi .gk-osit{width:100%;display:flex;gap:10px;align-items:center;text-align:left;background:#FFFFFF;border:0;border-radius:12px!important;padding:10px 14px;min-height:48px}
#gachi .gk-osit b{flex:1;font-size:14px}

/* スキルマップ（白い紙の表。マスの色＝判定の色の薄い版） */
#gachi .gk-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:13px;color:var(--ink);font-weight:700;font-family:var(--body)}
#gachi .gk-legend span{display:inline-flex;align-items:center;gap:6px}
#gachi .gk-sw{display:inline-block;width:16px;height:16px;border-radius:5px!important;box-shadow:inset 0 0 0 1px rgba(46,58,110,.18)}
#gachi .gk-map{display:grid;gap:4px;background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:12px}
#gachi .gk-mrow{display:grid;grid-template-columns:minmax(170px,1.3fr) repeat(5,1fr);gap:4px}
#gachi .gk-mhead span{font-family:var(--round);font-weight:800;font-size:14px;text-align:center;padding:4px 0;display:grid}
#gachi .gk-mhead span small{font-size:12px;font-weight:700;color:var(--sub)}
#gachi .gk-marea{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:700;padding:0 6px}
#gachi .gk-marea b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink);background:var(--navy-soft);border-radius:5px!important;padding:0 5px}
#gachi .gk-cell{display:grid;place-items:center;align-content:center;gap:0;min-height:52px;border:0;border-radius:10px!important;font-size:12px;padding:4px}
#gachi .gk-cell b{font-family:var(--round);font-size:17px;line-height:1.1}#gachi .gk-cell b small{font-size:12px;font-weight:700}
#gachi .gk-cell>small{font-size:12px;font-weight:700}
#gachi .gk-cell-empty{color:#9A9384;background:transparent}
#gachi :is(.gk-cell-none,.gk-sw-none,.gk-mm-none){background:#F1ECE2;color:var(--ink)}
#gachi :is(.gk-cell-try,.gk-sw-try,.gk-mm-try){background:#FFE7B8;color:#6E4300}
#gachi :is(.gk-cell-pass,.gk-sw-pass,.gk-mm-pass){background:#BFE6CE;color:#145234}
#gachi :is(.gk-cell-soon,.gk-sw-soon,.gk-mm-soon){background:repeating-linear-gradient(135deg,#F6F2EA 0 6px,#EEE8DC 6px 12px);color:#555B78}
#gachi :is(.gk-cell-y3,.gk-sw-y3){background:var(--navy-soft);color:var(--ink)}
#gachi button.gk-cell:hover{outline:2px solid var(--ink);outline-offset:-2px}
#gachi .gk-fails{box-shadow:inset 5px 0 0 var(--crit),var(--sh)}
#gachi .gk-fails ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#gachi .gk-fails li{display:flex;gap:8px;align-items:center;background:var(--crit-bg);color:var(--crit-ink);border-radius:6px!important;padding:4px 12px;font-size:13px;font-weight:700}

/* ---------- 白い紙の箱 ---------- */
#gachi .gk-box{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:18px 20px;min-width:0}
#gachi .gk-box-act{border-top:4px solid var(--ink)}

/* 単元 */
#gachi .gk-uhead{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:18px 22px;border-top:4px solid var(--ink)}
#gachi .gk-uhead-r{display:grid;gap:8px;justify-items:end}
#gachi .gk-uprog{display:grid;gap:4px;justify-items:end;min-width:200px}
#gachi .gk-uprog small{font-size:13px;color:var(--sub);font-family:var(--body)}
#gachi .gk-uprog .gk-bar{width:100%}
#gachi .gk-comps{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px!important;align-items:center}
#gachi .gk-comp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:var(--uid-bg);border-radius:6px!important;padding:1px 6px;color:var(--sub2);font-weight:700}
#gachi .gk-stepper{display:flex;gap:4px;flex-wrap:wrap;padding:6px}
#gachi .gk-step{border:0;background:transparent;border-radius:8px!important;padding:8px 16px;font-weight:800;font-size:15px;color:var(--sub);min-height:44px;font-family:var(--round)}
#gachi .gk-step:hover:not(.gk-step-5){background:var(--tile-h)}
#gachi .gk-step.gk-is-done::after{content:" ✓";color:var(--good)}
#gachi .gk-step.gk-is-on{background:var(--ink);color:#FFFFFF}
#gachi .gk-step.gk-is-on.gk-is-done::after{color:#BFE6CE}
#gachi .gk-step-5{display:inline-flex;align-items:center;cursor:default}
#gachi .gk-next{justify-content:flex-end}
#gachi .gk-pre{background:var(--navy-soft);border-radius:10px!important;padding:8px 12px;font-size:14px;margin-bottom:10px!important;line-height:1.8}
#gachi .gk-explist{margin:0;padding-left:26px;display:grid;gap:10px;font-size:16px;line-height:1.85}
#gachi .gk-explist li::marker{font-family:var(--round);font-weight:800;color:var(--ink)}
#gachi .gk-fig{margin:16px 0 0;background:var(--tile);border-radius:14px!important;padding:14px 16px}
#gachi .gk-fig figcaption{font-weight:800;font-size:14px;color:var(--ink);margin-bottom:8px}
#gachi .gk-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center}
#gachi .gk-flow li{position:relative;display:flex;align-items:center;gap:6px;background:#FFFFFF;color:var(--ink);border:1px solid var(--line2);border-radius:8px!important;padding:5px 14px 5px 6px;font-weight:700;font-size:14px}
#gachi .gk-flow li span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%!important;background:var(--ink);color:#FFFFFF;font-size:12px}
#gachi .gk-flow li+li::before{content:"→";position:absolute;left:-17px;color:currentColor;font-weight:800}
#gachi .gk-rcpt{width:100%;border-collapse:collapse;font-size:14px}#gachi .gk-rcpt th,#gachi .gk-rcpt td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line)}#gachi .gk-rcpt thead th{font-size:13px;color:var(--sub)}
#gachi .gk-rcpt tbody th{font-family:ui-monospace,Menlo,monospace;color:var(--ink)}
#gachi .gk-exs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#gachi .gk-ex{border-radius:14px!important;padding:14px 16px;display:grid;gap:10px;align-content:start}
#gachi .gk-ex h3{font-size:15px!important;display:flex;align-items:center;gap:8px}
#gachi .gk-ex-bad{background:#FFF5F3;box-shadow:inset 0 0 0 2px #F4C7C1}#gachi .gk-ex-bad h3::before{content:"×";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%!important;background:var(--crit);color:#FFFFFF;font-size:13px}
#gachi .gk-ex-good{background:#F2FAF5;box-shadow:inset 0 0 0 2px #BFE0CB}#gachi .gk-ex-good h3::before{content:"○";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%!important;background:var(--good);color:#FFFFFF;font-size:13px}
#gachi .gk-ex-text{background:#FFFFFF;border-radius:10px!important;padding:12px 14px;font-size:15px;line-height:1.95}
#gachi .gk-m{border-radius:3px!important;padding:1px 0}
#gachi .gk-m sup{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:50%!important;font-size:12px;font-weight:800;color:#FFFFFF;margin-right:2px;vertical-align:.45em;line-height:1}
#gachi .gk-m-bad{background:rgba(194,58,58,.10);box-shadow:inset 0 -2px 0 var(--crit)}#gachi .gk-m-bad sup{background:var(--crit)}
#gachi .gk-m-good{background:rgba(30,127,79,.10);box-shadow:inset 0 -2px 0 var(--good)}#gachi .gk-m-good sup{background:var(--good)}
#gachi .gk-ex-why{margin:0;padding-left:22px;font-size:14px;line-height:1.7;display:grid;gap:3px}
#gachi .gk-ex-bad .gk-ex-why li::marker{color:var(--crit);font-weight:800}#gachi .gk-ex-good .gk-ex-why li::marker{color:var(--good);font-weight:800}
#gachi .gk-quiz{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:gq}
#gachi .gk-q{counter-increment:gq;background:#FCFAF5;border-radius:14px!important;padding:14px 16px;box-shadow:inset 0 0 0 1px var(--line)}
#gachi .gk-qq{font-weight:700;font-size:16px;line-height:1.7;display:flex;gap:8px;align-items:baseline;margin-bottom:10px!important}
#gachi .gk-qq::before{content:"問" counter(gq);font-family:var(--round);font-weight:800;color:var(--ink);white-space:nowrap}
#gachi .gk-qk{font-size:12px;font-weight:800;background:var(--navy-soft);color:var(--ink);border-radius:999px!important;padding:1px 8px;white-space:nowrap}
#gachi .gk-opts{display:grid;gap:6px}
#gachi .gk-opt{display:flex;gap:10px;align-items:center;text-align:left;border:0;background:#FFFFFF;border-radius:12px!important;padding:10px 14px;box-shadow:0 2px 0 rgba(46,58,110,.12),inset 0 0 0 2px var(--line);font-size:15px;min-height:46px;line-height:1.55}
#gachi .gk-opt kbd{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%!important;background:var(--navy-soft);color:var(--ink);font-weight:800;font-size:13px;font-family:inherit}
#gachi .gk-opt:hover:not(:disabled){background:#F7F9FD;box-shadow:0 2px 0 rgba(46,58,110,.12),inset 0 0 0 2px var(--ink)}
#gachi .gk-opt.gk-is-right{box-shadow:inset 0 0 0 2px var(--good);background:var(--good-bg)}#gachi .gk-opt.gk-is-right kbd{background:var(--good);color:#FFFFFF}
#gachi .gk-opt.gk-is-wrong{box-shadow:inset 0 0 0 2px var(--crit);background:var(--crit-bg)}#gachi .gk-opt.gk-is-wrong kbd{background:var(--crit);color:#FFFFFF}
#gachi .gk-opt:disabled{color:var(--ink)}
#gachi .gk-ord{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px;counter-reset:go}
#gachi .gk-ord li{counter-increment:go;display:flex;align-items:center;gap:10px;background:#FFFFFF;border-radius:12px!important;padding:6px 8px 6px 12px;box-shadow:inset 0 0 0 2px var(--line);font-size:15px;min-height:44px}
#gachi .gk-ord li::before{content:counter(go);font-family:var(--round);font-weight:800;color:var(--ink);width:18px}
#gachi .gk-ord li>span:first-of-type{flex:1}
#gachi .gk-ordb{display:flex;gap:4px;margin-left:auto}
#gachi .gk-wr{display:flex;gap:8px}#gachi .gk-wr input{flex:1;min-height:44px;border:2px solid var(--line);border-radius:12px!important;padding:6px 12px;font:inherit;font-size:15px;background:#FFFFFF;color:var(--ink)}
#gachi .gk-wr input:focus{border-color:var(--ink);outline:none}
#gachi .gk-fb{margin-top:10px;border-radius:10px!important;padding:10px 12px;font-size:14px;line-height:1.7;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
#gachi .gk-fb b{font-family:var(--round)}
#gachi .gk-fb-ok{background:var(--good-bg)}#gachi .gk-fb-ok b{color:var(--good-ink)}
#gachi .gk-fb-ng{background:var(--crit-bg)}#gachi .gk-fb-ng b{color:var(--crit-ink)}
#gachi .gk-cardsheet{background:#FFFFFF;border-radius:14px!important;padding:18px 22px;box-shadow:inset 0 0 0 2px var(--navy-soft),inset 0 6px 0 var(--ink);max-width:640px}
#gachi .gk-cardsheet h3{font-size:19px!important;margin:4px 0 10px!important}
#gachi .gk-cardsheet ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
#gachi .gk-cardsheet li{display:flex;gap:10px;font-size:15px;line-height:1.6}#gachi .gk-cardsheet li::before{content:"□";color:var(--ink);font-weight:800}
/* テンプレのダウンロード：紺のボタン（白い紙の上の「道具」のボタン） */
#gachi .gk-tplbtn{display:inline-grid;gap:0;text-align:left;border:0;border-radius:10px!important;background:var(--ink);color:#FFFFFF!important;padding:8px 14px;box-shadow:0 3px 0 var(--ink-d);min-height:44px;font-family:var(--body)}
#gachi .gk-tplbtn b{font-size:14px}#gachi .gk-tplbtn small{font-size:12px;font-family:ui-monospace,Menlo,monospace;color:#E4E7F5}
#gachi .gk-tplbtn.gk-off{background:#F1ECE2;color:var(--sub)!important;box-shadow:none}
#gachi .gk-tplbtn.gk-off small{color:var(--sub)}
#gachi .gk-tplbtn:hover:not(.gk-off){background:#3A4884}
#gachi .gk-hist{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:14px 18px;overflow-x:auto}
#gachi .gk-box .gk-hist{border:0;padding:0;margin-top:12px}
#gachi .gk-hist table{border-collapse:collapse;font-size:13px;min-width:100%}
#gachi .gk-hist th,#gachi .gk-hist td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
#gachi .gk-hist thead th{font-size:12px;color:var(--sub)}
#gachi .gk-hist tbody th{font-weight:700;max-width:260px;overflow:hidden;text-overflow:ellipsis}
#gachi .gk-hist-t td,#gachi .gk-hist-t th{color:var(--sub);font-size:12px}

/* テンプレ集 */
#gachi .gk-notice{display:flex;gap:10px;align-items:baseline;padding:12px 16px;font-size:14px;line-height:1.7;border-left:4px solid var(--yel-lip);font-family:var(--body)}
#gachi .gk-notice b{white-space:nowrap;color:var(--ink);font-family:var(--round)}
#gachi .gk-tpls{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#gachi .gk-tpl{padding:12px 14px;display:grid;gap:4px;align-content:start}
#gachi .gk-tpl-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#gachi .gk-tpl-h b{font-size:15px}
#gachi .gk-tpl-m{font-size:13px;color:var(--sub);line-height:1.6;font-family:var(--body)}
#gachi .gk-tpl .gk-row{margin-top:4px}

/* PC だけ */
#gachi .gk-pc{padding:22px;display:grid;gap:10px;line-height:1.8}
#gachi .gk-pc p{color:var(--pan-sub)}

/* ===== ④ 実践：本物の道具に近い白い画面 ===== */
#gachi .gk-wtop{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 18px;border-top:4px solid var(--ink)}
#gachi .gk-wtop h1{font-size:21px}
#gachi .gk-wtop-r{display:flex;gap:10px;align-items:center}
#gachi .gk-timer{display:grid;justify-items:end;line-height:1.2}#gachi .gk-timer small{font-size:12px;color:var(--sub);font-weight:700}#gachi .gk-timer b{font-family:var(--round);font-size:20px;font-variant-numeric:tabular-nums;min-width:5.5em;text-align:right;color:var(--ink)}
#gachi .gk-again{background:var(--warn-bg);border-radius:10px!important;padding:8px 12px;color:#6E4300!important}
#gachi .gk-work{position:relative;background:transparent}
#gachi .gk-pausecover{display:none}
#gachi .gk-work.paused>:not(.gk-pausecover){filter:blur(6px);pointer-events:none;user-select:none}
#gachi .gk-work.paused .gk-pausecover{display:grid;place-content:center;gap:6px;text-align:center;position:absolute;inset:0;z-index:3;background:rgba(244,245,248,.7);color:var(--ink);border-radius:var(--r)!important}
#gachi .gk-pausecover b{font-family:var(--round);font-size:26px}
#gachi .gk-work-mail{display:grid;grid-template-columns:minmax(340px,0.85fr) 1.4fr;gap:14px;height:calc(100vh - 210px);min-height:480px}
#gachi .gk-mats{overflow:auto;display:grid;gap:10px;align-content:start;padding:2px 6px 10px 2px}
#gachi .gk-today{background:#FFFFFF;color:var(--ink);border:1px solid var(--line2);border-radius:10px!important;padding:8px 14px;font-size:14px;box-shadow:inset 4px 0 0 var(--ink)}#gachi .gk-today b{font-size:15px}
#gachi .gk-mat{background:#FFFFFF;border:1px solid var(--line2);border-radius:10px!important;padding:12px 14px;display:grid;gap:6px;font-size:14px;line-height:1.75}
#gachi .gk-mat h3{font-size:14px!important;color:var(--ink)!important;display:flex;gap:6px;align-items:center}
#gachi .gk-mat h3::before{content:"";width:6px;height:14px;border-radius:2px!important;background:var(--ink)}
#gachi .gk-mat blockquote{margin:0;background:var(--key-soft);border-radius:10px!important;padding:8px 12px;line-height:1.85}
#gachi .gk-mat-chat blockquote{background:var(--navy-soft)}
#gachi .gk-mat ul{margin:0;padding-left:20px}
#gachi .gk-from{font-size:13px;color:var(--sub);font-weight:700}
#gachi .gk-cal{border-collapse:collapse;width:100%;font-size:13px}
#gachi .gk-cal th,#gachi .gk-cal td{border:1px solid #E5DCCB;padding:5px 6px;text-align:left;vertical-align:top;line-height:1.45}
#gachi .gk-cal thead th{background:var(--navy-soft);font-size:13px}
#gachi .gk-cal tbody th{white-space:nowrap;background:#FBF8F2}
#gachi .gk-cal td.busy{background:var(--crit-bg);color:var(--crit-ink);font-weight:700}
#gachi .gk-book{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#gachi .gk-book li{display:grid;grid-template-columns:auto 1fr;gap:0 8px;font-size:13px;line-height:1.5}#gachi .gk-book li span{color:var(--sub)}#gachi .gk-book code{grid-column:1/-1;font-size:12px;color:var(--ink)}
#gachi .gk-sigmat{font-size:14px;line-height:1.6}
#gachi .gk-files{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14px}#gachi .gk-files small{margin-left:6px;font-size:12px;color:var(--sub);background:var(--soft);border-radius:4px!important;padding:0 5px}
#gachi .gk-mail{position:relative;background:#FFFFFF;border:1px solid var(--line2);border-radius:10px!important;display:flex;flex-direction:column;min-height:0;overflow:visible}
/* メール画面の見出し：道具らしい薄い灰色の帯（ゲームの紺を足さない） */
#gachi .gk-mbar{display:flex;justify-content:space-between;align-items:center;background:#F3F4F7;color:var(--ink);border-bottom:1px solid #E2E5EC;border-radius:10px 10px 0 0!important;padding:6px 10px 6px 16px;font-weight:800;font-family:var(--round)}
#gachi .gk-mbar .ghost{min-height:36px!important;padding:4px 14px!important;font-size:13px}
#gachi .gk-rf{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;border-bottom:1px solid #EFE7DA;padding:4px 14px;min-height:46px;position:relative}
#gachi .gk-rf[data-field]{grid-template-columns:96px auto 1fr}
#gachi .gk-rf>label,#gachi .gk-rfl{font-size:13px;font-weight:800;color:var(--sub)}
#gachi .gk-chips{display:flex;flex-wrap:wrap;gap:4px}
#gachi .gk-chip{display:inline-flex;align-items:center;gap:6px;background:var(--navy-soft);border-radius:6px!important;padding:2px 4px 2px 10px;font-size:13px;font-weight:700}
#gachi .gk-chip small{font-weight:400;color:var(--sub);font-size:12px}
#gachi .gk-chip button{border:0;background:rgba(46,58,110,.12);border-radius:6px!important;width:28px;height:28px;line-height:1;font-size:14px}
#gachi .gk-chip-x{background:var(--warn-bg)}
#gachi .gk-rfin{position:relative;min-width:120px}
#gachi .gk-addr,#gachi .gk-subj{width:100%;border:0;background:transparent;font:inherit;font-size:15px;padding:8px 4px;color:var(--ink);min-height:38px}
#gachi .gk-addr:focus,#gachi .gk-subj:focus{outline:none;background:#F7F9FD;border-radius:8px!important}
#gachi .gk-sug{position:absolute;left:0;top:100%;z-index:8;list-style:none;margin:2px 0 0;padding:4px;background:#FFFFFF;border-radius:12px!important;box-shadow:0 10px 30px rgba(18,22,36,.28);min-width:360px}
#gachi .gk-sug button{display:grid;width:100%;text-align:left;border:0;background:transparent;border-radius:8px!important;padding:6px 10px;gap:0}
#gachi .gk-sug button small{color:var(--sub);font-size:12px}
#gachi .gk-sug button.hl,#gachi .gk-sug button:hover{background:var(--navy-soft)}
#gachi .gk-bookpop{position:absolute;right:10px;top:46px;z-index:9;background:#FFFFFF;border-radius:14px!important;box-shadow:0 14px 40px rgba(18,22,36,.32);padding:10px;display:grid;gap:4px;width:min(460px,90%)}
#gachi .gk-bookpop[hidden],#gachi .gk-attpop[hidden],#gachi .gk-sug[hidden]{display:none}
#gachi .gk-bk{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px;border-bottom:1px solid var(--soft)}
#gachi .gk-bk span:first-child{display:grid;font-size:14px}#gachi .gk-bk small{font-size:12px;color:var(--sub)}
#gachi .gk-bk-b{display:flex;gap:4px}
#gachi .gk-bookpop .gk-link{justify-self:end;margin-top:4px}
#gachi .gk-rf-att{grid-template-columns:96px auto 1fr}
#gachi .gk-attwrap{position:relative;justify-self:start}
#gachi .gk-attpop{position:absolute;left:0;top:100%;z-index:8;list-style:none;margin:4px 0 0;padding:6px;background:#FFFFFF;border-radius:12px!important;box-shadow:0 10px 30px rgba(18,22,36,.28);min-width:320px}
#gachi .gk-attpop button{width:100%;text-align:left;border:0;background:transparent;border-radius:8px!important;padding:8px 10px;font-size:14px}#gachi .gk-attpop button:hover{background:var(--navy-soft)}
#gachi .gk-body{flex:1;min-height:200px;border:0;resize:none;padding:14px 16px;font:inherit;font-size:15px;line-height:1.85;color:var(--ink);background:#FFFFFF;background-image:linear-gradient(to right,transparent calc(16px + 35em),rgba(46,58,110,.06) calc(16px + 35em),rgba(46,58,110,.06) calc(16px + 35em + 1px),transparent calc(16px + 35em + 1px))}
#gachi .gk-body:focus{outline:none;box-shadow:inset 0 0 0 2px var(--navy-soft)}
#gachi .gk-mfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid #EFE7DA}
/* メール画面の中の「送信」：道具のボタン（紺）。上の帯の黄色と重ねない */
#gachi#gachi .gk-mfoot button.primary{background:var(--ink)!important;color:#FFFFFF!important;box-shadow:0 3px 0 var(--ink-d)!important;border-radius:10px!important}
#gachi#gachi .gk-mfoot button.primary:hover{background:#3A4884!important}

/* ミニ作業 */
#gachi .gk-mini-w{display:grid;gap:12px}
#gachi .gk-lead2{background:#FFFFFF;border-radius:14px!important;box-shadow:var(--sh);padding:12px 16px;font-size:15px;line-height:1.8}
#gachi .gk-mitem{background:#FFFFFF;border-radius:14px!important;box-shadow:var(--sh);padding:14px 16px;display:grid;gap:8px}
#gachi .gk-mitem h3{font-size:15px!important;color:var(--ink)!important}
#gachi .gk-src{background:#F6F1E8;border-radius:10px!important;padding:8px 12px;font-size:15px;line-height:1.8;color:#3D4466}
#gachi .gk-src2{font-size:14px;color:var(--sub);line-height:1.7}
#gachi .gk-mini-w textarea,#gachi .gk-mini-w input[type="text"]{width:100%;border:2px solid var(--line);border-radius:12px!important;padding:10px 12px;font:inherit;font-size:15px;line-height:1.8;color:var(--ink);background:#FFFFFF;resize:vertical}
#gachi .gk-mini-w textarea:focus,#gachi .gk-mini-w input[type="text"]:focus{border-color:var(--ink);outline:none}
#gachi .gk-mcols{display:grid;grid-template-columns:1fr 1.25fr;gap:14px;align-items:start}
#gachi .gk-mref{display:grid;gap:10px}
#gachi .gk-pre-src{margin:0;white-space:pre-wrap;font:inherit;font-size:15px;line-height:1.85;background:#F6F1E8;border-radius:10px!important;padding:10px 12px}
#gachi .gk-medit{background:#FFFFFF;border-radius:14px!important;box-shadow:var(--sh);padding:14px 16px;display:grid;gap:8px}
#gachi .gk-medit label{font-weight:800;font-size:13px;color:var(--sub)}
#gachi .gk-medit .gk-link{justify-self:start}
#gachi .gk-filein{display:flex;gap:8px;align-items:center}
#gachi .gk-assign{border-collapse:collapse;width:100%;font-size:15px}
#gachi .gk-assign th,#gachi .gk-assign td{padding:6px 8px;border-bottom:1px solid var(--soft);text-align:center}
#gachi .gk-assign tbody th{text-align:left;font-weight:700}
#gachi .gk-assign thead th{font-size:13px;color:var(--sub)}
#gachi .gk-radio{display:inline-grid;place-items:center;width:44px;height:40px;cursor:pointer}
#gachi .gk-radio input{width:20px;height:20px;accent-color:var(--ink);cursor:pointer}
#gachi .gk-order{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#gachi .gk-opart{display:flex;gap:12px;align-items:center;background:#FFFFFF;border-radius:14px!important;box-shadow:var(--sh);padding:10px 12px}
#gachi .gk-onum{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%!important;background:var(--ink);color:#FFFFFF;font-weight:800;font-family:var(--round);flex:none}
#gachi .gk-otext{flex:1;font-size:15px;line-height:1.75;display:grid;gap:4px}
#gachi .gk-otext textarea{min-height:90px}
#gachi .gk-otag{font-size:12px;color:var(--sub);font-weight:700}
#gachi .gk-sendscr{background:#FFFFFF;border-radius:14px!important;box-shadow:var(--sh);overflow:hidden;max-width:900px}
#gachi .gk-ss-h{display:flex;justify-content:space-between;align-items:center;background:#F3F4F7;color:var(--ink);border-bottom:1px solid #E2E5EC;padding:10px 16px;font-weight:800}#gachi .gk-ss-h .gk-note{color:var(--sub)}
#gachi .gk-ss-row{display:flex;align-items:center;gap:10px;border-bottom:1px solid #EFE7DA;padding:6px 16px}#gachi .gk-ss-row>span{width:52px;font-size:13px;font-weight:800;color:var(--sub)}
#gachi .gk-ss-body{padding:14px 18px;font-size:15px;line-height:2.1}
#gachi .gk-spot{border:0;background:transparent;border-radius:6px!important;padding:1px 4px;font-size:15px;line-height:1.6;box-shadow:inset 0 -2px 0 rgba(46,58,110,.22)}
#gachi .gk-spot:hover{background:var(--navy-soft)}
#gachi .gk-spot.gk-is-on{background:rgba(194,58,58,.10);box-shadow:inset 0 0 0 2px var(--crit);color:var(--crit-ink);font-weight:700}
#gachi .gk-inbox{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#gachi .gk-inbox li{display:flex;gap:10px;align-items:flex-start;background:#FFFFFF;border-radius:12px!important;box-shadow:0 2px 0 rgba(0,0,0,.14);padding:8px 12px}
#gachi .gk-inbox li>div{flex:1;min-width:0}
#gachi .gk-inbox li.gk-is-on{box-shadow:inset 4px 0 0 var(--crit),0 2px 0 rgba(0,0,0,.14)}
#gachi .gk-flag{border:0;background:var(--soft);border-radius:10px!important;width:44px;height:44px;font-size:18px;flex:none}
#gachi .gk-ib-h{display:flex;justify-content:space-between;gap:8px;font-size:13px}#gachi .gk-ib-h span{color:var(--sub)}
#gachi .gk-ib-s{font-weight:700;font-size:15px}#gachi .gk-ib-b{font-size:13px;color:var(--sub)}

/* ===== ⑤ 判定 ===== */
#gachi .gk-verdict{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px 20px}
#gachi .gk-verdict:focus{outline:none}
#gachi .gk-v-big{display:grid;justify-items:center;border-radius:12px!important;padding:8px 18px;min-width:120px;color:#FFFFFF}
#gachi .gk-v-big small{font-size:12px;font-weight:800}
#gachi .gk-v-big b{font-family:var(--round);font-size:30px;line-height:1.2}
#gachi .gk-v-ok .gk-v-big{background:var(--good)}#gachi .gk-v-near .gk-v-big{background:var(--warn)}#gachi .gk-v-ng .gk-v-big{background:var(--crit)}
#gachi .gk-v-ok{border-top:4px solid var(--good)}#gachi .gk-v-near{border-top:4px solid var(--warn)}#gachi .gk-v-ng{border-top:4px solid var(--crit)}
#gachi .gk-v-txt p{font-size:15px;line-height:1.7;font-family:var(--body)}
#gachi .gk-v-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px!important;color:var(--sub);font-weight:700;margin-top:4px!important}
#gachi .gk-v-act{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* 初めて合格：進んだ！（バーが +1 伸びる） */
#gachi .gk-up{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:12px 18px;border-left:4px solid var(--good)}
#gachi .gk-up-k{font-size:18px;font-weight:800;color:var(--good-ink);font-family:var(--round)}
#gachi .gk-up-t{font-size:15px;font-family:var(--body)}#gachi .gk-up-t b{font-size:18px;color:var(--ink);font-family:var(--round)}
#gachi .gk-up-bar{flex:1;min-width:160px;height:10px}
#gachi .gk-up-bar i{width:var(--to);animation:gkup .9s ease-out .2s both}
@keyframes gkup{from{width:var(--from)}to{width:var(--to)}}
#gachi .gk-res{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;align-items:start}
#gachi .gk-res-l{position:sticky;top:84px;background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:16px 18px;max-height:calc(100vh - 110px);overflow:auto}
#gachi .gk-res-r{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:16px 18px;min-width:0}
#gachi .gk-sent{border:1px solid #EAE1D2;border-radius:12px!important;overflow:hidden}
#gachi .gk-sent-h{background:#FBF8F2;border-bottom:1px solid #EAE1D2}
#gachi .gk-sr-row{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;padding:6px 12px;border-bottom:1px solid #F1EADE;font-size:14px}
#gachi .gk-sr-row:last-child{border-bottom:0}
#gachi .gk-sr-row>span:first-child{font-weight:800;color:var(--sub);font-size:13px}
#gachi .gk-sr-row p{word-break:break-all}
#gachi .gk-fbad{box-shadow:inset 0 0 0 2px var(--crit);background:var(--crit-bg)!important;border-radius:8px!important}
/* 赤ペンの印（番号）：未達と同じ赤に白い数字 */
#gachi :is(.gk-fmark,.gk-pen-n,.gk-ins sup){display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:999px!important;background:var(--crit);color:#FFFFFF!important;font-size:12px;font-weight:800;font-family:var(--round);line-height:1}
#gachi .gk-pen-n{vertical-align:.5em;margin:0 1px}
#gachi .gk-sent-b{padding:14px 16px;font-size:15px;line-height:2;word-break:break-word}
#gachi .gk-pen{background:rgba(194,58,58,.10);box-shadow:inset 0 -2px 0 var(--crit);color:inherit;border-radius:2px!important}
#gachi .gk-ins{display:inline-flex;align-items:center;gap:3px;color:var(--crit-ink);font-size:12px;font-weight:800;border:1.5px dashed var(--crit);border-radius:6px!important;padding:0 6px 0 3px;margin:0 3px;vertical-align:.1em;line-height:1.6;background:#FFFFFF}
#gachi .gk-ins::before{content:"∧";font-weight:900}
#gachi .gk-hl{outline:3px solid var(--yel-lip);outline-offset:2px}
#gachi .gk-ans-item{border-radius:12px!important;padding:10px 12px;margin-bottom:8px;background:#FBF8F2}
#gachi .gk-ans-item h3{font-size:14px!important;display:flex;gap:8px;align-items:center;margin-bottom:4px!important}
#gachi .gk-ans-item .gk-sent-b{padding:6px 2px}
#gachi .gk-spotres{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#gachi .gk-spotres li{display:grid;grid-template-columns:64px 1fr auto auto;gap:8px;align-items:center;font-size:14px;padding:6px 10px;border-radius:8px!important;background:#FBF8F2}
#gachi .gk-spotres li>span{font-size:12px;font-weight:800;color:var(--sub)}
#gachi .gk-spotres em{font-style:normal;font-size:12px;color:var(--sub)}
#gachi .gk-spotres li.picked{background:#F2F4FA}
#gachi .gk-order-ro .gk-opart{box-shadow:none;background:#FBF8F2}
#gachi .gk-vps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#gachi .gk-vp{border-radius:12px!important;padding:10px 12px;display:grid;gap:6px;background:#FBF8F2;position:relative}
#gachi .gk-vp-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#gachi .gk-vp-h b{font-size:15px}
#gachi .gk-vp-id{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%!important;background:var(--navy-soft);color:var(--ink);font-weight:800;font-size:12px;font-family:var(--round)}
#gachi .gk-vp-ok{background:#F6FBF8;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 12px}
#gachi .gk-vp-ok .gk-vp-h{grid-column:1/-1}
#gachi .gk-vp-ok .gk-flagbtn{align-self:end}
#gachi .gk-vp-near{background:#FFFAF0;box-shadow:inset 4px 0 0 var(--warn)}
#gachi .gk-vp-ng{background:#FFF6F5;box-shadow:inset 4px 0 0 var(--crit)}
#gachi .gk-vp-c{font-size:13px;line-height:1.6;color:#2F5A43}
#gachi .gk-rp{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0;font-size:14px;line-height:1.7}
#gachi .gk-rp dt{font-weight:800;color:var(--crit-ink);white-space:nowrap;font-size:13px;padding-top:1px}
#gachi .gk-rp dd{margin:0}
#gachi .gk-pin{border:0;background:var(--crit);color:#FFFFFF!important;border-radius:6px!important;padding:1px 10px;font-size:12px;font-weight:800;min-height:28px;margin-left:auto}
#gachi .gk-flagbtn{justify-self:end;border:0;background:transparent;color:var(--sub);font-size:12px;text-decoration:underline;text-underline-offset:2px;padding:0 2px;min-height:28px}
#gachi .gk-flagbtn:disabled{text-decoration:none;color:var(--good-ink)}
#gachi .gk-recs,#gachi .gk-self{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#gachi .gk-recs li{display:flex;gap:8px;font-size:14px;line-height:1.6;padding:4px 6px;border-radius:8px!important}
#gachi .gk-recs li>span{width:16px;font-weight:800;color:var(--sub)}#gachi .gk-recs li.gk-is-ok>span{color:var(--good)}
#gachi .gk-recs li div{display:grid}#gachi .gk-recs small{color:var(--sub);font-size:13px}
#gachi .gk-self li label{display:flex;gap:8px;font-size:14px;align-items:center;cursor:pointer;min-height:36px}
#gachi .gk-self input{width:18px;height:18px;accent-color:var(--ink)}

/* ===== わたしのスキル（me.js） ===== */
#gachi .gk-me-head{grid-template-columns:1fr auto;align-items:end}
#gachi .gk-me{background:#FFFFFF;border:1px solid var(--line2);border-radius:var(--r)!important;padding:20px 22px;display:grid;gap:10px}
#gachi .gk-me-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
#gachi .gk-me-n{display:grid;gap:6px;background:var(--tile);border-radius:12px!important;padding:14px 16px}
#gachi .gk-me-n small{font-size:13px;font-weight:700;color:var(--sub)}
#gachi .gk-me-n b{font-family:var(--round);font-size:34px;line-height:1.1;color:var(--ink)}#gachi .gk-me-n b span{font-size:16px;color:var(--sub)}
#gachi .gk-me-n em{font-style:normal;font-size:13px;color:var(--sub)}
#gachi .gk-me-lv{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#gachi .gk-me-lv li{display:grid;grid-template-columns:150px 1fr 130px;gap:12px;align-items:center;font-size:14px}
#gachi .gk-me-lv .gk-bar{height:12px}
#gachi .gk-me-lv b{font-family:var(--round);font-size:18px;text-align:right}#gachi .gk-me-lv b span{font-size:13px;color:var(--sub)}
#gachi .gk-me-lvn{font-weight:700}
#gachi .gk-me-sk{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#gachi .gk-me-skb{width:100%;height:100%;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;text-align:left;padding:10px 12px;border:0;border-radius:10px!important;background:#FFFFFF;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
#gachi .gk-me-skb b{font-size:14px;font-family:var(--body)}#gachi .gk-me-skb small{grid-column:1/-1;font-size:12px;color:var(--sub)}
#gachi .gk-me-pips{display:flex;gap:3px}#gachi .gk-me-pips i{width:12px;height:12px;border-radius:50%!important;background:var(--line2)}#gachi .gk-me-pips i.on{background:var(--good)}
#gachi :is(.gk-me-start,.gk-me-can,.gk-me-good) .gk-me-skb{box-shadow:inset 4px 0 0 var(--good),inset 0 0 0 1px var(--line2)}
#gachi .gk-me-good .gk-me-skb{background:#F2FAF5}
#gachi .gk-me-lock .gk-me-skb{background:var(--tile);box-shadow:inset 0 0 0 1px #DDE0E8;color:#4F556C}
#gachi .gk-me-skb:hover{background:#F7F9FD}
#gachi .gk-me-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
#gachi .gk-me-list li{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:14px;padding:6px 8px;border-radius:8px!important;background:var(--tile)}
#gachi .gk-me-empty{border-top:4px solid var(--yel-lip)}
#gachi .gk-mini-map{display:grid;grid-template-columns:auto repeat(4,1fr);gap:3px;align-items:center;margin-bottom:6px}
#gachi .gk-mini-map i{height:16px;border-radius:4px!important}
#gachi .gk-mm-a{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--sub);padding-right:6px}
#gachi .gk-mm-x{background:transparent}

/* ---------- 動き（短く。減らす設定ではなくす） ---------- */
@media (prefers-reduced-motion:reduce){
  #gachi .flash{animation:none;outline:3px solid var(--yel-lip)}
  #gachi .gk-up-bar i{animation:none}
  #gachi :is(.gk-door,button.primary){transition:none}
}

/* ---------- 幅・高さ ---------- */
@media (max-width:1300px){
  #gachi .gk-work-mail{grid-template-columns:minmax(320px,0.8fr) 1.3fr}
  #gachi .gk-areas{grid-template-columns:repeat(3,1fr)}
  #gachi .gk-me-sk{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1100px){
  #gachi .gk-hero{grid-template-columns:1fr}#gachi .gk-two,#gachi .gk-two-7,#gachi .gk-res,#gachi .gk-exs,#gachi .gk-mcols{grid-template-columns:1fr}
  #gachi .gk-res-l{position:static;max-height:none}#gachi .gk-sits,#gachi .gk-tpls{grid-template-columns:1fr}
  #gachi .gk-skill-on{grid-template-columns:1fr}#gachi .gk-shelf{grid-template-columns:1fr 1fr}
}
@media (max-height:760px){ #gachi .gk-work-mail{height:calc(100vh - 190px)} #gachi h1{font-size:24px} #gachi .gk-hero h1{font-size:28px} #gachi .gk-wtop{padding:8px 16px} #gachi .gk-wtop h1{font-size:19px} }
@media (max-height:820px){
  #gachi .gk-rf{min-height:38px;padding:1px 14px}
  #gachi .gk-addr,#gachi .gk-subj{min-height:32px;padding:4px}
  #gachi .gk-mbar{padding:4px 10px 4px 16px}
  #gachi .gk-body{min-height:120px}
  #gachi .gk-mfoot{padding:6px 14px}
}
#gachi .gk-mini-2 .gk-mcols>div:last-child{position:sticky;top:84px}
@media (max-width:700px){ #gachi .fx-who{display:none} }

/* ---------- 印刷 ---------- */
@media print{
  /* 型・チェックリスト */
  html.gk-print body>*:not(#gachi){display:none!important}
  html.gk-print #gachi{position:static!important;background:#FFFFFF!important;overflow:visible!important;color:#000}
  html.gk-print #gachi .fx-top,html.gk-print #gachi .fx-view>*:not(.gk-box):not(.gk-ubody),html.gk-print #gachi .gk-ubody .gk-box>*:not(.gk-cardsheet),html.gk-print #gachi .gk-box>*:not(.gk-cardsheet),html.gk-print .gk-next{display:none!important}
  html.gk-print #gachi .gk-box{box-shadow:none!important}
  html.gk-print .gk-cardsheet{box-shadow:none!important;border:2px solid #2E3A6E;max-width:none}
  /* わたしのスキル：見出しとまとめの1枚だけを A4 に */
  @page{size:A4;margin:14mm}
  html.gk-print-me body>*:not(#gachi){display:none!important}
  html.gk-print-me #gachi{position:static!important;background:#FFFFFF!important;overflow:visible!important}
  html.gk-print-me #gachi .fx-top,html.gk-print-me #gachi .fx-view>*:not(.gk-me-head):not(.gk-me),html.gk-print-me #gachi .gk-me-head .gk-row,html.gk-print-me #gachi .gk-me-head .gk-lead{display:none!important}
  html.gk-print-me #gachi .gk-me-head{background:#FFFFFF!important;color:#2E3A6E!important;box-shadow:none!important;border:0!important;border-bottom:3px solid #C8436A!important;border-radius:0!important;padding:0 0 6px!important}
  html.gk-print-me #gachi .gk-me-head h1::after{content:"　新卒クエスト ガチ研修モード";font-size:14px;font-weight:700;color:#555B78}
  html.gk-print-me #gachi .gk-me{box-shadow:none!important;padding:8px 0!important}
  html.gk-print-me #gachi .gk-me-sk{grid-template-columns:repeat(3,1fr)}
  html.gk-print-me #gachi *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* スキルから選ぶ：単元の名前が主役（記号は小さく右へ）、マップは遊べるマスを目立たせる（代表 11-06） */
#gachi .gk-urow .gk-urow-b{grid-template-columns:1fr auto auto auto}
#gachi .gk-urow .gk-uname{order:-1;font-size:16px;font-weight:700}
#gachi .gk-urow .gk-uid{background:none;color:var(--sub);font-weight:500;padding:0}
#gachi .gk-cell-open{box-shadow:inset 0 0 0 2px var(--ink);color:var(--ink)}
#gachi .gk-cell-open>small{color:var(--ink)}
#gachi .gk-cell-soon{color:#5F6478}
#gachi .gk-cell-soon>small{font-weight:500}