/* Tistory compatibility, scoped to imported articles. No remote fonts/assets. */
.single-post .ig-migrated-post .entry-header {
    padding-bottom: 24px;
    border-bottom: 1px solid #e5eaf0;
}
.single-post .ig-migrated-post .entry-title {
    font-size: clamp(26px, 2.5vw, 36px);
    line-height: 1.4;
    letter-spacing: -.035em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}
.single-post .ig-migrated-post .entry-meta { margin-top: 12px; color: #687482; font-size: 14px; }
.entry-content .itgroovy-article {
    --ig-border: #dfe5ed;
    --ig-muted: #667587;
    --ig-blue: #215bb0;
    color: #303946;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: -.015em;
    overflow-wrap: anywhere;
    min-width: 0;
}
.itgroovy-article :where(p, div, span, font) {
    font-family: inherit !important;
    line-height: inherit !important;
}
.itgroovy-article .ig-legacy-small { font-size: inherit !important; }
.itgroovy-article :where(p) { margin: 0 0 1.05em; }
.itgroovy-article .ig-spacer {
    height: 10px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.itgroovy-article .ig-spacer + .ig-spacer { display: none; }
.itgroovy-article :where(h2, h3, h4) {
    line-height: 1.5;
    letter-spacing: -.025em;
    margin: 1.8em 0 .8em;
    font-weight: 700;
    word-break: keep-all;
}
.itgroovy-article h2 { font-size: 25px; }
.itgroovy-article h3 { font-size: 21px; }
.itgroovy-article a:not(.fileblock a):not([data-ke-type="opengraph"] a) {
    text-underline-offset: .2em;
    text-decoration-thickness: 1px;
}
.itgroovy-article a:focus-visible,
.itgroovy-article .ig-table-scroll:focus-visible { outline: 3px solid #8bb7ed; outline-offset: 4px; }

/* Tistory style3 is an outlined information box, not an italic quotation. */
.entry-content .itgroovy-article blockquote[data-ke-style="style3"] {
    margin: 26px 0;
    padding: 26px 28px;
    border: 1px solid var(--ig-border);
    border-radius: 8px;
    background: #f8fafc;
    font-size: inherit;
    font-style: normal;
    line-height: inherit;
    box-shadow: none;
    quotes: none;
}
.itgroovy-article blockquote[data-ke-style="style3"]::before,
.itgroovy-article blockquote[data-ke-style="style3"]::after { content: none; }
.itgroovy-article blockquote > :last-child { margin-bottom: 0; }
.itgroovy-article .txc-textbox:not(blockquote) {
    box-sizing: border-box;
    max-width: 100%;
    margin: 24px 0 !important;
    padding: 20px 24px !important;
    border: 1px solid var(--ig-border) !important;
    border-left: 4px solid #668fc6 !important;
    border-radius: 6px;
    background: #f3f7fc !important;
}

/* Image sizes and alignment: shrink large images, never stretch small captures. */
.itgroovy-article :where(figure.imageblock, span.imageblock) {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 26px auto !important;
    text-align: center;
    float: none !important;
}
.itgroovy-article img { max-width: 100% !important; height: auto !important; vertical-align: middle; }
.itgroovy-article figure.imageblock > span { display: block; }
.itgroovy-article figure.imageblock img { width: auto; }
.itgroovy-article .imageblock.alignLeft { text-align: left; }
.itgroovy-article .imageblock.alignRight { text-align: right; }
.itgroovy-article figcaption {
    color: var(--ig-muted);
    font-size: 14px;
    font-style: normal;
    line-height: 1.6;
    margin-top: 10px;
    text-align: center;
}
.itgroovy-article figcaption:empty { display: none; }

/* Restore all 240 Tistory attachment cards, using their existing download URLs. */
.entry-content .itgroovy-article figure.fileblock {
    box-sizing: border-box;
    width: 100%;
    max-width: 560px;
    margin: 24px auto !important;
    text-align: left;
    font-style: normal;
}
.itgroovy-article figure.fileblock > a {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 92px;
    padding: 20px;
    border: 1px solid var(--ig-border);
    border-radius: 8px;
    background: #fff;
    color: #263b55;
    text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.itgroovy-article figure.fileblock > a:hover { border-color: #8eafd8; background: #f5f9ff; }
.itgroovy-article .fileblock .image {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    background: #eaf1fb;
    border-radius: 8px;
    display: grid;
    place-items: center;
}
.itgroovy-article .fileblock .image::before {
    content: "";
    width: 24px;
    height: 24px;
    background: var(--ig-blue);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.itgroovy-article .fileblock .desc { min-width: 0; flex: 1; }
.itgroovy-article .fileblock .filename { font-size: 16px; font-weight: 600; line-height: 1.5 !important; }
.itgroovy-article .fileblock .name { overflow-wrap: anywhere; }
.itgroovy-article .fileblock .size { margin-top: 5px; font-size: 13px; color: var(--ig-muted); line-height: 1.5 !important; }
.itgroovy-article .fileblock > a::after {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: var(--ig-blue);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m-5-5 5 5 5-5M4 16v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.itgroovy-article figure[data-ke-type="opengraph"] { margin: 26px 0; }
.itgroovy-article figure[data-ke-type="opengraph"] > a {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--ig-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    color: inherit;
    text-decoration: none;
    text-align: left;
}
.itgroovy-article .og-image { flex: 0 0 150px; background-size: cover; background-position: center; background-color: #edf2f8; }
.itgroovy-article .ig-no-preview-image .og-image { display: none; }
.itgroovy-article .og-text { min-width: 0; padding: 20px; }
.itgroovy-article .og-text .og-title { margin: 0 0 8px; font-size: 17px; font-weight: 650; line-height: 1.5 !important; }
.itgroovy-article .og-text .og-desc { margin: 0 0 10px; color: #526176; font-size: 14px; line-height: 1.6 !important; }
.itgroovy-article .og-text .og-host { margin: 0; color: var(--ig-muted); font-size: 12px; }

.itgroovy-article .ig-table-scroll { max-width: 100%; margin: 26px 0; overflow-x: auto; overscroll-behavior-x: contain; }
.itgroovy-article .ig-table-scroll table {
    width: 100% !important;
    height: auto !important;
    margin: 0;
    border-collapse: collapse;
    font-family: inherit !important;
    font-size: 15px !important;
}
.itgroovy-article .ig-table-scroll :where(td, th) { padding: 12px 14px; vertical-align: top; border: 1px solid var(--ig-border); }
.itgroovy-article .ig-table-scroll p { margin-bottom: .5em; }
.itgroovy-article .ig-table-scroll p:last-child { margin-bottom: 0; }
.itgroovy-article :where(ul, ol) { margin: 0 0 1.2em 1.4em; }
.itgroovy-article li { margin: .4em 0; }
.itgroovy-article pre { max-width: 100%; overflow-x: auto; padding: 20px; border-radius: 6px; background: #f1f4f8; }
.itgroovy-article .moreless_content { margin: 20px 0; padding: 20px; border: 1px solid var(--ig-border); border-radius: 6px; }
.itgroovy-article .adsbygoogle { max-width: 100%; margin: 28px auto; }

@media (max-width: 768px) {
    .entry-content .itgroovy-article { font-size: 16px; line-height: 1.85; }
    .single-post .ig-migrated-post .inside-article { padding: 28px 20px; }
    .entry-content .itgroovy-article blockquote[data-ke-style="style3"] { padding: 20px 18px; margin: 22px 0; }
    .itgroovy-article .txc-textbox:not(blockquote) { padding: 16px !important; }
    .itgroovy-article h2 { font-size: 22px; }
    .itgroovy-article h3 { font-size: 19px; }
    .itgroovy-article figure.fileblock > a { padding: 16px; gap: 12px; min-height: 84px; }
    .itgroovy-article .fileblock .image { flex-basis: 36px; width: 36px; height: 36px; }
    .itgroovy-article .fileblock .filename { font-size: 15px; }
    .itgroovy-article .og-image { flex-basis: 90px; }
    .itgroovy-article .og-text { padding: 16px; }
    .itgroovy-article .og-text .og-desc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .itgroovy-article figure.fileblock > a { transition: none; }
}