@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");

/* ============================================================================
   Tistory Book Club v10 — Editorial Minimal Skin
   ----------------------------------------------------------------------------
   Design philosophy:
   Inspired by Linear, Vercel, Stripe Press, Toss. This is an "editorial
   minimalism" theme for mid-career backend developers (3~7 YoE). The goal is
   to put the writing first: neutral grayscale palette, a single blue accent
   (< 5% of visible surface), strong type hierarchy driven by Pretendard
   Variable, and decisive 1px borders instead of blurry shadows.
   No blobs, no glassmorphism, no purple gradients, no animated backgrounds.
   Code is treated with the same care as body copy (JetBrains Mono, solid
   near-black blocks). Motion is restrained — 180ms, ease-out, nothing fancy.
   All colors are driven by CSS custom properties so dark mode is a single
   variable swap on `body.dark`.
   ========================================================================= */

@layer reset, base, layout, header, home, list, article, aside, paging, darkmode, responsive;

/* ----------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
  body { min-height: 100vh; }
  img, svg, video { max-width: 100%; height: auto; display: block; }
  ul, ol { list-style: none; }
  button { cursor: pointer; border: 0; background: transparent; font: inherit; color: inherit; }
  input, textarea, select { font: inherit; color: inherit; }
  a { color: inherit; text-decoration: none; }
  table { border-collapse: collapse; border-spacing: 0; }
}

/* ----------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Neutral surface */
  --bg: #ffffff;
  --bg2: #fafafa;
  --bg3: #f5f5f5;

  /* Text */
  --text1: #0a0a0a;
  --text2: #404040;
  --text3: #737373;
  --text4: #a3a3a3;

  /* Lines */
  --border: #e5e5e5;
  --border-strong: #d4d4d4;

  /* Accent — single hue, used sparingly */
  --accent: #1d4ed8;
  --accent-hover: #1e40af;
  --accent-bg: rgba(29, 78, 216, 0.08);

  /* Code surfaces */
  --code-bg: #0a0a0a;
  --code-text: #e5e5e5;
  --code-inline-bg: var(--accent-bg);
  --code-inline-text: var(--accent);

  /* Category hues (for language badges, preserved from P0 review) */
  --cat-java: #ef4444;
  --cat-spring: #22c55e;
  --cat-jpa: #3b82f6;
  --cat-arch: #a855f7;
  --cat-db: #f59e0b;
  --cat-devops: #14b8a6;
  --cat-kafka: #f97316;
  --cat-cs: #6366f1;
  --cat-ai: #ec4899;
  --cat-testing: #10b981;
  --cat-trend: #f59e0b;

  /* Typography */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Layout */
  --max-w: 1100px;
  --main-w: 740px;
  --aside-w: 280px;
  --gap: 48px;

  /* Radii — restrained */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t: 180ms;

  /* Shadows — barely there */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.02);
}

body.dark {
  --bg: #0a0a0a;
  --bg2: #171717;
  --bg3: #262626;
  --text1: #fafafa;
  --text2: #d4d4d4;
  --text3: #a3a3a3;
  --text4: #737373;
  --border: #262626;
  --border-strong: #404040;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-bg: rgba(96, 165, 250, 0.12);
  --code-bg: #000000;
  --code-text: #e5e5e5;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ----------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.75;
    color: var(--text1);
    background: var(--bg);
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "ss01", "ss02", "cv01", "cv11";
    transition: background var(--t) var(--ease), color var(--t) var(--ease);
  }
  body.menu-open { overflow: hidden; }

  ::selection { background: var(--accent-bg); color: var(--text1); }

  /* Links — underline offset is key to the editorial feel */
  a {
    color: inherit;
    transition: color var(--t) var(--ease);
  }
  a:hover { color: var(--accent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* Scrollbar */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 10px;
    border: 2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--text4); }

  /* Remove legacy decorative elements from old skin (blobs, hero-section bg images) */
  body::before,
  body::after { content: none !important; }
  .bg-decoration,
  .blob,
  .blob-1,
  .blob-2,
  .blob-3 { display: none !important; }
}

/* ----------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
@layer layout {
  #wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  /* Container that aligns to main content grid */
  #container,
  .area-main {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 56px 24px 96px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--aside-w);
    gap: var(--gap);
    align-items: start;
  }

  /* Main column */
  #content,
  .area-view,
  .area-main > main {
    min-width: 0;
  }

  /* Aside column */
  #sidebar,
  .area-aside {
    min-width: 0;
  }
}

/* ----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
@layer header {
  #header,
  .header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    /* NO backdrop-filter on purpose — keep it crisp */
  }

  .header-inner,
  .inner-header,
  .box-header {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  /* Logo */
  .logo,
  .title-logo,
  h1.logo {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text1);
  }
  .logo a,
  .title-logo a { display: inline-flex; align-items: center; gap: 10px; }
  .logo-icon {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    background: var(--text1);
    color: var(--bg);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0;
  }
  .logo-text { color: var(--text1); }

  /* GNB */
  .gnb,
  .area-gnb {
    flex: 1;
    min-width: 0;
    margin-left: 32px;
  }
  .gnb ul,
  .area-gnb ul {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .gnb li > a,
  .area-gnb li > a,
  .link-category {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text3);
    border-radius: var(--r-sm);
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .gnb li > a:hover,
  .area-gnb li > a:hover,
  .link-category:hover {
    color: var(--text1);
    background: var(--bg3);
  }
  .gnb .sub_category_list { display: none; }

  /* Header actions: theme, search, menu */
  .header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  #btn-search,
  #btn-theme,
  #dark-mode-toggle,
  #btn-menu {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    color: var(--text2);
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
  }
  #btn-search:hover,
  #btn-theme:hover,
  #dark-mode-toggle:hover { color: var(--text1); background: var(--bg3); }

  #btn-menu { display: none; }
  #btn-menu span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: currentColor;
    margin: 3px 0;
    border-radius: 1px;
    transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
  }

  /* Dark/light icon toggle */
  #btn-theme .icon-moon,
  body.dark #btn-theme .icon-sun { display: none; }
  #btn-theme .icon-sun,
  body.dark #btn-theme .icon-moon { display: block; }

  /* Title search input (if surfaced) */
  .title-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text3);
    font-size: 13px;
  }
  .title-search input {
    border: 0;
    background: transparent;
    outline: none;
    width: 180px;
  }
}

/* ----------------------------------------------------------------------------
   Home: hero / landing
   -------------------------------------------------------------------------- */
@layer home {
  .hero-section {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 88px 24px 32px;
    border-bottom: 1px solid var(--border);
  }
  .hero-inner { max-width: var(--main-w); }
  .hero-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 999px;
    margin-bottom: 20px;
  }
  .hero-title {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text1);
    margin-bottom: 16px;
  }
  .hero-desc {
    font-size: 19px;
    color: var(--text3);
    line-height: 1.6;
    max-width: 600px;
  }
  .hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
  }
  .stat-item { display: flex; flex-direction: column; gap: 2px; }
  .stat-number {
    font-family: var(--font-mono);
    font-size: 20px;
    font-weight: 700;
    color: var(--text1);
    font-variant-numeric: tabular-nums;
  }
  .stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text4);
  }
  .stat-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
  }
}

/* ----------------------------------------------------------------------------
   Article list (home, category, tag, search)
   -------------------------------------------------------------------------- */
