/* static/style.css (Ryukyu Blue - Final Version with Hover Fix) */

/* 1. Variables & Global Reset */
:root {
    /* Color Palette - Ryukyu Ocean Blue */
    --primary-color: #0ea5e9;       /* Sky Blue */
    --primary-hover: #0284c7;       /* Darker Sky Blue for hover */
    --teal-color: #14b8a6;          /* Teal for register button */
    
    --accent-color: #f43f5e;        /* Rose for accents/danger */
    --warning-color: #f59e0b;       /* Amber for stars */
    --success-color: #10b981;       /* Emerald */
    --neutral-color: #64748b;       /* Slate for view-only/guest */
    
    /* Text Colors */
    --text-main: #0f172a;           /* Slate 900 */
    --text-sub: #475569;            /* Slate 600 */
    --text-on-primary: #ffffff;
    
    /* Solid Design Variables */
    --bg-body: #f0f9ff;             /* 極めて薄い青空色 (Solid) */
    --card-bg: #ffffff;             /* 完全な白 */
    --card-border: #e2e8f0;         /* 薄いグレーの境界線 */
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06); /* 控えめな影 */
    --input-bg: #f8fafc;            /* フォーム背景 (Solid) */
}

body, html {
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-main);
    background-color: var(--bg-body);
    min-height: 100vh;
}

body {
    padding-top: 100px;
}

/* 2. Logo & Headers */
#logo-banner {
    position: absolute;
    left: 25px;
    top: 20px;
    width: 360px; /* 大きく維持 */
    height: auto;
    z-index: 1000;
    filter: none;
    transition: transform 0.2s ease;
}
#logo-banner:hover {
    transform: scale(1.02);
}

@media (max-width: 600px) {
    #logo-banner {
        width: 220px;
        left: 15px;
        top: 15px;
    }
    body {
        padding-top: 90px;
    }
}

.user-header {
    display: flex;
    justify-content: flex-end; /* 右寄せ */
    align-items: center;
    gap: 15px; /* アイテム間の隙間 */
    position: relative; /* ドロップダウンの基準 */
    max-width: 900px;
    margin: 0 auto 10px;
    padding: 0 25px;
    text-align: right;
    font-size: 0.9em;
    color: #334155;
    font-weight: 600;
    text-shadow: none;
}

.main-header {
    text-align: center;
    margin-bottom: 30px;
}
.main-header h1 {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 2.2em;
    margin: 0;
    background: none;
    -webkit-text-fill-color: initial;
    display: inline-block;
}

/* 講義詳細などで使う少し小さめのタイトル */
.app-title-small {
    font-size: 1.8em !important;
}

