/**
 * 꽁꽁닷컴 AI 콘텐츠 스타일
 * WordPress 플러그인용 CSS
 * Version: 2.0.0
 */

/* ========================================
   기본 컨테이너
======================================== */
.ggonggong-content {
    line-height: 1.8;
    color: #1a1a1a;
    font-size: 16px;
    word-break: break-word;
}

.ggonggong-content h1,
.ggonggong-content h2,
.ggonggong-content h3,
.ggonggong-content h4,
.ggonggong-content h5,
.ggonggong-content h6 {
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.ggonggong-content p {
    margin-bottom: 1em;
}

.ggonggong-content a {
    color: inherit;
    text-decoration: underline;
    transition: opacity 0.2s;
}

.ggonggong-content a:hover {
    opacity: 0.7;
}

.ggonggong-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5em auto;
    border-radius: 8px;
}

.ggonggong-content pre {
    background: #f5f5f5;
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1em 0;
}

.ggonggong-content code {
    background: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.ggonggong-content pre code {
    background: none;
    padding: 0;
}

.ggonggong-content blockquote {
    border-left: 4px solid;
    padding-left: 1em;
    margin: 1em 0;
    font-style: italic;
    opacity: 0.8;
}

.ggonggong-content ul,
.ggonggong-content ol {
    padding-left: 1.5em;
    margin: 1em 0;
}

.ggonggong-content li {
    margin: 0.5em 0;
}

.ggonggong-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}

.ggonggong-content th,
.ggonggong-content td {
    padding: 0.75em;
    border: 1px solid #ddd;
    text-align: left;
}

.ggonggong-content th {
    background: #f5f5f5;
    font-weight: 600;
}

/* ========================================
   스타일 1: Medium (클래식)
======================================== */
.ggonggong-style1 h1 { font-size: 2.5em; font-weight: 800; }
.ggonggong-style1 h2 { font-size: 2em; font-weight: 700; }
.ggonggong-style1 h3 { font-size: 1.5em; font-weight: 600; }
.ggonggong-style1 p { font-size: 1.1em; line-height: 1.8; }
.ggonggong-style1 blockquote { font-size: 1.2em; line-height: 1.6; }

