/* ▼▼▼ 配色設定 ▼▼▼ */
    :root {
      --primary: #0077B6;
      --success: #2E7D32;
      --warning: #F9A825;
      --danger: #C62828;

      /* Light Mode */
      --bg: #F4F7F6;
      --card-bg: #FFFFFF;
      --text: #333333;
      --text-sub: #666666;
      --border: #EEEEEE;
      --header-bg: rgba(255, 255, 255, 0.9);
      --input-bg: #FFFFFF;
      --hover-bg: #F5F9FC;

      --st-ok-bg: #E8F5E9;
      --st-ok-br: #C8E6C9;
      --st-tri-bg: #FFF8E1;
      --st-tri-br: #FFE082;
      --st-ng-bg: #FFEBEE;
      --st-ng-br: #FFCDD2;
      --st-s-ok-bg: #FCE4EC;
      --st-s-ok-br: #F48FB1;
      --st-s-ok-text: #C2185B;
      /* 二重丸用 */

      --rep-bg: #FFF3E0;
      --rep-text: #E65100;
      --memo-bg: #FFF8E1;
      --memo-text: #5D4037;
      --memo-br: #FFECB3;

      --chat-me: #E1F5FE;
      --chat-other: #F5F5F5;

      --sel-border: #0077B6;
      --sel-bg: #E1F5FE;
      --ans-correct-bg: #C8E6C9;
      --ans-correct-br: #2E7D32;
      --ans-wrong-bg: #FFCDD2;
      --ans-wrong-br: #C62828;
    }

    body.dark-mode {
      --primary: #4FC3F7;
      --bg: #121212;
      --card-bg: #1E1E1E;
      --text: #E0E0E0;
      --text-sub: #AAAAAA;
      --border: #333333;
      --header-bg: rgba(30, 30, 30, 0.9);
      --input-bg: #2C2C2C;
      --hover-bg: #2A2A2A;

      --st-ok-bg: rgba(46, 125, 50, 0.2);
      --st-ok-br: #1B5E20;
      --st-tri-bg: rgba(255, 143, 0, 0.2);
      --st-tri-br: #F57F17;
      --st-ng-bg: rgba(198, 40, 40, 0.2);
      --st-ng-br: #B71C1C;
      --st-s-ok-bg: rgba(194, 24, 91, 0.2);
      --st-s-ok-br: #880E4F;
      --st-s-ok-text: #F48FB1;

      --rep-bg: #3E2723;
      --rep-text: #FFAB91;
      --memo-bg: #263238;
      --memo-text: #ECEFF1;
      --memo-br: #37474F;

      --chat-me: #1565C0;
      --chat-other: #424242;

      --sel-border: #4FC3F7;
      --sel-bg: #01579B;
      --ans-correct-bg: #1B5E20;
      --ans-correct-br: #4CAF50;
      --ans-wrong-bg: #B71C1C;
      --ans-wrong-br: #EF5350;
    }

    body {
      font-family: 'Noto Sans JP', sans-serif;
      background: var(--bg);
      color: var(--text);
      margin: 0;
      padding-bottom: 50px;
      transition: background 0.3s, color 0.3s;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    .material-symbols-outlined {
      vertical-align: middle;
      font-size: 1.2rem;
    }

    .icon-sm {
      font-size: 1.0rem;
      margin-right: 4px;
    }

    .icon-lg {
      font-size: 1.8rem;
      margin-bottom: 5px;
      display: block;
    }

    #login-screen {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      transition: background 0.3s;
    }

    .login-box {
      background: var(--card-bg);
      padding: 30px;
      border-radius: 16px;
      text-align: center;
      width: 90%;
      max-width: 320px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    }

    .login-input {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid var(--border);
      background: var(--input-bg);
      color: var(--text);
      border-radius: 8px;
      box-sizing: border-box;
      font-size: 1rem;
    }

    .btn-login {
      width: 100%;
      padding: 12px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 50px;
      font-weight: bold;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s ease;
      box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2);
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-login:active:not(:disabled) {
      transform: translateY(4px);
      box-shadow: none;
    }

    .btn-login:disabled {
      background-color: #90caf9;
      box-shadow: none;
      transform: none;
      cursor: not-allowed;
      opacity: 0.9;
    }

    .spinner {
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-top: 3px solid white;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      animation: spin 1s linear infinite;
      margin-left: 10px;
      display: none;
    }

    .btn-login.loading .spinner {
      display: inline-block;
    }

    #app-loading {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--bg);
      z-index: 2000;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .loader-ring {
      width: 50px;
      height: 50px;
      border: 5px solid rgba(0, 0, 0, 0.1);
      border-top: 5px solid var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-bottom: 20px;
    }

    .loader-text {
      color: var(--primary);
      font-weight: bold;
      font-size: 1.1rem;
      letter-spacing: 0.05em;
      animation: pulse 1.5s ease-in-out infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse {
      0% {
        opacity: 0.6;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.6;
      }
    }

    .app-header {
      background: var(--header-bg);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 15px 20px;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .app-logo {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 1.3rem;
      font-weight: 800;
      background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      cursor: pointer;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .theme-switch {
      position: relative;
      display: inline-block;
      width: 56px;
      height: 28px;
    }

    .theme-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider-theme {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #81D4FA;
      transition: .4s;
      border-radius: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 4px;
    }

    .slider-theme:before {
      position: absolute;
      content: "";
      height: 20px;
      width: 20px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
      z-index: 2;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked+.slider-theme {
      background-color: #303F9F;
    }

    input:checked+.slider-theme:before {
      transform: translateX(28px);
    }

    .toggle-icon {
      font-size: 18px;
      line-height: 1;
      z-index: 1;
    }

    .icon-sun {
      color: #F9A825;
    }

    .icon-moon {
      color: #FFF176;
    }

    .container {
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }

    .card {
      background: var(--card-bg);
      border-radius: 12px;
      padding: 20px;
      margin-bottom: 15px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      position: relative;
      transition: background 0.3s;
    }

    .btn-primary {
      width: 100%;
      background: var(--primary);
      color: white;
      border: none;
      padding: 15px;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 1.15rem;
      min-height: 56px;
    }

    .btn-primary:active {
      transform: scale(0.95);
    }

    .btn-primary .material-symbols-outlined {
      font-size: 1.4rem;
    }

    .btn-outline {
      background: var(--card-bg);
      border: 1px solid var(--border);
      color: var(--text-sub);
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      transition: transform 0.1s;
    }

    .btn-outline:active {
      transform: scale(0.95);
      background-color: var(--hover-bg);
    }

    .btn-resume {
      width: 100%;
      margin-top: 10px;
      background: var(--card-bg);
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 12px;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.95rem;
    }

    .btn-resume:active {
      transform: scale(0.95);
    }

    .btn-resume:disabled {
      border-color: var(--border);
      color: var(--text-sub);
      opacity: 0.6;
      cursor: not-allowed;
    }

    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }

    .modal-overlay.open {
      display: flex;
    }

    .modal-box {
      background: var(--card-bg);
      width: 85%;
      max-width: 300px;
      border-radius: 16px;
      padding: 20px;
      text-align: center;
    }

    .report-textarea {
      width: 100%;
      height: 100px;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      margin: 15px 0 5px;
      font-family: inherit;
      font-size: 0.9rem;
      background: var(--input-bg);
      color: var(--text);
      box-sizing: border-box;
      resize: none;
      transition: border-color 0.2s;
    }

    .report-textarea:focus {
      border-color: var(--primary);
      outline: none;
    }

    .report-textarea.input-error {
      border: 2px solid var(--danger) !important;
      background-color: var(--st-ng-bg);
    }

    .error-msg {
      color: var(--danger);
      font-size: 0.8rem;
      text-align: left;
      margin-bottom: 15px;
      display: none;
      font-weight: bold;
    }

    .report-info {
      font-size: 0.8rem;
      color: var(--text-sub);
      text-align: left;
      margin-bottom: 5px;
    }

    .news-title {
      font-weight: bold;
      color: var(--text-sub);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    .news-box {
      max-height: 150px;
      overflow-y: auto;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
    }

    .news-item {
      padding: 8px 0;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
      line-height: 1.5;
    }

    .news-item:last-child {
      border-bottom: none;
    }

    .news-date {
      font-size: 0.75rem;
      color: var(--text-sub);
      font-weight: bold;
      display: block;
      margin-bottom: 2px;
    }

    .news-content {
      color: var(--text);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 10px;
      margin-bottom: 20px;
    }

    .stat-card {
      padding: 15px 5px;
      border-radius: 12px;
      text-align: center;
      cursor: pointer;
      transition: transform 0.2s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
      background: var(--card-bg);
    }

    .stat-card:active {
      transform: scale(0.95);
    }

    .stat-icon {
      font-size: 1.6rem;
      display: block;
      margin-bottom: 5px;
      line-height: 1;
    }

    .stat-count {
      font-size: 1.1rem;
      font-weight: bold;
      display: block;
    }

    .stat-label {
      font-size: 0.7rem;
      opacity: 0.8;
    }

    .st-ok {
      background-color: var(--st-ok-bg);
      color: var(--success);
      border: 1px solid var(--st-ok-br);
    }

    .st-tri {
      background-color: var(--st-tri-bg);
      color: var(--warning);
      border: 1px solid var(--st-tri-br);
    }

    .st-ng {
      background-color: var(--st-ng-bg);
      color: var(--danger);
      border: 1px solid var(--st-ng-br);
    }

    .st-s-ok {
      background-color: var(--st-s-ok-bg);
      color: var(--st-s-ok-text);
      border: 1px solid var(--st-s-ok-br);
    }

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
      font-weight: bold;
      color: var(--text-sub);
      margin-top: 25px;
      margin-bottom: 10px;
    }

    .filter-actions {
      display: flex;
      gap: 10px;
    }

    .btn-filter-op {
      background: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
      padding: 5px 12px;
      border-radius: 15px;
      font-size: 0.8rem;
      cursor: pointer;
      transition: 0.2s;
      min-height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-filter-op:hover {
      background: var(--hover-bg);
    }

    .btn-filter-op:active {
      transform: scale(0.95);
    }

    .scroll-box {
      padding: 2px;
    }

    .selection-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
      gap: 8px;
    }

    .grid-header {
      grid-column: 1 / -1;
      font-size: 0.85rem;
      color: var(--primary);
      font-weight: bold;
      margin-top: 15px;
      margin-bottom: 5px;
      border-bottom: 1px solid var(--border);
      padding-left: 5px;
    }

    .sel-card {
      position: relative;
    }

    .sel-card input {
      display: none;
    }

    .sel-card label {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 10px 5px;
      background: var(--card-bg);
      border: 2px solid var(--border);
      border-radius: 8px;
      color: var(--text-sub);
      font-size: 0.9rem;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 40px;
      line-height: 1.2;
    }

    .sel-card input:checked+label {
      border-color: var(--primary);
      background-color: var(--hover-bg);
      color: var(--primary);
      font-weight: bold;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transform: translateY(-1px);
    }

    .status-grid {
      display: flex;
      gap: 8px;
      margin-top: 5px;
    }

    .status-grid .sel-card {
      flex: 1;
    }

    .toggle-switch-shuffle {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 28px;
    }

    .toggle-switch-shuffle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider-shuffle {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 34px;
    }

    .slider-shuffle:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    input:checked+.slider-shuffle {
      background-color: var(--primary);
    }

    input:checked+.slider-shuffle:before {
      transform: translateX(22px);
    }

    .badge {
      background: #E1F5FE;
      color: #0277BD;
      padding: 3px 8px;
      border-radius: 4px;
      font-size: 0.8rem;
      margin-right: 5px;
    }

    .badge-year {
      background: #F3E5F5;
      color: #7B1FA2;
    }

    .badge-id {
      background: #EEEEEE;
      color: #616161;
    }

    .q-text {
      font-size: 1.1rem;
      font-weight: bold;
      margin: 15px 0 20px;
      line-height: 1.6;
    }

    .img-container {
      display: none;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
      margin-bottom: 20px;
    }

    .q-img {
      width: 100%;
      max-width: 400px;
      height: auto;
      border-radius: 8px;
      border: 1px solid var(--border);
      cursor: pointer;
      display: block;
    }

    .opt-item {
      padding: 12px;
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 8px;
      display: flex;
      cursor: pointer;
      transition: 0.2s;
      background: var(--card-bg);
    }

    .opt-item:hover {
      background: var(--hover-bg);
    }

    .opt-item.selected {
      background-color: var(--sel-bg);
      border: 2px solid var(--sel-border);
      padding: 11px;
    }

    .opt-item.correct {
      background-color: var(--ans-correct-bg);
      border-color: var(--ans-correct-br);
    }

    .opt-item.wrong {
      background-color: var(--ans-wrong-bg);
      border-color: var(--ans-wrong-br);
    }

    .opt-item.disabled {
      pointer-events: none;
      opacity: 0.9;
    }

    .opt-num {
      font-weight: bold;
      color: var(--primary);
      margin-right: 10px;
    }

    .game-nav-area {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
    }

    .btn-nav-small {
      background: var(--card-bg);
      border: 1px solid var(--border);
      color: var(--text-sub);
      padding: 12px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: bold;
      min-width: 70px;
      transition: 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-nav-small:hover {
      background: var(--hover-bg);
    }

    .btn-nav-small:active {
      transform: scale(0.95);
    }

    /* ▼▼▼ レポートセクション（ボタン配置エリア）の修正 ▼▼▼ */
    .report-section {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px dashed var(--border);
      /* Flexboxを使ってきれいに並べる */
      display: flex;
      justify-content: flex-end;
      /* 右寄せ（お好みで center にしてもOK） */
      align-items: center;
      /* 縦方向のズレを防止 */
      gap: 10px;
      /* ボタン間の隙間 */
      flex-wrap: wrap;
      /* 画面が狭い時に折り返す */
    }

    /* ▼▼▼ 報告ボタンの修正（高さを指定） ▼▼▼ */
    .btn-report {
      background: var(--rep-bg);
      color: var(--rep-text);
      border: none;
      padding: 0 15px;
      /* 上下paddingを0にし、heightで制御 */
      height: 36px;
      /* 高さを固定して揃える */
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: bold;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* 文字・アイコンを真ん中に */
      transition: 0.2s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .btn-report:hover {
      opacity: 0.8;
      transform: translateY(-1px);
    }

    .btn-report:active {
      transform: scale(0.95);
      box-shadow: none;
    }

    .btn-suspend {
      background: var(--card-bg);
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.85rem;
      font-weight: bold;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      transition: all 0.2s;
      gap: 5px;
    }

    .btn-suspend:hover {
      background: var(--hover-bg);
      transform: translateY(-1px);
    }

    .btn-list-link {
      width: 100%;
      background: var(--card-bg);
      border: 2px solid var(--primary);
      color: var(--primary);
      padding: 12px;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      margin-top: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    }

    .btn-list-link:hover {
      background: var(--hover-bg);
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-scroll-top {
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 50px;
      height: 50px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 50%;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      transition: transform 0.2s, opacity 0.2s;
      z-index: 500;
      opacity: 0.8;
    }

    .btn-scroll-top:hover {
      transform: scale(1.1);
      opacity: 1;
    }

    .btn-scroll-top:active {
      transform: scale(0.95);
    }

    .ans-area {
      display: none;
      margin-top: 20px;
      border-top: 2px dashed var(--border);
      padding-top: 20px;
      animation: fadeIn 0.3s;
    }

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

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .memo-box {
      background: var(--memo-bg);
      color: var(--memo-text);
      padding: 15px;
      border: 1px solid var(--memo-br);
      border-radius: 8px;
      margin: 10px 0;
      font-size: 0.9rem;
      line-height: 1.6;
    }

    .rate-row {
      display: flex;
      gap: 8px;
      margin-top: 15px;
    }

    .rate-btn {
      flex: 1;
      padding: 10px;
      border: 2px solid var(--border);
      background: var(--card-bg);
      color: var(--text);
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
    }

    .rate-btn.selected.r-ok {
      background: var(--st-ok-bg);
      border-color: var(--success);
      color: var(--success);
    }

    .rate-btn.selected.r-tri {
      background: var(--st-tri-bg);
      border-color: var(--warning);
      color: var(--warning);
    }

    .rate-btn.selected.r-ng {
      background: var(--st-ng-bg);
      border-color: var(--danger);
      color: var(--danger);
    }

    .rate-btn.selected.r-s-ok {
      background: var(--st-s-ok-bg);
      border-color: var(--st-s-ok-text);
      color: var(--st-s-ok-text);
      font-weight: bold;
    }

    .result-msg {
      font-size: 1.2rem;
      font-weight: bold;
      text-align: center;
      margin-bottom: 10px;
      animation: pulse 0.5s;
    }

    .res-correct {
      color: var(--success);
    }

    .res-wrong {
      color: var(--danger);
    }

    .list-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }

    .list-table th {
      text-align: left;
      padding: 10px;
      background: var(--bg);
      color: var(--text-sub);
      font-size: 0.8rem;
      border-bottom: 1px solid var(--border);
    }

    .list-table td {
      padding: 10px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
    }

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

    .page-btn {
      padding: 8px 12px;
      border: 1px solid var(--border);
      background: var(--card-bg);
      border-radius: 6px;
      cursor: pointer;
      color: var(--text);
      font-size: 0.9rem;
      min-width: 36px;
      transition: all 0.2s;
    }

    .page-btn:hover {
      background: var(--hover-bg);
    }

    .page-btn.active {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
      pointer-events: none;
    }

    .page-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .list-filter-area {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
    }

    .list-select {
      flex: 1;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--input-bg);
      color: var(--text);
      font-size: 0.9rem;
      cursor: pointer;
    }

    .list-info {
      font-size: 0.8rem;
      color: var(--text-sub);
      text-align: right;
      margin-bottom: 5px;
    }

    .toast {
      visibility: hidden;
      min-width: 250px;
      background-color: #333;
      color: #fff;
      text-align: center;
      border-radius: 4px;
      padding: 16px;
      position: fixed;
      z-index: 3000;
      left: 50%;
      bottom: 30px;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.5s, bottom 0.5s;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    .toast.show {
      visibility: visible;
      opacity: 1;
      bottom: 50px;
    }

    .chat-box {
      display: flex;
      flex-direction: column;
      height: 70vh;
      border: 1px solid var(--border);
      border-radius: 12px;
      background: var(--bg);
      overflow: hidden;
    }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .msg-wrapper {
      display: flex;
      flex-direction: column;
      max-width: 80%;
    }

    .msg-wrapper.me {
      align-self: flex-end;
      align-items: flex-end;
    }

    .msg-wrapper.other {
      align-self: flex-start;
      align-items: flex-start;
    }

    .msg-name {
      font-size: 0.75rem;
      color: var(--text-sub);
      margin-bottom: 2px;
      margin-left: 5px;
    }

    .msg-wrapper.me .msg-name {
      display: none;
    }

    .msg-bubble {
      padding: 10px 14px;
      border-radius: 12px;
      font-size: 0.95rem;
      line-height: 1.5;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
      word-wrap: break-word;
      white-space: pre-wrap;
    }

    .msg-wrapper.me .msg-bubble {
      background-color: var(--chat-me);
      color: var(--text);
      border-top-right-radius: 2px;
      border: 1px solid var(--primary);
    }

    .msg-wrapper.other .msg-bubble {
      background-color: var(--chat-other);
      color: var(--text);
      border-top-left-radius: 2px;
      border: 1px solid var(--border);
    }

    .msg-time {
      font-size: 0.65rem;
      color: var(--text-sub);
      margin-top: 3px;
      text-align: right;
    }

    .chat-input-area {
      padding: 10px;
      background: var(--card-bg);
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
    }

    .chat-input {
      flex: 1;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 0.95rem;
      background: var(--input-bg);
      color: var(--text);
    }

    .chat-send-btn {
      background: transparent;
      border: none;
      color: var(--primary);
      cursor: pointer;
      padding: 5px;
    }

    .chat-send-btn:disabled {
      color: var(--text-sub);
      opacity: 0.5;
    }

    .user-comments-section {
      margin-top: 20px;
      padding-top: 15px;
      border-top: 2px dashed var(--border);
    }

    .uc-header {
      font-size: 0.95rem;
      font-weight: bold;
      color: var(--text-sub);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    /* 解説・メモ表示エリア */
    .uc-list {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-bottom: 25px;
    }

    .uc-item {
      background: var(--bg);
      padding: 16px 20px;
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
      transition: transform 0.2s;
    }

    .uc-item:hover {
      transform: translateY(-2px);
    }

    .uc-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px dashed var(--border);
    }

    .uc-name {
      font-weight: bold;
      color: var(--primary);
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .uc-date {
      font-size: 0.75rem;
      color: var(--text-sub);
    }

    .uc-text {
      font-size: 1rem;
      line-height: 1.7;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-all;
    }

    /* いいねボタン */
    .uc-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 5px;
    }

    .btn-like {
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--text-sub);
      font-size: 0.9rem;
      padding: 4px 8px;
      border-radius: 15px;
      transition: 0.2s;
    }

    .btn-like:hover {
      background: var(--hover-bg);
      color: var(--danger);
    }

    .btn-like.active {
      color: var(--danger);
    }

    .btn-like.active .material-symbols-outlined {
      font-variation-settings: 'FILL' 1;
    }

    .like-count {
      font-weight: bold;
      font-size: 0.85rem;
    }

    /* コメント欄の画像プレビューと表示用 */
    .uc-img-preview {
      max-width: 100px;
      max-height: 100px;
      display: none;
      margin-bottom: 5px;
      border-radius: 8px;
      border: 1px solid var(--border);
    }

    .uc-attached-image {
      max-width: 100%;
      height: auto;
      border-radius: 8px;
      margin-top: 10px;
      display: block;
      cursor: pointer;
      border: 1px solid var(--border);
    }

    /* ファイル選択アイコン */
    .label-file-input {
      cursor: pointer;
      color: var(--text-sub);
      display: flex;
      align-items: center;
      padding: 0 5px;
      transition: 0.2s;
    }

    .label-file-input:hover {
      color: var(--primary);
      transform: scale(1.1);
    }

    /* 解説・メモ入力エリア */
    /* ▼▼▼ 追加・修正するCSS ▼▼▼ */

    /* 画像アップロードボタンを「押しやすいボタン」にする */
    .btn-upload-style {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      /* アイコンと文字の間隔 */
      background-color: #E1F5FE;
      /* 薄い青背景 */
      color: #0277BD;
      /* 濃い青文字 */
      padding: 8px 12px;
      /* 指で押しやすい広さを確保 */
      border-radius: 20px;
      /* カプセル型 */
      font-size: 0.85rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s;
      border: 1px solid #B3E5FC;
      margin-right: 5px;
      flex-shrink: 0;
      /* 横幅が狭くなっても潰れないようにする */
    }

    .btn-upload-style:hover {
      background-color: #B3E5FC;
      transform: translateY(-1px);
    }

    .btn-upload-style:active {
      transform: scale(0.95);
    }

    /* 入力エリアの調整（ボタンが大きくなるので微調整） */
    .uc-input-area {
      display: flex;
      gap: 5px;
      align-items: flex-end;
      /* 下揃え */
      padding-bottom: 2px;
    }

    /* テキスト入力欄（高さ調整） */
    .uc-input {
      flex: 1;
      padding: 10px;
      /* パディングを少し調整 */
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 0.95rem;
      background: var(--input-bg);
      color: var(--text);
      resize: none;
      /* 勝手なリサイズ禁止（高さを自動調整するため） */
      min-height: 46px;
      /* ボタンの高さに合わせる */
      line-height: 1.5;
      box-sizing: border-box;
    }

    .uc-input {
      flex: 1;
      padding: 12px 15px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: 0.95rem;
      background: var(--input-bg);
      color: var(--text);
      resize: vertical;
      height: 50px;
      min-height: 50px;
      line-height: 1.5;
      transition: height 0.2s ease;
      box-sizing: border-box;
    }

    .uc-input:focus {
      height: 160px;
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
    }

    .uc-btn {
      background: var(--primary);
      color: white;
      border: none;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
      flex-shrink: 0;
      margin-bottom: 1px;
    }

    .uc-btn:hover {
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
      background-color: #0088CC;
    }

    .uc-btn:active {
      transform: scale(0.95);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .uc-btn .material-symbols-outlined {
      font-size: 1.4rem;
      margin-left: 2px;
    }

    /* 報告履歴リスト */
    .history-list {
      text-align: left;
      margin-top: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .hist-item {
      background: var(--bg);
      padding: 10px;
      border-radius: 8px;
      border: 1px solid var(--border);
      font-size: 0.85rem;
    }

    .hist-header {
      display: flex;
      justify-content: space-between;
      color: var(--text-sub);
      font-size: 0.75rem;
      margin-bottom: 5px;
      border-bottom: 1px dashed var(--border);
      padding-bottom: 4px;
    }

    .hist-reply-box {
      margin-top: 8px;
      padding: 6px;
      background: var(--st-ok-bg);
      border: 1px solid var(--st-ok-br);
      border-radius: 6px;
      color: var(--success);
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .hist-pending {
      margin-top: 5px;
      color: var(--text-sub);
      font-size: 0.75rem;
      text-align: right;
    }

    /* ランキング */
    .rank-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .rank-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }

    .rank-item:last-child {
      border-bottom: none;
    }

    .rank-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #ccc;
      color: white;
      font-weight: bold;
      font-size: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
    }

    .rank-1 .rank-num {
      background: #FFD700;
      box-shadow: 0 2px 4px rgba(255, 215, 0, 0.4);
    }

    .rank-2 .rank-num {
      background: #C0C0C0;
    }

    .rank-3 .rank-num {
      background: #CD7F32;
    }

    .rank-name {
      flex: 1;
      font-weight: 500;
    }

    .rank-count {
      font-weight: bold;
      color: var(--primary);
    }

    /* コメント編集 */
    .btn-edit-icon {
      cursor: pointer;
      color: var(--text-sub);
      font-size: 1.1rem;
      margin-left: 10px;
      transition: color 0.2s;
    }

    .btn-edit-icon:hover {
      color: var(--primary);
    }

    .edit-area {
      margin-top: 10px;
    }

    .edit-textarea {
      width: 100%;
      padding: 10px;
      border: 2px solid var(--primary);
      border-radius: 8px;
      font-family: inherit;
      font-size: 0.95rem;
      box-sizing: border-box;
      resize: vertical;
      background: var(--input-bg);
      color: var(--text);
    }

    .edit-actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 5px;
    }

    .btn-edit-save {
      background: var(--primary);
      color: white;
      border: none;
      padding: 5px 15px;
      border-radius: 15px;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: bold;
    }

    .btn-edit-cancel {
      background: transparent;
      color: var(--text-sub);
      border: 1px solid var(--text-sub);
      padding: 5px 15px;
      border-radius: 15px;
      cursor: pointer;
      font-size: 0.85rem;
    }

    /* 削除確認用ボタン */
    .btn-danger {
      background: var(--danger);
      color: white;
      border: none;
      padding: 10px;
      border-radius: 20px;
      font-weight: bold;
      cursor: pointer;
      transition: 0.2s;
    }

    .btn-danger:active {
      transform: scale(0.95);
    }

    /* ブックマークボタン */
    .btn-fav {
      position: absolute;
      top: 15px;
      right: 15px;
      background: transparent;
      border: none;
      color: #BDBDBD;
      cursor: pointer;
      transition: transform 0.2s, color 0.2s;
      padding: 5px;
      z-index: 10;
    }

    .btn-fav.active {
      color: #FFC107;
      transform: scale(1.2);
    }

    .btn-fav:active {
      transform: scale(0.9);
    }

    .btn-fav .material-symbols-outlined {
      font-size: 2rem;
    }

    /* ヘッダー用ログアウトボタン */
    .btn-header-logout {
      background: transparent;
      border: 1px solid var(--danger);
      /* 赤い枠線 */
      color: var(--danger);
      /* 赤い文字 */
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 8px;
      /* テーマスイッチとの間隔 */
    }

    .btn-header-logout:hover {
      background: var(--st-ng-bg);
      /* ホバー時に薄い赤背景 */
    }

    .btn-header-logout:active {
      transform: scale(0.95);
      /* クリック時のエフェクト */
    }

    .btn-header-logout .material-symbols-outlined {
      font-size: 1.1rem;
    }

    /* 管理者用編集ボタン */
    .btn-admin-edit {
      background: transparent;
      border: 1px solid #aaa;
      color: #555;
      font-size: 0.8rem;
      padding: 2px 8px;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 10px;
      vertical-align: middle;
    }

    .btn-admin-edit:hover {
      background: #eee;
    }

    /* 編集モーダルの入力フォーム */
    .edit-label {
      font-size: 0.85rem;
      font-weight: bold;
      color: var(--primary);
      margin-top: 10px;
      display: block;
    }

    .edit-input-text {
      width: 100%;
      padding: 8px;
      margin-top: 4px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--text);
      box-sizing: border-box;
    }

    .edit-input-area {
      width: 100%;
      height: 80px;
      padding: 8px;
      margin-top: 4px;
      border: 1px solid var(--border);
      border-radius: 4px;
      background: var(--input-bg);
      color: var(--text);
      box-sizing: border-box;
      resize: vertical;
    }

    /* ▼▼▼ ハンバーガーメニュー（ログアウトボタン風デザイン） ▼▼▼ */
    .menu-btn {
      background: transparent;
      border: 1px solid var(--primary);
      /* 青色の枠線 */
      color: var(--primary);
      /* 青色の文字 */
      padding: 5px 10px;
      /* ログアウトボタンと同じ余白 */
      border-radius: 20px;
      /* カプセル型 */
      font-size: 0.8rem;
      /* ログアウトボタンと同じ文字サイズ */
      font-weight: bold;
      cursor: pointer;
      transition: all 0.2s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      /* アイコンと文字の間隔 */
      margin-right: 10px;
      /* 右側のロゴとの余白 */
    }

    .menu-btn:hover {
      background: var(--sel-bg);
      /* ホバー時に薄い青背景 */
    }

    .menu-btn:active {
      transform: scale(0.95);
    }

    /* アイコンサイズをログアウトボタンに合わせる */
    .menu-btn .material-symbols-outlined {
      font-size: 1.1rem;
    }

    .menu-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2000;
      opacity: 0;
      visibility: hidden;
      transition: 0.3s;
    }

    .menu-overlay.open {
      opacity: 1;
      visibility: visible;
    }

    .side-menu {
      position: fixed;
      top: 0;
      left: -260px;
      width: 250px;
      height: 100%;
      background: var(--card-bg);
      z-index: 2100;
      box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      flex-direction: column;
    }

    .side-menu.open {
      left: 0;
    }

    .menu-header {
      padding: 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
      color: var(--primary);
      font-size: 1.1rem;
    }

    .menu-list {
      flex: 1;
      overflow-y: auto;
      padding: 10px 0;
    }

    .menu-item {
      padding: 15px 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      color: var(--text);
      cursor: pointer;
      transition: 0.2s;
      font-size: 0.95rem;
      text-decoration: none;
      border-left: 4px solid transparent;
    }

    .menu-item:hover {
      background: var(--hover-bg);
    }

    .menu-item:active {
      background: var(--sel-bg);
    }

    .menu-item.active {
      background: var(--sel-bg);
      color: var(--primary);
      border-left-color: var(--primary);
      font-weight: bold;
    }

    .menu-footer {
      padding: 20px;
      border-top: 1px solid var(--border);
      text-align: center;
    }

    /* ▼▼▼ 助けを求めるボタンの修正（高さを指定し、マージンを削除） ▼▼▼ */
    .btn-help {
      background: #7E57C2;
      color: white;
      border: none;
      padding: 0 15px;
      /* 上下paddingを0にし、heightで制御 */
      height: 36px;
      /* 高さを固定して揃える */
      border-radius: 20px;
      font-size: 0.8rem;
      font-weight: bold;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      /* 文字・アイコンを真ん中に */
      transition: 0.2s;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      /* margin-right: 10px; ← gapで制御するため削除 */
    }

    .btn-help:hover {
      background: #673AB7;
      transform: translateY(-1px);
    }

    .btn-help:active {
      transform: scale(0.95);
    }

    /* 助けリストのバッジ */
    .badge-help-count {
      background: #F3E5F5;
      color: #7E57C2;
      font-weight: bold;
      font-size: 0.75rem;
      padding: 2px 6px;
      border-radius: 4px;
      margin-right: 5px;
      border: 1px solid #D1C4E9;
    }

    /* ▼▼▼ 修正モーダルの画像削除ボタン用CSS ▼▼▼ */
    .img-wrapper {
      position: relative;
      display: inline-block;
    }

    .btn-img-delete {
      position: absolute;
      top: -8px;
      right: -8px;
      background: var(--danger);
      color: white;
      border: none;
      border-radius: 50%;
      width: 24px;
      height: 24px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    .btn-img-delete .material-symbols-outlined {
      font-size: 16px;
    }

    /* ▼▼▼ 追加: カプセル型の控えめな編集ボタン ▼▼▼ */
    .btn-edit-capsule {
      background-color: #f4f5f7;  /* 邪魔にならない薄いグレーの背景 */
      color: #666;                /* 控えめなグレーの文字 */
      border: 1px solid #e0e0e0;  /* うっすらとした枠線 */
      border-radius: 20px;        /* 完全なカプセル型（丸み）にする */
      padding: 4px 12px;          /* 押しやすい横長サイズに */
      font-size: 0.85rem;         /* 問題文より少しだけ小さく */
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;                   /* アイコンと文字の間に少し隙間を作る */
      margin-left: 15px;          /* 問題文から少し離す */
      vertical-align: middle;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* ほんの少しだけ影をつけてボタンっぽく */
    }
    
    /* マウスを乗せた時の動き */
    .btn-edit-capsule:hover {
      background-color: #e9ecef;  /* 少しだけ濃いグレーに */
      color: var(--primary);      /* 文字をテーマカラーにして「押せる感」を出す */
      border-color: #d0d0d0;
    }
    
    .btn-edit-capsule .material-symbols-outlined {
      font-size: 1.1rem;          /* アイコンのサイズを文字に合わせる */
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ 追加: モーダル（ポップアップ画面）のモダン化 ▼▼▼ */
    .modal-overlay.open {
      display: flex !important; /* 画面の中央に配置するための魔法 */
      align-items: center;
      justify-content: center;
    }

    .modal-overlay {
      padding: 20px; /* 画面の端にくっつかないようにバリアを張る */
      box-sizing: border-box;
    }

    .modal-box {
      width: 100%;
      max-width: 650px !important; /* 横に広がりすぎないように制限 */
      max-height: 85vh !important; /* 縦に伸びすぎないように制限（画面の85%まで） */
      overflow-y: auto !important; /* はみ出した分は箱の「中」でスクロールさせる */
      border-radius: 16px !important; /* 角を今風にしっかり丸くする */
      box-shadow: 0 15px 40px rgba(0,0,0,0.2) !important; /* リッチな影をつけて浮かせる */
      margin: 0 !important; /* 古い配置ルールをリセット */
      position: relative;
    }

    /* ▼ おまけ: モーダル内のスクロールバーを細く綺麗にする ▼ */
    .modal-box::-webkit-scrollbar {
      width: 8px;
    }
    .modal-box::-webkit-scrollbar-track {
      background: transparent;
    }
    .modal-box::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 4px;
    }
    .modal-box::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ 追加: ロゴのレスポンシブ表示切り替え ▼▼▼ */

/* デフォルト（スマホなどの狭い画面）の設定 */
.logo-full {
  display: none; /* 長い名前は隠す */
}
.logo-short {
  display: inline; /* 短い名前を表示する */
}

/* 画面の横幅が 600px 以上（パソコンやタブレット）の時の設定 */
@media (min-width: 600px) {
  .logo-full {
    display: inline; /* 長い名前を表示する */
  }
  .logo-short {
    display: none; /* 短い名前は隠す */
  }
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* ▼▼▼ 追加: 未読通知バッジ ▼▼▼ */
.menu-item {
  position: relative; /* バッジの基準位置にするため */
}

.unread-badge {
  display: none; /* 最初は隠しておく */
  position: absolute;
  top: 8px;
  right: 15px; /* メニューの右上に配置 */
  width: 10px;
  height: 10px;
  background-color: #ff4757; /* 目立つ赤色 */
  border-radius: 50%; /* 完全な丸にする */
  box-shadow: 0 0 5px rgba(255, 71, 87, 0.5); /* ふわっと光らせる */
  z-index: 10;
}
/* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

/* ▼▼▼ 設定画面のモダンUI化（分離デザイン版） ▼▼▼ */
    .settings-card {
      padding: 20px;
      margin-bottom: 20px;
    }

    .profile-image-section {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 画像を囲む枠自体のサイズを完全に固定 */
    .image-wrapper {
      position: relative !important;
      width: 120px !important;
      height: 120px !important;
      margin-bottom: 15px;
    }

    /* 画像本体のサイズと丸みを強制固定 */
    #setting-icon-preview {
      width: 120px !important;
      height: 120px !important;
      min-width: 120px !important;
      max-width: 120px !important;
      border-radius: 50% !important;
      object-fit: cover !important;
      background-color: var(--input-bg) !important;
      border: 3px solid var(--border) !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
      overflow: hidden !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* カメラアイコンの配置 */
    .btn-upload-icon {
      position: absolute !important;
      bottom: -5px !important;
      right: -5px !important;
      background-color: var(--primary) !important;
      color: white !important;
      width: 36px !important;
      height: 36px !important;
      border-radius: 50% !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
      border: 3px solid var(--card-bg) !important;
      z-index: 10 !important;
      transition: transform 0.2s !important;
    }

    .btn-upload-icon:hover {
      transform: scale(1.1) !important;
    }

    .upload-msg {
      font-size: 0.8rem;
      margin-bottom: 8px;
      min-height: 1.2rem;
    }

    /* 設定画面専用の保存ボタン */
    .btn-save-action {
      background: var(--primary);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 30px;
      font-weight: bold;
      cursor: pointer;
      transition: transform 0.1s;
      width: 100%;
      font-size: 1rem;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }

    .btn-save-action:active {
      transform: scale(0.95);
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ 解説コメントのユーザーアイコン表示 ▼▼▼ */
    /* アイコン画像を丸く、適切なサイズにする */
    .uc-user-icon {
      width: 24px;   /* アイコンのサイズ（ネームに合わせる） */
      height: 24px;
      border-radius: 50%; /* 丸くする */
      object-fit: cover; /* 画像を中央でトリミング */
      border: 1px solid var(--border); /* ダークモード時は馴染む程度の軽い枠線 */
      margin-right: 8px; /* ユーザーネームとの間隔 */
      background-color: var(--input-bg); /* 画像読み込み前や透過画像の背景 */
    }

    /* ネームエリアの配置調整（アイコンとネームを中央に） */
    .uc-name {
      display: flex;
      align-items: center;
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ ランキングのユーザーアイコン用 ▼▼▼ */
    .rank-user-icon {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      background-color: var(--input-bg);
      border: 1px solid var(--border);
      margin-right: 12px;
      flex-shrink: 0;
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ 確認用（小さい）モーダルの横幅をスマートにする ▼▼▼ */
    #help-confirm-modal .modal-box,
    #delete-confirm-modal .modal-box,
    #modal-overlay .modal-box,          /* 汎用アラート（OKボタンのみ） */
    #first-login-modal .modal-box,      /* 初回の名前設定モーダル */
    #user-modal-overlay .modal-box {    /* ユーザー管理の編集モーダル */
      max-width: 380px !important;      /* 650pxから380pxに制限してシュッとさせる */
      padding: 30px 25px !important;    /* 余白を少し調整して上品に */
    }

    /* ついでに報告用モーダル（テキストエリアあり）は少しだけ広めに */
    #report-modal-overlay .modal-box {
      max-width: 450px !important;
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ いいねバッジのリッチ化 ▼▼▼ */
    .likes-badge-container {
      margin-bottom: 20px;
    }

    .likes-badge {
      display: inline-flex;
      align-items: center;
      /* ピンクベースの鮮やかで上品なグラデーション */
      background: linear-gradient(135deg, #ff7eb3 0%, #ff758c 100%);
      color: white;
      padding: 6px 12px 6px 12px;
      border-radius: 30px;
      /* ふんわりとしたピンクの影を落として「特別感」を出す */
      box-shadow: 0 4px 12px rgba(255, 117, 140, 0.35);
      cursor: default;
    }

    /* アイコンを線（アウトライン）ではなく、塗りつぶし（FILL）にして強調 */
    .likes-badge .icon-filled {
      font-variation-settings: 'FILL' 1;
      font-size: 1.2rem;
      margin-right: 6px;
      color: #fff;
    }

    /* 文字部分の調整 */
    .likes-text {
      font-size: 0.85rem;
      font-weight: bold;
      margin-right: 10px;
      letter-spacing: 0.05em;
    }

    /* 数字部分だけを独立させて目立たせる */
    .likes-number {
      font-size: 1.1rem;
      font-weight: 900;
      /* 半透明の白背景を敷いて、数字をカプセル状に際立たせる */
      background: rgba(255, 255, 255, 0.25);
      padding: 2px 12px;
      border-radius: 15px;
    }
    /* ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

    /* ▼▼▼ 確認用（小さい）モーダルの横幅をスマートにする ▼▼▼ */
    #help-confirm-modal .modal-box,
    #delete-confirm-modal .modal-box,
    #q-delete-confirm-modal .modal-box, /* ◀◀ これを追加！ */
    #modal-overlay .modal-box,
    #first-login-modal .modal-box,
    #user-modal-overlay .modal-box {
      max-width: 380px !important;
      padding: 30px 25px !important;
    }

    /* ▼▼▼ 確認用（小さい）モーダルの横幅をスマートにする ▼▼▼ */
    #help-confirm-modal .modal-box,
    #delete-confirm-modal .modal-box,
    #q-delete-confirm-modal .modal-box,
    #q-save-confirm-modal .modal-box, /* ◀◀ これを追加！ */
    #modal-overlay .modal-box,
    #first-login-modal .modal-box,
    #user-modal-overlay .modal-box {
      max-width: 380px !important;
      padding: 30px 25px !important;
    }