/* =======================================================
   ========== Base / Content ==========
======================================================= */
body { color: #333; }

.page a.active { opacity: 0.4; }

sub, sup { position: relative; vertical-align: baseline; }
sub { top: 0.3em; }
sup { top: -0.4em; }

s { text-decoration: line-through; font-size: 1.2rem; }

img { border: 0; padding: 0; }

ul, ol { margin: 0; padding: 0 0 0 1em; }

blockquote { margin: 0; padding: 0 0 0 2em; }

hr {
  background: rgba(127,127,127,0.2);
  border: 0;
  height: 1px;
  display: block;
}

.content img { float: none; margin-bottom: .5em; }

.gallery_image_caption {
  margin-top: 1.2rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 1.3;
  font-family: 'Helvetica Neue', Icons;
  font-style: normal;
  font-weight: 400;
  color: rgba(85,85,85,1);
}

/* =======================================================
   ========== Loading ==========
======================================================= */
.loading[data-loading] {
  position: fixed;
  bottom: 8px;
  left: 8px;
}

/* =======================================================
   ========== Editor Styles ==========
======================================================= */
[data-predefined-style="true"] bodycopy {
  display: block;
  font-size: 1.6rem;
  line-height: 1.5;
  font-weight: normal;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
  font-style: normal;
}

[data-predefined-style="true"] bodycopy a {
  color: #333;
  padding-bottom: 0.1em;
  border-bottom: 1px solid rgba(0,0,0,0.9);
  text-decoration: none;
}

[data-predefined-style="true"] h1,
[data-predefined-style="true"] h2 {
  font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
  font-style: normal;
  font-weight: normal;
  padding: 0;
  margin: 0;
  color: rgba(0,0,0,0.9);
}

[data-predefined-style="true"] h1 {
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

[data-predefined-style="true"] h1 a,
[data-predefined-style="true"] h2 a {
  color: rgba(0,0,0,0.9);
  border-bottom: 1px solid rgb(41,41,41);
}

[data-predefined-style="true"] h2 {
  font-size: 2rem;
  line-height: 1.6;
}

[data-predefined-style="true"] small {
  display: block;
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
  font-style: normal;
  font-weight: normal;
  color: rgba(0,0,0,0.9);
}

[data-predefined-style="true"] small a {
  color: rgba(0,0,0,0.9);
  border-bottom-width: 0;
}

/* =======================================================
   ========== Breakpoints / Layout ==========
======================================================= */
[data-css-preset] .page { background-color: initial /*!page_bgcolor*/; }

.mobile .page,
[data-css-preset].mobile .page {
  margin-top: 2rem;
  position: relative;
  min-height: 10px;
  max-width: 100%;
  width: 100%;
  background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
  margin-left: auto /*!content_center*/;
  margin-right: auto /*!content_center*/;
  text-align: left /*!text_left*/;
}

[data-css-preset] body { background-color: #fff /*!body_bgcolor*/; }

[data-css-preset] .container_width { width: 80% /*!content_center*/; }

[data-css-preset] .content_padding { padding: 2rem /*!main_margin*/; }

[data-css-preset] text-limit {
  display: inline-block /*!text_width*/;
  max-width: 66rem /*!text_width*/;
}

/* =======================================================
   ========== Thumbnails ==========
======================================================= */
div[thumbnails] { justify-content: flex-start; }

[data-css-preset] .thumbnails { background-color: transparent /*!thumbnails_bgcolor*/; }
[data-css-preset] .thumbnails_width { width: 59% /*!thumbnails_width*/; }
[data-css-preset] [thumbnails-pad] { padding: 0.5rem /*!thumbnails_padding*/; }
[data-css-preset] [thumbnails-gutter] { margin: -1rem /*!thumbnails_padding*/; }
[data-css-preset] [responsive-layout] [thumbnails-pad] { padding: 0.5rem /*!responsive_thumbnails_padding*/; }
[data-css-preset] [responsive-layout] [thumbnails-gutter] { margin: -1rem /*!responsive_thumbnails_padding*/; }

/* ----- Tags ----- */
.tags {
  padding-top: 1.25rem; /* margin 대신 padding 사용 */
  margin-top: 0;
  margin-bottom: 2.4rem;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(85,85,85,1);
  font-family: 'Helvetica Neue', Icons;
  font-style: normal;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
}

.tags a {
  border-bottom: 0;
  text-decoration: none;
  margin-right: 0.2rem;
  margin-bottom: 0.4rem;
  font-family: 'Helvetica Neue', Icons;
  display: block;
  padding: 6px 20px;
  border: 2px solid black;
  border-radius: 9999px;
}

/* ----- Thumbnail Base (중복 정리) ----- */
.thumbnails .thumbnail { 
  opacity: 100%; 
  line-height: 0;
  overflow: hidden;
  border: none;
  background-color: transparent;
}

/* 내부 링크에만 적용 */
.thumbnails .thumbnail > a {
  display: block;
  line-height: 0; /* 링크 내부의 baseline 제거 */
}

/* 실제 이미지: 분산되었던 선언 통합 */
.thumbnails .thumbnail .thumb_image {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 12px;

  outline-offset: -1px;
  position: relative;
  /* transform: translateZ(0); */     /* 잠시 비활성화 */
  /* backface-visibility: hidden; */  /* 잠시 비활성화 */

  transition: border-radius 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.thumbnails .thumbnail .title {
  margin-top: 1.4rem;
  font-size: 1.2rem;
  line-height: 1.3;
  font-weight: bold;
  color: rgba(0,0,0,0.9);
  font-family: 'Helvetica Neue', Icons;
  font-style: normal;
  text-align: center;
  transition: all 0.4s ease-in-out;
}

/* ----- Hover Behavior ----- */
.thumbnails .thumbnail .thumb_image:hover {
  border-radius: 400px;
  opacity: 0.7;
  animation: pulse-animation-in 0.4s ease-in-out;
}

.thumbnails .thumbnail .title:hover { opacity: 0.7; }
/* 제목 hover 시에도 이미지에 pulse 애니메이션 적용 */
.thumbnails .thumbnail .title:hover + .thumb_image,
.thumbnails .thumbnail:hover .thumb_image {
  border-radius: 400px;
  opacity: 0.7;
  animation: pulse-animation-in 0.4s ease-in-out;
}

@keyframes pulse-animation-in {
  0%   { border-radius: 20px; }
  100% { border-radius: 400px; }
}

/* ----- Disable hover when tag is active ----- */
.thumbnail.is-tag-hover .thumb_image,
.thumbnail.is-tag-hover .thumb_image:hover {
  animation: none !important;
  border-radius: 12px !important;
  opacity: 1 !important;
}

.thumbnail.is-tag-hover .title { opacity: 1 !important; }

/* 제목 hover 시 이미지 pulse */
.thumbnails .thumbnail.is-title-hover:not(.is-tag-hover) .thumb_image {
  border-radius: 400px;
  opacity: 0.7;
  animation: pulse-animation-in 0.4s ease-in-out;
}

/* =======================================================
   ========== Site Menu Button ==========
======================================================= */
[data-css-preset] #site_menu_button {
  color: rgba(0,0,0,0.9);
  font-size: 28px /*!site_menu_button*/;
  padding: 6px;
  line-height: 1;
  background: rgba(33,32,46,0);
  position: fixed;
  top: 3rem /*!site_menu_button*/;
  right: 3rem /*!site_menu_button*/;
}

body.mobile #site_menu_button { margin: -6px; font-size: 34px; }
#site_menu_button.custom_icon { width: 40px; height: auto; }
#site_menu_button.active { display: none; }

/* =======================================================
   ========== Site Menu ==========
======================================================= */
#site_menu {
  font-family: 'Helvetica Neue', Icons;
  background: rgba(20,20,20,0.95);
  font-style: normal;
  font-weight: 900;
  font-size: 3rem;
  text-align: center;
  display: flex;
  justify-content: flex-start;
}

body.mobile #site_menu { width: 100%; }

#site_menu .page-link a,
#site_menu .set-link > a {
  padding-top: 1.2rem;
  color: rgba(255,255,255,0.75);
}

#site_menu a:active { opacity: .7; }
#site_menu a.active { opacity: .4; }

#site_menu .close {
  display: none;
  color: rgba(255,255,255,1);
  line-height: .85em;
  font-size: 45px;
}