@layer list {
  /* List container & grid */
  .list_content,
  .article-type-common,
  .article-type-thumbnail {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 8px;
  }
  .article-type-thumbnail { gap: 32px; }

  /* Category / section label above list */
  .tt_category > h3,
  .category_list > h3,
  .box-no-search + h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    margin: 24px 0 12px;
  }

  /* Hide empty-category block per P0 requirement */
  .box-no-search { display: none; }

  /* Card — editorial row, not a fancy card */
  .list_content .item,
  .index-item,
  .article-type-common li,
  .article-type-thumbnail li,
  .entry {
    position: relative;
    padding: 32px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    transition: transform var(--t) var(--ease);
  }
  .list_content .item:last-child,
  .index-item:last-child,
  .article-type-common li:last-child,
  .article-type-thumbnail li:last-child,
  .entry:last-child { border-bottom: 0; }

  .list_content .item:hover .title a,
  .article-type-common .title a:hover,
  .article-type-thumbnail .title a:hover,
  .entry:hover h2.title a,
  .link-article:hover .title {
    color: var(--accent);
  }

  /* Thumbnail variant — stacked rectangle thumbnail then text */
  .article-type-thumbnail .thumbnail,
  .list_content .thumbnail,
  .link-article .thumbnail {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 560px;
    margin-bottom: 20px;
    overflow: hidden;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg3);
  }
  .article-type-thumbnail .thumbnail img,
  .list_content .thumbnail img,
  .link-article .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t) var(--ease);
  }
  .article-type-thumbnail li:hover .thumbnail img,
  .list_content .item:hover .thumbnail img,
  .link-article:hover .thumbnail img { transform: scale(1.02); }

  /* List title */
  .list_content .title,
  .article-type-common .title,
  .article-type-thumbnail .title,
  h2.title,
  .link-article .title,
  .entry h2.title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text1);
    margin: 0 0 8px;
  }
  .list_content .title a,
  .article-type-common .title a,
  .article-type-thumbnail .title a {
    color: inherit;
    transition: color var(--t) var(--ease);
  }

  /* Summary */
  .summary,
  .list_content .summary,
  .entry .excerpt,
  .article-type-common .summary,
  .article-type-thumbnail .summary {
    font-size: 15px;
    line-height: 1.65;
    color: var(--text3);
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Meta row */
  .list_content .meta,
  .entry .entry-meta,
  .article-type-common .meta,
  .article-type-thumbnail .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text4);
  }
  .list_content .meta .date,
  .entry-meta .date { font-variant-numeric: tabular-nums; }
  .list_content .meta .dot,
  .entry-meta .dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: var(--text4);
  }

  /* Category badge (language-specific colors preserved) */
  .entry-meta .category a,
  .article-meta .category a,
  .list_content .category a,
  .article-type-common .category a,
  .article-type-thumbnail .category a,
  .link-category.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text2);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .entry-meta .category a:hover,
  .article-meta .category a:hover {
    color: var(--text1);
    border-color: var(--border-strong);
  }

  /* Language-coded category badges (P0 requirement) */
  .category a[href*="Java"],
  .link-category[data-cat="Java"]            { color: var(--cat-java);    border-color: color-mix(in srgb, var(--cat-java) 40%, var(--border)); }
  .category a[href*="Spring"],
  .link-category[data-cat="Spring"]          { color: var(--cat-spring);  border-color: color-mix(in srgb, var(--cat-spring) 40%, var(--border)); }
  .category a[href*="JPA"],
  .link-category[data-cat="JPA"]             { color: var(--cat-jpa);     border-color: color-mix(in srgb, var(--cat-jpa) 40%, var(--border)); }
  .category a[href*="Architecture"],
  .link-category[data-cat="Architecture"]    { color: var(--cat-arch);    border-color: color-mix(in srgb, var(--cat-arch) 40%, var(--border)); }
  .category a[href*="Database"],
  .link-category[data-cat="Database"]        { color: var(--cat-db);      border-color: color-mix(in srgb, var(--cat-db) 40%, var(--border)); }
  .category a[href*="DevOps"],
  .link-category[data-cat="DevOps"]          { color: var(--cat-devops);  border-color: color-mix(in srgb, var(--cat-devops) 40%, var(--border)); }
  .category a[href*="Kafka"],
  .link-category[data-cat="Kafka"]           { color: var(--cat-kafka);   border-color: color-mix(in srgb, var(--cat-kafka) 40%, var(--border)); }
  .category a[href*="CS"],
  .link-category[data-cat="CS"]              { color: var(--cat-cs);      border-color: color-mix(in srgb, var(--cat-cs) 40%, var(--border)); }
  .category a[href*="AI"],
  .link-category[data-cat="AI"]              { color: var(--cat-ai);      border-color: color-mix(in srgb, var(--cat-ai) 40%, var(--border)); }
  .category a[href*="Testing"],
  .link-category[data-cat="Testing"]         { color: var(--cat-testing); border-color: color-mix(in srgb, var(--cat-testing) 40%, var(--border)); }
  .category a[href*="%EC%B5%9C%EC%8B%A0"],
  .category a[href*="트렌드"],
  .link-category[data-cat="Trend"]           { color: var(--cat-trend);   border-color: color-mix(in srgb, var(--cat-trend) 40%, var(--border)); }

  /* "new N" badge — the single allowed gradient (preserved from P0) */
  .list_content .item .badge-new,
  .article-type-common .badge-new,
  .article-type-thumbnail .badge-new,
  .link-article .badge-new,
  .tt_new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 6px;
    box-shadow: 0 1px 2px rgba(239, 68, 68, 0.3);
  }
}

/* ----------------------------------------------------------------------------
   Article detail page
   -------------------------------------------------------------------------- */
@layer article {
  /* Article container — solid white, 1px border, no glass */
  .area-view,
  .entry.single,
  .article.single,
  article.post,
  #content > .entry,
  #content > article {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 48px 56px;
    box-shadow: var(--shadow-1);
  }

  /* Article header — no background image */
  .article-header {
    background: transparent;
    background-image: none;
    padding: 0 0 32px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
  }
  .article-header .category,
  .article-header .link-category {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }

  /* Title — promoted to 40px, semantic h1 feel */
  .article-header h1.title-article,
  .article-header h2.title-article,
  .article-header .title-article,
  .article-header h1,
  .article-header h2,
  .entry-title,
  .article-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    color: var(--text1);
    margin: 0 0 20px;
  }

  .article-header .article-meta,
  .article-header .meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text3);
  }
  .article-header .author { font-weight: 600; color: var(--text2); }
  .article-header .date { font-variant-numeric: tabular-nums; }

  /* Body typography */
  .contents_style,
  .tt_article_useless_p_margin,
  .entry-content,
  .article-body {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text1);
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .contents_style p,
  .entry-content p { margin: 1.4em 0; }

  .contents_style h2,
  .entry-content h2 {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.3;
    color: var(--text1);
    margin: 2.5em 0 0.8em;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }
  .contents_style h3,
  .entry-content h3 {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.35;
    color: var(--text1);
    margin: 2em 0 0.6em;
  }
  .contents_style h4,
  .entry-content h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text1);
    margin: 1.8em 0 0.5em;
  }

  /* First image — treat as a hero */
  .contents_style > p:first-child > img,
  .contents_style > p:first-of-type > img,
  .entry-content > p:first-child > img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    margin: 0 0 2em;
  }

  /* Regular inline images */
  .contents_style img,
  .entry-content img,
  .imageblock img {
    width: 100%;
    height: auto;
    border-radius: var(--r-md);
    margin: 2em 0;
  }
  .imageblock { margin: 2em 0; text-align: center; }

  /* Blockquote — minimal, editorial */
  .contents_style blockquote,
  .entry-content blockquote {
    margin: 1.8em 0;
    padding: 4px 0 4px 20px;
    border-left: 3px solid var(--accent);
    background: transparent;
    border-radius: 0;
    color: var(--text2);
    font-style: normal;
  }
  .contents_style blockquote p,
  .entry-content blockquote p { margin: 0.4em 0; }

  /* Inline code */
  .contents_style code,
  .entry-content code {
    font-family: var(--font-mono);
    font-size: 0.92em;
    padding: 2px 6px;
    background: var(--code-inline-bg);
    color: var(--code-inline-text);
    border-radius: 4px;
    word-break: break-word;
  }

  /* Code block */
  .contents_style pre,
  .entry-content pre {
    margin: 2em 0;
    padding: 24px;
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--r-md);
    border: 0;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.7;
  }
  .contents_style pre code,
  .entry-content pre code {
    font-family: var(--font-mono);
    font-size: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
    border-radius: 0;
  }

  /* Tables — editorial, rule-based */
  .contents_style table,
  .entry-content table {
    width: 100%;
    margin: 2em 0;
    font-size: 15px;
    border-collapse: collapse;
    border-top: 1px solid var(--border-strong);
  }
  .contents_style th,
  .entry-content th {
    text-align: left;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text3);
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-strong);
    background: transparent;
  }
  .contents_style td,
  .entry-content td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    color: var(--text2);
    vertical-align: top;
  }
  .contents_style tr:last-child td,
  .entry-content tr:last-child td { border-bottom: 1px solid var(--border-strong); }

  /* Lists */
  .contents_style ul,
  .contents_style ol,
  .entry-content ul,
  .entry-content ol {
    margin: 1.2em 0;
    padding-left: 1.4em;
  }
  .contents_style ul { list-style: disc; }
  .contents_style ol { list-style: decimal; }
  .contents_style li,
  .entry-content li { margin: 0.4em 0; }

  /* HR */
  .contents_style hr,
  .entry-content hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 3em 0;
  }

  /* Article body links — the reader's "aha" moment. Underlined. */
  .contents_style a:not(.btn):not(pre a),
  .entry-content a:not(.btn):not(pre a) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transition: text-decoration-color var(--t) var(--ease);
  }
  .contents_style a:hover,
  .entry-content a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

  /* Tag list inside article */
  .tags,
  .tag-list {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .tags a,
  .tag-list a {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text3);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .tags a:hover,
  .tag-list a:hover { color: var(--accent); border-color: var(--border-strong); }

  /* Another category / prev-next */
  .another_category {
    margin-top: 48px;
    padding: 28px 0 0;
    border-top: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
  }
  .another_category h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 14px;
  }
  .another_category table { width: 100%; }
  .another_category td { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .another_category a { color: var(--text2); font-size: 14px; transition: color var(--t) var(--ease); }
  .another_category a:hover { color: var(--accent); }

  /* Like / post actions */
  .container_postbtn { margin-top: 40px; display: flex; justify-content: center; }
  .container_postbtn .postbtn_like {
    border: 1px solid var(--border-strong);
    background: var(--bg);
    border-radius: 999px;
    padding: 10px 22px;
    color: var(--text2);
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .container_postbtn .postbtn_like:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
  }
}

