/*
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/

html {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
  tab-size: 4;
  /* 3 */
  font-family: Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

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

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: D2Coding, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder,
textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
  display: none;
}

*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
}

.visible {
  visibility: visible;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.bottom-3 {
  bottom: 0.75rem;
}

.top-0 {
  top: 0px;
}

.left-0 {
  left: 0px;
}

.-left-\[calc\(theme\(width\.s\)\)\] {
  left: calc(calc(16rem) * -1);
}

.right-0 {
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.top-\[calc\(100\%\+theme\(spacing\.6\)\)\] {
  top: calc(100% + 1.5rem);
}

.left-\[calc\(100\%\/2\)\] {
  left: calc(100% / 2);
}

.top-\[calc\(theme\(spacing\.14\)\+theme\(spacing\.1\)\)\] {
  top: calc(3.5rem + 0.25rem);
}

.right-2 {
  right: 0.5rem;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-2 {
  top: 0.5rem;
}

.-top-\[1px\] {
  top: -1px;
}

.top-4 {
  top: 1rem;
}

.left-1\/2 {
  left: 50%;
}

.top-1 {
  top: 0.25rem;
}

.left-5 {
  left: 1.25rem;
}

.top-20 {
  top: 5rem;
}

.right-4 {
  right: 1rem;
}

.z-30 {
  z-index: 30;
}

.z-50 {
  z-index: 50;
}

.z-40 {
  z-index: 40;
}

.z-20 {
  z-index: 20;
}

.z-10 {
  z-index: 10;
}

.z-\[5\] {
  z-index: 5;
}

.-z-\[1\] {
  z-index: -1;
}

.m-0 {
  margin: 0px;
}

.my-14 {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-7 {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
}

.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mb-\[30px\] {
  margin-bottom: 30px;
}

.mt-3 {
  margin-top: 0.75rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mt-0 {
  margin-top: 0px;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mr-1\.5 {
  margin-right: 0.375rem;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.ml-8 {
  margin-left: 2rem;
}

.box-border {
  box-sizing: border-box;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[4\/2\] {
  aspect-ratio: 4/2;
}

.h-10 {
  height: 2.5rem;
}

.h-screen {
  height: 100vh;
}

.h-14 {
  height: 3.5rem;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-0 {
  height: 0px;
}

.h-full {
  height: 100%;
}

.h-9 {
  height: 2.25rem;
}

.h-5 {
  height: 1.25rem;
}

.h-20 {
  height: 5rem;
}

.h-\[130px\] {
  height: 130px;
}

.h-12 {
  height: 3rem;
}

.h-11 {
  height: 2.75rem;
}

.h-6 {
  height: 1.5rem;
}

.h-28 {
  height: 7rem;
}

.h-auto {
  height: auto;
}

.h-8 {
  height: 2rem;
}

.max-h-full {
  max-height: 100%;
}

.max-h-\[calc\(100vh-theme\(spacing\.20\)-theme\(spacing\.10\)-theme\(spacing\.3\)-2rem\)\] {
  max-height: calc(100vh - 5rem - 2.5rem - 0.75rem - 2rem);
}

.max-h-\[inherit\] {
  max-height: inherit;
}

.min-h-0 {
  min-height: 0px;
}

.w-full {
  width: 100%;
}

.w-10 {
  width: 2.5rem;
}

.w-screen {
  width: 100vw;
}

.w-14 {
  width: 3.5rem;
}

.w-0 {
  width: 0px;
}

.w-s {
  width: 16rem;
}

.w-\[calc\(theme\(width\.s\)\+theme\(spacing\.8\)\)\] {
  width: calc(16rem + 2rem);
}

.w-\[calc\(theme\(width\.s\)-theme\(spacing\.6\)\)\] {
  width: calc(16rem - 1.5rem);
}

.w-9 {
  width: 2.25rem;
}

.w-20 {
  width: 5rem;
}

.w-0\.5 {
  width: 0.125rem;
}

.w-16 {
  width: 4rem;
}

.w-48 {
  width: 12rem;
}

.w-12 {
  width: 3rem;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.w-auto {
  width: auto;
}

.w-8 {
  width: 2rem;
}

.w-56 {
  width: 14rem;
}

.w-\[calc\(theme\(spacing\.56\)\+theme\(spacing\.5\)\)\] {
  width: calc(14rem + 1.25rem);
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[1\.5rem\] {
  min-width: 1.5rem;
}

.max-w-\[calc\(80vw-152px\)\] {
  max-width: calc(80vw - 152px);
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@keyframes loading {

  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.animate-loading {
  animation: loading 1s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

.flex-wrap {
  flex-wrap: wrap;
}

.place-items-center {
  place-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-stretch {
  align-items: stretch;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-\[22px\] {
  gap: 22px;
}

.gap-\[6px\] {
  gap: 6px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
  column-gap: 0.75rem;
}

.gap-y-4 {
  row-gap: 1rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}

.gap-x-1 {
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
}

.gap-y-10 {
  row-gap: 2.5rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.gap-y-24 {
  row-gap: 6rem;
}

.gap-y-0 {
  row-gap: 0px;
}

.gap-y-3 {
  row-gap: 0.75rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
  column-gap: 1rem;
}

.gap-x-3\.5 {
  -moz-column-gap: 0.875rem;
  column-gap: 0.875rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
  column-gap: 1.25rem;
}

.self-start {
  align-self: flex-start;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-normal {
  white-space: normal;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-\[4px_16px_16px_16px\] {
  border-radius: 4px 16px 16px 16px;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-l-xl {
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-0 {
  border-width: 0px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-r-0 {
  border-right-width: 0px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-dotted {
  border-style: dotted;
}

.border-none {
  border-style: none;
}

.border-h-300 {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 233 / var(--tw-border-opacity));
}

.border-h-500\/20 {
  border-color: rgb(102 102 110 / 0.2);
}

.border-white\/60 {
  border-color: rgb(255 255 255 / 0.6);
}

.border-\[\#EFE9DD\] {
  --tw-border-opacity: 1;
  border-color: rgb(239 233 221 / var(--tw-border-opacity));
}

.border-\[\#E4ECF6\] {
  --tw-border-opacity: 1;
  border-color: rgb(228 236 246 / var(--tw-border-opacity));
}

.border-h-400 {
  --tw-border-opacity: 1;
  border-color: rgb(153 153 161 / var(--tw-border-opacity));
}

.border-\[\#cfe4f1\] {
  --tw-border-opacity: 1;
  border-color: rgb(207 228 241 / var(--tw-border-opacity));
}

.border-\[\#63bae4\] {
  --tw-border-opacity: 1;
  border-color: rgb(99 186 228 / var(--tw-border-opacity));
}

.border-l-h-500 {
  --tw-border-opacity: 1;
  border-left-color: rgb(102 102 110 / var(--tw-border-opacity));
}

.border-b-h-200 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(244 244 246 / var(--tw-border-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-h-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-h-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}

.bg-h-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 31 33 / var(--tw-bg-opacity));
}

.bg-h-900\/50 {
  background-color: rgb(0 0 0 / 0.5);
}

.bg-h-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.bg-h-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.bg-\[\#FBFAF7\]\/\[\.88\] {
  background-color: rgb(251 250 247 / .88);
}

.bg-\[\#3E97E0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(62 151 224 / var(--tw-bg-opacity));
}

.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}

.bg-transparent {
  background-color: transparent;
}

.bg-h-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(93 176 215 / var(--tw-bg-opacity));
}

.bg-\[\#63BAE4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 186 228 / var(--tw-bg-opacity));
}

.bg-\[\#eaf4fb\] {
  --tw-bg-opacity: 1;
  background-color: rgb(234 244 251 / var(--tw-bg-opacity));
}

.bg-\[\#63bae4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(99 186 228 / var(--tw-bg-opacity));
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-0 {
  padding: 0px;
}

.p-6 {
  padding: 1.5rem;
}

.p-10 {
  padding: 2.5rem;
}

.p-5 {
  padding: 1.25rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-\[17px\] {
  padding-left: 17px;
  padding-right: 17px;
}

.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.py-\[18px\] {
  padding-top: 18px;
  padding-bottom: 18px;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pl-0 {
  padding-left: 0px;
}

.pb-14 {
  padding-bottom: 3.5rem;
}

.pt-14 {
  padding-top: 3.5rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pt-\[30px\] {
  padding-top: 30px;
}

.pt-\[10px\] {
  padding-top: 10px;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-7 {
  padding-right: 1.75rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-1\.5 {
  padding-right: 0.375rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pl-12 {
  padding-left: 3rem;
}

.pr-4 {
  padding-right: 1rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pr-0 {
  padding-right: 0px;
}

.pl-8 {
  padding-left: 2rem;
}

.pl-5 {
  padding-left: 1.25rem;
}

.pl-14 {
  padding-left: 3.5rem;
}

.pr-6 {
  padding-right: 1.5rem;
}

.pt-9 {
  padding-top: 2.25rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.font-sidebar {
  font-family: Pretendard Variable, Pretendard, Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-\[\'Jua\'\] {
  font-family: 'Jua';
}

.font-mono {
  font-family: D2Coding, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-pretendard {
  font-family: Pretendard Variable, Pretendard, Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.font-sans {
  font-family: Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-\[13\.5px\] {
  font-size: 13.5px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[0\.8125rem\] {
  font-size: 0.8125rem;
}

.text-\[0\] {
  font-size: 0;
}

.font-bold {
  font-weight: 700;
}

.font-semibold {
  font-weight: 600;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-loose {
  line-height: 2;
}

.leading-normal {
  line-height: 1.5;
}

.leading-none {
  line-height: 1;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-\[\.16em\] {
  letter-spacing: .16em;
}

.tracking-\[0\.15em\] {
  letter-spacing: 0.15em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-h-900 {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-h-500 {
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.text-h-800 {
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
}

.text-h-600 {
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.text-h-blue {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

.text-h-400 {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.text-h-200 {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-\[\#26323D\] {
  --tw-text-opacity: 1;
  color: rgb(38 50 61 / var(--tw-text-opacity));
}

.text-\[\#3E97E0\] {
  --tw-text-opacity: 1;
  color: rgb(62 151 224 / var(--tw-text-opacity));
}

.text-\[\#6B7986\] {
  --tw-text-opacity: 1;
  color: rgb(107 121 134 / var(--tw-text-opacity));
}

.text-h-700 {
  --tw-text-opacity: 1;
  color: rgb(41 42 45 / var(--tw-text-opacity));
}

.text-h-orange {
  --tw-text-opacity: 1;
  color: rgb(255 85 68 / var(--tw-text-opacity));
}

.text-\[\#2c82b8\] {
  --tw-text-opacity: 1;
  color: rgb(44 130 184 / var(--tw-text-opacity));
}

.text-\[\#63bae4\] {
  --tw-text-opacity: 1;
  color: rgb(99 186 228 / var(--tw-text-opacity));
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.65\)\2c 0_3px_8px_-3px_rgba\(93\2c 176\2c 215\2c 0\.4\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 3px 8px -3px rgba(93, 176, 215, 0.4);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 3px 8px -3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.7\)\2c 0_4px_12px_-3px_rgba\(93\2c 176\2c 215\2c 0\.4\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 4px 12px -3px rgba(93, 176, 215, 0.4);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 4px 12px -3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-\[0_3px_8px_-2px_rgba\(93\2c 176\2c 215\2c 0\.7\)\] {
  --tw-shadow: 0 3px 8px -2px rgba(93, 176, 215, 0.7);
  --tw-shadow-colored: 0 3px 8px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-none {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-h-blue\/25 {
  --tw-shadow-color: rgb(93 176 215 / 0.25);
  --tw-shadow: var(--tw-shadow-colored);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.outline {
  outline-style: solid;
}

.outline-0 {
  outline-width: 0px;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-white\/60 {
  --tw-ring-color: rgb(255 255 255 / 0.6);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-lg {
  --tw-backdrop-blur: blur(16px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-saturate-150 {
  --tw-backdrop-saturate: saturate(1.5);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-\[left\] {
  transition-property: left;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}

.ease-linear {
  transition-timing-function: linear;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.content-\[\'\'\] {
  --tw-content: '';
  content: var(--tw-content);
}

.content-\[\'\\f063\'\] {
  --tw-content: '\f063';
  content: var(--tw-content);
}

.text-hidden {
  position: absolute !important;
  margin: -1px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

.text-overflow-hidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.font-awesome {
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

.fa-chevron-right {
  --tw-content: '\f105';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

.fa-circle-arrow-right {
  --tw-content: '\f0a9';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

.fa-star {
  --tw-content: '\f005';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

.fa-paper-plane {
  --tw-content: '\f1d8';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

.menu_toolbar {
  display: none;
}

/* 티스토리 자동 삽입 글쓴이 명함 박스 숨김 */
.tt_box_namecard {
  display: none;
}

/* 티스토리 자동 삽입 관련글 목록 숨김 (스킨 자체 RelatedArticle로 대체) */
.another_category {
  display: none;
}

a,
button {
  pointer-events: auto !important;
}

/* 터미널 테마 monospace (홈 — Terminal.pug) */
.mono {
  font-family: 'JetBrains Mono', monospace;
}

/* https://github.com/aFarkas/lazysizes#css-api */
@keyframes pulse {

  50% {
    opacity: .5;
  }
}

.lazyload,
.lazyloading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark .lazyload,
.dark .lazyloading {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

.lazyloaded {
  animation: none;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.lazyload:not([src]) {
  visibility: hidden;
}

/* https://swiperjs.com/demos#navigation */
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-size: 1.5rem;
  --swiper-navigation-color: rgba(255, 255, 255, .6);
}

@media not all and (min-width: 1100px) {

  .swiper-button-next,
  .swiper-button-prev {
    display: none !important;
  }
}

.marker\:text-\[\#63BAE4\] *::marker {
  color: rgb(99 186 228);
}

.marker\:text-\[\#63BAE4\]::marker {
  color: rgb(99 186 228);
}

.placeholder\:text-h-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.placeholder\:text-h-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.before\:absolute::before {
  content: var(--tw-content);
  position: absolute;
}

.before\:right-0::before {
  content: var(--tw-content);
  right: 0px;
}

.before\:top-0::before {
  content: var(--tw-content);
  top: 0px;
}

.before\:left-\[calc\(theme\(spacing\.12\)\/2\)\]::before {
  content: var(--tw-content);
  left: calc(3rem / 2);
}

.before\:top-16::before {
  content: var(--tw-content);
  top: 4rem;
}

.before\:z-10::before {
  content: var(--tw-content);
  z-index: 10;
}

.before\:mx-1\.5::before {
  content: var(--tw-content);
  margin-left: 0.375rem;
  margin-right: 0.375rem;
}

.before\:mx-1::before {
  content: var(--tw-content);
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.before\:h-screen::before {
  content: var(--tw-content);
  height: 100vh;
}

.before\:h-\[calc\(100\%-65px\)\]::before {
  content: var(--tw-content);
  height: calc(100% - 65px);
}

.before\:w-full::before {
  content: var(--tw-content);
  width: 100%;
}

.before\:w-\[1px\]::before {
  content: var(--tw-content);
  width: 1px;
}

.before\:bg-h-900\/60::before {
  content: var(--tw-content);
  background-color: rgb(0 0 0 / 0.6);
}

.before\:bg-h-300::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.before\:content-\[\"\B7\"\]::before {
  --tw-content: "·";
  content: var(--tw-content);
}

.before\:content-\[\'\'\]::before {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:mt-20:first-child {
  margin-top: 5rem;
}

.empty\:my-10:empty {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.empty\:hidden:empty {
  display: none;
}

.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus-within\:ring-h-blue\/60:focus-within {
  --tw-ring-color: rgb(93 176 215 / 0.6);
}

.hover\:-translate-y-px:hover {
  --tw-translate-y: -1px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-h-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.hover\:bg-\[\#2F87D0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(47 135 208 / var(--tw-bg-opacity));
}

.hover\:bg-white\/70:hover {
  background-color: rgb(255 255 255 / 0.7);
}

.hover\:bg-\[\#5da8d0\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(93 168 208 / var(--tw-bg-opacity));
}

.hover\:bg-h-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.hover\:text-h-blue:hover {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

.hover\:text-\[\#3E97E0\]:hover {
  --tw-text-opacity: 1;
  color: rgb(62 151 224 / var(--tw-text-opacity));
}

.hover\:text-h-500:hover {
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.hover\:text-h-600:hover {
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:ring-h-blue\/50:hover {
  --tw-ring-color: rgb(93 176 215 / 0.5);
}

.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.dark .dark\:border-h-100\/20 {
  border-color: rgb(255 255 255 / 0.2);
}

.dark .dark\:border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.dark .dark\:border-h-700 {
  --tw-border-opacity: 1;
  border-color: rgb(41 42 45 / var(--tw-border-opacity));
}

.dark .dark\:border-l-h-100 {
  --tw-border-opacity: 1;
  border-left-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.dark .dark\:border-b-h-700 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(41 42 45 / var(--tw-border-opacity));
}

.dark .dark\:bg-h-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 31 33 / var(--tw-bg-opacity));
}

.dark .dark\:bg-h-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.dark .dark\:bg-h-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

.dark .dark\:bg-h-800\/80 {
  background-color: rgb(30 31 33 / 0.8);
}

.dark .dark\:bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}

.dark .dark\:bg-h-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

.dark .dark\:bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.dark .dark\:from-h-800 {
  --tw-gradient-from: #1e1f21;
  --tw-gradient-to: rgb(30 31 33 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.dark .dark\:via-h-700 {
  --tw-gradient-to: rgb(41 42 45 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), #292a2d, var(--tw-gradient-to);
}

.dark .dark\:to-h-800 {
  --tw-gradient-to: #1e1f21;
}

.dark .dark\:text-h-200 {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

.dark .dark\:text-h-400 {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.dark .dark\:text-h-100 {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark .dark\:text-h-300 {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

.dark .dark\:text-h-500 {
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark .dark\:text-h-blue {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

.dark .dark\:ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}

.dark .dark\:invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.dark .dark\:before\:bg-h-400::before {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(153 153 161 / var(--tw-bg-opacity));
}

.dark .dark\:hover\:bg-h-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

.dark .dark\:hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.dark .dark\:hover\:text-h-blue:hover {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

.dark .dark\:hover\:text-h-200:hover {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

@media not all and (min-width: 1820px) {

  .max-2xl\:fixed {
    position: fixed;
  }

  .max-2xl\:right-4 {
    right: 1rem;
  }

  .max-2xl\:-right-60 {
    right: -15rem;
  }

  .max-2xl\:top-20 {
    top: 5rem;
  }

  .max-2xl\:z-40 {
    z-index: 40;
  }

  .max-2xl\:rounded-xl {
    border-radius: 0.75rem;
  }

  .max-2xl\:bg-h-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  }

  .max-2xl\:p-6 {
    padding: 1.5rem;
  }

  .max-2xl\:pt-8 {
    padding-top: 2rem;
  }

  .max-2xl\:pr-14 {
    padding-right: 3.5rem;
  }

  .max-2xl\:transition-\[right\] {
    transition-property: right;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .max-2xl\:duration-200 {
    transition-duration: 200ms;
  }

  .dark .max-2xl\:dark\:bg-h-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  }
}

@media not all and (min-width: 1100px) {

  .max-lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .max-lg\:w-full {
    width: 100%;
  }
}

@media (min-width: 640px) {

  .sm\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:text-left {
    text-align: left;
  }
}

@media (min-width: 768px) {

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:gap-8 {
    gap: 2rem;
  }
}

@media (min-width: 1100px) {

  .lg\:top-\[calc\(100\%\+theme\(spacing\.6\)\)\] {
    top: calc(100% + 1.5rem);
  }

  .lg\:left-\[calc\(theme\(\'screens\.lg\'\)\/2\)\] {
    left: calc(1100px / 2);
  }

  .lg\:mx-auto {
    margin-left: auto;
    margin-right: auto;
  }

  .lg\:my-20 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }

  .lg\:mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:mt-0 {
    margin-top: 0px;
  }

  .lg\:mt-20 {
    margin-top: 5rem;
  }

  .lg\:mt-16 {
    margin-top: 4rem;
  }

  .lg\:mb-3 {
    margin-bottom: 0.75rem;
  }

  .lg\:ml-16 {
    margin-left: 4rem;
  }

  .lg\:h-24 {
    height: 6rem;
  }

  .lg\:h-16 {
    height: 4rem;
  }

  .lg\:h-\[calc\(theme\(spacing\.72\)\+theme\(spacing\.7\)\)\] {
    height: calc(18rem + 1.75rem);
  }

  .lg\:w-idx {
    width: 1100px;
  }

  .lg\:w-24 {
    width: 6rem;
  }

  .lg\:w-\[calc\(theme\(spacing\.96\)\+theme\(spacing\.20\)\+theme\(spacing\.3\)\)\] {
    width: calc(24rem + 5rem + 0.75rem);
  }

  .lg\:w-pem {
    width: var(--h-width);
  }

  .lg\:w-max {
    width: -moz-max-content;
    width: max-content;
  }

  .lg\:max-w-\[850px\] {
    max-width: 850px;
  }

  .lg\:max-w-screen-lg {
    max-width: 1100px;
  }

  .lg\:max-w-\[1140px\] {
    max-width: 1140px;
  }

  .lg\:-translate-y-6 {
    --tw-translate-y: -1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .lg\:pt-14 {
    padding-top: 3.5rem;
  }

  .lg\:pl-20 {
    padding-left: 5rem;
  }

  .lg\:pl-16 {
    padding-left: 4rem;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .lg\:first\:mt-40:first-child {
    margin-top: 10rem;
  }
}

@media (min-width: 1400px) {

  .xl\:invisible {
    visibility: hidden;
  }

  .xl\:bottom-4 {
    bottom: 1rem;
  }

  .xl\:left-0 {
    left: 0px;
  }

  .xl\:ml-12 {
    margin-left: 3rem;
  }

  .xl\:mr-auto {
    margin-right: auto;
  }

  .xl\:w-c {
    width: calc(100% - 16rem);
  }

  .xl\:max-w-screen-xl {
    max-width: 1400px;
  }

  .xl\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .xl\:pl-64 {
    padding-left: 16rem;
  }
}

@media (min-width: 1820px) {

  .\32xl\:absolute {
    position: absolute;
  }

  .\32xl\:sticky {
    position: sticky;
  }

  .\32xl\:top-0 {
    top: 0px;
  }

  .\32xl\:top-20 {
    top: 5rem;
  }

  .\32xl\:ml-\[calc\(810px\+theme\(spacing\.5\)\)\] {
    margin-left: calc(810px + 1.25rem);
  }

  .\32xl\:block {
    display: block;
  }

  .\32xl\:hidden {
    display: none;
  }

  .\32xl\:h-full {
    height: 100%;
  }

  .\32xl\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.\[\&_h2\]\:px-4 h2 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.\[\&_a\]\:text-4xl a {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.\[\&_a\]\:font-bold a {
  font-weight: 700;
}

.\[\&_a\]\:text-h-200 a {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

.\[\&_img\]\:hidden img {
  display: none;
}

.\[\&\>div\]\:before\:hidden>div::before {
  content: var(--tw-content);
  display: none;
}

.\[\&\:last-child\>div\]\:before\:hidden:last-child>div::before {
  content: var(--tw-content);
  display: none;
}

#comments .tt_more_preview_comments_wrap {

  margin-left: auto;

  margin-right: auto;

  margin-top: 1rem;

  margin-bottom: 1rem;

  width: -moz-fit-content;

  width: fit-content;

  border-radius: 9999px;

  border-width: 1px;

  --tw-border-opacity: 1;

  border-color: rgb(230 230 233 / var(--tw-border-opacity));

  background-color: transparent;

  padding-top: 0.625rem;

  padding-bottom: 0.625rem;

  padding-left: 1.25rem;

  padding-right: 1.25rem;

  font-size: 0.875rem;

  line-height: 1.25rem;

  --tw-text-opacity: 1;

  color: rgb(102 102 110 / var(--tw-text-opacity))
}

.dark #comments .tt_more_preview_comments_wrap {

  --tw-border-opacity: 1;

  border-color: rgb(41 42 45 / var(--tw-border-opacity));

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

#comments .tt_more_preview_comments_wrap::after {

  margin-left: 0.5rem;

  --tw-content: '\f063';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#comments .tistoryProfileLayerTrigger {

  display: none
}

/* ===== 토큰 — 라이트 ===== */
.gb {
  --term: #ffffff;
  --bar: #f5f7fa;
  --bd: #e6eaf0;
  --bar-fg: #9aa4b2;
  --heading: #13233a;
  --msg: #37434f;
  --muted: #8a94a3;
  --date: #aab3bf;
  --accent: #63BAE4;
  /* 메인 컬러 (채움) */
  --accent-ink: #2C82B8;
  /* 메인 컬러 (텍스트 — 밝은 배경 대비용) */
  --field-bg: #f7f9fb;
  --line: #eef1f5;

  max-width: 680px;
  margin: 40px auto;
  box-sizing: border-box;
  font-family: 'Pretendard', sans-serif;
}

/* ===== 토큰 — 다크 (코드블록과 동일 톤) ===== */
.dark .gb {
  --term: #0c1320;
  --bar: #0e1626;
  --bd: #222d42;
  --bar-fg: #6b7891;
  --heading: #eef3fb;
  --msg: #cdd6e8;
  --muted: #7b8aa3;
  --date: #5d6b85;
  --accent: #5b9bf8;
  --accent-ink: #7fb0fb;
  --field-bg: #0b121f;
  --line: #1a2333;
}

.gb *,
.gb *::before,
.gb *::after {
  box-sizing: border-box;
}

/* 헤더 */
.gb-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 24px;
}

.gb-title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--heading);
  letter-spacing: -.02em;
}

.gb-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 600;
}

/* 터미널 카드 */
.gb-term {
  background: var(--term);
  border: 1px solid var(--bd);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .04), 0 14px 36px rgba(40, 90, 160, .07);
}

.dark .gb-term {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .4);
}

/* 타이틀 바 */
.gb-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--bar);
  padding: 12px 16px;
  border-bottom: 1px solid var(--bd);
}

.gb-traffic {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.gb-traffic.is-red {
  background: #ff5f57;
}

.gb-traffic.is-yellow {
  background: #febc2e;
}

.gb-traffic.is-green {
  background: #28c840;
}

.gb-bar-path {
  margin-left: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--bar-fg);
}

.gb-bar-count {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--date);
}

.gb-body {
  padding: 24px;
}

/* 명령줄 */
.gb-cmd {
  margin: 0 0 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--muted);
}

.gb-prompt {
  color: var(--accent-ink);
}

/* 방명록 목록 */
.gb-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gb-item {
  display: flex;
  gap: 14px;
}

.gb-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: none;
  width: 9px;
  margin-top: 4px;
}

.gb-node {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.gb-line {
  flex: 1;
  width: 1px;
  background: var(--line);
  margin: 5px 0;
}

.gb-item:last-child .gb-line {
  display: none;
}

.gb-entry {
  padding-bottom: 22px;
  min-width: 0;
}

.gb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}

.gb-hash {
  color: var(--accent-ink);
}

.gb-name {
  color: var(--heading);
  font-weight: 700;
}

.gb-date {
  color: var(--date);
}

.gb-lock {
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--bd);
  padding: 1px 7px;
  border-radius: 5px;
  font-family: 'Pretendard', sans-serif;
}

.gb-msg {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--msg);
}

.gb-tools {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 12px;
}

.gb-tools a {
  color: var(--muted);
  text-decoration: none;
  transition: color .15s ease;
}

.gb-tools a:hover {
  color: var(--accent-ink);
}

/* 작성 폼 */
.gb-compose {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px dashed var(--bd);
}

.gb-cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 3px;
  animation: gb-blink 1.05s steps(1) infinite;
}

@keyframes gb-blink {

  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.gb-guest {
  display: flex;
  gap: 9px;
  margin-bottom: 9px;
}

.gb-field {
  background: var(--field-bg);
  border: 1px solid var(--bd);
  border-radius: 9px;
  padding: 11px 13px;
  color: var(--msg);
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  outline: none;
  transition: border-color .15s ease;
}

.gb-field::-moz-placeholder {
  color: var(--muted);
  opacity: .75;
}

.gb-field::placeholder {
  color: var(--muted);
  opacity: .75;
}

.gb-field:focus {
  border-color: var(--accent);
}

.gb-field--name {
  flex: 1;
  min-width: 0;
}

.gb-field--pw {
  width: 140px;
}

.gb-textarea {
  display: block;
  width: 100%;
  height: 64px;
  resize: none;
  line-height: 1.65;
  font-size: 13.5px;
}

.gb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 13px;
}

.gb-secret {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 12.5px;
  color: var(--muted);
}

.gb-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: var(--bd);
  flex: none;
  transition: background .15s ease;
}

.gb-switch.is-on {
  background: var(--accent);
}

.gb-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--term);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  transition: left .15s ease;
}

.gb-switch.is-on .gb-knob {
  left: 16px;
}

.gb-submit {
  margin-left: auto;
  background: var(--accent);
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 26px;
  border-radius: 9px;
  text-decoration: none;
  cursor: pointer;
  transition: filter .15s ease;
}

.gb-submit:hover {
  color: #fff;
  filter: brightness(1.06);
}

/* 더보기 */
.gb-more {
  margin-top: 22px;
  text-align: center;
}

.gb-more-btn {
  display: inline-block;
  padding: 9px 22px;
  border: 1px solid var(--bd);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease;
}

.gb-more-btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* 제목 영역 아래 그라데이션 구분선 — 파랑에서 옅게 사라짐 */
/* 라인 시작을 본문 들여쓰기(pl-12 / lg:pl-20)에 맞춰 안쪽에서 시작 */
.post-header .description {
  padding-bottom: 25px;
}

.post-header .description::after {
  content: '';
  position: absolute;
  left: 48px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #5db0d7 0%, #74c5ed 35%, rgba(116, 197, 237, 0) 100%);
}

@media (min-width: 1024px) {
  .post-header .description::after {
    left: 80px;
  }
}

.dark .post-header .description::after {
  background: linear-gradient(90deg, #5db0d7 0%, #3e6f88 40%, rgba(62, 111, 136, 0) 100%);
}

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #5db0d7;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: filter .15s ease;
}

.cat-badge:hover {
  color: #fff;
  filter: brightness(1.06);
}

.cat-badge i {
  font-size: 10px;
}

.post-toc {
  background: #fff;
  border: 1px solid #e4ecf6;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .05), 0 12px 30px rgba(40, 90, 160, .07);
  padding: 22px 26px;
  margin: 0 0 36px;
  margin-left: 2rem;
}

@media (min-width: 1100px) {
  .post-toc {
    margin-left: 4rem;
  }
}

.post-toc {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}

.post-toc__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f8198;
}

.post-toc__chevron {
  font-size: 11px;
  color: #9aa8bb;
  transition: transform .2s ease;
}

.post-toc__chevron--open {
  transform: rotate(180deg);
}

.post-toc__list {
  list-style: none;
  margin: 0;
  /* gap 을 접히는 영역(ul) 안의 padding 으로 둬 x-collapse 가 0 까지 함께 줄인다 */
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-toc__list a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  font-size: 16px;
  color: #37434f;
  transition: color .15s ease;
}

.post-toc__list a:hover {
  color: #63BAE4;
}

.post-toc__num {
  flex-shrink: 0;
  color: #63BAE4;
  font-size: 13.5px;
}

/* 제목이 길면 줄바꿈되며 넘치지 않게 */
.post-toc__text {
  flex: 1;
  min-width: 0;
}

/* H3 은 한 단계 들여써 계층 유지 */
.post-toc__sub {
  padding-left: 18px;
}

/* 다크 모드 — 스킨 팔레트에 맞춤 */
.dark .post-toc {
  background: #292a2d;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 30px rgba(0, 0, 0, .35);
}

.dark .post-toc__label {
  color: #8b98a8;
}

.dark .post-toc__list a {
  color: #d7dde4;
}

#content .container_postbtn .btn_subscription {

  margin-left: 0.5rem;

  margin-right: 0px;

  border-width: 0px
}

#content .container_postbtn .btn_subscription .txt_state {

  position: absolute !important;

  margin: -1px !important;

  height: 1px !important;

  width: 1px !important;

  overflow: hidden !important
}

#content .container_postbtn .btn_subscription .txt_tool_id,
#content .container_postbtn .btn_subscription .ico_check_type1 {

  display: none
}

#content .container_postbtn .btn_subscription::before {

  font-size: 0.875rem;

  line-height: 1.25rem;

  --tw-content: '\f1d8';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#content {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#content .contents_style {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 2rem;
  text-align: left;
  font-family: Pretendard Variable, Pretendard, Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

@media (min-width: 1100px) {

  #content .contents_style {
    padding-left: 4rem;
  }
}

#content .contents_style {

  /* 본문 제목 타이포 토큰 (다크는 .dark 로 전환) */
  --heading: #13233a;
  --accent: #63BAE4;
}

.dark #content .contents_style {
  --heading: #eef3fb;
  --accent: #5b9bf8;
}

#content .contents_style a {
  --tw-text-opacity: 1;
  color: rgb(255 85 68 / var(--tw-text-opacity));
  text-decoration-thickness: 0px;
}

.dark #content .contents_style a {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

#content .contents_style h1,
#content .contents_style h2,
#content .contents_style h3,
#content .contents_style h4 {
  scroll-margin-top: 5rem;

  color: var(--heading);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
  text-wrap: balance;
}

/* 제목 내부는 JS 가 앵커 a 로 감싸므로 글자색을 a 에도 준다 */

#content .contents_style h1 a,
#content .contents_style h2 a,
#content .contents_style h3 a,
#content .contents_style h4 a {
  color: var(--heading);
}

/* 다크에서 본문 a(.dark .contents_style a)가 우선순위로 덮지 않도록 맞춤 */

.dark #content .contents_style h1 a,
.dark #content .contents_style h2 a,
.dark #content .contents_style h3 a,
.dark #content .contents_style h4 a {
  color: var(--heading);
}

/* h1 — 글 제목급 */

#content .contents_style h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
}

/* h2 — 섹션 제목 (좌측 accent 바) */

#content .contents_style h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 40px 0 16px;
}

#content .contents_style h2::before {
  content: "";
  flex: none;
  width: 5px;
  height: 21px;
  border-radius: 3px;
  background: var(--accent);
}

/* h3 — 하위 제목 */

#content .contents_style h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 30px 0 12px;
}

/* h4 — 최하위 제목 */

#content .contents_style h4 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 24px 0 10px;
}

#content .contents_style ol[data-ke-list-type],
#content .contents_style ul[data-ke-list-type] {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  list-style-position: inside;
  flex-direction: column;
  row-gap: 0.25rem;
}

#content .contents_style ol[data-ke-list-type] *::marker,
#content .contents_style ul[data-ke-list-type] *::marker {
  color: rgb(99 186 228);
}

#content .contents_style ol[data-ke-list-type]::marker,
#content .contents_style ul[data-ke-list-type]::marker {
  color: rgb(99 186 228);
}

#content .contents_style ol[data-ke-list-type] ol[data-ke-list-type],
#content .contents_style ol[data-ke-list-type] ul[data-ke-list-type],
#content .contents_style ul[data-ke-list-type] ol[data-ke-list-type],
#content .contents_style ul[data-ke-list-type] ul[data-ke-list-type] {
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: 1.5rem;
}

#content .contents_style p,
#content .contents_style ol[data-ke-list-type],
#content .contents_style ul[data-ke-list-type],
#content .contents_style table[data-ke-align],
#content .contents_style blockquote[data-ke-style=style2],
#content .contents_style blockquote[data-ke-style=style3] {
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style p,
.dark #content .contents_style ol[data-ke-list-type],
.dark #content .contents_style ul[data-ke-list-type],
.dark #content .contents_style table[data-ke-align],
.dark #content .contents_style blockquote[data-ke-style=style2],
.dark #content .contents_style blockquote[data-ke-style=style3] {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

#content .contents_style p b,
#content .contents_style p strong,
#content .contents_style ol[data-ke-list-type] b,
#content .contents_style ol[data-ke-list-type] strong,
#content .contents_style ul[data-ke-list-type] b,
#content .contents_style ul[data-ke-list-type] strong,
#content .contents_style table[data-ke-align] b,
#content .contents_style table[data-ke-align] strong,
#content .contents_style blockquote[data-ke-style=style2] b,
#content .contents_style blockquote[data-ke-style=style2] strong,
#content .contents_style blockquote[data-ke-style=style3] b,
#content .contents_style blockquote[data-ke-style=style3] strong {
  font-weight: 700;
}

#content .contents_style p a,
#content .contents_style ol[data-ke-list-type] a,
#content .contents_style ul[data-ke-list-type] a,
#content .contents_style table[data-ke-align] a,
#content .contents_style blockquote[data-ke-style=style2] a,
#content .contents_style blockquote[data-ke-style=style3] a {
  display: inline-block;
  --tw-text-opacity: 1;
  color: rgb(255 85 68 / var(--tw-text-opacity));
}

.dark #content .contents_style p a,
.dark #content .contents_style ol[data-ke-list-type] a,
.dark #content .contents_style ul[data-ke-list-type] a,
.dark #content .contents_style table[data-ke-align] a,
.dark #content .contents_style blockquote[data-ke-style=style2] a,
.dark #content .contents_style blockquote[data-ke-style=style3] a {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity));
}

#content .contents_style p code,
#content .contents_style ol[data-ke-list-type] code,
#content .contents_style ul[data-ke-list-type] code,
#content .contents_style table[data-ke-align] code,
#content .contents_style blockquote[data-ke-style=style2] code,
#content .contents_style blockquote[data-ke-style=style3] code {
  position: relative;
  top: -1px;
  white-space: normal;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-family: Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style p code,
.dark #content .contents_style ol[data-ke-list-type] code,
.dark #content .contents_style ul[data-ke-list-type] code,
.dark #content .contents_style table[data-ke-align] code,
.dark #content .contents_style blockquote[data-ke-style=style2] code,
.dark #content .contents_style blockquote[data-ke-style=style3] code {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

#content .contents_style figure,
#content .contents_style pre,
#content .contents_style table[data-ke-align],
#content .contents_style [data-ke-type=moreLess] {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.dark #content .contents_style hr {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

#content .contents_style table[data-ke-align] td,
#content .contents_style table[data-ke-align] th {
  box-sizing: border-box;
  border-width: 0px;
  border-bottom-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(153 153 161 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style table[data-ke-align] td,
.dark #content .contents_style table[data-ke-align] th {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#content .contents_style figure figcaption {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

#content .contents_style figure img {
  border-radius: 0.75rem;
}

#content .contents_style figure.imagegridblock {
  max-width: none !important;
}

@media not all and (min-width: 1100px) {

  #content .contents_style figure.imagegridblock {
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
  }
}

/* 본문 단일 이미지: 원본 비율 유지 + 폭 축소(가운데 정렬) */

/* 높이는 img 자연 비율(width/height 속성 → aspect-ratio)이 결정 — JS padding 의존 X */

#content .contents_style figure.imageblock {
  width: auto !important;
  max-width: min(100%, 680px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#content .contents_style figure.imageblock span,
#content .contents_style figure.imageblock a {
  display: block;
  width: 100%;

  /* JS(setRatioToImageBlock)가 넣는 padding-bottom 무력화 */
  padding-bottom: 0 !important;
}

#content .contents_style figure.imageblock span img,
#content .contents_style figure.imageblock a img {
  display: block;
  height: auto;
  width: 100%;
}

#content .contents_style figure.imagegridblock span,
#content .contents_style figure.imagegridblock a {
  position: relative;
  display: block;
  height: auto;
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

#content .contents_style figure.imagegridblock span::after,
#content .contents_style figure.imagegridblock a::after {
  display: block;
  height: 0px;
  width: 100%;
  --tw-content: '';
  content: var(--tw-content);
}

#content .contents_style figure.imagegridblock span img,
#content .contents_style figure.imagegridblock a img {
  position: absolute;
  top: 0px;
  left: 0px;
  display: block;
  height: 100%;
  width: 100%;
}

#content .contents_style figure.imageslideblock .image-container {
  height: auto !important;
  max-height: 100% !important;
  min-height: 0px !important;
  width: auto !important;
  max-width: 100% !important;
}

#content .contents_style figure.imageslideblock .image-container::after {
  display: block;
  height: 0px;
  width: 100%;
  --tw-content: '';
  content: var(--tw-content);
}

#content .contents_style figure.imageslideblock .image-container .selected {
  position: absolute;
  top: 0px;
  left: 0px;
  display: flex;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 100%;
  align-items: center;
  justify-content: center;
}

#content .contents_style figure.imageslideblock .image-container .selected img {
  display: block;
  height: auto;
  width: auto;
}

#content .contents_style figure[data-ke-type=opengraph] a {
  border-width: 0px;
}

#content .contents_style figure[data-ke-type=opengraph] a .og-image {
  overflow: hidden;
  border-top-left-radius: 0.75rem;
  border-bottom-left-radius: 0.75rem;
  border-right-width: 0px;
}

#content .contents_style figure[data-ke-type=opengraph] .og-text {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
#content .contents_style figure[data-ke-type=opengraph] .og-text .og-host {
  font-family: Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
.dark #content .contents_style figure[data-ke-type=opengraph] .og-text .og-host {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#content .contents_style figure[data-ke-type=opengraph] .og-text .og-title {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

#content .contents_style figure.fileblock {
  border-radius: 0.75rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

#content .contents_style figure.fileblock .filename {
  margin-top: 0.75rem;
}

#content .contents_style figure.fileblock .filename .name {
  height: auto;
}

.dark #content .contents_style figure.fileblock .filename,
.dark #content .contents_style figure.fileblock .size {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

.dark #content .contents_style figure.fileblock .image,
.dark #content .contents_style figure.fileblock a::after {
  --tw-brightness: brightness(0);
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

#content .contents_style [data-ke-type=moreLess] {
  position: relative;
}

#content .contents_style [data-ke-type=moreLess]::before {
  position: absolute;
  top: 1rem;
  right: 0px;
  z-index: -1;
  height: 0px;
  width: 100%;
  border-bottom-width: 1px;
  border-style: dashed;
  --tw-border-opacity: 1;
  border-color: rgb(207 228 241 / var(--tw-border-opacity));
  --tw-content: '';
  content: var(--tw-content);
}

#content .contents_style [data-ke-type=moreLess].open .btn-toggle-moreless::before {
  --tw-content: '\f0ab';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

#content .contents_style [data-ke-type=moreLess] .btn-toggle-moreless {
  display: inline-flex;
  align-items: center;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(207 228 241 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(234 244 251 / var(--tw-bg-opacity));
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(44 130 184 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

#content .contents_style [data-ke-type=moreLess] .btn-toggle-moreless::before {
  margin-right: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(99 186 228 / var(--tw-text-opacity));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  --tw-content: '\f0a9';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;
}

#content .contents_style [data-ke-type=moreLess] .btn-toggle-moreless:hover {
  --tw-border-opacity: 1;
  border-color: rgb(99 186 228 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(99 186 228 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#content .contents_style [data-ke-type=moreLess] .btn-toggle-moreless:hover::before {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#content .contents_style [data-ke-type=moreLess] .moreless-content {
  margin-top: 1.5rem;
}

#content .contents_style blockquote[data-ke-style] {
  margin-top: 1.75rem;
  margin-bottom: 1.75rem;
  font-family: Noto Sans KR, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style blockquote[data-ke-style] {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

/* style1 — 큰 텍스트형: 가운데 정렬 + 장식 따옴표 */

#content .contents_style blockquote[data-ke-style][data-ke-style=style1] {
  position: relative;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 3.5rem;
  padding-bottom: 0.75rem;
  text-align: center;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 500;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style blockquote[data-ke-style][data-ke-style=style1] {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#content .contents_style blockquote[data-ke-style][data-ke-style=style1] {

  /* Tistory 기본 content.css 가 style1 에 깔아두는 따옴표 배경 이미지
         * (blockquote-style1.svg)를 제거 — 안 그러면 아래 ::before 따옴표와
         * 겹쳐 따옴표가 두 개로 보인다 */
  background: none;
}

#content .contents_style blockquote[data-ke-style][data-ke-style=style1]::before {
  content: "\201C";
  position: absolute;
  left: 50%;
  top: 0.25rem;
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  font-family: Georgia, "Times New Roman", serif;
  font-size: 68px;
  line-height: 1;
  color: var(--accent);
}

/* 가운데 아래 짧은 강조선 */

#content .contents_style blockquote[data-ke-style][data-ke-style=style1]::after {
  content: "";
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.25rem;
  display: block;
  height: 0.125rem;
  width: 2.5rem;
  border-radius: 9999px;
  background: var(--accent);
}

/* style2 — 좌측 세로선형 */

#content .contents_style blockquote[data-ke-style][data-ke-style=style2] {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 1.25rem;
  padding-right: 0.25rem;
  text-align: left;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark #content .contents_style blockquote[data-ke-style][data-ke-style=style2] {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

#content .contents_style blockquote[data-ke-style][data-ke-style=style2] {
  border-left: 4px solid var(--accent);
}

/* style3 — 배경 박스형: 연한 틴트 + 좌측 액센트 바 + 따옴표 아이콘 */

#content .contents_style blockquote[data-ke-style][data-ke-style=style3] {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  padding-left: 3.5rem;
  padding-right: 1.5rem;
  text-align: left;
  line-height: 2;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark #content .contents_style blockquote[data-ke-style][data-ke-style=style3] {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#content .contents_style blockquote[data-ke-style][data-ke-style=style3] {

  --q-surface: #eaf3fe;
  background: var(--q-surface);
}

.dark #content .contents_style blockquote[data-ke-style][data-ke-style=style3] {
  --q-surface: #16243c;
}

/* 좌측 세로 액센트 바 */

#content .contents_style blockquote[data-ke-style][data-ke-style=style3]::after {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  bottom: 0px;
  width: 0.25rem;
  background: var(--accent);
}

/* 따옴표 아이콘 (바 안쪽으로 살짝 띄움) */

#content .contents_style blockquote[data-ke-style][data-ke-style=style3]::before {
  content: "\201C";
  position: absolute;
  left: 1.25rem;
  top: 0.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 40px;
  line-height: 1;
  color: var(--accent);
}

#content .contents_style pre code {
  border-radius: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1.5;
}

#content .contents_style pre code.hljs {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.dark #content .contents_style pre code.hljs {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

.codeblock {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e1e2e6;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .05), 0 12px 30px rgba(40, 90, 160, .07);
  font-family: 'JetBrains Mono', monospace;
}

.codeblock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eaeaee;
  padding: 10px 14px;
}

.codeblock__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.codeblock__name {
  margin-left: 8px;
  font-size: 12px;
  color: #57606a;
}

.codeblock__copy {
  margin-left: auto;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: #6e7781;
  cursor: pointer;
  padding: 0;
}

.codeblock__copy:hover {
  color: #2f333b;
}

.codeblock__pre {
  margin: 20px 0;
  padding: 0 18px;
  overflow-x: auto;
  background: #f4f4f6;
  color: #2f333b;
  font-size: 12.5px;
  line-height: 1.75;
}

.codeblock__pre code {
  font-family: inherit;
}

/* 본문 기본 'pre' my-5(margin 20px)가 바와 코드 사이에 틈을 만들지 않도록 보정 */
#content .contents_style .codeblock__pre {
  margin: 0;
}

/* 코드 내용도 JetBrains Mono로 고정 (상속이 끊기는 경우 대비) */
#content .contents_style .codeblock__pre,
#content .contents_style .codeblock__pre code {
  font-family: 'JetBrains Mono', monospace;
}

/* 본문 기본 'pre code' 규칙(px-4/rounded/leading-normal/bg)이 끼어들지 않도록 보정 */
/* 세로 여백은 스크롤 컨테이너(pre)가 아니라 스크롤되는 콘텐츠(code)에 줘야 */
/* 가로 스크롤바 아래로 padding 이 남지 않는다 */
#content .contents_style .codeblock__pre code {
  display: block;
  padding: 22px 0;
  border-radius: 0;
  line-height: 1.75;
}

#content .contents_style .codeblock__pre code.hljs {
  background: transparent;
}

/* 문법 색 */
.tok-err {
  color: #cf222e;
  font-weight: 700;
}

/* 에러 */
.tok-com {
  color: #6e7781;
}

/* at / 주석 */
.tok-path {
  color: #0550ae;
}

/* 경로 */
.tok-key {
  color: #8250df;
}

/* 키워드 */
.tok-num {
  color: #bc4c00;
}

/* 숫자 */
.tok-str {
  color: #0a7d33;
}

/* 문자열 */

/* ===== 다크모드 ===== */
.dark .codeblock {
  border-color: #222d42;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px rgba(0, 0, 0, .4);
}

.dark .codeblock__bar {
  background: #0e1626;
}

.dark .codeblock__name {
  color: #aeb9d6;
}

.dark .codeblock__copy {
  color: #5d6b85;
}

.dark .codeblock__copy:hover {
  color: #aeb9d6;
}

.dark .codeblock__pre {
  background: #070c16;
  color: #aeb9d6;
}

.dark .tok-err {
  color: #ff6b7d;
}

.dark .tok-com {
  color: #5d6b85;
}

.dark .tok-path {
  color: #7c8aa8;
}

.dark .tok-key {
  color: #b39bff;
}

.dark .tok-num {
  color: #e0a060;
}

.dark .tok-str {
  color: #7ec699;
}

#content .container_postbtn {

  padding: 0px;

  padding-top: 2.25rem;

  padding-left: 2rem;

  --tw-text-opacity: 1;

  color: rgb(53 54 56 / var(--tw-text-opacity))
}

.dark #content .container_postbtn {

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

@media (min-width: 1100px) {

  #content .container_postbtn {

    padding-left: 4rem
  }
}

#content .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button,
#content .container_postbtn .btn_subscription {

  display: inline-block;

  height: 2.25rem;

  width: 2.25rem;

  cursor: pointer;

  border-radius: 0.375rem;

  border-width: 1px;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(230 230 233 / var(--tw-border-opacity));

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity));

  padding: 0px;

  font-size: 0;

  line-height: 1;

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

  outline-width: 0px;

  transition-duration: 200ms
}

#content .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button::before,
#content .container_postbtn .btn_subscription::before {

  content: var(--tw-content);

  --tw-text-opacity: 1;

  color: rgb(102 102 110 / var(--tw-text-opacity))
}

#content .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button:hover,
#content .container_postbtn .btn_subscription:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity))
}

#content .container_postbtn .postbtn_like {

  display: flex;

  -moz-column-gap: 0.5rem;

  column-gap: 0.5rem;

  border-width: 0px;

  padding: 0px
}

