/* ============================================
 * Crypto Emoji Translator - Stylesheet
 * 絵文字暗号変換ツール スタイルシート
 * ============================================ */

/* ============================================
 * CSS Variables - Color Theme
 * カラーテーマ変数定義
 * ============================================
 * デフォルト: ダークブルーテーマ
 * 変数を使用することで、テーマ切り替えを実現
 */
:root{
  --bg:#0b0c10;
  --fg:#1f2833;
  --card:#141820;
  --text:#e0e0e0;
  --muted:#9aa4af;
  --accent:#4fc3f7;
  --accent2:#81c784;
  --border:#2a3542;
  --success:#81c784;
  --error:#e57373;
  --warning:#ffb74d;
  --primary:#4fc3f7;
  --danger:#e57373;
}
/* ダークモード（純黒） */
body.dark-mode{
  --bg:#000000;
  --fg:#0d0d0d;
  --card:#0a0a0a;
  --text:#f5f5f5;
  --muted:#a0a0a0;
  --border:#1a1a1a;
}
/* ライトモード */
body.light-mode{
  --bg:#f5f5f5;
  --fg:#ffffff;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#666666;
  --accent:#0288d1;
  --accent2:#66bb6a;
  --border:#e0e0e0;
  --success:#66bb6a;
  --error:#e53935;
  --warning:#fb8c00;
  --primary:#0288d1;
  --danger:#e53935;
}
/* ============================================
 * Base Styles
 * 基本スタイル
 * ============================================ */
*{box-sizing:border-box}
/* スクロールバーを常に表示してレイアウトシフトを防ぐ */
html{overflow-y:scroll}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans JP',sans-serif;line-height:1.6;transition:background 0.3s ease, color 0.3s ease}
body{min-height:100vh}
a{color:var(--accent)}

/* ============================================
 * Header & Navigation
 * ヘッダーとナビゲーション
 * ============================================ */
.app-header{padding:20px 16px;border-bottom:1px solid var(--border);background:var(--bg);position:sticky;top:0;z-index:10;transition:background 0.3s ease}
.app-header h1{margin:0 0 6px 0;font-weight:700;letter-spacing:.3px;text-align:center}
.sub{color:var(--muted);font-size:.95rem;text-align:center}
.tabs{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tab{background:var(--fg);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}
.tab.active{outline:2px solid var(--accent)}
/* メインコンテンツエリア */
main{max-width:1100px;margin:24px auto;padding:0 16px}

/* ============================================
 * Tab Panels
 * タブパネル
 * ============================================ */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ============================================
 * Cards & Forms
 * カードとフォーム要素
 * ============================================ */
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:18px;box-shadow:0 1px 0 rgba(255,255,255,.02) inset}
.row{display:flex;gap:10px;align-items:center;margin:8px 0;flex-wrap:wrap}
.row:has(textarea){align-items:flex-start;gap:8px}
.row:has(textarea) label{margin-bottom:-2px}
.row label{min-width:110px;color:var(--muted)}
.row input[type="text"], .row input[type="number"], select, textarea{
  background:var(--fg);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:8px;
  flex:1;
  transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.row input[type="text"]:focus, .row input[type="number"]:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(79, 195, 247, 0.1);
}
textarea{
  width:100%;
  font-family:ui-monospace,Consolas,Monaco,monospace;
  font-size:1rem;
  line-height:1.6;
  resize:vertical;
}
#output{
  background:var(--card);
  border:2px solid var(--border);
  font-size:1.1rem;
  padding:14px;
  min-height:150px;
  color:var(--text);
  letter-spacing:0.3px;
}
.btns{gap:8px}

/* ============================================
 * Buttons
 * ボタン
 * ============================================ */
