/*
! tailwindcss v3.2.7 | 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)
*/


@font-face {
    font-family: 'catagory-title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* 프로필 폰트 */
@font-face {
    font-family: 'profile';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2411-3@1.0/Ownglyph_ParkDaHyun.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

/* 홈 배경 폰트 */
@font-face {
  font-family: 'home-title';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/IAMAPLAYER.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 글 제목 폰트 */
@font-face {
    font-family: 'h2-title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'h3-title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2410-3@1.0/Title_Light.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
@font-face {
    font-family: 'category-title';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}
/* 카테고리 폰트 */

#profile{
  font-family: 'profile';
  font-size: 23px;
}
#profile .blogger {
  font-size: 18px;
}


.tt_category .link_tit {
  font-family: 'category-title';
}


*,
::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: SUIT, ui-sans-serif, system-ui, 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: "Source Code Pro", 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{
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

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;
}

a,
button {
  pointer-events: auto;
}

*,
::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: ;
}


.index-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1100px) {

  .index-container {
    margin-left: auto;
    margin-right: auto;
    width: var(--h-idx);
    padding-left: 0px;
    padding-right: 0px;
  }
}

.permalink-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1100px) {

  .permalink-container {
    margin-left: auto;
    margin-right: auto;
    width: var(--h-pem);
    max-width: 1100px;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* https://fontawesome.com/ */
.font-awesome {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
}

.fa-chevron-right {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f105';
  content: var(--tw-content);
}

.fa-circle-arrow-right {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f0a9';
  content: var(--tw-content);
}

.fa-tag {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f02b';
  content: var(--tw-content);
}

.fa-star {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  --tw-content: '\f005';
  content: var(--tw-content);
}

.fa-xmark {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f00d';
  content: var(--tw-content);
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.-left-\[calc\(theme\(spacing\.s\)\)\] {
  left: calc(calc(var(--h-s)) * -1);
}

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

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

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

.bottom-3 {
  bottom: 0.75rem;
}

.left-0 {
  left: 0px;
}

.left-auto {
  left: auto;
}

.right-0 {
  right: 0px;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-12 {
  top: 3rem;
}

.top-20 {
  top: 5rem;
}

.top-3 {
  top: 0.75rem;
}

.top-4 {
  top: 1rem;
}

.top-5 {
  top: 1.25rem;
}

.top-px {
  top: 1px;
}

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

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

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

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

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

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

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

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

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

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

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

.m-0 {
  margin: 0px;
}

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

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

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

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

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

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

.mb-10 {
  margin-bottom: 2.5rem;
}

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

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

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

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

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

.mb-9 {
  margin-bottom: 2.25rem;
}

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

.ml-4 {
  margin-left: 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

.mt-9 {
  margin-top: 2.25rem;
}

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

.block {
  display: block;
}

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

.flex {
  display: flex;
}

.table {
  display: table;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.h-0 {
  height: 0px;
}

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

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-14 {
  height: 3.5rem;
}

.h-20 {
  height: 5rem;
}

.h-24 {
  height: 6rem;
}

.h-5 {
  height: 1.25rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[calc\(theme\(spacing\.24\)\)\] {
  height: calc(6rem);
}

.h-full {
  height: 100%;
}

.h-h {
  height: var(--h-h);
}

.h-max {
  height: -moz-max-content;
  height: max-content;
}

.h-min {
  height: -moz-min-content;
  height: min-content;
}

.h-screen {
  height: 100vh;
}

.max-h-14 {
  max-height: 3.5rem;
}

.max-h-20 {
  max-height: 5rem;
}

.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-\[theme\(spacing\.h\)\] {
  min-height: var(--h-h);
}

.w-0 {
  width: 0px;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-14 {
  width: 3.5rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-48 {
  width: 12rem;
}

.w-56 {
  width: 14rem;
}

.w-64 {
  width: 16rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

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

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

.w-full {
  width: 100%;
}

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

.w-s {
  width: var(--h-s);
}

.w-screen {
  width: 100vw;
}

.min-w-max {
  min-width: -moz-max-content;
  min-width: max-content;
}

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

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

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

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

.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));
}

.scale-75 {
  --tw-scale-x: .75;
  --tw-scale-y: .75;
  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 0.6s linear infinite;
}

@keyframes pulse {

  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.resize-none {
  resize: none;
}

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

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

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

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

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

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

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

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

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

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-x-0 {
  -moz-column-gap: 0px;
  column-gap: 0px;
}

.gap-x-0\.5 {
  -moz-column-gap: 0.125rem;
  column-gap: 0.125rem;
}

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

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

.gap-x-2\.5 {
  -moz-column-gap: 0.625rem;
  column-gap: 0.625rem;
}

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

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

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

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

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

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

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

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

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

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

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

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

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

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

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

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

.rounded {
  border-radius: 0.25rem;
}

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

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

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

.rounded-none {
  border-radius: 0px;
}

.rounded-sm {
  border-radius: 0.125rem;
}

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

.rounded-l-md {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

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

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

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

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

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

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

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

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

.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-b-h-300 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(230 230 233 / var(--tw-border-opacity));
}

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

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

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

.bg-h-100\/50 {
  background-color: rgb(255 255 255 / 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-h-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

.bg-h-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / 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-transparent {
  background-color: transparent;
}

.bg-none {
  background-image: none;
}

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

.p-0 {
  padding: 0px;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

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

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

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

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

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

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

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

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

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

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

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

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

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

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

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

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

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

.pb-0 {
  padding-bottom: 0px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

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

.pb-2 {
  padding-bottom: 0.5rem;
}

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

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

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

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

.pl-\[1\.1rem\] {
  padding-left: 1.1rem;
}

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

.pt-0 {
  padding-top: 0px;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-7 {
  padding-top: 1.75rem;
}

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

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

.pt-\[100\%\] {
  padding-top: 100%;
}

.pt-\[66\.66\%\] {
  padding-top: 66.66%;
}

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

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

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

.font-\[initial\] {
  font-family: initial;
}

.font-sans {
  font-family: SUIT, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

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

.text-2xs {
  font-size: 0.625rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

.leading-8 {
  line-height: 2rem;
}

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

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

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

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

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

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

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

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

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

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-70 {
  opacity: 0.7;
}

.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);
}

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

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

.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);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-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-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, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-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;
}

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

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

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

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

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

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

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

.content-\[\'\\f0ab\'\] {
  --tw-content: '\f0ab';
  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;
}

/* 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));
}

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

.before\:fa-star::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  --tw-content: '\f005';
  content: var(--tw-content);
}

.before\:fa-paper-plane::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f1d8';
  content: var(--tw-content);
}

.before\:fa-lock-open::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f3c1';
  content: var(--tw-content);
}

.before\:fa-xmark::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f00d';
  content: var(--tw-content);
}

.before\:fa-ellipsis-vertical::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f142';
  content: var(--tw-content);
}

.before\:fa-thumbtack::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f08d';
  content: var(--tw-content);
}

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

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

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

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

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

.before\:hidden::before {
  content: var(--tw-content);
  display: none;
}

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

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

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

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

.before\:from-transparent::before {
  content: var(--tw-content);
  --tw-gradient-from: transparent;
  --tw-gradient-to: rgb(0 0 0 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.before\:font-bold::before {
  content: var(--tw-content);
  font-weight: 700;
}

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

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

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

.before\:opacity-100::before {
  content: var(--tw-content);
  opacity: 1;
}

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

.last-of-type\:pb-8:last-of-type {
  padding-bottom: 2rem;
}

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

.empty\:before\:content-\[attr\(data-empty\)\]:empty::before {
  --tw-content: attr(data-empty);
  content: var(--tw-content);
}

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

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

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

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

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

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

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

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

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

.dark .dark\:border-b-h-600 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(53 54 56 / 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\:bg-h-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

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

.dark .dark\:bg-h-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / 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 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 31 33 / var(--tw-bg-opacity));
}

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

.dark .dark\:text-h-200 {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / 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-400 {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

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

.dark .dark\:opacity-100 {
  opacity: 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 .before\:dark\:text-h-200::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

.dark .dark\:before\:text-h-200::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-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\: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-60 {
    right: -15rem;
  }

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

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

  .max-2xl\:z-\[201\] {
    z-index: 201;
  }

  .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\:pr-14 {
    padding-right: 3.5rem;
  }

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

  .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\:hidden {
    display: none;
  }

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

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

  .max-md\:hidden {
    display: none;
  }
}

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

  .max-sm\:flex {
    display: flex;
  }

  .max-sm\:flex-col {
    flex-direction: column;
  }
}

@media (min-width: 640px) {

  .sm\:mb-5 {
    margin-bottom: 1.25rem;
  }

  .sm\:h-64 {
    height: 16rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

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

  .sm\:grow {
    flex-grow: 1;
  }

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

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

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

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

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

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

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

  .sm\:pl-10 {
    padding-left: 2.5rem;
  }

  .sm\:pr-10 {
    padding-right: 2.5rem;
  }

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

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

@media (min-width: 768px) {

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

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

@media (min-width: 1100px) {

  .lg\:mb-16 {
    margin-bottom: 4rem;
  }

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

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

  .lg\:gap-y-16 {
    row-gap: 4rem;
  }

  .lg\:gap-y-8 {
    row-gap: 2rem;
  }

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

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

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

@media (min-width: 1400px) {

  .xl\:invisible {
    visibility: hidden;
  }

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

  .xl\:w-c {
    width: var(--h-c);
  }

  .xl\:pl-s {
    padding-left: var(--h-s);
  }
}

@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\(\(\(1100px\+theme\(spacing\.pem\)\)\/2\)\+theme\(spacing\.5\)\)\] {
    margin-left: calc(((1100px + var(--h-pem)) / 2) + 1.25rem);
  }

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

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

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

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

#shortcutLayer {

  --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 #shortcutLayer {

  --tw-bg-opacity: 1;

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

#shortcutLayer .btn_doc_close {

  border-width: 0px;

  --tw-bg-opacity: 1;

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

  --tw-text-opacity: 1;

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

.dark #shortcutLayer .btn_doc_close {

  --tw-bg-opacity: 1;

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

#shortcutLayer h2,
#shortcutLayer h3 {

  font-weight: 700
}

#shortcutLayer h2,
#shortcutLayer h3,
#shortcutLayer th,
#shortcutLayer td,
#shortcutLayer p {

  --tw-border-opacity: 1;

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

  --tw-text-opacity: 1;

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

.dark #shortcutLayer h2,
.dark #shortcutLayer h3,
.dark #shortcutLayer th,
.dark #shortcutLayer td,
.dark #shortcutLayer p {

  --tw-border-opacity: 1;

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

  --tw-text-opacity: 1;

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

[data-tistory-react-app=Comment] .tt-comment-cont * {
  font-family: SUIT, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-box-total {
  display: none
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt_cheers_msg {
  display: none
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-txt-mention {
  margin-right: 0.25rem;
  border-radius: 0.25rem;
  background-color: transparent;
  padding: 0px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 85 68 / var(--tw-text-opacity))
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-txt-mention::before {
  content: var(--tw-content);
  display: none
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-txt-mention {
  --tw-text-opacity: 1;
  color: rgb(93 176 215 / var(--tw-text-opacity))
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt_ico_profile,
[data-tistory-react-app=Comment] .tt-comment-cont .tt_ico_fixed,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-xe-input-helper,
[data-tistory-react-app=Comment] .tt-comment-cont .tt_ico_lock,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-button-modify {
  margin: 0px !important;
  height: -moz-max-content !important;
  height: max-content !important;
  width: -moz-max-content !important;
  width: max-content !important;
  overflow: visible !important;
  background-image: none !important;
  --tw-text-opacity: 1 !important;
  color: rgb(153 153 161 / var(--tw-text-opacity)) !important
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-account {
  display: flex;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-account input {
  box-sizing: border-box;
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 1.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-account input {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: 0.5rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 1.25rem;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g .tt_txt_user {
  margin-bottom: 0.75rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g .tt_txt_user {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g textarea,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g div {
  height: -moz-min-content;
  height: min-content;
  resize: none;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  font-size: 0.875rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g textarea,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g div {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write {
  display: flex;
  justify-content: flex-end;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write>div {
  display: flex;
  -moz-column-gap: 0.5rem;
  column-gap: 0.5rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label:hover,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel:hover,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:hover,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label:hover,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel:hover,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:hover,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register {
  margin: 0px;
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  min-width: -moz-max-content;
  min-width: max-content;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border-width: 0px;
  padding: 0px;
  font-size: 0;
  outline-width: 0px;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-input-helper::before,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel::before,
[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-input-helper::before,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel::before,
.dark [data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label input[type="checkbox"]:checked+.tt-xe-input-helper::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f023';
  content: var(--tw-content);
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label .tt-xe-input-helper::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f3c1';
  content: var(--tw-content);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f00d';
  content: var(--tw-content);
  font-size: 1rem;
  line-height: 1.5rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f1d8';
  content: var(--tw-content);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-account input {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-account input {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g .tt_txt_user {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g .tt_txt_user {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g textarea,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g div {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g textarea,
.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-textarea .tt-inner-g div {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register,
[data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-xe-label,
.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn-cancel,
.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register,
.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-item-reply form .tt-area-write .tt_wrap_write .tt-box-write .tt-btn_register:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  border-width: 0px;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt_btn_prev_more {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.75rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
  transition-duration: 200ms;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt_btn_prev_more:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt_btn_prev_more::after {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  margin-left: 0.5rem;
  font-weight: 700;
  --tw-content: '\f0ab';
  content: var(--tw-content);
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply {
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 2rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply::before {
  content: var(--tw-content);
  display: none;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply.rp_general {
  border-radius: 0px;
  --tw-border-opacity: 1;
  border-color: rgb(230 230 233 / var(--tw-border-opacity));
  background-color: transparent;
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 2rem;
  padding-bottom: 0px;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply.rp_general:last-of-type {
  border-bottom-width: 1px;
  padding-bottom: 2rem;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply.rp_general {
  --tw-border-opacity: 1;
  border-color: rgb(53 54 56 / var(--tw-border-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt_cmt_info {
  display: flex;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt_cmt_info .tt_ico_fixed {
  position: relative;
  top: 1px;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt_cmt_info .tt_ico_fixed::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f08d';
  content: var(--tw-content);
  font-size: 0.75rem;
  line-height: 1rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt_cmt_info .tt_txt_g {
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt {
  position: relative;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta {
  display: flex;
  -moz-column-gap: 0.375rem;
  column-gap: 0.375rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta .tt-link-user {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta .tt-link-user {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta .tt_cmt_profile {
  display: none;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta .tt_ico_lock {
  font-size: 0.75rem;
  line-height: 1rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-meta .tt_ico_fixed {
  display: none;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-desc {
  padding-right: 1.75rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-desc .tt_desc {
  font-size: 0.875rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-desc .tt_desc {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info {
  display: flex;
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
  padding-top: 1rem;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .tt_date {
  padding-top: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .tt-wrap-link-comment {
  padding-left: 0px;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .tt-wrap-link-comment::before {
  display: none;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .tt-wrap-link-comment .tt-link-comment .tt_txt_g {
  padding-top: 0px;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .tt-wrap-link-comment .tt-link-comment .tt_num_g {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-wrap-info .more {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify {
  position: absolute;
  top: 0px;
  right: 0px;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-button-modify {
  background-color: transparent;
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-button-modify::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f142';
  font-size: 0.75rem;
  line-height: 1rem;
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-button-modify:hover {
  background-color: transparent;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-button-modify::before {
  content: var(--tw-content);
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify {
  top: 1.25rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / 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 [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify li a {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify li a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify li a {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt-box-modify .tt-list-modify li a:hover {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd {
  --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 [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_inp_g {
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity));
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_inp_g {
  --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));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_btn_submit {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_btn_submit:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_btn_submit {
  --tw-bg-opacity: 1;
  background-color: rgb(102 102 110 / var(--tw-bg-opacity));
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_btn_submit:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(102 102 110 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-wrap-cmt .tt-box-content .tt_box_pwd .tt_form_pwd .tt_btn_submit .tt_ico_check {
  --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);
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-list-reply-comment {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  border-radius: 0.375rem;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 2rem;
}

.dark [data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-list-reply-comment {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
}

[data-tistory-react-app=Comment] .tt-comment-cont .tt-area-reply .tt-list-reply .tt-item-reply .tt-list-reply-comment .tt-item-reply {
  border-width: 0px;
  padding: 0px;
}

#global-header .tit:empty::before {
  --tw-content: attr(data-empty);
  content: var(--tw-content)
}

#header[data-header-style=simple] .img {
  display: none
}

#header[data-header-style=simple] .info {
  height: var(--h-h)
}

#header[data-header-style=thumbnail] {

  position: relative
}

#header[data-header-style=thumbnail] .img {

  height: var(--h-h)
}

#header[data-header-style=thumbnail] .img::before {

  content: var(--tw-content);

  height: var(--h-h)
}

#header[data-header-style=thumbnail] .img+.info {

  height: var(--h-h);

  border-width: 0px;

  --tw-text-opacity: 1;

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

#header[data-header-style=screen] {

  position: relative
}

#header[data-header-style=screen] .img {

  height: 100vh
}

#header[data-header-style=screen] .img::before {

  content: var(--tw-content);

  height: 100vh
}

#header[data-header-style=screen] .img+.info {

  height: 100vh;

  border-width: 0px;

  --tw-text-opacity: 1;

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

#article .container_postbtn .btn_subscription::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  --tw-content: '\f005';
  font-size: 0.875rem;
  line-height: 1.25rem;
  content: var(--tw-content);
  font-weight: 700;
}

#article .container_postbtn .btn_subscription .txt_state {
  position: absolute !important;
  margin: -1px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
}

#article .container_postbtn .btn_subscription .txt_tool_id,
#article .container_postbtn .btn_subscription .ico_check_type1 {
  display: none;
}

#article .contents_style {

  padding: 0px;

  text-align: left;

  line-height: 2;

  --tw-text-opacity: 1;

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

.dark #article .contents_style {

  --tw-text-opacity: 1;

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

#article .contents_style a {

  --tw-text-opacity: 1;

  color: rgb(68 85 255 / var(--tw-text-opacity));
  text-decoration-thickness: 0px
}

.dark #article .contents_style a {

  --tw-text-opacity: 1;

  color: rgb(93 176 215 / var(--tw-text-opacity))
}

#article .contents_style h2,
#article .contents_style h3,
#article .contents_style h4 {

  margin-top: 1.25rem;

  margin-bottom: 1.25rem;

  scroll-margin-top: 5rem;

  font-weight: 500
}

#article .contents_style h2 a,
#article .contents_style h3 a,
#article .contents_style h4 a {

  --tw-text-opacity: 1;

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

.dark #article .contents_style h2 a,
.dark #article .contents_style h3 a,
.dark #article .contents_style h4 a {

  --tw-text-opacity: 1;

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

/* h2, h3... 제목 스타일 변경 (start) */

#content .contents_style h2 {
  font-family: 'h2-title';
  font-size: 1.25rem !important;
  position: relative;
  margin-top: 2.5rem;   /* 선 위 공간 */
  padding-top: 4.5rem;  /* 선과 제목 사이 */
  scroll-margin-top: 6rem;
}

#content .contents_style h2:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 60vw;                 /* 화면 전체(풀-블리드) */
  transform: translateX(-50%);
  height: 2px;                  /* 깔끔 포인트: 1px 헤어라인 */
  opacity: .16;                 /* 진하기(0.18~0.28 사이 취향) */
  background: linear-gradient(to right, transparent, currentColor, transparent);
  pointer-events: none;
}



@media (min-width: 1100px) {
  #content .contents_style h2 {
  }
}

#content .contents_style h3 {
  font-family: 'h3-title';

  font-size: 1.15rem !important;
  line-height: 1.75rem;
  font-weight: 600;

  --tw-border-opacity: 0.7;
  border-bottom: 1px solid rgb(230 230 233 / var(--tw-border-opacity)) !important;
  padding-bottom: 0.5rem;
  padding-top: 1.5em;
  margin-bottom: 1rem;
  
}


/* h2 바로 뒤에 오는 h3만 패딩 제거 */
#content .contents_style h2 + h3 {
  padding-top: 0;
}

#content .contents_style h4 {
  font-size: 1rem;
  line-height: 0.9rem;
  font-weight:700;

  padding-top: 2em;
}

@media (min-width: 1100px) {
  #content .contents_style h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
/* h2 바로 뒤에 오는 h3 패딩 제거 */
#content .contents_style .h2-box > h2 + .h2-body h3:first-child {
  padding-top: 0;
}

/* h2 바로 뒤에 오는 h4 패딩 제거 */
#content .contents_style .h2-box > h2 + .h2-body h4:first-child {
  padding-top: 0;
}

/* h3 바로 뒤에 오는 h4 패딩 제거 */
#content .contents_style .h2-box .h2-body h3 + h4 {
  padding-top: 0;
}

#content .contents_style .h2-box > .h2-body > p:first-child {
  margin-top: 1rem !important;
}

/* h1, h2... 제목 스타일 변경 (end) */


#article .contents_style ol[data-ke-list-type],
#article .contents_style ul[data-ke-list-type] {

  margin-top: 1.25rem;

  margin-bottom: 1.25rem;

  display: flex;

  flex-direction: column;

  row-gap: 0.25rem;

  padding-left: 1.1rem
}

#article .contents_style ol[data-ke-list-type] ol[data-ke-list-type],
#article .contents_style ol[data-ke-list-type] ul[data-ke-list-type],
#article .contents_style ul[data-ke-list-type] ol[data-ke-list-type],
#article .contents_style ul[data-ke-list-type] ul[data-ke-list-type] {

  margin-top: 0px;

  margin-bottom: 0px;

  margin-left: 1.5rem
}