#content .container_postbtn .postbtn_like .wrap_btn {

  display: inline-block;

  border-width: 0px
}

#content .container_postbtn .postbtn_like .wrap_btn button::before,
#content .container_postbtn .postbtn_like .wrap_btn button[data-entry-id]::before,
#content .container_postbtn .postbtn_like .wrap_btn .uoc-count::before {

  font-size: 0.875rem;

  line-height: 1.25rem;

  font-weight: 700
}

#content .container_postbtn .postbtn_like .wrap_btn .ico_like,
#content .container_postbtn .postbtn_like .wrap_btn .ico_share,
#content .container_postbtn .postbtn_like .wrap_btn .ico_statistics,
#content .container_postbtn .postbtn_like .wrap_btn .ico_etc {

  background-image: none;

  position: absolute !important;

  margin: -1px !important;

  height: 1px !important;

  width: 1px !important;

  overflow: hidden !important
}

#content .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button {

  height: 2.25rem;

  width: 4rem;

  border-radius: 0.375rem;

  border-width: 1px;

  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(230 230 233 / var(--tw-border-opacity));

  --tw-bg-opacity: 1;

  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

#content .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity))
}

#content .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button .uoc-icon {

  --tw-text-opacity: 1;

  color: rgb(102 102 110 / var(--tw-text-opacity))
}

