/**
 * Markdown Content Shared Styles
 * 에디터 입력과 출력 화면에서 공유하는 마크다운 스타일
 *
 * @version 20260203-001
 */

/* ========================================
   Base Markdown Content Container
   ======================================== */

.md-content {
    font-family: var(--md-font-family);
    font-size: var(--gb-font-base);
    line-height: 1.7;
    color: var(--gb-gray-800);
    word-break: break-word;
}

/* ----------------------------------------
   Typography - Headings
   ---------------------------------------- */

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
    font-weight: var(--gb-font-semibold);
    line-height: var(--gb-leading-tight);
    color: var(--gb-gray-900);
    margin-top: var(--md-heading-gap);
    margin-bottom: var(--md-paragraph-gap);
}

.md-content h1:first-child,
.md-content h2:first-child,
.md-content h3:first-child,
.md-content h4:first-child {
    margin-top: 0;
}

.md-content h1 {
    font-size: var(--md-h1-size);
    font-weight: var(--gb-font-bold);
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--gb-gray-200);
}

.md-content h2 {
    font-size: var(--md-h2-size);
    font-weight: var(--gb-font-bold);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--gb-gray-200);
}

.md-content h3 {
    font-size: var(--md-h3-size);
}

.md-content h4 {
    font-size: var(--md-h4-size);
}

.md-content h5 {
    font-size: var(--md-h5-size);
}

.md-content h6 {
    font-size: var(--md-h6-size);
    color: var(--gb-gray-600);
}

/* ----------------------------------------
   Paragraphs & Text
   ---------------------------------------- */

.md-content p {
    margin-bottom: var(--md-paragraph-gap);
}

.md-content p:last-child {
    margin-bottom: 0;
}

.md-content strong,
.md-content b {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-900);
}

.md-content em,
.md-content i {
    font-style: italic;
}

.md-content del,
.md-content s {
    text-decoration: line-through;
    color: var(--gb-gray-500);
}

.md-content mark {
    background-color: #fff3cd;
    padding: 0.1em 0.2em;
    border-radius: 0.125rem;
}

.md-content a {
    color: var(--gb-primary);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: text-decoration-color 0.2s, color 0.2s;
}

.md-content a:hover {
    color: var(--gb-primary-hover);
    text-decoration-color: var(--gb-primary-hover);
}

/* ----------------------------------------
   Lists
   ---------------------------------------- */

.md-content ul,
.md-content ol {
    margin: 1rem 0;
    padding-left: var(--md-list-indent);
}

.md-content ul {
    list-style-type: disc;
}

.md-content ol {
    list-style-type: decimal;
}

.md-content li {
    margin-bottom: 0.25rem;
    line-height: 1.6;
}

.md-content li:last-child {
    margin-bottom: 0;
}

.md-content li > ul,
.md-content li > ol {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Nested list styles */
.md-content ul ul {
    list-style-type: circle;
}

.md-content ul ul ul {
    list-style-type: square;
}

/* Task List (체크박스) */
.md-content ul.contains-task-list,
.md-content .task-list {
    list-style: none;
    padding-left: 0;
}

.md-content .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding-left: 0;
}

.md-content .task-list-item::before {
    content: none;
}

.md-content .task-list-item input[type="checkbox"] {
    margin-top: 0.35rem;
    width: 16px;
    height: 16px;
    accent-color: var(--gb-primary);
    flex-shrink: 0;
}

/* ----------------------------------------
   Blockquote
   ---------------------------------------- */

.md-content blockquote {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--md-blockquote-border);
    background-color: var(--md-blockquote-bg);
    color: var(--md-blockquote-text);
    border-radius: 0 var(--gb-radius) var(--gb-radius) 0;
}

.md-content blockquote p {
    margin-bottom: 0;
}

.md-content blockquote p + p {
    margin-top: 0.5rem;
}

.md-content blockquote blockquote {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

/* ----------------------------------------
   Code Blocks (Light Theme)
   ---------------------------------------- */

/* Inline Code */
.md-content code:not(pre code) {
    font-family: var(--md-font-mono);
    font-size: 0.875em;
    padding: 0.2em 0.4em;
    background-color: var(--md-code-inline-bg);
    color: var(--md-code-inline-text);
    border-radius: 0.25rem;
    white-space: nowrap;
}

/* Code Block Container */
.md-content pre {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--md-code-bg);
    border: 1px solid var(--md-code-border);
    border-radius: var(--gb-radius-lg);
    overflow-x: auto;
    position: relative;
}

.md-content pre code {
    font-family: var(--md-font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--md-code-text);
    background: transparent;
    padding: 0;
    white-space: pre;
    tab-size: 4;
    border-radius: 0;
}