#article .contents_style p,
#article .contents_style ol[data-ke-list-type],
#article .contents_style ul[data-ke-list-type],
#article .contents_style table[data-ke-align],
#article .contents_style blockquote[data-ke-style=style2],
#article .contents_style blockquote[data-ke-style=style3] {

  --tw-text-opacity: 1;

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

/* 하이퍼링크 밑줄 추가 */
#article .contents_style p a{
  text-decoration: underline;
}


.dark #article .contents_style p,
.dark #article .contents_style ol[data-ke-list-type],
.dark #article .contents_style ul[data-ke-list-type],
.dark #article .contents_style table[data-ke-align],
.dark #article .contents_style blockquote[data-ke-style=style2],
.dark #article .contents_style blockquote[data-ke-style=style3] {

  --tw-text-opacity: 1;

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

#article .contents_style p b,
#article .contents_style p strong,
#article .contents_style ol[data-ke-list-type] b,
#article .contents_style ol[data-ke-list-type] strong,
#article .contents_style ul[data-ke-list-type] b,
#article .contents_style ul[data-ke-list-type] strong,
#article .contents_style table[data-ke-align] b,
#article .contents_style table[data-ke-align] strong,
#article .contents_style blockquote[data-ke-style=style2] b,
#article .contents_style blockquote[data-ke-style=style2] strong,
#article .contents_style blockquote[data-ke-style=style3] b,
#article .contents_style blockquote[data-ke-style=style3] strong {

  font-weight: 700
}


/* =================START 링크 색 변경 =======================  */
#article .contents_style p a,
#article .contents_style ol[data-ke-list-type] a,
#article .contents_style ul[data-ke-list-type] a,
#article .contents_style table[data-ke-align] a,
#article .contents_style blockquote[data-ke-style=style1] a,
#article .contents_style blockquote[data-ke-style=style2] a,
#article .contents_style blockquote[data-ke-style=style3] a {
  display: inline-block;
  color: #4B91F1; 
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: all 0.35s ease;
  background: none;
}

/*  hover 시 무지개 그라데이션 텍스트 */
#article .contents_style p a:hover,
#article .contents_style ol[data-ke-list-type] a:hover,
#article .contents_style ul[data-ke-list-type] a:hover,
#article .contents_style table[data-ke-align] a:hover,
#article .contents_style blockquote[data-ke-style=style1] a:hover,
#article .contents_style blockquote[data-ke-style=style2] a:hover,
#article .contents_style blockquote[data-ke-style=style3] a:hover {
  background: linear-gradient(
    90deg,
    #06b6d4,
    #3b82f6,
    #8b5cf6,
    #ec4899,
    #f59e0b,
    #06d6a0
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

/* ================== 다크모드 ================== */
.dark #article .contents_style p a,
.dark #article .contents_style ol[data-ke-list-type] a,
.dark #article .contents_style ul[data-ke-list-type] a,
.dark #article .contents_style table[data-ke-align] a,
.dark #article .contents_style blockquote[data-ke-style=style1] a,
.dark #article .contents_style blockquote[data-ke-style=style2] a,
.dark #article .contents_style blockquote[data-ke-style=style3] a {
  color: #4B91F1;
}

.dark #article .contents_style p a:hover,
.dark #article .contents_style ol[data-ke-list-type] a:hover,
.dark #article .contents_style ul[data-ke-list-type] a:hover,
.dark #article .contents_style table[data-ke-align] a:hover,
.dark #article .contents_style blockquote[data-ke-style=style1] a:hover,
.dark #article .contents_style blockquote[data-ke-style=style2] a:hover,
.dark #article .contents_style blockquote[data-ke-style=style3] a:hover {
  background: linear-gradient(
    90deg,
    #22d3ee,
    #60a5fa,
    #a78bfa,
    #f472b6,
    #fbbf24,
    #34d399
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}


/* =================END 링크 색 변경 =======================  */

#article .contents_style p code:not(:where(pre *)),
#article .contents_style ol[data-ke-list-type] code:not(:where(pre *)),
#article .contents_style ul[data-ke-list-type] code:not(:where(pre *)),
#article .contents_style table[data-ke-align] code:not(:where(pre *)),
#article .contents_style blockquote[data-ke-style=style2] code:not(:where(pre *)),
#article .contents_style blockquote[data-ke-style=style3] code:not(:where(pre *)) {

  position: relative;

  top: -1px;

  white-space: normal;

  border-radius: 0.375rem;

  --tw-bg-opacity: 1;

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

  padding-left: 0.375rem;

  padding-right: 0.375rem;

  padding-top: 0.125rem;

  padding-bottom: 0.125rem;

  /* font-family: SUIT, ui-sans-serif, system-ui, 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(68 85 255 / var(--tw-text-opacity)) */
  color: #ff5a4a !important;

  font-family: Consolas, monospace !important;
  background: rgba(135,131,120,0.15) !important;
  padding: 0.2em 0.4em !important;
  margin: 0 0.2em !important;
  display: inline !important;
  word-break: break-word !important;
}

.dark #article .contents_style p code:not(:where(pre *)),
.dark #article .contents_style ol[data-ke-list-type] code:not(:where(pre *)),
.dark #article .contents_style ul[data-ke-list-type] code:not(:where(pre *)),
.dark #article .contents_style table[data-ke-align] code:not(:where(pre *)),
.dark #article .contents_style blockquote[data-ke-style=style2] code:not(:where(pre *)),
.dark #article .contents_style blockquote[data-ke-style=style3] code:not(:where(pre *)) {

  --tw-bg-opacity: 1;

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

  --tw-text-opacity: 1;

  color: rgb(93 176 215 / var(--tw-text-opacity))
}

#article .contents_style figure,
#article .contents_style pre,
#article .contents_style table[data-ke-align],
#article .contents_style [data-ke-type=moreLess] {

  margin-top: 1.25rem;

  margin-bottom: 1.25rem
}

.dark #article .contents_style hr[data-ke-style] {

  --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)
}

#article .contents_style table[data-ke-align] td,
#article .contents_style table[data-ke-align] th {

  box-sizing: border-box;

/*  테이블 가로줄 추가 */
  border-width: 1px;
