:root {
  --n-50:  #09090b;  --n-100: #18181b;  --n-200: #27272a;  --n-300: #3f3f46;
  --n-400: #52525b;  --n-500: #71717a;  --n-600: #a1a1aa;  --n-700: #d4d4d8;
  --n-800: #e4e4e7;  --n-900: #f4f4f5;  --n-950: #fafafa;

  --bg:            var(--n-50);
  --fg:            var(--n-950);
  --gap-read:      120px;
  --fg-subtle:     var(--n-600);
  --fg-subtler:    var(--n-500);
  --line:          var(--n-200);
  --overlay:       rgba(9, 11, 11, .5);
  --shine:         rgba(255, 255, 255, .898);

  --f-base: .9375rem;
  --f-md:   calc(var(--f-base) * 1.2);
  --f-lg:   calc(var(--f-md)   * 1.2);
  --f-xlg:  calc(var(--f-lg)   * 1.2);
  --f-sm:   calc(var(--f-base) / 1.125);
  --f-xsm:  calc(var(--f-sm)   / 1.125);
  --f-2xsm: calc(var(--f-xsm)  / 1.125);

  --font-fallback: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                   'Malgun Gothic', system-ui, sans-serif;
  --font-sans: 'Pretendard Variable', 'Pretendard', var(--font-fallback);
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --blank-bg: var(--n-100);
  --flow: var(--n-400);  --flow-rgb: 82 82 91;
  --shade: var(--n-50);  --shade-rgb: 9 9 11;
  --glass-sheen: rgba(255, 255, 255, .14);

  --skel-a: var(--n-100);
  --skel-b: var(--n-200);

  --t: .2s ease;

  color-scheme: dark;
}

[data-theme='light'] {
  --bg:         var(--n-950);
  --fg:         var(--n-50);
  --fg-subtle:  var(--n-400);
  --fg-subtler: var(--n-500);
  --line:       var(--n-800);
  --overlay:    rgba(250, 250, 250, .5);
  --shine:      rgba(9, 9, 11, .898);
  --blank-bg:   var(--n-900);
  --flow:       var(--n-950); --flow-rgb: 250 250 250;
  --shade:      var(--n-800); --shade-rgb: 228 228 231;
  --glass-sheen: rgba(255, 255, 255, .55);
  --skel-a:     var(--n-900);
  --skel-b:     var(--n-800);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg:         var(--n-950);
    --fg:         var(--n-50);
    --fg-subtle:  var(--n-400);
    --fg-subtler: var(--n-500);
    --line:       var(--n-800);
    --overlay:    rgba(250, 250, 250, .5);
    --shine:      rgba(9, 9, 11, .898);
    --blank-bg:   var(--n-900);
    --flow:       var(--n-950); --flow-rgb: 250 250 250;
    --shade:      var(--n-800); --shade-rgb: 228 228 231;
    --glass-sheen: rgba(255, 255, 255, .55);
    --skel-a:     var(--n-900);
    --skel-b:     var(--n-800);
    color-scheme: light;
  }
}

[data-font='ibmplex'] { --font-sans: 'IBM Plex Sans KR', var(--font-fallback); }
[data-font='hahmlet'] { --font-sans: 'Hahmlet', Georgia, serif; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--f-base);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.wrap { width: 90%; max-width: var(--page-w, 620px); margin: 0 auto; }