/* ----------------------------------------------------------------------------
   Aside / sidebar widgets
   -------------------------------------------------------------------------- */
@layer aside {
  #sidebar,
  .area-aside {
    position: sticky;
    top: 96px;
    align-self: start;
  }

  .widget,
  .box-profile,
  .box-category,
  .box-recent,
  .box-tag,
  .box-visit {
    padding: 24px 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    border-radius: 0;
  }
  .widget:last-child,
  .area-aside > div:last-child { border-bottom: 0; }

  /* Sidebar section titles */
  .widget h3,
  .widget .title,
  .box-profile .title,
  .box-category .title,
  .box-recent .title,
  .box-tag .title,
  .box-visit .title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text3);
    margin-bottom: 16px;
  }

  /* Profile */
  .box-profile,
  .area_profile,
  .profile_wrap {
    text-align: left;
  }
  .box-profile img,
  .area_profile img,
  .profile_wrap img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 0 12px;
    border: 1px solid var(--border);
  }
  .box-profile .name { font-size: 15px; font-weight: 700; color: var(--text1); margin-bottom: 4px; }
  .box-profile .desc { font-size: 13px; color: var(--text3); line-height: 1.6; }

  /* Category list */
  .box-category ul,
  .category_list,
  .tt_category ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .box-category li a,
  .category_list li a,
  .tt_category li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    margin: 0 -10px;
    font-size: 14px;
    color: var(--text2);
    border-radius: var(--r-sm);
    transition: color var(--t) var(--ease), background var(--t) var(--ease);
  }
  .box-category li a:hover,
  .category_list li a:hover,
  .tt_category li a:hover {
    color: var(--text1);
    background: var(--bg3);
  }
  .box-category li .c_cnt,
  .category_list li .c_cnt,
  .tt_category li .c_cnt,
  .box-category li .count {
    font-size: 12px;
    color: var(--text4);
    font-variant-numeric: tabular-nums;
  }

  /* Nested category */
  .box-category ul ul,
  .tt_category ul ul {
    margin: 2px 0 2px 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
  }

  /* Recent posts */
  .box-recent ul li,
  .recent_list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }
  .box-recent ul li:last-child,
  .recent_list li:last-child { border-bottom: 0; }
  .box-recent a,
  .recent_list a {
    font-size: 13px;
    line-height: 1.5;
    color: var(--text2);
    display: block;
    transition: color var(--t) var(--ease);
  }
  .box-recent a:hover,
  .recent_list a:hover { color: var(--accent); }

  /* Tag cloud */
  .box-tag .tagTrail,
  .box-tag ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .box-tag a {
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text3);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .box-tag a:hover { color: var(--accent); border-color: var(--border-strong); }

  /* Visit counter */
  .box-visit .count-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text3);
  }
  .box-visit .count-row strong {
    font-family: var(--font-mono);
    color: var(--text1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

/* ----------------------------------------------------------------------------
   Pagination (preserved design intent from P0)
   -------------------------------------------------------------------------- */
@layer paging {
  .area-paging,
  .paging,
  .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 56px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--border);
  }
  .area-paging a,
  .area-paging .link_num,
  .area-paging .link_page,
  .paging a,
  .pagination a {
    display: inline-grid;
    place-items: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    font-variant-numeric: tabular-nums;
    transition: color var(--t) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease);
  }
  .area-paging a:hover,
  .area-paging .link_num:hover,
  .area-paging .link_page:hover {
    color: var(--text1);
    background: var(--bg3);
  }
  .area-paging .selected,
  .area-paging .link_num.selected,
  .area-paging strong.link_num,
  .pagination .current {
    color: var(--bg);
    background: var(--text1);
    border-color: var(--text1);
    font-weight: 700;
  }
  body.dark .area-paging .selected,
  body.dark .area-paging strong.link_num {
    color: var(--bg);
    background: var(--text1);
  }
}

/* ----------------------------------------------------------------------------
   Footer, back-to-top
   -------------------------------------------------------------------------- */
#footer,
.footer {
  margin-top: auto;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 40px 24px;
}
.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
}
.footer-logo {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--text1);
  color: var(--bg);
  font-weight: 800;
  font-size: 14px;
}
.footer-links { display: flex; gap: 20px; }
.footer-links a {
  font-size: 13px;
  color: var(--text3);
  transition: color var(--t) var(--ease);
}
.footer-links a:hover { color: var(--text1); }
.footer-bottom { padding-top: 20px; }
.copyright {
  font-size: 12px;
  color: var(--text4);
  font-variant-numeric: tabular-nums;
}

#btn-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--bg);
  color: var(--text2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease), transform var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
  z-index: 90;
}
#btn-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
#btn-top:hover {
  color: var(--accent);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* ----------------------------------------------------------------------------
   Dark mode adjustments
   -------------------------------------------------------------------------- */
@layer darkmode {
  body.dark img:not([src*=".svg"]) { filter: brightness(0.92); }
  body.dark .contents_style pre,
  body.dark .entry-content pre {
    background: #000000;
    box-shadow: inset 0 0 0 1px var(--border);
  }
  body.dark .article-type-thumbnail .thumbnail,
  body.dark .list_content .thumbnail { background: var(--bg2); }
}