/* 3. Solid Containers */
.container {
    max-width: 900px;
    margin: 20px auto 50px;
    padding: 40px;
    border-radius: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.auth-container {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    padding: 50px 60px;
    border-radius: 24px;
    box-sizing: border-box;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
}

.auth-container h2 {
    color: var(--text-main);
    font-weight: 700;
    margin-bottom: 30px;
}
.app-title {
    color: var(--primary-color);
    font-weight: 800;
    font-size: 2em;
    margin-bottom: 20px;
    background: none;
    -webkit-text-fill-color: initial;
    display: inline-block;
}

.login-description {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 30px;
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--text-main);
}
.login-description p { margin: 0 0 10px 0; }
.login-description p:last-child { margin-bottom: 0; }
.restriction-note {
    background: #e0f2fe;
    border: 1px solid #bae6fd;
    color: #0369a1;
    padding: 10px;
    border-radius: 12px;
    font-weight: 600;
    margin-top: 10px !important;
}
.email-highlight {
    font-family: monospace;
    font-size: 1.1em;
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    color: #0284c7;
    display: inline-block;
    margin-top: 4px;
    font-weight: bold;
    border: 1px solid #e2e8f0;
}
.password-constraint {
    font-size: 0.85em;
    color: var(--text-sub);
    line-height: 1.4;
    text-align: left;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* 4. Modern Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea, select {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background-color: var(--input-bg);
    font-size: 1em;
    color: var(--text-main);
    transition: border-color 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%230ea5e9'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 16px;
    padding-right: 45px;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
textarea { min-height: 120px; }

/* フォームラベル（ブロック表示用） */
.form-label-block {
    font-weight: bold;
    color: var(--text-sub);
    display: block;
    text-align: left;
    margin-bottom: 5px;
}

/* ユーティリティクラス */
.mb-0 { margin-bottom: 0 !important; }
.mb-15 { margin-bottom: 15px !important; }
.mb-20 { margin-bottom: 20px !important; }
.text-right { text-align: right; }

/* 5. Flat Buttons & Invert Hover Effects */

/* --- Base Button Style --- */
.btn, .action-btn {
    display: inline-block;
    padding: 12px 24px;
    font-size: 1.05em;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    border-radius: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 100%; 
}

/* --- 1. Primary Button (.btn) --- */
.btn {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}
.btn:hover {
    background-color: #fff;
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* --- 2. Logout Button --- */
.btn-logout {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
    font-size: 0.9em;
    border-radius: 50px;
    background-color: #fff;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
}
.btn-logout:hover {
    background-color: var(--accent-color);
    color: #fff;
    border-color: var(--accent-color);
}

/* ▼▼▼ 修正: 使い方 (Help) / 高速レビュー Button ▼▼▼ */
.btn-help {
    display: inline-block;
    width: auto;
    padding: 8px 20px;
    font-size: 0.9em;
    border-radius: 50px;
    
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
    text-decoration: none;
    transition: all 0.2s;
    margin-left: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-help:hover {
    background-color: #fff;
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* 赤いアクセントボタン（高速レビューなど） */
.btn-accent {
    background-color: var(--accent-color) !important;
    border-color: var(--accent-color) !important;
    color: white !important;
}
.btn-accent:hover {
    background-color: #fff !important;
    color: var(--accent-color) !important;
}

/* ▲▲▲ 修正ここまで ▲▲▲ */

/* --- 3. Guest Login / View Only Buttons (Neutral) --- */
.btn.btn-guest, .btn.btn-view-only {
    background-color: var(--neutral-color);
    border: 2px solid var(--neutral-color);
    color: #fff;
    box-shadow: none;
}
.btn.btn-guest:hover, .btn.btn-view-only:hover {
    background-color: #fff;
    color: var(--neutral-color);
}

/* --- 4. Register Button --- */
.btn.btn-register { 
    background-color: var(--teal-color);
    border: 2px solid var(--teal-color);
    color: #fff;
}
.btn.btn-register:hover { 
    background-color: #fff;
    color: var(--teal-color);
}

/* --- 5. Syllabus Button --- */
.btn.btn-syllabus { 
    background-color: var(--success-color);
    border: 2px solid var(--success-color);
    color: #fff;
    width: auto;
    margin-left: 10px;
}
.btn.btn-syllabus:hover { 
    background-color: #fff;
    color: var(--success-color);
}

/* --- 6. Cancel / Back Buttons --- */
.btn-cancel, .back-link {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
    box-shadow: none;
    background-color: #fff;
    color: var(--text-sub);
    border: 2px solid var(--text-sub);
    cursor: pointer;
}
.btn-cancel:hover, .back-link:hover {
    background-color: var(--text-sub);
    color: #fff;
    border-color: var(--text-sub);
}

/* --- 7. Search Buttons --- */
.search-buttons .btn {
    width: auto;
    margin: 0 5px;
    min-width: 120px;
}
.btn-search { 
    background-color: var(--primary-color); 
    border: 2px solid var(--primary-color);
    color: #fff;
}
.btn-search:hover {
    background-color: #fff;
    color: var(--primary-color);
}

.btn-clear { 
    background-color: #94a3b8; 
    border: 2px solid #94a3b8;
    color: #fff;
}
.btn-clear:hover {
    background-color: #fff;
    color: #94a3b8;
}

/* --- 8. View / Add Review Buttons (Action Row) --- */
.action-btn {
    width: auto;
    margin: 5px 10px;
}

#view-review-btn {
    background-color: var(--primary-color);
    border: 2px solid var(--primary-color);
    color: white;
}
#view-review-btn:hover {
    background-color: #fff;
    color: var(--primary-color);
    transform: translateY(-1px);
}

#add-review-btn {
    background-color: var(--text-sub);
    color: #fff;
    border: 2px solid var(--text-sub);
}
#add-review-btn:hover {
    background-color: #fff;
    color: var(--text-sub);
}

/* Link Styles */
a { color: var(--primary-color); text-decoration: none; font-weight: 600; transition: color 0.2s; }
a:hover { color: #0284c7; text-decoration: underline; text-decoration-thickness: 2px; }
.auth-link { display: block; text-align: center; margin-top: 20px; font-size: 0.9em; }

/* 6. Flash Messages */
.flash-message {
    padding: 16px 24px;
    margin-bottom: 25px;
    border-radius: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: none;
    border-left-width: 5px;
    border-left-style: solid;
}
.flash-message.success { background-color: #ecfdf5; color: #065f46; border-left-color: var(--success-color); border: 1px solid #d1fae5; border-left-width: 5px;}
.flash-message.danger, .flash-message.error { background-color: #fef2f2; color: #991b1b; border-left-color: var(--accent-color); border: 1px solid #fee2e2; border-left-width: 5px;}
.flash-message.warning { background-color: #fffbeb; color: #92400e; border-left-color: var(--warning-color); border: 1px solid #fef3c7; border-left-width: 5px;}
.flash-message.info { background-color: #eff6ff; color: #075985; border-left-color: var(--primary-color); border: 1px solid #dbeafe; border-left-width: 5px;}

/* 7. Tables */
.search-results-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: 10px;
}

.search-results-table th {
    color: var(--text-sub);
    font-weight: 700;
    font-size: 0.9em;
    padding: 10px 15px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: transparent;
    text-align: left;
    white-space: nowrap;
}

.search-results-table th:nth-child(1) { width: 45%; }
.search-results-table th:nth-child(2) { width: 25%; }
.search-results-table th:nth-child(3) { width: 15%; text-align: center; }
.search-results-table th:nth-child(4) { width: 15%; text-align: center; }

.search-results-table td {
    background: #fff;
    padding: 20px 15px;
    border: 1px solid #f1f5f9;
    vertical-align: middle;
}

.search-results-table td:nth-child(3),
.search-results-table td:nth-child(4) {
    text-align: center;
    font-weight: 600;
    color: var(--text-main);
}

.search-results-table tr td:first-child { border-top-left-radius: 16px; border-bottom-left-radius: 16px; border-right: none; }
.search-results-table tr td:last-child { border-top-right-radius: 16px; border-bottom-right-radius: 16px; border-left: none;}
.search-results-table tr td:not(:first-child):not(:last-child) { border-left: none; border-right: none; }

.selectable-row {
    transition: transform 0.1s, box-shadow 0.1s;
    cursor: pointer;
}
.selectable-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    z-index: 10;
    position: relative;
}
.selected-row td {
    background-color: #e0f2fe !important;
    border-color: #bae6fd;
}

/* Action Area */
.action-buttons-content {
    background: #f8fafc;
    padding: 30px;
    text-align: center;
    border-radius: 16px;
    margin-top: -10px;
    margin-bottom: 20px;
    border: 2px dashed #93c5fd;
}
.action-buttons-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: var(--text-main);
}

/* 8. Course Detail Page */
.course-info {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 2px solid #e2e8f0;
}
.course-info-details {
    flex: 1;
    min-width: 300px;
    background: #f8fafc;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}
.course-info-details p {
    margin: 10px 0;
    display: flex;
    border-bottom: 1px dashed #e2e8f0;
    padding-bottom: 8px;
}
.course-info-details strong {
    color: var(--text-sub);
    width: 130px;
    flex-shrink: 0;
}

.rating-distribution-container {
    flex: 1;
    min-width: 300px;
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}
.rating-bar-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}
.rating-bar-label {
    width: 40px;
    font-weight: 600;
    color: var(--text-sub);
}
.rating-bar-wrapper {
    flex-grow: 1;
    background-color: #f1f5f9;
    border-radius: 10px;
    height: 10px;
    margin: 0 10px;
}
.rating-bar-fill {
    border-radius: 10px;
    background-color: var(--warning-color);
    height: 100%;
}
.rating-bar-count {
    width: 40px;
    text-align: right;
    color: var(--text-sub);
    font-size: 0.9em;
}

/* 9. Reviews */
.review-table {
    border: none;
    border-spacing: 0 20px;
    width: 100%;
}
.review-table td {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}
.review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px dashed #f1f5f9;
    color: var(--text-sub);
    font-size: 0.9em;
}
.review-meta span strong { color: var(--primary-color); }
.review-text {
    font-size: 1.1em;
    color: #334155;
    line-height: 1.8;
}

/* 10. Search Form */
.search-form-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 25px;
}
.search-table { width: 100%; border-collapse: collapse; }
.search-table td { background: transparent; padding-bottom: 20px; border: none; }
.search-table th {
    color: var(--primary-color);
    background: transparent;
    border: none;
    text-align: left;
    padding: 10px 0;
    vertical-align: top;
    width: 120px;
}
.search-buttons { margin-top: 10px; text-align: center; }

/* 11. Links & Icons */
.page-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}
.page-navigation .links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.page-navigation .btn { width: auto; margin: 0; }