/* 언어 라벨 */
.md-content pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-family: var(--md-font-family);
    color: var(--gb-gray-500);
    background-color: var(--gb-gray-100);
    border-radius: 0 var(--gb-radius-lg) 0 var(--gb-radius);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Scrollbar */
.md-content pre::-webkit-scrollbar {
    height: 8px;
}

.md-content pre::-webkit-scrollbar-track {
    background: var(--gb-gray-100);
    border-radius: 4px;
}

.md-content pre::-webkit-scrollbar-thumb {
    background: var(--gb-gray-300);
    border-radius: 4px;
}

.md-content pre::-webkit-scrollbar-thumb:hover {
    background: var(--gb-gray-400);
}

/* ----------------------------------------
   Syntax Highlighting (Light Theme)
   ---------------------------------------- */

.md-content .token.comment,
.md-content .token.prolog,
.md-content .token.doctype,
.md-content .token.cdata {
    color: var(--md-syntax-comment);
    font-style: italic;
}

.md-content .token.punctuation {
    color: var(--gb-gray-600);
}

.md-content .token.namespace {
    opacity: 0.7;
}

.md-content .token.property,
.md-content .token.tag,
.md-content .token.boolean,
.md-content .token.number,
.md-content .token.constant,
.md-content .token.symbol,
.md-content .token.deleted {
    color: var(--md-syntax-number);
}

.md-content .token.selector,
.md-content .token.attr-name,
.md-content .token.string,
.md-content .token.char,
.md-content .token.builtin,
.md-content .token.inserted {
    color: var(--md-syntax-string);
}

.md-content .token.operator,
.md-content .token.entity,
.md-content .token.url,
.md-content .language-css .token.string,
.md-content .style .token.string {
    color: var(--md-syntax-variable);
}

.md-content .token.atrule,
.md-content .token.attr-value,
.md-content .token.keyword {
    color: var(--md-syntax-keyword);
}

.md-content .token.function,
.md-content .token.class-name {
    color: var(--md-syntax-function);
}

.md-content .token.regex,
.md-content .token.important,
.md-content .token.variable {
    color: var(--md-syntax-variable);
}

.md-content .token.important,
.md-content .token.bold {
    font-weight: 600;
}

.md-content .token.italic {
    font-style: italic;
}

/* ----------------------------------------
   Tables
   ---------------------------------------- */

.md-content table {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: var(--gb-font-sm);
}

.md-content th,
.md-content td {
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--md-table-border);
    text-align: left;
    vertical-align: top;
}

.md-content th {
    background-color: var(--md-table-header-bg);
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-700);
}

.md-content tbody tr:nth-child(even) {
    background-color: var(--md-table-stripe-bg);
}

.md-content tbody tr:hover {
    background-color: var(--gb-gray-100);
}

/* Table responsive wrapper */
.md-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ----------------------------------------
   Horizontal Rule
   ---------------------------------------- */

.md-content hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid var(--gb-gray-200);
}

/* ----------------------------------------
   Images
   ---------------------------------------- */

.md-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--gb-radius);
}

.md-content figure {
    margin: 1rem 0;
}

.md-content figcaption {
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-500);
    text-align: center;
    margin-top: 0.5rem;
}

/* ----------------------------------------
   Definition Lists
   ---------------------------------------- */

.md-content dl {
    margin: 1rem 0;
}

.md-content dt {
    font-weight: var(--gb-font-semibold);
    color: var(--gb-gray-900);
    margin-top: 0.75rem;
}

.md-content dt:first-child {
    margin-top: 0;
}

.md-content dd {
    margin-left: var(--md-list-indent);
    color: var(--gb-gray-700);
}

/* ----------------------------------------
   Footnotes
   ---------------------------------------- */

.md-content .footnotes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--gb-gray-200);
    font-size: var(--gb-font-sm);
    color: var(--gb-gray-600);
}

.md-content .footnote-ref {
    font-size: 0.75em;
    vertical-align: super;
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 768px) {
    .md-content {
        font-size: var(--gb-font-sm);
        line-height: 1.6;
    }

    .md-content h1 {
        font-size: var(--gb-font-2xl);
    }

    .md-content h2 {
        font-size: var(--gb-font-xl);
    }

    .md-content h3 {
        font-size: var(--gb-font-lg);
    }

    .md-content pre {
        font-size: 0.8125rem;
        padding: 0.75rem;
        border-radius: var(--gb-radius);
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        border-radius: 0;
    }

    .md-content table {
        font-size: var(--gb-font-xs);
    }

    .md-content th,
    .md-content td {
        padding: 0.5rem;
    }

    .md-content blockquote {
        padding: 0.5rem 0.75rem;
    }
}