@charset "utf-8";

@font-face {
  font-family: 'Sweet';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2') format('woff2');
  font-weight: 300;
  font-display: swap;
}

/* Modern Fixed Sidebar — Tistory skin */
:root {
  --accent: #5b6cff;
  --accent-rgb: 91, 108, 255;
  --left-sidebar-width-desktop: 272px;
  --left-sidebar-width: var(--left-sidebar-width-desktop);
  --content-width: 860px;
  --bg: #f4f6f9;
  --surface: rgba(255, 255, 255, 0.88);
  --surface-solid: #ffffff;
  --surface-muted: #f7f8fb;
  --sidebar-bg: rgba(250, 251, 253, 0.94);
  --text: #141821;
  --text-soft: #616978;
  --text-faint: #939aa7;
  --line: rgba(20, 24, 33, 0.09);
  --line-strong: rgba(20, 24, 33, 0.15);
  --shadow-sm: 0 8px 28px rgba(22, 29, 45, 0.06);
  --shadow-md: 0 22px 70px rgba(18, 24, 38, 0.14);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --transition: 220ms cubic-bezier(.2, .75, .25, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0e1117;
  --surface: rgba(24, 28, 37, 0.86);
  --surface-solid: #181c25;
  --surface-muted: #202530;
  --sidebar-bg: rgba(17, 21, 28, 0.95);
  --text: #f2f4f8;
  --text-soft: #aeb5c2;
  --text-faint: #747c8b;
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.16);
  --shadow-sm: 0 8px 28px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 24px 80px rgba(0, 0, 0, 0.42);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 76% -10%, rgba(var(--accent-rgb), 0.12), transparent 33rem),
    var(--bg);
  color: var(--text);
  font-family: 'Sweet', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: background-color var(--transition), color var(--transition);
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

.screen-out {
  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: 9999;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  transform: translateY(-150%);
  transition: transform var(--transition);
}
.skip-link:focus { transform: translateY(0); }

/* Left fixed sidebar */
.left-sidebar {
  position: fixed;
  z-index: 50;
  inset: 0 auto 0 0;
  width: var(--left-sidebar-width);
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  transition: width var(--transition), background-color var(--transition);
}
.left-sidebar__inner {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  padding: 28px 22px 18px;
}
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 13px;
  border-radius: 16px;
  outline-offset: 4px;
}
.brand__avatar {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
  box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.12);
}
.brand__avatar img { width: 100%; height: 100%; object-fit: cover; }
.brand__text { display: flex; min-width: 0; flex-direction: column; line-height: 1.35; }
.brand__text strong { overflow: hidden; font-size: 1.02rem; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.brand__text small { margin-top: 2px; color: var(--text-faint); font-size: .75rem; }
.blog-description {
  display: -webkit-box;
  margin: 18px 4px 20px;
  overflow: hidden;
  color: var(--text-soft);
  font-size: .83rem;
  line-height: 1.65;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.quick-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 24px;
}
.quick-nav a {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-soft);
  font-size: .72rem;
  font-weight: 650;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition);
}
.quick-nav a:hover {
  border-color: rgba(var(--accent-rgb), .3);
  background: rgba(var(--accent-rgb), .09);
  color: var(--accent);
  transform: translateY(-1px);
}
.quick-nav svg { width: 16px; height: 16px; }
.left-sidebar__scroll {
  min-height: 0;
  flex: 1;
  overflow: hidden auto;
  padding: 0 4px 12px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.sidebar-module { padding: 18px 0; border-top: 1px solid var(--line); }
.sidebar-module:first-child { border-top: 0; padding-top: 0; }
.sidebar-module__title {
  margin: 0 0 11px;
  color: var(--text-faint);
  font-size: .67rem;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.category-tree, .category-tree *,
.blog-menu, .blog-menu * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.category-tree #treeComponent,
.category-tree #treeComponent table,
.category-tree #treeComponent tbody,
.category-tree #treeComponent tr,
.category-tree #treeComponent td,
.category-tree #treeComponent div,
.category-tree #treeComponent span,
.category-tree #treeComponent font,
.category-tree #treeComponent a {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
.category-tree font,
.category-tree span,
.category-tree td,
.category-tree div { color: inherit !important; }
.category-tree ul, .category-tree li,
.blog-menu ul, .blog-menu li { margin: 0; padding: 0; list-style: none; }
.category-tree table { width: 100% !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; }
.category-tree table td { height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-soft) !important; }
.category-tree img { display: inline-block; width: auto; max-width: none; background: transparent !important; vertical-align: middle; }
.category-tree a, .blog-menu a {
  display: block;
  overflow: hidden;
  padding: 7px 9px;
  border-radius: 9px;
  background: transparent !important;
  color: var(--text-soft) !important;
  font-size: .84rem;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition), color var(--transition);
}
.category-tree a:hover, .blog-menu a:hover { background: rgba(var(--accent-rgb), .09) !important; color: var(--accent) !important; }
.category-tree .category_list, .category-tree .sub_category_list, .category-tree ul ul { margin: 1px 0 5px 12px; padding-left: 8px; border-left: 1px solid var(--line); }
.category-tree .tt_category > li > .link_tit { color: var(--text) !important; font-weight: 720; }
.category-tree .c_cnt { margin-left: 4px; color: var(--text-faint) !important; font-size: .72rem; }
.category-tree li { position: relative; }
.category-tree li.category-has-children > a { padding-left: 31px; }
.category-tree .category-toggle {
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 5px;
  display: grid;
  width: 23px;
  height: 23px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent !important;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}
.category-tree .category-toggle:hover { background: rgba(var(--accent-rgb), .1) !important; color: var(--accent); }
.category-tree .category-toggle span {
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform var(--transition);
}
.category-tree li.is-collapsed > .category-toggle span { transform: rotate(-45deg); }
.category-tree li.category-has-children > ul.category-children {
  overflow: hidden;
  transform-origin: top;
  transition: height 280ms cubic-bezier(.2, .75, .25, 1), opacity 210ms ease, transform 280ms cubic-bezier(.2, .75, .25, 1);
  will-change: height, opacity, transform;
}
.category-tree li.is-collapsed > ul.category-children { height: 0; opacity: 0; transform: translateY(-5px); pointer-events: none; }

.skin-new-badge {
  display: inline-flex !important;
  min-width: 26px;
  height: 15px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 5px;
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .14) !important;
  color: var(--accent) !important;
  font-family: inherit !important;
  font-size: 8px !important;
  font-weight: 820 !important;
  line-height: 13px !important;
  letter-spacing: .035em !important;
  vertical-align: .12em;
  white-space: nowrap;
  box-sizing: border-box;
}
.blog-menu > ul, .blog-menu > ul > li { display: block; }
.visitor-count { margin: 0; }
.visitor-count > div { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 8px; }
.visitor-count dt { color: var(--text-soft); font-size: .8rem; }
.visitor-count dd { margin: 0; font-size: .85rem; font-variant-numeric: tabular-nums; font-weight: 730; }
.left-sidebar__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  font-size: .72rem;
}
.left-sidebar__footer > a:hover { color: var(--accent); }
.theme-toggle {
  display: grid;
  width: 31px;
  height: 31px;
  margin-left: auto;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle__moon { display: none; }
html[data-theme="dark"] .theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: block; }
.theme-toggle--mobile,
.mobile-fab,
.mobile-sheet-backdrop,
.mobile-category-sheet { display: none; }


/* Older versions used a right-side drawer. Keep those controls hidden on desktop. */
.desktop-menu-toggle, .right-sidebar, .sidebar-drawer, .drawer-backdrop { display: none !important; }

/* Shared headings and tag styles */
.eyebrow { color: var(--accent); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.module-heading, .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.module-heading h2, .section-heading h2 { margin: 0; font-size: .9rem; letter-spacing: -.015em; }
.module-heading a, .section-heading > a { color: var(--text-faint); font-size: .72rem; }
.module-heading a:hover, .section-heading > a:hover { color: var(--accent); }
.tag-cloud, .tag-page__cloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-cloud a, .tag-page__cloud a { padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-muted); color: var(--text-soft); font-size: .73rem; transition: all var(--transition); }
.tag-cloud a:hover, .tag-page__cloud a:hover { border-color: rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .09); color: var(--accent); transform: translateY(-1px); }