/* Star Rating Input */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    font-size: 2.5em;
    margin-bottom: 20px;
    background: transparent;
    padding: 10px;
}

.star-rating-input input { display: none; }

.star-rating-input .star {
    position: relative;
    display: block;
    width: 1em;
    cursor: pointer;
    color: #cbd5e1;
    transition: color 0.2s;
}

.star-rating-input .star.half { width: 0.5em; overflow: hidden; }
.star-rating-input .star.half-right { width: 0.5em; overflow: hidden; direction: rtl; }
.star-rating-input .star.half::before { content: '★'; position: absolute; width: 1em; }

.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input:checked ~ label {
    color: var(--warning-color);
}

/* Radio Group (Badge Style) */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.radio-group label {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 12px;
    transition: all 0.2s;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    cursor: pointer;
}
.radio-group label:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color);
}
.radio-group label:has(input:checked) {
    background: #e0f2fe;
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(14, 165, 233, 0.2);
}
.radio-group input[type="radio"]:checked + span::before { display: none; }
.radio-group input[type="radio"] { display: none; }
.radio-group span { margin-left: 0; }
/* 縦並び用のラジオグループ */
.radio-group.vertical {
    flex-direction: column;
    align-items: flex-start;
}
.radio-group.vertical label {
    width: 100%;
    box-sizing: border-box;
}

