:root{
  --navy:#1e3a5f;--gold:#d4af37;--gold-l:#f0d060;
  --bg:#f0f4f9;--grid:#c8d4e8;--white:#fff;
  --red:#cc3333;--ok:#2d6a4f;
}
.area-transform-board-root *{box-sizing:border-box;margin:0;padding:0}

/* 修正: 画面下の空白対策。html/bodyを100%化し、ページ側の背景が
   見えないようにする（:has()はこのアプリが使われているページにのみ適用）。
   これまでvh固定値と何度も戦っていた空白問題は、ルート自体を
   position:fixed; inset:0 のフルスクリーンにすることで構造的に解消する
   （他アプリと共通のスケルトンに統一）。 */
html:has(.area-transform-board-root),
body:has(.area-transform-board-root){
  height:100%;margin:0;
}

.area-transform-board-root{
  position:fixed;inset:0;width:100%;height:100%;
  font-family:'BIZ UDGothic','Hiragino Kaku Gothic ProN','Meiryo',sans-serif;
  background:var(--bg);color:var(--navy);
  overflow:hidden;user-select:none;
  -webkit-user-select:none;touch-action:manipulation;
  z-index:9999;
}

/* ===== ヘッダー ===== */
.area-transform-board-root header{
  position:fixed;top:0;left:0;right:0;height:52px;
  background:var(--navy);color:#fff;
  display:flex;align-items:center;padding:0 16px;gap:12px;
  z-index:20;
}
.area-transform-board-root header h1{font-size:15px;font-weight:bold;white-space:nowrap}
#atb-header-msg{
  flex:1;font-size:13px;font-weight:bold;color:var(--navy);
  background:#fff;padding:6px 14px;border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
/* 修正: 作業画面（図形の変形操作画面）ではヘッダーを非表示にし、
   その分の高さを方眼エリアに回す。in-work のときだけ適用。 */
.area-transform-board-root.in-work header{display:none}

/* ===== ギャラリー画面 ===== */
#atb-gallery-screen{
  position:fixed;top:52px;left:0;right:0;bottom:0;
  overflow-y:auto;padding:24px 20px;
}
.area-transform-board-root .gallery-title{font-size:14px;font-weight:bold;margin-bottom:14px;text-align:center}
.area-transform-board-root .gallery-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:860px;margin:0 auto;
}
@media(max-width:760px){.area-transform-board-root .gallery-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.area-transform-board-root .gallery-grid{grid-template-columns:1fr}}
.area-transform-board-root .shape-card{
  background:var(--white);border:2px solid var(--grid);border-radius:14px;
  padding:10px;cursor:pointer;text-align:center;
  transition:transform .12s,border-color .12s,box-shadow .12s;
  position:relative;
}
.area-transform-board-root .shape-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 6px 16px rgba(30,58,95,0.15)}
.area-transform-board-root .shape-card svg{width:100%;height:auto;border-radius:8px;background:#fff}
.area-transform-board-root .shape-card .card-label{font-size:14px;font-weight:bold;margin-top:6px}
/* 修正: 作業済み（一度でも編集した）図形カードを金枠で強調し、
   右上にチェックマークを表示して達成感が一目でわかるようにする */
.area-transform-board-root .shape-card.worked{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-l) inset}
.area-transform-board-root .shape-card .worked-badge{
  position:absolute;top:6px;right:6px;width:22px;height:22px;
  background:var(--gold);color:var(--navy);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:bold;box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
/* 修正: ギャラリー画面の全リセットボタン */
.area-transform-board-root .gallery-reset-btn{
  display:block;margin:20px auto 4px;
  background:var(--navy);color:#fff;border:none;border-radius:999px;
  padding:8px 20px;font-size:12px;font-weight:bold;cursor:pointer;
  font-family:inherit;transition:background .12s;
}
.area-transform-board-root .gallery-reset-btn:hover{background:#16304d}

/* ===== 作業画面：フルスクリーンcanvas ===== */
#atb-work-screen{position:fixed;inset:0;display:none;overflow:hidden}
#atb-work-screen.show{display:flex}
.area-transform-board-root .canvas-wrap{
  flex:1;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px;
}
#atb-main-svg{background:var(--white);border:2px solid var(--grid);border-radius:12px;display:block;box-shadow:0 8px 24px rgba(0,0,0,0.18)}

/* ===== 右下：ツールバーの縦積みコンテナ =====
   修正: 他アプリと同じ「右下に固定したツールバーを縦に積む」スケルトンへ統一。
   JSは #atb-btn-bar / #atb-slide-bar をまとめて表示・非表示するだけなので、
   このIDと表示切替(style.display / classList.show)の仕組みは変更していない。 */
#atb-btn-bar{
  position:fixed;right:16px;bottom:20px;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.area-transform-board-root .atb-toolbar-group{
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.area-transform-board-root .bbtn{
  width:52px;height:52px;border-radius:999px;border:2px solid #dde4ef;
  font-size:20px;font-weight:bold;cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,0.25);
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s;background:#ffffff;color:var(--navy);
  font-family:inherit;
}
.area-transform-board-root .bbtn:active:not(:disabled){transform:scale(0.92)}
.area-transform-board-root .bbtn:disabled{opacity:.35;cursor:default}
.area-transform-board-root .bbtn.mode-on{background:var(--gold);border-color:var(--gold);color:var(--navy)}

/* もどす／やりなおす（アンドゥ・リドゥ）のペアボタン（縦積み） */
.area-transform-board-root .atb-btn-pair{
  flex-direction:column;border-radius:999px;overflow:hidden;
  box-shadow:0 3px 8px rgba(0,0,0,0.25);gap:0;
}
.area-transform-board-root .atb-btn-pair button{
  width:52px;height:26px;border:none;background:#fff;color:var(--navy);
  font-size:14px;cursor:pointer;font-family:inherit;
}
.area-transform-board-root .atb-btn-pair button:first-child{border-bottom:1px solid #dde4ef}
.area-transform-board-root .atb-btn-pair button:disabled{opacity:.35;cursor:default}
.area-transform-board-root .atb-btn-pair button:active:not(:disabled){background:#eef2f6}

/* ===== スライドモードのツールバー ===== */
#atb-slide-bar{
  position:fixed;right:16px;bottom:20px;z-index:10;
  display:none;flex-direction:column;align-items:center;gap:12px;
}
#atb-slide-bar.show{display:flex}
#atb-slide-num{
  background:#fff;color:var(--navy);font-size:13px;font-weight:bold;
  padding:6px 14px;border-radius:999px;box-shadow:0 3px 8px rgba(0,0,0,0.2);
  white-space:nowrap;
}

#atb-mode-badge{
  position:fixed;top:64px;left:50%;transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:12px;font-weight:bold;
  padding:4px 14px;border-radius:20px;pointer-events:none;opacity:0;
  transition:opacity .2s;z-index:50;
}
#atb-mode-badge.show{opacity:1}
/* 修正: 作業画面はヘッダー非表示になる分、バッジ位置も詰める */
.area-transform-board-root.in-work #atb-mode-badge{top:12px}

.area-transform-board-root .gl{stroke:#dce6f2;stroke-width:.5}
.area-transform-board-root .glm{stroke:#b4c6dc;stroke-width:1}

@media(max-width:480px){
  .area-transform-board-root header h1{font-size:13px}
  .area-transform-board-root .bbtn{width:44px;height:44px;font-size:17px}
  .area-transform-board-root .atb-btn-pair button{width:44px;height:22px;font-size:12px}
  #atb-btn-bar,#atb-slide-bar{right:10px;bottom:14px;gap:10px}
}