/* Main shell */
.site-shell { min-height: 100vh; margin-left: var(--left-sidebar-width); transition: margin-left var(--transition); }
.topbar { display: none; }
.content { width: min(calc(100% - 96px), var(--content-width)); min-height: calc(100vh - 140px); margin: 0 auto; padding: 76px 0 36px; outline: 0; }
.content > * + * { margin-top: 28px; }
.content-card, .cover-block, .list-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.content-card { padding: clamp(26px, 5vw, 58px); }

/* Cover */
.cover-block { padding: 28px; }
.section-heading > div { display: flex; flex-direction: column; }
.section-heading h2 { margin-top: 3px; font-size: 1.4rem; }
.cover-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cover-card a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); transition: transform var(--transition), box-shadow var(--transition); }
.cover-card a:hover { box-shadow: var(--shadow-sm); transform: translateY(-3px); }
.cover-card__thumb { display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .04)); }
.cover-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cover-card__body { display: flex; flex-direction: column; padding: 17px; }
.cover-card__body strong { font-size: .95rem; line-height: 1.45; }
.cover-card__body small { display: -webkit-box; margin-top: 7px; overflow: hidden; color: var(--text-soft); font-size: .77rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

/* List */
.list-section { padding: clamp(24px, 4vw, 38px); }
.list-header { position: relative; overflow: hidden; margin-bottom: 28px; padding: 25px 28px; border-radius: 20px; background: linear-gradient(140deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .03)); }
.list-header::after { position: absolute; inset: 0; background-image: linear-gradient(90deg, var(--surface-solid) 5%, rgba(255,255,255,.1)), var(--list-image, none); background-position: center; background-size: cover; content: ""; opacity: .12; pointer-events: none; }
.list-header > * { position: relative; z-index: 1; }
.list-header h1 { margin: 3px 0 5px; font-size: clamp(1.55rem, 4vw, 2.35rem); line-height: 1.25; letter-spacing: -.05em; }
.list-header p { max-width: 580px; margin: 0; color: var(--text-soft); font-size: .86rem; }
.list-count { display: inline-block; margin-top: 13px; color: var(--text-faint); font-size: .72rem; }
.post-list { display: grid; gap: 13px; }
.post-card__link { display: grid; grid-template-columns: 180px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); }
.post-card__link:hover { border-color: rgba(var(--accent-rgb), .26); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.post-card__thumb { min-height: 164px; background: linear-gradient(135deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .03)); }
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { display: flex; min-width: 0; flex-direction: column; padding: 20px 22px; }
.post-card__meta { display: flex; align-items: center; gap: 10px; color: var(--text-faint); font-size: .68rem; }
.post-card__meta b { overflow: hidden; max-width: 55%; color: var(--accent); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.post-card__title-line { display: flex; min-width: 0; align-items: baseline; gap: 6px; margin-top: 8px; }
.post-card__title { display: -webkit-box; min-width: 0; overflow: hidden; font-size: 1.05rem; line-height: 1.45; letter-spacing: -.025em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.post-card__comment-count { flex: 0 0 auto; color: var(--text-faint); font-size: .7rem; font-weight: 620; }
.post-card__comment-number:empty::before { content: "0"; }
.post-card__summary { display: -webkit-box; margin-top: 7px; overflow: hidden; color: var(--text-soft); font-size: .78rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.post-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; color: var(--text-faint); font-size: .7rem; }
.empty-state { padding: 70px 20px; text-align: center; }
.empty-state strong { display: block; font-size: 1.1rem; }
.empty-state p { margin: 6px 0 0; color: var(--text-soft); font-size: .82rem; }

/* Articles */
.index-article__header h2, .notice-article h2 { margin: 8px 0 8px; font-size: clamp(1.45rem, 4vw, 2.05rem); line-height: 1.35; letter-spacing: -.045em; }
.index-article__header h2 a:hover, .notice-article h2 a:hover { color: var(--accent); }
.article-category { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-size: .68rem; font-weight: 730; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--text-faint); font-size: .72rem; }
.index-article__thumb { display: block; overflow: hidden; margin: 26px 0; border-radius: 18px; background: var(--surface-muted); }
.index-article__thumb img { width: 100%; max-height: 430px; object-fit: cover; }
.article-preview { position: relative; max-height: 300px; overflow: hidden; color: var(--text-soft); font-size: .93rem; }
.article-preview::after { position: absolute; right: 0; bottom: 0; left: 0; height: 100px; background: linear-gradient(transparent, var(--surface-solid)); content: ""; pointer-events: none; }
.article-preview img, .article-preview iframe, .article-preview video { max-width: 100%; }
.read-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--accent); font-size: .8rem; font-weight: 750; }
.read-more span { transition: transform var(--transition); }
.read-more:hover span { transform: translateX(4px); }
.article-header { margin-bottom: clamp(32px, 6vw, 58px); padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.article-header h1, .page-heading h1, .protected-card h1 { margin: 10px 0 12px; font-size: clamp(2rem, 6vw, 3.45rem); line-height: 1.16; letter-spacing: -.06em; }
.article-body { color: var(--text); font-size: 1rem; }
.article-body > :first-child { margin-top: 0; }
.article-body > :last-child { margin-bottom: 0; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4 { margin: 2.2em 0 .75em; line-height: 1.35; letter-spacing: -.035em; }
.article-body h2 { font-size: 1.65em; }
.article-body h3 { font-size: 1.3em; }
.article-body p { margin: 1.2em 0; }
.article-body a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .35); text-underline-offset: 3px; }
.article-body img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 12px;
}
.article-body > img { display: block; margin: 1.6em 0; }
.article-body figure,
.article-body figure.imageblock,
.article-body figure[data-ke-type="image"] { max-width: 100%; margin: 1.6em 0; }
.article-body figure img,
.article-body .imageblock img,
.article-body [data-ke-type="image"] img { margin: 0; }
.article-body .alignCenter,
.article-body figure.alignCenter,
.article-body [data-ke-style="alignCenter"] { margin-right: auto !important; margin-left: auto !important; text-align: center !important; }
.article-body .alignLeft,
.article-body figure.alignLeft,
.article-body [data-ke-style="alignLeft"] { margin-right: auto !important; margin-left: 0 !important; text-align: left !important; }
.article-body .alignRight,
.article-body figure.alignRight,
.article-body [data-ke-style="alignRight"] { margin-right: 0 !important; margin-left: auto !important; text-align: right !important; }
.article-body img.alignCenter { display: block; margin: 1.6em auto !important; }
.article-body img.alignLeft { display: block; margin: 1.6em auto 1.6em 0 !important; }
.article-body img.alignRight { display: block; margin: 1.6em 0 1.6em auto !important; }
.article-body p[style*="text-align: center"] img { margin-right: auto; margin-left: auto; }
.article-body p[style*="text-align: right"] img { margin-right: 0; margin-left: auto; }
.article-body p[style*="text-align: left"] img { margin-right: auto; margin-left: 0; }
.article-body iframe, .article-body video { max-width: 100%; border-radius: 12px; }
.article-body blockquote { margin: 1.7em 0; padding: 18px 22px; border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; background: rgba(var(--accent-rgb), .07); color: var(--text-soft); }
.article-body pre { max-width: 100%; overflow-x: auto; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #171b24; color: #e9edf5; font-size: .86rem; line-height: 1.65; }
.article-body code { padding: .15em .35em; border-radius: 5px; background: var(--surface-muted); font-family: 'Sweet', sans-serif; font-size: .9em; }
.article-body pre code { padding: 0; background: transparent; }
.article-body table { width: 100%; margin: 1.6em 0; border-collapse: collapse; font-size: .88rem; }
.article-body th, .article-body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.article-body th { background: var(--surface-muted); }

/* Tistory “같은 카테고리의 다른 글” spacing normalization */
.article-body .another_category {
  overflow: hidden;
  margin: 2em 0 !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px;
  background: transparent !important;
  color: var(--text-soft) !important;
}
.article-body .another_category h4 {
  margin: 0 !important;
  padding: 11px 12px !important;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-muted) !important;
  color: var(--text-soft) !important;
  font-size: .78rem !important;
  line-height: 1.5 !important;
}
.article-body .another_category table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
  table-layout: fixed;
}
.article-body .another_category tr { height: auto !important; }
.article-body .another_category th,
.article-body .another_category td {
  height: auto !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  font-size: .74rem !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  vertical-align: middle !important;
}
.article-body .another_category tr:last-child th,
.article-body .another_category tr:last-child td { border-bottom: 0 !important; }
.article-body .another_category th { overflow: hidden; text-align: left !important; white-space: nowrap; }
.article-body .another_category td { width: 92px; color: var(--text-faint) !important; text-align: right !important; white-space: nowrap; }
.article-body .another_category th a {
  display: inline-block;
  max-width: calc(100% - 44px);
  height: auto !important;
  overflow: hidden;
  color: var(--text-soft) !important;
  line-height: 1.45 !important;
  text-decoration: none !important;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}