section h2 {
    font-size: 1.6em;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: initial;
    border-left: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
    display: table;
    margin-left: auto;
    margin-right: auto;
}
section h2::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--warning-color);
    margin: 10px auto 0;
    border-radius: 10px;
}

/* ▼▼▼ 修正: テーブルレイアウト崩れ防止のため display: flex を削除 ▼▼▼ */
.sortable-header {
    cursor: pointer;
    user-select: none;
    /* display: flex;  <-- テーブル構造を壊すため削除 */
    /* align-items: center; <-- 削除 */
    /* justify-content: center; <-- 削除 */
    vertical-align: middle;
}
.sortable-header:hover {
    color: var(--primary-color);
}

/* リンク側でフレックスボックスを使って配置を整える */
a.sort-link {
    color: var(--text-sub);
    text-decoration: none;
    display: flex;           /* ここでFlexboxを使用 */
    align-items: center;
    justify-content: center; /* 中央揃え */
    gap: 5px;
    transition: color 0.2s;
    font-weight: 700;
    width: 100%;            /* セル全体をクリック可能に */
    height: 100%;
}
a.sort-link:hover {
    color: var(--primary-color);
}
/* ▲▲▲ 修正ここまで ▲▲▲ */

/* =========================================
   ▼▼▼ Reaction Buttons (New) ▼▼▼
========================================= */