/*  border-bottom-width: 1px; */


  border-style: solid;

  --tw-border-opacity: 1;

  border-color: rgb(230 230 233 / 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;

  --tw-text-opacity: 1;

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

.dark #article .contents_style table[data-ke-align] td,
.dark #article .contents_style table[data-ke-align] th {

  --tw-border-opacity: 1;

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

  --tw-text-opacity: 1;

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

#article .contents_style table[data-ke-align] td figure.imageblock.alignCenter,
#article .contents_style table[data-ke-align] th figure.imageblock.alignCenter {

  width: 100% !important
}

#article .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))
}
@media not all and (min-width: 1100px) {

  #article .contents_style figure.imageblock.alignCenter,
  #article .contents_style figure.imagegridblock {

    width: 100% !important
  }
}

#article .contents_style figure[data-ke-type=opengraph] a {

  border-width: 0px
}

#article .contents_style figure[data-ke-type=opengraph] a .og-image {

  overflow: hidden;

  border-top-left-radius: 0.375rem;

  border-bottom-left-radius: 0.375rem;

  border-right-width: 0px
}

#article .contents_style figure[data-ke-type=opengraph] .og-text {

  border-top-right-radius: 0.375rem;

  border-bottom-right-radius: 0.375rem;

  --tw-bg-opacity: 1;

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

.dark #article .contents_style figure[data-ke-type=opengraph] .og-text {

  --tw-bg-opacity: 1;

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

#article .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
#article .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
#article .contents_style figure[data-ke-type=opengraph] .og-text .og-host {

  font-family: SUIT, ui-sans-serif, system-ui, 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 #article .contents_style figure[data-ke-type=opengraph] .og-text .og-title,
.dark #article .contents_style figure[data-ke-type=opengraph] .og-text .og-desc,
.dark #article .contents_style figure[data-ke-type=opengraph] .og-text .og-host {

  --tw-text-opacity: 1;

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

#article .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))
}

#article .contents_style figure.fileblock {

  border-width: 0px;

  --tw-bg-opacity: 1;

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

.dark #article .contents_style figure.fileblock {

  --tw-bg-opacity: 1;

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

#article .contents_style figure.fileblock .filename {

  margin-top: 0.75rem
}

#article .contents_style figure.fileblock .filename .name {

  height: auto
}

.dark #article .contents_style figure.fileblock .filename,
.dark #article .contents_style figure.fileblock .size {

  --tw-text-opacity: 1;

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

.dark #article .contents_style figure.fileblock .image,
.dark #article .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)
}

#article .contents_style [data-ke-type=moreLess] {

  position: relative
}

#article .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(230 230 233 / var(--tw-border-opacity));

  --tw-content: '';

  content: var(--tw-content)
}

.dark #article .contents_style [data-ke-type=moreLess]::before {

  --tw-border-opacity: 1;

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

#article .contents_style [data-ke-type=moreLess].open .btn-toggle-moreless::before {

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f0ab';

  content: var(--tw-content)
}

#article .contents_style [data-ke-type=moreLess] .btn-toggle-moreless {

  display: inline-block !important;

  border-radius: 0.375rem !important;

  --tw-bg-opacity: 1 !important;

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

  padding-left: 0.75rem !important;

  padding-right: 0.75rem !important;

  padding-top: 0.5rem !important;

  padding-bottom: 0.5rem !important;

  font-size: 0.75rem !important;

  line-height: 1rem !important;

  font-weight: 700 !important;

  --tw-text-opacity: 1 !important;

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

#article .contents_style [data-ke-type=moreLess] .btn-toggle-moreless::before {

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f0a9';

  content: var(--tw-content);

  margin-right: 0.375rem
}

#article .contents_style [data-ke-type=moreLess] .moreless-content {

  margin-top: 1.5rem
}

/*  ======================== START 인용문꾸미기  =================================*/
 /*blockquote{
    따옴표 없앰 
    background-image:none !important;
}*/

/* w: blockquote 공통 */
#article .contents_style blockquote[data-ke-style] {

  margin-top: 1rem;

  margin-bottom: 1rem;


  --tw-text-opacity: 1;

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


/* w: blockquote 공통 - 다크모드 */
.dark #article .contents_style blockquote[data-ke-style] {

  --tw-text-opacity: 1;

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

/* 좌측 정렬 강제
#article .contents_style blockquote[data-ke-style="style1"]{
  text-align: left !important;
} */

/* ========== START style1 따옴표 ========== */
#article .contents_style blockquote[data-ke-style="style1"] {
  position: relative;
  margin: 1.25rem 0;
  padding: 2rem 2.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
  text-align: center;
  overflow: hidden;
  font-family: "Inter", "Pretendard", "Noto Sans KR", sans-serif;
  color: #222;
  line-height: 1.8;
  letter-spacing: -0.25px;
}
#article .contents_style blockquote[data-ke-style="style1"] > * {
  font-size: 16px;
}

/* 큰 따옴표 — 박스 밖으로 걸쳐지는 느낌 */
#article .contents_style blockquote[data-ke-style="style1"]::before {
  content: "“";
  position: absolute;
  top: -30px;
  left: 25px;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(0,0,0,0.08);
  font-family: serif;
  z-index: 1;
}

#article .contents_style blockquote[data-ke-style="style1"]::after {
  content: "”";
  position: absolute;
  bottom: -45px;
  right: 25px;
  font-size: 5rem;
  font-weight: 700;
  color: rgba(0,0,0,0.08);
  z-index: 1;
}

/* 내용이 따옴표 아래에 깔리지 않도록 */
#article .contents_style blockquote[data-ke-style="style1"] > * {
  position: relative;
  z-index: 2;
}

/* 다크모드 */
.dark #article .contents_style blockquote[data-ke-style="style1"] {
  color: #f3f4f6;
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.dark #article .contents_style blockquote[data-ke-style="style1"]::before,
.dark #article .contents_style blockquote[data-ke-style="style1"]::after {
  color: rgba(255,255,255,0.07);
}

/* ========== END style1 ========== */


/* --------------------------- START: style2 - 좌측 라인형(배지) - 세련된 업그레이드 --------------------------- */

/* --------------------------- START: style2 - 옵션 2: 텍스트 아이콘 바 --------------------------- */
/* style2: 텍스트 아이콘 바 */
#article .contents_style blockquote[data-ke-style="style2"]{
  /* 기존 값 유지 */
  display: inline-flex;
  align-items: center;
  padding: .4rem 1rem;
  margin-bottom: 10px;
  margin-top: 1.3rem;
  border: 1px solid #dcdcdc;
  border-radius: 13px;
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;

  width: fit-content;      /* 내용만큼만 가로 사용 */
  max-width: 100%;         /* 하지만 부모폭은 넘지 않게 */
  white-space: normal;     /* 줄바꿈 허용 (nowrap 해제) */
  overflow-wrap: anywhere; /* 긴 단어/URL도 강제 줄바꿈 */
  word-break: break-word;  /* 브라우저 호환 보강 */
}

#article .contents_style blockquote[data-ke-style="style2"] > *{
  margin: 0;
  min-width: 0;            /* flex 자식 줄어들 수 있게 */
  flex: 0 1 auto;          /* 내용 줄바꿈 허용 */
}

/* (선택) 아이콘이 살짝 튀어나와 보이면 transform 해제 */
#article .contents_style blockquote[data-ke-style="style2"]::before{
  /* content: "▶"; */
  transform: none;
}

/* 다크 모드 기존 유지 */
.dark #article .contents_style blockquote[data-ke-style="style2"]{
  background: #333333;
  border: 1px solid #555555;
}

/* blockquote 바로 다음에 오는 ul 하나만 제거 */
#article .contents_style blockquote[data-ke-style="style2"] + ul {
  padding-top: 0;
  margin-top: 0;
}


/* --------------------------- END: style2 - 옵션 2: 텍스트 아이콘 바 --------------------------- */


/* -----------------------START: style3 - 배경박스형------------------------------------ */
/* w: style3 - 배경 박스형 (좌측 컬러 라인, 따옴표 제거) */
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] {
  position: relative;
  padding: 1.25rem 1.rem 1.25rem 1.25rem;
  border-radius: 0.75rem;
  line-height: 1.85;

  /* 토큰(라이트 기본값) */
  --w-fg: rgb(53 54 56);
  --w-bg: rgb(244 244 246);
  --w-border: rgba(0,0,0,.08);
  --w-accent: #06d6a0;

  color: var(--w-fg);
  border: 1px solid var(--w-border);
  border-left-width: 6px;               /* 좌측 컬러 라인 */
  border-left-color: var(--w-accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}

/* w: style3 - 따옴표 데코 제거(혹시 기존 규칙이 있었다면 무력화) */
#article .contents_style blockquote[data-ke-style][data-ke-style=style3]::before {
  content: none !important;
}

/* w: style3 - 내부 첫/마지막 요소 여백 정리 */
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] > *:first-child { margin-top: 0; }
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] > *:last-child  { margin-bottom: 0; }

/* w: style3 - 링크/코드 최소 보정 */
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
#article .contents_style blockquote[data-ke-style][data-ke-style=style3] code {
  padding: .15rem .35rem;
  border-radius: .35rem;
  background: rgba(0,0,0,.06);
}

/* w: style3 - 다크모드 */
.dark #article .contents_style blockquote[data-ke-style][data-ke-style=style3] {
  --w-fg: rgb(244 244 246);
  --w-bg: rgb(41 42 45);
  --w-border: rgba(255,255,255,.12);

  color: var(--w-fg);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)), var(--w-bg);
  border-color: var(--w-border);
  border-left-color: var(--w-accent);   /* 좌측 컬러 라인 색만 유지 */
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.dark #article .contents_style blockquote[data-ke-style][data-ke-style=style3] code {
  background: rgba(255,255,255,.10);
}




/* -----------------------END: style3 - 다크모드----------------------------------- */

/*  ======================== END 인용꾸미기  =================================*/


/* w: 코드블록 */
#article .contents_style pre code {

  border-radius: 0.375rem;

  padding: 1rem;

  font-size: 13px;


  line-height: 1.25rem;

}

/* w: 코드블록 - 하이라이트 배경 */
#article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

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

/* w: 코드블록 - 하이라이트 배경(다크) */
.dark #article .contents_style pre code.hljs {

  --tw-bg-opacity: 1;

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

/* w: 글 하단 버튼 컨테이너 */
#article .container_postbtn {

  display: flex;

  -moz-column-gap: 0.5rem;

  column-gap: 0.5rem;

  padding: 0px;

  padding-top: 2.25rem;

  --tw-text-opacity: 1;

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

/* w: 글 하단 버튼 컨테이너 - 다크모드 */
.dark #article .container_postbtn {

  --tw-text-opacity: 1;

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




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

  margin: 0px;

  display: inline-block;

  height: 2.25rem;

  width: 2.25rem;

  cursor: pointer;

  border-radius: 0.375rem;

  border-width: 0px;

  --tw-bg-opacity: 1;

  background-color: rgb(244 244 246 / 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
}

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

  content: var(--tw-content);

  --tw-text-opacity: 1;

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

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

  --tw-bg-opacity: 1;

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

.dark #article .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button,
.dark #article .container_postbtn .btn_subscription,
.dark #article .container_postbtn .tt-btn-support {

  --tw-bg-opacity: 1;

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

.dark #article .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button::before,
.dark #article .container_postbtn .btn_subscription::before,
.dark #article .container_postbtn .tt-btn-support::before {

  content: var(--tw-content);

  --tw-text-opacity: 1;

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

.dark #article .container_postbtn .postbtn_like>.wrap_btn:not([id^=reaction-])>button:hover,
.dark #article .container_postbtn .btn_subscription:hover,
.dark #article .container_postbtn .tt-btn-support:hover {

  --tw-bg-opacity: 1;

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

#article .container_postbtn .postbtn_like {

  display: flex;

  -moz-column-gap: 0.5rem;

  column-gap: 0.5rem;

  border-width: 0px;

  padding: 0px
}

#article .container_postbtn .postbtn_like .wrap_btn {

  display: inline-block;

  border-width: 0px
}

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

  font-size: 0.875rem;

  line-height: 1.25rem;

  font-weight: 700
}

#article .container_postbtn .postbtn_like .wrap_btn .ico_like,
#article .container_postbtn .postbtn_like .wrap_btn .ico_share,
#article .container_postbtn .postbtn_like .wrap_btn .ico_statistics,
#article .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
}

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

  height: 2.25rem;

  border-radius: 0.375rem;

  --tw-bg-opacity: 1;

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

  padding-left: 0.75rem;

  padding-right: 0.75rem
}

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

  --tw-bg-opacity: 1;

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

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

  --tw-text-opacity: 1;

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

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

  font-weight: 700;

  line-height: 1
}

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

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f004';

  content: var(--tw-content);

  margin-right: 0.375rem;

  font-size: 0.875rem;

  line-height: 1.25rem
}

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

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f1e0';

  content: var(--tw-content)
}

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

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f200';

  content: var(--tw-content)
}

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

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f0ad';

  content: var(--tw-content)
}

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

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1;

  font-weight: 700;

  --tw-content: '\f141';

  content: var(--tw-content)
}

#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))
}

div[data-tistory-react-app=Namecard] {
  display: none
}

[data-list-style=empty] {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem
}

@media (min-width: 1100px) {
  [data-list-style=empty] {
    margin-left: auto;
    margin-right: auto;
    width: var(--h-idx);
    padding-left: 0px;
    padding-right: 0px
  }
}

#global-header~.post,
[data-list-style] .post {

  position: relative
}

#global-header~.post .link,
[data-list-style] .post .link {

  position: absolute;

  top: 0px;

  left: 0px;

  z-index: 50;

  height: 100%;

  width: 100%
}

#global-header~.post .content .picture .img+.fallback,
[data-list-style] .post .content .picture .img+.fallback {

  display: none
}

@keyframes pulse {

  50% {

    opacity: .5
  }
}