.article-body .another_category th span:not(.skin-new-badge),
.article-body .another_category th .another_category_count {
  display: inline-block !important;
  margin-left: 4px;
  color: var(--text-faint) !important;
  font-size: .68rem !important;
  line-height: 1.45 !important;
  vertical-align: middle;
  white-space: nowrap;
}
.article-body .another_category th .skin-new-badge { margin-right: 2px; margin-left: 5px; }
.article-body .another_category th a:hover { color: var(--accent) !important; }
.article-body hr { margin: 3em 0; border: 0; border-top: 1px solid var(--line); }
.related-posts { margin-top: 58px; padding-top: 34px; border-top: 1px solid var(--line); }
.related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.related-card { display: flex; min-width: 0; flex-direction: column; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-muted); transition: transform var(--transition), border-color var(--transition); }
.related-card:hover { border-color: rgba(var(--accent-rgb), .3); transform: translateY(-2px); }
.related-card__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 10px; border-radius: 9px; background: rgba(var(--accent-rgb), .08); }
.related-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-card strong { overflow: hidden; font-size: .77rem; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.related-card small { margin-top: 4px; color: var(--text-faint); font-size: .65rem; }
.comments { margin-top: 54px; padding-top: 35px; border-top: 1px solid var(--line); }

/* Tistory modern comment/guestbook component refinements */
.tt-comment-cont { color: var(--text) !important; }
.tt-comment-cont .tt-box-total, .tt-comment-cont .tt-area-write, .tt-comment-cont .tt-item-reply { border-color: var(--line) !important; }
.tt-comment-cont .tt-area-write, .tt-comment-cont .tt-box-textarea, .tt-comment-cont .tt-cmt { background: var(--surface-muted) !important; color: var(--text) !important; }
.tt-comment-cont .tt-btn_register { border-radius: 10px !important; background: var(--accent) !important; }

/* Special pages */
.page-heading { margin-bottom: 34px; }
.page-heading h1 { margin-bottom: 8px; }
.page-heading p { margin: 0; color: var(--text-soft); }
.tag-page__cloud { gap: 10px; }
.tag-page__cloud a { padding: 9px 14px; font-size: .83rem; }
.password-form { display: flex; max-width: 480px; align-items: center; gap: 8px; margin-top: 24px; }
.password-form label { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); }
.password-form input { min-width: 0; flex: 1; padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; background: var(--surface-muted); color: var(--text); }
.password-form input:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1); }
.password-form button { padding: 11px 17px; border: 0; border-radius: 11px; background: var(--accent); color: white; font-weight: 700; cursor: pointer; }

/* Pagination and footer */
.pagination { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 34px !important; }
.pagination a { display: grid; min-width: 38px; height: 38px; padding: 0 10px; place-items: center; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--text-soft); font-size: .78rem; transition: all var(--transition); }
.pagination a:hover { border-color: rgba(var(--accent-rgb), .35); color: var(--accent); transform: translateY(-1px); }
.pagination a.selected { border-color: var(--accent); background: var(--accent); color: white; }
.pagination__numbers { display: flex; gap: 7px; }
.pagination .no-more-prev, .pagination .no-more-next { opacity: .28; pointer-events: none; }
.site-footer { display: flex; width: min(calc(100% - 96px), var(--content-width)); align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 24px 0 42px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: .72rem; }
.site-footer p { margin: 0; }
.site-footer a:hover { color: var(--accent); }

/* Focus */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .34); outline-offset: 3px; }

/* Tablet */
@media (max-width: 1120px) {
  :root { --left-sidebar-width: 222px; }
  .left-sidebar__inner { padding-inline: 16px; }
  .brand__text strong { font-size: .92rem; }
  .quick-nav a { flex-direction: column; gap: 3px; }
  .content, .site-footer { width: min(calc(100% - 64px), var(--content-width)); }
}