#content .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button .uoc-count {

  font-weight: 700;

  line-height: 1
}

#content .container_postbtn .postbtn_like .wrap_btn[id^=reaction-] button .uoc-count::before {

  margin-right: 0.375rem;

  font-size: 0.875rem;

  line-height: 1.25rem;

  --tw-content: '\f004';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#content .container_postbtn .postbtn_like .wrap_btn.wrap_btn_share .btn_share::before {

  --tw-content: '\f1e0';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#content .container_postbtn .postbtn_like .wrap_btn button[data-entry-id]::before {

  --tw-content: '\f200';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#content .container_postbtn .postbtn_like .wrap_btn.wrap_btn_etc .btn_etc1::before {

  --tw-content: '\f0ad';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#content .container_postbtn .postbtn_like .wrap_btn.wrap_btn_etc .btn_etc2::before {

  --tw-content: '\f141';

  content: var(--tw-content);

  font-family: 'Font Awesome 6 Free';

  font-weight: 700
}

#tistoryCclLayer {

  border-radius: 0.375rem;

  border-width: 0px;

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity));

  --tw-text-opacity: 1;

  color: rgb(153 153 161 / var(--tw-text-opacity));

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark #tistoryCclLayer {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity));

  --tw-text-opacity: 1;

  color: rgb(230 230 233 / var(--tw-text-opacity))
}