/* ----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@layer responsive {
  /* 1100px — collapse aside */
  @media (max-width: 1100px) {
    #container,
    .area-main {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 48px 24px 80px;
    }
    #sidebar,
    .area-aside {
      position: static;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 24px 32px;
    }
    .widget,
    .box-profile,
    .box-category,
    .box-recent,
    .box-tag,
    .box-visit {
      padding: 20px 0;
    }
  }

  /* 768px — mobile */
  @media (max-width: 768px) {
    body { font-size: 16px; }

    .header-inner,
    .inner-header,
    .box-header { padding: 0 16px; height: 56px; gap: 12px; }

    .gnb,
    .area-gnb {
      display: none;
      position: fixed;
      top: 56px;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--bg);
      border-top: 1px solid var(--border);
      padding: 16px;
      margin: 0;
      overflow-y: auto;
      z-index: 99;
    }
    .gnb.open,
    .area-gnb.open { display: block; }
    .gnb ul,
    .area-gnb ul { flex-direction: column; align-items: stretch; gap: 0; }
    .gnb li > a,
    .area-gnb li > a,
    .link-category {
      padding: 14px 12px;
      font-size: 15px;
      border-radius: var(--r-sm);
      justify-content: space-between;
    }
    .gnb .sub_category_list { display: block; padding-left: 16px; }

    #btn-menu { display: inline-grid; }
    #btn-search { display: none; }

    #container,
    .area-main {
      padding: 32px 16px 64px;
      gap: 40px;
    }
    #sidebar,
    .area-aside { grid-template-columns: 1fr; }

    /* Article */
    .area-view,
    .entry.single,
    .article.single,
    article.post,
    #content > .entry,
    #content > article {
      padding: 28px 20px;
      border-radius: var(--r-md);
    }
    .article-header h1.title-article,
    .article-header h2.title-article,
    .article-header .title-article,
    .entry-title,
    .article-title { font-size: 32px; }
    .contents_style h2,
    .entry-content h2 { font-size: 24px; }
    .contents_style h3,
    .entry-content h3 { font-size: 19px; }
    .contents_style pre,
    .entry-content pre { padding: 18px; font-size: 13px; }

    /* Hero */
    .hero-section { padding: 48px 16px 24px; }
    .hero-title { font-size: 32px; }
    .hero-desc { font-size: 16px; }
    .hero-stats { gap: 20px; }

    /* List */
    .list_content .item,
    .index-item,
    .article-type-common li,
    .article-type-thumbnail li,
    .entry { padding: 24px 0; }
    .list_content .title,
    .article-type-common .title,
    .article-type-thumbnail .title,
    h2.title { font-size: 18px; }

    /* Footer */
    .footer-top { flex-direction: column; gap: 16px; text-align: center; align-items: center; }

    #btn-top { right: 16px; bottom: 16px; }
  }

  /* 480px */
  @media (max-width: 480px) {
    .header-inner,
    .inner-header,
    .box-header { padding: 0 12px; }
    #container,
    .area-main { padding: 24px 12px 56px; }
    .area-view,
    .entry.single,
    .article.single,
    article.post { padding: 22px 16px; }
    .article-header h1.title-article,
    .article-header h2.title-article,
    .article-header .title-article,
    .entry-title,
    .article-title { font-size: 28px; }
    .contents_style h2,
    .entry-content h2 { font-size: 21px; }
    .hero-title { font-size: 26px; }
    .hero-section { padding: 36px 12px 20px; }
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* Print */
  @media print {
    #header, #sidebar, .area-aside, #footer, #btn-top, #btn-menu,
    .tags, .area-paging, .pagination, .container_postbtn, .hero-section {
      display: none !important;
    }
    #container, .area-main { max-width: 100%; padding: 0; grid-template-columns: 1fr; }
    .area-view, .entry, .article {
      box-shadow: none;
      padding: 0;
      border: none;
    }
    body { background: #fff; color: #000; font-size: 12pt; }
    a { color: #000; text-decoration: underline; }
    .contents_style pre { background: #f5f5f5; color: #000; border: 1px solid #ddd; }
  }
}

/* ============================================================================
   Critical hacks / notes
   ----------------------------------------------------------------------------
   1. `content: none !important` on body::before/after — the old skin injected
      animated blob decorations here; the only reliable way to neutralize them
      regardless of cascade order is !important. Same reason for `.blob` and
      `.bg-decoration`.
   2. `.box-no-search { display: none }` — per P0, empty categories should
      not render a placeholder. No !important needed because Tistory doesn't
      override this.
   3. Category badge colors use [href*="..."] attribute selectors as a fallback
      for when Tistory does not expose data-cat, and `color-mix()` to blend
      the category hue with the neutral border without shipping a matrix of
      color tokens. Requires evergreen browsers (Chrome 111+, Safari 16.2+,
      Firefox 113+) — acceptable for a developer audience.
   4. Sticky aside uses top: 96px to clear the 64px sticky header plus 32px
      breathing room. If the header height changes, update both values.
   5. Article body links use :not(.btn):not(pre a) to avoid underlining code
      inside <pre> blocks and custom button links.
   6. Total !important count: 7 (blob removal x2, reduced-motion x4, print
      hide x1). Well below the < 10 budget. The reduced-motion four are the
      standard a11y pattern and are hard to avoid without them being overridden
      by component-level transitions.
   ========================================================================= */

/* ============================================================================
   LAYOUT FIX (critical) - 스킨 HTML 구조에 강제 적용
   ========================================================================= */
#container { display: block !important; max-width: 1100px !important; margin: 0 auto !important; padding: 0 28px !important; }
main.main { display: flex !important; gap: 48px !important; padding: 40px 0 !important; align-items: flex-start !important; flex-direction: row !important; }
.area-main { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; }
aside.area-aside { width: 280px !important; flex: 0 0 280px !important; flex-shrink: 0 !important; display: block !important; }
.header, #header { position: sticky !important; top: 0; z-index: 100; background: #ffffff !important; border-bottom: 1px solid #e5e5e5 !important; }
.inner-header { max-width: 1100px !important; margin: 0 auto !important; padding: 0 28px !important; height: 64px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; }
.box-header { display: flex !important; align-items: center !important; gap: 20px !important; flex: 1 !important; }
.title-logo { font-size: 18px !important; font-weight: 800 !important; margin: 0 !important; white-space: nowrap !important; }
.area-gnb { background: none !important; border: none !important; margin: 0 !important; padding: 0 !important; }
.area-gnb ul { display: flex !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
.area-gnb li a { display: inline-block !important; padding: 7px 14px !important; color: #737373 !important; font-size: 14px !important; white-space: nowrap !important; }
.util.use-top { flex: 1 !important; max-width: 280px !important; }
.searchInput { width: 100% !important; padding: 8px 14px !important; border: 1px solid #e5e5e5 !important; border-radius: 8px !important; font-size: 16px !important; background: #ffffff !important; }
@media (max-width: 900px) {
  main.main { flex-direction: column !important; }
  aside.area-aside { width: 100% !important; flex: none !important; }
}

/* ============================================================================
   EMERGENCY LAYOUT OVERRIDE - area-main grid 문제 수정
   ========================================================================= */
.area-main { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; grid-template-columns: none !important; }
.area-view { width: 100% !important; display: block !important; max-width: none !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 12px !important; padding: 48px 56px !important; box-shadow: none !important; }
.article-view { width: 100% !important; display: block !important; max-width: none !important; }
.contents_style { width: 100% !important; display: block !important; max-width: none !important; }
.area-common { width: 100% !important; display: block !important; }
.article-type-common, .article-type-thumbnail { width: 100% !important; display: block !important; background: #ffffff !important; border: 1px solid #e5e5e5 !important; border-radius: 12px !important; padding: 28px 32px !important; margin-bottom: 20px !important; box-shadow: none !important; }
.area-paging { display: flex !important; justify-content: center !important; gap: 6px !important; margin: 40px 0 !important; width: 100% !important; }

/* ============================================================================
   CRITICAL DESIGN FIX v2 - 20년차 프론트 개발자 긴급 패치
   ========================================================================= */

/* 1) 글 상세 - article-header 자동 배경 이미지 제거 */
.article-header,
.article-header[style*="background-image"],
.article-header[style*="url"] {
  background-image: none !important;
  background: transparent !important;
  padding: 0 0 28px !important;
  margin-bottom: 32px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  min-height: auto !important;
  height: auto !important;
}
.article-header .inner-header,
.article-header .inner {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.article-header::before,
.article-header::after {
  display: none !important;
  content: none !important;
}

/* 2) 글 제목 (h2.title-article) 크게 */
h2.title-article,
.title-article,
.article-title-thumbnail {
  font-size: 36px !important;
  line-height: 1.3 !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  color: #0a0a0a !important;
  margin: 12px 0 16px !important;
  padding: 0 !important;
  display: block !important;
  text-align: left !important;
  text-shadow: none !important;
  background: none !important;
}

/* 3) 카테고리 뱃지 - 제목 위 */
.article-header .link-category,
.article-header .category {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  margin-bottom: 16px !important;
  color: #1d4ed8 !important;
  background: rgba(29, 78, 216, 0.1) !important;
}

/* 4) 본문 box-meta (날짜/저자) */
.article-header .box-meta,
.article-header .date,
.article-header .reading-time {
  font-size: 14px !important;
  color: #737373 !important;
  margin-top: 12px !important;
  padding: 0 !important;
  background: none !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* 5) 목록 카드 - 썸네일 영역 작게 (text-first 카드) */
.article-type-common,
.article-type-thumbnail {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 28px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
  display: block !important;
  transition: border-color 180ms ease-out !important;
}
.article-type-common:hover,
.article-type-thumbnail:hover {
  border-color: #1d4ed8 !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 목록 카드의 큰 썸네일 제거 또는 작게 */
.article-type-thumbnail .thumbnail,
.article-type-common .thumbnail,
.article-type-thumbnail > a > .thumbnail {
  display: none !important;
}
/* 썸네일 없는 카드 내부 padding 복구 */
.article-type-thumbnail .article-content,
.article-type-common .article-content {
  padding: 0 !important;
  background: transparent !important;
}
/* 제목 */
.article-type-common .title,
.article-type-thumbnail .title,
.link-article .title,
.article-type-common strong.title,
.article-type-thumbnail strong.title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: #0a0a0a !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  display: block !important;
  background: none !important;
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-shadow: none !important;
}
.link-article {
  color: inherit !important;
  text-decoration: none !important;
}
/* 요약 */
.summary {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #525252 !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  background: none !important;
  -webkit-line-clamp: 3 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* 메타 (카테고리 뱃지 + 날짜) */
.box-meta {
  font-size: 13px !important;
  color: #737373 !important;
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
}
.box-meta .date {
  font-size: 13px !important;
  color: #a3a3a3 !important;
}

/* 6) 카테고리 뱃지 색상 (semantic) */
.link-category {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  text-decoration: none !important;
  margin: 0 !important;
  background: rgba(29, 78, 216, 0.1) !important;
  color: #1d4ed8 !important;
}
.link-category[href*="Java"]      { background: rgba(239, 68, 68, 0.1) !important; color: #dc2626 !important; }
.link-category[href*="Spring"]    { background: rgba(34, 197, 94, 0.1) !important; color: #16a34a !important; }
.link-category[href*="JPA"]       { background: rgba(59, 130, 246, 0.1) !important; color: #2563eb !important; }
.link-category[href*="Architecture"] { background: rgba(168, 85, 247, 0.1) !important; color: #9333ea !important; }
.link-category[href*="Database"]  { background: rgba(245, 158, 11, 0.1) !important; color: #d97706 !important; }
.link-category[href*="DevOps"]    { background: rgba(20, 184, 166, 0.1) !important; color: #0d9488 !important; }
.link-category[href*="Kafka"]     { background: rgba(249, 115, 22, 0.1) !important; color: #ea580c !important; }
.link-category[href*="CS"]        { background: rgba(99, 102, 241, 0.1) !important; color: #4f46e5 !important; }
.link-category[href*="AI"]        { background: rgba(236, 72, 153, 0.1) !important; color: #db2777 !important; }
.link-category[href*="Testing"]   { background: rgba(16, 185, 129, 0.1) !important; color: #059669 !important; }

/* 7) 사이드바 카드 스타일 복구 */
aside.area-aside { padding: 0 !important; }
.box-profile,
.box-category,
.box-recent,
.box-tag,
.box-visit {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: none !important;
}
.box-profile {
  text-align: center !important;
  padding: 24px 20px !important;
}
.box-profile .tit-g,
.box-profile .nickname {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  margin-bottom: 4px !important;
}
.box-profile .text-profile,
.box-profile .description {
  font-size: 13px !important;
  color: #737373 !important;
  line-height: 1.6 !important;
  margin: 8px 0 14px !important;
}

/* 사이드바 박스 제목 */
.title-sidebar {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #737373 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}

/* 8) 카테고리 리스트 */
.tt_category, .category_list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.tt_category li, .category_list li {
  border-bottom: 1px solid #f5f5f5 !important;
}
.tt_category li:last-child, .category_list li:last-child {
  border-bottom: none !important;
}
.tt_category .link_tit,
.tt_category .link_item,
.category_list .link_item,
.category_list .link_sub_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 2px !important;
  font-size: 14px !important;
  color: #404040 !important;
  text-decoration: none !important;
  transition: color 150ms ease-out !important;
}
.tt_category .link_tit {
  font-weight: 700 !important;
  color: #0a0a0a !important;
  font-size: 13px !important;
}
.tt_category .link_item:hover,
.category_list .link_item:hover {
  color: #1d4ed8 !important;
  padding-left: 6px !important;
}
.category_list .link_sub_item {
  padding-left: 16px !important;
  font-size: 13px !important;
  color: #525252 !important;
}

/* 9) new 뱃지 (blue accent에 맞춤) */
.category_list img[src*="new_ico"],
.tt_category img[src*="new_ico"] {
  display: none !important;
}
/* JS가 span으로 교체한 뱃지 스타일 통일 */

/* 10) box-visit 총 방문자 */
.box-visit .text-total {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  display: inline-block !important;
  margin-left: 6px !important;
}
.box-visit ul {
  display: flex !important;
  gap: 12px !important;
  margin-top: 10px !important;
  padding: 0 !important;
  list-style: none !important;
}
.box-visit li {
  font-size: 12px !important;
  color: #737373 !important;
}

/* 11) 본문 content_style 타이포 */
.contents_style {
  font-size: 17px !important;
  line-height: 1.85 !important;
  color: #1a1a1a !important;
}
.contents_style h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  letter-spacing: -0.02em !important;
  margin: 2.8em 0 0.8em !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
.contents_style h2:first-child { margin-top: 0 !important; }
.contents_style h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  margin: 2em 0 0.6em !important;
  padding: 0 !important;
  border: none !important;
}
.contents_style p {
  margin: 0 0 1.4em !important;
}
.contents_style blockquote {
  border-left: 3px solid #1d4ed8 !important;
  padding: 12px 20px !important;
  margin: 1.8em 0 !important;
  background: #f5f5f5 !important;
  color: #525252 !important;
  font-style: normal !important;
  border-radius: 0 4px 4px 0 !important;
}
.contents_style code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace !important;
  font-size: 0.88em !important;
  background: rgba(29, 78, 216, 0.08) !important;
  color: #1d4ed8 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}
.contents_style pre {
  background: #0a0a0a !important;
  color: #e5e5e5 !important;
  padding: 24px !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.8em 0 !important;
  line-height: 1.6 !important;
  border: 1px solid #262626 !important;
}
.contents_style pre code {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
  font-size: 14px !important;
}
.contents_style table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.8em 0 !important;
  font-size: 14px !important;
}
.contents_style th,
.contents_style td {
  border-bottom: 1px solid #e5e5e5 !important;
  padding: 12px 16px !important;
  text-align: left !important;
}
.contents_style th {
  background: #fafafa !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #525252 !important;
  border-bottom: 2px solid #d4d4d4 !important;
}
.contents_style img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 1.8em 0 !important;
}
.contents_style ul,
.contents_style ol {
  padding-left: 1.5em !important;
  margin: 1em 0 1.4em !important;
}
.contents_style li {
  margin-bottom: 0.4em !important;
}
.contents_style a {
  color: #1d4ed8 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1.5px !important;
}

/* 12) area-main padding 정리 */
.area-main {
  padding: 0 !important;
}

/* 13) 페이징 active */
.link_num:has(.selected),
.link_num .selected {
  background: #1d4ed8 !important;
  color: #fff !important;
  border-color: #1d4ed8 !important;
}

/* 14) 홈 전체 글 제목 */
.title-search, .title-list {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}
.archives {
  font-weight: 800 !important;
}

/* 15) 홈 카테고리 배너 숨김 (이상한 파란 박스) */
.category-banner-wrp,
.category-banner {
  display: none !important;
}

/* 16) 헤더 fine-tuning */
.header, #header {
  height: auto !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e5e5 !important;
}
.inner-header {
  height: 64px !important;
}
.title-logo {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #0a0a0a !important;
  line-height: 1 !important;
}
.title-logo a {
  color: #0a0a0a !important;
}
.title-logo::before { display: none !important; }

/* ============================================================================
   FINAL POLISH - 세부 조정
   ========================================================================= */

/* 제목 크기 축소 + 2줄 기준 */
h2.title-article,
.title-article {
  font-size: 30px !important;
  line-height: 1.3 !important;
  margin: 8px 0 14px !important;
}

/* area-view padding 균형 */
.area-view {
  padding: 40px 48px !important;
}

/* 홈에서 NEW 뱃지 (글 제목 옆) accent 블루로 */
.title span[style*="gradient"],
strong.title span[style*="gradient"],
.link-article span[style*="gradient"] {
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* 사이드바 new 뱃지도 blue로 통일 */
.tt_category span[style*="gradient"],
.category_list span[style*="gradient"] {
  background: #1d4ed8 !important;
  color: #fff !important;
  box-shadow: none !important;
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 5px !important;
  font-size: 9px !important;
  border-radius: 8px !important;
}

/* box-meta 우측 정렬된 요소 */
.box-meta > * {
  flex-shrink: 0 !important;
}

/* 본문 카테고리/태그 마진 */
.article-footer {
  margin-top: 48px !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid #e5e5e5 !important;
  background: none !important;
}
.article-footer .tag_article {
  background: none !important;
  border: none !important;
  padding: 0 !important;
}
.article-footer .tag_article a {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: #f5f5f5 !important;
  color: #525252 !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  margin: 0 6px 8px 0 !important;
  text-decoration: none !important;
  transition: all 150ms ease-out !important;
}
.article-footer .tag_article a:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* 본문 이미지 (히어로 배너) 마진 */
.contents_style > p:first-child > img:first-child {
  margin: 0 0 32px !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
}

/* 댓글 영역 */
.area-reply, .area_reply {
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid #e5e5e5 !important;
  background: none !important;
}

/* 헤더 로고 영역 */
.title-logo {
  padding: 0 !important;
}
.title-logo a {
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* 검색창 스타일 */
.searchInput,
input[type="search"],
.util.use-top input {
  background: #fafafa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 8px !important;
  padding: 9px 16px !important;
  font-size: 14px !important;
  width: 100% !important;
  max-width: 320px !important;
}
.searchInput:focus {
  outline: none !important;
  border-color: #1d4ed8 !important;
  background: #ffffff !important;
}

/* 제목 overflow 방지 */
h2.title-article,
.title-article,
.article-title-thumbnail {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
  width: 100% !important;
  white-space: normal !important;
  box-sizing: border-box !important;
}

.article-header {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.contents_style {
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-break: keep-all !important;
}

/* 본문 h2도 동일 */
.contents_style h2,
.contents_style h3 {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* 사이드바 프로필 이름/설명 줄바꿈 */
.box-profile .tit-g,
.box-profile strong,
.box-profile p,
.box-profile .description {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  max-width: 100% !important;
}

/* ============================================================================
   FUNCTIONAL FIX - 링크 클릭 + JS 기능 복구
   ========================================================================= */

/* 첫 번째 .link-article (thumbnail wrapper) 숨김 */
.article-type-thumbnail > a.link-article:first-of-type,
.article-type-common > a.link-article:first-of-type {
  display: none !important;
}

/* article-content 내부 .link-article을 block으로 (클릭 영역 확보) */
.article-content {
  display: block !important;
  width: 100% !important;
}
.article-content a.link-article,
.article-type-thumbnail .article-content a.link-article,
.article-type-common .article-content a.link-article {
  display: block !important;
  width: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}
.article-content a.link-article:hover strong.title,
.article-type-common .article-content a.link-article:hover strong.title {
  color: #1d4ed8 !important;
}

/* ============================================================================
   코드 블록 드래그 선택 색상 - 검은 배경에서도 보이게
   ========================================================================= */
.contents_style pre::selection,
.contents_style pre code::selection,
.contents_style pre *::selection {
  background: rgba(96, 165, 250, 0.5) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}
.contents_style pre ::-moz-selection,
.contents_style pre code ::-moz-selection {
  background: rgba(96, 165, 250, 0.5) !important;
  color: #ffffff !important;
  text-shadow: none !important;
}

/* 일반 본문 드래그 선택도 톤 맞춤 */
.contents_style ::selection,
.contents_style *::selection,
.area-view ::selection,
body ::selection {
  background: rgba(29, 78, 216, 0.25) !important;
  color: inherit !important;
}
.contents_style ::-moz-selection,
.area-view ::-moz-selection {
  background: rgba(29, 78, 216, 0.25) !important;
  color: inherit !important;
}

/* 다크모드에서도 동일 원칙 */
body.dark .contents_style pre::selection,
body.dark .contents_style pre code::selection,
body.dark .contents_style pre *::selection {
  background: rgba(96, 165, 250, 0.55) !important;
  color: #ffffff !important;
}
body.dark .contents_style ::selection,
body.dark ::selection {
  background: rgba(96, 165, 250, 0.3) !important;
  color: #ffffff !important;
}

/* ============================================================================
   햄버거 메뉴 - 데스크톱 숨김, 모바일만 표시
   ========================================================================= */
.button-menu {
  display: none !important;
}
@media (max-width: 900px) {
  .button-menu {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    background: none !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .button-menu svg {
    width: 18px !important;
    height: 14px !important;
  }
  /* 모바일에서 gnb 숨김 (햄버거로 토글) */
  .area-gnb {
    display: none !important;
  }
  body.menu-open .area-gnb {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e5e5e5 !important;
    padding: 16px 20px !important;
    z-index: 999 !important;
  }
  body.menu-open .area-gnb ul {
    flex-direction: column !important;
    gap: 8px !important;
  }
  body.menu-open .area-gnb li a {
    display: block !important;
    padding: 10px 12px !important;
    font-size: 16px !important;
  }
}

/* ============================================================================
   사이드바 카테고리 리스트 수정 - 왼쪽 세로선 제거, 높이 축소
   ========================================================================= */
.box-category nav,
.box-category nav ul {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border: none !important;
}
.tt_category,
.tt_category > li,
.tt_category > li > ul,
.category_list,
.category_list > li,
.sub_category_list {
  padding-left: 0 !important;
  margin-left: 0 !important;
  border-left: none !important;
  list-style: none !important;
}
.tt_category > li {
  border: none !important;
}

/* link_tit (최상위 "개발 일상") - 제목 스타일 */
.tt_category .link_tit {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 10px !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  border-bottom: 1px solid #e5e5e5 !important;
  text-decoration: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
}

/* category_list 하위 항목 (Java, Spring Boot 등) */
.category_list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.category_list > li {
  border-bottom: 1px solid #f5f5f5 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-left: none !important;
}
.category_list > li:last-child {
  border-bottom: none !important;
}
.category_list .link_item,
.category_list .link_sub_item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #404040 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  min-height: auto !important;
  height: auto !important;
  transition: color 150ms ease-out, padding-left 150ms ease-out !important;
}
.category_list .link_item:hover,
.category_list .link_sub_item:hover {
  color: #1d4ed8 !important;
  padding-left: 6px !important;
}
.category_list .link_sub_item {
  padding-left: 16px !important;
  font-size: 12px !important;
  color: #525252 !important;
}

/* N 뱃지 크기 살짝 축소 */
.tt_category span[style*="gradient"],
.category_list span[style*="gradient"],
.tt_category a > span,
.category_list a > span {
  min-width: 16px !important;
  height: 16px !important;
  padding: 0 5px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  margin-left: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* box-category 박스 자체 padding 조정 */
.box-category {
  padding: 18px 20px !important;
}

/* ============================================================================
   사이드바 전체 폴리싱 - Tag Cloud, 최근글, Calendar, Social
   ========================================================================= */

/* Tag Cloud */
.box-tag, .box_tag {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}
.box-tag .tag_box,
.box_tag .tag_box,
.box-tag .list_tag,
.box_tag .list_tag {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.8 !important;
}
.box-tag a,
.box_tag a,
.cloud1 a, .cloud2 a, .cloud3 a, .cloud4 a, .cloud5 a {
  display: inline-block !important;
  padding: 4px 10px !important;
  margin: 0 4px 6px 0 !important;
  background: #f5f5f5 !important;
  color: #525252 !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 150ms ease-out !important;
}
.box-tag a:hover,
.box_tag a:hover,
.cloud1 a:hover, .cloud2 a:hover, .cloud3 a:hover, .cloud4 a:hover, .cloud5 a:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

/* 최근글/인기글 탭 박스 */
.box-recent, .box_recent {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
}
.tab-recent {
  display: flex !important;
  gap: 2px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border-bottom: 1px solid #e5e5e5 !important;
  list-style: none !important;
}
.tab-recent li {
  margin-bottom: -1px !important;
}
.tab-recent .tab-button,
.tab-recent a.tab-button {
  display: inline-block !important;
  padding: 8px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #737373 !important;
  background: none !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.tab-recent li.on a.tab-button,
.tab-recent .on .tab-button {
  color: #1d4ed8 !important;
  border-bottom-color: #1d4ed8 !important;
}
.list-recent, .list_recent {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.link-recent, .link_recent {
  display: block !important;
  padding: 9px 0 !important;
  font-size: 13px !important;
  color: #404040 !important;
  text-decoration: none !important;
  border-bottom: 1px solid #f5f5f5 !important;
  line-height: 1.5 !important;
  transition: color 150ms ease-out !important;
}
.link-recent:last-child,
.list-recent li:last-child .link-recent { border-bottom: none !important; }
.link-recent:hover {
  color: #1d4ed8 !important;
}

/* Calendar */
.box-calendar, .box_calendar {
  background: #ffffff !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 18px 20px !important;
  margin-bottom: 16px !important;
  display: block !important;
}
.calendar_wrap, [class*="calendar"] table {
  display: table !important;
  width: 100% !important;
  margin: 0 !important;
}
.inner-calendar table,
.box-calendar table {
  width: 100% !important;
  font-size: 12px !important;
  border-collapse: collapse !important;
}
.box-calendar th, .box-calendar td,
.inner-calendar th, .inner-calendar td {
  padding: 4px 0 !important;
  text-align: center !important;
  color: #525252 !important;
  border: none !important;
  font-size: 11px !important;
}
.box-calendar th {
  color: #737373 !important;
  font-weight: 600 !important;
  font-size: 10px !important;
}

/* SNS (Facebook/Twitter) 박스 - 완전 숨김 */
.box-sns, .box_sns,
.box-facebook, .box_facebook,
.box-twitter, .box_twitter,
.tab-sns, .tab_sns,
[class*="facebook-page"],
[class*="twitter-widget"] {
  display: none !important;
}

/* Notice, Plugins 박스 정리 */
.box-notice, .box-plugins, .box-total, .box-counter, .box-site {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 프로필 박스 구독 버튼 */
.btn_menu_toolbar.btn_subscription,
.btn-subscribe, .btn-subscription {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  text-decoration: none !important;
  transition: background 150ms ease-out !important;
}
.btn_menu_toolbar.btn_subscription:hover,
.btn-subscribe:hover {
  background: #1e40af !important;
  color: #ffffff !important;
  border-color: #1e40af !important;
}

/* 구독 버튼 아이콘/체크 숨김 */
.btn_subscription .ico_check_type1,
.btn_menu_toolbar .ico_check_type1 {
  display: none !important;
}

/* 프로필 이름/설명 정돈 */
.txt_tool_id, .txt_state {
  font-style: normal !important;
  font-weight: 600 !important;
}

/* ============================================================================
   다크모드 토글 버튼 - 우측 하단 플로팅
   ========================================================================= */
#dark-mode-toggle {
  position: fixed !important;
  bottom: 28px !important;
  right: 28px !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 12px !important;
  border: 1px solid #e5e5e5 !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-size: 20px !important;
  cursor: pointer !important;
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
  transition: all 180ms ease-out !important;
  padding: 0 !important;
  line-height: 1 !important;
}
#dark-mode-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
  border-color: #1d4ed8 !important;
}

/* 다크모드 */
body.dark {
  background: #0a0a0a !important;
  color: #fafafa !important;
}
body.dark .header,
body.dark #header {
  background: #0a0a0a !important;
  border-bottom-color: #262626 !important;
}
body.dark .title-logo,
body.dark .title-logo a {
  color: #fafafa !important;
}
body.dark .area-gnb li a {
  color: #a3a3a3 !important;
}
body.dark .area-gnb li a:hover {
  color: #60a5fa !important;
}
body.dark .searchInput {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #fafafa !important;
}
body.dark .searchInput:focus {
  border-color: #60a5fa !important;
}
body.dark .area-view,
body.dark .article-type-common,
body.dark .article-type-thumbnail,
body.dark .box-profile,
body.dark .box-category,
body.dark .box-recent,
body.dark .box-tag,
body.dark .box-visit,
body.dark .box-calendar,
body.dark .box-recent-viewed,
body.dark .blog-toc {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #e5e5e5 !important;
}
body.dark .article-type-common:hover,
body.dark .article-type-thumbnail:hover {
  border-color: #60a5fa !important;
}
body.dark h2.title-article,
body.dark .title-article,
body.dark .title-search,
body.dark .contents_style h2,
body.dark .contents_style h3,
body.dark .box-profile .tit-g,
body.dark .link-article strong.title,
body.dark .title span,
body.dark .tt_category .link_tit,
body.dark .title-list,
body.dark .archives {
  color: #fafafa !important;
}
body.dark .contents_style {
  color: #d4d4d4 !important;
}
body.dark .contents_style p {
  color: #d4d4d4 !important;
}
body.dark .summary,
body.dark .text-profile,
body.dark .box-meta,
body.dark .date,
body.dark .title-sidebar {
  color: #a3a3a3 !important;
}
body.dark .category_list .link_item,
body.dark .category_list .link_sub_item {
  color: #d4d4d4 !important;
}
body.dark .category_list .link_item:hover {
  color: #60a5fa !important;
}
body.dark .article-header {
  border-bottom-color: #262626 !important;
}
body.dark .contents_style code {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #60a5fa !important;
}
body.dark .contents_style blockquote {
  background: #0a0a0a !important;
  border-left-color: #60a5fa !important;
  color: #a3a3a3 !important;
}
body.dark .contents_style table th {
  background: #0a0a0a !important;
  color: #a3a3a3 !important;
  border-bottom-color: #404040 !important;
}
body.dark .contents_style th,
body.dark .contents_style td {
  border-bottom-color: #262626 !important;
}
body.dark .contents_style a {
  color: #60a5fa !important;
}
body.dark .article-footer {
  border-top-color: #262626 !important;
}
body.dark .article-footer .tag_article a {
  background: #262626 !important;
  color: #d4d4d4 !important;
}
body.dark .article-footer .tag_article a:hover {
  background: #60a5fa !important;
  color: #0a0a0a !important;
}
body.dark .box-tag a,
body.dark .cloud1 a, body.dark .cloud2 a, body.dark .cloud3 a, body.dark .cloud4 a, body.dark .cloud5 a {
  background: #262626 !important;
  color: #d4d4d4 !important;
}
body.dark .box-tag a:hover {
  background: #60a5fa !important;
  color: #0a0a0a !important;
}
body.dark .tt_category .link_tit {
  border-bottom-color: #262626 !important;
}
body.dark .category_list > li {
  border-bottom-color: #262626 !important;
}
body.dark .link-recent {
  color: #d4d4d4 !important;
  border-bottom-color: #262626 !important;
}
body.dark .link-recent:hover {
  color: #60a5fa !important;
}
body.dark .box-recent-viewed a {
  color: #d4d4d4 !important;
  border-bottom-color: #262626 !important;
}
body.dark .box-recent-viewed a:hover {
  color: #60a5fa !important;
}
body.dark .box-visit .text-total {
  color: #fafafa !important;
}
body.dark .link_num {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #a3a3a3 !important;
}
body.dark .link_num:hover {
  border-color: #60a5fa !important;
  color: #60a5fa !important;
}
body.dark .link_num:has(.selected),
body.dark .link_num .selected {
  background: #60a5fa !important;
  color: #0a0a0a !important;
  border-color: #60a5fa !important;
}
body.dark .link_page {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #d4d4d4 !important;
}
body.dark #dark-mode-toggle {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #fafafa !important;
}
body.dark .link-category {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #60a5fa !important;
}
body.dark .article-header .link-category {
  background: rgba(96, 165, 250, 0.15) !important;
  color: #60a5fa !important;
}

/* 박스 구분선 다크 */
body.dark .title-sidebar,
body.dark .tab-recent {
  border-color: #262626 !important;
}

/* 본문 이미지 그림자 다크 */
body.dark .contents_style img {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================================
   다크모드 토글 버튼 - 헤더 우측 통합 (재배치)
   ========================================================================= */
#dark-mode-toggle {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e5e5 !important;
  background: #fafafa !important;
  color: #0a0a0a !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  transition: all 180ms ease-out !important;
  padding: 0 !important;
  line-height: 1 !important;
  margin: 0 0 0 8px !important;
  flex-shrink: 0 !important;
  bottom: auto !important;
  right: auto !important;
}
#dark-mode-toggle:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  color: #ffffff !important;
  transform: none !important;
}
body.dark #dark-mode-toggle {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #fafafa !important;
}
body.dark #dark-mode-toggle:hover {
  background: #60a5fa !important;
  border-color: #60a5fa !important;
  color: #0a0a0a !important;
}

/* area-align이 flex여야 토글이 잘 정렬됨 */
.area-align {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* ============================================================================
   페이징 하단 "더보기" 버튼 + 빈 영역 제거
   ========================================================================= */
.area-paging-more,
.paging-more,
a.paging-more {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 페이징 위 빈 구분선 정리 */
.area-common > hr,
.area-common > .line-bottom,
.line-bottom {
  display: none !important;
}

/* 페이징 위 불필요한 선 제거 */
.area-paging {
  border-top: none !important;
  margin-top: 24px !important;
  padding-top: 0 !important;
}

/* 빈 article-reply 숨김 */
.article-reply:empty,
.article-reply:not(:has(*:not(:empty))) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* 목록 페이지에서 article-reply 자체 숨김 */
.area-common .article-reply {
  display: none !important;
}

/* 마지막 글 카드와 페이징 사이 선 제거 */
.article-type-common:last-of-type,
.article-type-thumbnail:last-of-type {
  border-bottom: none !important;
  margin-bottom: 0 !important;
}

/* area-view 안에서 페이징 직전 빈 공간/선 제거 */
.area-view > .area-paging,
.area-common > .area-paging {
  border: none !important;
}
.area-common {
  border-bottom: none !important;
}

/* 목록 페이지에서 .area-view border 제거 (카드 개별 border만 유지) */
.area-common ~ .area-view,
.area-view:has(.area-common),
.area-view:has(.area-paging) {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 카드 border 통일: bottom만 + 마지막은 없음 */
.article-type-common,
.article-type-thumbnail {
  border: none !important;
  border-bottom: 1px solid #e5e5e5 !important;
  border-radius: 0 !important;
  padding: 24px 0 !important;
  background: transparent !important;
}
.article-type-common:last-of-type,
.article-type-thumbnail:last-of-type,
.article-type-common.checked:last-child,
.article-type-thumbnail.checked:last-child {
  border-bottom: none !important;
}
/* 첫번째 카드 위 border도 없음 */
.article-type-common:first-of-type,
.article-type-thumbnail:first-of-type {
  padding-top: 0 !important;
}

/* 글 제목 잘림 버그 수정 */
h2.title-article,
.title-article,
.article-title-thumbnail {
  line-height: 1.35 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: unset !important;
  -webkit-line-clamp: unset !important;
}
.article-header {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
}
.article-header .inner-header,
.article-header .inner {
  overflow: visible !important;
  height: auto !important;
}

/* 글 상세 헤더 - flex → block (제목 줄바꿈 허용) */
.article-header .box-meta {
  display: block !important;
  flex-wrap: unset !important;
}
.article-header .inner-header,
.article-header .inner {
  display: block !important;
  flex-wrap: unset !important;
}

/* 중복 TOC 제거 - 내가 추가한 blog-toc 숨김 (기존 스킨 TOC만 유지) */
.blog-toc,
.blog-toc-disabled,
nav.blog-toc {
  display: none !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================================
   글 하단 영역 (공감/구독/카테고리 다른글/댓글) 정돈
   ========================================================================= */

/* 공감 버튼 영역 */
.container_postbtn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 0 !important;
  margin: 40px 0 0 !important;
  border-top: 1px solid #e5e5e5 !important;
}
.container_postbtn .postbtn_like {
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  background: #fafafa !important;
  transition: all 180ms ease-out !important;
}
.container_postbtn .postbtn_like:hover {
  border-color: #1d4ed8 !important;
  background: rgba(29, 78, 216, 0.05) !important;
}

/* 카테고리의 다른 글 */
.another_category {
  background: #fafafa !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  margin: 32px 0 !important;
  padding: 24px !important;
}
.another_category table {
  width: 100% !important;
  border-collapse: collapse !important;
}
.another_category .tit_category {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #0a0a0a !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e5e5e5 !important;
  display: block !important;
}
.another_category a {
  color: #404040 !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  transition: color 150ms ease-out !important;
}
.another_category a:hover {
  color: #1d4ed8 !important;
}
.another_category td {
  padding: 8px 4px !important;
  border: none !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 14px !important;
  color: #525252 !important;
}
.another_category tr:last-child td {
  border-bottom: none !important;
}

/* 댓글 영역 */
.area-reply, .area_reply {
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid #e5e5e5 !important;
}
.area-reply textarea,
.area_reply textarea {
  width: 100% !important;
  min-height: 100px !important;
  padding: 16px !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  outline: none !important;
  background: #fafafa !important;
  color: #0a0a0a !important;
  resize: vertical !important;
  transition: border-color 180ms ease-out !important;
}
.area-reply textarea:focus,
.area_reply textarea:focus {
  border-color: #1d4ed8 !important;
  background: #ffffff !important;
}
.area-reply input[type="submit"],
.area_reply input[type="submit"],
.area-reply .btn_comment,
.area_reply .btn_comment {
  padding: 10px 24px !important;
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: background 180ms ease-out !important;
}
.area-reply input[type="submit"]:hover {
  background: #1e40af !important;
}

/* 다크모드 하단 영역 */
body.dark .container_postbtn {
  border-top-color: #262626 !important;
}
body.dark .container_postbtn .postbtn_like {
  border-color: #262626 !important;
  background: #171717 !important;
}
body.dark .another_category {
  background: #171717 !important;
  border-color: #262626 !important;
}
body.dark .another_category .tit_category {
  color: #fafafa !important;
  border-bottom-color: #262626 !important;
}
body.dark .another_category a {
  color: #d4d4d4 !important;
}
body.dark .another_category a:hover {
  color: #60a5fa !important;
}
body.dark .another_category td {
  color: #a3a3a3 !important;
  border-bottom-color: #262626 !important;
}
body.dark .area-reply textarea {
  background: #171717 !important;
  border-color: #262626 !important;
  color: #fafafa !important;
}
body.dark .area-reply textarea:focus {
  border-color: #60a5fa !important;
}