/* Mobile: hide the desktop sidebar and use a bottom-left floating menu */
@media (max-width: 760px) {
  :root { --left-sidebar-width: 0px; }
  body { padding-bottom: env(safe-area-inset-bottom); font-size: 15px; }
  body.mobile-overlay-open { overflow: hidden; }
  .left-sidebar { display: none; }
  .site-shell { margin-left: 0; }
  .topbar {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    height: 64px;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    backdrop-filter: blur(18px) saturate(145%);
  }
  html[data-theme="dark"] .topbar { background: rgba(14,17,23,.74); }
  .topbar__brand { overflow: hidden; min-width: 0; flex: 1; font-size: .9rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
  .topbar__meta { display: none; }
  .theme-toggle--mobile { display: grid; width: 36px; height: 36px; margin-left: 12px; flex: 0 0 auto; }
  .content { width: auto; margin: 0; padding: 22px 14px 96px; }
  .content > * + * { margin-top: 18px; }
  .content-card, .cover-block, .list-section { border-radius: 20px; }
  .content-card { padding: 25px 20px; }
  .cover-block, .list-section { padding: 18px; }
  .cover-grid { grid-template-columns: 1fr; }
  .post-card__link { grid-template-columns: 1fr; }
  .post-card__thumb { min-height: 0; aspect-ratio: 16 / 9; }
  .post-card__body { padding: 17px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .site-footer { width: auto; margin: 0 14px; padding-bottom: 88px; }
  .article-header h1, .page-heading h1, .protected-card h1 { font-size: clamp(1.75rem, 9vw, 2.65rem); }

  .mobile-fab {
    position: fixed;
    z-index: 80;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-menu-toggle {
    position: relative;
    z-index: 2;
    display: grid;
    width: 54px;
    height: 54px;
    padding: 0;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 18px;
    background: var(--accent);
    box-shadow: 0 14px 34px rgba(var(--accent-rgb), .32);
    color: #fff;
    cursor: pointer;
  }
  .mobile-menu-toggle span {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: opacity var(--transition), transform var(--transition);
  }
  .mobile-fab.is-open .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mobile-fab.is-open .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
  .mobile-fab.is-open .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mobile-fab__actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 11px;
    pointer-events: none;
  }
  .mobile-fab__item {
    display: flex;
    min-width: 112px;
    height: 46px;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: 15px;
    background: var(--surface-solid);
    box-shadow: var(--shadow-md);
    color: var(--text-soft);
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px) scale(.94);
    transform-origin: left bottom;
    transition: opacity var(--transition), transform var(--transition), color var(--transition), border-color var(--transition);
  }
  .mobile-fab__item svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .mobile-fab__item span { font-size: .76rem; font-weight: 720; }
  .mobile-fab.is-open .mobile-fab__actions { pointer-events: auto; }
  .mobile-fab.is-open .mobile-fab__item { opacity: 1; transform: translateY(0) scale(1); }
  .mobile-fab.is-open .mobile-fab__item:nth-child(1) { transition-delay: 90ms; }
  .mobile-fab.is-open .mobile-fab__item:nth-child(2) { transition-delay: 65ms; }
  .mobile-fab.is-open .mobile-fab__item:nth-child(3) { transition-delay: 40ms; }
  .mobile-fab.is-open .mobile-fab__item:nth-child(4) { transition-delay: 15ms; }
  .mobile-fab__item:active { transform: scale(.97); }

  .mobile-sheet-backdrop {
    position: fixed;
    z-index: 90;
    inset: 0;
    display: block;
    background: rgba(5, 8, 14, .52);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  .mobile-sheet-backdrop.is-visible { opacity: 1; pointer-events: auto; }
  .mobile-category-sheet {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    max-height: min(74vh, 680px);
    min-height: 260px;
    flex-direction: column;
    padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
    border: 1px solid var(--line-strong);
    border-bottom: 0;
    border-radius: 26px 26px 0 0;
    background: var(--surface-solid);
    box-shadow: 0 -20px 70px rgba(0,0,0,.28);
    transform: translateY(calc(100% + 24px));
    transition: transform 280ms cubic-bezier(.2,.75,.25,1);
  }
  .mobile-category-sheet::before {
    display: block;
    width: 44px;
    height: 4px;
    margin: 0 auto 8px;
    border-radius: 99px;
    background: var(--line-strong);
    content: "";
  }
  .mobile-category-sheet.is-open { transform: translateY(0); }
  .mobile-category-sheet__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 5px 2px 14px; border-bottom: 1px solid var(--line); }
  .mobile-category-sheet__header h2 { margin: 1px 0 0; font-size: 1.1rem; letter-spacing: -.035em; }
  .mobile-category-sheet__close {
    display: grid;
    width: 38px;
    height: 38px;
    padding: 0 0 2px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-muted);
    color: var(--text-soft);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-category-sheet__body { min-height: 0; overflow-y: auto; padding: 14px 2px 0; overscroll-behavior: contain; }
  .mobile-category-sheet__body .category-tree a { padding: 10px 11px; font-size: .9rem; }
  .mobile-category-sheet__body .category-tree li.category-has-children > a { padding-left: 39px; }
  .mobile-category-sheet__body .category-tree .category-toggle { top: 7px; left: 7px; width: 27px; height: 27px; }
  .mobile-category-sheet__body .category-tree .category_list,
  .mobile-category-sheet__body .category-tree .sub_category_list,
  .mobile-category-sheet__body .category-tree ul ul { margin-left: 10px; padding-left: 10px; }
}

@media (max-width: 460px) {
  .list-header { padding: 21px 20px; }
  .related-grid { grid-template-columns: 1fr; }
  .password-form { align-items: stretch; flex-direction: column; }
  .pagination__numbers a:nth-child(n+6) { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 4px; }
}

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


/* =========================================================
   1.4.0 — six related cards, refined guestbook, scrollbars,
   Open Graph cards, and a single forced webfont
   ========================================================= */
html,
body,
body *,
body *::before,
body *::after {
  font-family: 'Sweet', sans-serif !important;
}

/* Site-wide scrollbar */
html,
body,
.left-sidebar__scroll,
.mobile-category-sheet__body,
.article-body pre,
.tt-comment-cont .tt-cmt {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .58) transparent;
}
*::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 3px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .76), rgba(var(--accent-rgb), .42)) padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .96), rgba(var(--accent-rgb), .62)) padding-box;
}
*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Related posts: always form a balanced 3 × 2 grid when six posts exist. */
.related-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.related-card {
  height: 100%;
}
.related-card:nth-child(n+7) {
  display: none;
}
.related-card__thumb {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 22% 18%, rgba(var(--accent-rgb), .24), transparent 36%),
    linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04));
}
.related-card__thumb::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(var(--accent-rgb), .25);
  border-radius: 12px;
  background: rgba(var(--accent-rgb), .09);
  color: var(--accent);
  content: "↗";
  font-size: 1rem;
  line-height: 32px;
  text-align: center;
  transform: translate(-50%, -50%);
}
.related-card__thumb img {
  position: relative;
  z-index: 1;
}
.related-card--supplemental {
  animation: related-card-enter 260ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes related-card-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Guestbook composer */
.guestbook-content .tt-comment-cont {
  color: var(--text) !important;
}
.guestbook-content .tt-comment-cont .tt-box-total {
  display: flex !important;
  align-items: center;
  gap: 7px;
  margin: 0 0 18px !important;
  padding: 0 0 16px !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--text-soft) !important;
  font-size: .84rem !important;
}
.guestbook-content .tt-comment-cont .tt-box-total .tt_num_g {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .12) !important;
  color: var(--accent) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
}
.guestbook-content .tt-comment-cont .tt-area-write {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), .1), transparent 18rem),
    var(--surface-muted) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .08) !important;
}
.guestbook-content .tt-comment-cont .tt-area-write > .tt-box-thumb {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  margin: 0 !important;
}
.guestbook-content .tt-comment-cont .tt-area-write > .tt-box-thumb .tt-thumbnail {
  display: block !important;
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--surface-solid) !important;
  border-radius: 16px !important;
  background-color: var(--surface-solid) !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}
.guestbook-content .tt-comment-cont .tt_wrap_write {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.guestbook-content .tt-comment-cont .tt-box-account {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 9px !important;
  margin: 0 0 10px !important;
}
.guestbook-content .tt-comment-cont .tt-box-account input {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  outline: none !important;
  background: var(--surface-solid) !important;
  color: var(--text) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition) !important;
}
.guestbook-content .tt-comment-cont .tt-box-account input:focus {
  border-color: rgba(var(--accent-rgb), .55) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1) !important;
}
.guestbook-content .tt-comment-cont .tt-box-textarea {
  overflow: visible !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.guestbook-content .tt-comment-cont .tt-box-textarea .tt-inner-g {
  display: flex !important;
  min-height: 154px !important;
  flex-direction: column !important;
  padding: 14px 15px !important;
  border: 1px solid var(--line) !important;
  border-radius: 15px !important;
  background: var(--surface-solid) !important;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition) !important;
}
.guestbook-content .tt-comment-cont .tt-box-textarea .tt-inner-g:focus-within {
  border-color: rgba(var(--accent-rgb), .58) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1) !important;
}
.guestbook-content .tt-comment-cont .tt_txt_user {
  display: inline-flex !important;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 8px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  background: rgba(var(--accent-rgb), .1) !important;
  color: var(--accent) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.guestbook-content .tt-comment-cont .tt-cmt {
  width: 100% !important;
  min-height: 96px !important;
  max-height: 300px !important;
  overflow: auto !important;
  padding: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: .9rem !important;
  line-height: 1.7 !important;
  white-space: pre-wrap !important;
}
.guestbook-content .tt-comment-cont .tt-cmt:empty::before {
  color: var(--text-faint) !important;
  content: attr(placeholder);
  pointer-events: none;
}
.guestbook-content .tt-comment-cont .tt-box-write {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.guestbook-content .tt-comment-cont .tt-xe-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: var(--text-soft) !important;
  cursor: pointer !important;
  font-size: .75rem !important;
}
.guestbook-content .tt-comment-cont .tt-xe-label input[type="checkbox"] {
  position: static !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  opacity: 1 !important;
  appearance: auto !important;
  accent-color: var(--accent);
}
.guestbook-content .tt-comment-cont .tt-xe-input-helper {
  display: none !important;
}
.guestbook-content .tt-comment-cont .tt-btn_register {
  min-width: 86px !important;
  height: 42px !important;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--accent) !important;
  box-shadow: 0 9px 22px rgba(var(--accent-rgb), .24) !important;
  color: #fff !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition) !important;
}
.guestbook-content .tt-comment-cont .tt-btn_register:hover:not(:disabled) {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), .32) !important;
}
.guestbook-content .tt-comment-cont .tt-btn_register:disabled {
  cursor: not-allowed !important;
  opacity: .42 !important;
  box-shadow: none !important;
}
.guestbook-content .tt-comment-cont .tt-item-reply {
  border-color: var(--line) !important;
  background: transparent !important;
}

/* Tistory Open Graph / link preview */
.article-body figure[data-ke-type="opengraph"] {
  width: 100% !important;
  max-width: none !important;
  margin: 2em 0 !important;
}
.article-body figure[data-ke-type="opengraph"] > a {
  display: grid !important;
  min-height: 178px !important;
  overflow: hidden !important;
  grid-template-columns: minmax(180px, 30%) minmax(0, 1fr) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  outline: none !important;
  background: var(--surface-solid) !important;
  box-shadow: var(--shadow-sm) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}