#global-header~.post .content .picture .fallback,
[data-list-style] .post .content .picture .fallback {

  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

  --tw-bg-opacity: 1;

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

.dark #global-header~.post .content .picture .fallback,
.dark [data-list-style] .post .content .picture .fallback {

  --tw-bg-opacity: 1;

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

#global-header~.post .content .info .header .tit img,
[data-list-style] .post .content .info .header .tit img {

  display: none
}

#global-header~.post .content .info .summary:empty,
[data-list-style] .post .content .info .summary:empty {

  margin: 0px
}

#global-header~.post,
[data-list-style=list] .post,
[data-list-style=grid],
[data-list-style=Z],
[data-list-style=gallery] {

  width: 100%;

  padding-left: 1rem;

  padding-right: 1rem
}

@media (min-width: 1100px) {

  #global-header~.post,
  [data-list-style=list] .post,
  [data-list-style=grid],
  [data-list-style=Z],
  [data-list-style=gallery] {

    margin-left: auto;

    margin-right: auto;

    width: var(--h-idx);

    padding-left: 0px;

    padding-right: 0px
  }
}

[data-list-style=grid],
[data-list-style=gallery] {

  display: grid;

  grid-template-columns: repeat(1, minmax(0, 1fr))
}

@media (min-width: 640px) {

  [data-list-style=grid],
  [data-list-style=gallery] {

    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width: 768px) {

  [data-list-style=grid],
  [data-list-style=gallery] {

    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media (min-width: 1100px) {

  [data-list-style=grid],
  [data-list-style=gallery] {

    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

[data-list-style=Z] {

  display: grid;

  grid-template-columns: repeat(1, minmax(0, 1fr))
}

[data-list-style=slider] {

  height: 100vh;

  width: 100%
}

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

  [data-list-style=list] {

    display: flex;

    flex-direction: column;

    row-gap: 1.5rem
  }
}

[data-list-style=gallery] {

  gap: 0.5rem
}

[data-list-style=grid] {

  row-gap: 1.5rem;

  -moz-column-gap: 1rem;

  column-gap: 1rem
}

@media (min-width: 1100px) {

  [data-list-style=grid] {

    row-gap: 2rem;

    -moz-column-gap: 1.5rem;

    column-gap: 1.5rem
  }
}

[data-list-style=Z] {

  row-gap: 1.5rem
}

@media (min-width: 640px) {

  [data-list-style=Z] {

    row-gap: 0px
  }
}

.cover-content-left .content {

  align-items: flex-start
}

.cover-content-left .content .info {

  display: flex;

  flex-direction: column;

  align-items: flex-start
}

.cover-content-left .content .info .header {

  align-items: flex-start
}

.cover-content-center .content {

  align-items: center
}

.cover-content-center .content .info {

  display: flex;

  flex-direction: column;

  align-items: center
}

.cover-content-center .content .info .header {

  align-items: center
}

.cover-content-right .content {

  align-items: flex-end
}

.cover-content-right .content .info {

  display: flex;

  flex-direction: column;

  align-items: flex-end
}

.cover-content-right .content .info .header {

  align-items: flex-end
}

#global-header~.post,
[data-list-style=list] .post {

  position: relative
}

@media (min-width: 640px) {

  #global-header~.post,
  [data-list-style=list] .post {

    border-top-width: 1px;

    border-style: solid;

    --tw-border-opacity: 1;

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

  #global-header~.post:first-of-type,
  [data-list-style=list] .post:first-of-type {

    border-top-width: 0px
  }

  .dark #global-header~.post,
  .dark [data-list-style=list] .post {

    --tw-border-opacity: 1;

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

#global-header~.post .content,
[data-list-style=list] .post .content {

  display: flex;

  flex-direction: column;

  row-gap: 1rem
}

@media (min-width: 640px) {

  #global-header~.post .content,
  [data-list-style=list] .post .content {

    height: 18rem;

    flex-direction: row-reverse;

    align-items: center;

    justify-content: flex-end
  }
}

#global-header~.post .content .picture .img,
[data-list-style=list] .post .content .picture .img {

  width: 100%
}

@media (min-width: 640px) {

  #global-header~.post .content .picture .img,
  [data-list-style=list] .post .content .picture .img {

    margin-left: 2rem;

    height: 16rem;

    width: 16rem;

    flex-shrink: 0
  }
}

#global-header~.post .content .picture .img .thumb,
[data-list-style=list] .post .content .picture .img .thumb {

  width: 100%;

  max-width: none;

  --tw-bg-opacity: 1;

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

  -o-object-fit: cover;

  object-fit: cover
}

@media (min-width: 640px) {

  #global-header~.post .content .picture .img .thumb,
  [data-list-style=list] .post .content .picture .img .thumb {

    height: 16rem;

    width: 16rem
  }
}

#global-header~.post .content .picture .fallback,
[data-list-style=list] .post .content .picture .fallback {

  display: none
}

@media (min-width: 640px) {

  #global-header~.post .content .info,
  [data-list-style=list] .post .content .info {

    flex-grow: 1
  }
}

#global-header~.post .content .info .header,
[data-list-style=list] .post .content .info .header {

  display: flex;

  flex-direction: column;

  row-gap: 0.25rem
}

#global-header~.post .content .info .header .tit,
[data-list-style=list] .post .content .info .header .tit {

  font-size: 1.25rem;

  line-height: 1.75rem;

  font-weight: 700;

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #global-header~.post .content .info .header .tit,
.dark [data-list-style=list] .post .content .info .header .tit {

  --tw-text-opacity: 1;

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

@media (min-width: 1100px) {

  #global-header~.post .content .info .header .tit,
  [data-list-style=list] .post .content .info .header .tit {

    font-size: 1.5rem;

    line-height: 2rem
  }
}

#global-header~.post .content .info .header .desc,
[data-list-style=list] .post .content .info .header .desc {

  display: flex;

  -moz-column-gap: 0.25rem;

  column-gap: 0.25rem;

  font-size: 0.875rem;

  line-height: 1.25rem
}

#global-header~.post .content .info .header .desc *,
[data-list-style=list] .post .content .info .header .desc * {

  --tw-text-opacity: 1;

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

#global-header~.post .content .info .summary,
[data-list-style=list] .post .content .info .summary {

  margin-top: 0.5rem;

  max-height: 5rem;

  overflow: hidden;

  font-size: 0.875rem;

  line-height: 1.25rem;

  line-height: 2;

  --tw-text-opacity: 1;

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

[data-list-style=grid] .post .content {

  display: flex;

  flex-direction: column;

  row-gap: 1.5rem
}

[data-list-style=grid] .post .content .picture .img,
[data-list-style=grid] .post .content .picture .fallback {

  position: relative;

  padding-top: 66.66%
}

[data-list-style=grid] .post .content .picture .img .thumb {

  position: absolute;

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  --tw-bg-opacity: 1;

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

  -o-object-fit: cover;

  object-fit: cover
}

[data-list-style=grid] .post .content .info .header {

  display: flex;

  flex-direction: column;

  row-gap: 0.25rem
}

[data-list-style=grid] .post .content .info .header .tit {

  font-size: 1.25rem;

  line-height: 1.75rem;

  font-weight: 700;

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=grid] .post .content .info .header .tit {

  --tw-text-opacity: 1;

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

[data-list-style=grid] .post .content .info .header .desc {

  display: flex;

  -moz-column-gap: 0.25rem;

  column-gap: 0.25rem;

  font-size: 0.875rem;

  line-height: 1.25rem
}

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

  [data-list-style=grid] .post .content .info .header .desc {

    display: none
  }
}

[data-list-style=grid] .post .content .info .header .desc * {

  --tw-text-opacity: 1;

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

[data-list-style=grid] .post .content .info .summary {

  margin-top: 0.5rem;

  max-height: 3.5rem;

  overflow: hidden;

  font-size: 0.875rem;

  line-height: 1.25rem;

  line-height: 2;

  --tw-text-opacity: 1;

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

[data-list-style=Z] .post .content {

  display: flex;

  flex-direction: column;

  row-gap: 1rem
}

@media (min-width: 640px) {

  [data-list-style=Z] .post .content {

    flex-direction: row
  }

  [data-list-style=Z] .post .content .picture {

    width: 50%
  }
}

[data-list-style=Z] .post .content .picture .img .thumb {

  position: relative;

  z-index: 10;

  width: 100%;

  --tw-bg-opacity: 1;

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

  -o-object-fit: cover;

  object-fit: cover
}

@media (min-width: 640px) {

  [data-list-style=Z] .post .content .picture .img .thumb {

    max-width: none
  }
}

[data-list-style=Z] .post .content .picture .fallback {

  padding-top: 66.66%
}

@media (min-width: 640px) {

  [data-list-style=Z] .post .content .info {

    width: 50%
  }
}

[data-list-style=Z] .post .content .info {

  display: flex;

  flex-direction: column;

  justify-content: center
}

[data-list-style=Z] .post .content .info .header {

  display: flex;

  flex-direction: column;

  row-gap: 0.25rem
}

[data-list-style=Z] .post .content .info .header .tit {

  font-size: 1.25rem;

  line-height: 1.75rem;

  font-weight: 700;

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark [data-list-style=Z] .post .content .info .header .tit {

  --tw-text-opacity: 1;

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

@media (min-width: 1100px) {

  [data-list-style=Z] .post .content .info .header .tit {

    font-size: 1.5rem;

    line-height: 2rem
  }
}

[data-list-style=Z] .post .content .info .header .desc {

  display: flex;

  -moz-column-gap: 0.25rem;

  column-gap: 0.25rem;

  font-size: 0.875rem;

  line-height: 1.25rem
}

[data-list-style=Z] .post .content .info .header .desc * {

  --tw-text-opacity: 1;

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

[data-list-style=Z] .post .content .info .summary {

  margin-top: 0.5rem;

  max-height: 5rem;

  overflow: hidden;

  font-size: 0.875rem;

  line-height: 1.25rem;

  line-height: 2;

  --tw-text-opacity: 1;

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

@media (min-width: 640px) {

  [data-list-style=Z] .post:nth-child(2n) .content {

    flex-direction: row-reverse
  }

  [data-list-style=Z] .post:nth-child(2n) .content .info {

    padding-right: 2.5rem
  }
}

@media (min-width: 1100px) {

  [data-list-style=Z] .post:nth-child(2n) .content .info {

    padding-right: 5rem
  }
}

@media (min-width: 640px) {

  [data-list-style=Z] .post:nth-child(2n+1) .content .info {

    padding-left: 2.5rem
  }
}

@media (min-width: 1100px) {

  [data-list-style=Z] .post:nth-child(2n+1) .content .info {

    padding-left: 5rem
  }
}

[data-list-style=gallery] .post .link:hover+.content::before {

  opacity: 1;

  content: var(--tw-content);

  transition-duration: 300ms
}

[data-list-style=gallery] .post .link:hover+.content .info {

  opacity: 1;

  transition-duration: 300ms
}

[data-list-style=gallery] .post .content::before {

  position: absolute;

  right: 0px;

  top: 0px;

  height: 100%;

  width: 100%;

  opacity: 0;

  z-index: 10;

  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));

  --tw-gradient-from: transparent;

  --tw-gradient-to: rgb(0 0 0 / 0);

  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

  content: var(--tw-content);

  --tw-gradient-to: rgb(41 42 45 / 0.5)
}

[data-list-style=gallery] .post .content {

  position: relative;

  z-index: 20;

  display: flex;

  align-items: flex-end
}

[data-list-style=gallery] .post .content .picture {

  height: 100%;

  width: 100%
}

[data-list-style=gallery] .post .content .picture .img,
[data-list-style=gallery] .post .content .picture .fallback {

  position: relative;

  height: 100%;

  width: 100%;

  padding-top: 100%
}

[data-list-style=gallery] .post .content .picture .img .thumb {

  position: absolute;

  top: 0px;

  left: 0px;

  height: 100%;

  width: 100%;

  --tw-bg-opacity: 1;

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

  -o-object-fit: cover;

  object-fit: cover
}

[data-list-style=gallery] .post .content .info {

  position: absolute;

  z-index: 20;

  width: 100%;

  opacity: 0;

  padding-bottom: 1.5rem
}

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

  [data-list-style=gallery] .post .content .info {

    padding-bottom: 2rem
  }
}

[data-list-style=gallery] .post .content .info .header {

  display: flex;

  width: 100%;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  text-align: center
}

[data-list-style=gallery] .post .content .info .header .tit {

  padding-left: 1.5rem;

  padding-right: 1.5rem;

  font-size: 1.25rem;

  line-height: 1.75rem;

  font-weight: 600;

  --tw-text-opacity: 1;

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

@media (min-width: 640px) {

  [data-list-style=gallery] .post .content .info .header .tit {

    font-size: 1.125rem;

    line-height: 1.75rem
  }
}

@media (min-width: 768px) {

  [data-list-style=gallery] .post .content .info .header .tit {

    font-size: 1.5rem;

    line-height: 2rem
  }
}

[data-list-style=gallery] .post .content .info .header .tit {

  margin-bottom: 1.75rem
}

@media (min-width: 640px) {

  [data-list-style=gallery] .post .content .info .header .tit {

    margin-bottom: 1.25rem
  }
}

@media (min-width: 768px) {

  [data-list-style=gallery] .post .content .info .header .tit {

    margin-bottom: 2.25rem
  }
}

[data-list-style=gallery] .post .content .info .header .desc {

  display: flex;

  -moz-column-gap: 0.25rem;

  column-gap: 0.25rem;

  font-size: 0.875rem;

  line-height: 1.25rem
}

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

  [data-list-style=gallery] .post .content .info .header .desc {

    display: none
  }
}

[data-list-style=gallery] .post .content .info .header .desc * {

  --tw-text-opacity: 1;

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

[data-list-style=gallery] .post .content .info .summary {

  display: none
}

[data-list-style=slider] .swiper-wrapper .post .content::before {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  height: 100vh;
  width: 100%;
  content: var(--tw-content);
  background-color: rgb(0 0 0 / 0.2);
}

[data-list-style=slider] .swiper-wrapper .post .content {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

[data-list-style=slider] .swiper-wrapper .post .content .picture {
  height: 100%;
  width: 100%;
}

[data-list-style=slider] .swiper-wrapper .post .content .picture .img,
[data-list-style=slider] .swiper-wrapper .post .content .picture .fallback {
  height: 100%;
  width: 100%;
}

[data-list-style=slider] .swiper-wrapper .post .content .picture .img .thumb {
  height: 100%;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  -o-object-fit: cover;
  object-fit: cover;
}

[data-list-style=slider] .swiper-wrapper .post .content .info {
  position: absolute;
  z-index: 20;
}

[data-list-style=slider] .swiper-wrapper .post .content .info .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 0.25rem;
  text-align: center;
}

[data-list-style=slider] .swiper-wrapper .post .content .info .header .tit {
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

@media (min-width: 768px) {
  [data-list-style=slider] .swiper-wrapper .post .content .info .header .tit {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

[data-list-style=slider] .swiper-wrapper .post .content .info .header .desc {
  display: flex;
  -moz-column-gap: 0.25rem;
  column-gap: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[data-list-style=slider] .swiper-wrapper .post .content .info .header .desc * {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));
}

/* https://swiperjs.com/demos#navigation */
[data-list-style=slider] .swiper-button-next,
[data-list-style=slider] .swiper-button-prev {
  --swiper-navigation-size: 2rem;
  --swiper-navigation-color: rgba(255, 255, 255, .6);
}

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

  [data-list-style=slider] .swiper-button-next,
  [data-list-style=slider] .swiper-button-prev {
    display: none;
  }
}

[data-list-style=slider] .swiper-button-next::before,
[data-list-style=slider] .swiper-button-next::after,
[data-list-style=slider] .swiper-button-prev::before,
[data-list-style=slider] .swiper-button-prev::after {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
}

.another_category {
  display: none
}

#tags a {
  margin-top: 0.5rem;
  border-radius: 0.375rem;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / var(--tw-text-opacity))
}

.dark #tags a {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity))
}

#tags a: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))
}

#tags a:first-of-type::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  font-weight: 700;
  --tw-content: '\f02b';
  content: var(--tw-content);
  margin-right: 0.5rem
}

#paging .prev .txt,
#paging .next .txt {
  position: absolute !important;
  margin: -1px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important
}

#paging a {
  display: inline-block
}

#paging span {
  font-size: 0.875rem;
  line-height: 1.25rem
}

#paging i,
#paging span {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  height: 2rem;
  width: 2rem;
  text-align: center;
  font-size: 1rem;
  line-height: 2rem;
  --tw-text-opacity: 1;
  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #paging i,
.dark #paging span {
  --tw-text-opacity: 1;
  color: rgb(230 230 233 / var(--tw-text-opacity))
}

#paging span:not(.selected) {
  display: none
}

@media (min-width: 1100px) {
  #paging span:not(.selected) {
    display: inline-block
  }
}

#paging .selected {
  display: inline-block;
  border-radius: 9999px;
  --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))
}

#counter .tit {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity));
}

#counter .cnt {
  --tw-text-opacity: 1;
  color: rgb(53 54 56 / var(--tw-text-opacity))
}

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

#category .tt_category .link_tit img,
#category .tt_category .link_item img,
#category .tt_category .link_sub_item img {
  display: none;
}

#category .tt_category .link_tit .c_cnt,
#category .tt_category .link_item .c_cnt,
#category .tt_category .link_sub_item .c_cnt {
  font-size: 0.75rem;
  line-height: 1rem;
  margin-left: 4px;
}