body.mobile #site_menu .close {
  display: block;
  font-size: 50px;
  line-height: 1em;
}

#site_menu .break  { height: 28px; }
#site_menu .indent { margin-left: 28px; }

/* =======================================================
   ========== Quick View ==========
======================================================= */
[data-css-preset] .quick-view {
  padding: 2rem /*!quick_view_padding*/;
  height: 100% /*!quick_view_height*/;
  width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
  width: 100%;
  height: 100%;
  margin: 0;
}

[data-css-preset] .quick-view-background {
  background: rgba(0,0,0,0.8) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
  font-family: "Neue Haas Grotesk", Icons;
  transition: 100ms opacity ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 3.5rem 0;
  text-align: center;
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.3;
}

.quick-view-caption span {
  padding: 0.5rem 1rem;
  display: inline-block;
  background: rgba(0,0,0,0.5);
  color: #fff;
}

/* =======================================================
   ========== Feed ==========
======================================================= */
.feed .content_container .page {
  border-top: 0px dashed rgba(0,0,0,0.2);
}

.feed .content_container .page_container:first-child .page {
  border-top: 0;
}

/* =======================================================
   ========== Audio Player ==========
======================================================= */
.audio-player {
  max-width: 36rem;
  height: 3.3rem;
  outline: 1px solid rgba(0,0,0,0.15);
  color: rgba(0,0,0,0.6);
  background: #fff;
  font-size: 1.2rem;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
  font-style: normal;
  font-weight: 400;
  text-align: left;
  margin: 1px 1px 1em 1px;
}

body.mobile .audio-player { max-width: 100%; }

.audio-player .separator { width: 1px; background-color: rgba(0,0,0,0.15); }
.audio-player .button    { background: transparent; cursor: pointer; fill: rgba(0,0,0,0.85); }
.audio-player .icon      { fill: rgba(0,0,0,0.85); padding: 30%; width: 100%; margin: auto; }
.audio-player .buffer    { background: rgba(0,0,0,0.03); }
.audio-player .progress  { background: rgba(0,0,0,0.1); }

.audio-player .progress-indicator {
  border: 1px solid rgba(0,0,0,0.7);
  width: 1px;
  height: 100%;
  right: 0;
  position: absolute;
  cursor: ew-resize;
}

.audio-player .note-icon {
  height: 100%;
  width: 3.8rem;
  padding: 1rem;
  fill: rgba(0,0,0,0.5);
}

.audio-player .current-time { padding-left: 1rem; }
.audio-player .total-time   { padding-right: 1rem; }