.article-body figure[data-ke-type="opengraph"] > a:hover {
  border-color: rgba(var(--accent-rgb), .36) !important;
  box-shadow: 0 18px 46px rgba(0, 0, 0, .13) !important;
  transform: translateY(-2px);
}
.article-body figure[data-ke-type="opengraph"] .og-image {
  position: relative !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 178px !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  background-color: var(--surface-muted) !important;
  background-position: center !important;
  background-size: cover !important;
}
.article-body figure[data-ke-type="opengraph"] .og-image::after {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 10px;
  background: rgba(12, 16, 24, .58);
  color: #fff;
  content: "↗";
  font-size: .75rem;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.article-body figure[data-ke-type="opengraph"] .og-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 178px !important;
  margin: 0 !important;
  object-fit: cover !important;
}
.article-body figure[data-ke-type="opengraph"] .og-text {
  display: flex !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 178px !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px 26px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
}
.article-body figure[data-ke-type="opengraph"] .og-text p {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  color: inherit !important;
  text-align: left !important;
}
.article-body figure[data-ke-type="opengraph"] .og-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 0 8px !important;
  color: var(--text) !important;
  font-size: 1.08rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-body figure[data-ke-type="opengraph"] .og-desc {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--text-soft) !important;
  font-size: .82rem !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-body figure[data-ke-type="opengraph"] .og-host {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: auto 0 0 !important;
  padding-top: 16px !important;
  color: var(--accent) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
.article-body figure[data-ke-type="opengraph"] .og-host::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  content: "";
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1);
}

@media (max-width: 760px) {
  .guestbook-content .tt-comment-cont .tt-area-write {
    padding: 15px !important;
  }
  .guestbook-content .tt-comment-cont .tt-area-write > .tt-box-thumb {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
  .guestbook-content .tt-comment-cont .tt-area-write > .tt-box-thumb .tt-thumbnail {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }
  .article-body figure[data-ke-type="opengraph"] > a {
    grid-template-columns: 1fr !important;
  }
  .article-body figure[data-ke-type="opengraph"] .og-image {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .article-body figure[data-ke-type="opengraph"] .og-image img {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }
  .article-body figure[data-ke-type="opengraph"] .og-text {
    min-height: 0 !important;
    padding: 20px !important;
  }
}

@media (max-width: 460px) {
  .guestbook-content .tt-comment-cont .tt-area-write {
    display: block !important;
  }
  .guestbook-content .tt-comment-cont .tt-area-write > .tt-box-thumb {
    margin: 0 0 12px !important;
  }
  .guestbook-content .tt-comment-cont .tt-box-account {
    grid-template-columns: 1fr;
  }
  .guestbook-content .tt-comment-cont .tt-box-write {
    align-items: stretch !important;
    flex-direction: column !important;
  }
  .guestbook-content .tt-comment-cont .tt-btn_register {
    width: 100% !important;
  }
}

/* =========================================================
   1.5.0 — article previews, comments, and post action toolbar
   ========================================================= */

/* Author line and relocated owner-only tools */
.article-meta--permalink {
  align-items: center;
}
.article-author-tools {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.article-author {
  min-width: 0;
}
.article-admin-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}
.article-admin-actions:empty,
.article-admin-actions.is-empty {
  display: none;
}

/* Tistory post actions: like/share in the lower center */
.post-primary-actions {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin: 42px 0 4px;
}
.post-primary-actions:empty,
.post-primary-actions.is-empty {
  display: none;
}
.post-primary-actions .container_postbtn,
.post-primary-actions .skin-post-actions {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  display: flex !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 7px !important;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: var(--surface-muted) !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}
.post-primary-actions .container_postbtn::after,
.post-primary-actions .container_postbtn::before {
  display: none !important;
}
.post-primary-actions .container_postbtn > *,
.post-primary-actions .skin-post-action {
  float: none !important;
  margin: 0 !important;
}

.skin-post-action {
  position: relative !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 42px !important;
  height: 40px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 14px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  outline: none !important;
  background: var(--surface-solid) !important;
  box-shadow: none !important;
  color: var(--text-soft) !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition) !important;
}
.skin-post-action:hover,
.skin-post-action:focus-within {
  border-color: rgba(var(--accent-rgb), .36) !important;
  background: rgba(var(--accent-rgb), .1) !important;
  box-shadow: 0 8px 20px rgba(var(--accent-rgb), .13) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
}
.skin-post-action::before,
.skin-post-action::after {
  display: inline-block;
  pointer-events: none;
  color: currentColor;
  font-family: 'Sweet', sans-serif !important;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1;
}
.skin-post-action::after {
  content: attr(data-skin-action-label);
}
.skin-post-action--like::before {
  content: "♡";
  font-size: 1.05rem;
}
.skin-post-action--share::before {
  content: "↗";
  font-size: .95rem;
}
.skin-post-action > button,
.skin-post-action > a,
.skin-post-action > .wrap_btn,
.skin-post-action > .wrap_btn > button,
.skin-post-action > .wrap_btn > a {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  cursor: pointer !important;
  opacity: .001 !important;
}
.skin-post-action [class*="ico_"],
.skin-post-action [class*="txt_"] {
  color: transparent !important;
  font-size: 0 !important;
}

/* Statistics and more sit beside the author name. */
.article-admin-actions .skin-post-action {
  min-width: 31px !important;
  height: 30px !important;
  padding: 0 9px !important;
  border-color: var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.article-admin-actions .skin-post-action::before {
  display: none;
}
.article-admin-actions .skin-post-action::after {
  font-size: .63rem;
  font-weight: 680;
}
.article-admin-actions .skin-post-action--more {
  width: 31px !important;
  min-width: 31px !important;
  padding: 0 !important;
}
.article-admin-actions .skin-post-action--more::after {
  content: "•••";
  letter-spacing: 1px;
  transform: translateY(-1px);
}
.article-admin-actions .skin-post-action:hover,
.article-admin-actions .skin-post-action:focus-within {
  background: rgba(var(--accent-rgb), .09) !important;
  transform: none;
}

/* Open Graph cards in both full posts and index/preview pages. */
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"],
:is(.article-body, .article-preview) .skin-og-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 1.9em 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] > a,
:is(.article-body, .article-preview) .skin-og-card__link {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-height: 180px !important;
  overflow: hidden !important;
  grid-template-columns: minmax(190px, 31%) minmax(0, 1fr) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 20px !important;
  outline: none !important;
  background: linear-gradient(145deg, rgba(var(--accent-rgb), .055), transparent 42%), var(--surface-solid) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .09) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] > a:hover,
:is(.article-body, .article-preview) .skin-og-card__link:hover {
  border-color: rgba(var(--accent-rgb), .4) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, .15) !important;
  transform: translateY(-2px);
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image,
:is(.article-body, .article-preview) .skin-og-card__image {
  position: relative !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 180px !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-right: 1px solid var(--line) !important;
  background-color: var(--surface-muted) !important;
  background-position: center !important;
  background-size: cover !important;
  isolation: isolate;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image::before,
:is(.article-body, .article-preview) .skin-og-card__image::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .12), transparent 55%),
    linear-gradient(0deg, rgba(7, 10, 17, .08), rgba(7, 10, 17, .02));
  content: "";
  pointer-events: none;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image::after,