.pattern {
  position: absolute; top: -1px; left: -1px; z-index: -1;
  width: 100%; height: 400px;
  background-color: var(--bg);
  opacity: .6;
  mask-image: radial-gradient(circle at left top, #000, transparent 400px);
  -webkit-mask-image: radial-gradient(circle at left top, #000, transparent 400px);
  pointer-events: none;

  transition: background-color 180ms ease-in 50ms;
}

.head { padding: 160px 0 56px; }

.head h1 { margin: 0 0 12px; font-size: var(--f-base); font-weight: 500; }

.head p { margin: 0; font-size: var(--f-base); color: var(--fg-subtle); }

:root      { --fg-shine: rgba(161, 161, 170, .643); }
[data-theme='light'] { --fg-shine: rgba(82, 82, 91, .643); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) { --fg-shine: rgba(82, 82, 91, .643); }
}

.shine {
  display: inline-block;
  color: var(--fg-shine);
  background: linear-gradient(120deg,
              transparent 40%, var(--shine), transparent 60%) 0 0 / 200% 100% text;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shine 5s linear infinite;
}
.shine--title { color: var(--n-700); }
[data-theme='light'] .shine--title { color: var(--n-300); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .shine--title { color: var(--n-300); }
}
@keyframes shine {
  0%   { background-position:  100% center; }
  100% { background-position: -100% center; }
}
@media (prefers-reduced-motion: reduce) {
  .shine { animation: none; }
  html   { scroll-behavior: auto; }
}

.acts { display: flex; align-items: baseline; gap: 16px; margin-top: 32px; }
.act {
  font: inherit; font-size: var(--f-sm);
  color: var(--fg-subtle);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--t);
}
.act:hover { color: var(--fg); }
.act:focus-visible,
.search-i:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.moon {
  flex: none;
  width: .75em; height: .75em;
  font-size: var(--f-sm);
  padding: 0; border: 0;
  background: var(--fg-subtle);
  cursor: pointer;
  transition: background .4s ease;
}
.moon:hover { background: var(--fg); }
.moon:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.cat-page { display: none; padding: var(--gap-read) 0 96px; }
:root[data-route='category'] .cat-page { display: block; }

:root[data-route='category'] .posts,
:root[data-route='category'] .sentinel,
:root[data-route='category'] .more { display: none; }

.cat-head,
.tag-head {
  margin: 0 0 32px;
  font-size: var(--f-base); font-weight: 500;
  color: var(--fg-subtler);
}

.cat-page .tt_category,
.cat-page .category_list,
.cat-page .sub_category_list { margin: 0; padding: 0; list-style: none; }

.cat-page .tt_category a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0;
  color: var(--fg-subtle);
  transition: color var(--t);
}
.cat-page .tt_category a:hover { color: var(--fg); }

.cat-page .c_cnt {
  order: 1; margin-left: auto;
  font-family: var(--font-mono); font-size: var(--f-xsm);
  color: var(--fg-subtler);
}

img[src*='new_ico'] { display: none; }

.cat-page .tt_category a:has(img[src*='new_ico'])::after,
.list-t:has(img[src*='new_ico'])::after {
  content: ''; display: inline-block;
  width: .75em; height: .75em; font-size: var(--f-sm);
  background: var(--fg-subtle);
  animation: breathe 4s ease infinite;
}
.list-t:has(img[src*='new_ico'])::after { margin-left: 8px; }

@keyframes breathe {
  from { box-shadow: 0 0 0 0 var(--bg), 0 0 0 1px var(--fg-subtle); }
  to   { box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px transparent; }
}

.cat-page .tt_category a.link_tit { color: var(--fg); border-bottom: 1px solid var(--line); }

.cat-page .sub_category_list { display: flex; flex-wrap: wrap; column-gap: 20px; padding-left: 20px; }
.cat-page .category_list .sub_category_list a { padding: 6px 0; gap: 6px; color: var(--fg-subtler); }

.tag-page { display: none; padding: var(--gap-read) 0 96px; }
:root[data-route='tag'] .tag-page { display: block; }

:root[data-route='tag'] .posts,
:root[data-route='tag'] .sentinel,
:root[data-route='tag'] .more { display: none; }

.tag-items {
  display: flex; flex-wrap: wrap; column-gap: 20px;
  margin: 0; padding: 0; list-style: none;
}

.tag-i a {
  display: block;
  padding: 10px 0;
  color: var(--fg-subtle);
  transition: color var(--t);
}
.tag-i a:hover { color: var(--fg); }

.search {
  width: 56px; overflow: hidden;
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
}
.search:hover, .search:focus-within { width: 230px; }
.search-i {
  width: 230px;
  font: inherit; font-size: var(--f-sm);
  color: var(--fg);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 2px 0; margin: 0;
  transition: border-color var(--t);
  -webkit-appearance: none; appearance: none;
}
.search-i::placeholder { color: var(--fg-subtle); opacity: 1; }
.search-i::-webkit-search-cancel-button { -webkit-appearance: none; }
.search:hover .search-i, .search-i:focus { border-color: var(--fg-subtler); }

