/* ==========================================================================
   言葉探し スタイルシート
   ========================================================================== */

/* 基本リセット - WordPressテーマの影響を受けないようにする */
.kotoba-container {
    font-family: 'Noto Sans JP', sans-serif;
    margin: 0 auto !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #87CEEB 0%, #98FB98 100%) !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

.kotoba-container * {
    box-sizing: border-box !important;
}

/* ========== ヘッダー部分 ========== */
.kotoba-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

.kotoba-header-inner {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: rgba(255,255,255,0.9) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    max-width: 790px !important;
}

/* 上部テキストエリア */
.kotoba-textarea-header {
    flex: 1 !important;
    height: 50px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    padding: 10px 15px !important;
    text-align: center !important;
    border: 3px solid #32CD32 !important;
    border-radius: 12px !important;
    background-color: #F0FFFF !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    resize: none !important;
}

/* 上部確定ボタン */
.kotoba-confirm-btn-header {
    width: 120px !important;
    height: 50px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #2F4F4F !important;
    border: 3px solid #FF8C00 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    flex-shrink: 0 !important;
}

.kotoba-confirm-btn-header:hover {
    background: linear-gradient(135deg, #FFA500, #FF8C00) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

.kotoba-confirm-btn-header:disabled {
    background: #CCC !important;
    border-color: #999 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ヘッダーのエラーメッセージ */
.kotoba-error-message-header {
    position: absolute !important;
    bottom: -35px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: #FF4757 !important;
    font-weight: bold !important;
    font-size: 14px !important;
    background-color: #FFE4E1 !important;
    padding: 8px 15px !important;
    border-radius: 8px !important;
    border: 2px solid #FF6B6B !important;
    white-space: nowrap !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    z-index: 100 !important;
}

.kotoba-help-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #FF69B4 !important;
    color: white !important;
    border: 3px solid #FF1493 !important;
    font-size: 24px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    flex-shrink: 0 !important;
    order: -1 !important;
}

.kotoba-help-btn:hover {
    background: #FF1493 !important;
    transform: scale(1.1) !important;
}

/* ========== モーダル ========== */
.kotoba-modal {
    display: none !important;
    position: fixed !important;
    z-index: 10000 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0,0,0,0.6) !important;
}

.kotoba-modal.kotoba-show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.kotoba-modal-content {
    background-color: #FFF !important;
    padding: 30px !important;
    border-radius: 20px !important;
    max-width: 600px !important;
    width: 90% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    animation: kotoba-slideIn 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

@keyframes kotoba-slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.kotoba-modal-content h2 {
    color: #2E8B57 !important;
    margin: 0 0 20px 0 !important;
    font-size: 28px !important;
    text-align: center !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-body {
    text-align: left !important;
    margin-bottom: 20px !important;
    color: #333 !important;
    line-height: 1.8 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-body p {
    margin: 10px 0 !important;
    font-size: 16px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-body ol,
.kotoba-modal-body ul {
    margin: 10px 0 10px 25px !important;
    padding: 0 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-body li {
    margin: 8px 0 !important;
    font-size: 15px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-note {
    font-size: 13px !important;
    color: #666 !important;
    text-align: center !important;
    margin-top: 15px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-close-btn {
    background: linear-gradient(135deg, #32CD32, #228B22) !important;
    color: white !important;
    border: none !important;
    padding: 15px 40px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-modal-close-btn:hover {
    background: linear-gradient(135deg, #228B22, #006400) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* ========== メインレイアウト（3カラム） ========== */
.kotoba-main-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr 300px !important;
    gap: 15px !important;
    align-items: flex-start !important;
    flex: 1 !important;
    overflow: hidden !important;
    max-width: 1420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
}

/* ========== 左サイドバー（コントロール） ========== */
.kotoba-left-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
}

/* ========== 中央パネル（50音表） ========== */
.kotoba-center-panel {
    background-color: rgba(255,255,255,0.9) !important;
    padding: 20px !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
}

.kotoba-char-grid {
    display: grid !important;
    grid-template-columns: repeat(10, 70px) !important;
    gap: 10px !important;
    justify-content: center !important;
}

/* ========== 右サイドバー（登録単語） ========== */
.kotoba-right-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: 300px !important;
    max-width: 300px !important;
    min-width: 300px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* セクションタイトル */
.kotoba-section-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #2E8B57 !important;
    margin-bottom: 8px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}


.kotoba-char {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    font-weight: bold !important;
    border: 3px solid #4169E1 !important;
    background-color: #E6E6FA !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: all 0.3s ease !important;
    width: 70px !important;
    height: 70px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.kotoba-char:hover {
    background-color: #DDA0DD !important;
    transform: scale(1.1) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

.kotoba-char.kotoba-used {
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    color: #2F4F4F !important;
    border-color: #FF8C00 !important;
    transform: scale(1.05) !important;
}

.kotoba-char.kotoba-duplicate {
    background: linear-gradient(135deg, #FF6B6B, #FF4757) !important;
    color: white !important;
    border-color: #FF3838 !important;
    animation: kotoba-shake 0.5s ease-in-out !important;
}

@keyframes kotoba-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ========== 右パネル（サイドバー） ========== */
.kotoba-right-panel {
    flex: 0 0 38% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.kotoba-section-title {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #2E8B57 !important;
    margin-bottom: 8px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

/* 進捗セクション */
.kotoba-progress-section {
    background-color: rgba(255,255,255,0.9) !important;
    padding: 15px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

.kotoba-progress-bar {
    width: 100% !important;
    height: 30px !important;
    background-color: #E0E0E0 !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    border: 3px solid #696969 !important;
}

.kotoba-progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #32CD32, #228B22) !important;
    border-radius: 12px !important;
    transition: width 0.5s ease, background 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: white !important;
    font-weight: bold !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    font-size: 16px !important;
}

/* 登録単語リストセクション */
.kotoba-words-section {
    background-color: rgba(255,255,255,0.9) !important;
    padding: 12px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
    flex: 1 !important;
    min-height: 400px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kotoba-words-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kotoba-empty-message {
    text-align: center !important;
    color: #999 !important;
    font-size: 14px !important;
    padding: 20px !important;
    margin: 0 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-word-item {
    background: linear-gradient(135deg, #F0F8FF, #E6F3FF) !important;
    padding: 10px 8px !important;
    border-radius: 8px !important;
    border: 2px solid #87CEEB !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.kotoba-word-item:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    transform: translateY(-2px) !important;
}

.kotoba-word-text {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #2F4F4F !important;
    flex: 1 !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.kotoba-word-count {
    font-size: 11px !important;
    color: #666 !important;
    margin-right: 4px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.kotoba-word-delete {
    background: #FF6B6B !important;
    color: white !important;
    border: none !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    flex-shrink: 0 !important;
}

.kotoba-word-delete:hover {
    background: #FF4757 !important;
    transform: scale(1.1) !important;
}

.kotoba-controls {
    display: flex !important;
    gap: 10px !important;
}

.kotoba-control-btn {
    flex: 1 !important;
    background: linear-gradient(135deg, #FF69B4, #FF1493) !important;
    color: white !important;
    border: 3px solid #FF1493 !important;
    padding: 12px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.kotoba-control-btn:hover {
    background: linear-gradient(135deg, #FF1493, #DC143C) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
}

/* ========== レスポンシブ対応 ========== */
@media screen and (max-width: 1100px) {
    .kotoba-main-layout {
        grid-template-columns: 220px 1fr 220px !important;
    }
    
    .kotoba-char-grid {
        grid-template-columns: repeat(10, 60px) !important;
        gap: 8px !important;
    }
    
    .kotoba-char {
        width: 60px !important;
        height: 60px !important;
        font-size: 26px !important;
    }
}

@media screen and (max-width: 900px) {
    .kotoba-main-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto !important;
    }
    
    .kotoba-left-sidebar {
        order: 2 !important;
    }
    
    .kotoba-center-panel {
        order: 1 !important;
    }
    
    .kotoba-right-sidebar {
        order: 3 !important;
    }
    
    .kotoba-words-section {
        min-height: 200px !important;
        max-height: 300px !important;
    }
}

@media screen and (max-width: 700px) {
    .kotoba-title {
        font-size: 28px !important;
    }
    
    .kotoba-char-grid {
        grid-template-columns: repeat(10, 50px) !important;
        gap: 6px !important;
    }
    
    .kotoba-char {
        width: 50px !important;
        height: 50px !important;
        font-size: 22px !important;
    }
}