:is(.article-body, .article-preview) .skin-og-card__image::after {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 11px;
  background: rgba(10, 14, 22, .62);
  color: #fff;
  content: "↗";
  font-size: .76rem;
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image img,
:is(.article-body, .article-preview) .skin-og-card__image img {
  position: relative !important;
  z-index: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 180px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-text,
:is(.article-body, .article-preview) .skin-og-card__text {
  display: flex !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 180px !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 27px 29px !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  text-align: left !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-text *,
:is(.article-body, .article-preview) .skin-og-card__text * {
  color: inherit !important;
  text-align: left !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-text p,
:is(.article-body, .article-preview) .skin-og-card__text p {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-title,
:is(.article-body, .article-preview) .skin-og-card .og-title {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 0 8px !important;
  color: var(--text) !important;
  font-size: 1.04rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-desc,
:is(.article-body, .article-preview) .skin-og-card .og-desc {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--text-soft) !important;
  font-size: .8rem !important;
  line-height: 1.55 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-host,
:is(.article-body, .article-preview) .skin-og-card .og-host {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: auto 0 0 !important;
  padding-top: 16px !important;
  color: var(--accent) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
:is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-host::before,
:is(.article-body, .article-preview) .skin-og-card .og-host::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: currentColor;
  content: "";
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1);
}
.article-preview .skin-og-card,
.article-preview figure[data-ke-type="opengraph"] {
  margin-top: .9em !important;
}

/* Custom comment composer and comment list */
.comments {
  margin-top: 58px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}
.comments__heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.comments__heading h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 0;
  font-size: 1.45rem;
  letter-spacing: -.045em;
}
.comments__heading p {
  margin: 0 0 2px;
  color: var(--text-faint);
  font-size: .75rem;
}
.comments__count {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .12);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
}
.comment-composer {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), .1), transparent 18rem),
    var(--surface-muted);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .08);
}
.comment-composer__avatar {
  position: relative;
  display: grid;
  width: 48px;
  height: 48px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .18);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08)),
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 28px rgba(0, 0, 0, .16);
}
.comment-composer__avatar img {
  display: none !important;
}
.comment-composer__avatar-source {
  display: none !important;
}
.comment-composer__avatar.has-image::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--composer-avatar-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
}
.comment-composer__avatar.has-image::after {
  display: none;
}
.comment-composer__avatar.is-empty {
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, .9) 0 7px, transparent 8px),
    radial-gradient(ellipse at 50% 76%, rgba(255, 255, 255, .82) 0 13px, transparent 14px),
    linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08)),
    var(--surface-muted);
}
.comment-composer__main {
  min-width: 0;
}
.comment-composer__account {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 10px;
}
.comment-composer__account label {
  min-width: 0;
}
.comment-composer__account label > span {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip: rect(0,0,0,0);
}
.comment-composer__account input,
.comment-composer__textarea textarea {
  width: 100%;
  border: 1px solid var(--line);
  outline: none;
  background: var(--surface-solid);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.comment-composer__account input {
  height: 42px;
  padding: 0 13px;
  border-radius: 12px;
}
.comment-composer__homepage {
  grid-column: 1 / -1;
}
.comment-composer__textarea {
  display: block;
}
.comment-composer__textarea textarea {
  display: block;
  min-height: 142px;
  max-height: 360px;
  resize: vertical;
  padding: 14px 15px;
  border-radius: 15px;
  line-height: 1.7;
}
.comment-composer__account input:focus,
.comment-composer__textarea textarea:focus {
  border-color: rgba(var(--accent-rgb), .58);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1);
}
.comment-composer__account input::placeholder,
.comment-composer__textarea textarea::placeholder {
  color: var(--text-faint);
}
.comment-composer__footer {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
}
.comment-secret {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: .75rem;
}
.comment-secret input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.comment-secret__box {
  position: relative;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface-solid);
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.comment-secret input:checked + .comment-secret__box {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .1);
}
.comment-secret input:checked + .comment-secret__box::after {
  color: #fff;
  content: "✓";
  font-size: .68rem;
  font-weight: 800;
}
.comment-submit {
  min-width: 104px;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .24);
  color: #fff;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 720;
  transition: box-shadow var(--transition), transform var(--transition), filter var(--transition);
}
.comment-submit:hover {
  box-shadow: 0 14px 30px rgba(var(--accent-rgb), .34);
  filter: brightness(1.04);
  transform: translateY(-1px);
}
.comment-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.comment-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 13px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.comment-item:last-child {
  border-bottom: 0;
}
.comment-item__avatar {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .14);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .05)),
    var(--surface-muted);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 22px rgba(0, 0, 0, .12);
}
.comment-item__avatar-source {
  display: none !important;
}
.comment-composer__avatar.has-image,
.comment-item__avatar.has-image {
  border-color: rgba(255, 255, 255, .08);
  background: var(--surface-solid);
}
.comment-composer__avatar.is-empty::before,
.comment-item__avatar.is-empty::before {
  position: absolute;
  top: 9px;
  z-index: 1;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .16);
  content: "";
}
.comment-composer__avatar.is-empty::after,
.comment-item__avatar.is-empty::after {
  position: absolute;
  bottom: 7px;
  z-index: 1;
  width: 24px;
  height: 13px;
  border-radius: 13px 13px 10px 10px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb), .08);
  content: "";
}
.comment-item__avatar img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-item__body {
  min-width: 0;
}
.comment-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.comment-item__identity {
  display: flex;
  min-width: 0;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 10px;
}
.comment-item__identity strong {
  overflow: hidden;
  color: var(--text);
  font-size: .82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-item__identity strong .comment-profile-badge,
.comment-item__identity strong .tistoryProfileLayerTrigger,
.comment-item__identity strong a[class*="Profile"],
.comment-item__identity strong a[class*="profile"],
.comment-item__identity strong .profile {
  display: inline-flex;
  position: relative;
  top: -1px;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  border: 1px solid rgba(var(--accent-rgb), .22);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .12);
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0;
  vertical-align: middle;
}
.comment-item__identity strong .comment-profile-badge::before,
.comment-item__identity strong .tistoryProfileLayerTrigger::before,
.comment-item__identity strong a[class*="Profile"]::before,
.comment-item__identity strong a[class*="profile"]::before,
.comment-item__identity strong .profile::before {
  color: var(--accent);
  content: "✦";
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.comment-item__identity time {
  color: var(--text-faint);
  font-size: .65rem;
}
.comment-item__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
}
.comment-item__actions a,
.comment-item__actions button {
  padding: 5px 7px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  font-size: .64rem;
}
.comment-item__actions a:hover,
.comment-item__actions button:hover {
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent);
}
.comment-item__content {
  margin-top: 7px;
  color: var(--text-soft);
  font-size: .84rem;
  line-height: 1.7;
}
.comment-list--reply {
  grid-column: 1 / -1;
  min-width: 0;
  width: auto;
  margin: 16px 0 0 18px;
  padding-left: 18px;
  border-left: 2px solid rgba(var(--accent-rgb), .18);
}
.comment-item--reply {
  grid-template-columns: 38px minmax(0, 1fr);
  padding: 15px 0;
}
.comment-item--reply .comment-item__avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}

@media (max-width: 760px) {
  .article-meta--permalink {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .post-primary-actions {
    margin-top: 34px;
  }
  :is(.article-body, .article-preview) figure[data-ke-type="opengraph"] > a,
  :is(.article-body, .article-preview) .skin-og-card__link {
    grid-template-columns: 1fr !important;
  }
  :is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image,
  :is(.article-body, .article-preview) .skin-og-card__image {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
    border-right: 0 !important;
    border-bottom: 1px solid var(--line) !important;
  }
  :is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-image img,
  :is(.article-body, .article-preview) .skin-og-card__image img {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }
  :is(.article-body, .article-preview) figure[data-ke-type="opengraph"] .og-text,
  :is(.article-body, .article-preview) .skin-og-card__text {
    min-height: 0 !important;
    padding: 21px !important;
  }
  .comments__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .comments__heading p {
    margin: 0;
  }
  .comment-composer {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding: 15px;
  }
  .comment-composer__avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
}

@media (max-width: 520px) {
  .article-admin-actions {
    gap: 4px;
  }
  .post-primary-actions .container_postbtn,
  .post-primary-actions .skin-post-actions {
    width: 100% !important;
    max-width: 300px;
  }
  .post-primary-actions .skin-post-action {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }
  .comment-composer {
    display: block;
  }
  .comment-composer__avatar {
    margin-bottom: 12px;
  }
  .comment-composer__account {
    grid-template-columns: 1fr;
  }
  .comment-composer__homepage {
    grid-column: auto;
  }
  .comment-composer__footer {
    align-items: stretch;
    flex-direction: column;
  }
  .comment-submit {
    width: 100%;
  }
  .comment-item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
  }
  .comment-item__avatar {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }
  .comment-item__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .comment-list--reply {
    margin-left: 5px;
    padding-left: 12px;
  }
}

/* =========================================================
   1.6.0 — unified post actions and owner management menu
   ========================================================= */

/* The native toolbar remains as an event source only. Its useful controls are
   moved into the skin-owned action areas by script. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.skin-native-action-hidden {
  display: none !important;
}

.post-primary-actions {
  position: relative;
  display: flex !important;
  min-height: 0;
  align-items: center;
  justify-content: center;
  margin: 34px 0 36px !important;
  clear: both;
}
.article-body > .post-primary-actions {
  width: 100%;
  margin-top: 38px !important;
  margin-bottom: 30px !important;
}
.post-primary-actions__inner {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}
.post-primary-actions__inner > .skin-post-action {
  flex: 0 0 auto;
  margin: 0 !important;
}
.post-primary-actions__inner > .container_postbtn.skin-post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.post-primary-actions .skin-post-action--custom {
  appearance: none;
  -webkit-appearance: none;
}
.skin-post-action--subscribe::before {
  content: "+";
  font-size: 1rem;
  font-weight: 500;
}
.skin-post-action--subscribe.is-subscribed::before {
  content: "✓";
}
.post-share-feedback {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  color: var(--text-faint);
  font-size: .68rem;
  line-height: 1;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Author tools share the same vertical center and button height. */
