/**
 * WBM 2.0 frontend
 * Version: staged 0.1
 *
 * Principles
 * - preserve the current WBM visual identity
 * - keep legacy article images at their natural size
 * - never force article-body images to width:100%
 * - separate article images from archive/card thumbnails
 * - avoid broad selectors and unnecessary !important
 */

/* =========================================================
   1. Design tokens
   ========================================================= */

:root {
    --wbm-text: #222222;
    --wbm-text-body: #333333;
    --wbm-muted: #666666;
    --wbm-caption: #777777;
    --wbm-border: #eeeeee;
    --wbm-surface: #ffffff;

    --wbm-article-title: 35px;
    --wbm-article-body: 15px;
    --wbm-article-line: 1.5;
}


/* =========================================================
   2. Base
   ========================================================= */

body {
    color: var(--wbm-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}


/* =========================================================
   3. Single article
   ========================================================= */

/*
 * WBM articles normally place the first source image
 * inside the article body.
 *
 * Hide only GeneratePress's automatic featured-image output.
 * Do NOT hide .attachment-full or .size-full globally.
 */
.single-post .page-header-image-single {
    display: none;
}

.single-post .inside-article {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.single-post .entry-title {
    margin-bottom: 20px;
    color: #111111;
    font-size: var(--wbm-article-title);
    font-weight: 800;
    line-height: 1.3;
}

.single-post .entry-meta {
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--wbm-border);
    color: var(--wbm-muted);
    font-size: 14px;
}

.single-post .entry-meta .byline a {
    color: var(--wbm-muted);
    text-decoration: none;
}

.single-post .entry-meta .byline a:hover,
.single-post .entry-meta .byline a:focus {
    color: #000000;
    text-decoration: underline;
}

.single-post .entry-content {
    margin-top: 0;
    margin-bottom: 0;
    color: var(--wbm-text-body);
    font-size: var(--wbm-article-body);
    line-height: var(--wbm-article-line);
}


/* =========================================================
   4. Article images — legacy-safe
   ========================================================= */

/*
 * Critical WBM rule:
 *
 * Large images may shrink to fit the article.
 * Small originals must NOT be enlarged.
 */
.single-post .entry-content img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/*
 * Support both Gutenberg and GenerateBlocks article images.
 */
.single-post .entry-content figure {
    max-width: 100%;
}

.single-post .entry-content figure.aligncenter,
.single-post .entry-content .wp-block-image.aligncenter {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.single-post .entry-content figure.alignleft {
    margin-right: 1.5em;
}

.single-post .entry-content figure.alignright {
    margin-left: 1.5em;
}

/*
 * GenerateBlocks may center images through the parent element.
 * Keep the image itself at its natural dimensions.
 */
.single-post .entry-content [class*="gb-media-"] {
    width: auto;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   5. Captions
   ========================================================= */

.single-post .entry-content figure figcaption,
.single-post .entry-content .wp-block-image figcaption,
.single-post .entry-content .wp-element-caption {
    display: block;
    margin-top: 2px;
    color: var(--wbm-caption);
    font-size: 12px;
    line-height: 1.5;
}


/* =========================================================
   6. Pages
   ========================================================= */

/* Preserve the current WBM page behavior. */
.page .page-header-image-single {
    display: none;
}


/* =========================================================
   Archive / Search / Author
   ========================================================= */

/*
 * Intentionally not implemented yet.
 *
 * Legacy low-resolution thumbnails require a separate policy.
 * Do not copy the existing forced 280x165 + width:100% rules.
 */


/* =========================================================
   Header / Home / Footer / Mobile
   ========================================================= */

/*
 * Staged for later passes.
 */


/* =========================================================
   7. Archive / Search / Author
   ========================================================= */

@media (min-width: 768px) {
    .archive .inside-article,
    .search-results .inside-article,
    .blog .inside-article {
        display: grid;
        grid-template-columns: 280px minmax(0, 1fr);
        grid-template-areas:
            "image header"
            "image summary"
            "image footer";
        column-gap: 35px;
        row-gap: 0;
        align-items: start;
        margin-bottom: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid var(--wbm-border);
    }

    .archive .inside-article .post-image,
    .search-results .inside-article .post-image,
    .blog .inside-article .post-image {
        grid-area: image;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 280px;
        height: 165px;
        margin: 0;
        overflow: hidden;
        background: #f7f7f7;
    }

    .archive .inside-article .post-image img,
    .search-results .inside-article .post-image img,
    .blog .inside-article .post-image img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .archive .inside-article .post-image img.wbm-thumb-lowres,
    .archive .inside-article .post-image img.wbm-thumb-portrait,
    .search-results .inside-article .post-image img.wbm-thumb-lowres,
    .search-results .inside-article .post-image img.wbm-thumb-portrait,
    .blog .inside-article .post-image img.wbm-thumb-lowres,
    .blog .inside-article .post-image img.wbm-thumb-portrait {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .archive .inside-article .entry-header,
    .search-results .inside-article .entry-header,
    .blog .inside-article .entry-header {
        grid-area: header;
        margin-bottom: 8px;
    }

    .archive .inside-article .entry-summary,
    .search-results .inside-article .entry-summary,
    .blog .inside-article .entry-summary {
        grid-area: summary;
        margin-bottom: 0;
    }

    .archive .inside-article .entry-footer,
    .search-results .inside-article .entry-footer,
    .blog .inside-article .entry-footer {
        grid-area: footer;
        margin-top: 0;
        padding: 0;
        border-top: 0;
    }
}

.archive .entry-title,
.search-results .entry-title,
.blog .entry-title {
    margin-bottom: 5px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.archive .entry-title a,
.search-results .entry-title a,
.blog .entry-title a {
    color: var(--wbm-text);
    text-decoration: none;
}

.archive .entry-meta,
.search-results .entry-meta,
.blog .entry-meta {
    margin-bottom: 12px;
    color: #888888;
    font-size: 0.85rem;
}

.archive .entry-summary,
.search-results .entry-summary,
.blog .entry-summary {
    color: #444444;
    font-size: 1rem;
    line-height: 1.6;
}

.archive .entry-summary,
.archive .entry-summary p,
.search-results .entry-summary,
.search-results .entry-summary p,
.blog .entry-summary,
.blog .entry-summary p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    word-break: keep-all;
}

@media (max-width: 767px) {
    .archive .inside-article .post-image,
    .search-results .inside-article .post-image,
    .blog .inside-article .post-image {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }

    .archive .inside-article .post-image img,
    .search-results .inside-article .post-image img,
    .blog .inside-article .post-image img {
        width: auto;
        max-width: 100%;
        height: auto;
    }
}
/* =========================================================
   8. GenerateBlocks listing exceptions
   ========================================================= */

/*
 * GenerateBlocks owns the normal 300x150 card layout.
 * Only legacy low-resolution / portrait images are protected here.
 */
.gb-loop-item img.wbm-thumb-lowres,
.gb-loop-item img.wbm-thumb-portrait {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 150px;
    margin-inline: auto;
    object-fit: contain;
}

.gb-loop-item a:has(> img.wbm-thumb-lowres),
.gb-loop-item a:has(> img.wbm-thumb-portrait) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    background: #f7f7f7;
}

/* Keep the current three-line summary, but do not split Korean words arbitrarily. */
.news-excerpt {
    display: -webkit-box;
    overflow: hidden;
    max-height: 4.8em;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    word-break: keep-all;
}


/* =========================================================
   9. Header / Footer
   ========================================================= */

/* Preserve the current compact header spacing. */
.site-header,
.inside-header {
    padding-bottom: 0;
}

/* Preserve the current WBM footer spacing and hide GeneratePress credit. */
.site-footer {
    margin-top: 0;
}

.footer-widgets-container {
    padding-top: 0;
}

.site-info {
    display: none;
}


/* =========================================================
   10. Comments
   ========================================================= */

.comment-form .logged-in-as,
.comment-form .comment-notes {
    display: none;
}

#reply-title {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 700;
}

.comment-form::before {
    content: "욕설, 비방, 광고, 선정적인 게시물 등은 예고 없이 삭제 될 수 있습니다.";
    display: block;
    margin-bottom: 15px;
    color: var(--wbm-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
}

/* =========================================================
   11. Homepage shell
   ========================================================= */

/* Preserve the current homepage outer spacing without global overrides. */
body.page-id-537 .inside-article {
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

body.page-id-537 .entry-content {
    margin-top: 0;
    margin-bottom: 0;
}

body.page-id-537 .entry-content > *:last-child {
    margin-bottom: 0;
}

/* =========================================================
   Article author byline
   ========================================================= */

.wbm-article-byline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 30px;
    padding: 15px 0 5px;
    border-top: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 14px;
}

.wbm-article-byline-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.wbm-article-byline-name {
    color: #1f2937;
    font-weight: 700;
}

.wbm-article-byline-email {
    color: #6b7280;
    text-decoration: none;
}

.wbm-article-byline-email:hover,
.wbm-article-byline-email:focus {
    color: #374151;
}

.wbm-article-byline-more {
    display: inline-block;
    flex: 0 0 auto;
    padding: 4px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #f9fafb;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.wbm-article-byline-more:hover,
.wbm-article-byline-more:focus {
    background: #f3f4f6;
    color: #1f2937;
}

@media (max-width: 600px) {
    .wbm-article-byline {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* =========================================================
   Homepage image normalization — 2026-08-21
   ========================================================= */

/* Column / contribution and special / series: one thumbnail geometry. */
body.page-id-537 .gb-element-94e5cf29,
body.page-id-537 .gb-element-86b14449 {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
}

body.page-id-537 .gb-media-b74c914f,
body.page-id-537 .gb-media-db4a04c7,
body.page-id-537 .gb-media-b74c914f.wbm-thumb-lowres,
body.page-id-537 .gb-media-b74c914f.wbm-thumb-portrait,
body.page-id-537 .gb-media-db4a04c7.wbm-thumb-lowres,
body.page-id-537 .gb-media-db4a04c7.wbm-thumb-portrait {
    display: block;
    width: 72px;
    max-width: 72px;
    height: 54px;
    max-height: 54px;
    margin: 0;
    object-fit: cover;
}

/* Communication / coexistence: keep the intended 2:1 image ratio responsive. */
body.page-id-537 .gb-looper-bf147d3f .gb-loop-item > div:first-child > a {
    display: block;
    overflow: hidden;
    width: 100%;
    min-height: 0;
    aspect-ratio: 2 / 1;
    background: transparent;
}

body.page-id-537 .gb-looper-bf147d3f .gb-media-db7f9b4a,
body.page-id-537 .gb-looper-bf147d3f .gb-media-db7f9b4a.wbm-thumb-lowres,
body.page-id-537 .gb-looper-bf147d3f .gb-media-db7f9b4a.wbm-thumb-portrait {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    object-fit: cover;
}

/* Homepage: match Sotong title gap to Issue News */
body.page-id-537 .gb-looper-bf147d3f .gb-element-443db271 {
    margin-top: 5px;
}

/* Homepage: clamp Opinion / Special Series titles to 3 lines with ellipsis */
body.page-id-537 .gb-text-ad3f649a,
body.page-id-537 .gb-text-8a80a6de {
    display: -webkit-box;
    overflow: hidden;
    line-height: 1.5;
    max-height: 4.5em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
}

/* Homepage desktop: align left and right section rows structurally */
@media (min-width: 768px) {
    body.page-id-537 .gb-element-7312efe2 {
        grid-template-columns: 3fr 1fr;
        grid-template-rows: auto auto;
        column-gap: 1em;
        row-gap: 20px;
        align-items: stretch;
    }

    body.page-id-537 .gb-element-7312efe2 > div:first-child,
    body.page-id-537 .gb-element-7312efe2 > div:last-child {
        display: contents;
    }

    body.page-id-537 .gb-element-7312efe2 > div:first-child > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }

    body.page-id-537 .gb-element-7312efe2 > div:first-child > .gb-element-f266afa3 {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
    }

    body.page-id-537 .gb-element-7312efe2 > div:last-child > .gb-element-d99d33bf {
        grid-column: 2;
        grid-row: 1;
        margin-bottom: 0;
    }

    body.page-id-537 .gb-element-7312efe2 > div:last-child > .gb-element-90e2fd7c {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }

    body.page-id-537 .gb-element-a73b5275 {
        margin-bottom: 0;
    }
}

/* Homepage desktop: restore space below aligned two-row grid */
@media (min-width: 768px) {
    body.page-id-537 .gb-element-7312efe2 {
        margin-bottom: 20px;
    }
}

/* =========================================================
   Author archive — match WBM category-list format
   ========================================================= */

.author .page-header {
    margin: 50px 0;
    padding: 0;
    background: transparent;
}

.author .page-header .page-title {
    margin: 0;
    padding: 10px;
    background: #f0daa5;
    color: var(--wbm-text);
    font-family: Arial, sans-serif;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
}

.author .page-header .avatar {
    display: none;
}

.author .inside-article {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-areas:
        "image title"
        "image summary"
        "image meta";
    column-gap: 20px;
    row-gap: 0;
    align-items: start;
    margin-bottom: 30px;
    padding: 0 0 30px;
    border-bottom: 0;
}

.author .inside-article .entry-header {
    display: contents;
}

.author .inside-article .post-image {
    grid-area: image;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 150px;
    margin: 0;
    overflow: hidden;
    background: #f7f7f7;
}

.author .inside-article .post-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.author .inside-article .post-image img.wbm-thumb-lowres,
.author .inside-article .post-image img.wbm-thumb-portrait {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.author .inside-article .entry-title {
    grid-area: title;
    margin: 0 0 5px;
    color: var(--wbm-text);
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.author .inside-article .entry-summary {
    grid-area: summary;
    margin: 0 0 5px;
    color: var(--contrast-2);
    font-size: 13px;
    line-height: 1.5;
}

.author .inside-article .entry-summary,
.author .inside-article .entry-summary p {
    max-height: 4.5em;
    margin-top: 0;
    margin-bottom: 0;
    -webkit-line-clamp: 3;
}

.author .inside-article .entry-summary .read-more {
    display: none;
}

.author .inside-article .entry-header > .entry-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    color: var(--contrast-3);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}

.author .inside-article .entry-header > .entry-meta .byline {
    order: -1;
    font-size: 0;
}

.author .inside-article .entry-header > .entry-meta .byline .author {
    font-size: 11px;
}

.author .inside-article > footer.entry-meta {
    display: none;
}

@media (max-width: 767px) {
    .author .inside-article {
        grid-template-columns: 1fr;
        grid-template-areas:
            "image"
            "title"
            "summary"
            "meta";
        column-gap: 0;
    }

    .author .inside-article .post-image {
        width: 100%;
        height: auto;
        aspect-ratio: 2 / 1;
        margin-bottom: 15px;
    }

    .author .inside-article .post-image img {
        width: 100%;
        max-width: none;
        height: 100%;
    }
}

/* Listing metadata: normalize reporter / date spacing */
.gb-element-2775e1d3,
.gb-element-2e1b8e9d,
.gb-element-57a170e5,
.gb-element-f016403e,
.gb-element-cf48d255 {
    column-gap: 8px;
}

.author .inside-article .entry-header > .entry-meta {
    gap: 8px;
}

/* Listing metadata: widen reporter / date spacing */
.gb-element-2775e1d3,
.gb-element-2e1b8e9d,
.gb-element-57a170e5,
.gb-element-f016403e,
.gb-element-cf48d255 {
    column-gap: 12px;
}

.author .inside-article .entry-header > .entry-meta {
    gap: 12px;
}

/* Listing pages: stack reporter above date */
body.page-id-2381 .gb-element-2775e1d3,
body.page-id-2377 .gb-element-2775e1d3,
body.page-id-2233 .gb-element-2775e1d3,
body.page-id-1028 .gb-element-2775e1d3,
body.page-id-817 .gb-element-2775e1d3,
body.page-id-815 .gb-element-2775e1d3,
body.page-id-771 .gb-element-2775e1d3 {
    flex-direction: column;
    align-items: flex-start;
    column-gap: 0;
    row-gap: 3px;
}

.author .inside-article .entry-header > .entry-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

/* Single article: reporter/date + share utility */
.single-post .entry-header > .entry-meta {
    display: none;
}

.single-post .wbm-article-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--wbm-border);
}

.single-post .wbm-article-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 4px;
    min-width: 0;
    color: #777;
    font-size: 13px;
    line-height: 1.5;
}

.single-post .wbm-article-author {
    color: var(--wbm-text);
    font-weight: 600;
}

.single-post .wbm-article-date,
.single-post .wbm-article-date-modified {
    color: #888;
    font-size: 12px;
}

.single-post .wbm-article-share {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.single-post .wbm-article-share a,
.single-post .wbm-article-share button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    appearance: none;
    border: 0;
    background: transparent;
    color: #777;
    text-decoration: none;
    cursor: pointer;
}

.single-post .wbm-article-share a:hover,
.single-post .wbm-article-share a:focus,
.single-post .wbm-article-share button:hover,
.single-post .wbm-article-share button:focus,
.single-post .wbm-article-share button.is-copied {
    color: var(--wbm-text);
}

.single-post .wbm-article-share svg {
    display: block;
    width: 19px;
    height: 19px;
}

.single-post .wbm-share-facebook svg,
.single-post .wbm-share-x svg {
    fill: currentColor;
    stroke: none;
}

.single-post .wbm-share-copy svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .single-post .wbm-article-utility {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}


/* Single post cleanup + byline email icon */
.single-post .inside-article > .entry-meta,
.single-post .post-navigation,
.single-post .comments-area,
.single-post #comments {
    display: none;
}

.wbm-article-byline-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid #d1d5db;
    border-radius: 999px;
    background: #f9fafb;
    color: #6b7280;
    text-decoration: none;
}

.wbm-article-byline-email:hover,
.wbm-article-byline-email:focus {
    background: #f3f4f6;
    color: #374151;
}

.wbm-article-byline-email svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* Single article: linked reporter name */
.single-post .wbm-article-author a {
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

.single-post .wbm-article-author a:hover,
.single-post .wbm-article-author a:focus {
    text-decoration: underline;
}