/* 기본 배경 및 텍스트 */
body { background-color: #121212; color: #ececec; margin: 0; font-family: -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }

/* 레이아웃 구조 */
#wrap { display: flex; align-items: flex-start; min-height: 100vh; }
#sidebar { width: 280px; background: #1e1e1e; border-right: 1px solid #2a2a2a; position: fixed; height: 100vh; padding: 2rem 1rem; z-index: 100; overflow-y: auto; }
#content { flex: 1; margin-left: 280px; min-width: 0; background: #121212; }
#content-inner { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }

/* 사이드바 메뉴 */
#sidebar h1 { margin: 0; font-size: 1.5rem; font-weight: 800; }
.sidebar-title-row { display: flex; align-items: center; justify-content: space-between; gap: 0.9rem; margin-bottom: 2rem; }
.sidebar-title-main { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.sidebar-social-links { display: flex; align-items: center; gap: 0.55rem; }
.sidebar-social-links a,
.sidebar-social-links button,
.sidebar-write-link { display: inline-flex; align-items: center; justify-content: center; width: 1.95rem; height: 1.95rem; border-radius: 999px; background: #252525; color: #ececec; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, width 0.2s ease, padding 0.2s ease; border: 0; cursor: pointer; font: inherit; text-decoration: none; flex: 0 0 auto; }
.sidebar-social-links a:hover,
.sidebar-social-links button:hover,
.sidebar-write-link:hover { background: #96f2d7; color: #121212; transform: translateY(-1px); }
.sidebar-social-links svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.sidebar-write-link svg { width: 1rem; height: 1rem; flex: 0 0 auto; }
.sidebar-write-link.is-owner-only { opacity: 0; pointer-events: none; visibility: hidden; }
.sidebar-write-link.is-owner-only.is-visible { opacity: 1; pointer-events: auto; visibility: visible; }
.sidebar-social-links a,
.sidebar-write-link { position: relative; overflow: visible; }
.sidebar-link-text { position: absolute; top: calc(100% + 0.45rem); right: 0; display: inline-flex; align-items: center; min-height: 2rem; padding: 0.4rem 0.7rem; border: 1px solid #343434; border-radius: 0.75rem; background: #1b1b1b; color: #ececec; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 30; }
.sidebar-social-links a:hover .sidebar-link-text,
.sidebar-social-links a:focus-visible .sidebar-link-text,
.sidebar-write-link:hover .sidebar-link-text,
.sidebar-write-link:focus-visible .sidebar-link-text { opacity: 1; transform: translateY(0); }
.sidebar-email-copy { position: relative; overflow: visible; padding: 0 !important; }
.sidebar-email-text { position: absolute; top: calc(100% + 0.45rem); right: 0; display: inline-flex; align-items: center; min-height: 2rem; padding: 0.4rem 0.7rem; border: 1px solid #343434; border-radius: 0.75rem; background: #1b1b1b; color: #ececec; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.2s ease, transform 0.2s ease; z-index: 30; }
.sidebar-email-copy:hover .sidebar-email-text,
.sidebar-email-copy:focus-visible .sidebar-email-text { opacity: 1; transform: translateY(0); }
.sidebar-email-toast { position: absolute; top: calc(100% + 2.95rem); right: 0; transform: translateY(-4px); display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.38rem 0.72rem; border: 1px solid rgba(99, 230, 190, 0.45); border-radius: 999px; background: rgba(99, 230, 190, 0.45); color: #121212; white-space: nowrap; font-size: 0.78rem; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 31; }
.sidebar-email-copy.is-copied { background: #252525 !important; color: #ececec !important; }
.sidebar-email-copy.is-copied .sidebar-email-toast { opacity: 1; transform: translateY(0); }
.til-calendar-widget { margin-bottom: 1.8rem; padding: 1rem 0.95rem 1.05rem; border: 1px solid #2a2a2a; border-radius: 18px; background: #181818; }
.til-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; }
.til-calendar-head h2 { margin: 0; font-size: 0.98rem; font-weight: 800; color: #f4f4f4; letter-spacing: 0.01em; }
.til-calendar-nav { display: inline-flex; align-items: center; gap: 0.35rem; }
.til-calendar-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border: 1px solid #2f3946; border-radius: 999px; background: #1f232a; color: #9fb0c0; font-size: 0.95rem; font-weight: 800; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.til-calendar-nav-btn:hover { background: #27303a; border-color: #3a4755; color: #ececec; }
.til-calendar-month { color: #8b949e; font-size: 0.8rem; font-weight: 700; }
.til-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.til-calendar-weekdays { margin-bottom: 0.45rem; }
.til-calendar-weekdays span { display: flex; align-items: center; justify-content: center; color: #6f7780; font-size: 0.7rem; font-weight: 700; }
.til-calendar-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 1.85rem; border-radius: 999px; color: #9aa3ad; font-size: 0.76rem; font-weight: 700; background: transparent; border: 1px solid transparent; text-decoration: none; }
.til-calendar-day.is-empty { visibility: hidden; }
.til-calendar-day.is-active { background: rgba(99, 230, 190, 0.18); border-color: rgba(99, 230, 190, 0.35); color: #96f2d7; }
.til-calendar-day.is-today { border-color: #3a444f; color: #ececec; }
.til-calendar-day.is-active.is-today { border-color: rgba(99, 230, 190, 0.45); color: #96f2d7; }
.til-calendar-days a.til-calendar-day:hover { background: rgba(99, 230, 190, 0.26); border-color: rgba(99, 230, 190, 0.45); color: #96f2d7; }
.widget.category ul { list-style: none; margin: 0; padding: 0; }
.widget.category li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; color: #acacac; font-size: 0.95rem; }
.widget.category li a { flex: 0 1 auto; min-width: 0; }
.widget.category li a:hover { color: #20c997; }
.widget.category .c_cnt { flex: 0 0 auto; color: #20c997; font-size: 0.82rem; font-weight: 700; }
.widget.category li ul { flex: 0 0 100%; margin-top: 0.45rem; padding-left: 0.9rem; border-left: 1px solid #2a2a2a; }

/* 카테고리 Collapse */
.category-list-wrapper { margin-top: 2rem; border-top: 1px solid #2a2a2a; padding-top: 1.5rem; }
.btn-collapse { width: 100%; background: #2a2a2a; color: #ececec; border: none; padding: 12px; cursor: pointer; text-align: left; border-radius: 4px; font-size: 0.85rem; }
.category-post-list { display: none; margin-top: 10px; font-size: 0.85rem; background: #181818; padding: 10px; border-radius: 4px; border: 1px solid #2a2a2a; }
.category-post-list ul { list-style: none; padding: 0; }
.category-post-list li { padding: 6px 0; border-bottom: 1px solid #2a2a2a; }

/* 홈 카드 그리드 */
.home-section + .home-section { margin-top: 4rem; }
.section-heading { margin-bottom: 1.4rem; }
.section-heading h2 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.section-heading h2 a:hover { color: #20c997; }
.home-source-list { display: none; }
.home-feed-list { display: flex; flex-direction: column; gap: 4rem; }
.home-section { display: flex; flex-direction: column; gap: 1.25rem; }
.home-view-floating { position: sticky; top: 1.2rem; z-index: 12; display: flex; justify-content: flex-start; margin-bottom: -2.3rem; pointer-events: none; }
.home-view-toggle-btn { position: relative; isolation: isolate; overflow: visible; pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0.72rem 1.15rem; border: 1px solid rgba(99,230,190,0.28); border-radius: 999px; background: rgba(18,18,18,0.88); color: #e8fff7; font-size: 0.92rem; font-weight: 800; letter-spacing: -0.01em; box-shadow: 0 12px 28px rgba(0,0,0,0.22); backdrop-filter: blur(12px); cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.home-view-toggle-btn::before,
.home-view-toggle-btn::after { content: ""; position: absolute; inset: -0.35rem; border-radius: 999px; border: 1px solid rgba(99,230,190,0.24); background: radial-gradient(circle, rgba(99,230,190,0.16) 0%, rgba(99,230,190,0.08) 38%, rgba(99,230,190,0.02) 60%, transparent 78%); opacity: 0; transform: scale(0.92); pointer-events: none; z-index: -1; }
.home-view-toggle-btn::before { animation: home-view-pulse 3.2s ease-out infinite; }
.home-view-toggle-btn::after { animation: home-view-pulse 3.2s ease-out 1.6s infinite; }
.home-view-toggle-btn:hover { background: rgba(27,35,34,0.94); border-color: rgba(99,230,190,0.46); color: #96f2d7; transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,0.24); }

@keyframes home-view-pulse {
    0% {
        opacity: 0;
        transform: scale(0.92);
    }
    18% {
        opacity: 0.38;
    }
    65% {
        opacity: 0.12;
        transform: scale(1.28);
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}
.category-group-grid { display: flex; flex-direction: column; gap: 1rem; }
.category-group-grid:empty,
.text-post-list:empty { display: none; }
.home-pagination { display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin-top: 2.25rem; flex-wrap: wrap; }
.paging-numbers { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.home-pagination a,
.home-pagination .paging-link,
.home-pagination .paging-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 2.25rem !important;
    height: 2.25rem !important;
    padding: 0 0.85rem !important;
    border: 1px solid #2b2b2b !important;
    border-radius: 999px !important;
    background: #171717 !important;
    background-color: #171717 !important;
    color: #767676 !important;
    box-shadow: none !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease !important;
}
.home-pagination a:hover,
.home-pagination .paging-link:hover,
.home-pagination .paging-nav:hover {
    border-color: #3a3a3a !important;
    background: #2b2b2b !important;
    background-color: #2b2b2b !important;
    color: #ececec !important;
}
.home-pagination a.is-current,
.home-pagination a[data-page-state="current"],
.home-pagination a[aria-current="page"] {
    border-color: rgba(99, 230, 190, 0.45) !important;
    background: rgba(99, 230, 190, 0.45) !important;
    background-color: rgba(99, 230, 190, 0.45) !important;
    color: #121212 !important;
}
.home-pagination .no-more-prev,
.home-pagination .no-more-next,
.home-pagination .paging-disabled,
.home-pagination .disabled { opacity: 0.35; pointer-events: none; }
.paging-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; color: #8e8e8e; font-size: 0.95rem; font-weight: 700; }
.all-view-item { margin-bottom: 0.9rem; }
.sidebar-view-actions { display: flex; align-items: center; gap: 0.45rem; width: 100%; }
.sidebar-view-link { display: inline-flex !important; align-items: center; justify-content: center; padding: 0.34rem 0.72rem !important; border: 1px solid #2f3946 !important; border-radius: 999px !important; background: #1a1f26 !important; color: #c9d1d9 !important; font-size: 0.82rem !important; font-weight: 700 !important; text-decoration: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; }
.sidebar-view-link:hover { background: #232a33 !important; border-color: #3b4653 !important; color: #f4f4f4 !important; }
.sidebar-view-link.is-active { background: rgba(99, 230, 190, 0.18) !important; border-color: rgba(99, 230, 190, 0.35) !important; color: #96f2d7 !important; }
.all-view-item a { color: #f4f4f4; font-weight: 700; }
.sidebar-til-item { display: block !important; margin-bottom: 0.65rem !important; }
.sidebar-til-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.sidebar-til-head .sidebar-view-link { flex: 0 1 auto; }
.sidebar-til-head .c_cnt { flex: 0 0 auto; }
.sidebar-til-children { list-style: none; margin: 0.5rem 0 0 0; padding: 0 0 0 0.9rem; display: grid; gap: 0.45rem; }
.sidebar-til-child-item { display: flex !important; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: nowrap; margin: 0 !important; color: #acacac; font-size: 0.95rem; }
.sidebar-til-child-label { flex: 1 1 auto; min-width: 0; color: #d7dde5; font-size: 0.84rem; line-height: 1.4; }
.til-home-list .text-post-link { padding-left: 0; padding-right: 0; }
.velog-home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.velog-card { background: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 14px; overflow: hidden; display: flex; flex-direction: row-reverse; align-items: stretch; transition: 0.2s; min-height: 168px; }
.velog-card:hover { border-color: #3a444f; box-shadow: 0 10px 24px rgba(0,0,0,0.22); transform: translateY(-2px); }
.card-thumbnail { display: block; flex: 0 0 220px; width: 220px; background: #2a2a2a; position: relative; }
.card-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card-content { padding: 1.15rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.card-category { display: inline-flex; align-items: center; align-self: flex-start; width: auto; max-width: fit-content; margin-bottom: 0.65rem; padding: 0.35rem 0.65rem; border: 1px solid #2a2a2a; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.01em; text-transform: none; }
.card-content h3 { font-size: 1.1rem; margin: 0 0 0.6rem 0; font-weight: 700; line-height: 1.4; }
.velog-card .new,
.velog-card .ico_new,
.velog-card .img_new,
.velog-card .ic_new,
.velog-card [class*="new"] {
    display: none !important;
}
.card-summary { color: #d9d9d9 !important; font-size: 0.92rem !important; line-height: 1.65 !important; word-break: keep-all !important; overflow: hidden !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; max-height: calc(1.65em * 2) !important; }
.card-subinfo { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; color: #8e8e8e; font-size: 0.82rem; margin-top: 1rem; }
.card-subinfo > span { display: inline-flex; align-items: center; gap: 0.25rem; }
.card-subinfo .meta-like,
.card-subinfo .meta-comment { color: #a5a5a5; }
.card-subinfo .meta-date { color: #8e8e8e; }
.card-subinfo .meta-visibility { color: #b8b8b8; }
.card-subinfo .meta-visibility.is-hidden { display: none; }
.card-subinfo .meta-value { color: #d3d3d3; font-weight: 600; }
.velog-card.no-thumbnail { min-height: 0; }
.velog-card.no-preview .card-content h3 { font-size: 1.35rem; line-height: 1.35; margin-bottom: 0.2rem; }
.velog-card.no-preview .card-subinfo { margin-top: 0.7rem; }

/* 텍스트형 글 리스트 */
.text-post-list { display: flex; flex-direction: column; border-top: 1px solid #2a2a2a; }
.text-post-row { border-bottom: 1px solid #2a2a2a; }
.text-post-link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0.2rem; }
.text-post-title { font-size: 1rem; font-weight: 600; color: #f4f4f4; }
.text-post-date { color: #8e8e8e; font-size: 0.85rem; white-space: nowrap; }
.text-post-link:hover .text-post-title { color: #20c997; }
.category-group[data-category-key="TIL"] .section-heading h2 { font-size: 1.1rem; }
.category-group[data-category-key="TIL"] .text-post-link { padding: 0.8rem 0.2rem; }

/* 본문 상세 페이지 */
.velog-series-banner { margin: 0 0 2.5rem; padding: 1.4rem 1.5rem 1.2rem; border-radius: 18px; background: #161b22; border: 1px solid #2b313a; }
.velog-series-banner-bottom { margin-top: 3rem; margin-bottom: 2rem; }
#series-banner-bottom:empty { display: none !important; }
.velog-series-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.velog-series-head h2 { margin: 0; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; }
.velog-series-meta { display: flex; align-items: center; gap: 0.9rem; }
.series-number { color: #8b949e; font-size: 0.9rem; font-weight: 700; }
.velog-series-head h2 a:hover,
.series-more-link:hover { color: #20c997; }
.series-more-link { color: #8b949e; font-size: 0.9rem; }
.velog-series-list { margin: 0; padding: 0; color: #8b949e; list-style: none; }
.velog-series-list li { display: flex; align-items: flex-start; gap: 0.55rem; }
.velog-series-list li + li { margin-top: 0.45rem; }
.velog-series-list .series-order { flex: 0 0 auto; min-width: 1.75rem; color: #6f7780; font-size: 0.92rem; line-height: 1.55; text-align: right; }
.velog-series-list a { color: #c9d1d9; flex: 1 1 auto; min-width: 0; }
.velog-series-list li.current { color: #20c997; }
.velog-series-list li.current .series-order { color: #20c997; font-weight: 700; }
.velog-series-list a.active { color: #20c997; font-weight: 700; }
.velog-series-banner.is-collapsible .velog-series-list li.is-hidden-item { display: none; }
.velog-series-banner.is-collapsible.is-expanded .velog-series-list li.is-hidden-item { display: list-item; }
.widget.category a {
    display: inline-flex;
    align-items: center;
    width: auto;
    max-width: fit-content;
    padding: 0.2rem 0.55rem;
    border: 1px solid #2a2a2a;
    border-radius: 999px;
    background: transparent;
}
.velog-header { margin-bottom: 3rem; }
.velog-header h1 { font-size: 3rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.04em; margin: 0 0 1rem; color: #f8f9fa; }
.post-meta { color: #8b949e; font-size: 0.98rem; }
.post-reading-time { display: inline-flex; align-items: center; margin-left: 0.45rem; color: #b8c0c8; }
.post-reading-time::before { content: '·'; margin-right: 0.45rem; color: #6f7780; }
.velog-main-layout { display: flex; align-items: flex-start; position: relative; overflow: visible; }
.velog-action-sidebar { position: sticky; top: 80px; width: 88px; margin-right: 2rem; margin-left: -20px; align-self: flex-start; }
.action-sticky-container { display: flex; justify-content: center; }
.floating-actions { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; width: 100%; }
.floating-actions > * { width: auto; }
.floating-actions .container_postbtn { display: flex !important; flex-direction: column; align-items: center !important; justify-content: center; gap: 0.75rem; margin: 0 auto !important; }
.floating-actions .container_postbtn > *,
.floating-actions .container_postbtn ul,
.floating-actions .container_postbtn ol,
.floating-actions .container_postbtn li,
.floating-actions .container_postbtn div { width: auto; }
.floating-actions .container_postbtn > div,
.floating-actions .container_postbtn ul,
.floating-actions .container_postbtn ol { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 0.75rem; }
.floating-actions .container_postbtn li { display: block !important; }
.floating-actions .container_postbtn button,
.floating-actions .container_postbtn a,
.floating-actions .tt_subscribe,
.floating-actions .wrap_subscribe { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 0; min-height: 0; margin: 0 auto !important; padding: 0.5rem; border-radius: 12px; background: transparent !important; border: 0 !important; color: inherit !important; box-shadow: none !important; text-align: center !important; }
.floating-actions button,
.floating-actions a { max-width: 100%; }
.floating-actions .container_postbtn .txt_like,
.floating-actions .container_postbtn .text_like,
.floating-actions .container_postbtn .uoc-count,
.floating-actions .container_postbtn .wrap_btn .txt,
.floating-actions .container_postbtn [class*="txt_"],
.floating-actions .container_postbtn [class*="lab_"] {
    display: none !important;
}
.floating-actions .container_postbtn *,
.floating-actions .tt_subscribe *,
.floating-actions .wrap_subscribe * {
    box-shadow: none !important;
}
.floating-actions .container_postbtn button:hover,
.floating-actions .container_postbtn a:hover,
.floating-actions .tt_subscribe:hover,
.floating-actions .wrap_subscribe:hover,
.floating-actions .container_postbtn button:active,
.floating-actions .container_postbtn a:active,
.floating-actions .tt_subscribe:active,
.floating-actions .wrap_subscribe:active,
.floating-actions .container_postbtn button:focus,
.floating-actions .container_postbtn a:focus {
    background: #121212 !important;
    background-color: #121212 !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: inherit !important;
    box-shadow: none !important;
}
.floating-actions .container_postbtn .btn_like,
.floating-actions .container_postbtn .btn_share,
.floating-actions .container_postbtn .btn_post,
.floating-actions .container_postbtn .wrap_btn,
.floating-actions .container_postbtn .postbtn_wrap,
.floating-actions .container_postbtn .btn_menu_wrap {
    background: transparent !important;
    box-shadow: none !important;
}
.floating-actions .container_postbtn .btn_like,
.floating-actions .container_postbtn .btn_like_wrap,
.floating-actions .container_postbtn [class*="like"],
.floating-actions .container_postbtn [data-role*="like"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}
.floating-actions .container_postbtn .btn_like .txt_like,
.floating-actions .container_postbtn .btn_like .text_like,
.floating-actions .container_postbtn .btn_like_wrap .txt_like,
.floating-actions .container_postbtn .btn_like_wrap .text_like,
.floating-actions .container_postbtn [class*="like"] .txt_like,
.floating-actions .container_postbtn [class*="like"] .text_like {
    display: none !important;
}
.floating-actions .container_postbtn .btn_like:hover,
.floating-actions .container_postbtn .btn_share:hover,
.floating-actions .container_postbtn .btn_post:hover,
.floating-actions .container_postbtn .wrap_btn:hover,
.floating-actions .container_postbtn .postbtn_wrap:hover,
.floating-actions .container_postbtn .btn_menu_wrap:hover,
.floating-actions .container_postbtn .btn_like:active,
.floating-actions .container_postbtn .btn_share:active,
.floating-actions .container_postbtn .btn_post:active,
.floating-actions .container_postbtn .wrap_btn:active,
.floating-actions .container_postbtn .postbtn_wrap:active,
.floating-actions .container_postbtn .btn_menu_wrap:active,
.floating-actions .container_postbtn .btn_like:focus,
.floating-actions .container_postbtn .btn_share:focus,
.floating-actions .container_postbtn .btn_post:focus,
.floating-actions .container_postbtn .wrap_btn:focus,
.floating-actions .container_postbtn .postbtn_wrap:focus,
.floating-actions .container_postbtn .btn_menu_wrap:focus {
    background: #121212 !important;
    background-color: #121212 !important;
    border-radius: 12px !important;
}
.floating-actions .container_postbtn ul,
.floating-actions .container_postbtn ol,
.floating-actions .container_postbtn [class*="layer"],
.floating-actions .container_postbtn [class*="menu"],
.floating-actions .container_postbtn [class*="popup"] {
    background: #121212 !important;
    background-color: #121212 !important;
    border: 1px solid #2f3946 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}
.floating-actions .container_postbtn ul li,
.floating-actions .container_postbtn ol li,
.floating-actions .container_postbtn [class*="layer"] li,
.floating-actions .container_postbtn [class*="menu"] li,
.floating-actions .container_postbtn [class*="popup"] li {
    background: transparent !important;
    border: 0 !important;
}
.floating-actions .container_postbtn ul a,
.floating-actions .container_postbtn ul button,
.floating-actions .container_postbtn ol a,
.floating-actions .container_postbtn ol button,
.floating-actions .container_postbtn [class*="layer"] a,
.floating-actions .container_postbtn [class*="layer"] button,
.floating-actions .container_postbtn [class*="menu"] a,
.floating-actions .container_postbtn [class*="menu"] button,
.floating-actions .container_postbtn [class*="popup"] a,
.floating-actions .container_postbtn [class*="popup"] button {
    background: transparent !important;
    color: #ececec !important;
    border: 0 !important;
    box-shadow: none !important;
}
.floating-actions .container_postbtn ul a:hover,
.floating-actions .container_postbtn ul button:hover,
.floating-actions .container_postbtn ol a:hover,
.floating-actions .container_postbtn ol button:hover,
.floating-actions .container_postbtn [class*="layer"] a:hover,
.floating-actions .container_postbtn [class*="layer"] button:hover,
.floating-actions .container_postbtn [class*="menu"] a:hover,
.floating-actions .container_postbtn [class*="menu"] button:hover,
.floating-actions .container_postbtn [class*="popup"] a:hover,
.floating-actions .container_postbtn [class*="popup"] button:hover {
    background: #1b1b1b !important;
    color: #96f2d7 !important;
    border-radius: 10px !important;
}
.floating-scroll-buttons { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; width: auto; }
.floating-scroll-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid #2f3946; border-radius: 999px; background: #1a1f26; color: #d9d9d9; font-size: 1rem; font-weight: 700; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.floating-scroll-btn:hover { border-color: #63e6be; background: #232b34; color: #96f2d7; }
.floating-scroll-btn svg { width: 1.15rem; height: 1.15rem; display: block; }
.velog-content { flex: 1; max-width: 768px; min-width: 0; font-size: 1.125rem; }
.velog-outline-sidebar { display: block; position: sticky; top: 80px; width: 200px; margin-left: 2rem; align-self: flex-start; z-index: 9; }
.outline-toc-panel { display: flex; flex-direction: column; min-width: 0; background: transparent; border: 0; padding: 0; }
.article-body { color: #eceff4; font-family: Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1.125rem; line-height: 1.82; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word; }
.article-body > *:first-child { margin-top: 0; }
.article-body > *:last-child { margin-bottom: 0; }
.article-body p,
.article-body ul,
.article-body ol,
.article-body blockquote,
.article-body pre,
.article-body table,
.article-body .codeblock-wrapper,
.article-body .container_postbtn { margin: 1.5rem 0; }
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body h5,
.article-body h6 { color: #f8f9fa; font-weight: 800; letter-spacing: -0.03em; line-height: 1.32; margin: 2.8rem 0 1rem; }
.article-body h1 { font-size: 2.25rem; }
.article-body h2 { font-size: 1.8rem; padding-bottom: 0.55rem; border-bottom: 1px solid #2b313a; }
.article-body h3 { font-size: 1.4rem; }
.article-body h4 { font-size: 1.18rem; }
.article-body ul,
.article-body ol { padding-left: 1.45rem; }
.article-body li { margin: 0.5rem 0; }
.article-body li > ul,
.article-body li > ol { margin: 0.45rem 0 0.3rem; }
.article-body hr { border: 0; border-top: 1px solid #2b313a; margin: 3rem 0; }
.article-body a { color: #20c997; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-color: rgba(32, 201, 151, 0.45); }
.article-body a:hover { color: #63e6be; }
.article-body strong { color: #f8f9fa; font-weight: 800; }
.article-body em { color: #d7dde5; }
.article-body code { font-family: "Fira Code", "D2Coding", Consolas, monospace; font-size: 0.92em; background: #21262d; color: #ffb86c; border-radius: 0.45rem; padding: 0.16em 0.42em; }
.article-body pre { background: #161b22; color: #e6edf3; border: 1px solid #2b313a; border-radius: 14px; padding: 1.15rem 1.2rem; overflow-x: auto; box-shadow: inset 0 1px 0 rgba(255,255,255,0.02); }
.article-body pre code { background: transparent; color: inherit; padding: 0; border-radius: 0; font-size: 0.95rem; line-height: 1.7; }
.velog-content .article-body blockquote,
#article-view .article-body blockquote,
.entry .article-body blockquote {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0.1rem 0 0.1rem 1.15rem !important;
    border-left: 0.32rem solid #20c997 !important;
    background: transparent !important;
    color: #c9d1d9 !important;
    text-align: left !important;
}
.velog-content .article-body blockquote p,
#article-view .article-body blockquote p,
.entry .article-body blockquote p {
    margin: 0.35rem 0 !important;
    text-align: left !important;
}
.velog-content .article-body blockquote *,
#article-view .article-body blockquote *,
.entry .article-body blockquote * {
    text-align: left !important;
}
.article-body img { display: block; max-width: 100%; height: auto; margin: 1.8rem auto; border-radius: 14px; }
.article-body figure { margin: 2rem 0; }
.article-body figcaption { margin-top: 0.8rem; text-align: center; color: #8b949e; font-size: 0.92rem; }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.98rem; overflow: hidden; border-radius: 12px; border-style: hidden; box-shadow: 0 0 0 1px #2b313a; }
.article-body th,
.article-body td { padding: 0.85rem 1rem; border: 1px solid #2b313a; text-align: left; vertical-align: top; }
.article-body th { background: #1c2128; color: #f8f9fa; font-weight: 700; }
.article-body td { background: #151a20; color: #d7dde5; }
.article-body tbody tr:nth-child(even) td { background: #171d24; }
.article-body iframe { width: 100%; max-width: 100%; border: 0; border-radius: 14px; }
.article-body .youtube-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.8rem 0; border-radius: 14px; overflow: hidden; background: #0f1115; box-shadow: 0 0 0 1px rgba(255,255,255,0.06); }
.article-body .youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.article-body .highlight,
.article-body .codehilite { margin: 1.5rem 0; }
.article-body .highlight pre,
.article-body .codehilite pre { margin: 0; }
.custom-color-box, .cbox { position: relative; margin: 2.6rem 0 1.9rem; padding: 0.95rem 1.25rem 1.25rem; border-radius: 18px; background: rgba(var(--custom-box-rgb, 37, 37, 37), var(--custom-box-alpha, 1)); color: #f8f9fa; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); }
.custom-color-box-title, .cbox-title { position: absolute; top: 0; left: 1.1rem; max-width: calc(100% - 2.2rem); padding: 0 0.65rem; transform: translateY(-50%); border-radius: 999px; background: transparent; font-size: 1.5rem; line-height: 1.25; font-weight: 800; letter-spacing: -0.03em; color: #ffffff; }
.custom-color-box-content, .cbox-content { margin-top: 0.2rem; }
.custom-color-box-content > *:first-child, .cbox-content > *:first-child { margin-top: 0; }
.custom-color-box-content > *:last-child, .cbox-content > *:last-child { margin-bottom: 0; }
.custom-color-box-content a, .cbox-content a { color: inherit; text-decoration-color: rgba(255,255,255,0.55); }
.tag_label { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2.5rem; }
.tag_label span { display: inline-flex; align-items: center; padding: 0.42rem 0.75rem; border-radius: 999px; background: #1b222c; color: #84f3d0; font-size: 0.9rem; }

/* 우측 목차 고정 */
.toc-title { color: #8b949e; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: left; margin-bottom: 0.35rem; }
#toc ul { list-style: none; margin: 0; padding: 0; }
#toc li { list-style: none; margin: 0; padding: 0; }
#toc { flex: 1 1 auto; }
#toc a { color: #acacac; font-size: 0.85rem; display: block; padding: 4px 0; }
#toc a.active { color: #20c997; font-weight: bold; }
#toc .toc-h1 a { padding-left: 0; }
#toc .toc-h2 a { padding-left: 0.45rem; }
#toc .toc-h3 a { padding-left: 0.9rem; }
#toc .toc-h4 a { padding-left: 1.35rem; }

/* 핵심: 하단 프로필 섹션 재디자인 (Velog 스타일) */
.about_blog, .box_author, .profile-layer, .tt_blogger {
    display: block !important;
    background-color: transparent !important;
    border-top: 1px solid #2a2a2a !important;
    border-bottom: 1px solid #2a2a2a !important;
    padding: 2rem 0 !important;
    margin-top: 4rem !important;
    color: #ececec !important;
}
.about_blog .tit_blog, .box_author .tit_author {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #20c997 !important;
}

/* 불필요한 시스템 버튼만 제거 */
.another_category, .revenue_unit_wrap,
#article-view .another_category, #article-view .revenue_unit_wrap,
.tt_box_namecard, #article-view .tt_box_namecard { display: none !important; }

/* 댓글창 */
.velog-comments {
    margin-top: 3.5rem;
    width: 100%;
    max-width: none;
    color: #ececec !important;
}
.tt-inner-g .tt-cmt,
.tt-inner-g .tt-cmt * {
    color: #ececec !important;
    box-sizing: border-box;
}
.tt-inner-g .tt-cmt {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 나눔고딕, "Nanum Gothic", "Noto Sans KR", "Noto Sans CJK KR", arial, 돋움, Dotum, Tahoma, Geneva, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    display: block !important;
}
.tt-inner-g .tt-cmt .tt-link-user,
.tt-inner-g .tt-cmt .tt-link-user,
.tt-inner-g .tt-cmt .tt-link-user *,
.tt-inner-g .tt-cmt a.tt-link-user,
.tt-inner-g .tt-cmt a.tt-link-user:link,
.tt-inner-g .tt-cmt a.tt-link-user:visited,
.tt-inner-g .tt-cmt a.tt-link-user:hover,
.tt-inner-g .tt-cmt a.tt-link-user:active {
    color: #ffffff !important;
}
.tt-comment-cont,
.tt-comment-cont form,
.tt-comment-cont .tt-area-reply,
.tt-comment-cont .tt-area-write,
.tt-comment-cont .tt-box-total {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.velog-comments [data-tistory-react-app="Comment"] .tt-comment-cont,
.velog-comments .tt-comment-cont {
    display: flex !important;
    flex-direction: column !important;
}
.velog-comments [data-tistory-react-app="Comment"] .tt-comment-cont > .tt-box-total,
.velog-comments .tt-comment-cont > .tt-box-total { order: 1 !important; }
.velog-comments [data-tistory-react-app="Comment"] .tt-comment-cont > form,
.velog-comments .tt-comment-cont > form { order: 2 !important; }
.velog-comments [data-tistory-react-app="Comment"] .tt-comment-cont > .tt-area-reply,
.velog-comments .tt-comment-cont > .tt-area-reply { order: 3 !important; }
.tt-comment-cont > .tt-box-total {
    margin: 0 0 1.4rem !important;
    padding: 0 !important;
}
.tt-comment-cont > .tt-box-total .tt_txt_g,
.tt-comment-cont > .tt-box-total .tt_num_g {
    color: #f8f9fa !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}
.tt-comment-cont > .tt-box-total .tt_txt_g { margin-right: 0.35rem !important; }
.tt-comment-cont > form {
    margin: 0 0 2.2rem !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > form .tt-area-write {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
.tt-comment-cont > form .tt-box-thumb {
    flex: 0 0 auto !important;
}
.tt-comment-cont > form .tt-thumbnail,
.tt-comment-cont .tt-area-reply .tt-thumbnail {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-size: cover !important;
    background-position: center !important;
}
.tt-comment-cont > form .tt_wrap_write {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.tt-comment-cont > form .tt-box-textarea {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > form .tt-inner-g {
    display: block !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    max-height: none !important;
    height: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: #181818 !important;
    border: 0 !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    padding: 0.95rem 1rem !important;
}
.tt-comment-cont > form .tt-inner-g::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.tt-comment-cont > form .tt-inner-g::before,
.tt-comment-cont > form .tt-inner-g::after {
    border: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > form .tt_txt_user {
    display: none !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.45rem !important;
}
.tt-comment-cont > form .tt-cmt {
    display: block !important;
    min-height: 5.2rem !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    outline: 0 !important;
    border: 0 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}
.tt-comment-cont > form .tt-cmt::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.tt-comment-cont > form .tt-cmt:empty::before {
    content: attr(data-placeholder);
    color: #ffffff !important;
    opacity: 1 !important;
}
.tt-comment-cont > form .tt-box-write {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 0.8rem !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > form .tt-xe-label,
.tt-comment-cont > form .tt-xe-label-text {
    color: #8b949e !important;
    font-size: 0.92rem !important;
}
.tt-comment-cont > form .tt-btn_register {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.62rem 1.05rem !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #96f2d7 !important;
    color: #0b1712 !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
.tt-comment-cont > .tt-area-reply {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-reply {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-item-reply {
    display: flex !important;
    gap: 1rem !important;
    padding: 1.4rem 0 !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-item-reply:last-child,
.tt-comment-cont > .tt-area-reply .tt-wrap-cmt:last-child,
.tt-comment-cont > .tt-area-reply .tt-box-content:last-child {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply::before,
.tt-comment-cont > .tt-area-reply::after,
.tt-comment-cont > form::before,
.tt-comment-cont > form::after {
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-wrap-cmt {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    width: 100% !important;
}
.tt-comment-cont > .tt-area-reply .tt-box-content {
    position: relative !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.tt-comment-cont > .tt-area-reply .tt-box-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin-bottom: 0.55rem !important;
}
.tt-comment-cont > .tt-area-reply .tt-link-user {
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}
.tt-comment-cont > .tt-area-reply .tt_ico_lock,
.tt-comment-cont > .tt-area-reply .tt_img_area_reply {
    color: #8b949e !important;
}
.tt-comment-cont > .tt-area-reply .tt_desc {
    color: #f1f3f5 !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
    margin: 0 !important;
}
.tt-comment-cont > .tt-area-reply .tt-wrap-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin-top: 0.7rem !important;
}
.tt-comment-cont > .tt-area-reply .tt_date {
    color: #8b949e !important;
    font-size: 0.88rem !important;
}
.tt-comment-cont > .tt-area-reply .tt-link-comment,
.tt-comment-cont > .tt-area-reply .tt-link-comment .tt_txt_g {
    color: #63e6be !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}
.tt-comment-cont > .tt-area-reply .tt-box-modify {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
}
.tt-comment-cont > .tt-area-reply .tt-button-modify {
    display: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-modify {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.55rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-modify li {
    padding: 0 !important;
    border: 0 !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-modify a {
    display: inline !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #8b949e !important;
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-modify a:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
}
.tt-comment-cont > .tt-area-reply .tt-list-modify,
.tt-comment-cont > .tt-area-reply .tt-list-modify li,
.tt-comment-cont > .tt-area-reply .tt-list-modify button,
.tt-comment-cont > .tt-area-reply .tt-list-modify button:hover,
.tt-comment-cont > .tt-area-reply .tt-list-modify a:focus,
.tt-comment-cont > .tt-area-reply .tt-list-modify a:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
.velog-comments .tt-comments-wrap,
.velog-comments .area_reply,
.velog-comments .tt-box-comment,
.velog-comments .comment-list,
.velog-comments .reply-list {
    color: #f5f5f5 !important;
    background: transparent !important;
}
.tt-inner-g .tt-cmt .tt-box-total {
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}
.velog-comments h2,
.velog-comments h3,
.velog-comments .tit_reply,
.velog-comments .tit_comment {
    color: #f8f9fa !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin: 0 0 1.5rem !important;
    letter-spacing: -0.03em !important;
}
.velog-comments textarea,
.velog-comments input[type="text"],
.velog-comments input[type="password"],
#tt-body-page .velog-comments textarea,
#tt-body-page .velog-comments input[type="text"],
#tt-body-page .velog-comments input[type="password"],
.velog-comments .secretWrap input,
.velog-comments .name input,
.velog-comments .password input,
.tt-inner-g .tt-cmt textarea,
.tt-inner-g .tt-cmt input[type="text"],
.tt-inner-g .tt-cmt input[type="password"] {
    width: 100% !important;
    background: #1e1e1e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    border: 1px solid #2a2a2a !important;
    padding: 1rem !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    outline: 0 !important;
    font-size: 1rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", 나눔고딕, "Nanum Gothic", "Noto Sans KR", "Noto Sans CJK KR", arial, 돋움, Dotum, Tahoma, Geneva, sans-serif !important;
}
.velog-comments textarea {
    min-height: 7rem !important;
    border-radius: 4px !important;
    resize: vertical !important;
}
.velog-comments textarea::placeholder,
.velog-comments input[type="text"]::placeholder,
.velog-comments input[type="password"]::placeholder,
.velog-comments .secretWrap input::placeholder,
.velog-comments .name input::placeholder,
.velog-comments .password input::placeholder,
.tt-inner-g .tt-cmt textarea::placeholder,
.tt-inner-g .tt-cmt input[type="text"]::placeholder,
.tt-inner-g .tt-cmt input[type="password"]::placeholder {
    color: #ffffff !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #ffffff !important;
}
.velog-comments textarea::-webkit-input-placeholder,
.velog-comments input[type="text"]::-webkit-input-placeholder,
.velog-comments input[type="password"]::-webkit-input-placeholder,
.velog-comments .secretWrap input::-webkit-input-placeholder,
.velog-comments .name input::-webkit-input-placeholder,
.velog-comments .password input::-webkit-input-placeholder,
.tt-inner-g .tt-cmt textarea::-webkit-input-placeholder,
.tt-inner-g .tt-cmt input[type="text"]::-webkit-input-placeholder,
.tt-inner-g .tt-cmt input[type="password"]::-webkit-input-placeholder {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.velog-comments textarea:-ms-input-placeholder,
.velog-comments input[type="text"]:-ms-input-placeholder,
.velog-comments input[type="password"]:-ms-input-placeholder,
.tt-inner-g .tt-cmt textarea:-ms-input-placeholder,
.tt-inner-g .tt-cmt input[type="text"]:-ms-input-placeholder,
.tt-inner-g .tt-cmt input[type="password"]:-ms-input-placeholder {
    color: #ffffff !important;
}
.velog-comments textarea::-ms-input-placeholder,
.velog-comments input[type="text"]::-ms-input-placeholder,
.velog-comments input[type="password"]::-ms-input-placeholder,
.tt-inner-g .tt-cmt textarea::-ms-input-placeholder,
.tt-inner-g .tt-cmt input[type="text"]::-ms-input-placeholder,
.tt-inner-g .tt-cmt input[type="password"]::-ms-input-placeholder {
    color: #ffffff !important;
}
.velog-comments textarea,
.velog-comments textarea *,
.velog-comments input[type="text"],
.velog-comments input[type="password"],
.velog-comments .comment-form textarea,
.velog-comments .area_write textarea,
.velog-comments .tt-box-comment textarea,
.tt-inner-g .tt-cmt textarea,
.tt-inner-g .tt-cmt textarea *,
.tt-inner-g .tt-cmt input[type="text"],
.tt-inner-g .tt-cmt input[type="password"] {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}
.velog-comments,
.velog-comments * { color: #ececec; }
.velog-comments .comment-form,
.velog-comments .comment-write,
.velog-comments .tt-box-comment,
.velog-comments .area_reply,
.velog-comments .area_write,
.velog-comments form {
    width: 100% !important;
    max-width: none !important;
}
.velog-comments .comment-form,
.velog-comments .tt-box-comment,
.velog-comments .area_write,
.velog-comments form[action*="comment"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.85rem !important;
    align-items: flex-start !important;
}
.velog-comments textarea,
.velog-comments .comment-form textarea,
.velog-comments .tt-box-comment textarea,
.velog-comments .area_write textarea {
    flex: 1 1 100% !important;
}
.velog-comments .comment-form,
.velog-comments .tt-box-comment,
.velog-comments .area_write {
    margin-bottom: 2rem !important;
}
.tt-inner-g .tt-cmt .tt-area-write,
.tt-inner-g .tt-cmt .tt-area-reply {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}
.tt-inner-g .tt-cmt .tt-area-write {
    margin-bottom: 2.25rem !important;
}
.tt-inner-g .tt-cmt .tt-area-write .tt-box-comment,
.tt-inner-g .tt-cmt .tt-area-write .comment-form,
.tt-inner-g .tt-cmt .tt-area-write form {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.velog-comments button[type="submit"],
.velog-comments input[type="submit"],
.velog-comments .btn_register,
.velog-comments .btn_comment,
.velog-comments .write button,
.velog-comments .comment-write button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    padding: 0.62rem 1.05rem !important;
    border: 0 !important;
    border-radius: 4px !important;
    background: #96f2d7 !important;
    color: #0b1712 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    font-size: 0.92rem !important;
    line-height: 1 !important;
}
.velog-comments button[type="submit"]:hover,
.velog-comments input[type="submit"]:hover,
.velog-comments .btn_register:hover,
.velog-comments .btn_comment:hover,
.velog-comments .write button:hover,
.velog-comments .comment-write button:hover { background: #63e6be !important; }
.velog-comments .name,
.velog-comments .name *,
.velog-comments .writer,
.velog-comments .writer *,
.velog-comments .user,
.velog-comments .user *,
.velog-comments .comment-list,
.velog-comments .comment-list *,
.velog-comments .reply-list,
.velog-comments .reply-list *,
.velog-comments .tt_more_preview_comments_wrap,
.velog-comments .tt_more_preview_comments_wrap * {
    color: #ffffff !important;
}
.velog-comments .date,
.velog-comments .control,
.velog-comments .control *,
.velog-comments .txt_date,
.velog-comments .txt_time { color: #8b949e !important; }
.velog-comments ul,
.velog-comments ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.velog-comments li,
.velog-comments .comment-item,
.velog-comments .reply-item,
.velog-comments .list_reply > li,
.velog-comments .comment-list > li {
    padding: 1.55rem 0 !important;
    border-top: 0 !important;
    background: transparent !important;
}
.velog-comments li:first-child,
.velog-comments .comment-item:first-child,
.velog-comments .reply-item:first-child,
.velog-comments .list_reply > li:first-child,
.velog-comments .comment-list > li:first-child { border-top: 0 !important; }
.velog-comments .thumb_profile,
.velog-comments .comment-avatar,
.velog-comments .writer img,
.velog-comments .name img,
.velog-comments .profile img {
    width: 3rem !important;
    height: 3rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}
.velog-comments .writer,
.velog-comments .name,
.velog-comments .profile,
.velog-comments .box_info {
    display: flex !important;
    align-items: center !important;
    gap: 0.8rem !important;
}
.velog-comments .box_info,
.velog-comments .meta,
.velog-comments .comment-head {
    margin-bottom: 0.75rem !important;
}
.velog-comments .writer strong,
.velog-comments .name strong,
.velog-comments .profile strong,
.velog-comments .txt_name {
    color: #f8f9fa !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
}
.velog-comments .date,
.velog-comments .txt_date,
.velog-comments .txt_time {
    display: block !important;
    margin-top: 0.15rem !important;
    font-size: 0.88rem !important;
}
.velog-comments .desc,
.velog-comments .comment-content,
.velog-comments .txt_reply,
.velog-comments .content,
.velog-comments p {
    color: #f1f3f5 !important;
    font-size: 1rem !important;
    line-height: 1.75 !important;
}
.velog-comments .desc p,
.velog-comments .comment-content p,
.velog-comments .txt_reply p {
    margin: 0.15rem 0 !important;
}
.velog-comments .link_reply,
.velog-comments .btn_reply,
.velog-comments .write_reply,
.velog-comments .reply_action a {
    color: #63e6be !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
}
.tt-inner-g .tt-cmt .tt-area-reply > div,
.tt-inner-g .tt-cmt .tt-area-reply li,
.tt-inner-g .tt-cmt .tt-item-reply,
.tt-inner-g .tt-cmt .tt-box-total,
.tt-inner-g .tt-cmt .tt-wrap-item,
.tt-inner-g .tt-cmt .tt-area-write,
.tt-inner-g .tt-cmt .tt-area-reply,
.tt-inner-g .tt-cmt .tt-box-total,
.tt-inner-g .tt-cmt .tt-area-write::before,
.tt-inner-g .tt-cmt .tt-area-write::after,
.tt-inner-g .tt-cmt .tt-area-reply::before,
.tt-inner-g .tt-cmt .tt-area-reply::after,
.tt-inner-g .tt-cmt .tt-box-total::before,
.tt-inner-g .tt-cmt .tt-box-total::after {
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}
.tt-comment-cont > form > .tt-area-write,
.tt-comment-cont > form > .tt-area-write::before,
.tt-comment-cont > form > .tt-area-write::after,
.tt-comment-cont > form > .tt-area-write > .tt_wrap_write,
.tt-comment-cont > form > .tt-area-write > .tt_wrap_write::before,
.tt-comment-cont > form > .tt-area-write > .tt_wrap_write::after,
.tt-comment-cont > form > .tt-area-write > .tt_wrap_write > .tt-box-textarea,
.tt-comment-cont > form > .tt-area-write > .tt_wrap_write > .tt-box-write {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* 가시성 제어 */
.velog-home-grid { display: grid; }
.velog-post-container { display: block; }

/* 반응형 */
@media (max-width: 1200px) {
    .velog-action-sidebar { display: none; }
    .velog-outline-sidebar { display: none; }
    .velog-content { max-width: none; }
}

@media (max-width: 960px) {
    #wrap { display: block; }
    #sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid #2a2a2a; }
    #content { margin-left: 0; }
    #content-inner { padding: 2rem 1.25rem; }
    .home-view-floating { top: 0.9rem; margin-bottom: -1.8rem; justify-content: flex-start; }
    .home-view-toggle-btn { padding: 0.66rem 1rem; font-size: 0.88rem; }
}

@media (max-width: 640px) {
    .velog-card { flex-direction: column; min-height: 0; }
    .card-thumbnail { width: 100%; flex-basis: auto; padding-top: 52%; }
    .velog-home-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .category-group-grid { gap: 1.25rem; }
    .text-post-link { align-items: flex-start; flex-direction: column; }
    .velog-header h1 { font-size: 2rem; }
    .home-view-floating { justify-content: flex-start; margin-bottom: -0.6rem; }
}