@charset "UTF-8";
/* =========================================
   MyEssay Article Styles (Refactored)
   - 変数とミックスイン
   - レイアウトコンポーネント
   - スコアリングセクション
   - ツールチップシステム
   - レスポンシブデザイン
   ========================================= */
/* -----------------------------
   Variables & Color Palette
   ----------------------------- */
/* -----------------------------
   Helper Functions
   ----------------------------- */
/* -----------------------------
   Mixins
   ----------------------------- */
/* -----------------------------
   Base Layout Components
   ----------------------------- */
.summary-section {
  background: #F9F9F9;
  border: 1px solid #9BC7E4;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(4, 63, 109, 0.08);
  margin: 2rem 0;
}
.summary-section .summary-title {
  font-size: 1.4em;
  color: #043F6D;
  margin-bottom: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.task-section {
  border-left: 4px solid #46A2DA;
  background: hsl(203, 66.7%, 95%);
  padding: 0.75rem 1.5rem;
  margin: 1rem 0;
  font-weight: 600;
  line-height: 1.5;
}

.feedback-types {
  background: #E3F0F9;
  border: 1px solid #9BC7E4;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(4, 63, 109, 0.08);
  margin: 2rem 0;
}
.feedback-types h3 {
  color: #043F6D;
  margin-bottom: 1rem;
  font-size: 1.3em;
  font-weight: 600;
}
.feedback-types ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.feedback-types ul li {
  background: #fff;
  margin: 0.75rem 0;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  border-left: 4px solid #46A2DA;
  box-shadow: 0 2px 4px rgba(4, 63, 109, 0.08);
  color: #35393C;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.feedback-types ul li i {
  color: #46A2DA;
  flex-shrink: 0;
}
.feedback-types ul li.small {
  font-size: 0.9em;
  opacity: 0.8;
}

/* -----------------------------
   Scores Section
   ----------------------------- */
.scores-section {
  background: linear-gradient(135deg, #043F6D 0%, #46A2DA 100%);
  color: #fff;
  border-radius: 15px;
  padding: 2rem;
  margin: 2rem 0;
  text-align: center;
}
.scores-section h3 {
  margin-top: 0;
  font-size: 1.5em;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.scores-section .overall-score {
  font-size: 3em;
  font-weight: 700;
  margin: 1.5rem 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
.scores-section .score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.scores-section .score-item {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: 0.2s ease;
}
.scores-section .score-item:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}
.scores-section .score-item .score-label {
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  opacity: 0.9;
  line-height: 1.2;
}
.scores-section .score-item .score-value {
  font-size: 2em;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1;
}
.scores-section .tr-comment-section h6,
.scores-section .cc-comment-section h6,
.scores-section .lr-comment-section h6,
.scores-section .gr-comment-section h6 {
  margin-top: 2rem;
  font-size: 1.1em;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.scores-section .tr-comment,
.scores-section .cc-comment,
.scores-section .lr-comment,
.scores-section .gr-comment {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}
/* -----------------------------
   Essay Content & Highlighting
   ----------------------------- */
.essay-section {
  line-height: 1.8;
  font-size: 1rem;
}
.essay-section p {
  margin-bottom: 1.5rem;
}
.essay-section .strike,
.essay-section .insert,
.essay-section .trcc,
.essay-section .lrgr,
.essay-section .cclr,
.essay-section .ccgr {
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.essay-section .strike {
  text-decoration: line-through;
  color: #EB4878;
  background: rgba(235, 72, 120, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
}
.essay-section .insert {
  color: #46A2DA;
  background: rgba(70, 162, 218, 0.1);
  padding: 2px 4px;
  border-radius: 3px;
  font-weight: 600;
}
.essay-section .trcc {
  background: rgba(235, 72, 120, 0.15);
  padding: 2px 4px;
  border-radius: 3px;
  border-bottom: 2px solid #EB4878;
  font-weight: 400 !important;
}
.essay-section .lrgr {
  background: rgba(194, 127, 0, 0.15);
  padding: 2px 4px;
  border-radius: 3px;
  border-bottom: 2px solid #c27f00;
  font-weight: 400 !important;
}
.essay-section .cclr {
  background: linear-gradient(135deg, rgba(235, 72, 120, 0.08) 70%, rgba(194, 127, 0, 0.08) 100%);
  padding: 2px 4px;
  border-radius: 3px;
  border-bottom: 2px solid;
  -o-border-image: linear-gradient(135deg, #EB4878 70%, #c27f00 100%) 1;
     border-image: linear-gradient(135deg, #EB4878 70%, #c27f00 100%) 1;
  font-weight: 400 !important;
}
.essay-section .ccgr {
  background: linear-gradient(135deg, rgba(235, 72, 120, 0.08) 70%, rgba(194, 127, 0, 0.08) 100%);
  padding: 2px 4px;
  border-radius: 3px;
  border-bottom: 2px solid;
  -o-border-image: linear-gradient(135deg, #EB4878 70%, #c27f00 100%) 1;
     border-image: linear-gradient(135deg, #EB4878 70%, #c27f00 100%) 1;
  font-weight: 400 !important;
}

/* -----------------------------
   Tooltip System (最重要)
   ----------------------------- */
.hint-icon {
  display: inline-block !important;
  position: relative !important;
  isolation: isolate !important;
  z-index: 1000 !important;
  margin-left: 0.35em !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  vertical-align: baseline !important;
}

.badge-cclr,
.badge-ccgr, .badge-lrgr, .badge-trcc {
  color: #fff;
  border-radius: 5px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 600;
  position: relative;
  z-index: 1000 !important;
  display: inline-block;
  cursor: help;
  transition: 0.15s ease;
  transition: all 0.2s ease;
}
.badge-cclr:hover,
.badge-ccgr:hover, .badge-lrgr:hover, .badge-trcc:hover {
  transform: scale(1.05);
  color: #fff !important;
}
.badge-cclr:focus,
.badge-ccgr:focus, .badge-lrgr:focus, .badge-trcc:focus, .badge-cclr:focus-visible,
.badge-ccgr:focus-visible, .badge-lrgr:focus-visible, .badge-trcc:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(70, 162, 218, 0.3);
}
.badge-cclr:hover,
.badge-ccgr:hover, .badge-lrgr:hover, .badge-trcc:hover {
  color: #fff !important;
}

.badge-trcc {
  background: #EB4878;
}
.badge-trcc:hover {
  background: hsl(342, 80.3%, 70.2%);
}
.badge-trcc.legacy {
  font-size: 0.7rem;
  padding: 2px 4px;
}

.badge-lrgr {
  background: #c27f00;
}
.badge-lrgr:hover {
  background: hsl(39, 100%, 48%);
}
.badge-lrgr.legacy {
  font-size: 0.7rem;
  padding: 2px 4px;
}

.badge-cclr,
.badge-ccgr {
  background: linear-gradient(135deg, #EB4878 55%, #c27f00 100%);
}
.badge-cclr:hover,
.badge-ccgr:hover {
  background: linear-gradient(135deg, hsl(342, 80.3%, 70.2%), hsl(39, 100%, 48%));
}
.badge-cclr.legacy,
.badge-ccgr.legacy {
  font-size: 0.7rem;
  padding: 2px 4px;
}

.badge-cclr,
.badge-ccgr {
  background: linear-gradient(135deg, #EB4878 55%, #c27f00 100%);
}
.badge-cclr:hover,
.badge-ccgr:hover {
  background: linear-gradient(135deg, hsl(342, 80.3%, 70.2%), hsl(39, 100%, 48%));
}
.badge-cclr.legacy,
.badge-ccgr.legacy {
  font-size: 0.7rem;
  padding: 2px 4px;
}

[data-bs-toggle=tooltip] {
  z-index: 1000 !important;
  position: relative !important;
  pointer-events: auto !important;
  cursor: help !important;
}

.tooltip {
  z-index: 9999999 !important;
  font-size: 12px;
}
.tooltip .tooltip-inner {
  background-color: #333 !important;
  color: #fff;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  max-width: 300px;
  text-align: left !important;
  position: relative;
  z-index: 9999999 !important;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.1rem;
}
.tooltip .tooltip-arrow {
  z-index: 9999999 !important;
}
.tooltip.bs-tooltip-left .tooltip-arrow::before {
  border-left-color: #333 !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #333 !important;
}
.tooltip.bs-tooltip-right .tooltip-arrow::before {
  border-right-color: #333 !important;
}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #333 !important;
}
.tooltip.show {
  z-index: 9999999 !important;
}

body > .tooltip {
  z-index: 9999999 !important;
}

html .tooltip,
body .tooltip,
.tooltip-inner {
  z-index: 9999999 !important;
}

/* -----------------------------
   Ask Expert Box
   ----------------------------- */
.ask-expert-box {
  background: hsl(203, 66.7%, 95%);
  border: 2px solid #46A2DA;
  border-radius: 10px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(4, 63, 109, 0.08);
  margin: 2rem 0;
}
.ask-expert-box .ask-expert-title {
  color: #043F6D;
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ask-expert-box .ask-expert-title i {
  color: #46A2DA;
}
.ask-expert-box .ask-expert-content p {
  margin-bottom: 1rem;
  line-height: 1.6;
}
.ask-expert-box .ask-expert-content .btn-primary {
  background: #46A2DA;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  transition: 0.2s ease;
}
.ask-expert-box .ask-expert-content .btn-primary:hover {
  background: #043F6D;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(4, 63, 109, 0.12);
}
.ask-expert-box .ask-expert-content .btn-primary:focus, .ask-expert-box .ask-expert-content .btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(70, 162, 218, 0.3);
}

/* -----------------------------
   Responsive Design
   ----------------------------- */
@media (max-width: 768px) {
  .scores-section {
    padding: 1.5rem;
  }
  .scores-section .overall-score {
    font-size: 2.5em;
  }
  .scores-section .score-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .scores-section .score-item {
    padding: 1rem;
  }
  .summary-section,
  .feedback-types {
    padding: 1.5rem;
  }
  .task-section {
    padding: 0.75rem 1rem;
  }
}
@media (max-width: 576px) {
  .scores-section .score-grid {
    grid-template-columns: 1fr;
  }
  .scores-section .overall-score {
    font-size: 2em;
  }
  .tooltip .tooltip-inner {
    max-width: 250px;
    font-size: 11px;
  }
}
/* -----------------------------
   Accessibility & Motion
   ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
@media (prefers-contrast: high) {
  .tooltip .tooltip-inner {
    border: 2px solid #fff;
  }
  .badge-lrgr,
  .badge-trcc {
    border: 1px solid #fff;
  }
}
:focus-visible {
  outline: 2px solid #46A2DA;
  outline-offset: 2px;
}

/* -----------------------------
   Print Styles
   ----------------------------- */
@media print {
  .tooltip,
  .hint-icon,
  .badge-lrgr,
  .badge-trcc {
    display: none !important;
  }
  .scores-section {
    background: #fff !important;
    color: #000 !important;
    border: 2px solid #043F6D !important;
  }
}/*# sourceMappingURL=local.css.map */