:root {
  --accent: #0071e3;
  --surface-user: #e9eef4;
  --panel-radius: 28px;
  --depth: 1;

  --font-ui: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;

  --surface: var(--surface-user);
  --surface-2: #f1f5f9;
  --surface-3: #dfe6ed;
  --text: #1d1d1f;
  --text-2: #5f6670;
  --text-3: #8b929b;
  --line: rgba(74, 85, 98, .12);
  --highlight: rgba(255, 255, 255, .94);
  --shadow: rgba(168, 179, 191, .52);
  --shadow-deep: rgba(151, 163, 176, .56);
  --accent-soft: rgba(0, 113, 227, .11);
  --accent-shadow: rgba(0, 113, 227, .22);

  --raised-shadow:
    calc(-8px * var(--depth)) calc(-8px * var(--depth)) calc(18px * var(--depth)) rgba(255,255,255,.82),
    calc(9px * var(--depth)) calc(9px * var(--depth)) calc(20px * var(--depth)) var(--shadow);
  --raised-shadow-sm:
    calc(-4px * var(--depth)) calc(-4px * var(--depth)) calc(10px * var(--depth)) rgba(255,255,255,.78),
    calc(5px * var(--depth)) calc(5px * var(--depth)) calc(11px * var(--depth)) rgba(168,179,191,.44);
  --inset-shadow:
    inset calc(4px * var(--depth)) calc(4px * var(--depth)) calc(10px * var(--depth)) rgba(163,174,186,.46),
    inset calc(-4px * var(--depth)) calc(-4px * var(--depth)) calc(10px * var(--depth)) rgba(255,255,255,.72);
  --hairline: 0 0 0 1px rgba(255,255,255,.38) inset;
}

html[data-theme="dark"] {
  --surface: #22262c;
  --surface-2: #292e35;
  --surface-3: #1c2025;
  --text: #f4f6f8;
  --text-2: #b6bdc6;
  --text-3: #7f8994;
  --line: rgba(255,255,255,.075);
  --highlight: rgba(55, 61, 69, .82);
  --shadow: rgba(10, 12, 15, .74);
  --shadow-deep: rgba(6, 8, 10, .84);
  --accent-soft: rgba(10, 132, 255, .15);
  --accent-shadow: rgba(10,132,255,.18);
  --raised-shadow:
    calc(-10px * var(--depth)) calc(-10px * var(--depth)) calc(22px * var(--depth)) rgba(52,58,66,.72),
    calc(10px * var(--depth)) calc(10px * var(--depth)) calc(24px * var(--depth)) rgba(8,10,13,.78);
  --raised-shadow-sm:
    calc(-5px * var(--depth)) calc(-5px * var(--depth)) calc(12px * var(--depth)) rgba(52,58,66,.62),
    calc(5px * var(--depth)) calc(5px * var(--depth)) calc(12px * var(--depth)) rgba(8,10,13,.72);
  --inset-shadow:
    inset calc(5px * var(--depth)) calc(5px * var(--depth)) calc(12px * var(--depth)) rgba(8,10,13,.72),
    inset calc(-5px * var(--depth)) calc(-5px * var(--depth)) calc(12px * var(--depth)) rgba(52,58,66,.56);
  --hairline: 0 0 0 1px rgba(255,255,255,.025) inset;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--surface); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--text);
  background:
    radial-gradient(circle at 16% -12%, rgba(255,255,255,.46), transparent 28rem),
    radial-gradient(circle at 92% 2%, rgba(0,113,227,.028), transparent 25rem),
    var(--surface);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color 220ms ease-out, color 220ms ease-out;
}
html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 15% -12%, rgba(72,81,93,.34), transparent 30rem),
    radial-gradient(circle at 88% 2%, rgba(10,132,255,.065), transparent 28rem),
    var(--surface);
}

a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
svg { display: block; }
::selection { background: rgba(0,113,227,.18); }
:where(a,button,input,textarea):focus-visible { outline: 3px solid rgba(0,113,227,.35); outline-offset: 3px; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.skip-link {
  position: fixed; z-index: 999; left: 20px; top: 16px;
  padding: 10px 14px; border: 0; border-radius: 14px;
  background: var(--surface); box-shadow: var(--raised-shadow-sm);
  transform: translateY(-180%); transition: transform 160ms ease-out;
}
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header {
  position: sticky; top: 14px; z-index: 80;
  width: min(1040px, calc(100% - 28px));
  margin: 14px auto 0;
}
.nav-shell {
  min-height: 60px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 8px 10px 8px 14px;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--raised-shadow-sm), var(--hairline);
  transition: box-shadow 180ms ease-out, transform 180ms ease-out, background 180ms ease-out;
}
.site-header.is-scrolled .nav-shell { box-shadow: var(--raised-shadow-sm), var(--hairline); }
.brand { display:inline-flex; align-items:center; gap:11px; min-width:max-content; border-radius:14px; }
.brand-mark {
  width: 30px; height: 30px; padding: 6px; border-radius: 10px; position:relative;
  background: var(--surface); box-shadow: var(--inset-shadow), var(--hairline);
}
.brand-mark::before {
  content:""; position:absolute; inset:7px; border-radius:5px;
  background:
    radial-gradient(circle at 25% 25%, var(--accent) 0 20%, transparent 22%),
    radial-gradient(circle at 75% 25%, rgba(0,113,227,.54) 0 20%, transparent 22%),
    radial-gradient(circle at 25% 75%, rgba(0,113,227,.54) 0 20%, transparent 22%),
    radial-gradient(circle at 75% 75%, var(--accent) 0 20%, transparent 22%);
}
.brand-title { font-size: 14px; font-weight: 720; letter-spacing: .07em; line-height:1; }
.nav-actions { display:flex; gap:8px; align-items:center; }
.icon-button, .search-submit, .password-row button, .admin-tools button, .admin-tools a {
  border:0; background:var(--surface); box-shadow:var(--raised-shadow-sm), var(--hairline);
  transition: transform 90ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out;
}
.icon-button { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--text-2); }
.icon-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.icon-button:hover { color:var(--accent); }
.icon-button:active, .search-submit:active, .password-row button:active, .admin-tools button:active, .admin-tools a:active { transform:scale(.96); box-shadow:var(--inset-shadow); }
.theme-icon-moon { display:none; }
html[data-theme="dark"] .theme-icon-sun { display:none; }
html[data-theme="dark"] .theme-icon-moon { display:block; }