#tistoryCclLayer span {

  --tw-text-opacity: 1;

  color: rgb(153 153 161 / var(--tw-text-opacity))
}

#tistoryCclLayer .ico_arrbt {

  display: none
}

#tistorySnsLayer,
#tistoryEtcLayer {

  border-radius: 0.375rem;

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / var(--tw-bg-opacity));

  --tw-shadow: 0 0 #0000;

  --tw-shadow-colored: 0 0 #0000;

  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.dark #tistorySnsLayer,
.dark #tistoryEtcLayer {

  --tw-bg-opacity: 1;

  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

#tistorySnsLayer .btn_mark,
#tistoryEtcLayer .btn_mark {

  --tw-text-opacity: 1;

  color: rgb(153 153 161 / var(--tw-text-opacity))
}

.dark #tistorySnsLayer .btn_mark,
.dark #tistoryEtcLayer .btn_mark {

  --tw-text-opacity: 1;

  color: rgb(230 230 233 / var(--tw-text-opacity))
}

#tistorySnsLayer .btn_mark:hover,
#tistoryEtcLayer .btn_mark:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(230 230 233 / var(--tw-bg-opacity))
}

.dark #tistorySnsLayer .btn_mark:hover,
.dark #tistoryEtcLayer .btn_mark:hover {

  --tw-bg-opacity: 1;

  background-color: rgb(53 54 56 / var(--tw-bg-opacity));

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity))
}