.reaction-container {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.btn-reaction {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #777;
    font-size: 0.9em;
    padding: 5px 8px;
    border-radius: 20px;
    transition: all 0.2s;
    box-shadow: none !important;
    width: auto !important;
    margin: 0 !important;
}
.btn-reaction:hover {
    background-color: #f5f5f5;
    transform: none !important;
}

/* Icon Wrapper */
.reaction-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 2px solid #ccc;
    border-radius: 50%;
    transition: all 0.2s;
    color: #999;
}
.reaction-svg { width: 20px; height: 20px; }
.reaction-count { font-size: 1.1em; font-weight: bold; color: #777; min-width: 15px; transition: color 0.2s; }

/* --- Active States (Color Logic) --- */

.btn-reaction.btn-empathy.active .reaction-icon-wrapper {
    border-color: #e91e63;
    background-color: #fce4ec;
    color: #e91e63;
}
.btn-reaction.btn-empathy.active .reaction-count,
.btn-reaction.btn-empathy.active .reaction-label {
    color: #e91e63;
}

.btn-reaction.btn-insightful.active .reaction-icon-wrapper {
    border-color: #ff9800;
    background-color: #fff3e0;
    color: #ff9800;
}
.btn-reaction.btn-insightful.active .reaction-count,
.btn-reaction.btn-insightful.active .reaction-label {
    color: #ff9800;
}

.btn-reaction.btn-hmm.active .reaction-icon-wrapper {
    border-color: #3f51b5;
    background-color: #e8eaf6;
    color: #3f51b5;
}
.btn-reaction.btn-hmm.active .reaction-count,
.btn-reaction.btn-hmm.active .reaction-label {
    color: #3f51b5;
}

/* 講義確認画面のボタンスタイル */
.confirmation-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
    align-items: center;
}
.confirmation-actions .btn {
    width: 100%;
    margin: 0;
    text-align: center;
}
.confirmation-actions .btn-cancel {
    width: auto;
    align-self: flex-start;
    margin: 0;
    text-align: center;
    background-color: #fff;
    border: 2px solid var(--text-main);
    color: var(--text-main);
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 0.9em;
    font-weight: 700;
}
.confirmation-actions .btn-cancel:hover {
    background-color: var(--text-main);
    color: #fff;
}

/* =========================================
   ▼▼▼ Compact Top Page Styles (New) ▼▼▼
========================================= */

/* Compact Container */
.compact-container {
    padding: 20px 30px;
    max-width: 1000px;
}

/* Search Panel Card */
.search-panel {
    background: #fff;
    border-radius: 16px;
    padding: 20px 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    margin-bottom: 30px;
}
.panel-title {
    font-size: 1.1em;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 10px;
    font-weight: 700;
}

/* Compact Grid Form */
.compact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    align-items: end;
}
.span-2 { grid-column: span 2; }
.span-full { grid-column: 1 / -1; }

.form-group label {
    display: block;
    font-size: 0.85em;
    color: var(--text-sub);
    font-weight: 600;
    margin-bottom: 6px;
}
.compact-input, .compact-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95em;
    background: #f8fafc;
    margin-bottom: 0;
}
.compact-input:focus, .compact-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

/* Toggle Buttons (New Style) */
.toggle-group {
    display: flex;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px;
    gap: 0;
}

.toggle-group input {
    display: none;
}

.toggle-group label {
    flex: 1;
    text-align: center;
    padding: 8px 10px;
    border-radius: 6px; 
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9em;
    color: var(--text-sub);
    font-weight: 600;
    margin: 0;
    border: none;
    box-shadow: none;
}

/* 選択された状態 (Checked) */
.toggle-group input:checked + label {
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(14, 165, 233, 0.3);
}

/* 未選択ボタンのホバー時 */
.toggle-group label:hover {
    background-color: #f1f5f9;
    color: var(--primary-color);
}

/* Search Button Compact */
.btn-search-compact {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border-radius: 8px;
    margin-top: 5px;
}