.article-author-tools,
.article-admin-actions,
.article-statistics-target,
.owner-menu {
  align-items: center;
}
.article-author-tools {
  display: inline-flex;
  gap: 8px;
  min-height: 32px;
}
.article-admin-actions {
  position: relative;
  display: inline-flex;
  height: 32px;
  min-height: 32px;
  gap: 5px;
  line-height: 1;
  vertical-align: middle;
}
.article-statistics-target,
.owner-menu {
  display: inline-flex;
  height: 32px;
  min-height: 32px;
}
.article-statistics-target:empty {
  display: none;
}
.article-admin-actions .skin-post-action--statistics {
  display: inline-flex !important;
  width: auto !important;
  min-width: 42px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  align-self: center;
  border: 1px solid var(--line) !important;
  border-radius: 999px !important;
  background: transparent !important;
  line-height: 1 !important;
  transform: none !important;
}
.article-admin-actions .skin-post-action--statistics::after {
  font-size: .66rem;
  line-height: 1;
}

.owner-menu {
  position: relative;
}
.owner-menu__toggle {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  outline: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.owner-menu__toggle span {
  display: block;
  font-family: 'Sweet', sans-serif !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  transform: translateY(-1px);
}
.owner-menu__toggle:hover,
.owner-menu__toggle:focus-visible,
.owner-menu.is-open .owner-menu__toggle {
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 7px 18px rgba(var(--accent-rgb), .12);
  color: var(--accent);
}
.owner-menu__popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 9px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 166px;
  gap: 3px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-solid);
  box-shadow: 0 18px 45px rgba(8, 11, 20, .22);
}
.owner-menu__popover[hidden] {
  display: none !important;
}
.owner-menu__popover::before {
  position: absolute;
  top: -5px;
  right: 11px;
  width: 9px;
  height: 9px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: var(--surface-solid);
  content: "";
  transform: rotate(45deg);
}
.owner-menu__popover a {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 38px;
  align-items: center;
  padding: 0 11px;
  border-radius: 9px;
  color: var(--text-soft);
  font-size: .76rem;
  font-weight: 650;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}
.owner-menu__popover a:hover,
.owner-menu__popover a:focus-visible {
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent);
}
.owner-menu__popover .owner-menu__danger:hover,
.owner-menu__popover .owner-menu__danger:focus-visible {
  background: rgba(225, 75, 86, .11);
  color: #e14b56;
}

@media (max-width: 760px) {
  .article-meta--permalink {
    gap: 7px;
  }
  .article-author-tools {
    min-height: 32px;
  }
  .post-primary-actions,
  .article-body > .post-primary-actions {
    margin-top: 30px !important;
    margin-bottom: 28px !important;
  }
}

@media (max-width: 520px) {
  .post-primary-actions__inner,
  .post-primary-actions__inner > .container_postbtn.skin-post-actions {
    width: min(100%, 330px) !important;
  }
  .post-primary-actions__inner > .container_postbtn.skin-post-actions > .skin-post-action {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
  .owner-menu__popover {
    right: -2px;
  }
}

/* =========================================================
   1.6.1 — custom post actions and native UI cleanup
   ========================================================= */

/* Tistory's injected toolbar remains in the DOM as a click source only. */
.container_postbtn,
.skin-native-toolbar-source,
.skin-native-action-hidden {
  display: none !important;
}

/* Remove the injected blog introduction/namecard below related posts. */
[data-tistory-react-app="Namecard"] {
  display: none !important;
}

.skin-post-action[hidden],
.owner-statistics-button[hidden] {
  display: none !important;
}

.post-primary-actions__inner {
  gap: 8px;
}

.skin-post-action--like.is-active {
  border-color: rgba(var(--accent-rgb), .34) !important;
  background: rgba(var(--accent-rgb), .1) !important;
  color: var(--accent) !important;
}

/* Owner-only graph button beside the custom ellipsis menu. */
.owner-statistics-button {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  outline: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  line-height: 0;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.owner-statistics-button svg {
  width: 15px;
  height: 15px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.owner-statistics-button:hover,
.owner-statistics-button:focus-visible {
  border-color: rgba(var(--accent-rgb), .38);
  background: rgba(var(--accent-rgb), .1);
  box-shadow: 0 7px 18px rgba(var(--accent-rgb), .12);
  color: var(--accent);
}

@media (max-width: 520px) {
  .post-primary-actions__inner {
    width: min(100%, 360px) !important;
  }
  .post-primary-actions__inner > .skin-post-action {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    padding-right: 9px !important;
    padding-left: 9px !important;
  }
}



/* =========================================================
   1.6.3 — category, fixed more/less and list-page transitions
   ========================================================= */

/* Tistory editor '더보기' blocks animate without changing their native toggle behavior. */
.article-body .skin-moreless-content {
  transform-origin: top;
  transition: height 320ms cubic-bezier(.2, .75, .25, 1), opacity 240ms ease, transform 320ms cubic-bezier(.2, .75, .25, 1) !important;
  will-change: height, opacity, transform;
}
.article-body .skin-moreless-content.is-moreless-animating { overflow: hidden !important; }

/* Only the central list card and its pagination move during page changes. */
.page-transition-stage {
  transition: opacity 260ms ease, transform 300ms cubic-bezier(.2, .75, .25, 1);
  transform: translateX(0) scale(1);
  transform-origin: center top;
  will-change: opacity, transform;
}
.page-transition-stage.is-page-loading { pointer-events: none; }
.page-transition-stage.is-page-leaving { opacity: 0; }
.page-transition-stage.is-page-next.is-page-leaving { transform: translateX(-24px) scale(.992); }
.page-transition-stage.is-page-prev.is-page-leaving { transform: translateX(24px) scale(.992); }
.page-transition-stage.is-page-entering { opacity: 0; }
.page-transition-stage.is-page-next.is-page-entering { transform: translateX(24px) scale(.992); }
.page-transition-stage.is-page-prev.is-page-entering { transform: translateX(-24px) scale(.992); }

@media (prefers-reduced-motion: reduce) {
  .category-tree li.category-has-children > ul.category-children,
  .article-body .skin-moreless-content,
  .page-transition-stage {
    transition-duration: 1ms !important;
  }
}

/* =========================================================
   1.6.4 — Tistory attachment cards
   ========================================================= */

/* New editor file attachments */
:is(.article-body, .article-preview) figure.fileblock,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock {
  position: relative !important;
  display: block !important;
  width: min(100%, 640px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 1.8em auto !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  line-height: normal !important;
}

:is(.article-body, .article-preview) figure.fileblock > a,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock > a {
  position: relative !important;
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 82px !important;
  height: auto !important;
  align-items: center !important;
  grid-template-columns: 50px minmax(0, 1fr) 42px !important;
  gap: 15px !important;
  margin: 0 !important;
  padding: 14px 15px !important;
  overflow: hidden !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  outline: none !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .09), transparent 42%),
    var(--surface-solid) !important;
  box-shadow: 0 12px 34px rgba(10, 14, 24, .08) !important;
  color: var(--text) !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition) !important;
}

html[data-theme="dark"] :is(.article-body, .article-preview) figure.fileblock > a,
html[data-theme="dark"] #tt-body-page :is(.article-body, .article-preview) figure.fileblock > a {
  box-shadow: 0 14px 38px rgba(0, 0, 0, .24) !important;
}

:is(.article-body, .article-preview) figure.fileblock > a:hover,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock > a:hover {
  border-color: rgba(var(--accent-rgb), .42) !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), .14), transparent 46%),
    var(--surface-solid) !important;
  box-shadow: 0 18px 44px rgba(10, 14, 24, .13) !important;
  transform: translateY(-2px);
}