button{
  background:var(--fg);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 16px;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  transition:all 0.2s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
body.light-mode button{
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
}
button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
}
body.light-mode button:hover{
  box-shadow:0 4px 8px rgba(0,0,0,0.12);
}
button:active{
  transform:translateY(0);
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
body.light-mode button:active{
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
button.primary{
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border-color:var(--primary);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(79, 195, 247, 0.3);
}
body.light-mode button.primary{
  box-shadow:0 4px 12px rgba(2, 136, 209, 0.3);
}
button.primary:hover{
  background:linear-gradient(135deg, var(--accent), var(--primary));
  box-shadow:0 6px 16px rgba(79, 195, 247, 0.4);
}
body.light-mode button.primary:hover{
  box-shadow:0 6px 16px rgba(2, 136, 209, 0.4);
}
button.secondary{
  background:var(--card);
  border-color:var(--border);
  color:var(--text);
}
button.danger{
  background:linear-gradient(135deg, var(--danger), var(--error));
  border-color:var(--danger);
  color:#fff;
  box-shadow:0 4px 12px rgba(229, 115, 115, 0.3);
}
body.light-mode button.danger{
  box-shadow:0 4px 12px rgba(229, 57, 53, 0.3);
}
button.danger:hover{
  background:linear-gradient(135deg, var(--error), var(--danger));
  box-shadow:0 6px 16px rgba(229, 115, 115, 0.4);
}
body.light-mode button.danger:hover{
  box-shadow:0 6px 16px rgba(229, 57, 53, 0.4);
}
button:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none;
}
.switches{flex-direction:column;align-items:flex-start;gap:8px}
.switches label{
  margin-right:0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s ease;
  width:100%;
}
.switches label:hover{
  background:var(--card);
  border-color:var(--accent);
}
.switches input[type="radio"],
.switches input[type="checkbox"]{
  cursor:pointer;
  width:18px;
  height:18px;
}
.panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:920px){
  .panel-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .tabs{gap:6px}
  .tab{padding:8px 10px;font-size:0.9rem}
  .app-header{padding:16px 12px}
  main{padding:0 12px}
  .card{padding:14px;margin-bottom:14px}
  .row{flex-direction:column;align-items:stretch}
  .row label{min-width:auto;margin-bottom:4px}
  button{width:100%;padding:12px}
  button.compact{width:auto;padding:8px 12px}
  .btns{flex-direction:column}
  .grid{grid-template-columns:repeat(6,1fr)}
  .morse-table{grid-template-columns:repeat(3,1fr)}
  .custommap{grid-template-columns:1fr}
  .stats{flex-direction:column;gap:8px}
  .output-header{flex-direction:row;align-items:center}
  .share-content .row{flex-direction:row}
}
@media (max-width:480px){
  .app-header h1{font-size:1.3rem}
  .sub{font-size:0.85rem}
  .grid{grid-template-columns:repeat(4,1fr);gap:4px}
  .morse-table{grid-template-columns:repeat(2,1fr)}
  .slots,.pool{grid-template-columns:repeat(4,1fr);gap:4px}
}
.emoji-preview{font-size:1.2rem;opacity:.9}
/* ============================================
 * Notifications & Alerts
 * 通知とアラート
 * ============================================ */
.note{
  color:var(--muted);
  background:var(--fg);
  border:1px dashed var(--border);
  padding:10px 12px;
  border-radius:8px;
  margin-top:8px;
  font-size:0.95rem;
}
.note.success{
  background:rgba(129, 199, 132, 0.1);
  border-color:var(--success);
  color:var(--success);
  border-style:solid;
}
.note.error{
  background:rgba(229, 115, 115, 0.1);
  border-color:var(--error);
  color:var(--error);
  border-style:solid;
}
.note.warning{
  background:rgba(255, 183, 77, 0.1);
  border-color:var(--warning);
  color:var(--warning);
  border-style:solid;
}
.note.success::before{content:"✅ "}
.note.error::before{content:"❌ "}
.note.warning::before{content:"⚠️ "}
/* ============================================
 * Visualizer Grid
 * 対応表グリッド
 * ============================================ */