.search-panel {
  position:absolute; right:0; top:74px; width:min(520px,100%);
  opacity:0; transform:translateY(-8px) scale(.985); transform-origin: top right; pointer-events:none;
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.search-panel[data-open="true"] { opacity:1; transform:none; pointer-events:auto; }
.search-panel-inner {
  padding:14px; border-radius:22px; background:var(--surface); box-shadow:var(--raised-shadow), var(--hairline);
}
.search-box { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; min-height:50px; padding:7px 8px 7px 15px; border-radius:16px; background:var(--surface); box-shadow:var(--inset-shadow); }
.search-box svg { width:18px; fill:none; stroke:var(--text-3); stroke-width:1.8; stroke-linecap:round; }
.search-box input { min-width:0; border:0; outline:0; background:transparent; font-size:14px; }
.search-submit { min-height:36px; padding:0 14px; border-radius:11px; color:#fff; background:var(--accent); box-shadow:0 6px 14px var(--accent-shadow), inset 0 1px 0 rgba(255,255,255,.25); font-size:12px; font-weight:700; }

/* Main */
.site-main { width:min(1040px, calc(100% - 28px)); margin:0 auto; padding:62px 0 30px; }
.home-hero {
  min-height:350px; display:grid; grid-template-columns:minmax(0,1fr) 128px; align-items:center; gap:40px;
  padding:52px clamp(30px,6vw,66px); border-radius:calc(var(--panel-radius) + 6px);
  background:var(--surface); box-shadow:var(--raised-shadow-sm), var(--hairline); position:relative; overflow:hidden;
}
.home-hero::before, .home-hero::after { content:""; position:absolute; border-radius:999px; pointer-events:none; }
.home-hero::before { display:none; }
.home-hero::after { display:none; }
.hero-copy { position:relative; z-index:1; max-width:690px; }
.hero-kicker, .eyebrow { margin:0 0 12px; color:var(--accent); font-size:11px; font-weight:760; letter-spacing:.13em; text-transform:uppercase; }
.hero-copy h1 { margin:0; font-family:var(--font-display); font-size:clamp(52px,7.7vw,82px); line-height:.96; letter-spacing:-.052em; font-weight:720; }
.hero-description { max-width:560px; margin:18px 0 0; color:var(--text-2); font-size:clamp(15px,1.8vw,17px); line-height:1.72; word-break:keep-all; }
.hero-profile {
  width:116px; aspect-ratio:1; justify-self:end; border-radius:50%; position:relative; display:grid; place-items:center;
  background:var(--surface); box-shadow:var(--raised-shadow-sm); isolation:isolate;
}
.hero-profile::before { content:""; position:absolute; inset:10px; border-radius:inherit; box-shadow:var(--inset-shadow); }
.hero-profile img { width:82px; height:82px; object-fit:cover; border-radius:50%; position:relative; z-index:2; }
.profile-fallback { position:absolute; z-index:1; font-size:18px; font-weight:720; color:var(--accent); letter-spacing:-.03em; }
.profile-glow { position:absolute; inset:24px; border-radius:50%; background:var(--accent-soft); filter:blur(14px); }

.ad-slot:empty { display:none; }
.ad-slot { margin:30px 0; }

.cover-area { margin-top:56px; }
.cover-block, .list-section, .tag-page, .guestbook-page { padding:0; }
.section-heading, .list-header { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:0 4px 22px; }
.section-heading h2, .list-header h1, .list-header h2 { margin:0; font-family:var(--font-display); font-size:clamp(27px,3.5vw,36px); line-height:1.08; letter-spacing:-.035em; font-weight:700; }
.list-header { display:grid; grid-template-columns:1fr auto; align-items:end; }
.list-header .eyebrow, .list-header p { grid-column:1; }
.list-header h1, .list-header h2 { grid-column:1; }
.list-header p { max-width:650px; margin:10px 0 0; color:var(--text-2); }
.list-count { grid-column:2; grid-row:1 / span 4; align-self:end; padding:9px 12px; border-radius:12px; color:var(--text-2); font-size:12px; font-weight:650; background:var(--surface); box-shadow:var(--inset-shadow); }
.text-link { color:var(--accent); font-size:13px; font-weight:700; }

.featured-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.featured-card, .post-card, .sidebar-card, .related-card, .neighbor-card, .protected-card, .article-page, .comment-section, .tag-page, .guestbook-page {
  background:var(--surface); box-shadow:var(--raised-shadow-sm), var(--hairline);
}
.featured-card { border-radius:var(--panel-radius); overflow:hidden; transition:transform 180ms ease-out, box-shadow 180ms ease-out; }
.featured-card:hover { transform:translateY(-3px); }
.featured-card:active { transform:translateY(0) scale(.992); box-shadow:var(--raised-shadow-sm); }
.featured-link { display:grid; grid-template-columns:142px minmax(0,1fr); min-height:178px; padding:16px; gap:18px; align-items:center; }
.featured-media, .post-card-media { position:relative; overflow:hidden; background:var(--surface); box-shadow:var(--inset-shadow); }
.featured-media { aspect-ratio:1; border-radius:18px; }
.featured-media img, .post-card-media img { width:100%; height:100%; object-fit:cover; position:relative; z-index:2; }
.media-placeholder { position:absolute; inset:0; z-index:1; display:grid; place-items:center; background:transparent; }
.media-placeholder::before { content:""; width:min(44%,52px); aspect-ratio:1; border-radius:15px; background:radial-gradient(circle at 30% 30%, var(--accent) 0 8%, transparent 9%), radial-gradient(circle at 70% 30%, rgba(0,113,227,.5) 0 8%, transparent 9%), radial-gradient(circle at 30% 70%, rgba(0,113,227,.5) 0 8%, transparent 9%), radial-gradient(circle at 70% 70%, var(--accent) 0 8%, transparent 9%), var(--surface); box-shadow:var(--raised-shadow-sm); opacity:.88; }
.card-category, .article-category { color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.05em; }
.featured-body h3 { margin:7px 0 8px; font-size:18px; line-height:1.34; letter-spacing:-.022em; }
.featured-body p { margin:0 0 12px; color:var(--text-2); font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.featured-body time { color:var(--text-3); font-size:11px; }

.layout-shell { margin-top:60px; display:block; }
.content-column { min-width:0; }
.post-grid { display:grid; gap:14px; }
.post-card { border-radius:var(--panel-radius); overflow:hidden; transition:transform 160ms ease-out, box-shadow 160ms ease-out; }
.post-card:hover { transform:translateY(-2px); }
.post-card:active { transform:scale(.995); box-shadow:var(--raised-shadow-sm); }
.post-card-link { display:grid; grid-template-columns:196px minmax(0,1fr); align-items:center; gap:26px; padding:18px 24px 18px 18px; }
.post-card-media { aspect-ratio:3/2; border-radius:20px; }
.post-card-body { min-width:0; }
.post-meta { display:flex; flex-wrap:wrap; gap:12px; align-items:center; color:var(--text-3); font-size:11px; }
.post-meta span { color:var(--accent); font-weight:720; }
.post-card h2, .post-card h3 { margin:7px 0; font-size:clamp(19px,2.3vw,24px); line-height:1.26; letter-spacing:-.027em; font-weight:680; }
/* Tistory title replacement includes the NEW image tag. Keep it attached to the title. */
.post-card h2 img, .post-card h3 img,
.featured-body h3 img, .related-title img {
  display:inline-block !important;
  width:auto !important;
  height:.58em !important;
  max-height:14px;
  margin:0 0 0 .32em !important;
  vertical-align:-.02em !important;
  border-radius:0;
  box-shadow:none;
}
.post-card p { margin:0; max-width:48ch; color:var(--text-2); font-size:13px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.comment-count { display:inline-block; margin-top:12px; color:var(--text-3); font-size:11px; }
.notice-card { margin-bottom:18px; }
.notice-card .post-card-link { display:block; padding:24px 28px; }
.empty-state { padding:52px 28px; border-radius:var(--panel-radius); text-align:center; box-shadow:var(--inset-shadow); }
.empty-state p { color:var(--text-2); }

/* Article */
.article-page { max-width:900px; margin:0 auto; padding:clamp(32px,6vw,72px); border-radius:calc(var(--panel-radius) + 8px); }
.article-header { max-width:740px; margin:0 auto 42px; text-align:left; }
.article-header h1 { margin:12px 0 18px; font-family:var(--font-display); font-size:clamp(38px,7vw,66px); line-height:1.04; letter-spacing:-.048em; word-break:keep-all; }
.article-meta { display:flex; gap:12px; color:var(--text-3); font-size:12px; }
.article-hero-image { margin:0 auto 46px; border-radius:28px; overflow:hidden; box-shadow:var(--inset-shadow); padding:10px; background:var(--surface); }
.article-hero-image img { width:100%; border-radius:20px; }
.article-body { max-width:740px; margin:0 auto; color:var(--text); font-size:17px; line-height:1.86; overflow-wrap:anywhere; }
.article-body > *:first-child { margin-top:0; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { font-family:var(--font-display); letter-spacing:-.03em; line-height:1.25; margin:2.2em 0 .75em; }
.article-body h2 { font-size:1.7em; }
.article-body h3 { font-size:1.35em; }
.article-body p { margin:1.1em 0; }
.article-body a { color:var(--accent); text-decoration:underline; text-decoration-color:rgba(0,113,227,.28); text-underline-offset:3px; }
.article-body blockquote { margin:2em 0; padding:18px 22px; border:0; border-radius:18px; color:var(--text-2); background:var(--surface); box-shadow:var(--inset-shadow); }
.article-body img { height:auto; margin:2em auto; border-radius:20px; box-shadow:var(--raised-shadow-sm); }
.article-body hr { height:1px; margin:3em 0; border:0; background:var(--line); }
.article-body code { font-family:var(--font-mono); font-size:.9em; }
.article-body :not(pre) > code { padding:.18em .42em; border-radius:7px; background:var(--surface); box-shadow:var(--inset-shadow); }
.article-body pre { position:relative; margin:2em 0; padding:22px; overflow:auto; border-radius:20px; background:var(--surface-3); color:var(--text); box-shadow:var(--inset-shadow); }
.copy-code-button { position:absolute; right:10px; top:10px; border:0; border-radius:10px; padding:7px 10px; background:var(--surface); color:var(--text-2); box-shadow:var(--raised-shadow-sm); font-size:11px; }
.article-body table { width:100%; border-collapse:separate; border-spacing:0; margin:2em 0; overflow:hidden; border-radius:16px; box-shadow:var(--inset-shadow); }
.article-body th, .article-body td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
.article-body th { font-size:12px; color:var(--text-2); }
.article-tags { max-width:740px; margin:48px auto 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.tag-label { color:var(--text-3); font-size:11px; font-weight:700; margin-right:4px; }
.article-tags a, .tag-chip { display:inline-flex; align-items:center; min-height:34px; padding:6px 11px; border-radius:11px; color:var(--text-2); background:var(--surface); box-shadow:var(--raised-shadow-sm); font-size:12px; }
.article-tags a:active, .tag-chip:active { box-shadow:var(--inset-shadow); }
.admin-tools { max-width:740px; margin:30px auto 0; display:flex; gap:8px; }
.admin-tools button, .admin-tools a { padding:8px 12px; border-radius:10px; font-size:12px; }
.related-posts { max-width:740px; margin:64px auto 0; }
.section-heading.compact { margin-bottom:20px; }
.section-heading.compact h2 { font-size:25px; }
.related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.related-card { min-height:118px; display:grid; grid-template-columns:82px 1fr; gap:14px; align-items:center; padding:12px; border-radius:18px; }
.related-card img { width:82px; height:82px; object-fit:contain; object-position:center; box-sizing:border-box; padding:4px; border-radius:13px; background:var(--surface-3); box-shadow:var(--inset-shadow); }
.related-title { font-size:13px; font-weight:700; line-height:1.45; }
.related-card time { grid-column:2; color:var(--text-3); font-size:10px; }
.article-neighbors { max-width:740px; margin:28px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.neighbor-card { padding:18px 20px; border-radius:18px; }
.neighbor-card strong { font-size:13px; line-height:1.42; }
.neighbor-card.align-right { text-align:right; }
.comment-section { max-width:740px; margin:46px auto 0; padding:22px; border-radius:22px; }

/* Utility area */
.sidebar { margin-top:54px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sidebar-card { min-width:0; padding:22px; border-radius:22px; }
.sidebar-card h2 { margin:0 0 15px; font-size:14px; letter-spacing:-.015em; }
.sidebar-card p { margin:0; color:var(--text-2); font-size:13px; line-height:1.6; }
.profile-card { grid-column:span 1; }
.sidebar-avatar { width:64px; height:64px; margin-bottom:18px; display:grid; place-items:center; position:relative; overflow:hidden; border-radius:50%; box-shadow:var(--inset-shadow); color:var(--text-3); font-size:12px; font-weight:700; }
.sidebar-avatar img { width:100%; height:100%; object-fit:cover; }
.sidebar-avatar span { position:absolute; }
.category-list, .category-list ul { list-style:none; margin:0; padding:0; }
.category-list ul ul { padding-left:12px; }
.category-list a { display:flex; justify-content:space-between; gap:8px; padding:8px 0; color:var(--text-2); font-size:12px; border-bottom:1px solid var(--line); }
.sidebar-post-list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sidebar-post-list a { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; color:var(--text-2); font-size:12px; }
.sidebar-post-list span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.sidebar-post-list time { color:var(--text-3); }
.counter-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.counter-grid > div { padding:16px 12px; border-radius:16px; text-align:center; box-shadow:var(--inset-shadow); }
.counter-grid strong { display:block; font-size:20px; letter-spacing:-.03em; }
.counter-grid span { color:var(--text-3); font-size:10px; }

/* Misc pages */
.tag-page, .guestbook-page { padding:36px; border-radius:calc(var(--panel-radius) + 6px); }
.tag-cloud { display:flex; flex-wrap:wrap; gap:10px; }
.protected-card { max-width:620px; margin:30px auto; padding:50px; border-radius:var(--panel-radius); text-align:center; }
.lock-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 20px; border-radius:50%; color:var(--accent); box-shadow:var(--inset-shadow); }
.protected-card h1 { margin:10px 0; font-size:34px; letter-spacing:-.035em; }
.protected-card p { color:var(--text-2); }
.password-row { display:grid; grid-template-columns:1fr auto; gap:10px; margin-top:24px; }
.password-row input { min-width:0; border:0; outline:0; padding:13px 15px; border-radius:13px; background:var(--surface); box-shadow:var(--inset-shadow); }
.password-row button { padding:0 16px; border-radius:13px; color:#fff; background:var(--accent); box-shadow:0 6px 14px var(--accent-shadow); font-weight:700; }
.pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin:54px 0 0; }
.page-numbers { display:flex; gap:8px; }
.page-number, .page-arrow { min-width:38px; height:38px; display:grid; place-items:center; border-radius:12px; color:var(--text-2); background:var(--surface); box-shadow:var(--raised-shadow-sm); font-size:12px; }
.page-number:active, .page-arrow:active { box-shadow:var(--inset-shadow); transform:scale(.96); }
.no-more-prev, .no-more-next { opacity:.36; pointer-events:none; }

.site-footer { width:min(1040px, calc(100% - 28px)); margin:40px auto 24px; }
.footer-inner { display:flex; align-items:center; justify-content:flex-start; gap:24px; padding:28px 30px; border-radius:24px; box-shadow:var(--inset-shadow); }
.footer-inner strong { font-size:12px; letter-spacing:.12em; }
.footer-inner p { margin:4px 0 0; color:var(--text-3); font-size:11px; }
.footer-links { display:none; }

/* Tistory comment shell safety */
.comment-section input, .comment-section textarea { max-width:100%; border:0!important; background:var(--surface)!important; color:var(--text)!important; border-radius:14px!important; box-shadow:var(--inset-shadow)!important; }
.comment-section button { border-radius:12px!important; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns:1fr 104px; gap:26px; min-height:320px; }
  .hero-profile { width:96px; }
  .hero-profile img { width:68px; height:68px; }
  .featured-link { grid-template-columns:122px minmax(0,1fr); }
  .sidebar { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 700px) {
  body { font-size:15px; }
  .site-header { top:8px; width:calc(100% - 20px); margin-top:8px; }
  .nav-shell { min-height:58px; padding:8px 9px 8px 12px; border-radius:18px; }
  .brand-title { font-size:13px; }
  .brand-mark { width:28px; height:28px; }
  .icon-button { width:38px; height:38px; }
  .site-main { width:calc(100% - 20px); padding-top:36px; }
  .home-hero { min-height:0; grid-template-columns:1fr; gap:0; padding:34px 26px; border-radius:28px; }
  .hero-copy h1 { font-size:clamp(44px,15vw,60px); }
  .hero-description { margin-top:14px; }
  .hero-profile { display:none; }
  .hero-profile img { width:60px; height:60px; }
  .cover-area, .layout-shell { margin-top:46px; }
  .section-heading { align-items:end; }
  .section-heading h2, .list-header h1, .list-header h2 { font-size:28px; }
  .featured-grid { grid-template-columns:1fr; }
  .featured-link { grid-template-columns:104px minmax(0,1fr); min-height:154px; gap:15px; padding:14px; }
  .featured-media { border-radius:18px; }
  .list-header { grid-template-columns:1fr; }
  .list-count { grid-column:1; grid-row:auto; justify-self:start; margin-top:10px; }
  .post-card-link { grid-template-columns:124px minmax(0,1fr); gap:18px; padding:14px; }
  .post-card-media { border-radius:16px; }
  .post-card h2, .post-card h3 { font-size:19px; }
  .post-card p { -webkit-line-clamp:1; font-size:13px; }
  .article-page { padding:34px 22px; border-radius:28px; }
  .article-header h1 { font-size:clamp(36px,12vw,52px); }
  .article-body { font-size:16px; line-height:1.82; }
  .related-grid, .article-neighbors { grid-template-columns:1fr; }
  .neighbor-card.align-right { text-align:left; }
  .sidebar { grid-template-columns:1fr; }
  .tag-page, .guestbook-page { padding:26px 20px; }
  .footer-inner { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 440px) {
  .brand-title { max-width:110px; overflow:hidden; text-overflow:ellipsis; }
  .nav-actions { gap:5px; }
  .featured-link { grid-template-columns:84px minmax(0,1fr); }
  .featured-body p { display:none; }
  .post-card-link { grid-template-columns:96px minmax(0,1fr); }
  .post-card p { display:none; }
  .post-meta { gap:7px; }
  .comment-count { margin-top:7px; }
  .protected-card { padding:34px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .featured-card:hover, .post-card:hover { transform:none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav-shell { -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface); }
}

@media (prefers-contrast: more) {
  :root { --line:rgba(35,43,52,.28); }
  html[data-theme="dark"] { --line:rgba(255,255,255,.22); }
  .nav-shell, .featured-card, .post-card, .article-page, .sidebar-card { outline:1px solid var(--line); }
}

/* Refinement pass 2: reading pages */
.article-page { max-width:920px; padding:clamp(34px,5vw,64px); }
.article-header { max-width:760px; margin-bottom:36px; }
.article-header h1 {
  margin:11px 0 17px;
  font-size:clamp(36px,5.1vw,56px);
  line-height:1.09;
  letter-spacing:-.044em;
  font-weight:700;
}
.article-hero-image { max-width:760px; margin-bottom:38px; padding:8px; border-radius:24px; }
.article-hero-image img { border-radius:17px; }
.article-body { max-width:760px; font-size:17px; line-height:1.84; }
.article-body blockquote {
  padding:16px 18px;
  border-left:3px solid var(--accent);
  border-radius:0 14px 14px 0;
  background:color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  box-shadow:none;
}
.article-tags, .admin-tools, .related-posts, .article-neighbors, .comment-section { max-width:760px; }
.related-title { font-size:14px; }
.related-card:not(:has(img)) { grid-template-columns:minmax(0,1fr) auto; min-height:96px; padding:16px 18px; }
.related-card:not(:has(img)) .related-title { grid-column:1; }
.related-card:not(:has(img)) time { grid-column:2; align-self:center; }

@media (max-width:700px) {
  .article-page { padding:30px 20px; }
  .article-header { margin-bottom:30px; }
  .article-header h1 { font-size:clamp(34px,10.5vw,46px); line-height:1.12; }
  .article-hero-image { margin-bottom:30px; padding:6px; border-radius:20px; }
  .article-body { font-size:16px; line-height:1.8; }
  .sidebar-card { padding:20px; }
  .sidebar-avatar { width:54px; height:54px; margin-bottom:14px; }
}


/* Header refinement v8: compact Apple-like bar */
.site-header {
  top:8px;
  width:min(1120px, calc(100% - 18px));
  margin-top:8px;
}
.nav-shell {
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 7px 6px 12px;
  gap:18px;
  border-radius:17px;
}
.brand {
  min-width:0;
  flex:0 0 auto;
  gap:9px;
}
.brand-mark {
  width:27px;
  height:27px;
  padding:5px;
  border-radius:9px;
}
.brand-title {
  font-size:12px;
  font-weight:740;
  letter-spacing:.085em;
}
.nav-actions {
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:auto;
  flex:0 0 auto;
}
.icon-button {
  width:34px;
  height:34px;
  border-radius:11px;
}
.icon-button svg {
  width:16px;
  height:16px;
}
.search-panel {
  left:auto;
  right:0;
  top:58px;
  transform-origin:top right;
}
@media (max-width:700px) {
  .site-header { width:calc(100% - 14px); margin-top:7px; top:7px; }
  .nav-shell { min-height:48px; padding:6px 6px 6px 10px; gap:12px; border-radius:16px; }
  .brand-mark { width:26px; height:26px; }
  .brand-title { font-size:11.5px; }
  .nav-actions { gap:4px; }
  .icon-button { width:33px; height:33px; }
  .search-panel { width:min(420px, calc(100vw - 14px)); top:56px; }
}

/* Tistory/highlight.js code-block theme override
   Prevent the editor's syntax-highlighting theme from painting a white box
   inside the neumorphic <pre> container. */
.article-body pre,
.article-body pre[data-ke-type="codeblock"] {
  background: var(--surface-3) !important;
  color: var(--text) !important;
}

.article-body pre > code,
.article-body pre code.hljs,
.article-body pre > code.hljs,
.article-body .hljs {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.article-body pre > code,
.article-body pre code.hljs,
.article-body pre > code.hljs {
  display: block;
  padding: 0 !important;
  margin: 0 !important;
}

/* Dark-mode code text contrast fix
   Tistory/highlight.js light themes can leave dark token colors on a dark <pre>.
   Force code contents to use the skin's high-contrast text color in dark mode. */
html[data-theme="dark"] .article-body pre,
html[data-theme="dark"] .article-body pre[data-ke-type="codeblock"],
html[data-theme="dark"] .article-body pre > code,
html[data-theme="dark"] .article-body pre code.hljs,
html[data-theme="dark"] .article-body pre > code.hljs,
html[data-theme="dark"] .article-body pre code *,
html[data-theme="dark"] .article-body pre .hljs * {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] .article-body pre > code,
html[data-theme="dark"] .article-body pre code.hljs,
html[data-theme="dark"] .article-body pre > code.hljs {
  text-shadow: none !important;
}

html[data-theme="dark"] .article-body pre .copy-code-button {
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important;
}

/* Reading continuation v10.1 -----------------------------------------------
   Compact 16:9 thumbnails, balanced text, and true inline direction labels.
   `contain` keeps the original thumbnail visible without cropping. */
.article-neighbors {
  margin-top: 52px;
  gap: 12px;
}
.article-neighbors[hidden] { display: none !important; }
.neighbor-card {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 124px minmax(0,1fr);
  align-items: center;
  gap: 15px;
  padding: 14px;
  overflow: hidden;
  border-radius: 22px;
  transition: transform 170ms ease-out, box-shadow 170ms ease-out;
}
.neighbor-card:hover { transform: translateY(-2px); }
.neighbor-card:active { transform: translateY(0) scale(.992); box-shadow: var(--inset-shadow); }
.neighbor-card:only-child { grid-column: 1 / -1; }
.neighbor-card:not(:has(.neighbor-thumb)) {
  grid-template-columns: minmax(0,1fr);
  min-height: 108px;
  padding: 18px 20px;
}
.neighbor-next { grid-template-columns: minmax(0,1fr) 124px; }
.neighbor-thumb {
  width: 124px;
  aspect-ratio: 16 / 9;
  height: auto;
  display: block;
  overflow: hidden;
  margin: 0;
  border-radius: 15px;
  background: var(--surface-3);
  box-shadow: var(--inset-shadow);
}
.neighbor-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  box-sizing: border-box;
  padding: 4px;
}
.neighbor-copy {
  min-width: 0;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.neighbor-next .neighbor-copy { text-align: right; }
.neighbor-card .neighbor-label {
  display: flex !important;
  align-items: center;
  gap: 7px;
  width: max-content;
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: .035em;
}
.neighbor-next .neighbor-label {
  align-self: flex-end;
  justify-content: flex-end;
}
.neighbor-card .neighbor-label > span {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-grid !important;
  place-items: center;
  margin: 0 !important;
  border-radius: 999px;
  color: var(--accent) !important;
  background: var(--surface);
  box-shadow: var(--inset-shadow);
  font-size: 11px !important;
  line-height: 1 !important;
}
.neighbor-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 690;
  line-height: 1.42;
  letter-spacing: -.018em;
  word-break: keep-all;
}
.neighbor-card time {
  display: block;
  margin-top: 7px;
  color: var(--text-3);
  font-size: 10px;
  line-height: 1.3;
}

.related-posts { margin-top: 42px; }
.related-posts .section-heading.compact {
  align-items: end;
  margin-left: 0;
  margin-right: 0;
}
.related-posts .section-heading.compact h2 {
  margin: 4px 0 0;
  font-size: clamp(21px, 3vw, 26px);
  letter-spacing: -.03em;
}
.related-posts .text-link { flex: 0 0 auto; }
.related-card {
  transition: transform 170ms ease-out, box-shadow 170ms ease-out;
}
.related-card:hover { transform: translateY(-2px); }
.related-card:active { transform: translateY(0) scale(.992); box-shadow: var(--inset-shadow); }
.related-card .related-title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Fallback: the category list that Tistory currently injects into the article. */
.related-fallback-slot {
  max-width: 760px;
  margin: 42px auto 0;
}
.related-fallback-slot:empty { display: none; }
.related-fallback-slot .another_category,
.article-body .another_category.slowgrid-another-category {
  width: 100% !important;
  margin: 0 !important;
  padding: 22px !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--surface) !important;
  box-shadow: var(--raised-shadow-sm), var(--hairline) !important;
  color: var(--text) !important;
}
.related-fallback-slot .another_category h4 {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  line-height: 1.35 !important;
  letter-spacing: -.025em !important;
}
.related-fallback-slot .another_category h4::before {
  content: "KEEP READING";
  display: block;
  margin-bottom: 5px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .08em;
}
.related-fallback-slot .another_category h4 a {
  color: inherit !important;
  text-decoration: none !important;
}
.related-fallback-slot .another_category table,
.related-fallback-slot .another_category tbody {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  box-shadow: none !important;
  background: transparent !important;
}
.related-fallback-slot .another_category tbody {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.related-fallback-slot .another_category tr {
  display: block !important;
  min-width: 0;
  padding: 14px 16px !important;
  border: 0 !important;
  border-radius: 15px;
  background: var(--surface) !important;
  box-shadow: var(--inset-shadow);
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}
.related-fallback-slot .another_category tr:hover { transform: translateY(-1px); }
.related-fallback-slot .another_category th,
.related-fallback-slot .another_category td {
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  text-align: left !important;
}
.related-fallback-slot .another_category th { color: var(--text) !important; font-weight: 690 !important; }
.related-fallback-slot .another_category th a {
  display: -webkit-box !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text) !important;
  font-size: 13px !important;
  line-height: 1.48 !important;
  text-decoration: none !important;
}
.related-fallback-slot .another_category th a.current { color: var(--accent) !important; }
.related-fallback-slot .another_category th a + span { display: none !important; }
.related-fallback-slot .another_category td {
  margin-top: 6px !important;
  color: var(--text-3) !important;
  font-size: 10px !important;
  line-height: 1.4 !important;
}
.related-fallback-slot .another_category tr:last-child th,
.related-fallback-slot .another_category tr:last-child td { border-bottom: 0 !important; }

@media (max-width:700px) {
  .article-neighbors { margin-top: 44px; gap: 10px; }
  .neighbor-card,
  .neighbor-next { grid-template-columns: 104px minmax(0,1fr); min-height: 96px; padding: 10px; gap: 12px; border-radius: 19px; }
  .neighbor-next .neighbor-thumb { grid-column: 1; grid-row: 1; }
  .neighbor-next .neighbor-copy { grid-column: 2; grid-row: 1; text-align: left; }
  .neighbor-next .neighbor-label { align-self: flex-start; justify-content: flex-start; }
  .neighbor-thumb { width: 104px; aspect-ratio: 16 / 9; height: auto; border-radius: 12px; }
  .neighbor-thumb img { padding: 3px; }
  .neighbor-card .neighbor-label { margin-bottom: 5px; }
  .neighbor-card strong { font-size: 13px; line-height: 1.4; }
  .neighbor-card time { margin-top: 5px; }
  .neighbor-card:not(:has(.neighbor-thumb)) { grid-template-columns: minmax(0,1fr); min-height: 92px; padding: 15px 17px; }
  .related-posts { margin-top: 36px; }
  .related-posts .section-heading.compact { align-items: start; gap: 10px; }
  .related-posts .text-link { margin-top: 3px; }
  .related-fallback-slot { margin-top: 36px; }
  .related-fallback-slot .another_category { padding: 18px !important; border-radius: 19px !important; }
  .related-fallback-slot .another_category h4 { font-size: 18px !important; margin-bottom: 14px !important; }
  .related-fallback-slot .another_category tbody { grid-template-columns: 1fr; gap: 8px; }
  .related-fallback-slot .another_category tr { padding: 13px 14px !important; }
}



/* Whole-blog recommendation cards v10 ------------------------------------- */
.recommend-meta { display: none !important; }
.recommended-posts {
  max-width: 760px;
  margin: 46px auto 0;
}
.recommended-posts[hidden] { display: none !important; }
.recommended-posts .section-heading.compact {
  align-items: end;
  margin: 0 0 18px;
}
.recommended-posts .section-heading.compact h2 {
  margin: 4px 0 0;
  font-size: clamp(22px, 3vw, 27px);
  letter-spacing: -.032em;
}
.recommended-posts .section-heading.compact p {
  margin: 8px 0 0;
  color: var(--text-3);
  font-size: 12px;
  line-height: 1.55;
}
.recommended-posts .text-link { flex: 0 0 auto; }
.recommended-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
.recommended-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 21px;
  background: var(--surface);
  box-shadow: var(--raised-shadow-sm), var(--hairline);
  transition: transform 170ms ease-out, box-shadow 170ms ease-out;
}
.recommended-card:hover { transform: translateY(-2px); }
.recommended-card:active { transform: translateY(0) scale(.992); box-shadow: var(--inset-shadow); }
.recommended-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-3);
  box-shadow: var(--inset-shadow);
}
.recommended-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8px;
  box-sizing: border-box;
}
.recommended-placeholder {
  width: 58px;
  aspect-ratio: 1;
  border-radius: 18px;
  background: radial-gradient(circle at 30% 30%, var(--accent) 0 8%, transparent 9%),
              radial-gradient(circle at 70% 30%, rgba(0,113,227,.45) 0 8%, transparent 9%),
              radial-gradient(circle at 30% 70%, rgba(0,113,227,.45) 0 8%, transparent 9%),
              radial-gradient(circle at 70% 70%, var(--accent) 0 8%, transparent 9%),
              var(--surface);
  box-shadow: var(--raised-shadow-sm);
  opacity: .82;
}
.recommended-body {
  display: block;
  min-width: 0;
  padding: 15px 17px 17px;
}
.recommended-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--text-3);
  font-size: 10px;
}
.recommended-category {
  min-width: 0;
  overflow: hidden;
  color: var(--accent);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recommended-meta time { flex: 0 0 auto; }
.recommended-card strong {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.9em;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -.016em;
}

@media (max-width:700px) {
  .recommended-posts { margin-top: 38px; }
  .recommended-posts .section-heading.compact { align-items: start; gap: 10px; }
  .recommended-posts .section-heading.compact p { display: none; }
  .recommended-grid { grid-template-columns: 1fr; gap: 10px; }
  .recommended-card {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    align-items: stretch;
    border-radius: 18px;
  }
  .recommended-media { aspect-ratio: auto; min-height: 102px; }
  .recommended-media img { padding: 6px; }
  .recommended-body { display: flex; flex-direction: column; justify-content: center; padding: 13px 14px; }
  .recommended-meta { justify-content: flex-start; margin-bottom: 6px; }
  .recommended-meta time { display: none; }
  .recommended-card strong { min-height: 0; font-size: 13px; }
}

/* ========================================================================
   SLOWGRID v11 · Context navigation
   Archive → categories / Article → contents / Small screens → disclosures.
   Existing post, code, comment, and reading-continuation styles stay intact.
   ======================================================================== */
:root { --page-width:1240px; --rail-width:232px; --rail-gap:44px; --rail-top:88px; }
[hidden] { display:none !important; }
.site-header, .site-main, .site-footer { width:min(var(--page-width), calc(100% - 56px)); }
.site-header { margin-top:14px; top:12px; }
.nav-shell { min-height:56px; padding:7px 9px 7px 16px; }
.site-main { padding-top:48px; }
.home-hero { min-height:240px; padding:42px 48px; }
.hero-copy h1 { font-size:clamp(52px,6vw,72px); }
.layout-shell { margin-top:48px; }
.list-header { column-gap:24px; row-gap:8px; }
.list-header .eyebrow { margin-bottom:0; }
.list-header .list-count { grid-row:1 / span 2; }
.content-column { min-width:0; width:100%; }
.content-column > .cover-area { margin-top:0; margin-bottom:42px; }
.cover-block + .cover-block { margin-top:36px; }
body:not(#tt-body-index) .home-hero, body.is-reading .home-hero { display:none; }
body:not(#tt-body-index) .layout-shell, body.is-reading .layout-shell { margin-top:0; }
body:not(#tt-body-index) .site-main { padding-top:40px; }
.article-page { width:100%; }
.article-header h1 { line-height:1.2; overflow-wrap:anywhere; }
.article-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:18px; color:var(--text-2); font-size:12px; line-height:1.6; }
.article-breadcrumb a { overflow-wrap:anywhere; }
.article-breadcrumb a:hover { color:var(--accent); }
.article-breadcrumb .article-category { font-size:12px; letter-spacing:0; }
.breadcrumb-separator { color:var(--text-3); }
.sg-toc-heading { scroll-margin-top:calc(var(--rail-top) + 20px); }
.sg-toc-heading:focus { outline:none; }
.sg-toc-heading:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:3px; }

/* Quiet, text-first context rail: no stacked neumorphic cards. */
.context-sidebar { display:none; min-width:0; }
.context-heading .eyebrow { display:block; margin:0 0 10px; color:var(--text-2); font-size:10px; letter-spacing:.15em; }
.context-heading h2 { margin:0; font-size:16px; letter-spacing:-.02em; font-weight:720; }
.context-heading p { margin:7px 0 22px; color:var(--text-2); font-size:12px; line-height:1.7; }
.category-rail, .toc-rail { padding-left:22px; border-left:1px solid var(--line); }
.rail-footer-link { display:inline-flex; align-items:center; gap:7px; margin-top:20px; padding:9px 0; font-size:12px; color:var(--text-2); }
.rail-footer-link:hover { color:var(--accent); }
.category-rail > nav { max-height:calc(100vh - 265px); max-height:calc(100dvh - 265px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:3px 4px 3px 0; }

/* Tistory's server-generated tree, shared by desktop rail and header menu. */
.context-categories, .context-categories ul { list-style:none; margin:0; padding:0; }
.context-categories li { position:relative; margin:0; }
.context-categories a { display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 11px; margin:2px 0; border:0; border-radius:9px; color:var(--text-2); font-size:13px; line-height:1.55; transition:background 120ms ease,color 120ms ease; }
.context-categories .sg-category-label { flex:1; min-width:0; overflow-wrap:anywhere; }
.context-categories a .c_cnt { flex:0 0 auto; margin-left:auto; color:var(--text-3); font-size:11px; font-variant-numeric:tabular-nums; }
.context-categories a:hover { color:var(--text); background:var(--surface-2); }
.context-categories a.is-current { color:var(--accent); background:var(--accent-soft); font-weight:720; }
.context-categories a.is-current .c_cnt { color:var(--accent); }
.context-categories .link_tit { margin-bottom:12px; font-weight:650; }
.context-categories .category_list { padding-top:10px; border-top:1px solid var(--line); }
.context-categories .sub_category_list { margin:4px 0 10px 13px; padding-left:9px; border-left:1px solid var(--line); }
.context-categories .sub_category_list a { min-height:38px; padding:8px 10px; font-size:12px; }
.context-categories .has-category-children > a { padding-right:39px; }
.context-categories .is-ancestor > a { color:var(--text); font-weight:650; }
.category-branch-toggle { position:absolute; top:5px; right:1px; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--text-2); }
.category-branch-toggle:hover { color:var(--accent); background:var(--accent-soft); }
.category-branch-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform 140ms ease; transform:rotate(-90deg); }
.category-branch-toggle[aria-expanded="true"] svg { transform:none; }

/* Global category disclosure remains available on article pages, too. */
.category-menu { position:static; }
.category-menu > summary { display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:0 12px; border-radius:11px; color:var(--text-2); font-size:12px; font-weight:650; cursor:pointer; list-style:none; user-select:none; }
.category-menu > summary::-webkit-details-marker, .mobile-toc > summary::-webkit-details-marker { display:none; }
.category-menu > summary::marker, .mobile-toc > summary::marker { content:""; }
.category-menu > summary svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.category-menu > summary:hover, .category-menu[open] > summary { color:var(--accent); background:var(--accent-soft); }
.category-menu > summary:focus-visible, .mobile-toc > summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.category-menu-panel { position:absolute; z-index:5; top:calc(100% + 12px); right:0; width:min(328px, calc(100vw - 32px)); padding:24px 20px 16px; max-height:calc(100vh - 115px); max-height:calc(100dvh - 115px); overflow-y:auto; overscroll-behavior:contain; border:1px solid var(--line); border-radius:22px; background:var(--surface); box-shadow:var(--raised-shadow); scrollbar-width:thin; }
.category-menu-panel .context-heading p { margin-bottom:17px; }
.category-menu-panel .rail-footer-link { margin-top:10px; padding-left:11px; }

/* TOC stays within the viewport; lengthy headings wrap instead of being cut. */
.toc-rail .context-heading p { margin-bottom:20px; }
.toc-scroll { max-height:calc(100vh - 320px); max-height:calc(100dvh - 320px); min-height:100px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:2px 5px 3px 0; }
.toc-list, .toc-sublist { list-style:none; padding:0; margin:0; }
.toc-list > li + li { margin-top:5px; }
.toc-sublist { padding-left:13px; margin:2px 0 7px; }
.toc-link { position:relative; display:block; padding:9px 10px 9px 12px; border-radius:0 8px 8px 0; color:var(--text-2); font-size:12px; line-height:1.65; overflow-wrap:anywhere; border-left:2px solid transparent; transition:color 120ms ease,background 120ms ease; }
.toc-link:hover { color:var(--text); background:var(--surface-2); }
.toc-link.is-active { color:var(--accent); border-left-color:var(--accent); background:var(--accent-soft); font-weight:650; }
.toc-sublist .toc-link { font-size:11.5px; padding-top:7px; padding-bottom:7px; }
.reading-status { margin-top:24px; padding-top:19px; border-top:1px solid var(--line); }
.reading-status-label { display:flex; justify-content:space-between; gap:10px; margin-bottom:10px; color:var(--text-2); font-size:11px; }
.reading-status-label span:last-child { font-variant-numeric:tabular-nums; }
.reading-progress { height:3px; overflow:hidden; border-radius:3px; background:var(--line); }
.reading-progress::before { content:""; display:block; width:var(--reading-progress, 0%); height:100%; border-radius:inherit; background:var(--accent); }
.mobile-toc { display:none; }
.sidebar { margin-top:56px; }

@media (min-width:1100px) {
  .layout-shell.has-context-rail { display:grid; grid-template-columns:minmax(0,1fr) var(--rail-width); gap:var(--rail-gap); align-items:start; }
  .has-context-rail .context-sidebar { display:block; position:sticky; top:var(--rail-top); align-self:start; padding-top:7px; }
  .has-context-rail .article-page { max-width:none; padding:46px clamp(32px,3.5vw,52px); }
  .has-context-rail .article-header h1 { font-size:clamp(34px,3.2vw,46px); }
  .has-context-rail .featured-link { grid-template-columns:106px minmax(0,1fr); gap:16px; }
  .has-context-rail .post-card-link { grid-template-columns:166px minmax(0,1fr); gap:24px; }
  .has-context-rail .post-card h3 { font-size:22px; line-height:1.4; }
  .has-context-rail .post-card-body { padding:4px 0; }
}
@media (max-width:1099px) {
  .site-header, .site-main, .site-footer { width:min(940px, calc(100% - 40px)); }
  .mobile-toc { display:block; margin:0 auto 30px; max-width:760px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
  .mobile-toc > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; list-style:none; padding:15px 17px; min-height:52px; font-size:13px; cursor:pointer; color:var(--text); }
  .mobile-toc-label, .mobile-toc-meta { display:inline-flex; align-items:center; gap:9px; }
  .mobile-toc-label { font-weight:650; }
  .mobile-toc-meta { color:var(--text-2); font-size:11px; white-space:nowrap; }
  .mobile-toc svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .mobile-toc[open] .mobile-toc-meta svg { transform:rotate(180deg); }
  .mobile-toc-content { padding:0 13px 15px; max-height:52vh; overflow-y:auto; overscroll-behavior:contain; }
  .mobile-toc-content .toc-link { min-height:42px; font-size:13px; }
  .mobile-toc-content .toc-sublist .toc-link { font-size:12px; }
  .article-page { padding:40px clamp(24px,5vw,56px); }
  .article-header h1 { font-size:clamp(30px,4.6vw,44px); }
}
@media (max-width:700px) {
  :root { --rail-top:80px; }
  .site-header { width:calc(100% - 24px); top:8px; margin-top:8px; }
  .site-main, .site-footer { width:calc(100% - 28px); }
  .nav-shell { min-height:54px; gap:8px; padding:6px 7px 6px 11px; }
  .nav-actions { gap:4px; }
  .icon-button { width:36px; height:36px; }
  .category-menu > summary { min-height:36px; padding:0 9px; font-size:11px; gap:5px; }
  .site-main, body:not(#tt-body-index) .site-main { padding-top:28px; }
  .home-hero { padding:32px 25px; min-height:192px; }
  .hero-copy h1 { font-size:54px; }
  .hero-kicker { font-size:9px; letter-spacing:.12em; }
  .layout-shell { margin-top:34px; }
  .list-header { margin-bottom:18px; gap:13px; }
  .list-count { grid-column:2; grid-row:1 / span 2; margin-top:0; }
  .list-header h2 { font-size:29px; }
  .article-page { padding:28px 22px; border-radius:24px; }
  .article-header { margin-bottom:24px; }
  .article-header h1 { font-size:clamp(26px,6.8vw,36px); line-height:1.32; letter-spacing:-.035em; word-break:keep-all; }
  .article-breadcrumb { font-size:11px; gap:7px; margin-bottom:15px; }
  .article-breadcrumb .article-category { font-size:11px; }
  .article-meta { flex-wrap:wrap; font-size:11px; gap:8px 12px; }
  .article-body { font-size:16px; line-height:1.85; }
  .article-body h2 { font-size:1.5em; }
  .mobile-toc { margin-bottom:27px; }
  .mobile-toc > summary { padding:13px 14px; }
  .category-menu-panel { width:min(328px, calc(100vw - 24px)); padding:22px 17px 14px; }
  .search-panel { top:calc(100% + 12px); width:min(420px, calc(100vw - 24px)); }
  .sidebar { margin-top:38px; }
}
@media (max-width:380px) {
  .category-menu > summary { width:36px; padding:0; }
  .category-menu > summary .category-menu-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .brand { gap:7px; }
  .brand-title { font-size:11px; }
  .article-page { padding:25px 18px; }
  .post-card-link { grid-template-columns:78px minmax(0,1fr); gap:13px; }
  .post-card h3 { font-size:17px; }
}
@media (prefers-reduced-motion:reduce) {
  .toc-link, .category-branch-toggle svg, .context-categories a { transition:none; }
}
@media (prefers-contrast:more) {
  .category-rail, .toc-rail, .mobile-toc { border-color:var(--text-2); }
  .context-categories a.is-current, .toc-link.is-active { outline:1px solid var(--accent); }
}

html[data-theme="dark"] .context-categories a.is-current,
html[data-theme="dark"] .context-categories a.is-current .c_cnt,
html[data-theme="dark"] .toc-link.is-active,
html[data-theme="dark"] .category-menu[open] > summary,
html[data-theme="dark"] .article-breadcrumb .article-category {
  color:color-mix(in srgb, var(--accent) 60%, white 40%);
}
@media (min-width:1100px) and (max-height:560px) {
  .toc-rail .context-heading p { margin-bottom:12px; }
  .toc-scroll { max-height:calc(100vh - 240px); max-height:calc(100dvh - 240px); min-height:48px; }
  .reading-status { display:none; }
  .toc-rail > .rail-footer-link { margin-top:8px; }
}

/* ========================================================================
   SLOWGRID v11.0.1 · Whole-page dark-mode fix
   Append this block to the END of v11 style.css.

   Article surfaces previously changed immediately, while body backgrounds,
   inherited text, navigation backgrounds and shadows kept animating from
   their light values. Paint the theme palette together, in both directions.
   Transform/opacity motion (cards, search and category arrows) is preserved.
   ======================================================================== */

/* Match native controls and scrollbars to the skin's selected theme. */
:root {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

html {
  background-color: var(--surface);
  color: var(--text);
}
body.slowgrid {
  background-color: var(--surface);
  color: var(--text);
  /* Do not interpolate inherited text or the canvas independently. */
  transition: none;
}

/* The right column is part of the page canvas, not a light-only panel. */
.slowgrid .context-sidebar,
.slowgrid .category-rail,
.slowgrid .toc-rail {
  background: transparent;
  color: var(--text);
}
.slowgrid .nav-shell,
.slowgrid .category-menu-panel,
.slowgrid .mobile-toc {
  background: var(--surface);
  color: var(--text);
}

/* Preserve movement, but switch palette-dependent shadows and colors at
   once. This also avoids a lingering white neumorphic halo after toggling. */
.slowgrid .nav-shell,
.slowgrid .icon-button,
.slowgrid .search-submit,
.slowgrid .password-row button,
.slowgrid .admin-tools button,
.slowgrid .admin-tools a,
.slowgrid .featured-card,
.slowgrid .post-card,
.slowgrid .neighbor-card,
.slowgrid .related-card,
.slowgrid .related-fallback-slot .another_category tr,
.slowgrid .recommended-card {
  transition-property: transform;
}

/* Menu/TOC text, hover and active backgrounds follow the same theme frame. */
.slowgrid .context-categories a,
.slowgrid .toc-link {
  transition: none;
}


/* ========================================================================
   SLOWGRID v11.0.2 · HTML article boundaries / resilient context navigation
   Color repair is contrast-aware and reversible in script.js, not a global
   white-text override. No image/SVG inversion and no iframe rewriting.
   ======================================================================== */

/* An embedded full-document body rule must never make the reading container
   into a fixed-height scroll pane. Keep the main document as the scroll owner. */
body.slowgrid .article-body[data-sg-content] {
  position: relative !important;
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  float: none !important;
  contain: none !important;
  transform: none !important;
  overflow-wrap: anywhere;
}
body.slowgrid > .site-main,
body.slowgrid > .site-main > .layout-shell {
  overflow: visible;
}
[data-sg-content] :where(img, video, iframe, canvas) { max-width: 100%; }
[data-sg-content] :where(pre, .katex-display, mjx-container[display="true"], .MathJax_Display) {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
/* Respect native hidden states despite display rules elsewhere in the skin. */
body.slowgrid [data-context-sidebar][hidden],
body.slowgrid [data-category-rail][hidden],
body.slowgrid [data-toc-rail][hidden],
body.slowgrid [data-mobile-toc][hidden] { display: none !important; }
@media (min-width: 1100px) {
  body.slowgrid .layout-shell.has-context-rail > [data-context-sidebar]:not([hidden]) {
    position: sticky;
    top: var(--rail-top);
    align-self: start;
    min-width: 0;
  }
}
@media print {
  [data-context-sidebar], [data-mobile-toc] { display: none !important; }
  .layout-shell.has-context-rail { display: block !important; }
}

/* SLOWGRID 11.0.5: viewport-fixed article TOC.
   The rail is temporarily portaled to <body> on desktop while a grid anchor
   preserves its original right-column geometry. This bypasses sticky/overflow/
   transformed-wrapper edge cases without touching article or math markup. */
:root { --sg-toc-fixed-ready: 1; }
.sg-toc-anchor { display: none; }
@media screen and (min-width:1100px) {
  .layout-shell.has-toc {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) var(--rail-width, 232px) !important;
    gap: var(--rail-gap, 44px) !important;
    align-items: start !important;
  }
  .layout-shell.has-toc > .content-column {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  .layout-shell.has-toc > .sg-toc-anchor {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .layout-shell.has-toc > [data-context-sidebar]:not([hidden]) {
    display: block !important;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: var(--rail-top, 88px);
    align-self: start;
    min-width: 0;
  }
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating]:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: var(--sg-toc-fixed-top, var(--rail-top, 88px)) !important;
    left: var(--sg-toc-fixed-left, auto) !important;
    right: auto !important;
    bottom: auto !important;
    width: var(--sg-toc-fixed-width, var(--rail-width, 232px)) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: var(--sg-toc-fixed-max-height, calc(100vh - 104px)) !important;
    margin: 0 !important;
    padding: 7px 0 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
    transition: none !important;
    z-index: 70 !important;
  }
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] > [data-toc-rail]:not([hidden]) {
    display: flex !important;
    flex: 0 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    max-height: inherit !important;
  }
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] .toc-scroll {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] .context-heading,
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] .reading-status,
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] .rail-footer-link {
    flex: 0 0 auto !important;
  }
  [data-mobile-toc] { display: none !important; }
}
@media screen and (max-width:1099px) {
  .layout-shell > [data-context-sidebar] { display: none !important; }
  body.slowgrid > [data-context-sidebar][data-sg-toc-floating] { display: none !important; }
  [data-mobile-toc]:not([hidden]) { display: block !important; }
}
@media print {
  .layout-shell.has-toc { display: block !important; }
  .sg-toc-anchor, [data-context-sidebar], [data-mobile-toc] { display: none !important; }
}
.article-body .ns-series {
  min-width: 0;
}

.article-body .ns-series .note,
.article-body .ns-series .takeaway,
.article-body .ns-series .equation {
  margin: 1.6em 0;
  padding: 1em;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  color: var(--text);
}

.article-body .ns-series .note {
  border-left: 3px solid var(--accent);
}

.article-body .ns-series .note p:first-child,
.article-body .ns-series .takeaway p:first-child {
  margin-top: 0;
}

.article-body .ns-series .note p:last-child,
.article-body .ns-series .takeaway p:last-child {
  margin-bottom: 0;
}

.article-body .ns-series .math-display,
.article-body .ns-series .table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.article-body .ns-series .math-display {
  padding: .5em 0;
}

.article-body .ns-series .table-scroll {
  margin: 1.6em 0;
}

.article-body .ns-series .table-scroll table {
  margin: 0;
}

.article-body .ns-series figure {
  margin: 2em 0;
}

.article-body .ns-series figure img {
  margin: 0 auto 1em;
}

.article-body .ns-series figcaption,
.article-body .ns-series caption,
.article-body .ns-series .equation-label,
.article-body .ns-series .figure-credit,
.article-body .ns-series .meta,
.article-body .ns-series .section-kicker,
.article-body .ns-series .ns-eyebrow {
  color: var(--text-2);
  font-size: .88em;
}

.article-body .ns-series caption {
  padding-bottom: .6em;
  text-align: left;
}

.article-body .ns-series .citation {
  white-space: nowrap;
  font-size: .8em;
}

.article-body .ns-series pre {
  max-width: 100%;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}

.article-body .ns-series .references {
  font-size: .9em;
}
.contents_style p {
    margin-top: 0;
    margin-bottom: 1.4em;
    line-height: 1.9;
}
p[data-ke-size] {
    margin-bottom: 24px !important;
    line-height: 1.8;
}
/* 게시글 본문 문단 간격 */
.tt_article_useless_p_margin p {
    margin-top: 0 !important;
    margin-bottom: 1.4em !important;
}