#tistorySnsLayer .ico_arrbt,
#tistoryEtcLayer .ico_arrbt {

  display: none
}

#tistorySnsLayer .bundle_post a,
#tistoryEtcLayer .bundle_post a {

  --tw-text-opacity: 1;

  color: rgb(153 153 161 / var(--tw-text-opacity));

  text-decoration-line: none
}

.dark #tistorySnsLayer .bundle_post a,
.dark #tistoryEtcLayer .bundle_post a {

  --tw-text-opacity: 1;

  color: rgb(230 230 233 / var(--tw-text-opacity))
}

/* ============================================================
   태그 컴포넌트 (소프트 칩 · 라이트 / 다크)
   - Tistory [##_tag_label_rep_##] 가 생성하는 a 를 칩으로 스타일
   - 색 토큰을 .posttags 안에 캡슐화 → .dark 자동 전환
   ============================================================ */
.posttags {
  /* 라이트 토큰 */
  --chip: #eef4fb;
  --text: #37434f;
  --muted: #6f8198;
  --border: #e4ecf6;
  --accent: #63BAE4;

  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 34px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  margin-left: 2rem;
}

@media (min-width: 1100px) {
  .posttags {
    margin-left: 4rem;
  }
}

/* 다크 토큰 (skin 의 .dark 컨벤션) */
.dark .posttags {
  --chip: #1b2536;
  --text: #bcc7d9;
  --muted: #7b8aa3;
  --border: #222d42;
  --accent: #5b9bf8;
}

/* "Tags" 라벨 */
.posttags__label {
  margin-right: 2px;
  font-family: Pretendard, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 태그 칩 — 치환자가 만든 a 가 대상 */
.posttags a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-family: Pretendard, -apple-system, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

/* 태그 아이콘 — 각 칩 앞 accent 색 태그 아이콘 */
.posttags a::before {
  --tw-content: '\f02b';
  content: var(--tw-content);
  font-family: 'Font Awesome 6 Free';
  font-weight: 700;

  font-size: 11px;
  color: var(--accent);
  transition: color .18s ease;
}

/* hover — 액센트로 채우기 */
.posttags a:hover {
  background: var(--accent);
  color: #fff;
}

.posttags a:hover::before {
  color: #fff;
}

/* ============================================================
   같은 카테고리의 다른 글
   - 색 토큰을 .related-card 안에 캡슐화 → .dark 자동 전환
   ============================================================ */
.related-card {
  --surface: #ffffff;
  --border: #e4ecf6;
  --chip: #eef4fb;
  --heading: #13233a;
  --text: #37434f;
  --muted: #6f8198;
  --accent: #63BAE4;

  margin-top: 38px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .05), 0 14px 34px rgba(40, 90, 160, .07);
}

.dark .related-card {
  --surface: #1e1f21;
  --border: #353638;
  --chip: #292a2d;
  --heading: #eef3fb;
  --text: #bcc7d9;
  --muted: #7b8aa3;
  --accent: #5b9bf8;

  box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .35);
}

/* 헤더: 제목(좌) + 카테고리(우, 모노) */
.related-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.related-title-h {
  font-weight: 800;
  font-size: 15px;
  color: var(--heading);
}

.related-cate {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--muted);
}

/* 목록 */
.related-list {
  display: flex;
  flex-direction: column;
}

/* 행: 제목(좌) + 화살표(우) — 호버 배경이 카드 패딩만큼 넓게 */
.related-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 -10px;
  padding: 13px 10px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.related-row:hover {
  background: var(--chip);
}

/* 행 사이 구분선 (콘텐츠 폭) */
.related-row+.related-row {
  border-top: 1px solid var(--border);
}

.related-row__title {
  font-size: 14px;
  color: #37434F;
}

.related-row:hover .related-row__title {
  color: var(--heading);
}

/* 우측 화살표 */
.related-row__arrow {
  flex: none;
  color: var(--muted);
  transform: scale(.82);
  transition: transform .15s ease, color .15s ease;
}

.related-row:hover .related-row__arrow {
  color: var(--accent);
  transform: translateX(2px) scale(.82);
}

/* 제목 영역 아래 그라데이션 구분선 — 파랑에서 옅게 사라짐 */
/* 라인 시작을 본문 들여쓰기(pl-12 / lg:pl-20)에 맞춰 안쪽에서 시작 */
.post-header .description {
  padding-bottom: 25px;
}

.post-header .description::after {
  content: '';
  position: absolute;
  left: 48px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #5db0d7 0%, #74c5ed 35%, rgba(116, 197, 237, 0) 100%);
}

@media (min-width: 1024px) {
  .post-header .description::after {
    left: 80px;
  }
}

.dark .post-header .description::after {
  background: linear-gradient(90deg, #5db0d7 0%, #3e6f88 40%, rgba(62, 111, 136, 0) 100%);
}

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #5db0d7;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: filter .15s ease;
}

.cat-badge:hover {
  color: #fff;
  filter: brightness(1.06);
}

.cat-badge i {
  font-size: 10px;
}

.post-toc {
  background: #fff;
  border: 1px solid #e4ecf6;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .05), 0 12px 30px rgba(40, 90, 160, .07);
  padding: 22px 26px;
  margin: 0 0 36px;
  margin-left: 2rem;
}

@media (min-width: 1100px) {
  .post-toc {
    margin-left: 4rem;
  }
}

.post-toc {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}

.post-toc__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f8198;
}

.post-toc__chevron {
  font-size: 11px;
  color: #9aa8bb;
  transition: transform .2s ease;
}

.post-toc__chevron--open {
  transform: rotate(180deg);
}

.post-toc__list {
  list-style: none;
  margin: 0;
  /* gap 을 접히는 영역(ul) 안의 padding 으로 둬 x-collapse 가 0 까지 함께 줄인다 */
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-toc__list a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  font-size: 16px;
  color: #37434f;
  transition: color .15s ease;
}

.post-toc__list a:hover {
  color: #63BAE4;
}

.post-toc__num {
  flex-shrink: 0;
  color: #63BAE4;
  font-size: 13.5px;
}

/* 제목이 길면 줄바꿈되며 넘치지 않게 */
.post-toc__text {
  flex: 1;
  min-width: 0;
}

/* H3 은 한 단계 들여써 계층 유지 */
.post-toc__sub {
  padding-left: 18px;
}

/* 다크 모드 — 스킨 팔레트에 맞춤 */
.dark .post-toc {
  background: #292a2d;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 30px rgba(0, 0, 0, .35);
}

.dark .post-toc__label {
  color: #8b98a8;
}

.dark .post-toc__list a {
  color: #d7dde4;
}

/* 제목 영역 아래 그라데이션 구분선 — 파랑에서 옅게 사라짐 */
/* 라인 시작을 본문 들여쓰기(pl-12 / lg:pl-20)에 맞춰 안쪽에서 시작 */
.post-header .description {
  padding-bottom: 25px;
}

.post-header .description::after {
  content: '';
  position: absolute;
  left: 48px;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #5db0d7 0%, #74c5ed 35%, rgba(116, 197, 237, 0) 100%);
}

@media (min-width: 1024px) {
  .post-header .description::after {
    left: 80px;
  }
}

.dark .post-header .description::after {
  background: linear-gradient(90deg, #5db0d7 0%, #3e6f88 40%, rgba(62, 111, 136, 0) 100%);
}

.cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #5db0d7;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 999px;
  letter-spacing: .02em;
  transition: filter .15s ease;
}

.cat-badge:hover {
  color: #fff;
  filter: brightness(1.06);
}

.cat-badge i {
  font-size: 10px;
}

.post-toc {
  background: #fff;
  border: 1px solid #e4ecf6;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(40, 80, 140, .05), 0 12px 30px rgba(40, 90, 160, .07);
  padding: 22px 26px;
  margin: 0 0 36px;
  margin-left: 2rem;
}

@media (min-width: 1100px) {
  .post-toc {
    margin-left: 4rem;
  }
}

.post-toc {
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}

.post-toc__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6f8198;
}

.post-toc__chevron {
  font-size: 11px;
  color: #9aa8bb;
  transition: transform .2s ease;
}

.post-toc__chevron--open {
  transform: rotate(180deg);
}

.post-toc__list {
  list-style: none;
  margin: 0;
  /* gap 을 접히는 영역(ul) 안의 padding 으로 둬 x-collapse 가 0 까지 함께 줄인다 */
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-toc__list a {
  display: flex;
  gap: 12px;
  text-decoration: none;
  font-size: 16px;
  color: #37434f;
  transition: color .15s ease;
}

.post-toc__list a:hover {
  color: #63BAE4;
}

.post-toc__num {
  flex-shrink: 0;
  color: #63BAE4;
  font-size: 13.5px;
}

/* 제목이 길면 줄바꿈되며 넘치지 않게 */
.post-toc__text {
  flex: 1;
  min-width: 0;
}

/* H3 은 한 단계 들여써 계층 유지 */
.post-toc__sub {
  padding-left: 18px;
}

/* 다크 모드 — 스킨 팔레트에 맞춤 */
.dark .post-toc {
  background: #292a2d;
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 12px 30px rgba(0, 0, 0, .35);
}

.dark .post-toc__label {
  color: #8b98a8;
}

.dark .post-toc__list a {
  color: #d7dde4;
}

#tag-page {
  min-height: 100vh;
  background: #fff;
}

/* ── 헤더 ── */
.tag-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.tag-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #23242a;
}

.tag-total {
  font-size: 16px;
  font-weight: 600;
  color: #b3b8bf;
}

.tag-desc {
  margin-top: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: #9aa0a8;
}

/* ── 칩 공통 ── */
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: #3a3a40;
  background: #f0f1f4;
  transition: background-color .14s, color .14s;
}

.tag-chip:hover {
  color: #2f7fc9;
  background: #eaf3fb;
}

/* ── 인기 태그 ── */
.tag-popular {
  margin-top: 24px;
}

.tag-popular-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}

.tag-popular-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4a93d6;
}

.tag-popular-label {
  font-size: 14.5px;
  font-weight: 700;
  color: #3a82c8;
}

.tag-chip.is-popular {
  padding: 10px 17px;
  border: 1px solid #cfe3f6;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  color: #2f7fc9;
  background: #eaf3fb;
}

.tag-chip.is-popular:hover {
  background: #dcecfa;
}

/* ── 인덱스 네비게이션(sticky) — 고정 상단바(h-14, 56px) 아래에 붙는다 ── */
.tag-index {
  position: sticky;
  top: 56px;
  z-index: 5;
  margin-top: 18px;
  padding: 14px 0 12px;
  background: #fff;
}

.tag-index-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  background: #f7f8fa;
  border: 1px solid #f0f1f4;
  border-radius: 12px;
}

.tag-index-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}

.tag-index-key.is-active {
  color: #3a82c8;
  background: #eaf3fb;
  cursor: pointer;
  transition: background-color .14s;
}

.tag-index-key.is-active:hover {
  background: #dcecfa;
}

.tag-index-key.is-disabled {
  color: #cfd3d9;
  background: transparent;
  cursor: default;
}

/* ── 그룹 ── */
.tag-groups {
  margin-top: 8px;
}

.tag-group {
  /* sticky 상단바 + 인덱스바 높이만큼 비켜서 스크롤 착지 */
  scroll-margin-top: 128px;
}

.tag-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 30px 0 14px;
}

.tag-group-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: 800;
  color: #3a82c8;
  background: #eaf3fb;
}

.tag-group-count {
  font-size: 12.5px;
  font-weight: 600;
  color: #b3b8bf;
}

.tag-group-line {
  flex: 1;
  height: 1px;
  background: #eef0f3;
}

/* ===== 다크 모드 ===== */
.dark #tag-page {
  background: #1e1f21;
}

.dark .tag-title {
  color: #e6e7e9;
}

.dark .tag-total,
.dark .tag-group-count {
  color: #66666e;
}

.dark .tag-desc {
  color: #9999a1;
}