:is(.article-body, .article-preview) figure.fileblock > a:focus-visible,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock > a:focus-visible {
  border-color: rgba(var(--accent-rgb), .62) !important;
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14), 0 18px 44px rgba(10, 14, 24, .13) !important;
}

:is(.article-body, .article-preview) figure.fileblock .image,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .image {
  position: relative !important;
  display: grid !important;
  width: 50px !important;
  min-width: 50px !important;
  height: 50px !important;
  min-height: 50px !important;
  float: none !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--accent-rgb), .18) !important;
  border-radius: 15px !important;
  background: rgba(var(--accent-rgb), .11) !important;
  background-image: none !important;
  color: var(--accent) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

:is(.article-body, .article-preview) figure.fileblock .image::before,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .image::before {
  display: block;
  width: 25px;
  height: 25px;
  background: currentColor;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Zm0 0v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Zm0 0v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

:is(.article-body, .article-preview) figure.fileblock .desc,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .desc {
  position: static !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  float: none !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 5px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
  text-align: left !important;
}

:is(.article-body, .article-preview) figure.fileblock .filename,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .filename {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--text) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;
  letter-spacing: -.015em !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(.article-body, .article-preview) figure.fileblock .filename .name,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .filename .name {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: inherit !important;
  font: inherit !important;
  line-height: inherit !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(.article-body, .article-preview) figure.fileblock .filename .name[data-skin-filename-split="true"],
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .filename .name[data-skin-filename-split="true"] {
  display: flex !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

:is(.article-body, .article-preview) figure.fileblock .skin-file-name__base,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .skin-file-name__base {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

:is(.article-body, .article-preview) figure.fileblock .skin-file-name__extension,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .skin-file-name__extension {
  display: block !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

:is(.article-body, .article-preview) figure.fileblock .size,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock .size {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 3px 7px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--surface-muted) !important;
  color: var(--text-faint) !important;
  font-size: .66rem !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

/* Replace Tistory's fixed sprite download icon with a theme-aware control. */
:is(.article-body, .article-preview) figure.fileblock > a::after,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock > a::after {
  position: static !important;
  display: grid !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 2px !important;
  border: 1px solid var(--line) !important;
  border-radius: 13px !important;
  background: var(--surface-muted) !important;
  background-image: none !important;
  color: var(--text-soft) !important;
  content: "↓" !important;
  font-family: Arial, sans-serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  opacity: 1 !important;
  transform: none !important;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition) !important;
}

:is(.article-body, .article-preview) figure.fileblock > a:hover::after,
#tt-body-page :is(.article-body, .article-preview) figure.fileblock > a:hover::after {
  border-color: transparent !important;
  background: var(--accent) !important;
  color: #fff !important;
  transform: translateY(1px) !important;
}

@media (max-width: 520px) {
  :is(.article-body, .article-preview) figure.fileblock,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock {
    width: 100% !important;
    margin: 1.45em 0 !important;
  }

  :is(.article-body, .article-preview) figure.fileblock > a,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock > a {
    min-height: 70px !important;
    grid-template-columns: 42px minmax(0, 1fr) 36px !important;
    gap: 10px !important;
    padding: 11px !important;
    border-radius: 15px !important;
  }

  :is(.article-body, .article-preview) figure.fileblock .image,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock .image {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  :is(.article-body, .article-preview) figure.fileblock .image::before,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock .image::before {
    width: 21px;
    height: 21px;
  }

  :is(.article-body, .article-preview) figure.fileblock .filename,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock .filename {
    font-size: .79rem !important;
  }

  :is(.article-body, .article-preview) figure.fileblock .size,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock .size {
    padding: 2px 6px !important;
    font-size: .61rem !important;
  }

  :is(.article-body, .article-preview) figure.fileblock > a::after,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock > a::after {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: 11px !important;
    font-size: 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(.article-body, .article-preview) figure.fileblock > a,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock > a,
  :is(.article-body, .article-preview) figure.fileblock > a::after,
  #tt-body-page :is(.article-body, .article-preview) figure.fileblock > a::after {
    transition-duration: 1ms !important;
  }
}


/* 1.6.12 — keep comment composer avatar stable after Tistory refreshes the comment form */
.comment-composer__avatar img[data-managed-avatar] {
  display: block !important;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.comment-composer__avatar img:not([data-managed-avatar]) {
  display: none !important;
}
.comment-composer__avatar.has-image::before,
.comment-composer__avatar.has-image::after {
  display: none !important;
  content: none !important;
}
.comment-composer__avatar.is-empty {
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .9) 0 7px, transparent 8px),
    radial-gradient(ellipse at 50% 76%, rgba(255, 255, 255, .82) 0 13px, transparent 14px),
    linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08)),
    var(--surface-muted) !important;
}

/* 1.6.15 — dismissible, periodic anti-adblock notice */
.anti-adblock-countdown[hidden],
.anti-adblock-backdrop[hidden] {
  display: none !important;
}

.anti-adblock-countdown {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 10000;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface-solid);
  box-shadow: var(--shadow-md);
  color: var(--text-soft);
  font-size: .76rem;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--transition), transform var(--transition);
}

.anti-adblock-countdown.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.anti-adblock-countdown span {
  color: var(--accent);
  font-weight: 800;
}

.anti-adblock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(7, 10, 17, .68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--transition);
}

.anti-adblock-backdrop.is-visible {
  opacity: 1;
}

.anti-adblock-dialog {
  position: relative;
  width: min(100%, 620px);
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 25px;
  outline: none;
  background:
    radial-gradient(circle at 0 0, rgba(var(--accent-rgb), .14), transparent 22rem),
    var(--surface-solid);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .34);
  color: var(--text);
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition: opacity var(--transition), transform var(--transition);
}

.anti-adblock-backdrop.is-visible .anti-adblock-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.anti-adblock-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0 0 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition);
}

.anti-adblock-dialog__close:hover {
  border-color: rgba(var(--accent-rgb), .35);
  background: rgba(var(--accent-rgb), .1);
  color: var(--accent);
  transform: rotate(4deg);
}

.anti-adblock-dialog__icon {
  display: grid;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 17px;
  background: rgba(var(--accent-rgb), .11);
  color: var(--accent);
  font-size: 22px;
}

.anti-adblock-dialog h2 {
  max-width: 500px;
  margin: 9px 46px 20px 0;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  line-height: 1.35;
  letter-spacing: -.045em;
}

.anti-adblock-dialog__content {
  color: var(--text-soft);
  font-size: .9rem;
  line-height: 1.8;
}

.anti-adblock-dialog__content p {
  margin: 0;
}

.anti-adblock-dialog__content p + p {
  margin-top: 15px;
}

.anti-adblock-dialog__content strong {
  color: var(--text);
  font-weight: 760;
}

.anti-adblock-dialog__continue {
  width: 100%;
  min-height: 48px;
  margin-top: 25px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  box-shadow: 0 12px 28px rgba(var(--accent-rgb), .24);
  color: #fff;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 760;
  transition: box-shadow var(--transition), filter var(--transition), transform var(--transition);
}

.anti-adblock-dialog__continue:hover {
  box-shadow: 0 16px 34px rgba(var(--accent-rgb), .32);
  filter: brightness(1.04);
  transform: translateY(-1px);
}

@media (max-width: 560px) {
  .anti-adblock-backdrop {
    align-items: end;
    padding: 12px;
  }

  .anti-adblock-dialog {
    max-height: calc(100vh - 24px);
    padding: 27px 20px 22px;
    border-radius: 22px;
  }

  .anti-adblock-dialog__close {
    top: 13px;
    right: 13px;
  }

  .anti-adblock-dialog__icon {
    width: 48px;
    height: 48px;
    margin-bottom: 17px;
    border-radius: 15px;
  }

  .anti-adblock-dialog h2 {
    margin-right: 38px;
    font-size: 1.32rem;
  }

  .anti-adblock-dialog__content {
    font-size: .82rem;
    line-height: 1.72;
  }
}

@media (prefers-reduced-motion: reduce) {
  .anti-adblock-countdown,
  .anti-adblock-backdrop,
  .anti-adblock-dialog,
  .anti-adblock-dialog__close,
  .anti-adblock-dialog__continue {
    transition-duration: 1ms !important;
  }
}