#category .tt_category .link_tit {
  margin-bottom: 1.5rem;
  display: inline-block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.dark #category .tt_category .link_tit {
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity));

}

#category .tt_category ul {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;

}

#category .tt_category ul li {
  position: relative;
  padding-right: 1.25rem;
}

#category .tt_category ul li i {
  position: absolute;
  right: 0px;
  cursor: pointer;
  font-size: 0.625rem;
  line-height: 1.25rem
}

#category .tt_category .sub_category_list li:first-child {
  margin-top: 1rem;
  
}

#category .tt_category .sub_category_list li .link_sub_item::before {
  display: inline-block;
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  line-height: 1;
  --tw-content: '\f105';
  content: var(--tw-content);
  position: relative;
  top: -0.125rem;
  margin-right: 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(153 153 161 / var(--tw-text-opacity))
}

#blog-menu ul {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#sidebar .el {

  width: var(--h-s);

  padding-left: 1.25rem;

  padding-right: 1.25rem
}

#sidebar .el h2 {

  margin-bottom: 1.25rem;

  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 .el h2 {

  --tw-text-opacity: 1;

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

#sidebar .el i {

  --tw-text-opacity: 1;

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

#sidebar .el a:not(.link_tit) {

  --tw-text-opacity: 1;

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

#sidebar .el a:not(.link_tit):hover {

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #sidebar .el a:not(.link_tit):hover {

  --tw-text-opacity: 1;

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

.menu_toolbar {
  display: none
}

#top .menu_toolbar {

  position: static;

  display: flex;

  -moz-column-gap: 0.625rem;

  column-gap: 0.625rem
}

#top .menu_toolbar .subscribe,
#top .menu_toolbar .btn_menu_type2 {

  display: flex;

  height: 2.25rem;

  width: 2.25rem;

  align-items: center;

  justify-content: center;

  border-radius: 9999px;

  --tw-bg-opacity: 1;

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

  padding: 0px;

  --tw-text-opacity: 1;

  color: rgb(102 102 110 / 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);

  outline-width: 0px
}

#top .menu_toolbar .subscribe:hover,
#top .menu_toolbar .btn_menu_type2:hover {

  --tw-bg-opacity: 1;

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

.dark #top .menu_toolbar .subscribe,
.dark #top .menu_toolbar .btn_menu_type2 {

  --tw-bg-opacity: 1;

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

  --tw-text-opacity: 1;

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

.dark #top .menu_toolbar .subscribe:hover,
.dark #top .menu_toolbar .btn_menu_type2:hover {

  --tw-bg-opacity: 1;

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

#top .menu_toolbar .subscribe .ico {

  display: inline-block;

  font-family: 'Font Awesome 6 Free';

  font-style: normal;

  line-height: 1
}

#menubar_wrapper {

  position: relative
}

#menubar_wrapper .btn_menu_type2 .ico_tistory_sign {

  opacity: 0.7
}

.dark #menubar_wrapper .btn_menu_type2 .ico_tistory_sign {

  opacity: 1;

  --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)
}

#menubar_wrapper .header_layer {

  position: absolute;

  top: 3rem;

  right: 0px;

  left: auto;

  bottom: auto;

  --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 #menubar_wrapper .header_layer {

  --tw-bg-opacity: 1;

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

#menubar_wrapper .header_layer::after {

  display: none
}

#menubar_wrapper .header_layer a {

  text-decoration-line: none
}

#menubar_wrapper .header_layer .info_profile {

  --tw-border-opacity: 1;

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

.dark #menubar_wrapper .header_layer .info_profile {

  --tw-border-opacity: 1;

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

#menubar_wrapper .header_layer .info_profile .txt_id {

  --tw-text-opacity: 1;

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

.dark #menubar_wrapper .header_layer .info_profile .txt_id {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .info_profile .txt_email,
#menubar_wrapper .header_layer .info_profile .link_setting_type2 {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .info_profile .txt_email:hover,
#menubar_wrapper .header_layer .info_profile .link_setting_type2:hover {

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #menubar_wrapper .header_layer .info_profile .txt_email:hover,
.dark #menubar_wrapper .header_layer .info_profile .link_setting_type2:hover {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .list_toolbar li .link_list {

  --tw-text-opacity: 1;

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

.dark #menubar_wrapper .header_layer .list_toolbar li .link_list {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .list_toolbar li:last-child .link_list {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .list_toolbar li:last-child .link_list:hover {

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #menubar_wrapper .header_layer .list_toolbar li:last-child .link_list:hover {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .wrap_list .tit_list_type {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .wrap_list .tit_list_type:hover {

  --tw-text-opacity: 1;

  color: rgb(30 31 33 / var(--tw-text-opacity))
}

.dark #menubar_wrapper .header_layer .wrap_list .tit_list_type:hover {

  --tw-text-opacity: 1;

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

#menubar_wrapper .header_layer .wrap_toolbar {

  --tw-border-opacity: 1;

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

.dark #menubar_wrapper .header_layer .wrap_toolbar {

  --tw-border-opacity: 1;

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

#bottom .btn {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 246 / var(--tw-bg-opacity));
  padding: 0px;
  --tw-text-opacity: 1;
  color: rgb(102 102 110 / 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);
  outline-width: 0px
}

#bottom .btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(230 230 233 / var(--tw-bg-opacity))
}

.dark #bottom .btn {
  --tw-bg-opacity: 1;
  background-color: rgb(41 42 45 / var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgb(244 244 246 / var(--tw-text-opacity))
}

.dark #bottom .btn:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(53 54 56 / var(--tw-bg-opacity))
}

#bottom .btn .txt {
  position: absolute !important;
  margin: -1px !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important
}

#bottom .btn .ico {
  font-size: 1rem;
  line-height: 1.5rem
}

/* DY, 인라인 코드(백틱)를 노션 스타일로 적용 */
.notion-code {
  font-family: Consolas, monospace !important;
  background: rgba(135,131,120,0.15) !important;
  color: #ff5a4a !important;
  border-radius: 4px !important;
  font-size: 0.85em !important;
  padding: 0.2em 0.4em !important;
  margin: 0 0.2em !important;
  display: inline !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}
/* DY, 인라인 코드(백틱)를 노션 스타일로 적용 */



/* 테이블 th, td 색상 변경 (start) */

/* 라이트 모드 */

/* 위쪽 행(th, td) */
#article .contents_style table[data-ke-align] tr:first-child th,
#article .contents_style table[data-ke-align] tr:first-child td {
  background-color: #f5f5f5 !important; 
  font-weight: 700;
}

/* 왼쪽 열(th, td) */
#article .contents_style table[data-ke-align] th:first-child,
#article .contents_style table[data-ke-align] td:first-child {
  background-color: #f5f5f5 !important;
  font-weight: 700;
}

#article .contents_style table[data-ke-align] tr:nth-child(odd) td {
  background-color: #f5f5f548; /* 홀수행 */
}

/* 다크 모드 */

/* 위쪽 행 */
.dark #article .contents_style table[data-ke-align] tr:first-child th,
.dark #article .contents_style table[data-ke-align] tr:first-child td {
  background-color: #2D2F33 !important; 
}


/* 왼쪽 열 */
.dark #article .contents_style table[data-ke-align] th:first-child,
.dark #article .contents_style table[data-ke-align] td:first-child {
  background-color: #2D2F33 !important;
}

.dark #article .contents_style table[data-ke-align] tr:nth-child(odd) td {
  background-color: #282828ad; /* 홀수행 */
}


/* 테이블 th, td 색상 변경 (end) */

/*---------- post card 디자인 변경 (start) ----------*/
/* ===== 리스트 제목 섹션 ===== */
#list .list-header {
  text-align: center;
  margin: 4rem 0 2.5rem;
  animation: fadeIn 0.6s ease-out;
}

#list .list-header .tit {
  font-family: 'catagory-title';
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--h-800, #111827);
  line-height: 1.2;
}

#list .list-header .desc {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--h-600, #4b5563);
  opacity: 0.8;
  margin-top: 0.25rem;
}

#list .list-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 1.25rem auto 0;
  border-radius: 2px;
  background: linear-gradient(to right, #06d6a0, #48cae4);
}

/* 다크모드 */
.dark #list .list-header .tit {
  color: #ffffff;
}
.dark #list .list-header .desc {
  color: #cccccc;
}

/* ===== 카드 목록 그리드 ===== */
#list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  #list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/*---------- [ START ] post card 디자인 변경 ----------*/========================================================= */


/* 전체 그리드 */
#list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  #list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  #list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================= */
/* 📍 리스트 제목 섹션 */
/* ============================= */

#list .list-header {
  grid-column: 1 / -1; /* 🔑 카드 그리드 전체 폭 차지 */
  text-align: center;
  margin: 4rem 0 2.5rem;
  animation: fadeIn 0.6s ease-out;
}

#list .list-header .tit {
  font-family: 'catagory-title';
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--h-800, #111827);
}

#list .list-header .desc {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: var(--h-600, #4b5563);
  opacity: 0.8;
  margin-top: 0.3rem;
}

#list .list-header::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 1.25rem auto 0;
  border-radius: 2px;
  background: linear-gradient(to right, #06d6a0, #48cae4);
}

/* 다크모드 */
.dark #list .list-header .tit {
  color: #ffffff;
}
.dark #list .list-header .desc {
  color: #cccccc;
}

/* ============================= */
/* 🧩 카드 스타일 */
/* ============================= */

#list .post {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  color: #333;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  padding-bottom: 1rem;
}

.dark #list .post {
  background-color: #2d2f33;
  color: #eee;
}

#list .post:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* 이미지 */
#list .post .picture {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

#list .post .picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

#list .post:hover .picture img {
  transform: scale(1.05);
}

/* 본문 정보 */
#list .post .info {
  padding: 0 1rem;
}

#list .post .info .header .tit {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1rem;
  min-height: 2.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 카테고리 뱃지 */
#list .post .info .header .category {
  background: #06d6a0;
  color: #fff;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  display: inline-block;
}

/* 요약문 */
#list .post .summary {
  font-size: 14px;
  line-height: 1.5;
  margin: 0.5rem 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* 구분선 */
#list .post .summary::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e0e0e0;
  margin: 1rem 0;
}
.dark #list .post .summary::before {
  background-color: #444;
}

/* 🔆 Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*---------- [ END ] post card 디자인 변경 ----------*/


/* ----------banner 디자인 변경 (start) ----------*/


/*--- 메인 배너 (s) ---- */


/* 레이아웃 */
.only-index{    
  min-height: 100svh;  /* 지원 브라우저에서 안전한 뷰포트 높이 */
  height: auto;        /* 내용이 많으면 자연 확장 */
  position: relative;
  text-wrap: balance;          /* 지원 브라우저에서 더 예쁜 줄바꿈 */
  word-break: keep-all;        /* 한글 단어 깨짐 방지 */
  overflow-wrap: anywhere;     /* 긴 영문/URL 대비 */
  padding-inline: .75rem;      /* 좁은 화면에서 양옆 여백 */
}


