/* ===== クラシック（PHP 時代のデザイン）: html[data-skin="classic"] のときだけ効く =====
   前の教室サイト（PHP 版, 2026-11-09 まで）の見た目: ほぼ黒の面、エメラルドの差し色、角丸、端末の書体、小さめの文字。
   この部分は手書き（tools/classic/base.css）。下の「生成」部分は tools/make_classic_css.py が style.css などから作る。 */
html[data-skin="classic"] {
  --bg: #08090a; --bg-2: #0d0f0e;
  --surface: #111412; --surface-solid: #111412; --surface-2: #171b19; --surface-3: #1e2320;
  --line: rgba(255, 255, 255, .065); --line-strong: rgba(255, 255, 255, .11); --line-soft: rgba(255, 255, 255, .045);
  --text: #f4f6f5; --ink: #f4f6f5; --muted: #9aa39e; --dim: #626b66;
  --lime: #34d399; --amber: #fbbf24; --red: #f87171; --blue: #60a5fa; --violet: #a78bfa; --magenta: #fb7185; --orange: #fb923c;
  --good: #34d399; --good-ink: #34d399; --bad: #f87171; --warn: #fbbf24;
  --accent-soft: rgba(16, 185, 129, .12); --on-accent: #03140d;
  --grad: linear-gradient(145deg, #34d399, #059669); --grad-btn: var(--hot); --grad-soft: rgba(16, 185, 129, .10);
  --glow: 0 0 0 1px rgba(52, 211, 153, .28); --hatch: none;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 16px 40px -12px rgba(0, 0, 0, .8); --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, .9);
  --radius-sm: 9px; --radius: 14px; --radius-lg: 18px; --cut: 0px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Noto Sans CJK JP', 'Yu Gothic UI', 'Meiryo', system-ui, sans-serif;
  --jp: var(--font); --display: var(--font);
}
html[data-skin="classic"] body {
  font: 400 14px/1.55 var(--font); font-feature-settings: 'cv11', 'ss01';
  background: radial-gradient(900px 500px at 12% -8%, rgba(16, 185, 129, .10), transparent 60%),
              radial-gradient(700px 400px at 100% 0%, rgba(96, 165, 250, .05), transparent 60%), var(--bg);
  background-attachment: fixed;
}
html[data-skin="classic"] ::selection { background: rgba(16, 185, 129, .35); color: inherit; }
html[data-skin="classic"] a { font-weight: 600; }
html[data-skin="classic"] h1, html[data-skin="classic"] h2, html[data-skin="classic"] h3 { font-family: var(--font); font-weight: 700; letter-spacing: -.01em; }

/* 面: うすい光沢のある角丸カード */
html[data-skin="classic"] :is(.card, .hero, .modal, .tile, .auth-card) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), transparent 40%), var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
html[data-skin="classic"] .modal { border-color: var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
html[data-skin="classic"] .card-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
html[data-skin="classic"] .card-title::before { display: none; }
html[data-skin="classic"] .card-title .ico { filter: none; opacity: 1; }
html[data-skin="classic"] .page-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
html[data-skin="classic"] .page-title::before { display: none; }
html[data-skin="classic"] .section-title { font: 700 15px var(--font); letter-spacing: -.01em; }
html[data-skin="classic"] .section-title::before { content: none; }
html[data-skin="classic"] .section-title::after { height: 1px; background: var(--line); opacity: 1; }

/* ボタン: 36px・角丸 9px・ふち付き。主ボタンはエメラルドに暗い文字 */
html[data-skin="classic"] .btn { --b: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); min-height: 36px; padding: 0 14px;
  font: 600 13px/1 var(--font); letter-spacing: normal; }
