@charset "utf-8";

/* Base Content */
.Notecontent { font-family: Pretendard, -apple-system, sans-serif; margin: 0 auto; line-height: 1.6; color: #333; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border-radius: 16px; font-size: 16px; }

/* Main Title */
.Notecontent .main-title { font-size: 20px; font-weight: 700; background: #fff; padding: 24px 0px; border-bottom: 3px solid #2097ff; }

/* Learning Objective */
.Notecontent .object { background: #ffffff; padding: 24px; border-radius: 12px; margin: 24px 0; border: 1px solid #e5e7eb; }
.Notecontent .object-item { margin-bottom: 12px; position: relative; padding-left: 40px; color: #333; }
.Notecontent .object-item::before { content: "\2705"; position: absolute; left: 8px; }

/* Section */
.Notecontent .section { font-size: 16px; font-weight: 600; background: #fff; padding: 10px 10px; margin: 10px 0 20px; }

/* Section Title */
.Notecontent .section-title { font-size: 18px; font-weight: 600; background: #fff; margin: 10px 0 20px; }
.Notecontent .sub-section { background: #fff; padding: 24px; border-radius: 12px; margin: 24px 0; border: 1px solid #e5e7eb; }
.Notecontent .sub-section-title { font-size: 10px; font-weight: 600; background: #fff; padding: 16px 20px; margin: 10px 0 20px; border-radius: 8px; line-height: 1.4; }

/* Item*/
.Notecontent .test-item { margin-bottom: 16px; padding-left: 8px; }
.Notecontent .test-item::before { margin-right: 8px; }
.Notecontent .check-item { padding: 12px 16px; position: relative; padding-left: 32px; }
.Notecontent .check-item::before { content: "✓"; position: absolute; left: 8px; color: #339026; font-weight: 600; }
.Notecontent .check-item { padding: 12px 16px; position: relative; padding-left: 32px; }
.Notecontent .check-item::before { content: "•"; position: absolute; left: 8px; color: #339026; font-weight: 600; }

/* Table Styles */
.Notecontent .table-basic { width: 100%; border-collapse: collapse; margin: 24px 0; padding: 10px; }
.Notecontent .table-basic table { width: 100%; border-collapse: collapse; }
.Notecontent .table-basic th { background-color: #f8f9fa; font-weight: 600; text-align: left; padding: 16px; border: 1px solid #e5e7eb; }
.Notecontent .table-basic td { padding: 16px; border: 1px solid #e5e7eb; }
.Notecontent .table-cell { padding: 16px; }

/* Highlight Text */
.Notecontent .year-text { background: #ec5353 ; border-radius: 10px; padding: 2px 5px; color: #fff; }
.Notecontent .highlight-text { background:#ffece6 ; border-radius: 4px; border-radius: 10px; padding: 2px 5px; }

/* ?€?€ Images ?€?€ */
.Secretnote img { max-width: 100%; height: auto; border-radius: 6px; margin: 10px 0; }
.Secretnote img.full-width { width: 100%; border-radius: 8px; }
.Secretnote .image-caption { text-align: center; font-size: 0.85em; color: #888; margin-top: 4px; }

/* ?€?€ Table Container (scroll wrapper) ?€?€ */
.Secretnote .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
.Secretnote .table-container table { width: 100%; min-width: 500px; }

/* Mobile Responsive */

@media screen and (max-width: 768px) {
  .Notecontent { padding: 0px; margin: 0px; }
  .Notecontent .title-main { font-size: 20px; padding: 20px; }
  .Notecontent .keywords-box { padding: 12px; gap: 6px; }
  .Notecontent .keyword { padding: 4px 10px; font-size: 13px; }
  .Notecontent .case-study, .Notecontent .self-test { padding: 20px; }
}