/* ==========================================================================
   2. Accessibility & SEO Base Styles
   ========================================================================== */
/* Includes global HTML element resets, body styling, and base link styles.
   Also contains initial dark mode detection for flash prevention. */

/* Global HTML elements - Lowest priority */
html {
    scroll-behavior: smooth;
    background-color: var(--bg-primary, #f8f9fa); /* CSS 변수 사용 및 기본값 설정 / 라이트 모드 */
    color: var(--text-primary, #343a40); /* 기본 텍스트 색상 추가 */
    transition: background-color var(--default-transition-duration) var(--default-transition-timing-function), color var(--default-transition-duration) var(--default-transition-timing-function); /* 전환 효과 추가 */
    overflow-x: hidden !important;
}

/* Body - Base styling */
body {
    background-color: var(--bg-primary) !important; /* CSS 변수를 통해 배경색 적용 (다크모드 시 --bg-primary가 다크모드 값으로 변경됨) */
    color: var(--text-primary) !important; /* CSS 변수를 통해 텍스트 색상 적용 */
    font-family: Roboto, sans-serif; /* 영문 기본 폰트 */
    line-height: 1.75;
    /* 페이지 로딩 중 깜빡임 방지 및 다크/라이트 모드 전환 부드럽게 */
    transition: background-color var(--default-transition-duration) var(--default-transition-timing-function), color var(--default-transition-duration) var(--default-transition-timing-function);
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    word-break: keep-all;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
}

body:lang(ko) {
    font-family: var(--font-main); /* 한글 폰트 */
}

/* Global link styling - Base level */
a {
    box-shadow: none;
    color: var(--text-primary);
    transition: color var(--default-transition-duration) var(--default-transition-timing-function), background-color var(--default-transition-duration) var(--default-transition-timing-function); /* 링크 배경색 변경도 고려 */
}

a:hover,
a:focus {
    text-decoration: none;
    box-shadow: none;
    color: var(--text-heading);
}

/* ==========================================================================
   3. Layout Structure (Medium Specificity)
   ========================================================================== */

/* ==========================================================================
   레이아웃 최종 수정안 (가장 확실한 방법)
   ========================================================================== */

/* 1. 최상위 콘텐츠 컨테이너(.site-content)의 너비를 940px로 고정하고 중앙 정렬합니다.
      이것이 모든 너비의 기준이 됩니다. */
.site-content {
    max-width: 940px !important;
    width: 100% !important;
    margin: 25px auto 0 auto !important; /* 위쪽 여백, 아래쪽 여백 0 */
    padding: 0 !important; /* 내부 패딩은 각 요소에서 제어하므로 0으로 리셋 */
    box-sizing: border-box !important;
}

/* 2. 중간 컨테이너들은 너비에 관여하지 않도록 100%로 설정합니다. */
#primary,
main.site-main#main {
    position: relative;
    z-index: 0;
    isolation: isolate;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Page structure */
#page {
    background-color: transparent;
    border: none;
    box-shadow: none;
    margin-top: 0;
}

/* Hide unused elements */
#right-sidebar,
#secondary {
    display: none;
}

/* ==========================================================================
   6. Home Page Layout (Specific Context)
   ========================================================================== */

/* Home page main container */
.site-main:not(.single-content) {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

/* Destination: layout/_layout.css */
#google-anno-sa {
    display: none !important;
}

#gp-left-sidebar-ad {
    left: 20px;
}

#gp-right-sidebar-ad {
    right: 20px;
}

#post-10 > div > div.entry-content > article > div:nth-child(2) {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#respond {
    margin-top: 2em !important;
    padding-top: 2em !important;
    border-top: 1px solid var(--border-primary) !important;
}

.byline .vcard::before {
    content: " " !important;
    margin-right: 3px !important;
}

.byline {
    letter-spacing: 0.5px !important;
}

.comment-form-comment textarea {
    width: 100% !important;
    padding: 15px !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 12px !important;
    font-size: 1em !important;
    color: var(--text-primary) !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    min-height: 120px !important;
    resize: vertical !important;
    transition: all 0.2s ease !important;
}

.comment-form-comment textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.2) !important;
    outline: none !important;
}

.comment-reply-title,
.comments-title {
    display: none !important;
}

.form-submit .submit {
    display: inline-block !important;
    padding: 12px 30px !important;
    background-color: var(--accent-color) !important;
    color: var(--white-color) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1em !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.2) !important;
}

.form-submit .submit:hover {
    background-color: #e6ac00 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.3) !important;
}