.dark .tag-chip {
  color: #c0c0c6;
  background: #292a2d;
}

.dark .tag-chip:hover {
  color: #74c5ed;
  background: rgb(93 176 215 / 16%);
}

.dark .tag-popular-dot {
  background: #5db0d7;
}

.dark .tag-popular-label {
  color: #74c5ed;
}

.dark .tag-chip.is-popular {
  color: #74c5ed;
  background: rgb(93 176 215 / 16%);
  border-color: rgb(93 176 215 / 35%);
}

.dark .tag-chip.is-popular:hover {
  background: rgb(93 176 215 / 24%);
}

.dark .tag-index {
  background: #1e1f21;
}

.dark .tag-index-bar {
  background: #26282b;
  border-color: #34363a;
}

.dark .tag-index-key.is-active {
  color: #74c5ed;
  background: rgb(93 176 215 / 16%);
}

.dark .tag-index-key.is-active:hover {
  background: rgb(93 176 215 / 24%);
}

.dark .tag-index-key.is-disabled {
  color: #4a4b4f;
}

.dark .tag-group-key {
  color: #74c5ed;
  background: rgb(93 176 215 / 16%);
}

.dark .tag-group-line {
  background: #2a2b2d;
}

/* 히어로는 홈에서만 노출 */
#hero {
  display: none;
}

#tt-body-index #hero {
  display: flex;
}

.hero-fade {
  background: linear-gradient(180deg, rgba(234, 245, 252, 0), #EAF5FC);
}

.dark .hero-fade {
  background: linear-gradient(180deg, rgba(30, 31, 33, 0), #1e1f21);
}

@keyframes floaty {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@keyframes planefly {

  0%,
  100% {
    transform: translate(0, 0) rotate(-6deg);
  }

  50% {
    transform: translate(7px, -11px) rotate(2deg);
  }
}

@keyframes dash {
  to {
    stroke-dashoffset: -220;
  }
}

/* 프롬프트 줄 ($ ls tags/) */
.term-prompt {
  font-size: 13px;
  color: #7C97AB;
}

.term-prompt .dollar {
  color: #3E9BD6;
}

/* 태그 칩 (s_random_tags) */
.term-tags .term-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  font-size: 13px;
  color: #456178;
  background: #fff;
  border: 1px solid #CCE5F4;
  border-radius: 8px;
}

.term-tags .term-tag-name {
  color: #4FA66C;
}

.term-tags .term-tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #74C5ED;
}

/* 인기 등급(cloud1~5)별 점 색상 — 자주 쓰는 태그일수록 진하게 */
.term-tags .cloud1 .term-tag-dot {
  background: #A6BCCB;
}

.term-tags .cloud2 .term-tag-dot {
  background: #74C5ED;
}

.term-tags .cloud3 .term-tag-dot {
  background: #3E9BD6;
}

.term-tags .cloud4 .term-tag-dot {
  background: #2A6FA8;
}

.term-tags .cloud5 .term-tag-dot {
  background: #1F3A4D;
}

/* 최대 10개까지만 노출 */
.term-tags .term-tag:nth-child(n+18) {
  display: none;
}

/* 터미널 본문은 홈에서만 노출 */
#terminal-home {
  display: none;
  background: #EAF5FC;
}

#tt-body-index #terminal-home {
  display: block;
}

/* 홈에서는 기존 페이징을 숨긴다(목록은 List.pug 가 터미널 로그로 대체) */
#tt-body-index #paging {
  display: none;
}

/* ===== 다크 모드 ===== */
.dark #terminal-home {
  background: #1e1f21;
}

.dark #terminal-home .term-prompt {
  color: #9999a1;
}

.dark #terminal-home .term-prompt .dollar {
  color: #5db0d7;
}

.dark .term-tags .term-tag {
  color: #c0c0c6;
  background: #292a2d;
  border-color: #3a3b3e;
}

.dark .term-tags .term-tag-name {
  color: #6fc98c;
}

.dark .term-tags .term-tag-dot {
  background: #74C5ED;
}

/* 인기 등급 — 다크에선 자주 쓰는 태그일수록 밝게 */
.dark .term-tags .cloud1 .term-tag-dot {
  background: #5b5c60;
}

.dark .term-tags .cloud2 .term-tag-dot {
  background: #4f8bb0;
}

.dark .term-tags .cloud3 .term-tag-dot {
  background: #5db0d7;
}

.dark .term-tags .cloud4 .term-tag-dot {
  background: #74c5ed;
}

.dark .term-tags .cloud5 .term-tag-dot {
  background: #a6ddf5;
}

/* explore 는 홈에서만 노출 */
#terminal-explore {
  display: none;
  background: #EAF5FC;
}

#tt-body-index #terminal-explore {
  display: block;
}

.term-explore-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 50px 36px 0;
}

/* 프롬프트 줄 ($ explore) */
#terminal-explore .term-prompt {
  font-size: 13px;
  color: #7C97AB;
}

#terminal-explore .term-prompt .dollar {
  color: #3E9BD6;
}

/* 카드 그리드 */
.explore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .explore-grid {
    grid-template-columns: 1fr;
  }
}

/* 카드 */
.navcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #DCE9F2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgb(90 150 200 / 10%);
  transition: transform .15s, box-shadow .15s;
}

.navcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgb(90 150 200 / 18%);
}

.navcard-head {
  padding: 13px 18px;
  font-size: 12px;
  color: #7C97AB;
  background: #F4FAFE;
  border-bottom: 1px solid #EAF3FA;
}

.navcard-head .dollar {
  color: #3E9BD6;
}

.navcard-body {
  padding: 18px 18px 20px;
}

.navcard-row {
  display: flex;
  align-items: center;
}

.navcard-title {
  font-size: 16.5px;
  font-weight: 700;
  color: #1F3A4D;
}

.navcard-count {
  margin-left: auto;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 700;
  color: #A6BCCB;
  background: #EAF5FC;
  border-radius: 6px;
}

.navcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.navcard-sample {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  color: #4FA66C;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.navcard-ellipsis {
  margin-left: 4px;
  color: #C4D5E1;
}

.navcard-arrow {
  flex: none;
  font-size: 16px;
  font-weight: 700;
  color: #3E9BD6;
}

/* ===== 다크 모드 ===== */
.dark #terminal-explore {
  background: #1e1f21;
}

.dark #terminal-explore .term-prompt {
  color: #9999a1;
}

.dark #terminal-explore .term-prompt .dollar {
  color: #5db0d7;
}

.dark .navcard {
  background: #292a2d;
  border-color: #3a3b3e;
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}

.dark .navcard:hover {
  box-shadow: 0 14px 30px rgb(0 0 0 / 55%);
}

.dark .navcard-head {
  color: #9999a1;
  background: #2f3033;
  border-bottom-color: #3a3b3e;
}

.dark .navcard-head .dollar {
  color: #5db0d7;
}

.dark .navcard-title {
  color: #e6e6e9;
}

.dark .navcard-count {
  color: #9999a1;
  background: #1e1f21;
}

.dark .navcard-sample {
  color: #6fc98c;
}

.dark .navcard-ellipsis {
  color: #5b5c60;
}

.dark .navcard-arrow {
  color: #5db0d7;
}

/* 목록 컨테이너 — 행을 구분선으로 나눔 */
[data-mode=list] .list {
  display: flex;
  flex-direction: column;
}

/* 글 한 줄 = .post : 모바일은 세로, sm+ 은 텍스트(좌)·썸네일(우) */
[data-mode=list] .post {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 -16px;
  padding: 20px 16px;
  border-top: 1px solid #eef0f3;
  border-radius: 10px;
  transition: background-color .15s ease;
}

[data-mode=list] .post:first-child {
  border-top: none;
}

[data-mode=list] .post:hover {
  background: #f7fbfd;
}

/* 썸네일 — 둥근 프레임 (글에 이미지가 없으면 자동으로 빠짐) */
[data-mode=list] .thumbnail {
  order: 2;
  flex: none;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid #e7edf2;
  border-radius: 12px;
}

[data-mode=list] .thumbnail img {
  display: block;
  width: 100%;
  height: 190px;
  max-width: none;
  -o-object-fit: cover;
  object-fit: cover;
}

/* 본문 영역 */
[data-mode=list] .description {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* 카테고리 = 파란 칩 */
[data-mode=list] .description>a {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  color: #2a7fb8;
  background: #ecf5fb;
  padding: 5px 10px;
  border-radius: 999px;
  transition: background-color .15s ease, color .15s ease;
}

/* 제목 */
[data-mode=list] .description h2 {
  margin-top: 11px;
}

[data-mode=list] .description h2 a {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: #23323c;
  transition: color .15s ease;
}

[data-mode=list] .post:hover .description h2 a {
  color: #2a7fb8;
}

/* 날짜 메타 (모노) */
[data-mode=list] .description time {
  margin-top: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #9aa9b4;
}

/* 요약 — 2줄 말줄임 */
[data-mode=list] .description p {
  margin-top: 9px;
  max-height: none;
  font-size: 13.5px;
  line-height: 1.7;
  color: #6b7c89;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[data-mode=list] .description p::after {
  display: none;
}

/* 댓글 수 — 기본 숨김 */
[data-mode=list] .list-cmt {
  display: none;
}

/* sm(640px)+ : 썸네일을 오른쪽 고정폭으로 */
@media (min-width: 640px) {
  [data-mode=list] .post {
    flex-direction: row;
    align-items: flex-start;
    gap: 22px;
  }

  [data-mode=list] .thumbnail {
    width: 150px;
    /* 이미지 윗변을 카테고리 칩이 아닌 제목(h2) 줄에 맞춤 */
    /* = 카테고리 칩 높이(약 21.5px) + h2 상단여백(11px) */
    margin-top: 32px;
  }

  [data-mode=list] .thumbnail img {
    width: 150px;
    height: 100px;
  }
}

/* ── 다크 모드 ── */
.dark [data-mode=list] .post {
  border-top-color: #2a2b2d;
}

.dark [data-mode=list] .post:hover {
  background: #26282b;
}

.dark [data-mode=list] .thumbnail {
  border-color: #34363a;
}

.dark [data-mode=list] .description>a {
  color: #74c5ed;
  background: rgb(93 176 215 / 16%);
}

.dark [data-mode=list] .description h2 a {
  color: #e6e7e9;
}

.dark [data-mode=list] .post:hover .description h2 a {
  color: #74c5ed;
}

.dark [data-mode=list] .description time {
  color: #7b828a;
}

.dark [data-mode=list] .description p {
  color: #9aa0a6;
}

/* 목록·검색 페이지 전체 배경 — 흰색 (홈은 #tt-body-index 로 따로 덮음) */
#post-list {
  background: #ffffff;
}

.dark #post-list {
  background: #1e1f21;
}

[data-mode=grid] .list {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem
}

@media (min-width: 768px) {
  [data-mode=grid] .list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem
  }
}

@media (min-width: 1100px) {
  [data-mode=grid] .list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem
  }
}

[data-mode=grid] .post {
  display: flex;
  flex-direction: column;
  row-gap: 1rem
}

[data-mode=grid] .post .thumbnail img {
  height: 16rem;
  width: 100%
}

[data-mode=grid] .post .description .category {
  display: none
}

[data-mode=grid] .post .description h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700
}

[data-mode=grid] .post .description time {
  display: none
}

[data-mode=grid] .post .description p {
  margin-top: 0.5rem;
  max-height: 3.5rem
}

[data-mode=grid] .post .description p::after {
  top: 1.75rem
}

[data-mode=zigzag] .list {
  display: flex;
  flex-direction: column;
  row-gap: 6rem
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .list {
    row-gap: 7rem
  }
}

[data-mode=zigzag] .post {
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 1rem
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post {
    flex-direction: row
  }
}

[data-mode=zigzag] .post:last-child::before {
  display: none
}

[data-mode=zigzag] .post::before {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: calc(100% / 2);
  height: 3rem;
  width: 0.125rem;
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
  --tw-content: '';
  content: var(--tw-content)
}

.dark [data-mode=zigzag] .post::before {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity))
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post::before {
    top: calc(100% + 1.5rem);
    left: calc(1100px / 2);
    height: 4rem
  }
}

[data-mode=zigzag] .post .thumbnail img {
  position: relative;
  z-index: 10;
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post .thumbnail img {
    height: calc(18rem + 1.75rem);
    width: calc(24rem + 5rem + 0.75rem);
    max-width: none
  }
}

[data-mode=zigzag] .post .description {
  row-gap: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 2.5rem
}

.dark [data-mode=zigzag] .post .description {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity))
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post .description {
    padding: 4rem
  }
}

[data-mode=zigzag] .post .description h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post .description h2 {
    font-size: 1.5rem;
    line-height: 2rem
  }
}

[data-mode=zigzag] .post .description p {
  margin-top: 0.75rem;
  max-height: 5rem
}

[data-mode=zigzag] .post .description p::after {
  top: calc(3.5rem + 0.25rem)
}

@media (min-width: 1100px) {
  [data-mode=zigzag] .post:nth-child(2n+1) img {
    --tw-translate-y: -1.5rem;
    --tw-translate-x: 1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }

  [data-mode=zigzag] .post:nth-child(2n) {
    flex-direction: row-reverse
  }

  [data-mode=zigzag] .post:nth-child(2n) img {
    --tw-translate-y: -1.5rem;
    --tw-translate-x: -1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
  }
}