/* 배경 비디오: 섹션 안을 가득 채우기 */
.only-index .bg-video{
  position: absolute;
  inset: 0;            /* top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;   /* cover와 같은 효과 */
  z-index: 0;
  pointer-events: none;/* 클릭 막지 않기 */
  opacity: 1;
  
}
.bg-video.dimmed {
  filter: brightness(0.5); /* 밝기 낮추기 */
}

/* 오버레이와 콘텐츠는 비디오 위에 */
.only-index::before{
  content:"";
  position:absolute; inset:0;
  z-index: 1;
  pointer-events:none;
}
.only-index > *{ position:relative; z-index: 2; }

/* 절전/가독성: 동적 컨텐츠 줄이기 선호 시 비디오 끄고 이미지 사용 */
@media (prefers-reduced-motion: reduce){
  .only-index .bg-video{ display: none; }
}

/* iOS에서 fixed 배경 떨림 방지: coarse 포인터면 고정 배경 대신 스크롤 */
@media (pointer: coarse){
  .only-index{ background-attachment: scroll; }
}



/*--- 메인 배너 (e) ---- */





/*--- 카테고리 배너 (s) ---- */

.only-category {
  height: 85vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  isolation:isolate; 
}
.only-category .bg-video{
  position:absolute;
  inset:0;  
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;   
  pointer-events:none; 
}

.only-category .wave-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 1;
}

.only-category .tit,
.only-category .desc {
  position: relative;
  z-index: 2;
}


.only-category .wave-container svg {
  display: block;
  width: 100%;
  height: 140px;
}



.only-category .tit{
  font-family: 'catagory-title';
  font-size: 46px;
  color: #fff;
  margin-bottom: 1.3rem;
}
.only-category span{
    font-family: 'catagory-title';
}


@media (max-width: 640px) {
  .only-category .tit { font-size: 34px; } 
}

/* 다크모드 */
.dark .only-category {
  background-color: #2D2F33;
  color: #fff;

}

/* 기본 (라이트모드) */
.wave-container .wave-1 { fill: rgba(255,255,255,1); }
.wave-container .wave-2 { fill: rgba(255,255,255,0.6); }
.wave-container .wave-3 { fill: rgba(255,255,255,0.3); }

/* 다크모드 */
.dark .wave-container .wave-1 { fill: rgba(30,32,35,1); }
.dark .wave-container .wave-2 { fill: rgba(30,32,35,0.7); }
.dark .wave-container .wave-3 { fill: rgba(30,32,35,0.45); }



/*--- 카테고리 배너 (e) ---- */


/* ---------- banner 디자인 변경 (end) ---------- */



/* ---------- 스크롤 인디케이터 (start) ---------- */


/* 위치: 히어로 하단 중앙 */
.scroll-indicator{
  position:absolute; left:50%;
  bottom: 8rem;       
  transform: translateX(-50%);
  width:80px; height:80px; border-radius:9999px;
  display:grid; place-items:center; cursor:pointer;
  background: rgba(0,0,0,.18);            /* 배경 흐림 */
  backdrop-filter: blur(6px);
  border:2px solid rgba(255,255,255,.85); /* 테두리 */
  color:#fff; transition: transform .2s ease, border-color .2s ease;
  z-index: 2;
}
.scroll-indicator:hover{ transform: translateX(-50%) translateY(-2px); }

/* 링 퍼짐 효과 */
.scroll-indicator::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  border:2px solid rgba(255,255,255,.35);
  opacity:0; animation: ring 2s ease-out infinite;
}
@keyframes ring{
  0% { transform: scale(.85); opacity:.6; }
  100%{ transform: scale(1.25); opacity:0; }
}

/* 화살표 살짝 위아래 */
.scroll-indicator .arrow{
  width:22px; height:22px;
  animation: bounce 1.8s ease-in-out infinite;
}
@keyframes bounce{
  0%,100%{ transform: translateY(-2px); }
  50%     { transform: translateY( 4px); }
}

/* 다크 모드 보정(있다면) */
.dark .scroll-indicator{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.9);
}

/* ---------- 스크롤 인디케이터 (end) ---------- */



/* ---------- 페이지별 렌더링 s ---------- */

/* 홈(일반/커버)에서만 보이기 */
.home-only { display: none; }
#tt-body-index .home-only,
#tt-body-cover .home-only { display: block; }

/* 기본은 숨김 */
.only-index,
.only-entry,
.only-category,
.only-archive,
.only-tag,
.only-search,
.only-guestbook,
.only-location { display: none; }

/* 페이지에서만 보이기 */
#tt-body-index .only-index { display: block; }
#tt-body-page .only-entry { display: block; }
#tt-body-category .only-category { display: block; }
#tt-body-archive .only-archive { display: block; }
#tt-body-tag .only-tag { display: block; }
#tt-body-search .only-search { display: block; }
#tt-body-guestbook .only-guestbook { display: block; }
#tt-body-location .only-location { display: block; }
/* 홈(인덱스)에서만 #latest-strip 표시 — 색상에는 전혀 손대지 않음 */
#latest-strip{ display:none; }                    /* 기본: 숨김 */
#tt-body-index #latest-strip{ display:block; }    /* 홈일 때만 보임 */

/* ---------- 페이지별 렌더링 e ---------- */



/* ---------- 공지 s ---------- */
/* 기본은 숨김 */
.top-notice{ display:none; }

/* 홈(메인)에서만 표시 */
.top-notice{
  display:block;
  background: black;            /* 검은색 */
  color:#fff;                  /* 흰 텍스트 */
  font-size: 14px;             /* 얇은 느낌 */
  line-height: 1;              /* 타이트하게 */
  padding: 8px 12px;           /* 높이 ~24~28px 정도 */
  text-align:center;
  border-bottom: 1px solid rgba(255,255,255,.06); /* 아주 살짝 구분선 */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ---------- 공지 e ---------- */


/* ---------- 진행바 컬러 s ---------- */
#indicator .bar{
 background: linear-gradient(
  90deg,
  #ffd6e0, /* 파스텔 핑크 */
  #fbcfe8, /* 연한 체리블로썸 */
  #e9d5ff, /* 라일락 */
  #bfdbfe, /* 파스텔 블루 */
  #bbf7d0, /* 민트 */
  #ffd6e0  /* 다시 핑크 */
) !important;

  background-size: 200% 100%;
  animation: indicator-sweep 6s linear infinite;
}
@keyframes indicator-sweep{ to{ background-position: 200% 0; } }

/* 모션 줄이기 선호 시 정지 */
@media (prefers-reduced-motion: reduce){
  #indicator .bar{ animation: none; }
}


/* ---------- 진행바 컬러 e ---------- */


/* Start https://www.cursors-4u.com */ 
* {cursor: url(https://cur.cursors-4u.net/nature/nat-10/nat984.cur), auto !important;} 
/* End https://www.cursors-4u.com */


/*-------------- 클릭 물결 효과 (s)--------------*/
div.clickEffect{
  position: fixed;
  box-sizing: border-box;
  border-style: solid;
  border-color: #ffffff;       /* 기본 색상 */
  border-radius: 50%;
  animation: clickEffect 0.4s ease-out;
  z-index: 99999;
  pointer-events: none;    
  will-change: transform, opacity;
}

/* 다크 모드에서 색만 살짝 조정하고 싶으면 */
.dark div.clickEffect{
  border-color: #ebc4d8;       /* 예: 핑크 */
}

/* 모션 줄이기 선호 시 비활성화 */
@media (prefers-reduced-motion: reduce){
  div.clickEffect{ display: none !important; }
}

/* 기본 키프레임(원본 그대로) */
@keyframes clickEffect{
  0%{
    opacity: 1;
    width: 0.5em; height: 0.5em;
    margin: -0.25em;
    border-width: 0.5em;
  }
  100%{
    opacity: 0.2;
    width:10em; height:10em;   /* ← 15em → 10em */
    margin:-5em;               /* ← 최종 크기의 절반(= -10em/2) */
    border-width: 0.03em;
  }
}

/*-------------- 클릭 물결 효과 (e)--------------*/

/*-------------- 타이핑 효과 (s) ----------*/

.typewriter-container {
  height: 100vh;
  display: flex;
  align-items: center; 
  justify-content: center; /* 가로 가운데 */
  box-sizing: border-box;
  --text-color: white;
  margin-top: -5rem;
}


.typewriter {
  font-family: 'home-title';

  /* font-family: Arial, Helvetica, sans-serif; */
  font-size: 3.8rem;
  color: #fff;
  font-weight: 700;
}
.typewriter span {
   padding: 10px;
   border-right: solid var(--text-color) 10px; 

  background: linear-gradient(270deg, #ff6ec4, #7873f5, #1fd1f9, #00ff9d, #fffd87, #ff6ec4);
  background-size: 1200% 1200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 10s ease infinite, cursor 1s ease-in-out infinite;
}

@keyframes rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@keyframes cursor {
    from { border-color: var(--text-color); }
    to { border-color: transparent; }
}

@media (max-width: 576px) {
    .typewriter { font-size: 22px; }
}
@media (max-width: 768px) {
    .typewriter { font-size: 34px; }
}
/*-------------- 타이핑 효과 (e) ----------*/


/*-------------- 글쓰기 헤더 커스텀 (s) ----------*/
.custom-header {
  display: flex;
  flex-direction: column; /* 세로로 배치 */
  align-items: start;
  margin: 10rem 0 2rem 0;
  text-align: left;
}

.header-thumbnail {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;  /* 크기 줄어들지 않게 */
  box-shadow: 0px 0px 5px #444;
  margin-bottom: 2rem; /* 이미지와 텍스트 간격 */
}
.dark .custom-header{
  color: white;
}

.header-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 이미지 꽉 차게 */
}

.header-text .title {
  font-size: 28px;
  font-weight: bold;
}

.header-text .meta{
  color: #6B7280;
}

.dark .header-text .meta{
  color: #9CA3AF;
}

/*-------------- 글쓰기 헤더 커스텀 (e) ----------*/

/*-------------- 프로필 이미지 회전 (s) ----------*/
/* 래퍼: 무지개 링용 컨테이너 */
.avatar {
  position: relative;
  width: 96px;   /* w-24 = 96px */
  height: 96px;  /* h-24 = 96px */
  border-radius: 9999px;
  display: inline-block;
}

/* 무지개 링 (hover 시 나타나고 빙글빙글) */
.avatar::before {
  content: "";
  position: absolute;
  inset: -4px;              /* 링 두께 */
  border-radius: inherit;
  padding: 4px;             /* 링 두께와 동일 */
  background: conic-gradient(
    #ffd6e0, /* 파스텔 핑크 */
    #f8e9a1, /* 파스텔 옐로 */
    #b5ead7, /* 민트 */
    #c7ceea, /* 파스텔 보라 */
    #ffdac1, /* 살구 */
    #ffd6e0  /* 다시 핑크로 자연스럽게 */
  );
  /* 가운데를 투명하게 뚫기 (ring 효과) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transform: rotate(0deg);
  transition: opacity .25s ease;
}

.avatar:hover::before {
  opacity: 1;
  animation: spin 3s linear infinite;
  /* 살짝 글로우 느낌 */
  filter: drop-shadow(0 0 10px rgba(255, 110, 196, .4));
}

/* 이미지 회전 */
.avatar .thumb {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
  transition: transform .8s ease, filter .3s ease;
}

.avatar:hover .thumb {
  transform: rotate(360deg) scale(1.02);
  transition: transform 1.5s linear, filter .3s ease; 
}

/* 회전 키프레임 */
@keyframes spin { to { transform: rotate(360deg); } }

/* 사용자 접근성: 모션 최소화 선호 시 애니메이션 제거 */
@media (prefers-reduced-motion: reduce) {
  .avatar::before,
  .avatar:hover::before,
  .avatar .thumb,
  .avatar:hover .thumb {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .avatar::before { opacity: 1; } /* 링은 고정 표시하고 싶으면 유지, 숨기려면 0으로 */
}
/*------------------------ 프로필 이미지 회전 (e) --------------------*/



/*-------------------- 관리자 버튼 (s) (글쓰기 / 관리)--------------------*/
.manage-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

/* 기본 스타일 (라이트 모드) */
.manage-menu a {
  padding: .6rem 1rem;
  border-radius: .5rem;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  border: 1px solid #d1d5db;     
  color: #111827;            
  background-color: #ffffff;     
}

.manage-menu a:hover {
  font-weight: 800;
  transform: translateY(-1px);
}

/* 다크 모드 */
.dark .manage-menu a {
  border: 1px solid #4b5563;  
  background-color: #1f2937;    
  color: #e5e7eb;   
}

.dark .manage-menu a:hover {
  color: #111827;        
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255,255,255,0.1);
}

/* ------------------------------관리자 버튼 (e) (글쓰기 / 관리) ------------------------------*/


/*  ======================== START 무한스크롤  =================================*/
.only-index {
  display: none;
  animation: fadeInHero 1.5s ease forwards;

}

@keyframes fadeInHero {
  from { opacity: 0; transform: scale(1.03); }
  to { opacity: 1; transform: scale(1); }
}

#tt-body-index .only-index {
  display: block;
}
.only-index {
}




/* 인덱스 페이지의 "홈 전용" 블록만 풀블리드 배경으로 */
#tt-body-index #global-header > .only-index {
  display: block;          /* 인덱스에서 보이게 */
  position: relative;      /* 기준 컨테이너 */
  isolation: isolate;      /* z-index 격리 (::before가 뒤로 깔리게) */
  padding-bottom: 7rem;
}

#tt-body-index #global-header > .only-index::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;               /* 섹션의 실제 높이 만큼 세로로 채움 */
  left: 50%;
  width: 100vw;            /* 화면 전체 가로폭 */
  transform: translateX(-50%);
  background: #F7F9FC;         /* 원하는 색 */
  z-index: -1;             /* 내용 뒤로 */
}

.dark #tt-body-index #global-header > .only-index::before {
  background: #121212;

}

/* 그리드: 2열(모바일) → 3열(태블릿) → 4열(데스크톱) */
#home-tiles .tiles {
  display: grid;
  gap: 16px; /* 여백 살짝 여유 */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  
}