.gp-ad-container {
    margin: 30px auto;
    text-align: center;
    min-height: 90px;
    clear: both;
}

.gp-copy-url-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    font-weight: normal !important;
}

.gp-copy-url-btn.copied,
.social-share-btn.copy-link-icon-bottom.copied,
.social-share-btn.copy-link-icon-bottom.copied-feedback {
    background-color: #40c057 !important;
    color: var(--white-color) !important;
    border-color: #40c057 !important;
    animation: copySuccess 0.6s ease-in-out !important;
}

.gp-copy-url-btn.copied::before,
.social-share-btn.copy-link-icon-bottom.copied::before,
.social-share-btn.copy-link-icon-bottom.copied-feedback::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.gp-copy-url-btn::before,
.social-share-btn.copy-link-icon-bottom::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.72'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.72'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.gp-copy-url-btn:hover,
.social-share-btn.copy-link-icon-bottom:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: var(--border-meta);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.social-share-btn.u-btn {
    background-color: #7f8c8d; /* Neutral gray */
}

.gp-meta-bar-after-title,
.entry-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 8px !important;
    justify-content: flex-end !important;
    margin-top: 0 !important;
}

.gp-sidebar-ad {
    display: none;
    position: fixed;
    top: 150px;
    width: 160px;
    height: 600px;
    z-index: 100;
}

.gp-top-meta-bar > * {
    justify-self: auto !important;
    flex-grow: 0;
}

.is-updatable .posted-on-wrapper {
    cursor: pointer;
}

.logged-in-as a {
    color: var(--text-link) !important;
    text-decoration: underline !important;
}

.logged-in-as {
    font-size: 0.9em !important;
    color: var(--text-muted) !important;
    margin-bottom: 1em !important;
}

.posted-on-wrapper .date-primary,
.reading-time-meta,
.byline {
    vertical-align: top !important;
}

.posted-on-wrapper .date-secondary .date-label {
    color: var(--text-muted) !important;
}

.posted-on-wrapper .date-secondary time {
    color: var(--text-primary) !important;
}

.posted-on-wrapper .date-secondary {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-meta) !important;
}