/* ========================================
   스타일 2: Notion (미니멀)
======================================== */
.ggonggong-style2 h1 { font-size: 2.2em; font-weight: 700; letter-spacing: -0.02em; }
.ggonggong-style2 h2 { font-size: 1.8em; font-weight: 600; }
.ggonggong-style2 h3 { font-size: 1.4em; font-weight: 600; }
.ggonggong-style2 p { font-size: 1em; line-height: 1.75; color: #37352f; }
.ggonggong-style2 blockquote { 
    background: #f7f6f3; 
    padding: 1em; 
    border-left: 3px solid; 
    border-radius: 4px; 
}

/* ========================================
   스타일 3: Substack (뉴스레터)
======================================== */
.ggonggong-style3 h1 { 
    font-size: 2.8em; 
    font-weight: 800; 
    letter-spacing: -0.03em; 
    margin-bottom: 0.3em;
}
.ggonggong-style3 h2 { 
    font-size: 2em; 
    font-weight: 700; 
    margin-top: 1.5em; 
}
.ggonggong-style3 p { 
    font-size: 1.125em; 
    line-height: 1.9; 
    margin-bottom: 1.2em; 
}
.ggonggong-style3 blockquote {
    font-size: 1.3em;
    line-height: 1.7;
    padding: 1.5em;
    background: #f9f9f9;
    border-left: 4px solid;
}

/* ========================================
   스타일 4: Dev.to (개발자)
======================================== */
.ggonggong-style4 h1 { 
    font-size: 2.5em; 
    font-weight: 800; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.ggonggong-style4 h2 { font-size: 2em; font-weight: 700; }
.ggonggong-style4 h3 { font-size: 1.6em; font-weight: 600; }
.ggonggong-style4 p { font-size: 1.1em; line-height: 1.75; }
.ggonggong-style4 code {
    background: #272822;
    color: #f8f8f2;
    padding: 0.3em 0.5em;
}
.ggonggong-style4 pre {
    background: #272822;
    color: #f8f8f2;
    padding: 1.5em;
    border-radius: 8px;
}

/* ========================================
   스타일 5: Ghost (매거진)
======================================== */
.ggonggong-style5 h1 { 
    font-size: 3em; 
    font-weight: 800; 
    letter-spacing: -0.04em; 
    margin-bottom: 0.5em;
}
.ggonggong-style5 h2 { 
    font-size: 2.2em; 
    font-weight: 700; 
    margin-top: 1.8em; 
}
.ggonggong-style5 p { 
    font-size: 1.2em; 
    line-height: 2; 
    margin-bottom: 1.5em; 
}
.ggonggong-style5 img {
    max-width: 100%;
    margin: 2em auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

/* ========================================
   스타일 6: WordPress (전통)
======================================== */
.ggonggong-style6 h1 { font-size: 2.4em; font-weight: 700; }
.ggonggong-style6 h2 { font-size: 2em; font-weight: 600; }
.ggonggong-style6 h3 { font-size: 1.6em; font-weight: 600; }
.ggonggong-style6 p { font-size: 1.05em; line-height: 1.7; }
.ggonggong-style6 blockquote {
    background: #f9f9f9;
    padding: 1em 1.5em;
    border-left: 4px solid;
    font-style: italic;
}

/* ========================================
   스타일 7: Tistory/Velog (한국)
======================================== */
.ggonggong-style7 h1 { 
    font-size: 2.3em; 
    font-weight: 800; 
    padding-bottom: 0.3em; 
    border-bottom: 2px solid; 
}
.ggonggong-style7 h2 { 
    font-size: 1.9em; 
    font-weight: 700; 
    margin-top: 1.5em; 
}
.ggonggong-style7 h3 { font-size: 1.5em; font-weight: 600; }
.ggonggong-style7 p { font-size: 1.05em; line-height: 1.8; }
.ggonggong-style7 code {
    background: #f1f3f5;
    padding: 0.2em 0.5em;
    border-radius: 3px;
}
.ggonggong-style7 pre {
    background: #263238;
    color: #aed581;
    padding: 1.5em;
    border-radius: 4px;
}

/* ========================================
   색상 테마
======================================== */

/* Black */
.ggonggong-theme-black h1,
.ggonggong-theme-black h2,
.ggonggong-theme-black h3 { color: #000000; }
.ggonggong-theme-black a { color: #000000; }
.ggonggong-theme-black blockquote { border-left-color: #000000; }
.ggonggong-theme-black .ggonggong-style7 h1 { border-bottom-color: #000000; }

/* Blue */
.ggonggong-theme-blue h1,
.ggonggong-theme-blue h2,
.ggonggong-theme-blue h3 { color: #3B82F6; }
.ggonggong-theme-blue a { color: #3B82F6; }
.ggonggong-theme-blue blockquote { border-left-color: #3B82F6; }
.ggonggong-theme-blue .ggonggong-style7 h1 { border-bottom-color: #3B82F6; }

/* Green */
.ggonggong-theme-green h1,
.ggonggong-theme-green h2,
.ggonggong-theme-green h3 { color: #10B981; }
.ggonggong-theme-green a { color: #10B981; }
.ggonggong-theme-green blockquote { border-left-color: #10B981; }
.ggonggong-theme-green .ggonggong-style7 h1 { border-bottom-color: #10B981; }

/* Purple */
.ggonggong-theme-purple h1,
.ggonggong-theme-purple h2,
.ggonggong-theme-purple h3 { color: #8B5CF6; }
.ggonggong-theme-purple a { color: #8B5CF6; }
.ggonggong-theme-purple blockquote { border-left-color: #8B5CF6; }
.ggonggong-theme-purple .ggonggong-style7 h1 { border-bottom-color: #8B5CF6; }

/* Orange */
.ggonggong-theme-orange h1,
.ggonggong-theme-orange h2,
.ggonggong-theme-orange h3 { color: #F97316; }
.ggonggong-theme-orange a { color: #F97316; }
.ggonggong-theme-orange blockquote { border-left-color: #F97316; }
.ggonggong-theme-orange .ggonggong-style7 h1 { border-bottom-color: #F97316; }

/* Pink */
.ggonggong-theme-pink h1,
.ggonggong-theme-pink h2,
.ggonggong-theme-pink h3 { color: #EC4899; }
.ggonggong-theme-pink a { color: #EC4899; }
.ggonggong-theme-pink blockquote { border-left-color: #EC4899; }
.ggonggong-theme-pink .ggonggong-style7 h1 { border-bottom-color: #EC4899; }

/* Red */
.ggonggong-theme-red h1,
.ggonggong-theme-red h2,
.ggonggong-theme-red h3 { color: #EF4444; }
.ggonggong-theme-red a { color: #EF4444; }
.ggonggong-theme-red blockquote { border-left-color: #EF4444; }
.ggonggong-theme-red .ggonggong-style7 h1 { border-bottom-color: #EF4444; }

/* Indigo */
.ggonggong-theme-indigo h1,
.ggonggong-theme-indigo h2,
.ggonggong-theme-indigo h3 { color: #6366F1; }
.ggonggong-theme-indigo a { color: #6366F1; }
.ggonggong-theme-indigo blockquote { border-left-color: #6366F1; }
.ggonggong-theme-indigo .ggonggong-style7 h1 { border-bottom-color: #6366F1; }

/* Teal */
.ggonggong-theme-teal h1,
.ggonggong-theme-teal h2,
.ggonggong-theme-teal h3 { color: #14B8A6; }
.ggonggong-theme-teal a { color: #14B8A6; }
.ggonggong-theme-teal blockquote { border-left-color: #14B8A6; }
.ggonggong-theme-teal .ggonggong-style7 h1 { border-bottom-color: #14B8A6; }

/* ========================================
   반응형 (모바일)
======================================== */
@media (max-width: 768px) {
    .ggonggong-content {
        font-size: 14px;
    }
    
    .ggonggong-style1 h1,
    .ggonggong-style3 h1,
    .ggonggong-style5 h1 {
        font-size: 2em;
    }
    
    .ggonggong-style1 h2,
    .ggonggong-style3 h2,
    .ggonggong-style5 h2 {
        font-size: 1.6em;
    }
    
    .ggonggong-content img {
        margin: 1em auto;
    }
}