@media (min-width: 640px) {
  #home-tiles .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  #home-tiles .tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 데스크톱 4열 */
  }
}

/* 타일 (JS가 .is-visible을 붙인 것만 출력) */
#home-tiles .tile {
  position: relative;
  display: none;              /* 기본 감춤 */
  aspect-ratio: 16 / 11;      /* 4:3보다 살짝 더 높게 → 조금 더 크게 보임 */
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transform: translateZ(0);
}
#home-tiles .tile.is-visible {
  display: block;
}

#home-tiles .tile-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}

#home-tiles .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
  pointer-events: none;
}

#home-tiles .tile-label {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: .4rem .65rem;
  border-radius: .65rem;
  font-weight: 700;
  font-size: 1rem;
  color: #e5e7eb;
  background: rgba(0, 0, 0, .35);
  backdrop-filter: blur(2px);
}

#home-tiles .tile:hover .tile-img {
  transform: scale(1.05);
}

/* 버튼 */
#home-tiles .more-btn {
  margin-top: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid #111827;
  transition: transform .12s ease, box-shadow .12s ease;
}
#home-tiles .more-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.dark #home-tiles .more-btn {
  border: 1px solid #fff;
  color:#fff;
}

/*  ======================== END 무한스크롤  =================================*/



/*  ======================== START 최신글 스트립  =================================*/
/* 홈에서만 보이게 (공용정책 유지) */
.only-index{ display:none; }
#tt-body-index .only-index{ display:block; }

/* 섹션 간격 h-h min-h-[theme(spacing.h)] flex items-center justify-center font-bold text-3xl dark:text-h-200 */
 
.home-tit{
  font-family: 'catagory-title';
  display:flex;
  align-items: center;
  justify-items: center;
  font-size: 2rem;
  font-weight: 700;
  padding: 8rem 0 3rem 0;
}
.dark .home-tit{
  color: white;
}

.tit.home-tit{
  position: relative; 
  display: flex; 
  align-items: center;  
  justify-content: center; 
  padding-right: 2rem;  

}

/* 바로 오른쪽에 고정되는 GIF */
.tit.home-tit > img{
  position: absolute;
  right: 34%;
  top: 65%;
  transform: translateY(-50%);  /* 정확히 중앙 정렬 */
  width: 6rem;
  height: 6rem;
  object-fit: contain;
  pointer-events: none;  /* 클릭 막기 */
}
@media (max-width: 778px) {
  .tit.home-tit > img {
    right: 25%;
    top: 68% ;
  }
}

@media (max-width: 480px) {
  .home-tit {
    font-size: 1.25rem;
    padding: 4rem 0 1.5rem 0;
  }

  .tit.home-tit > img {
    right: 28%;
    top: 68%;
    width: 3rem;
    height: 3rem;
  }
}

/* 그리드 */
#latest-strip .latest-grid{
  
  display:grid;
  grid-template-columns: 1fr;       /* 모바일 1열 */
  gap:16px;
}
@media (min-width:640px){           /* 태블릿 2열 */
  #latest-strip .latest-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1024px){          /* 데스크톱 3열 */
  #latest-strip .latest-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* 카드 기본 */
#latest-strip .card {
  border-radius: 16px;  /* 둥근 모서리 */
  overflow: hidden;     /* 그림자 깔끔히 */
  transition:
    transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.35s cubic-bezier(0.25, 1, 0.5, 1),
    background-color 0.35s ease;
  will-change: transform, box-shadow;
  background-color: #fff;

  box-shadow:
  0 2px 6px rgba(0, 0, 0, 0.08),
  0 4px 12px rgba(0, 0, 0, 0.06);
}

/* Hover 효과 */
#latest-strip .card:hover {
  transform: translateY(-4px) scale(1.02); /* 살짝 뜨는 느낌 */
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 4px 8px rgba(0, 0, 0, 0.06); /* 부드러운 둥근 그림자 */
}

/* 다크 모드 */
.dark #latest-strip .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark #latest-strip .card:hover {
  background: rgba(255, 255, 255, 0.08);
}


/* 링크 블록 */
#latest-strip .link{ display:block; padding:12px; border-radius:inherit; outline:none; }

/* 썸네일 */
#latest-strip .thumb{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius:12px;
  overflow:hidden;
  background:#e5e7eb;
  position:relative;
}

/* 카테고리 배지 */
#latest-strip .tag-badge{
  position:absolute; top:8px; right:8px;
  max-width:70%;
  padding:4px 8px;
  border-radius:9999px;
  font-size:11px; line-height:1; font-weight:600;
  color:#0f172a;
  background: rgba(255,255,255,.9);
  border:1px solid rgba(17,24,39,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dark #latest-strip .tag-badge{
  color:#e5e7eb;
  background: #121212;
  border-color: rgba(255,255,255,.14);
}


/* ====== 제목 2줄 고정 + 카드 높이 균일 ====== */

/* 카드 전체가 같은 높이가 되도록 링크를 세로 레이아웃로 */
#latest-strip .card { /* 카드 본체 */
  display: block; /* 기본값 유지 */
}
#latest-strip .link{
  display: flex;
  flex-direction: column;
  height: 100%;              /* 카드 높이 채움 */
}

/* 위쪽 썸네일/메타는 내용 높이만, 아래 제목은 2줄 고정 높이 */
#latest-strip .thumb{ flex: 0 0 auto; }
#latest-strip .meta { flex: 0 0 auto; }

#latest-strip .title {
  --lines: 2;
  --lh: 1.35;
  margin-top: 6px;
  font-size: 15px;
  line-height: var(--lh);
  color: var(--h-800, #111827);

  /* 핵심: line clamp 유지하면서 flex 버그 방지 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;

  /* min-height만 남기고 max-block-size 제거 (이게 원인!) */
  min-height: calc(var(--lines) * 1em * var(--lh));

  /* flex-item이 줄어들지 않게 고정 */
  flex-shrink: 0;
}

.dark #latest-strip .title {
  color: var(--h-200, #e5e7eb);
}


/* 다크 모드 색상 유지 */
.dark #latest-strip .title{ color: var(--h-200,#e5e7eb); }

/* (선택) 그리드 아이템이 행 높이에 꽉 차도록 보장 */
#latest-strip .latest-grid > .card{
  align-self: stretch;
}



/* 내용이 없으면 숨김(안전장치) */
#latest-strip .tag-badge:empty{ display:none; }

/* 살짝 포인트 주고 싶으면 (선택) */
#latest-strip .tag-badge::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #8b5cf6, #06b6d4 70%);
}

.dark #latest-strip .thumb{ 
  background:#374151;
 }
 .dark .card .meta{
   color: white;
 }
#latest-strip .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* 메타 & 타이틀 */
#latest-strip .meta{
  margin-top:8px;
  font-size:12px;
  opacity:.7;
}



/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  #latest-strip .card{ transition:none; }
}

/* 최신글 more 버튼 */
#latest-strip .more-btn {
  margin-top: 2.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  border-radius: 1rem;
  font-weight: 700;
  font-size: .95rem;
  border: 1px solid #111827;
  color: #111827;
  background: transparent;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
}

#latest-strip .more-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: rgba(0,0,0,0.02);
}

/* 다크모드 */
.dark #latest-strip .more-btn {
  border: 1px solid #fff;
  color: #fff;
}


/*  =========================  END 최신글 스트립   =================================*/

/*  ======================== START FOOTER  =================================*/
.footer {
  width: 100%;
  padding: 3rem 1rem;
  background-color: #f9fafb;
  color: #374151;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.08);
  font-family: 'Pretendard', sans-serif;
  margin-top: 8rem;
}

.dark .footer {
  background-color: #111827;
  color: #d1d5db;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.footer-logo {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.03em;
}

.footer-desc {
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.footer-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s, transform 0.2s;
}

.footer-links a:hover {
  opacity: 0.7;
  transform: translateY(-1px);
}

.footer-copy {
  font-size: 0.8rem;
  opacity: 0.6;
  margin-top: 0.5rem;
}

@media (max-width: 640px) {
  .footer-inner {
    padding-inline: 1rem;
  }
  .footer-links {
    gap: 0.8rem;
  }
}


/*  ======================== END FOOTER  =================================*/

/*  ======================== START 검색  =================================*/

/* 접근성용 숨김 클래스 */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* 컨테이너(폼) */
#search #searchForm {
  --search-border: rgba(0,0,0,.08);
  --search-text: var(--h-800, #111827);
  --search-placeholder: rgba(0,0,0,.45);
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border:1px solid var(--search-border);
  border-radius: 9999px; /* pill */
  background: #1f2937;
  color: var(--search-text);
  box-sizing: border-box;

  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
/* ======================== START 검색 ======================== */

/* 기본 (라이트모드) */
#search #searchForm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 9999px;
  background: #fff;
  color: #2F3747;
  box-sizing: border-box;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

/* hover / focus */
#search #searchForm:hover {
  border-color: rgba(0,0,0,.18);
}
#search #searchForm:focus-within {
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* input */
#search #searchForm input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #2F3747;
}
#search #searchForm input::placeholder {
  color: rgba(0,0,0,0.4);
}

/* 아이콘 (라이트) */
#search #searchForm .icon-left,
#search #searchForm .icon-right {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
  fill: #6B7280;
  opacity: 0.8;
}

/* 버튼 */
#search #searchForm button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ======================== 다크모드 ======================== */
html.dark #search #searchForm,
html[data-theme="dark"] #search #searchForm {
  background: #2D2F33;
  border-color: #494949;
  color: #f3f4f6;
}

html.dark #search #searchForm:focus-within,
html[data-theme="dark"] #search #searchForm:focus-within {
  box-shadow: 0 0 0 4px rgba(255,255,255,0.06);
}

/*  다크모드 input  색상 지정 */
html.dark #search #searchForm input,
html[data-theme="dark"] #search #searchForm input {
  color: #f3f4f6; /* 흰색 글씨 */
}
html.dark #search #searchForm input::placeholder,
html[data-theme="dark"] #search #searchForm input::placeholder {
  color: rgba(255,255,255,0.5);
}

/*  아이콘은 완전 흰색 */
html.dark #search #searchForm .icon-left,
html.dark #search #searchForm .icon-right,
html[data-theme="dark"] #search #searchForm .icon-left,
html[data-theme="dark"] #search #searchForm .icon-right {
  fill: #ffffff;
  opacity: 0.9;
}

/* ======================== END 검색 ======================== */


/* ======================== START 카테고리 ======================== */

.tt_category {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Pretendard', sans-serif;
}
.link_item {
  position: relative;
}
.tt_category li > i.fa-chevron-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.tt_category a span,
.tt_category a .c_cnt {
  flex-shrink: 0; 
}
/* 기본 링크 */
.tt_category a {
  display: flex;
  align-items: center;
  border-radius: 9999px;
  font-weight: 500;
  color: #444;
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease, background 0.3s ease;
   white-space: nowrap;  
}
/* 애니메이션 */
.tt_category a.link_item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 32px;
  padding: 8px 12px;
  transition: background 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.tt_category a.link_item:hover {
  background: rgba(255,255,255,0.1);
  transform: translateX(2px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* 공통 아이콘 */
.tt_category a::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 50%;
  margin-right: 0.6rem;
  background: #f3f4f6;
  color: #555;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* 상위 카테고리 hover 효과 */
.tt_category a.link_item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #111;
}
.tt_category a.link_item:hover::before {
  transform: scale(1.1) rotate(5deg);
  color: 3f3f46;
  
}

/* 하위 카테고리 */
.tt_category a.link_sub_item {
  padding: 6px 12px 6px 48px;
  font-weight: 400;
  color: #666;
  transition: color 0.3s ease, background 0.3s ease;
}

/* 하위 아이콘 */
.tt_category a.link_sub_item::before {
  width: 22px;
  height: 22px;
  font-size: 12px;
  margin-left: -36px;
  background: #f9fafb;
  color: #666;
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}

/* 하위 hover */
.tt_category a.link_sub_item:hover {
  background: rgba(0, 0, 0, 0.03);
  color: #111;
}
.tt_category a.link_sub_item:hover::before {
  transform: translateX(3px) scale(1.1);
  background: #e5e7eb;
  color: #000;
}



/* 라이트 모드 */
.tt_category a::before {
  background: rgba(0, 0, 0, 0.04);
  color: #999999;
  box-shadow: none;
}

/* hover */
.tt_category a:hover {
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  color: #111827;
}

/* hover 아이콘 */
.tt_category a.link_item:hover::before,
.tt_category a.link_sub_item:hover::before {
  background: rgba(0,0,0,0.07);
  color: rgb(92, 91, 91);
  transform: scale(1.05);
}

/* selected도 hover와 동일한 스타일 */
.tt_category li.selected > a {
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.04);
  color: #111827 !important;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  transform: scale(0.98);
}

/* selected 아이콘도 hover와 동일하게 */
.tt_category li.selected > a::before {
  color: rgb(158, 158, 158);
  background: rgba(0,0,0,0.07);
  transform: scale(1.05);
  box-shadow: none;
}

/* 다크 모드 */
html.dark .tt_category a::before {
  background: rgba(255, 255, 255, 0.05);
  color: #9ca3af;
  box-shadow: none;
}

/* hover */
html.dark .tt_category a:hover {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #f9fafb;
}

/* hover 아이콘 */
html.dark .tt_category a.link_item:hover::before,
html.dark .tt_category a.link_sub_item:hover::before {
  background: rgba(255,255,255,0.15);
  color: #fff;
  transform: scale(1.05);
}

/* selected도 hover와 동일한 스타일 */
html.dark .tt_category li.selected > a {
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  color: #f9fafb !important;
  font-weight: 600;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.25);
  transform: scale(0.98);
}

/* selected 아이콘도 hover와 동일하게 */
html.dark .tt_category li.selected > a::before {
  background: rgba(255,255,255,0.15);
  color: #fff ;
  transform: scale(1.05);
  box-shadow: none;
}



/* subtle underline animation (살짝 미끄러지듯) */
.tt_category a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 18%;
  width: 0;
  height: 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, #a1c4fd, #c2e9fb, #a1f7d3);
  background-size: 200% 100%;
  transition: width 0.4s ease, background-position 1s ease;
}