.posted-on-wrapper.expanded {
    display: flex;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.single .generate-before-content .gp-post-category {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.site-footer-container .footer-about p {
    padding-right: 0;
    margin-top: 15px;
    text-align: center;
}

.site-footer-container .footer-about {
    width: 98%;
}

.site-footer-container .footer-copyright {
    margin-top: 40px;
}

.site-footer-container .footer-grid > div {
    display: inline-block;
    width: 48%;
    margin: 0 1% 30px;
    vertical-align: top;
}

.site-footer-container .footer-heading,
.site-footer-container .footer-about .site-name {
    text-align: center;
}

.site-footer-container .footer-heading::after,
.site-footer-container .footer-about .site-name::after {
    left: 50%;
    transform: translateX(-50%);
}

.site-footer-container {
    padding: 0 20px !important;
}

.site-main article.post .inside-article,
body:not(.single) article.post .entry-footer {
    border: none !important;
    box-shadow: none !important;
}

.site-main article.post {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@keyframes copySuccess {
    0% {
        background-color: var(--bg-tertiary);
        transform: scale(1);
    }
    30% {
        background-color: #40c057;
        transform: scale(1.2);
    }
    60% {
        background-color: #40c057;
        transform: scale(1.1);
    }
    100% {
        background-color: #40c057;
        transform: scale(1);
    }
}

@keyframes gpCustomCopySuccess {
    0% {
        background-color: #6c757d;
        transform: scale(1);
    }
    30% {
        background-color: #28a745;
        transform: scale(1.2);
    }
    60% {
        background-color: #28a745;
        transform: scale(1.1);
    }
    100% {
        background-color: #28a745;
        transform: scale(1);
    }
}

body .social-share-btn.copy-link-icon-bottom,
body footer .social-share-btn.copy-link-icon-bottom,
body .share-buttons .social-share-btn.copy-link-icon-bottom,
.entry-content .social-share-btn.copy-link-icon-bottom {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background-color: #242526 !important;
    color: #e4e6eb !important;
    border: 1px solid #4a4c4e !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    font-weight: normal !important;
    box-shadow: none !important;
    outline: none !important;
}

body.left-sidebar-ad-active #gp-left-sidebar-ad,
body.right-sidebar-ad-active #gp-right-sidebar-ad {
    display: block;
}

body.single .featured-image,
body.single .post-image,
body.single .entry-content .wp-block-image {
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

body.single .gp-copy-url-btn {
    display: inline-flex !important;
}

body:not(.single) .comments-link a,
body:not(.single) .entry-meta a[href*="comment"],
body:not(.single) .post-meta a[href*="comment"] {
    display: none !important;
}

body:not(.single) .comments-link,
body:not(.single) .entry-meta .comments-link,
body:not(.single) .post-meta .comments-link,
body:not(.single) .entry-footer .comments-link {
    display: none !important;
}

body:not(.single) .gp-copy-url-btn {
    display: none !important;
}

body:not(.single) .gp-meta-bar-after-title,
body:not(.single) .entry-meta {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

body:not(.single) .gp-meta-bar-after-title,
body:not(.single) .entry-meta,
body:not(.single) .posted-on-wrapper,
body:not(.single) .reading-time-meta,
body:not(.single) .byline {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

body:not(.single) .inside-article {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 5px !important;
}

body:not(.single) .site-main article.post {
    margin-bottom: 35px !important;
}

body:not(.single) article.post .entry-footer *,
body:not(.single) .site-main article.post .entry-footer * {
    display: none !important;
}

body:not(.single) article.post .entry-footer {
    display: none !important;
}

body:not(.single) article.post .entry-footer,
body:not(.single) .site-main article.post .entry-footer {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body:not(.single) article.post .entry-title {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    background-color: var(--bg-tertiary) !important;
    color: var(--text-heading) !important;
    padding: 20px 30px !important;
    border-radius: 12px !important;
    text-align: center !important;
    margin-bottom: 1em !important;
}

body:not(.single) article.post .inside-article > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

body:not(.single) article.post {
    border: none !important;
    padding-bottom: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 35px !important;
    overflow: hidden !important;
    position: relative !important;
}

div.key-concept-box table th,
div.key-concept-box table td {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

div.key-concept-box table {
    border-spacing: 0 !important;
}

h3:first-child:not(:has(+ h2, + h3, + h4, + h5, + h6))::before,
h3:first-child:not(:has(+ h2, + h3, + h4, + h5, + h6))::after {
    display: none !important;
    content: "" !important;
}

html.dark-mode-active #respond {
    border-top-color: var(--border-primary) !important;
}

html.dark-mode-active .comment-form-comment textarea {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
    color: var(--text-primary) !important;
}

html.dark-mode-active .comment-form-comment textarea:focus {
    border-color: var(--accent-color) !important;
}

html.dark-mode-active .gp-copy-url-btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative;
    font-weight: normal !important;
}

html.dark-mode-active .gp-copy-url-btn.copied {
    background-color: #40c057 !important;
    color: var(--white-color) !important;
    border: none !important;
    box-shadow: none !important;
    animation: copySuccess 0.6s ease-in-out !important;
}

html.dark-mode-active .gp-copy-url-btn:hover {
    transform: translateY(-2px);
    color: var(--text-primary) !important;
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1) !important;
    border: none !important;
}

html.dark-mode-active .gp-custom-copy-bottom-btn {
    background-color: #343a40 !important;
    color: #ffffff !important;
    border-color: #495057 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

html.dark-mode-active .gp-custom-copy-bottom-btn.copied {
    background-color: #218838 !important;
    border-color: #19692c !important;
}

html.dark-mode-active .gp-custom-copy-bottom-btn:hover {
    background-color: #495057 !important;
    border-color: #5a6268 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark-mode-active .logged-in-as a {
    color: var(--text-link) !important;
}

html.dark-mode-active .posted-on-wrapper .date-secondary {
    background-color: var(--bg-tertiary) !important;
    border: 1px solid var(--border-secondary) !important;
    color: var(--text-secondary) !important;
}

html.dark-mode-active .social-share-btn.facebook,
html.dark-mode-active .social-share-btn.x-btn {
    border: 1px solid var(--border-secondary) !important;
}

html.dark-mode-active body:not(.single) article.post .entry-footer,
html.dark-mode-active body:not(.single) .site-main article.post .entry-footer {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

html.dark-mode-active body:not(.single) article.post .entry-title {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}


@media (max-width: 1600px) {
    .gp-sidebar-ad {
        display: none;
    }
}

@media (max-width: 768px) {
    .entry-content p,
    .entry-content li,
    .post-content p,
    .post-content li,
    .page-content p,
    .page-content li {
        padding-left: 0 !important;
        text-indent: 0 !important;
    }
    div[style*="border-left: 5px solid #17a2b8"] {
        padding-left: 15px;
        padding-right: 15px;
    }
}