html[data-skin="classic"] .btn:hover { --b: var(--surface-3); border-color: rgba(255, 255, 255, .16); }
html[data-skin="classic"] .btn.primary { --b: var(--hot); color: var(--on-accent); border-color: transparent; font-weight: 600; }
html[data-skin="classic"] .btn.primary:hover { --b: var(--hot-2); }
html[data-skin="classic"] .btn.primary.danger { --b: var(--red); color: #1a0505; }
html[data-skin="classic"] .btn.ghost { --b: transparent; border-color: transparent; color: var(--muted); }
html[data-skin="classic"] .btn.ghost:hover { --b: var(--surface-2); color: var(--text); }
html[data-skin="classic"] .btn.big { min-height: 44px; font-size: 14px; letter-spacing: normal; }
html[data-skin="classic"] .btn.sm { min-height: 30px; padding: 0 10px; font-size: 12.5px; border-radius: 8px; }

/* 入力: 暗い面・角丸・フォーカスでエメラルドの輪 */
html[data-skin="classic"] :is(.input, .field input, .field textarea, .field select, textarea.input) {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg-2); box-shadow: none; font: 400 14px var(--font); padding: 10px 12px; }
html[data-skin="classic"] :is(.input, .field input, .field textarea, .field select):focus { border-color: var(--hot); background: var(--bg-2); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-skin="classic"] .field { font: 600 12px var(--font); letter-spacing: normal; text-transform: none; color: var(--muted); }

/* 小物 */
html[data-skin="classic"] .pill { border-radius: 6px; font: 600 11px/1.6 var(--font); letter-spacing: normal; text-transform: none; background: var(--surface-3); color: var(--muted); }
html[data-skin="classic"] .pill.good { background: var(--accent-soft); color: var(--hot-2); }
html[data-skin="classic"] .pill.bad { background: rgba(248, 113, 113, .14); color: var(--red); }
html[data-skin="classic"] .pill.accent { background: rgba(96, 165, 250, .14); color: var(--blue); }
html[data-skin="classic"] .badge { border-radius: 999px; font: 700 11px/1 var(--font); color: var(--on-accent); }
html[data-skin="classic"] .avatar { border-radius: 50%; font-family: var(--font); text-transform: none; }
html[data-skin="classic"] .online-dot { border-radius: 50%; transform: none; }
html[data-skin="classic"] .tabs { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); width: fit-content; max-width: 100%; }
html[data-skin="classic"] .tabs button { padding: 6px 14px; border-radius: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: normal; }
html[data-skin="classic"] .tabs button.on { background: var(--surface-3); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 1px 2px rgba(0, 0, 0, .4); }
html[data-skin="classic"] a.item:hover, html[data-skin="classic"] .item.click:hover { box-shadow: none; border-radius: var(--radius-sm); }
html[data-skin="classic"] .item { font-weight: 500; }
html[data-skin="classic"] .item .title { font-weight: 600; }
html[data-skin="classic"] .toast { border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); font-size: 13px; }