/* ============================================================
   홈(tt-body-index) 전용 — 글 목록을 'git log --oneline' 터미널 로그로 재스타일.
   비(非)홈 페이지에는 영향이 없도록 모든 규칙을 #tt-body-index 로 스코프한다.
   데이터는 실제 s_list_rep 치환자(.post 내부)를 그대로 쓴다.
   ============================================================ */

/* 댓글 수는 홈 터미널에서만 노출 */
#post-list .list-cmt {
  display: none;
}

/* 터미널 헤더(‘$ git log --oneline’)는 홈에서만 노출 */
#post-list .term-head {
  display: none;
}

#tt-body-index #post-list {
  background: #EAF5FC;
  padding-top: 50px;
}

/* 목록·검색용 이미지 배너는 홈에서 숨김 */
#tt-body-index #post-list>header {
  display: none;
}

#tt-body-index #post-list .term-head {
  display: flex;
  align-items: center;
  max-width: 908px;
  margin: 0 auto;
  padding: 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: #7C97AB;
}

#tt-body-index #post-list .term-head .dollar,
#tt-body-index #post-list .term-head .all {
  color: #3E9BD6;
}

#tt-body-index #post-list .term-head .all {
  margin-left: auto;
}

/* .list → 투명 컨테이너 (HEAD 카드 + 행 박스를 따로 담음) */
#tt-body-index #post-list .list {
  display: block;
  width: auto;
  max-width: 908px;
  margin: 18px auto 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
}

/* 글 한 줄 = .post (썸네일 숨김, .description 이 실제 행) */
#tt-body-index #post-list .post {
  display: block;
  height: auto;
  min-height: 0;
  /* [data-mode=list] .post 의 20px 16px 패딩을 홈에선 제거(안쪽 .description 이 패딩 담당) */
  padding: 0;
  gap: 0;
  /* [data-mode=list] .post 의 border-radius:10px 이 행마다 새어 들어와
     사방이 둥글게 보이므로 0 으로 리셋 — 바깥 모서리는 아래
     nth-child(2)/last-child 규칙이 묶음 박스로 둥글게 처리한다. */
  border-radius: 0;
  border-bottom: 1px solid #EAF3FA;
}

#tt-body-index #post-list .post:last-child {
  border-bottom: none;
}

/* HEAD 아래 행들 = 하나의 둥근 흰 박스로 묶기 */
#tt-body-index #post-list .post:not(:first-child) {
  background: #fff;
  border-left: 1px solid #CCE5F4;
  border-right: 1px solid #CCE5F4;
}

#tt-body-index #post-list .post:nth-child(2) {
  border-top: 1px solid #CCE5F4;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

#tt-body-index #post-list .post:last-child:not(:first-child) {
  border-bottom: 1px solid #CCE5F4;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

#tt-body-index #post-list .post .thumbnail {
  display: none;
}

#tt-body-index #post-list .description {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 16px 20px;
  background: none;
}

/* 날짜·점·제목·#카테고리·댓글 수 순서로 재배치 */
#tt-body-index #post-list .description::before {
  content: "";
  order: 2;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #74C5ED;
}

#tt-body-index #post-list .description time {
  order: 1;
  flex: none;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #A6BCCB;
}

#tt-body-index #post-list .description h2 {
  order: 3;
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14.5px;
  font-weight: 400;
}

#tt-body-index #post-list .description h2 a {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #33536A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* .description 직계 a = 카테고리 링크 (제목은 h2 > a) */
#tt-body-index #post-list .description>a {
  order: 4;
  flex: none;
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #4FA66C;
}

#tt-body-index #post-list .description>a::before {
  content: "#";
}

#tt-body-index #post-list .list-cmt {
  order: 5;
  flex: none;
  display: inline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #A6BCCB;
}

/* 일반 행에서는 요약문 숨김 */
#tt-body-index #post-list .description p {
  display: none;
}

/* ── 첫 글 = HEAD: 독립 카드 (요약문 노출) ── */
#tt-body-index #post-list .post:first-child {
  margin-bottom: 14px;
  background: #fff;
  border: 1px solid #CCE5F4;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgb(90 150 200 / 12%);
  overflow: hidden;
}

#tt-body-index #post-list .post:first-child .description {
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 14px 22px 20px;
  /* 헤더줄(HEAD·pinned·날짜) 영역만 상단 띠로 #EDF7FD, 본문은 흰색 */
  background: linear-gradient(#EDF7FD 0, #EDF7FD 49px, #fff 46px);
}

/* 헤더줄: HEAD 뱃지 · ★ pinned · 날짜 */
#tt-body-index #post-list .post:first-child .description::before {
  content: "HEAD";
  order: 0;
  width: auto;
  height: auto;
  padding: 2px 9px;
  border-radius: 5px;
  background: #74C5ED;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  font-weight: 700;
}

#tt-body-index #post-list .post:first-child .description::after {
  content: "★ pinned";
  order: 1;
  margin-left: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #6FB7E6;
}

#tt-body-index #post-list .post:first-child .description time {
  order: 2;
  margin: 0 0 0 auto;
}

/* 제목 — 헤더와 본문을 가르는 구분선 위에 표시 */
#tt-body-index #post-list .post:first-child .description h2 {
  order: 3;
  flex-basis: 100%;
  margin: 14px -22px 0;
  padding: 16px 22px 0;
  border-top: 1px solid #DBEAF5;
}

#tt-body-index #post-list .post:first-child .description h2 a {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  color: #1F3A4D;
  white-space: normal;
}

#tt-body-index #post-list .post:first-child .description p {
  display: block;
  order: 4;
  flex-basis: 100%;
  margin-top: 10px;
  max-height: none;
  font-size: 13.5px;
  color: #5E7587;
  line-height: 1.75;
  /* 첫 줄만 노출, 넘치면 … 으로 잘라냄 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tt-body-index #post-list .post:first-child .description p::after {
  display: none;
}

/* 푸터줄: #카테고리 (좌) · 💬 댓글 (우) */
#tt-body-index #post-list .post:first-child .description>a {
  order: 5;
  margin-top: 16px;
}

#tt-body-index #post-list .post:first-child .list-cmt {
  order: 6;
  margin: 16px 0 0 auto;
}

/* ============================================================
   다크 모드 — 홈 터미널 글 목록(git log)의 색상만 다크 팔레트로 치환.
   레이아웃/구조 규칙은 그대로 두고 색(배경·테두리·글자)만 덮어쓴다.
   히어로 하단 페이드가 #1e1f21 로 끝나므로 본문도 동일 배경을 쓴다.
   ============================================================ */
.dark #tt-body-index #post-list {
  background: #1e1f21;
}

.dark #tt-body-index #post-list .term-head {
  color: #9999a1;
}

.dark #tt-body-index #post-list .term-head .dollar,
.dark #tt-body-index #post-list .term-head .all {
  color: #5db0d7;
}

/* 행 구분선 + 박스로 묶인 행들 */
.dark #tt-body-index #post-list .post {
  border-bottom-color: #252628;
}

.dark #tt-body-index #post-list .post:not(:first-child) {
  background: #292a2d;
  border-left-color: #3a3b3e;
  border-right-color: #3a3b3e;
}

.dark #tt-body-index #post-list .post:nth-child(2) {
  border-top-color: #3a3b3e;
}

.dark #tt-body-index #post-list .post:last-child:not(:first-child) {
  border-bottom-color: #3a3b3e;
}

.dark #tt-body-index #post-list .description::before {
  background: #74C5ED;
}

.dark #tt-body-index #post-list .description time {
  color: #8a8a92;
}

.dark #tt-body-index #post-list .description h2 a {
  color: #d4d4d8;
}

.dark #tt-body-index #post-list .description>a {
  color: #6fc98c;
}

.dark #tt-body-index #post-list .list-cmt {
  color: #8a8a92;
}

/* HEAD 카드 */
.dark #tt-body-index #post-list .post:first-child {
  background: #292a2d;
  border-color: #3a3b3e;
  box-shadow: 0 6px 18px rgb(0 0 0 / 45%);
}

.dark #tt-body-index #post-list .post:first-child .description {
  /* 헤더줄만 살짝 밝은 띠, 본문은 카드색 */
  background: linear-gradient(#2f3033 0, #2f3033 49px, #292a2d 46px);
}

.dark #tt-body-index #post-list .post:first-child .description::before {
  background: #74C5ED;
  color: #1e1f21;
}

.dark #tt-body-index #post-list .post:first-child .description::after {
  color: #6fb7e6;
}

.dark #tt-body-index #post-list .post:first-child .description h2 {
  border-top-color: #3a3b3e;
}

.dark #tt-body-index #post-list .post:first-child .description h2 a {
  color: #f4f4f6;
}

.dark #tt-body-index #post-list .post:first-child .description p {
  color: #9aa0a6;
}

/* s_list 는 홈·분류·검색·태그 페이지에 모두 들어오므로, 홈(tt-body-index)
   에서만 노출하고 그 외 목록 모드에서는 숨긴다. */
#guestbook-cta {
  display: none;
}

/* 풀폭 #EAF5FC 밴드 — 위쪽 post-list 배경과 이어짐. 콘텐츠는 가운데 정렬. */
#tt-body-index #guestbook-cta {
  display: block;
  background: #EAF5FC;
  padding: 48px 16px 56px;
}

@media (min-width: 1024px) {
  #guestbook-cta {
    padding: 56px 0 64px;
  }
}

/* 프롬프트 줄 ($ cd guestbook/) — Explore 의 term-prompt 와 동일 스타일 */
#guestbook-cta .gb-head {
  max-width: 908px;
  margin: 0 auto;
  font-size: 13px;
  color: #7C97AB;
}

#guestbook-cta .gb-dollar {
  color: #3E9BD6;
}

/* 카드 — 정적(클릭/hover 없음). 링크 역할은 '방명록 열기' 버튼만 담당. */
#guestbook-cta .gb-card {
  max-width: 908px;
  margin: 18px auto 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 12px 32px rgb(120 160 200 / 15%);
}

/* 터미널 타이틀바 (신호등 점 + 탭) */
#guestbook-cta .gb-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 18px;
  background: #EAF6FD;
  border-bottom: 1px solid #DCEDF8;
}

#guestbook-cta .gb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

#guestbook-cta .gb-dot.is-red {
  background: #F2A9A2;
}

#guestbook-cta .gb-dot.is-yellow {
  background: #F4D58C;
}

#guestbook-cta .gb-dot.is-green {
  background: #A7DDB0;
}

#guestbook-cta .gb-tab {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #7C97AB;
}

#guestbook-cta .gb-body {
  padding: 26px 28px 28px;
  background: #FFFFFF;
}

/* 프롬프트 한 줄 */
#guestbook-cta .gb-cmd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13.5px;
  line-height: 1.5;
}

#guestbook-cta .gb-user {
  color: #3E9BD6;
}

#guestbook-cta .gb-punc {
  color: #A8BDCE;
}

#guestbook-cta .gb-tilde {
  color: #6FB3DD;
}

#guestbook-cta .gb-echo {
  margin-left: 8px;
  color: #3A5468;
}

/* 카피 + 버튼 */
#guestbook-cta .gb-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-top: 18px;
  flex-wrap: wrap;
}

#guestbook-cta .gb-copy {
  min-width: 0;
}

#guestbook-cta .gb-lead {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #23445C;
  line-height: 1.3;
}

#guestbook-cta .gb-sub {
  margin-top: 11px;
  font-size: 13.5px;
  color: #7089A0;
  line-height: 1.75;
}

#guestbook-cta .gb-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 12px;
  background: #3E9BD6;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgb(62 155 214 / 28%);
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

/* hover/클릭은 이 버튼에만 — 살짝 떠오르며 색이 진해짐 */
#guestbook-cta .gb-btn:hover {
  background: #338ec9;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgb(62 155 214 / 36%);
}

#guestbook-cta .gb-arrow {
  font-size: 17px;
}

/* 푸터 안내 줄 */
#guestbook-cta .gb-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px dashed #D4E6F2;
  color: #A8BDCE;
  font-size: 12.5px;
}

#guestbook-cta .gb-status {
  color: #4FA66C;
}

/* ── 다크 모드 ── */
.dark #guestbook-cta {
  background: #1e1f21;
}

.dark #guestbook-cta .gb-head {
  color: #9999a1;
}

.dark #guestbook-cta .gb-dollar {
  color: #5db0d7;
}

.dark #guestbook-cta .gb-card {
  background: #292a2d;
  box-shadow: 0 12px 32px rgb(0 0 0 / 45%);
}

.dark #guestbook-cta .gb-bar {
  background: #2f3033;
  border-bottom-color: #3a3b3e;
}

.dark #guestbook-cta .gb-tab {
  color: #9aa0a6;
}

.dark #guestbook-cta .gb-body {
  background: #232427;
}

.dark #guestbook-cta .gb-user {
  color: #5db0d7;
}

.dark #guestbook-cta .gb-punc {
  color: #3E9BD6;
}

.dark #guestbook-cta .gb-echo {
  color: #c4ccd2;
}

.dark #guestbook-cta .gb-lead {
  color: #f4f4f6;
}

.dark #guestbook-cta .gb-sub {
  color: #9aa0a6;
}

.dark #guestbook-cta .gb-foot {
  border-top-color: #3a3b3e;
  color: #8a8a92;
}

#paging {
  gap: 22px;
}

/* 숫자 링크 */
#paging a {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1;
  color: #8794a0;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
  transform: translateY(3px);
  transition: color .15s ease, border-color .15s ease;
}

#paging a:hover {
  color: #2a7fb8;
  border-bottom-color: #bfe0f0;
}