@media (prefers-reduced-motion: reduce) {
  .search, .sw .slider, .sw .slider::before { transition: none; }
}

.posts {
  display: grid;

  --card: calc((var(--page-w, 620px) - 48px) / 3 - 1px);
  grid-template-columns: repeat(auto-fill, minmax(min(var(--card), 45%), 1fr));
  gap: 28px 24px;
}
.posts:has(.post) { padding: var(--gap-read) 0 96px; }
#notices:has(.post) + #posts { padding-top: 0; }

.solo { grid-column: 1 / -1; }
.solo .wrap { width: 100%; }

.post .thumb { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; }

.post .thumb .blank,
.post .thumb img,
.post .thumb .thumb-default {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 1px solid var(--line);
}
.post .thumb img { object-fit: cover; }

.post .thumb .thumb-default[src^='[##_'] { display: none; }

.post .thumb .blank {
  overflow: hidden;
  background-color: var(--blank-bg);
  background-image: radial-gradient(58% 40% at 12% 92%,
    rgb(var(--flow-rgb) / .34) 0%,
    rgb(var(--flow-rgb) / .18) 34%,
    rgb(var(--flow-rgb) / .07) 58%,
    transparent 78%);
}
.post:not(.post--skel) .thumb .blank::before {
  content: '';
  position: absolute; inset: -30%;
  background:
    radial-gradient(58% 62% at 78% 66%, var(--shade) 0%, var(--shade) 26%,
      rgb(var(--shade-rgb) / .72) 44%, rgb(var(--shade-rgb) / .30) 62%, transparent 82%),
    radial-gradient(80% 42% at 22% 106%, var(--shade) 0%, var(--shade) 22%,
      rgb(var(--shade-rgb) / .62) 42%, transparent 74%),
    radial-gradient(76% 48% at 36% 28%, var(--flow) 0%,
      rgb(var(--flow-rgb) / .78) 20%,
      rgb(var(--flow-rgb) / .46) 34%,
      rgb(var(--flow-rgb) / .18) 50%,
      transparent 72%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .34 .34 .34 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.45' intercept='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .34 .34 .34 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.45' intercept='.55'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23w)'/%3E%3C/svg%3E");
  animation: aurora-sway 8.8s ease-in-out infinite;
}
.post:not(.post--skel) .thumb .blank::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .62;
}
@keyframes aurora-sway {
  0%   { transform: translate3d(-9%, 5%, 0) rotate(-7deg) scale(1.16); }
  50%  { transform: translate3d(7%, -6%, 0) rotate(8deg) scale(1.26); }
  100% { transform: translate3d(-9%, 5%, 0) rotate(-7deg) scale(1.16); }
}

.body .container_postbtn { display: none; }

.body .another_category {
  margin: 64px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.body .another_category h4 {
  margin: 0 0 24px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: var(--font-sans) !important; font-size: var(--f-xsm) !important; font-weight: 400 !important;
  color: var(--fg-subtler) !important;
}
.body .another_category h4 a { font-weight: 400 !important; color: var(--fg-subtle) !important; }
.body .another_category table { margin: 0 !important; }
.body .another_category th,
.body .another_category td {
  padding: 10px 0 !important;
  border-top: 1px solid var(--line) !important;
  vertical-align: baseline !important;
}
.body .another_category th {
  font-family: var(--font-sans) !important; font-size: var(--f-xsm) !important; font-weight: 400 !important;
  word-break: keep-all !important;
}
.body .another_category th a { color: var(--fg-subtle) !important; transition: color var(--t); }
.body .another_category th a:hover { color: var(--fg) !important; }
.body .another_category th a.current { color: var(--fg) !important; border-bottom: 1px solid var(--line) !important; }
.body .another_category th span { display: none !important; }
.body .another_category td {
  width: 96px !important;
  font-family: var(--font-mono) !important; font-size: var(--f-xsm) !important;
  color: var(--fg-subtler) !important;
}

.post .thumb .a11y {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%);
}
.post .thumb .over {
  position: absolute; inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--t);
}
.post .thumb .over::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left top, var(--glass-sheen) 0%, transparent 50%);
}
.post .thumb:hover .over {
  opacity: 1;
  outline: 1px solid var(--line); outline-offset: -1px;
}