.tt_category a {
  border: 1px solid transparent;
}

.tt_category a:hover {
  border: 1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.02);
}


.tt_category a:hover::after {
  width: 64%;
  background-position: right center;
}




/* 하위 카테고리 구분선 (optional) */
.tt_category ul.sub_category_list {
  border-left: 2px dashed rgba(0, 0, 0, 0.15);
  margin-left: 1rem;
  padding-left: 1rem;
  transition: border-color 0.3s ease;
}
html.dark .tt_category ul.sub_category_list {
  border-left: 2px dashed rgba(255, 255, 255, 0.25);
}


/* ======================== 상위 카테고리 아이콘 ======================== */
/* 하위 카테고리 개별 설정을 덮어쓰지 않도록 이 규칙은 그대로 둡니다. */
a[href="/category/Algorithm"]::before,
a[href^="/category/Algorithm/"]::before { content: '\f121'; } 

a[href="/category/GIT"]::before,
a[href^="/category/GIT/"]::before { content: '\f126'; } 

a[href="/category/CS"]::before,
a[href^="/category/CS/"]::before { content: '\f2db'; } 

a[href="/category/Language"]::before,
a[href^="/category/Language/"]::before { content: '\f1ab'; } 

a[href="/category/BE"]::before,
a[href^="/category/BE/"]::before { content: '\f233'; } 

a[href="/category/FE"]::before,
a[href^="/category/FE/"]::before { content: '\f5fc'; } 

a[href="/category/DB"]::before,
a[href^="/category/DB/"]::before { content: '\f1c0'; } 

a[href="/category/Project"]::before,
a[href^="/category/Project/"]::before { content: '\f07c'; } 

a[href="/category/Infra"]::before,
a[href^="/category/Infra/"]::before { content: '\f0c2'; } 

a[href="/category/Styling"]::before,
a[href^="/category/Styling/"]::before { content: '\f53f'; } 

/* Library */
a[href="/category/Library"]::before,
a[href^="/category/Library/"]::before { content: '\f5fd'; } 

a[href="/category/etc."]::before,
a[href^="/category/etc./"]::before { content: '\f12e'; } 

a[href="/category/IDE"]::before,
a[href^="/category/IDE/"]::before { content: '\f120'; } 

a[href="/category/%EA%B2%BD%EC%A0%9C%20%EF%BD%9C%20%EB%8F%85%EC%84%9C"]::before,
a[href^="/category/%EA%B2%BD%EC%A0%9C%20%EF%BD%9C%20%EB%8F%85%EC%84%9C/"]::before { content: '\f518'; } 

/* 0) 테마가 주입하는 ::before 초기화(하위 공통) */
#category .tt_category .sub_category_list li a.link_sub_item::before{
  content:'' !important;
  flex-shrink: 0 !important;  
  font-size:12px !important; line-height:24px !important;
  width:24px !important; height:24px !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  margin-left:-36px !important; margin-right:8px !important;
  background:#fff !important; border-radius:50% !important;
}

/* ===================== 하위 아이콘 전체 매핑 ===================== */

/* Algorithm */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Algorithm/BOJ"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Algorithm/BOJ"]::before{
  content:'\f1b2' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Algorithm/SWEA"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Algorithm/SWEA"]::before{
  content:'\f0eb' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Algorithm/%EC%9D%B4%EB%A1%A0"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Algorithm/%EC%9D%B4%EB%A1%A0"]::before{
  content:'\f02d' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}

/* CS */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/CS/Network"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/CS/Network"]::before{
  content:'\f6ff' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/CS/%EC%BB%B4%ED%93%A8%ED%84%B0%20%EA%B5%AC%EC%A1%B0"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/CS/%EC%BB%B4%ED%93%A8%ED%84%B0%20%EA%B5%AC%EC%A1%B0"]::before{
  content:'\f5fc' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/CS/OS"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/CS/OS"]::before{
  content:'\f233' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/CS/Web"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/CS/Web"]::before{
  content:'\f57d' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}


/* Language */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/Java"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/Java"]::before{
  content:'\f0f4' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/JavaScript"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/JavaScript"]::before{
  content:'\f3b8' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/Python"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/Python"]::before{
  content:'\f3e2' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/PHP"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/PHP"]::before{
  content:'\f457' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/C"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/C"]::before{
  content:'\f0e8' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}


/* BE */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/BE/Spring"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/BE/Spring"]::before{
  content:'\f06c' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/BE/Linux"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/BE/Linux"]::before{
  content:'\f17c' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Language/TypeScript"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Language/TypeScript"]::before{
  content:'\f121' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important; /* code */
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/BE/Node.js"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/BE/Node.js"]::before{
  content:'\f3d3' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}

/* FE */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/FE/React"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/React"]::before{
  content:'\f41b' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/FE/Next.js"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/Next.js"]::before{
  content:'\f0e7' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important; /* 대체 */
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/FE/HTML"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/HTML"]::before{
  content:'\f13b' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/FE/Bootstrap"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/Bootstrap"]::before{
  content:'\f836' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/FE/jQuery"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/jQuery"]::before{
  content:'\f1cc' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}

/* DB */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/DB/SQL"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/DB/SQL"]::before{
  content:'\f1c0' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/DB/Firebase"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/DB/Firebase"]::before{
  content:'\f06d' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}

#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/DB/Supabase"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/DB/Firebase"]::before{
  content:'\f76c' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}


/* Project */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Project/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Project/%ED%8A%B8%EB%9F%AC%EB%B8%94%EC%8A%88%ED%8C%85"]::before{
  content:'\f071' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Project/%ED%9A%8C%EA%B3%A0%EB%A1%9D"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Project/%ED%9A%8C%EA%B3%A0%EB%A1%9D"]::before{
  content:'\f303' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Project/Refactoring"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Project/Refactoring"]::before{
  content:'\f2f1' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}

/* Infra */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Infra/Docker"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Infra/Docker"]::before{
  content:'\f395' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Infra/AWS"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Infra/AWS"]::before{
  content:'\f375' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Infra/Linux"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Infra/Linux"]::before{
  content:'\f17c' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Infra/CI%20%C2%B7%20CD"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Infra/CI%20%C2%B7%20CD"]::before{
  content:'\f135' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Infra/Kubernetes"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Infra/Kubernetes"]::before{
  content:'\2638' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}

/* Styling */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Styling/CSS"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/FE/CSS"]::before{
  content:'\f13c' !important; font-family:'Font Awesome 6 Brands' !important; font-weight:400 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Styling/Tailwind"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Styling/Tailwind"]::before {
  content: '\f5b7' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
}

/* Library */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Library/Networking"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Library/Networking"]::before {
  content: '\f6ff' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
}

#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Library/State"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Library/State"]::before {
  content: '\f542' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
}

#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Library/UI"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Library/UI"]::before {
  content: '\f5fd' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
}

#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/Library/Utils"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/Library/Utils"]::before {
  content: '\f0ad' !important; font-family: 'Font Awesome 6 Free' !important; font-weight: 900 !important;
}

/* etc. */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/etc./%EC%A0%95%EB%B3%B4"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/etc./%EC%A0%95%EB%B3%B4"]::before{
  content:'\f05a' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/etc./%EB%A9%94%EB%AA%A8"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/etc./%EB%A9%94%EB%AA%A8"]::before{
  content:'\f249' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}

/* IDE */
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/IDE/IntelliJ"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/IDE/IntelliJ"]::before{
  content:'\f121' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}
#category .tt_category .sub_category_list li a.link_sub_item[href*="/category/IDE/VS%20Code"]::before,
#category .tt_category .sub_category_list li.selected > a.link_sub_item.active[href*="/category/IDE/VS%20Code"]::before{
  content:'\f120' !important; font-family:'Font Awesome 6 Free' !important; font-weight:900 !important;
}

/* ======================== END 카테고리 ======================== */


/* START======================== 글 목록 박스 토글 ======================== */


/* 박스 */
#content .contents_style .h2-box {
  margin: 1.25rem 0;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04),
              0 10px 24px rgba(0, 0, 0, .06);
  overflow: hidden;
}

.dark #content .contents_style .h2-box {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25),
              0 10px 24px rgba(0, 0, 0, .25);
}

/* 제목 */
#content .contents_style .h2-box > h2 {
  margin: 0;
  padding: 20px 44px 20px 24px !important;
  position: relative;
  scroll-margin-top: 6rem;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.dark #content .contents_style .h2-box > h2 {
  border-bottom-color: rgba(255, 255, 255, .18);
}

/* 본문 */
#content .contents_style .h2-box .h2-body {
 font-size: 15px;
  padding: 0 24px 24px 24px;
}

#content .contents_style .h2-box.collapsed .h2-body {
  display: none;
}

/* 화살표 */
#content .contents_style .h2-box > h2::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%; /* h2 높이 기준 중앙 정렬 */
  transform: translateY(-50%) rotate(45deg);
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: .5;
  transition: transform .18s ease;
}

/* 접힘 상태(화살표 회전) */
#content .contents_style .h2-box.collapsed > h2::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* 반응형 (작은 화면에서 패딩 조정) */
@media (max-width: 768px) {
  #content .contents_style .h2-box > h2 {
    padding: 18px 38px 18px 20px !important;
  }

  #content .contents_style .h2-box > h2::after {
    right: 12px;
    width: 8px;
    height: 8px;
  }

  #content .contents_style .h2-box .h2-body {
    padding: 0 20px 20px 20px;
  }
}

/* END======================== 글 목록 박스 토글 ======================== */


/* START================= 사이드 목차 스타일 ================= */

.tits{
  font-size: 13px;
}

/* 공통 버튼 토큰 */
#scrollspy .btn, 
#scrollspy .close, 
#scrollspy .open{
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .18s ease;
}

/* 상단 컨트롤: 모두 열기 / 모두 닫기  */
#scrollspy .spy-head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.3rem;
  padding:.5rem .75rem .6rem .75rem;
  position:sticky;
  top:0;
  z-index:1;
  background:inherit;
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-right: 2rem;
  margin-bottom:.25rem;
}
.dark #scrollspy .spy-head{ border-bottom-color: rgba(255,255,255,.18); }

#scrollspy .spy-head .btn{
  padding:.4rem .7rem;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  background:#fff;
  font-size:.78rem;
  line-height:1rem;
  cursor:pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
#scrollspy .spy-head .btn:hover{
  background:#f7f7f9;
  border-color:rgba(0,0,0,.16);
  box-shadow:0 2px 6px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
#scrollspy .spy-head .btn:active{
  transform: translateY(0);
  box-shadow:0 1px 3px rgba(37, 37, 37, 0.08);
}

.dark #scrollspy .spy-head .btn{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.25);
  color:#fff;
}
.dark #scrollspy .spy-head .btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.35);
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}

.spy .close{
  z-index: 1000;
}

/* END ================= 사이드 목차 버튼 스타일 ================= */


/* START ================= 코드 블록 ================= */

/* 공통 */
@font-face {
  font-family: Source Code Pro !important;
  src: url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap") !important;
}

pre {
  position: relative !important;
  background-color: transparent !important;
  border-radius: 8px !important;
}

pre::after {
  content: attr(data-ke-language) !important;
  position: absolute !important;
  bottom: 6px !important;
  right: 12px !important;
  font-size: 12px !important;
  font-family: "Source Code Pro", monospace !important;
  color: #747a7a !important;
}

/* ========================= */
/* 코드 블록 전체 스타일 (라이트/다크 공통 적용) */
/* ========================= */
.hljs {
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  font-size: 14px !important;
  border-radius: 8px !important; /* 전체 라운드 */
  color: #cfd2d1 !important;
  background-color: #292a2d !important; /* [수정] 메인 배경색 */
  box-shadow: 0 12px 24px rgb(0 0 0 / 40%) !important;
  font-family: "Source Code Pro", monospace !important;
  overflow: hidden !important;
}

/* 코드 블록 헤더 (상단 바) */
.hljs .code-header {
  display: flex !important;
  align-items: center !important;
  padding: 8px 10px 8px 14px !important;
  background-color: #262729 !important; /* [수정] 상단 바 색상 */
  border-radius: 8px 8px 0 0 !important; /* 상단 라운드 */
  color: #fff !important;
}

/* 줄 설정 및 호버 */
.hljs .line {
  counter-increment: line-idx !important;
  line-height: 1.8 !important;
  white-space: pre !important;
  padding-right: 5px !important;
  min-width: 100% !important;
}

.hljs .line:hover {
  background-color: #313338 !important; /* 배경보다 살짝 밝은 호버색 */
}

.hljs .line::before {
  content: counter(line-idx) !important;
  width: 24px !important;
  display: inline-block !important;
  text-align: right !important;
  margin-right: 16px !important;
  font-size: 0.8rem !important;
  color: #747a7a !important;
}

/* 신호등 버튼 */
.hljs .code-header {
  background: #2d3440 !important;
}
.hljs .code-header .btn {
  border-radius: 50% !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 4px !important;
}

.hljs .code-header .btn.red {
  background-color: #f5655b !important;
}
.hljs .code-header .btn.yellow {
  background-color: #f6bd3b !important;
}
.hljs .code-header .btn.green {
  background-color: #43c645 !important;
}

/* 복사 버튼 */
.hljs .copy-btn {
  background-color: #ffffff10 !important;
  border: none !important;
  cursor: pointer !important;
  color: #fff !important;
  border-radius: 4px !important;
  width: 36px !important;
  height: 28px !important;
  margin-left: auto !important;
  transition: 0.2s background-color !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hljs .copy-btn:hover {
  background-color: #ffffff20 !important;
}

/* 코드 내용 스크롤 */
.hljs .code-body {
  max-height: 600px !important;
  margin: 20px 8px 25px 8px !important;
  overflow: auto !important;
  background-color: #292a2d !important; /* 본문 배경색 재강조 */
}

.hljs .code-body::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

.hljs .code-body::-webkit-scrollbar-thumb {
  background-color: rgb(100 100 100 / 50%) !important;
  border-radius: 10px !important;
}


/* END ================= 코드 블록 ================= */