:root{
  /* LiberCraft ブランドカラー（ロゴ＋社内スライドマスター準拠） */
  --navy:#2C4183;      /* プライマリ・ネイビー */
  --navy-2:#3360B1;    /* セカンダリ・ブルー */
  --accent:#30A0D0;    /* ロゴのシアン（アクセント） */
  --pink:#ff3d8b;      /* 寸法ハイライト（個別枠）用の差し色 */
  --bg:#0d1017;
  --panel:#151926;
  --line:#283047;
  --text:#e8ecf4;
  --muted:#8b93a7;
}
*{box-sizing:border-box;}
[hidden]{display:none!important;}
html,body{margin:0;height:100%;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%,#1b2240 0,var(--bg) 60%),var(--bg);
  color:var(--text);
  display:flex;flex-direction:column;height:100vh;overflow:hidden;
}
/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 26px;background:linear-gradient(90deg,var(--navy),var(--navy-2));
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:16px;}
.title{font-size:21px;font-weight:700;letter-spacing:.04em;color:#fff;}
.tagline{color:#bcd3ee;font-size:13px;}
.brand-right{display:flex;flex-direction:row;align-items:center;gap:14px;}
.brand-logo{height:34px;width:auto;display:block;opacity:.97;}
.demo-note{font-size:11.5px;color:#a8b6d2;white-space:nowrap;line-height:1.2;}
.demo-note b{color:#d6e0f2;font-weight:700;}
.badge{
  font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--navy);
  background:var(--accent);padding:4px 10px;border-radius:4px;
}
/* ---- sample selector ---- */
.samples{
  display:flex;gap:10px;padding:12px 26px;background:#11131c;
  border-bottom:1px solid var(--line);overflow-x:auto;
}
.sample-chip{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:6px 12px 6px 6px;transition:.15s;white-space:nowrap;
}
.sample-chip img{width:54px;height:36px;object-fit:cover;border-radius:6px;background:#fff;}
.sample-chip .nm{font-size:13px;}
.sample-chip .cls{font-size:11px;color:var(--muted);}
.sample-chip:hover{border-color:var(--navy-2);}
.sample-chip.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
/* ---- stage ---- */
.stage{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:16px 26px;min-height:0;}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
.panel-head{
  display:flex;align-items:center;gap:8px;padding:10px 14px;
  font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);
}
.panel-head .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
/* 右パネルのタブ */
.tabs{display:flex;gap:6px;}
.tab{
  font-size:12px;color:var(--muted);background:transparent;cursor:pointer;
  border:1px solid var(--line);border-radius:7px;padding:4px 12px;transition:.15s;
}
.tab:hover{color:var(--text);}
.tab.active{color:#06121a;background:var(--accent);border-color:var(--accent);font-weight:700;}
/* drawing */
.drawing-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:12px;min-height:0;}
.drawing-wrap img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:#fff;}
/* 注釈レイヤーは画像の実表示領域にJSで一致させる（object-fit:contain のレターボックス対策） */
.anno-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;}
.anno{
  position:absolute;border:2px solid var(--pink);border-radius:4px;
  background:rgba(255,61,139,.10);opacity:0;transform:scale(.9);
  transition:opacity .25s ease,transform .25s ease;
}
.anno.show{opacity:1;transform:scale(1);}
.anno .tag{
  position:absolute;top:-22px;left:-2px;white-space:nowrap;
  background:var(--pink);color:#fff;font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:4px;
}
.anno .tag.below{top:auto;bottom:-22px;}
/* 寸法抽出：形状寸法のラベルは図面に小さく表示（値が見える）。長いものは省略表示。
   ホバーで全文＋手前に。表題欄・一般公差表・注記は図面に出さず右パネルのみ（app.js boxOnDrawing）。 */
.anno.dim{border-width:1.5px;border-radius:3px;background:rgba(255,61,139,.14);pointer-events:auto;cursor:help;}
.anno.dim:hover{z-index:30;background:rgba(255,61,139,.28);box-shadow:0 0 0 1px var(--pink);}
.anno.dim .tag{
  display:block;font-size:9px;line-height:1.15;padding:1px 4px;top:-15px;border-radius:3px;font-weight:600;
  white-space:nowrap;max-width:120px;overflow:hidden;text-overflow:ellipsis;
}
.anno.dim .tag.below{top:auto;bottom:-15px;}
.anno.dim:hover .tag{max-width:none;overflow:visible;font-size:10px;z-index:31;}
/* 表題欄・一般公差表などの「まとめ枠」（密集領域を1枠で可視化） */
.anno.region{border:2px dashed var(--accent);border-radius:5px;background:rgba(0,194,255,.08);}
.anno.region .tag{
  display:block;font-size:9px;line-height:1.2;padding:1px 5px;top:-16px;border-radius:3px;font-weight:700;
  background:var(--accent);color:#06121a;white-space:nowrap;
}
/* 3D化対象セグメント（機能1の検出結果・シアン） */
.segment{
  position:absolute;border:2.5px dashed var(--accent);border-radius:6px;
  background:rgba(0,194,255,.12);opacity:0;transform:scale(.96);
  box-shadow:0 0 0 9999px rgba(8,10,18,.35);
  transition:opacity .3s ease,transform .3s ease;
}
.segment.show{opacity:1;transform:scale(1);}
.segment .tag{
  position:absolute;top:-24px;left:-2px;white-space:nowrap;
  background:var(--accent);color:#06121a;font-size:12px;font-weight:700;
  padding:3px 9px;border-radius:5px;
}
.segment .scan{
  position:absolute;left:0;right:0;height:3px;top:0;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  animation:scan 1.1s ease-in-out 2;
}
@keyframes scan{0%{top:0;opacity:.2}50%{opacity:1}100%{top:100%;opacity:.2}}
/* model */
.model-wrap{position:relative;flex:1;min-height:0;background:
  radial-gradient(600px 300px at 50% 30%,#1c2233 0,#0f1219 70%);}
model-viewer{width:100%;height:100%;--poster-color:transparent;background:transparent;}
/* 抽出結果リスト */
.result-list{position:absolute;inset:0;overflow-y:auto;padding:16px 18px;}
.result-list .rl-head{font-size:13px;color:var(--muted);margin:0 0 12px;}
.result-list .rl-head b{color:var(--accent);font-size:20px;}
.result-list .rl-group{margin-bottom:14px;}
.result-list .rl-group h4{
  font-size:11px;letter-spacing:.08em;color:var(--muted);
  margin:0 0 6px;border-bottom:1px solid var(--line);padding-bottom:4px;
}
.result-list .rl-items{display:flex;flex-wrap:wrap;gap:6px;}
.result-list .rl-chip{
  font-size:12px;color:var(--text);background:#10131d;
  border:1px solid var(--line);border-radius:6px;padding:4px 9px;
  opacity:0;transform:translateY(4px);transition:.2s;
}
.result-list .rl-chip.show{opacity:1;transform:none;}
.result-list .rl-chip.kv{background:rgba(0,194,255,.08);border-color:#1f3a4a;}
.model-placeholder,.loading{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;color:var(--muted);
}
.ph-icon{font-size:54px;color:var(--navy-2);}
.spinner{
  width:54px;height:54px;border-radius:50%;
  border:4px solid #ffffff22;border-top-color:var(--accent);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
#loadingText{color:var(--text);font-size:14px;}
/* action bar */
.actionbar{
  display:flex;align-items:center;gap:12px;padding:14px 26px;
  background:#11131c;border-top:1px solid var(--line);
}
.btn{
  font-size:14px;font-weight:600;color:var(--text);cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 18px;transition:.15s;
}
.btn:hover:not(:disabled){border-color:var(--navy-2);}
.btn-step{background:linear-gradient(90deg,#0b7,#0bd);border-color:#0bd;color:#06121a;}
.btn-step:hover:not(:disabled){filter:brightness(1.1);}
.btn-primary{background:linear-gradient(90deg,var(--navy-2),#3b4bc0);border-color:#3b4bc0;}
.btn-primary:hover:not(:disabled){filter:brightness(1.12);}
.btn-ghost{background:transparent;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.sep{width:1px;height:26px;background:var(--line);}
.hint{margin-left:auto;color:var(--muted);font-size:13px;}

/* ===== モード切替ナビ（2D図面 / CAD） ===== */
.modenav{display:flex;align-items:center;gap:10px;padding:10px 26px;background:#0f1320;border-bottom:1px solid var(--line);flex-wrap:wrap;}
.mode{font-size:13px;color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:6px 14px;transition:.15s;}
.mode:hover{color:var(--text);border-color:var(--navy-2);}
.mode.active{color:#06121a;background:var(--accent);border-color:var(--accent);font-weight:700;}
.modehint{margin-left:6px;color:var(--muted);font-size:12px;}
/* CADサンプルチップのアイコン */
.cad-ic{width:54px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#10131d;color:var(--accent);font-size:20px;border:1px solid var(--line);}
/* ===== CAD: 抽出データ＆判定パネル ===== */
.data-wrap{flex:1;overflow-y:auto;padding:16px 18px;min-height:0;}
.data-empty{color:var(--muted);font-size:13px;line-height:1.7;}
.d-sec{margin-bottom:18px;}
.d-sec h4{font-size:13px;margin:0 0 8px;color:var(--text);border-bottom:1px solid var(--line);padding-bottom:6px;}
.d-sec h4 .src{color:var(--muted);font-size:11px;font-weight:400;}
.mtable{width:100%;border-collapse:collapse;font-size:12.5px;}
.mtable th{text-align:left;color:var(--muted);font-weight:600;padding:5px 8px;width:44%;vertical-align:top;}
.mtable td{padding:5px 8px;color:var(--text);}
.mtable tr:nth-child(odd){background:#10131d;}
.jgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.jcard{background:#10131d;border:1px solid var(--line);border-radius:8px;padding:9px 11px;}
.jcard.wide{grid-column:1 / -1;}
.jk{font-size:11px;color:var(--muted);margin-bottom:3px;}
.jv{font-size:13px;color:var(--text);line-height:1.5;}
.jv.big{font-size:22px;font-weight:700;color:var(--accent);}
.jv.sm{font-size:12px;}
.jv.flags{display:flex;flex-wrap:wrap;gap:6px;}
.flag{background:rgba(255,61,139,.14);border:1px solid var(--pink);color:#ffd0e2;border-radius:5px;padding:2px 8px;font-size:11px;}
.disc{color:var(--muted);font-size:11px;margin-top:10px;}

/* ===== CAD: 入力CADプレビュー（解析前） ===== */
.cad-input{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:18px;}
.cad-thumb{max-width:78%;max-height:64%;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#0f1320;}
.cad-filecard{width:min(86%,440px);background:#10131d;border:1px solid var(--line);border-radius:10px;padding:12px 14px;}
.fc-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.fc-ic{font-size:18px;}
.fc-name{font-size:14px;font-weight:700;color:var(--text);word-break:break-all;}
.fc-meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--muted);}
.fc-meta b{color:var(--accent);font-weight:700;}
.fc-note{margin-top:8px;font-size:11px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line);padding-top:8px;}

/* ===== イントロ説明（ビジネスユーザー向け・タブ直下） ===== */
.intro{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:14px 26px;background:#0e1626;border-bottom:1px solid var(--line);}
.intro-main{max-width:760px;}
.intro-main h2{margin:0 0 5px;font-size:18px;font-weight:700;color:#fff;letter-spacing:.01em;}
.intro-main h2 .hi{color:var(--accent);}
.intro-main p{margin:0;font-size:14.5px;line-height:1.65;color:#c4cde0;}
.intro-steps{display:flex;gap:10px;list-style:none;margin:0;padding:0;flex-wrap:wrap;}
.intro-steps li{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text);
  background:#141b2b;border:1px solid var(--line);border-radius:8px;padding:7px 12px;white-space:nowrap;}
.intro-steps li b{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:50%;background:var(--accent);color:#06121a;font-size:12px;}