/* 骨組み: 左のサイドバー（240px）・番号なし・丸い選択 */
@media (min-width: 900px) {
  html[data-skin="classic"] { --nav-w: 240px; }
  html[data-skin="classic"] .nav { background: rgba(8, 9, 10, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 18px 12px; }
  html[data-skin="classic"] .nav .nav-brand { padding: 0 8px 18px; }
  html[data-skin="classic"] .nav-links a { padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; letter-spacing: normal; }
  html[data-skin="classic"] .nav-links a::after { content: none; }
  html[data-skin="classic"] .nav-links a.on { background: var(--surface-2); color: var(--text); }
  html[data-skin="classic"] .nav-links a.on::before { left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; }
  html[data-skin="classic"] .nav .nav-foot { background: transparent; border-top: 1px solid var(--line); border-radius: 0; margin: auto 0 0; padding: 12px 6px 2px; }
  html[data-skin="classic"] #main { padding: 28px 36px 56px; }
}
html[data-skin="classic"] .top { background: rgba(8, 9, 10, .85); }
html[data-skin="classic"] .top::after { display: none; }
html[data-skin="classic"] .brand-name { font: 700 15px/1 var(--font); letter-spacing: -.01em; text-transform: none; color: var(--text); }
html[data-skin="classic"] .svg-ico { stroke-linecap: round; stroke-linejoin: round; }

/* 設定のデザイン選択の見本 */
.skin-pick.skin-game i { border-radius: 0; background: linear-gradient(135deg, #ff4655 0 55%, #15181d 55%); }
.skin-pick.skin-classic i { border-radius: 50%; background: linear-gradient(145deg, #34d399, #059669); }

/* ゲーム風の飾り（英字の透かし・大きな番号・英語のラベル）は、前のサイトに無かったので出さない */
html[data-skin="classic"] .hero::before, html[data-skin="classic"] .hero::after, html[data-skin="classic"] .tile::before,
html[data-skin="classic"] .tile[data-path="/starship"]::after, html[data-skin="classic"] .tile[data-path="/starship"] .tile-txt::before { content: none; display: none; }

/* ===== 生成（tools/make_classic_css.py）: 角を切る形 → 角丸、圧縮した大文字ラベル → ふつうの文字 ===== */
/* style.css */
html[data-skin="classic"] .boot{text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .card, html[data-skin="classic"] .hero, html[data-skin="classic"] .modal{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .brand-name{text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
@media (min-width: 900px){html[data-skin="classic"] .nav-links a::after{font-stretch:normal;font-variation-settings:normal}}
@media (min-width: 900px){html[data-skin="classic"] .nav .nav-foot{clip-path:none;border-radius:var(--radius)}}
@media (min-width: 900px){html[data-skin="classic"] .nav-me-login{font-stretch:normal;font-variation-settings:normal}}
html[data-skin="classic"] .section-title::before{clip-path:none;border-radius:var(--radius-sm);font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .btn{clip-path:none;border-radius:var(--radius-sm)}
html[data-skin="classic"] .btn.big{clip-path:none;border-radius:var(--radius-sm)}
html[data-skin="classic"] .btn.sm{clip-path:none;border-radius:var(--radius-sm)}
html[data-skin="classic"] .field{text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .avatar{text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .badge{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .pill{clip-path:none;border-radius:var(--radius-sm);text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .hero::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .hero::after{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .hero .avatar{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .tile-ico{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile-txt::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .tile-go{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile[data-path="/starship"]{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile[data-path="/starship"]::before{clip-path:none;border-radius:var(--radius-sm)}
html[data-skin="classic"] .tile[data-path="/starship"]::after{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .tile[data-path="/starship"] .tile-go{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .tile[data-path="/starship"] .tile-go::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .cards-stat b{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .auth-hero::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .auth-word{text-transform:none;letter-spacing:normal;font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .auth-card{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .auth-brand::before{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .statusline{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .more-grid a{clip-path:none;border-radius:var(--radius)}
/* features/admin.css */
html[data-skin="classic"] .admin-tile{clip-path:none;border-radius:var(--radius)}
/* features/ai.css */
html[data-skin="classic"] .ai-brand-av, html[data-skin="classic"] .ai-av{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .ai-bubble{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .ai-msg.me .ai-bubble{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .ai-ex{clip-path:none;border-radius:var(--radius)}
/* features/bbs.css */
html[data-skin="classic"] .bbs-back{text-transform:none;letter-spacing:normal}
html[data-skin="classic"] .bbs-row{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .bbs-row-count b{font-stretch:normal;font-variation-settings:normal}
html[data-skin="classic"] .bbs-thead-card{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .bbs-composer{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .bbs-newpill{clip-path:none;border-radius:var(--radius)}
/* features/cards.css */
html[data-skin="classic"] .cp-panel, html[data-skin="classic"] .cp-box{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .cp-btn{clip-path:none;border-radius:var(--radius)}
/* features/chat.css */
html[data-skin="classic"] .chat-wrap .card{clip-path:none;border-radius:var(--radius)}
html[data-skin="classic"] .chat-list-head h2{text-transform:none;letter-spacing:normal}