.post { animation: reveal .4s ease both; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.post:nth-child(2)    { animation-delay: .05s; }
.post:nth-child(3)    { animation-delay: .10s; }
.post:nth-child(4)    { animation-delay: .15s; }
.post:nth-child(n+5)  { animation-delay: .20s; }
@media (prefers-reduced-motion: reduce) { .post { animation: none; } }

.post .meta {
  display: flex; column-gap: 8px; align-items: center; justify-content: flex-end;
  margin-top: 12px;
  font-family: var(--font-mono); font-size: var(--f-2xsm);
  color: var(--fg-subtle);
  transition: color var(--t);
}
.post:hover .meta { color: var(--fg); }

.meta-t {
  min-width: 0;
  font-family: var(--font-sans); font-size: var(--f-xsm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

:root[data-gray='on'] .post .thumb img { filter: grayscale(1); transition: filter var(--t); }
:root[data-gray='on'] .post .thumb:hover img { filter: grayscale(0); }

.post--skel { pointer-events: none; }
.post--skel .thumb .blank,
.post--skel .meta::after {
  background: linear-gradient(90deg, var(--skel-a) 25%, var(--skel-b) 50%, var(--skel-a) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.post--skel .meta::after {
  content: ''; display: block;
  width: 68px; height: 1em;
}
@keyframes shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cat-page .tt_category a:has(img[src*='new_ico'])::after,
  .list-t:has(img[src*='new_ico'])::after,
  .post--skel .thumb .blank,
  .post--skel .meta::after,
  .post .thumb .blank::before { animation: none; }
  :where(:root[data-theme-anim='on']) :where(*) { transition: none; }
  .pattern { transition: none; }
}

.paging { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.sentinel { height: 1px; }

.more {
  padding: 24px 0 96px;
  font-family: var(--font-mono); font-size: var(--f-xsm);
  color: var(--fg-subtler);
  text-align: center;
}

.empty {
  margin: 0;
  padding: var(--gap-read) 0 96px;
  font-size: var(--f-sm);
  color: var(--fg-subtler);
  text-align: center;
}

.list { padding: var(--gap-read) 0 96px; }

:root[data-route] .list { display: none; }

:root[data-route='list'] .list-head { margin-top: var(--gap-read); }
:root[data-route='list'] .posts:has(.post) { padding-top: 0; }

:root[data-route='list'] .sentinel,
:root[data-route='list'] .more { display: none; }

:root[data-route='list'] .paging {
  position: static; width: auto; height: auto; overflow: visible; clip-path: none;
  display: flex; justify-content: center; gap: 16px;
  padding: 0 0 96px;
  font-family: var(--font-mono); font-size: var(--f-xsm);
}
:root[data-route='list'] .paging a {
  color: var(--fg-subtler);
  transition: color var(--t);
}
:root[data-route='list'] .paging a:hover { color: var(--fg); }
:root[data-route='list'] .paging a:not([href]) { display: none; }
:root[data-route='list'] .paging .selected { color: var(--fg); }
:root[data-route='list'] .paging[data-no-prev='no-more-prev'][data-no-next='no-more-next'] { display: none; }

.list-head {
  margin: 0 auto 32px;
  font-size: var(--f-base); font-weight: 500;
  word-break: keep-all;
}

.list-items { margin: 0; padding: 0; list-style: none; }

.list-i + .list-i { border-top: 1px solid var(--line); }

.list-i a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0;
  color: var(--fg-subtle);
  transition: color var(--t);
}
.list-i a:hover { color: var(--fg); }

.list-t { flex: 1; word-break: keep-all; overflow-wrap: break-word; }

.list-d {
  flex: none;
  font-family: var(--font-mono); font-size: var(--f-xsm);
  color: var(--fg-subtler);
}

.prot { padding: var(--gap-read) 0 120px; }
.prot h2 { margin: 0 0 12px; font-size: var(--f-md); font-weight: 500; word-break: keep-all; }
.prot-say { margin: 0 0 32px; color: var(--fg-subtle); word-break: keep-all; }
.prot-i {
  width: 200px;
  font: inherit; font-size: var(--f-sm);
  color: var(--fg);
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 2px 0;
  transition: border-color var(--t);
}
.prot-i::placeholder { color: var(--fg-subtle); opacity: 1; }
.prot-i:focus { outline: none; border-color: var(--fg-subtler); }

.entry       { padding: var(--gap-read) 0 96px; }

.entry h2 {
  margin: 0 0 12px;
  font-size: var(--f-md); font-weight: 500;
  line-height: 1.35;
  word-break: keep-all; overflow-wrap: break-word;
}

.entry .date { margin: 0 0 12px; font-family: var(--font-mono); font-size: var(--f-xsm);
               color: var(--fg-subtle); }

.entry-acts {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px;
  margin: 0 0 56px;
}
.entry-acts:empty { margin-bottom: 44px; }
.entry-act {
  flex: none;
  width: .75em; height: .75em;
  font-size: var(--f-sm);
  padding: 0; border: 0;
  background: var(--fg);
  cursor: pointer;
  transition: opacity .4s ease;
}
.entry-act--share  { opacity: .2; }
.entry-act--edit   { opacity: .5; }
.entry-act--delete { opacity: .8; }
.entry-act:hover { opacity: 1; }
.entry-act:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }

.foot { padding: 0 0 64px; }
.copy {
  display: flex; flex-direction: row-reverse; justify-content: flex-start; align-items: center;
  gap: 10px;
  margin: 0;
}
.copy-b {
  flex: none;
  width: .75em; height: .75em;
  font-size: var(--f-sm);
  background: var(--fg-subtle);
  transition: background .4s ease;
}
.copy-t {
  font-family: var(--font-mono); font-size: var(--f-2xsm);
  letter-spacing: .08em; color: var(--fg-subtler);
  opacity: 0;
  transition: opacity var(--t);
}
.copy-b:hover { background: var(--fg); }
.copy-b:hover + .copy-t { opacity: 1; }

.toast {
  position: fixed; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  margin: 0;
  font-family: var(--font-mono); font-size: var(--f-2xsm);
  letter-spacing: .08em; color: var(--fg-subtle);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t);
}
.toast[data-on='1'] { opacity: 1; }

.entry .body {
  font-size: var(--f-base);
  line-height: 1.8;
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.entry .body > p { margin: 0 0 1.6em; }
.entry .body > p:last-child { margin-bottom: 0; }

.entry .body img,
.entry .body figure { max-width: 100%; height: auto; margin: 2em auto; display: block; }
.entry .body figcaption { margin-top: .8em; font-family: var(--font-mono);
                          font-size: var(--f-xsm); color: var(--fg-subtle); text-align: center; }
.entry .body blockquote { margin: 2em 0; padding-left: 1.2em;
                          border-left: 1px solid var(--line); color: var(--fg-subtle); }
.entry .body a { border-bottom: 1px solid var(--line); }

.entry-cat { display: none; }

:where(:root[data-theme-anim='on']) :where(*) {
  transition: background-color var(--t), color var(--t), border-color var(--t);
}

.near {

  display: flex; gap: 24px;
  padding-bottom: 96px;
  border-top: 1px solid var(--line);
}
.near-a {
  display: flex; align-items: baseline; gap: 10px;
  min-width: 0; max-width: 50%;
  padding: 14px 0;
  font-size: var(--f-sm); color: var(--fg-subtle);
  transition: color var(--t);
}
.near-a:hover { color: var(--fg); }

.near-next { margin-left: auto; text-align: right; }
.near-arrow { flex: none; font-family: var(--font-mono); color: var(--fg-subtler); }

.near-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  font-family: var(--font-mono); font-size: var(--f-2xsm);
  letter-spacing: .08em; color: var(--fg-subtler);
}