/* Font */
@import url("https://hangeul.pstatic.net/hangeul_static/css/nanum-gothic-coding.css");

/* View transitions */
@view-transition {
    navigation: auto;
}

/* ===== Base ===================================================== */
* {
    font-family: 'NanumGothicCodingLigature', 'NanumGothicCodingLigatureBold',
        'NanumGothicCoding', 'NanumGothicCodingBold', monospace;
    overflow-wrap: break-word;
}

a[href=""]:has(img) {
    pointer-events: none;
    cursor: default;
}

/* Fixes Bulma conflicting with Prism.js syntax highlighting — see https://github.com/jgthms/bulma/issues/1708 */
.token.number,
.token.tag {
    all: inherit;
}

/* ===== Navbar =================================================== */
.navbar {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 1rem 3rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.navbar-start .navbar-item,
.navbar-end .navbar-item {
    font-size: 1.15rem;
    padding: 0.75rem 1rem;
}

a.navbar-item.is-active-link {
    text-decoration: underline;
}

/* ===== Footer =================================================== */
.site-footer {
    position: sticky;
    top: 100vh;
}

/* ===== Main content ============================================= */
.main-content {
    padding: 0.75rem;
    min-height: 100vh;
}

@media (min-width: 769px) {
    .main-content {
        padding: 3rem;
    }
}

@media (min-width: 1280px) {
    .main-content {
        padding: 6rem;
    }
}

/* ===== Utilities ================================================ */

/* Circular mask for profile images */
.mask-circle {
    border-radius: 50%;
    overflow: hidden;
    display: block;
}

/* Break-inside-avoid for masonry columns */
.break-inside-avoid {
    break-inside: avoid;
}

/* Masonry — 3 cols (home recent posts) */
.masonry-3 {
    columns: 1;
    column-gap: 1rem;
}

@media (min-width: 769px) {
    .masonry-3 {
        columns: 3;
    }
}

/* Masonry — up to 3 cols (portfolio) */
.masonry-portfolio {
    columns: 1;
    column-gap: 1.5rem;
}

@media (min-width: 640px) {
    .masonry-portfolio {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-portfolio {
        columns: 3;
    }
}

/* Circle button (for RSS icon etc.) */
.button.is-circle {
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    padding: 0;
}

/* Blog post preview image */
.home-post-preview-img {
    height: 12rem;
    object-fit: contain;
    object-position: center;
}

.blog-list-preview-img {
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.post-detail-preview-img {
    max-height: 20rem;
    object-fit: contain;
    border-radius: 0.75rem;
}

@media (min-width: 1280px) {
    .home-post-preview-img {
        height: 10rem;
    }
}

/* ===== Resume =================================================== */
.resume-container {
    max-width: 60rem;
    margin: 0 auto;
}

/* Section divider with text in the middle */
.section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 0;
}

.section-title::before,
.section-title::after {
    content: '';
    flex: 0 0 2rem;
    border-top: 1px solid currentColor;
    opacity: 0.4;
}

/* ===== TinyMCE content ========================================= */
.tinymce img {
    margin: 1rem;
    border-radius: 0.25rem;
}

.tinymce pre {
    padding: 0;
    margin: 0.25rem;
}

.tinymce figure figcaption {
    text-align: center;
}

.tinymce figure.align-left {
    float: left;
}

.tinymce figure.align-right {
    float: right;
}

/* ===== TinyMCE editor toolbar ================================== */
.toolbar {
    margin-top: 0.25rem;
    margin-right: 0.5rem;
}

.toolbar .toolbar-item {
    margin-left: 0.25rem;
}

/* ===== Mermaid diagrams ======================================== */
.language-mermaid svg {
    display: block;
    margin: 0 auto;
    padding: 0.75rem;
}