/* Ranking Cards */
.ranking-section {
    margin-top: 60px;
}

.ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}
.ranking-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    padding: 15px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-decoration: none;
    color: var(--text-main);
    display: flex;
    flex-direction: column;
}
.ranking-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: #e2e8f0;
    text-decoration: none;
}
.ranking-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.85em;
    margin-bottom: 8px;
}
.ranking-star { color: var(--warning-color); font-weight: bold; }
.ranking-reviews { color: var(--text-sub); }
.ranking-course-name {
    font-size: 1.05em;
    font-weight: 700;
    margin: 0 0 5px 0;
    color: var(--primary-color);
}
.ranking-teacher {
    font-size: 0.9em;
    color: var(--text-sub);
    margin: 0 0 10px 0;
}
.ranking-tags {
    margin-top: auto;
    display: flex;
    gap: 5px;
}
.ranking-tags .tag {
    font-size: 0.75em;
    background: #e0f2fe;
    color: #0369a1;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Syllabus Link Area */
.syllabus-link-area {
    text-align: center;
    margin-top: 40px;
    font-size: 0.9em;
    color: var(--text-sub);
}
.btn-text {
    color: var(--primary-color);
    font-weight: 600;
    margin-left: 10px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .compact-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .span-2 { grid-column: span 1; }
    
    .filters-row, .filters-col {
        flex-direction: column;
        gap: 10px;
    }
    .filter-item {
        justify-content: space-between;
    }
}

/* =========================================
   ▼▼▼ Tinder-like Swipe UI (New) ▼▼▼
========================================= */

.swipe-mode-container {
    max-width: 500px;
    margin: 40px auto;
    text-align: center;
    padding: 20px;
}

.swipe-card {
    background: var(--card-bg);
    border-radius: 24px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--card-border);
    padding: 40px 30px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
    transition: transform 0.3s ease;
}

.swipe-card h3 {
    font-size: 1.8em;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    line-height: 1.4;
}

.swipe-card p {
    font-size: 1.1em;
    color: var(--text-sub);
    margin: 0;
    font-weight: 600;
}

.swipe-actions {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 20px;
}

.btn-swipe {
    flex: 1;
    padding: 15px 0;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 800;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-swipe:active {
    transform: scale(0.95);
}

.btn-skip {
    background-color: #f1f5f9;
    color: #64748b;
    border: 2px solid #cbd5e1;
}

.btn-taken {
    background-color: var(--primary-color);
    color: white;
    border: 2px solid var(--primary-color);
}

.quick-rating-area {
    margin-top: 25px;
    animation: fadeIn 0.3s ease;
}

.quick-star-btn {
    background: none;
    border: 2px solid #e2e8f0;
    font-size: 1.5em;
    margin: 0 5px;
    padding: 10px 15px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: #cbd5e1;
}
.quick-star-btn:hover {
    border-color: var(--warning-color);
    background-color: #fffbeb;
    color: var(--warning-color);
    transform: translateY(-3px);
}
.quick-star-btn span {
    display: block;
    font-size: 0.6em;
    font-weight: bold;
    color: var(--text-sub);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   ▼▼▼ 2-Column Search Layout (FIXED) ▼▼▼
========================================= */

.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .search-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.search-criteria-box {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px;
    height: 100%;
    box-sizing: border-box;
}

.search-left {
    display: flex;
    flex-direction: column;
}

/* =========================================
   ▼▼▼ Added Styles (Pagination & Utils) ▼▼▼
========================================= */

/* Pagination Styles */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
}

.per-page-form {
    text-align: right;
    margin-bottom: 10px;
    font-size: 0.9em;
    margin: 0;
}

.per-page-form select {
    width: auto;
    padding: 5px 25px 5px 10px;
    margin-left: 5px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background-color: #fff;
    display: inline-block;
    margin-bottom: 0;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.pagination a, .pagination span {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: var(--primary-color);
    transition: all 0.2s;
    min-width: 40px;
    text-align: center;
}

.pagination a:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.pagination .active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    font-weight: bold;
}

.pagination .ellipsis {
    border: none;
    background: none;
    color: var(--text-sub);
}

/* =========================================
   ▼▼▼ Dropdown Logic Fixes (Hover & Focus) ▼▼▼
========================================= */

/* ドロップダウンコンテナ */
.dropdown {
    position: relative;
    display: inline-block;
    outline: none; /* クリック時の枠線を消す */
    z-index: 1001; /* ロゴより手前に */
}

/* ホバー判定の強化: 透明な疑似要素で領域を拡張 */
/* これにより、カーソルを少し離してもメニューが消えなくなります */
.dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 40px; /* カーソル移動の猶予領域 */
    background: transparent;
}