/* 현재 페이지 — selected 가 a 자신이든 a 안의 span 이든 모두 커버.
     밑줄(2px)은 a 가 가진 투명 border 를 재사용하므로 색을 a 쪽에 준다 */
#paging a.selected,
#paging a:has(.selected) {
  font-weight: 700;
  color: #1f3a4d;
  border-bottom-color: #5db0d7;
}

/* selected 가 span 인 경우: 자체 색은 부모 a 를 따라가게(밑줄은 a 가 그림) */
#paging .selected {
  color: inherit;
}

/* 현재 페이지 '다음' 숫자 — 다음 페이지 힌트 (밑줄 #bfe0f0) */
#paging li:has(.selected)+li>a:not(:has(.fa)) {
  color: #2a7fb8;
  border-bottom-color: #bfe0f0;
}

/* 이전/다음 화살표 — 밑줄 없이 아이콘만 */
#paging a:has(.fa) {
  border-bottom: 0;
  padding-bottom: 0;
  transform: none;
  color: #9aa9b4;
  font-size: 16px;
}

#paging a:has(.fa):hover {
  color: #2a7fb8;
}

/* '이전'/'다음' 라벨은 숨기고 화살표 아이콘만 노출 */
#paging .text-hidden {
  display: none;
}

/* ── 다크 모드 (코드베이스 팔레트에 맞춤) ── */
.dark #paging a {
  color: #8a8a92;
}

.dark #paging a:hover {
  color: #74c5ed;
  border-bottom-color: rgb(116 197 237 / 40%);
}

.dark #paging a.selected,
.dark #paging a:has(.selected) {
  color: #f4f4f6;
  border-bottom-color: #74c5ed;
}

.dark #paging .selected {
  color: inherit;
}

.dark #paging li:has(.selected)+li>a:not(:has(.fa)) {
  color: #74c5ed;
  border-bottom-color: rgb(116 197 237 / 40%);
}

.dark #paging a:has(.fa) {
  color: #8a8a92;
}

.dark #paging a:has(.fa):hover {
  color: #74c5ed;
}

/* 시리즈 그래프는 홈에서만 노출 */
#terminal-series {
  display: none;
  background: #EAF5FC;
}

#tt-body-index #terminal-series {
  display: block;
}

.term-series-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 50px 36px;
}

.term-prompt {
  font-size: 13px;
  color: #7C97AB;
}

.term-prompt .dollar {
  color: #3E9BD6;
}

.term-commits {
  margin-top: 22px;
  padding-left: 6px;
}

.term-commit {
  display: flex;
  gap: 18px;
  padding-bottom: 22px;
}

.term-commit-rail {
  position: relative;
  flex: none;
  width: 14px;
  display: flex;
  justify-content: center;
}

.term-commit-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #EAF5FC;
  border: 2px solid #74C5ED;
  z-index: 1;
  margin-top: 3px;
}

.term-commit-line {
  position: absolute;
  top: 14px;
  bottom: -22px;
  width: 2px;
  background: #CCE5F4;
}

.term-commit-body {
  flex: 1;
  min-width: 0;
}

.term-commit-meta {
  font-size: 11.5px;
  color: #D49A2E;
}

.term-commit-title {
  font-size: 15px;
  font-weight: 600;
  color: #234055;
  margin-top: 6px;
}

.term-commit-desc {
  font-size: 13px;
  color: #5E7587;
  margin-top: 5px;
  line-height: 1.7;
}

/* ===== 다크 모드 ===== */
.dark #terminal-series {
  background: #1e1f21;
}

.dark #terminal-series .term-prompt {
  color: #9999a1;
}

.dark #terminal-series .term-prompt .dollar {
  color: #5db0d7;
}

/* 점의 가운데는 페이지 배경색으로 뚫어 보이게 한다 */
.dark .term-commit-dot {
  background: #1e1f21;
  border-color: #74C5ED;
}

.dark .term-commit-line {
  background: #3a3b3e;
}

.dark .term-commit-meta {
  color: #e0b45a;
}

.dark .term-commit-title {
  color: #e6e6e9;
}

.dark .term-commit-desc {
  color: #9aa0a6;
}

/* 터미널 푸터는 홈에서만 노출 */
#terminal-footer {
  display: none;
  background: #EAF5FC;
}

#tt-body-index #terminal-footer {
  display: block;
}

/* 홈에서는 터미널 푸터가 자체 여백을 가지므로 #main 하단 패딩 제거 (흰 띠 방지) */
#tt-body-index #main {
  padding-bottom: 0;
}

.term-footer-inner {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 36px;
}

.term-footer-rule {
  border-top: 1px solid #CCE5F4;
}

.term-footer-bar {
  display: flex;
  align-items: center;
  padding: 26px 0 44px;
}

.term-footer-brand {
  font-size: 15px;
  font-weight: 700;
  color: #234055;
}

.term-footer-dot {
  color: #3E9BD6;
}

.term-footer-copy {
  margin-left: auto;
  font-size: 12px;
  color: #A6BCCB;
}

/* ===== 다크 모드 ===== */
.dark #terminal-footer {
  background: #1e1f21;
}

.dark .term-footer-rule {
  border-top-color: #3a3b3e;
}

.dark .term-footer-brand {
  color: #e6e6e9;
}

.dark .term-footer-dot {
  color: #5db0d7;
}

.dark .term-footer-copy {
  color: #8a8a92;
}

/* 글(permalink) 페이지에서만 #main 하단 여백까지 흰색 — #permalink 가 글 페이지에만 존재 */
#main:has(#permalink) {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

#sidebar #counter .visitor-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

#sidebar #counter .visitor-ico {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #eaf1fc;
  color: #3b7ddd;
}

.dark #sidebar #counter .visitor-ico {
  background: rgb(255 255 255 / 10%);
  color: #9ec5f5;
}

#sidebar #counter .visitor-label {
  color: #8a93a3;
  font-size: 13px;
  font-weight: 600;
}

.dark #sidebar #counter .visitor-label {
  color: #9aa3b2;
}

#sidebar #counter .visitor-total {
  margin-left: auto;
  font-size: 20px;
  font-weight: 500;
  color: #262b33;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.dark #sidebar #counter .visitor-total {
  color: #f1f3f6;
}

#sidebar #counter .visitor-bottom {
  display: flex;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eef0f4;
}

.dark #sidebar #counter .visitor-bottom {
  border-top-color: rgb(255 255 255 / 10%);
}

#sidebar #counter .visitor-cell {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}

#sidebar #counter .visitor-cell-label {
  font-size: 13px;
  color: #8a93a3;
  font-weight: 600;
}

.dark #sidebar #counter .visitor-cell-label {
  color: #9aa3b2;
}

#sidebar #counter .visitor-cell-num {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: #262b33;
  font-variant-numeric: tabular-nums;
}

.dark #sidebar #counter .visitor-cell-num {
  color: #f1f3f6;
}

#sidebar #counter .visitor-divider {
  width: 1px;
  background: #eef0f4;
  margin: 0 16px;
}

.dark #sidebar #counter .visitor-divider {
  background: rgb(255 255 255 / 10%);
}

#sidebar #category .tt_category .link_tit img,
#sidebar #category .tt_category .link_item img,
#sidebar #category .tt_category .link_sub_item img {
  display: none;
}

#sidebar #category .tt_category .link_tit .c_cnt,
#sidebar #category .tt_category .link_item .c_cnt,
#sidebar #category .tt_category .link_sub_item .c_cnt {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

/* 타이틀 — 구분선으로 목록과 분리, 개수는 우측 정렬 */
#sidebar #category .tt_category .link_tit {
  margin-bottom: 0.5rem;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
}

.dark #sidebar #category .tt_category .link_tit {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#sidebar #category .tt_category .link_tit {
  border-bottom: 1px solid rgb(93 176 215 / 20%);
}

.dark #sidebar #category .tt_category .link_tit {
  border-bottom-color: rgb(255 255 255 / 10%);
}

#sidebar #category .tt_category ul {
  display: flex;
  flex-direction: column;
  row-gap: 0.125rem;
}

#sidebar #category .tt_category ul li {
  position: relative;
  font-size: 0.8125rem;
  --tw-text-opacity: 1;
  color: rgb(41 42 45 / var(--tw-text-opacity));
}

.dark #sidebar #category .tt_category ul li {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

/* 폴더블 화살표 — 행 우측 상단에 정렬 (첫 줄 기준) */
#sidebar #category .tt_category ul li i {
  position: absolute;
  right: 0.5rem;
  top: 0.625rem;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#sidebar #category .tt_category .link_item,
#sidebar #category .tt_category .link_sub_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  padding-right: 1.75rem;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#sidebar #category .tt_category .link_item:hover,
#sidebar #category .tt_category .link_sub_item:hover {
  background: rgb(93 176 215 / 12%);
}

.dark #sidebar #category .tt_category .link_item:hover,
.dark #sidebar #category .tt_category .link_sub_item:hover {
  background: rgb(255 255 255 / 8%);
}

/* 하위 분류 — 들여쓰기로 계층 표현 (개수 열은 부모와 동일하게 유지) */
#sidebar #category .tt_category .sub_category_list {
  margin-top: 0.125rem;
}

#sidebar #category .tt_category .sub_category_list .link_sub_item {
  padding-left: 1.5rem;
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark #sidebar #category .tt_category .sub_category_list .link_sub_item {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

#sidebar #blogmenu ul {

  display: flex;

  flex-direction: column;

  row-gap: 0.5rem
}

#sidebar #blogmenu ul a {

  font-size: 0.875rem;

  line-height: 1.25rem
}

#sidebar .sidebar-element h2 {

  margin-bottom: 1rem;

  font-size: 0.875rem;

  line-height: 1.25rem;

  font-weight: 700;

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity));
}

.dark #sidebar .sidebar-element h2 {

  --tw-text-opacity: 1;

  color: rgb(244 244 246 / var(--tw-text-opacity));
}

#sidebar .sidebar-element i {

  --tw-text-opacity: 1;

  color: rgb(93 176 215 / var(--tw-text-opacity));
}

/* 블루 검색 버튼 안의 아이콘은 흰색 (블루-on-블루 방지) */
#sidebar .sidebar-element .search-go i {

  --tw-text-opacity: 1;

  color: rgb(255 255 255 / var(--tw-text-opacity));
}

#sidebar .sidebar-element a:not(.link_tit):not(.profile-link) {

  --tw-text-opacity: 1;

  color: rgb(102 102 110 / var(--tw-text-opacity));

  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;

  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

  transition-duration: 150ms;
}

#sidebar .sidebar-element a:not(.link_tit):not(.profile-link):hover {

  --tw-text-opacity: 1;

  color: rgb(93 176 215 / var(--tw-text-opacity));
}

.dark #sidebar .sidebar-element a:not(.link_tit):not(.profile-link) {

  --tw-text-opacity: 1;

  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.dark #sidebar .sidebar-element a:not(.link_tit):not(.profile-link):hover {

  --tw-text-opacity: 1;

  color: rgb(93 176 215 / var(--tw-text-opacity));
}

/* 프로스티드 글래스 카드 — Copyright·검색 영역은 잡지 않음 */
/* NOTE: 이 스킨의 @apply 는 슬래시 투명도(bg-white/55 등)를 지원하지 않아 raw CSS 사용 */
#sidebar .sidebar-element:not(:has(#copyright)):not(:has(#search)) {

  margin-left: 0.75rem;

  margin-right: 0.75rem;

  width: calc(16rem - 1.5rem);

  border-radius: 1rem;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-top: 1rem;

  padding-bottom: 1rem;

  border-width: 1px;

  --tw-backdrop-blur: blur(12px);

  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);

  background: rgb(255 255 255 / 55%);
  border-color: rgb(255 255 255 / 60%);
  box-shadow: 0 8px 24px -10px rgb(93 176 215 / 45%);
}

.dark #sidebar .sidebar-element:not(:has(#copyright)):not(:has(#search)) {
  background: rgb(41 42 45 / 50%);
  border-color: rgb(255 255 255 / 10%);
  box-shadow: 0 8px 24px -10px rgb(0 0 0 / 50%);
}

/* 검색은 카드 없이 알약만 단독으로 — 카드와 같은 폭·여백 유지 */
#sidebar .sidebar-element:has(#search) {

  margin-left: 0.75rem;

  margin-right: 0.75rem;

  width: calc(16rem - 1.5rem);
}

/* Copyright 은 카드 없이 평범한 텍스트로 정렬만 맞춤 */
#sidebar .sidebar-element:has(#copyright) {

  margin-left: 0.75rem;

  margin-right: 0.75rem;

  padding-left: 1rem;

  padding-right: 1rem;

  padding-top: 0.5rem;
}

/* 비행기 아이콘이 버튼 밖으로 날아가도 잘리지 않도록 */
.subscription {
  overflow: visible;
}

.subscription i {
  transition: transform .3s ease;
}

/* 호버 시 비행기가 날아올랐다가 다시 들어오는 애니메이션 */
.subscription:hover i {
  animation: planeaway .7s ease-in-out;
}

@keyframes planeaway {
  0% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }

  45% {
    transform: translate(14px, -14px) rotate(12deg);
    opacity: 0;
  }

  46% {
    transform: translate(-12px, 12px) rotate(-12deg);
    opacity: 0;
  }

  100% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
}

#bottom a,
#bottom button {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 1px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(230 230 233 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
  outline-width: 0px
}

#bottom a:hover,
#bottom button:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity))
}