.grid{display:grid;grid-template-columns:repeat(13,1fr);gap:6px}
.grid .cell{background:var(--fg);border:1px solid var(--border);border-radius:10px;padding:6px;text-align:center}
.grid .cell .k{display:block;color:var(--muted);font-size:.85rem}
.grid .cell .v{display:block;font-size:1.2rem}
.grid .cell.highlight{outline:2px solid var(--accent2)}
.morse-table{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.morse-table .cell{background:var(--fg);border:1px solid var(--border);border-radius:10px;padding:6px;text-align:center}
.mono{font-family:ui-monospace,Consolas,Monaco,monospace}
.small{font-size:.9rem;color:var(--muted)}
footer{
  background:var(--card);
  border-top:1px solid var(--border);
}
.footer{
  padding:20px;
  text-align:center;
  color:var(--muted);
}
/* ============================================
 * Custom Map Editor
 * カスタムマップエディター
 * ============================================ */
.custommap{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.slots,.pool{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.slot,.item{
  background:var(--fg);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px;
  text-align:center;
  min-height:46px;
  transition:all 0.2s ease;
}
.slot{
  position:relative;
}
.slot.drag-over{
  background:var(--card);
  border-color:var(--accent);
  border-style:dashed;
  box-shadow:0 0 0 3px rgba(79, 195, 247, 0.2);
}
.slot .label{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  font-weight:600;
}
.slot .emoji{
  font-size:1.4rem;
  transition:transform 0.2s ease;
}
.slot:hover .emoji{
  transform:scale(1.1);
}
.item{
  cursor:grab;
  border-width:2px;
}
.item:hover{
  background:var(--card);
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(0,0,0,0.3);
}
body.light-mode .item:hover{
  box-shadow:0 4px 8px rgba(0,0,0,0.12);
}
.item:active{
  cursor:grabbing;
  transform:scale(0.95);
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
body.light-mode .item:active{
  box-shadow:0 2px 4px rgba(0,0,0,0.08);
}
.item.dragging{
  opacity:0.5;
  transform:rotate(5deg);
}
.output-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:16px;
}
.output-header h2{
  margin:0;
  flex:1;
}
button.compact{
  padding:8px 12px;
  font-size:0.9rem;
}
.share-details{
  margin-top:20px;
  border-top:1px solid var(--border);
  padding-top:16px;
}
.share-details summary{
  cursor:pointer;
  font-weight:600;
  color:var(--accent);
  padding:8px 12px;
  border-radius:8px;
  transition:background 0.2s ease;
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
}
.share-details summary::-webkit-details-marker{
  display:none;
}
.share-details summary::before{
  content:"▶";
  display:inline-block;
  transition:transform 0.2s ease;
  font-size:0.8em;
}
.share-details[open] summary::before{
  transform:rotate(90deg);
}
.share-details summary:hover{
  background:var(--fg);
}
.share-content{
  padding:12px 0 0 0;
}
.share-help{
  color:var(--muted);
  font-size:0.9rem;
  margin:0 0 12px 0;
}
.share-content .row{
  margin:8px 0;
}
.share-content input{
  flex:1;
}
.help-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
  font-size:12px;
  font-weight:700;
  cursor:help;
  margin-left:6px;
  position:relative;
}
.help-icon:hover::after{
  content:attr(data-tooltip);
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  background:var(--card);
  color:var(--text);
  padding:8px 12px;
  border-radius:6px;
  border:1px solid var(--border);
  white-space:nowrap;
  font-size:13px;
  font-weight:400;
  box-shadow:0 4px 12px rgba(0,0,0,0.3);
  z-index:100;
  pointer-events:none;
}
.help-icon:hover::before{
  content:"";
  position:absolute;
  bottom:calc(100% + 2px);
  left:50%;
  transform:translateX(-50%);
  border:6px solid transparent;
  border-top-color:var(--card);
  z-index:100;
}
body.light-mode .help-icon:hover::after{
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.stats{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:8px;
}
.stats>div{
  background:var(--fg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 16px;
  min-width:120px;
  text-align:center;
}
.stats>div span{
  display:block;
  font-size:1.5rem;
  font-weight:700;
  color:var(--accent);
  margin-top:4px;
}
.practice-q{
  background:var(--fg);
  border:2px solid var(--border);
  border-radius:8px;
  padding:20px;
  margin:16px 0;
  font-size:1.3rem;
  text-align:center;
  min-height:80px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:8px;
}
/* ============================================
 * Learn Tab - Accordion
 * 座学タブ - アコーディオン
 * ============================================ */
.learn-section{
  background:var(--fg);
  border:1px solid var(--border);
  border-radius:10px;
  margin-bottom:12px;
  overflow:hidden;
}
.learn-section summary{
  cursor:pointer;
  font-weight:600;
  font-size:1.05rem;
  padding:14px 16px;
  background:var(--fg);
  transition:background 0.2s ease;
  list-style:none;
  user-select:none;
}
.learn-section summary::-webkit-details-marker{
  display:none;
}
.learn-section summary::before{
  content:"▶";
  display:inline-block;
  margin-right:8px;
  transition:transform 0.2s ease;
  font-size:0.8em;
  color:var(--accent);
}
.learn-section[open] summary::before{
  transform:rotate(90deg);
}
.learn-section summary:hover{
  background:var(--card);
}
.learn-content{
  padding:16px 20px;
  background:var(--card);
  border-top:1px solid var(--border);
}
.learn-content h3{
  margin:12px 0 8px 0;
  font-size:1rem;
  color:var(--accent);
}
.learn-content h3:first-child{
  margin-top:0;
}
.learn-content ul, .learn-content ol{
  margin:8px 0;
  padding-left:24px;
}
.learn-content li{
  margin:6px 0;
  line-height:1.7;
}
.learn-content p{
  margin:12px 0;
  line-height:1.7;
}
.learn-content code{
  background:var(--fg);
  padding:2px 6px;
  border-radius:4px;
  font-family:ui-monospace,Consolas,Monaco,monospace;
  font-size:0.9em;
}

/* ============================================
 * Toast Notification
 * トースト通知
 * ============================================
 * コピー成功時などに表示される一時通知
 * アニメーションで右からスライドイン、3秒後にフェードアウト
 */
.toast{
  position:fixed;
  top:80px;
  right:20px;
  background:var(--card);
  border:1px solid var(--success);
  border-radius:10px;
  padding:12px 20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  z-index:1000;
  animation:slideIn 0.3s ease, fadeOut 0.3s ease 2.7s;
  color:var(--success);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:8px;
}
body.light-mode .toast{
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
}
@keyframes slideIn{
  from{
    transform:translateX(400px);
    opacity:0;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}
@keyframes fadeOut{
  to{
    opacity:0;
    transform:translateX(400px);
  }
}