/* トリガーボタン（ユーザー名など） */
.dropbtn {
    background-color: transparent;
    color: var(--text-sub); /* text-main から変更 */
    padding: 8px 12px; /* 少しパディングを調整 */
    font-size: 0.95em;
    border: 1px solid transparent; 
    cursor: pointer;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dropbtn:hover,
.dropdown:focus-within .dropbtn {
    background-color: #fff;
    color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* ドロップダウンの中身 */
.dropdown-content {
    display: none;
    position: absolute;
    right: 0; 
    top: calc(100% + 5px); 
    background-color: #ffffff;
    min-width: 200px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    z-index: 2000;
    overflow: hidden;
    padding: 5px;
    animation: slideDown 0.2s ease forwards;
    transform-origin: top right;
}

/* ホバー時 または フォーカス内にいる時に表示 */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}

/* ドロップダウン内のリンク */
.dropdown-content a {
    color: var(--text-main);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95em;
    transition: background-color 0.1s, color 0.1s;
    text-align: left;
    font-weight: 500;
    border-radius: 8px;
}

.dropdown-content a:hover {
    background-color: #f0f9ff;
    color: var(--primary-color);
    text-decoration: none;
}

/* ログアウトだけ少し色を変える（任意） */
.dropdown-content a.logout-item {
    color: var(--text-sub);
    border-top: 1px dashed #e2e8f0;
    margin-top: 5px;
    padding-top: 12px;
    border-radius: 0 0 8px 8px;
}
.dropdown-content a.logout-item:hover {
    background-color: #fef2f2;
    color: var(--accent-color);
}

/* アニメーション */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-5px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 高速レビューボタン（ヘッダー用） */
.header-action-btn {
    background-color: var(--accent-color);
    color: white !important;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.9em;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.25);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 2px solid var(--accent-color);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.header-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3);
    color: var(--accent-color) !important;
    background-color: #fff;
    text-decoration: none;
}

/* =========================================
   ▼▼▼ Review Action Buttons (Updated) ▼▼▼
========================================= */

/* 閲覧ページの編集・削除ボタン（デザイン統一） */
.review-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 700;
    border-radius: 12px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    cursor: pointer;
    line-height: 1.2;
}

/* 編集ボタン (Outline Style -> Solid Styleに変更して統一感を出す例、またはOutlineのまま色を濃くする) */
/* ここでは他の .btn と合わせるため、Primary Colorの実線ボタンスタイル（またはOutline）にします */
.review-action-btn.edit {
    background-color: #fff;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.review-action-btn.edit:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2);
}

/* 削除ボタン (Danger Style - 通常時から赤くする) */
.review-action-btn.delete {
    background-color: #fff;
    color: var(--accent-color); /* 通常時から赤文字 */
    border-color: var(--accent-color); /* 通常時から赤枠 */
}
.review-action-btn.delete:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(244, 63, 94, 0.2);
}

/* 編集ページの削除エリア */
.delete-section {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px dashed #e2e8f0;
    text-align: center;
}

/* 編集ページの削除ボタン（通常時から赤色のボタンデザイン） */
.btn-delete-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 30px;
    font-size: 1em;
    font-weight: 700;
    border-radius: 12px;
    
    /* 通常時から赤枠・赤文字（または赤背景・白文字）にする */
    background-color: #fff; 
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.btn-delete-danger:hover {
    background-color: var(--accent-color);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(244, 63, 94, 0.3);
    text-decoration: none;
}