@charset "utf-8";
/* =============================================================
   FRME 매거진 스킨 (Tistory)
   -------------------------------------------------------------
   구조
     01 디자인 토큰          11 뉴스레터
     02 리셋 & 베이스        12 목록 / 페이지네이션
     03 레이아웃 컨테이너     13 글 상세 (KV·헤더·본문)
     04 헤더 / GNB           14 본문 매거진 인용·이미지
     05 검색 오버레이         15 본문 코드블록
     06 히어로 캐러셀         16 관련글 카드(ref-card)
     07 섹션 헤더·화살표      17 댓글 영역
     08 카드 / 그리드        18 스크롤 등장 모션
     09 카드 캐러셀          19 반응형 (≤960)
     10 Most Read 띠         20 접근성

     [FOOTER]
     21 메인 히어로 날짜       25 헤더 기능메뉴 구분선
     22 글 상세 메타(읽기시간)  26 다크모드 토글 버튼
     23 읽기 진행 바          27 다크 모드
     24 관련 글 (RELATED)

   커스터마이즈: 색·폭·라운드는 01 토큰만 바꾸면 전체 반영됩니다.
   히어로 양옆 노출량은 06의 --frme-hero-inset 하나로 조절합니다.
   다크 모드 색은 27의 body.dark 토큰만 바꾸면 전체 반영됩니다.
   ============================================================= */


/* =============================================================
   01 · 디자인 토큰
   ============================================================= */
:root{
  --frme-bg:       #f3efe8;   /* 배경(따뜻한 화이트) */
  --frme-surface:  #faf8f3;   /* 카드/면 */
  --frme-ink:      #161412;   /* 본문·제목 */
  --frme-soft:     #6e6a60;   /* 보조 텍스트 */
  --frme-line:     #ddd7c9;   /* 구분선 */
  --frme-accent:   #161412;   /* 포인트(무채색) */

  --frme-sans: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --frme-serif: 'MaruBuri', serif;

  --frme-radius:   16px;      /* 썸네일 라운드 */
  --frme-maxw:     1200px;    /* 콘텐츠 최대폭 */
  --frme-header-h: 84px;      /* 헤더 높이 */
}


/* =============================================================
   02 · 리셋 & 베이스
   ============================================================= */
*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body{
  background: var(--frme-bg);
  color: var(--frme-ink);
  font-family: var(--frme-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol, li{ list-style: none; }
#frme-wrap{ overflow: hidden; }


/* =============================================================
   03 · 레이아웃 컨테이너
   ============================================================= */
.frme-main{
  max-width: var(--frme-maxw);
  margin: 0 auto;
  padding: 0 40px;
}
.frme-main-wrap{ padding-top: var(--frme-header-h); }   /* 고정 헤더 보정 */
/* 히어로가 있는 페이지는 비주얼이 헤더 뒤로 올라오므로 보정 해제 */
body.has-hero .frme-main-wrap{ padding-top: 0; }


/* =============================================================
   04 · 헤더 / GNB
   ============================================================= */
.frme-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--frme-bg);
  border-bottom: 1px solid var(--frme-line);
  transition: transform .35s ease, box-shadow .35s ease,
              background .35s ease, backdrop-filter .35s ease,
              border-color .35s ease;
}
.frme-header-inner{
  max-width: var(--frme-maxw);
  margin: 0 auto;
  padding: 0 40px;
  height: var(--frme-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding-top .35s ease;
}

/* 로고 */
.frme-logo a{ display: inline-flex; align-items: center; height: 40px; }
.frme-logo-mark{ display: inline-flex; align-items: center; height: 100%; }
.frme-logo-mark svg{ height: 26px; width: auto; display: block; }

/* GNB 메뉴 (티스토리 카테고리 자동 출력) */
.frme-gnb{ display: flex; align-items: center; height: 40px; }
.frme-gnb ul,
.frme-gnb ol{ display: flex; align-items: center; height: 100%; gap: 40px; }
.frme-gnb li{ position: relative; display: flex; align-items: center; height: 100%; }
.frme-gnb a{
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--frme-ink);
  transition: opacity .2s ease;
}
.frme-gnb a:hover{ opacity: .55; }
/* 카테고리 글 개수·하위 카테고리 숨김 (1depth만 노출) */
.frme-gnb .c_cnt,
.frme-gnb .sub_category_list,
.frme-gnb .link_tit{ display: none; }

/* GNB 우측(메뉴+검색) */
.frme-gnb-right{ display: flex; align-items: center; height: 40px; gap: 24px; }
.frme-theme-toggle{ margin-right: -12px; margin-left: 24px; }   /* 검색 아이콘과 가깝게 */

/* 검색 아이콘 버튼 */
.frme-search-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: none;
  color: var(--frme-ink);
  cursor: pointer;
  transition: opacity .2s ease;
}
.frme-search-btn svg{ width: 22px; height: 22px; display: block; }
.frme-search-btn:hover{ opacity: .55; }

/* 모바일 토글 버튼 */
.frme-nav-toggle{
  display: none;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.frme-nav-toggle span{
  display: block;
  width: 24px; height: 2px;
  background: var(--frme-ink);
  transition: .3s;
}

/* ---- 스크롤 시: 블러 + 반투명 배경 (공통) ---- */
.frme-header.scrolled{
  background: rgba(243,239,232,.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--frme-line);
  box-shadow: 0 6px 22px rgba(0,0,0,.08);
}

/* ---- 히어로 페이지: 헤더 투명 + 흰 메뉴 ---- */
body.has-hero .frme-header{
  background: transparent;
  border-bottom-color: transparent;
}
body.has-hero .frme-gnb a,
body.has-hero .frme-search-btn{ color: #fff; }
body.has-hero .frme-header .frme-logo-svg g{ fill: #fff; stroke: #fff; }
body.has-hero .frme-nav-toggle span{ background: #fff; }

/* 히어로 페이지라도 스크롤 후엔 블러 배경 + 잉크 글자 */
body.has-hero .frme-header.scrolled{
  background: rgba(243,239,232,.48);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--frme-line);
}
body.has-hero .frme-header.scrolled .frme-gnb a,
body.has-hero .frme-header.scrolled .frme-search-btn{ color: var(--frme-ink); }
body.has-hero .frme-header.scrolled .frme-logo-svg g{ fill: #000; stroke: #000; }
body.has-hero .frme-header.scrolled .frme-nav-toggle span{ background: var(--frme-ink); }

/* 히어로 페이지 GNB 15px 아래로 (투명 상태에서만, 스크롤 시 원위치) */
/* body.has-hero .frme-header:not(.scrolled) .frme-header-inner{ padding-top: 15px; }*/


/* =============================================================
   05 · 검색 오버레이
   ============================================================= */
.frme-search-layer{
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--frme-bg);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  z-index: 200;
}
.frme-search-layer.open{ transform: translateY(0); }
.frme-search-inner{
  max-width: var(--frme-maxw);
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.frme-search-form{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  border-bottom: 2px solid var(--frme-ink);
  padding-bottom: 14px;
}
.frme-search-input{
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--frme-sans);
  font-size: 22px;
  font-weight: 500;
  color: var(--frme-ink);
  padding: 4px 0;
}
.frme-search-input::placeholder{ color: var(--frme-soft); }
.frme-search-input:focus{ outline: none; }
.frme-search-submit{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--frme-ink);
  cursor: pointer;
  padding: 4px;
}
.frme-search-close{
  flex-shrink: 0;
  width: 40px; height: 40px;
  border: 0;
  background: none;
  font-size: 32px;
  line-height: 1;
  color: var(--frme-ink);
  cursor: pointer;
  transition: opacity .2s ease;
}
.frme-search-close:hover{ opacity: .55; }


/* =============================================================
   06 · 히어로 캐러셀 (애플식 센터 모드)
   - 양옆에 이전/다음 카드가 살짝 보이는 중앙 카드 구조
   - 노출량은 --frme-hero-inset 하나로 조절
   - 메인 카드와 글 상세 KV의 상단 20px을 헤더 뒤로 숨겨
     두 페이지의 비주얼 시작 위치를 일치시킴(클릭 시 점프 방지)
   ============================================================= */
.frme-carousel{
  --frme-hero-inset: 172px;        /* ← 양옆 노출량. 키우면 카드가 좁아짐 */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);   /* 화면 끝까지 */
  overflow: hidden;
}
/* 메인 한정: 상단 20px을 헤더 뒤로 (라운드 가림 + 상세와 시작 일치) */
#tt-body-index .frme-carousel{
  margin-top: -20px;
  z-index: 1;                      /* 헤더(100)보다 아래 → 헤더가 위를 덮음 */
}
.frme-carousel-track{
  display: flex;
  gap: 16px;
  transition: transform .65s cubic-bezier(.2,.6,.2,1);
}
.frme-slide{
  flex: 0 0 calc(100% - var(--frme-hero-inset) * 2);
  min-width: 0;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: var(--frme-line);    /* 썸네일 없을 때/로딩 전 회색 면 */
  filter: brightness(.5);
  transition: filter .5s ease;
}
.frme-slide.is-active{ filter: brightness(1); }
.frme-slide.frme-clone{ pointer-events: none; }
.frme-slide-img{
  display: block;
  width: 100%;
  height: 600px;
  object-fit: cover;            /* background cover 역할 대체 */
  object-position: center;
}
/* 제목 가독용 하단 그라데이션 */
.frme-slide::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(0deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

  /* 슬라이드 제목 + '지금 읽기' (윗변 고정 → 1·2줄 모두 같은 시작점) */
  .frme-slide-info{
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: 44px;        /* top: 64% → bottom: 44px (아래 기준) */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
  }
  .frme-slide-title{
    color: #fff;
    font-size: clamp(22px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.01em;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .frme-slide-cta{
    display: inline-flex;
    align-items: center;
    padding: 11px 24px;
    border-radius: 999px;
    background: var(--frme-surface);
    color: var(--frme-ink);
    font-size: 13.5px;
    font-weight: 600;
    transition: opacity .15s ease;
  }
  /* (a) 구조: 카테고리-제목 가깝게, 버튼만 분리 */
  .frme-slide-cat{ margin-bottom: 12px; }    /* TREND ↔ 제목 (가깝게) */
  .frme-slide-title{ margin-bottom: 24px; }  /* 제목 ↔ 버튼 (띄우기) */
  .frme-slide:hover .frme-slide-cta{ opacity: .85; }

  /* 활성 슬라이드 제목을 콘텐츠 컨테이너(내부폭 1120px) 좌측선에 정렬.
   카드 폭(100%)에 종속 → 화면이 넓어져도 GNB 로고와 어긋나지 않음.
   카드 폭이 1120px 미만이 되는 ~1463px 구간은 카드 안 44px 유지(19 반응형). */
  @media screen and (min-width: 1464px){
    .frme-slide.is-active .frme-slide-info{
      left:  calc((100% - 1120px) / 2);
      right: calc((100% - 1120px) / 2);
    }
  }

/* 하단 카운터 + 롱테일 화살표 (카드 아래 중앙) */
.frme-car-ui{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
  color: var(--frme-ink);
}
.frme-car-counter{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.frme-car-counter b{ font-weight: 700; }
.frme-car-counter i{
  display: block;
  width: 28px; height: 1px;
  background: rgba(22,20,18,.35);
}
.frme-car-counter .frme-car-total{ color: var(--frme-soft); }

/* 카테고리명 표시 */
.frme-slide-cat{
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
}

/* 메인 히어로 상단 그라데이션 — 투명 GNB 가독성 (슬라이드 위, UI 아래 고정) */
.frme-carousel::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  z-index: 2;            /* 슬라이드(이미지) 위, 카운터/화살표 UI 아래 */
  pointer-events: none;  /* 클릭 방해 안 함 */
}


/* =============================================================
   07 · 섹션 헤더 + 롱테일 화살표
   ============================================================= */
.frme-section{ margin-top: 88px; }
.frme-section:first-of-type{ margin-top: 64px; }

/* 타이틀 센터, 컨트롤(더보기·화살표)은 우측 수직중앙 */
.frme-section-head{
  position: relative;
  text-align: left;
  margin-bottom: 36px;
}
.frme-section-title{
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--frme-ink);
}
.frme-section-more,
.frme-section-head .frme-row-nav{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}
.frme-section-more{
  font-size: 13px;
  font-weight: 500;
  color: var(--frme-soft);
  transition: color .2s ease;
}
.frme-section-more:hover{ color: var(--frme-ink); }

/* 롱테일 화살표 버튼 (캐러셀 공용) */
.frme-arrow-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 2px;
  border: 0;
  background: none;
  color: var(--frme-ink);
  cursor: pointer;
  transition: opacity .2s ease;
}
.frme-arrow-btn svg{
  display: block;
  width: 44px; height: 12px;       /* HTML 속성값을 덮어 규격 통일 */
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.frme-arrow-btn:hover svg{ transform: translateX(4px); }
.frme-car-prev:hover svg,
.frme-row-prev:hover svg{ transform: translateX(-4px); }
.frme-arrow-btn:disabled{ opacity: .22; pointer-events: none; }
.frme-row-nav{ display: flex; align-items: center; gap: 18px; }


/* =============================================================
   08 · 카드 / 그리드
   ============================================================= */
.frme-card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* PC 3단 (모바일 2단은 19) */
  gap: 28px 24px;
}
.frme-card{ display: block; }
.frme-card-thumb,
.frme-related-thumb{
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 2 !important;
  border-radius: var(--frme-radius) !important;
  background-color: var(--frme-line) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden !important;
  transform: none !important;
  transition: none !important;
}
.frme-card-thumb::before,
.frme-related-thumb::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
  z-index: 0;
}
.frme-card:hover .frme-card-thumb,
.frme-related-card:hover .frme-related-thumb{
  background-size: cover !important;
  transform: none !important;
}
.frme-card:hover .frme-card-thumb::before,
.frme-related-card:hover .frme-related-thumb::before{
  transform: scale(1.06);
}

.frme-card-body{ display: block; padding-top: 16px; }
.frme-card-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--frme-ink);
}
.frme-card-title img{ display: none; }   /* 제목 옆 새글(N) 아이콘 숨김 */
.frme-card-date{
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--frme-soft);
  letter-spacing: .02em;
}
/* 목록 페이지 카드 — 로드 시 1회 순차 솟아오름 */
.frme-card.frme-list-rise{
  opacity: 0;
  transform: translateY(28px);
}
.frme-card.frme-list-rise-go{
  animation: frme-list-rise-anim .55s cubic-bezier(.2,.6,.2,1) both;
  animation-delay: inherit;   /* JS가 준 순번 지연 사용 */
}
@keyframes frme-list-rise-anim{
  from{ opacity: 0; transform: translateY(28px); }
  to{   opacity: 1; transform: translateY(0); }
}


/* =============================================================
   09 · 카드 캐러셀 (Most Read / Pick 공용)
   ============================================================= */
.frme-row-carousel{ overflow: hidden; }
.frme-row-track{
  display: flex;
  gap: 24px;
  transition: transform .6s cubic-bezier(.2,.6,.2,1);
}
.frme-row-item{
  flex: 0 0 calc((100% - 48px) / 3);   /* PC 3장 (모바일 2장은 19) */
  min-width: 0;
}


/* =============================================================
   10 · Most Read 잉크 띠
   ============================================================= */
.frme-band{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 88px;
  padding: 72px 0 80px;
  background: var(--frme-ink);
}
.frme-band .frme-section-head{ border-bottom-color: rgba(250,248,243,.16); }
.frme-band .frme-section-title{ color: var(--frme-surface); }
.frme-band .frme-card-title{ color: var(--frme-surface); }
.frme-band .frme-card-date{ color: rgba(250,248,243,.55); }
.frme-band .frme-card-thumb{ background-color: rgba(250,248,243,.08); }
.frme-band .frme-row-nav .frme-arrow-btn{ color: var(--frme-surface); }
.frme-band + .frme-section{ margin-top: 88px; }


/* =============================================================
   11 · 뉴스레터 (메인 전용 · 버튼형)
   ============================================================= */
.frme-newsletter{ display: none; margin-top: 104px; }
#tt-body-index .frme-newsletter{ display: block; }
.frme-newsletter-box{
  border-top: 1px solid var(--frme-ink);
  border-bottom: 1px solid var(--frme-ink);
  padding: 64px 0 72px;
  text-align: center;
}
.frme-newsletter-label{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--frme-soft);
  margin-bottom: 18px;
}
.frme-newsletter-title{
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--frme-ink);
  margin-bottom: 12px;
}
.frme-newsletter-desc{
  font-size: 14.5px;
  color: var(--frme-soft);
  margin-bottom: 32px;
}
.frme-newsletter-link{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 30px;
  border-radius: 999px;
  background: var(--frme-ink);
  color: var(--frme-bg);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease;
}
.frme-newsletter-link:hover{ opacity: .82; }
.frme-newsletter-link svg{
  display: block;
  transition: transform .25s cubic-bezier(.2,.6,.2,1);
}
.frme-newsletter-link:hover svg{ transform: translateX(4px); }


/* =============================================================
   12 · 목록 / 검색 페이지 + 페이지네이션
   ============================================================= */
.frme-list-head{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 56px 0 28px;
}
.frme-list-title{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--frme-ink);
}
.frme-list-title b{ font-weight: 700; }
.frme-list-count{ font-size: 14px; font-weight: 500; color: var(--frme-soft); }
.frme-list-empty{
  padding: 80px 0;
  text-align: center;
  color: var(--frme-soft);
  font-size: 15px;
}

.frme-paging{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 64px;
}
.frme-paging-nums{ display: flex; gap: 4px; }
.frme-paging-num,
.frme-paging-arrow{
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--frme-soft);
  border-radius: 8px;
  transition: background .2s ease, color .2s ease;
}
/* 서브카테고리 필터 버튼 (STUDY 전용, JS가 노출 제어) */
.frme-subcat-filter{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 36px;
}
.frme-subcat-filter[hidden]{
  display: none;   /* ← hidden 속성이 있으면 무조건 숨김 */
}
.frme-subcat-btn{
  padding: 9px 18px;
  border: 1px solid #ddd7c9;
  border-radius: 999px;
  background: transparent;
  font-family: var(--frme-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: #6e6a60;
  cursor: pointer;
  transition: all .2s ease;
}
.frme-subcat-btn:hover{
  border-color: #161412;
  color: #161412;
}
.frme-subcat-btn.is-active{
  background: #161412;
  border-color: #161412;
  color: #faf8f3;
}
.frme-subcat-group[hidden]{ display: none; }
.frme-subcat-group{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 다크모드 */
body.dark .frme-subcat-btn{
  border-color: #3a3a3e;
  color: #9a958c;
}
body.dark .frme-subcat-btn:hover{
  border-color: #e8e6e1;
  color: #e8e6e1;
}
body.dark .frme-subcat-btn.is-active{
  background: #e8e6e1;
  border-color: #e8e6e1;
  color: #1a1a1c;
}
.frme-paging-num:hover,
.frme-paging-arrow:hover{ background: var(--frme-surface); color: var(--frme-ink); }
.frme-paging-num.selected{ background: var(--frme-accent); color: var(--frme-bg); }
.frme-paging-arrow.no-more-prev,
.frme-paging-arrow.no-more-next{ opacity: .25; pointer-events: none; }


/* =============================================================
   13 · 글 상세 (키비주얼 · 헤더 · 본문 타이포)
   ============================================================= */
/* 풀폭 키비주얼 — 메인 카드와 동일하게 상단 20px을 헤더 뒤로,
   진입 시 좌우로 펼쳐지는 등장(메인 카드가 펼쳐지는 연결감) */
.frme-article-kv{
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -20px;
  height: 600px;
  overflow: hidden;
  background: var(--frme-line);
  z-index: 1;
  animation: frme-kv-expand .9s cubic-bezier(.2,.6,.2,1) .1s both;
}
.frme-article-kv img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  font-size: 0;          /* 깨진 이미지 alt 텍스트 숨김 */
  color: transparent;
}
@keyframes frme-kv-expand{
  from{ clip-path: inset(0 172px round 24px); }
  to{   clip-path: inset(0 0 round 0); }
}
/* 히어로 페이지 상단 그라데이션 (투명 GNB 가독성) */
.frme-article-kv::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%);
  z-index: 1;
  pointer-events: none;
}

.frme-article{ max-width: 960px; }

.frme-article-head{ padding: 56px 0 36px; margin-bottom: 40px; }
.frme-article-cat{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--frme-ink);
  padding: 6px 12px;
  border-radius: 3px;
  margin-bottom: 18px;
}
.frme-article-title{
  font-size: 36px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--frme-ink);
}
.frme-article-meta{ margin-top: 16px; font-size: 13px; color: var(--frme-soft); }

/* 본문 타이포 */
.frme-article-body{ font-size: 16.5px; line-height: 1.85; color: var(--frme-ink); }
.frme-article-body p{ margin: 1.3em 0; }
.frme-article-body img{ margin: 1.6em 0; border-radius: var(--frme-radius); }
/* 본문 첫 이미지 숨김 — 대표이미지(KV)와 중복 방지 */
.frme-article-body .contents_style figure.imageblock:first-of-type{ display: none !important; }
.frme-article-body a{ color: var(--frme-ink); border-bottom: 1px solid var(--frme-soft); }
.frme-article-body h1,
.frme-article-body h2,
.frme-article-body h3,
.frme-article-body h4{
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--frme-ink);
  clear: both; 
}
.frme-article-body h1{ font-size: 30px; margin: 1.8em 0 .6em; }
.frme-article-body h2{ font-size: 26px; margin: 1.7em 0 .5em; }
.frme-article-body h3{ font-size: 19px; margin: 1.6em 0 .5em; }
.frme-article-body h4{ font-size: 16.5px; margin: 1.5em 0 .4em; color: var(--frme-soft); }
.frme-article-body ul,
.frme-article-body ol{ margin: 1.2em 0; padding-left: 1.3em; }
.frme-article-body li{ margin: .4em 0; line-height: 1.8; }
/* 기본 인용(style2) — 세로선 명조체 */
.frme-article-body blockquote{
  margin: 2em 0;
  padding: 6px 0 6px 24px;
  border-left: 4px solid var(--frme-ink);
  font-family: var(--frme-serif);
  font-size: 17px;
  font-weight: 600;        /* 500 → 600 */
  line-height: 1.75;
  color: var(--frme-ink);
}
.frme-article-body blockquote p{ margin: 0; }
.frme-article-body blockquote p + p{ margin-top: .8em; }

/* 공감/공유/통계 버튼 그룹 가운데 정렬 */
.frme-article-body .container_postbtn{
  display: flex !important;
  justify-content: center !important;
}

/* 콘텐츠 끝 — 확실한 입체 그림자 */
.frme-content-end{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 36px;
  margin-bottom: 0px;
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.38) 0%,            /* .4 → .28 */
    rgba(0,0,0,.15) 40%,           /* .22 → .15 */
    rgba(0,0,0,.05) 70%,           /* .08 → .05 */
    rgba(0,0,0,0) 100%);
}
body.dark .frme-content-end{
  height: 40px;
  background: linear-gradient(to bottom,
    rgba(0,0,0,.99) 0%,
    rgba(0,0,0,.5) 40%,
    rgba(0,0,0,.2) 70%,
    rgba(0,0,0,0) 100%);
}

/* 태그 */
.frme-article-tags{
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--frme-line);
  font-size: 13px;
  color: var(--frme-soft);
}
.frme-article-tags a{ margin-right: 10px; }

/* 이전/다음 글 */
.frme-article-nav{ display: flex; gap: 16px; margin-top: 24px; }
.frme-article-nav-item{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--frme-line);
  border-radius: 12px;
  background: var(--frme-surface);
  transition: border-color .2s ease;
  min-width: 0;
}
.frme-article-nav-item:hover{ border-color: var(--frme-soft); }

/* 썸네일 */
.frme-nav-thumb{
  flex-shrink: 0;
  width: 128px;
  height: 96px;
  border-radius: 6px;
  background-color: var(--frme-line);
  background-size: cover;
  background-position: center;
}
.frme-nav-text{ min-width: 0; flex: 1; }

/* 다음 글: 텍스트 오른쪽 정렬 + 썸네일이 오른쪽 끝으로 */
.frme-article-nav .frme-next{ flex-direction: row-reverse; text-align: right; }

.frme-nav-label{
  display: block;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--frme-soft);
  margin-bottom: 8px;
}
.frme-article-nav-item strong{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--frme-ink);
}

/* 본문 유튜브/동영상 임베드 라운드 */
#article-view figure[data-ke-type='video'] iframe{
  border-radius: var(--frme-radius);
  max-width: 100%;
}

/* 이미지블록 플로트 캡션 센터정렬 */
.frme-article-body figure.imageblock.floatLeft figcaption,
.frme-article-body figure.imageblock.floatRight figcaption{
  text-align: center !important;
}


/* =============================================================
   14 · 본문 매거진 좌/우 치우침 블록 (PC 전용)
   인용1(style1)=좌측 60% · 인용3(style3)=우측 60%
   이미지 정렬(alignLeft/Right)도 동일 규격
   ============================================================= */
/* 좌/우 인용은 장식 제거 후 본문과 동일 스타일 */
.frme-article-body blockquote[data-ke-style="style1"],
.frme-article-body blockquote[data-ke-style="style3"]{
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-family: var(--frme-sans) !important;
  font-size: 16.5px !important;
  font-weight: 400 !important;
  line-height: 1.85 !important;
  font-style: normal !important;
  color: var(--frme-ink) !important;
  quotes: none !important;
}
.frme-article-body blockquote[data-ke-style="style1"]::before,
.frme-article-body blockquote[data-ke-style="style1"]::after,
.frme-article-body blockquote[data-ke-style="style3"]::before,
.frme-article-body blockquote[data-ke-style="style3"]::after{
  content: none !important;
}
.frme-article-body blockquote[data-ke-style="style1"] p,
.frme-article-body blockquote[data-ke-style="style3"] p{ margin: 0 !important; text-align: left !important; }
.frme-article-body blockquote[data-ke-style="style1"] p + p,
.frme-article-body blockquote[data-ke-style="style3"] p + p{ margin-top: 1.3em !important; }
.frme-article-body blockquote[data-ke-style="style1"] *,
.frme-article-body blockquote[data-ke-style="style3"] *{
  font-family: var(--frme-sans) !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

@media screen and (min-width: 961px){
  .frme-article-body blockquote[data-ke-style="style1"]{
    width: 60% !important;
    margin: 1.3em 40% 1.3em 0 !important;   /* 좌측 치우침 */
  }
  .frme-article-body blockquote[data-ke-style="style3"]{
    width: 60% !important;
    margin: 1.3em 0 1.3em 40% !important;   /* 우측 치우침 */
  }
  .frme-article-body figure.imageblock.alignLeft{
    width: 60% !important;
    max-width: 50% !important;
    margin: 1.6em 40% 1.6em 0 !important;
    float: none !important;
    text-align: left !important;
  }
  .frme-article-body figure.imageblock.alignRight{
    width: 60% !important;
    max-width: 50% !important;
    margin: 1.6em 0 1.6em 40% !important;
    float: none !important;
    text-align: left !important;
  }
  .frme-article-body figure.imageblock.alignLeft img,
  .frme-article-body figure.imageblock.alignRight img{
    width: 100% !important;
    height: auto !important;
  }
}

/* 본문 폭 맞춤(widthContent) 이미지 — 본문 960px를 넘어 1200px 와이드로 */
@media screen and (min-width: 1281px){
  .frme-article-body figure.imageblock.widthContent{
    width: 1280px;
    max-width: 1280px;
    margin-left: 50%;
    transform: translateX(-50%);
    margin-right: 0;   /* 기존 음수 마진 제거 */
  }
}

/*이미지 블록 플로트 영역 고정*/
@media screen and (min-width: 761px){
  .frme-article-body figure.imageblock.floatLeft{
    float: left;
    width: 45%;
    margin: 0.5em 5% 1em 0;   /* 오른쪽 5% 간격, 글이 오른쪽 45%에 흐름 */
  }
  .frme-article-body figure.imageblock.floatRight{
    float: right;
    width: 45%;
    margin: 0.5em 0 1em 5%;   /* 왼쪽 5% 간격 */
  }
  .frme-article-body figure.imageblock.floatLeft img,
  .frme-article-body figure.imageblock.floatRight img{
    width: 100%;
    height: auto;
  }
}


/* =============================================================
   15 · 본문 코드블록 (Sublime Monokai)
   ============================================================= */
.frme-article-body pre,
.frme-article-body pre.hljs,
.frme-article-body pre code,
.frme-article-body pre code.hljs{
  display: block;
  background: #272822;
  color: #f8f8f2;
  font-family: 'Menlo', 'Consolas', 'Monaco', 'Roboto Mono', 'D2Coding', monospace;
  font-size: 14px;
  line-height: 1.6;
  border-radius: 8px;
  border: 0;
  padding: 20px 24px;
  margin: 1.6em 0;
  overflow-x: auto;
  white-space: pre;
  -webkit-font-smoothing: antialiased;
}
.frme-article-body pre code,
.frme-article-body pre code.hljs{ padding: 0; margin: 0; border-radius: 0; background: transparent; }
.frme-article-body :not(pre) > code{
  display: inline;
  background: var(--frme-bg);
  border: 1px solid var(--frme-line);
  color: var(--frme-ink);
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: .92em;
  padding: 2px 6px;
  border-radius: 4px;
}
.frme-article-body .hljs-comment,
.frme-article-body .hljs-quote{ color: #75715e; font-style: italic; }
.frme-article-body .hljs-keyword,
.frme-article-body .hljs-selector-tag,
.frme-article-body .hljs-literal,
.frme-article-body .hljs-section,
.frme-article-body .hljs-link,
.frme-article-body .hljs-deletion{ color: #f92672; }
.frme-article-body .hljs-string,
.frme-article-body .hljs-symbol,
.frme-article-body .hljs-bullet,
.frme-article-body .hljs-addition{ color: #e6db74; }
.frme-article-body .hljs-name,
.frme-article-body .hljs-title,
.frme-article-body .hljs-selector-class,
.frme-article-body .hljs-selector-id{ color: #a6e22e; }
.frme-article-body .hljs-attr,
.frme-article-body .hljs-attribute,
.frme-article-body .hljs-variable,
.frme-article-body .hljs-template-variable{ color: #66d9ef; font-style: italic; }
.frme-article-body .hljs-number,
.frme-article-body .hljs-meta,
.frme-article-body .hljs-built_in,
.frme-article-body .hljs-builtin-name,
.frme-article-body .hljs-type,
.frme-article-body .hljs-params{ color: #ae81ff; }
.frme-article-body .hljs-tag{ color: #f8f8f2; }
.frme-article-body .hljs-regexp{ color: #fd971f; }
.frme-article-body .hljs-emphasis{ font-style: italic; }
.frme-article-body .hljs-strong{ font-weight: 700; }


/* =============================================================
   16 · 관련글 카드 (ref-card · 본문 HTML로 삽입)
   ============================================================= */
.frme-article-body .frme-ref-card{
  display: flex;
  align-items: stretch;
  margin: 2em 0;
  background: var(--frme-surface);
  border: 1px solid var(--frme-line);
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.frme-article-body .frme-ref-card{
  display: flex;
  align-items: stretch;
  margin: 2em 0;
  background: var(--frme-surface);
  border: 1px solid var(--frme-line);
  border-radius: 16px;
  overflow: hidden;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.frme-article-body .frme-ref-card:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  border-color: var(--frme-soft);
}
.frme-article-body .frme-ref-card-thumb{
  flex-shrink: 0;
  width: 200px;
  background-size: cover;
  background-position: center;
  background-color: var(--frme-line);
}
.frme-article-body .frme-ref-card-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px 26px;
  min-width: 0;
}
.frme-article-body .frme-ref-card-label{
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--frme-soft);
  margin-bottom: 8px;
}
.frme-article-body .frme-ref-card-title{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--frme-ink);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frme-article-body .frme-ref-card-summary{
  font-size: 14px;
  line-height: 1.55;
  color: var(--frme-soft);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frme-article-body .frme-ref-card-date{ font-size: 12px; color: var(--frme-soft); }
.frme-article-body .frme-ref-card-source{
  display: block;
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--frme-soft);
}
/* 텍스트 전용 변형 (썸네일 없음) */
.frme-article-body .frme-ref-card.is-text-only{ display: block; }
.frme-article-body .frme-ref-card.is-text-only .frme-ref-card-summary{
  -webkit-line-clamp: unset;
  margin-bottom: 0;
}

/* =============================================================
   본문 첨부파일 (fileblock) — FRME 카드 스타일
   티스토리 구조: figure.fileblock > a > .image + .desc(.filename>.name + .size)
   ============================================================= */

/* 가운데정렬 등 에디터 정렬값 무시하고 본문폭 꽉 채움 */
.frme-article-body figure.fileblock{
  width: 100% !important;
  max-width: 100% !important;
  margin: 2em 0 !important;
  text-align: left !important;
  border: none !important; 
}

/* 카드 본체 (링크 전체) */
.frme-article-body figure.fileblock > a{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  background: var(--frme-surface);
  border: 1px solid var(--frme-line);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.frme-article-body figure.fileblock > a:hover{
  box-shadow: 0 8px 24px rgba(0,0,0,.07);
  border-color: var(--frme-soft);
}

/* 왼쪽 아이콘 자리 (.image: 빈 div) — 다운로드/문서 아이콘을 CSS로 그림 */
.frme-article-body figure.fileblock .image{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--frme-bg);
  border: 1px solid var(--frme-line);
  position: relative;
}
.frme-article-body figure.fileblock .image::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -55%);
  /* 아래쪽 화살표(다운로드) 아이콘 — soft 회색 */
  background: var(--frme-soft);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12M7 11l5 5 5-5M5 21h14'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v12M7 11l5 5 5-5M5 21h14'/></svg>") center/contain no-repeat;
}

/* 오른쪽 텍스트 묶음 */
.frme-article-body figure.fileblock .desc{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.frme-article-body figure.fileblock .desc::after{ display: none; }   /* 기본 ::after 제거 */

.frme-article-body figure.fileblock .filename,
.frme-article-body figure.fileblock .name{
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--frme-ink);
  word-break: break-all;
  /* 길면 한 줄 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frme-article-body figure.fileblock .size{
  font-size: 12px;
  color: var(--frme-soft);
  letter-spacing: .02em;
}

/* 모바일 */
@media screen and (max-width: 960px){
  .frme-article-body figure.fileblock > a{ padding: 16px 18px; gap: 14px; }
  .frme-article-body figure.fileblock .image{ width: 40px; height: 40px; }
  .frme-article-body figure.fileblock .name,
  .frme-article-body figure.fileblock .filename{ font-size: 14px; }
}

/* =============================================================
   17 · 댓글 영역
   색·폰트는 토큰, 구분선은 여백으로 대체.
   !important는 티스토리 인라인 스타일을 덮는 곳에만.
   ============================================================= */
.frme-article-reply{ width: 100%; margin-top: 40px; }
.frme-reply-inner{ width: 100%; margin: 0; padding: 0; }

/* 티스토리 기본 흰 선 제거 */
.frme-article-reply .tt-list-reply,
.frme-article-reply .tt-item-reply,
.frme-article-reply .tt-cmt,
.frme-article-reply .tt-inner-g,
.frme-article-reply .tt-area-reply,
.frme-article-reply .tt-area-write,
.frme-article-reply .tt_wrap_write, 
.frme-article-reply .tt-list-reply-comment,
.frme-article-reply .tt-box-write{ border: none !important; box-shadow: none !important; }

/* 블로그 소개 명함 카드 */
.frme-article-reply .tt_box_namecard{
  display: flex !important;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  height: auto !important;
  padding: 0 0 24px !important;       /* 원래대로 */
  margin: 0 0 8px !important;       /* 원래대로 (위 마진 제거) */
  background: transparent !important;
  position: relative;                     /* About 타이틀 기준점 */
}

/* 댓글 */
.frme-article-reply .tt_box_namecard .tt_wrap_thumb,
.frme-article-reply .tt_box_namecard .tt_thumb_g{
  order: -1;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px;
  margin: 0 !important;
  border-radius: 50% !important;
  background-image: url('https://img1.daumcdn.net/thumb/C428x428/?scode=mtistory2&fname=https%3A%2F%2Ftistory1.daumcdn.net%2Ftistory%2F8692702%2Fattach%2F98eb898ccdc9490aa567fa343b107ae6') !important;
  background-size: cover !important;
  background-position: 50% 50% !important;
}

.frme-article-reply .tt_box_namecard .tt_wrap_thumb img,
.frme-article-reply .tt_box_namecard .tt_thumb_g img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.frme-article-reply .tt_box_namecard .tt_cont{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}
.frme-article-reply .tt_box_namecard .tt_tit_cont{
  font-size: 16px;
  font-weight: 600;
  color: var(--frme-ink);
  line-height: 1.3;
}
.frme-article-reply .tt_box_namecard .tt_desc{
  font-size: 13px;
  line-height: 1.6;
  color: var(--frme-soft);
  white-space: pre-line;
}
.frme-article-reply .tt_box_namecard .tt_cont,
.frme-article-reply .tt_box_namecard .tt_tit_cont,
.frme-article-reply .tt_box_namecard .tt_desc{ margin: 0 !important; padding: 0 !important; }
/* 명함 구독 버튼 */
.frme-article-reply .tt_box_namecard .tt_btn_subscribe{
  width: auto !important;
  max-width: max-content !important;
  height: auto !important;
  margin: 8px 0 0 !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500;
  color: var(--frme-soft);
  background: transparent !important;
  border: 1px solid var(--frme-line) !important;
  border-radius: 999px !important;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.frme-article-reply .tt_box_namecard .tt_btn_subscribe:hover{
  color: var(--frme-ink);
  border-color: var(--frme-accent) !important;
}
.frme-article-reply .tt_box_namecard .tt_btn_subscribe .tt_img_area_reply,
.frme-article-reply .tt_box_namecard .tt_btn_subscribe .tt_ico_cross{ display: none !important; }

/* 댓글 헤더 */
.frme-article-reply .tt-box-total{
  font-size: 18px;
  font-weight: 600;
  color: var(--frme-ink);
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--frme-line);
}
.frme-article-reply .tt-box-total .tt_num_g{ margin-left: 4px; font-weight: 600; color: var(--frme-ink); }

/* 개별 댓글 */
.frme-article-reply .tt-item-reply{ padding: 14px 0 !important; }
.frme-article-reply .tt-item-reply .tt-list-reply-comment{
  margin: 8px 0 0 !important;
}
.frme-article-reply .tt-thumbnail,
.frme-article-reply .tt-box-thumb img{
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.frme-article-reply .tt_txt_user{ font-size: 14px; font-weight: 600; color: var(--frme-ink); }
.frme-article-reply .tt-comment-cont{
  font-size: 15px;
  line-height: 1.75;
  color: var(--frme-ink);
  word-break: break-word;
}

/* 대댓글: 들여쓰기 + ㄴ 꺾쇠 */
.frme-article-reply .tt-list-reply-comment > .tt-item-reply > .tt-wrap-cmt{
  padding-left: 44px;
  position: relative;
}
.frme-article-reply .tt-list-reply-comment > .tt-item-reply > .tt-wrap-cmt::before{
  content: "";
  position: absolute;
  left: 18px; top: 2px;
  width: 14px; height: 18px;
  border-left: 1.5px solid var(--frme-line);
  border-bottom: 1.5px solid var(--frme-line);
  border-bottom-left-radius: 3px;
}
.frme-article-reply .tt-list-reply-comment > li.tt-item-reply::before{ display: none !important; }

/* 댓글 입력 */
.frme-article-reply .tt-area-write{ margin-top: 32px; }
.frme-article-reply .tt-box-textarea{
  border: 1px solid var(--frme-line) !important;
  border-radius: 4px;
}
.frme-article-reply .tt-box-textarea:hover,
.frme-article-reply .tt-box-textarea:focus-within{ border-color: var(--frme-accent) !important; }
.frme-article-reply .tt-box-textarea textarea{
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 14px 16px;
  border: none !important;
  outline: none;
  resize: none;
  background: transparent;
  font-family: var(--frme-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--frme-ink);
}
.frme-article-reply input[type="text"],
.frme-article-reply input[type="password"]{
  padding: 11px 14px;
  border: 1px solid var(--frme-line) !important;
  border-radius: 4px;
  background: transparent !important;
  font-size: 14px;
  color: var(--frme-ink);
}
.frme-article-reply input[type="text"]:focus,
.frme-article-reply input[type="password"]:focus{ border-color: var(--frme-accent) !important; outline: none; }
/* 하단 줄: 비밀글 + 등록 */
.frme-article-reply .tt-box-write{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.frme-article-reply .tt-xe-label,
.frme-article-reply .tt-xe-label-text{
  display: flex;
  align-items: center;
  font-size: 13px;
  color: var(--frme-soft);
  white-space: nowrap;
}
.frme-article-reply .tt-btn_register{
  min-width: 72px;
  padding: 9px 28px;
  border: none;
  border-radius: 999px;
  background: var(--frme-accent);
  color: var(--frme-bg);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity .15s;
}
.frme-article-reply .tt-btn_register:hover{ opacity: .8; }

/* 블로그 소개(명함) 카드 줄바꿈 허용 + 여백 */
.tt_box_namecard .tt_desc{ display: block; white-space: pre-line !important; line-height: 1.6; }
.tt_box_namecard,
#tt_box_namecard{ margin-top: 32px; margin-bottom: 32px; }


/* =============================================================
   18 · 스크롤 등장 모션
   ============================================================= */
.frme-reveal{
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .8s cubic-bezier(.2,.6,.2,1),
              transform .8s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.frme-reveal.in{ opacity: 1; transform: translateY(0); }
.frme-reveal-right{
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1),
              transform .7s cubic-bezier(.2,.6,.2,1);
  will-change: opacity, transform;
}
.frme-reveal-right.in{ opacity: 1; transform: translateX(0); }
/* 그리드 내 순차 지연 */
.frme-card-grid .frme-reveal-right:nth-child(1),
.frme-card-grid .frme-card:nth-child(1){ transition-delay: 0s; }
.frme-card-grid .frme-reveal-right:nth-child(2),
.frme-card-grid .frme-card:nth-child(2){ transition-delay: .1s; }
.frme-card-grid .frme-reveal-right:nth-child(3),
.frme-card-grid .frme-card:nth-child(3){ transition-delay: .2s; }


/* =============================================================
   19 · 반응형 (≤960px)
   ============================================================= */
@media screen and (max-width: 960px){
  /* 레이아웃 */
  .frme-header-inner,
  .frme-main{ padding: 0 22px; }
  .frme-footer-inner{ padding: 44px 22px; }
  .frme-theme-toggle::before{ display: none !important; }

  /* 히어로 — 모바일은 1장만 꽉 차게 (양옆 엿보기 끔) */
  #tt-body-index .frme-carousel{ margin-top: -20px; }
  .frme-carousel{ --frme-hero-inset: 0px; }
  .frme-carousel-track{ gap: 0; }
  .frme-slide{ border-radius: 0px; }
  .frme-slide-img{ height: 300px; }
  .frme-slide-info{ left: 22px; right: 22px; bottom: 22px; gap: 8px; }
  .frme-slide-cat{ margin-bottom: 6px; }     /* 모바일: PC 12px → 6px */
  .frme-slide-title{
    font-size: 18px;
    -webkit-line-clamp: 2;
    margin-bottom: 14px;                       /* 모바일: PC 24px → 14px */
  }
  .frme-slide-cta{ padding: 9px 18px; font-size: 12.5px; }
  .frme-car-ui{ margin-top: 12px; }
  .frme-section-head{ text-align: center; }
  .frme-related-title{ text-align: center; }

  /* 섹션·그리드·캐러셀 */
  .frme-section{ margin-top: 56px; }
  .frme-section:first-of-type{ margin-top: 36px; }
  .frme-section-head{ margin-bottom: 26px; }
  .frme-section-title{ font-size: 21px; }
  .frme-card-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .frme-card-title{ font-size: 15px; }
  .frme-card-thumb{ aspect-ratio: 3 / 2; }   
  .frme-row-track{ gap: 16px; }
  .frme-row-item{ flex: 0 0 calc((100% - 16px) / 2); }   /* 모바일 2장 */
  .frme-row-nav{ gap: 14px; }
  .frme-arrow-btn svg{ width: 34px; height: 10px; }

  /* Most Read 띠 */
  .frme-band{ margin-top: 56px; padding: 48px 0 56px; }
  .frme-band + .frme-section{ margin-top: 56px; }

  /* 뉴스레터 */
  .frme-newsletter{ margin-top: 64px; }
  .frme-newsletter-box{ padding: 44px 0 52px; }
  .frme-newsletter-title{ font-size: 22px; }
  .frme-newsletter-link{ padding: 13px 28px; }

  /* 글 상세 */
  .frme-article-kv{ height: 300px; }
  .frme-article-head{ padding: 36px 0 28px; margin-bottom: 32px; }
  .frme-article-title{ font-size: 25px; }
  .frme-article-body{ font-size: 16px; }
  .frme-article-body h1{ font-size: 24px; }
  .frme-article-body h2{ font-size: 21px; }
  .frme-article-body h3{ font-size: 18px; }
  .frme-article-nav{ flex-direction: column; }
  @keyframes frme-kv-expand{
    from{ clip-path: inset(0 20px round 16px); }
    to{   clip-path: inset(0 0 round 0); }
  }

  /* 모바일 카테고리 내 버튼 사이즈 조정 */
  .frme-subcat-filter{
    gap: 7px;              /* 버튼 사이 간격 좁게 (10px → 7px) */
    margin-bottom: 28px;
  }
  .frme-subcat-btn{
    padding: 8px 13px;     /* 좌우 여백 줄임 (18px → 13px) */
    font-size: 12.5px;     /* 글자 살짝 작게 (13.5px → 12.5px) */
  }


  /* 모바일 메뉴 (햄버거 드롭다운) */
  .frme-nav-toggle{ display: flex; order: 3; margin-left: 4px; }
  .frme-gnb-right{ order: 2; margin-left: auto; gap: 12px; }
  .frme-search-inner{ padding: 32px 22px; gap: 12px; }
  .frme-search-input{ font-size: 18px; }
  .frme-gnb{
    position: absolute;
    top: var(--frme-header-h); left: 0; right: 0;
    height: auto;
    background: var(--frme-bg);
    border-bottom: 1px solid var(--frme-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .frme-gnb.open{ max-height: 70vh; }
  .frme-gnb ul,
  .frme-gnb ol{ flex-direction: column; align-items: stretch; height: auto; gap: 0; width: 100%; }
  .frme-gnb li{ height: auto; display: block; }
  .frme-gnb a{ height: auto; padding: 16px 22px; border-top: 1px solid var(--frme-line); }
  .frme-nav-toggle.active span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .frme-nav-toggle.active span:nth-child(2){ opacity: 0; }
  .frme-nav-toggle.active span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

  /* 히어로 페이지 모바일: 펼친 메뉴 배경 불투명(글자 가독성) */
  body.has-hero .frme-gnb{ background: var(--frme-bg); }
  body.has-hero .frme-gnb a{ color: var(--frme-ink); border-top-color: var(--frme-line); }
  body.has-hero .frme-gnb:not(.open){ border-bottom: none !important; }
  body.has-hero .frme-header:has(.frme-gnb.open){ background: var(--frme-bg); }
  body.has-hero .frme-header:has(.frme-gnb.open) .frme-search-btn{ color: var(--frme-ink); }
  body.has-hero .frme-header:has(.frme-gnb.open) .frme-logo-svg g{ fill: #000; stroke: #000; }
  body.has-hero .frme-header:has(.frme-gnb.open) .frme-nav-toggle span{ background: var(--frme-ink); }
  body.has-hero .frme-header:has(.frme-gnb.open) .frme-theme-toggle{ color: var(--frme-ink); }

  /* 관련글 카드 세로 스택 */
  .frme-article-body .frme-ref-card{ flex-direction: column; }
  .frme-article-body .frme-ref-card-thumb{ width: 100%; height: 180px; }
  .frme-article-body .frme-ref-card-body{ padding: 18px 20px; }
  .frme-article-body .frme-ref-card-title{ font-size: 16px; }

  /* 댓글 */
  .frme-article-reply .tt-box-total{ font-size: 16px; }
  .frme-article-reply .tt-comment-cont{ font-size: 14px; }
  .frme-article-reply .tt_box_namecard .tt_cont{ align-items: center; text-align: center; }
  .frme-article-reply .tt_box_namecard .tt_wrap_thumb,
  .frme-article-reply .tt_box_namecard .tt_thumb_g{ width: 48px !important; height: 48px !important; min-width: 48px; }

.frme-article-reply .tt_box_namecard{
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px;
  text-align: center;
}


}

/* 진짜 좁은 화면에서만 float 풀기 (760px 미만) */
@media screen and (max-width: 760px){
  .frme-article-body figure.imageblock.floatLeft,
  .frme-article-body figure.imageblock.floatRight{
    float: none;
    width: 100%;
    margin: 1.6em 0;
    }
  }


/* =============================================================
   20 · 접근성 — 모션 최소화 선호
   ============================================================= */
@media (prefers-reduced-motion: reduce){
  .frme-reveal,
  .frme-reveal-right{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .frme-article-kv{ animation: none; }
}


/* =============================================================
   FOOTER
   ============================================================= */
.frme-footer{
  margin-top: 120px;
  border-top: 1px solid var(--frme-line);
  background: var(--frme-surface);
}
.frme-footer-inner{
  max-width: var(--frme-maxw);
  margin: 0 auto;
  padding: 56px 40px;
  text-align: center;
}
.frme-footer-logo{ margin-bottom: 20px; }
.frme-footer-logo svg{ height: 28px; width: auto; margin: 0 auto; display: block; }
.frme-footer-copy{
  font-size: 12.5px;
  color: var(--frme-soft);
  line-height: 1.7;
  letter-spacing: .02em;
}


/* =============================================================
   21 · 메인 히어로 날짜 (.frme-slide-date)
   06 히어로 슬라이드 제목 아래 표시. 모바일은 숨김.
   ============================================================= */
.frme-slide-date{
  display: none;
  margin-top: 4px;
  margin-bottom: 18px;
  font-size: 14px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.75);
}
/* 모바일: 히어로 날짜 숨김 + 카테고리 축소 (제목 line-height는 19 반응형) */
@media screen and (max-width: 960px){
  .frme-slide-date{ display: none; }
  .frme-slide-cat{ font-size: 11px; }
}


/* =============================================================
   22 · 글 상세 메타 (날짜 | 읽기시간)
   13 상세 제목 아래. 읽기시간은 JS가 .on을 붙이면 표시.
   ============================================================= */
.frme-article-meta{
  display: flex;
  align-items: center;
  gap: 10px;
}
.frme-article-date{
  font-size: 14px;
  color: var(--frme-soft);
}
/* 읽기시간: 채워졌을 때(.on)만 보이고, 앞에 구분선 | 을 그림 */
.frme-reading-time{
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--frme-soft);
}
.frme-reading-time.on{ display: inline-flex; }
.frme-reading-time.on::before{
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 5px;
  background: var(--frme-line);   /* 세로 구분선 | */
}
.frme-clock{
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
}
.frme-rt-num{ line-height: 1; }


/* =============================================================
   23 · 읽기 진행 바 (글 상세 전용 · .frme-progress)
   본문 스크롤 비율을 상단 바 scaleX로. JS가 .on 부여.
   ============================================================= */
.frme-progress{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 300;                 /* 헤더(100)·검색(200)보다 위 */
  background: #b5503a;
  transform: scaleX(0);         /* JS가 스크롤 비율로 채움 */
  transform-origin: left center;
  display: none;                /* 기본 숨김, 상세에서만 .on으로 표시 */
  will-change: transform;
}
.frme-progress.on{ display: block; }


/* =============================================================
   24 · 관련 글 (RELATED · 같은 카테고리, 글 상세 전용)
   이전/다음 글 아래. 카드 3개(데스크톱)·2개(모바일).
   JS가 이전글에 is-dup, 다음글에 is-next-dup 부여해 중복 숨김.
   ============================================================= */
.frme-related{
  max-width: 960px;
  margin: 40px auto 0;   /* 0px → 40px*/
  padding-top: 0;
}
.frme-related-title{
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--frme-ink);
  margin-bottom: 24px;
  text-align: left;
}
.frme-related-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
/* 이전 글과 중복된 카드 숨김 (JS가 is-dup 부여) */
.frme-related-card.is-dup{ display: none; }
/* 보이는 카드 중 3개만 (is-dup 제외하고 셈) */
.frme-related-card:not(.is-dup) ~ .frme-related-card:not(.is-dup) ~ .frme-related-card:not(.is-dup) ~ .frme-related-card:not(.is-dup){ display: none; }
.frme-related-card{ display: block; }
/* 대표이미지 없는 글(text_type): 썸네일 자리에 회색 면만 */
.frme-related-card.text_type .frme-related-thumb{
  display: block;
  background: var(--frme-surface);
}
.frme-related-body{ display: block; padding-top: 14px; }
.frme-related-card-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--frme-ink);
}
.frme-related-date{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--frme-soft);
  letter-spacing: .02em;
}

/* About 타이틀 — RELATED와 동일 스타일. 위 구분선은 그림자 띠가 대신하므로 제거 */
.frme-about-title{
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--frme-line);
}
/* Related 없을 때(JS가 붙임): 선 제거 */
.frme-about-title.no-line{
  padding-top: 0;
  border-top: none;
}

/* 관련글·About 모바일 (≤960) */
@media screen and (max-width: 960px){
  .frme-related{ margin-top: 40px; padding-top: 0px; }
  .frme-related-grid{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* 모바일: 이전 글 + 다음 글 둘 다 숨김, 남은 것 중 2개 */
  .frme-related-card.is-dup,
  .frme-related-card.is-next-dup{ display: none; }
  .frme-related-card:not(.is-dup):not(.is-next-dup) ~ .frme-related-card:not(.is-dup):not(.is-next-dup) ~ .frme-related-card:not(.is-dup):not(.is-next-dup){ display: none; }
  .frme-related-title{ font-size: 21px !important; text-align: center !important; }
  .frme-about-title{ padding-top: 40px; }
  .frme-about-title.no-line{ padding-top: 0; border-top: none; }   /* 모바일에서도 선 없을 때 0 */
}


/* =============================================================
   25 · 헤더 기능메뉴 구분선 (:ALL ↔ 다크토글·검색 사이)
   4경우 분기 (모두 !important로 우선순위 충돌 방지)
   - 밝은 배경 위 → 어두운 선 / 어두운 배경 위 → 밝은 선
   - 히어로 이미지 위(투명 헤더) → 흰 선
   모바일은 19 반응형에서 display:none.
   ============================================================= */
.frme-theme-toggle::before{
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(22,20,18,.22) !important;   /* 기본(라이트 일반): 밝은 배경 위 어두운 선 */
}
/* 라이트 + 히어로 투명(스크롤 전): 흰 선 */
body.has-hero .frme-header:not(.scrolled) .frme-theme-toggle::before{
  background: rgba(255,255,255,.40) !important;
}
/* 라이트 + 히어로 스크롤 후: 어두운 선 */
body.has-hero .frme-header.scrolled .frme-theme-toggle::before{
  background: rgba(22,20,18,.22) !important;
}
/* 다크 + 비히어로/스크롤 후: 밝은 선 */
body.dark .frme-theme-toggle::before{
  background: rgba(255,255,255,.28) !important;
}
body.dark.has-hero .frme-header.scrolled .frme-theme-toggle::before{
  background: rgba(255,255,255,.28) !important;
}
/* 다크 + 히어로 투명(스크롤 전): 흰 선 */
body.dark.has-hero .frme-header:not(.scrolled) .frme-theme-toggle::before{
  background: rgba(255,255,255,.40) !important;
}


/* =============================================================
   26 · 다크모드 토글 버튼 (.frme-theme-toggle)
   아이콘 3개(달/사각형/해)를 같은 자리에 포개고,
   opacity+회전+scale로 전환 → 돌면서 바뀌는 '살아있는' 느낌.
   현재 모드 아이콘만 또렷이 보이고, 나머지는 작게 돌아서 숨음.
   순서: 라이트=달 / 다크=사각형 / 흑백=해 (각각 '다음 모드' 예고)
   position:relative는 25 구분선 ::before의 기준이기도 함.
   ============================================================= */
.frme-theme-toggle{
  position: relative;            /* 25 구분선 ::before 기준 + 아이콘 포갬 기준 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: none;
  color: var(--frme-ink);
  cursor: pointer;
  transition: opacity .2s ease;
}

  .frme-theme-toggle:hover{ color: var(--frme-soft); }

/* 세 아이콘 공통: 같은 자리에 포갬. 기본은 숨김(작게). 회전 없음 → 방향 어색함 제거 */
.frme-theme-toggle svg{
  position: absolute;
  top: 50%; left: 50%;
  width: 20px; height: 20px;
  display: block;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition: opacity .35s ease,
              transform .45s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

/* 라이트: 달 보임 */
.frme-theme-toggle .frme-icon-moon{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 다크: 사각형 보임 / 달 숨김 */
body.dark .frme-theme-toggle .frme-icon-moon{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}
body.dark .frme-theme-toggle .frme-icon-bw{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 흑백: 해 보임 / 사각형 숨김 */
body.bw .frme-theme-toggle .frme-icon-bw{
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
}
body.bw .frme-theme-toggle .frme-icon-sun{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 히어로 위(투명 헤더)에선 흰색 */
body.has-hero .frme-theme-toggle{ color: #fff; }
body.has-hero .frme-header.scrolled .frme-theme-toggle{ color: var(--frme-ink); }

/* =============================================================
   27 · 다크 모드 (body.dark 토글)
   토큰 값을 다크용으로 교체(대부분 자동 반영).
   토큰 안 쓴 곳(카테고리 라벨/Most Read 띠/헤더 블러)만 따로 처리.
   ============================================================= */
body.dark{
  --frme-bg:       #1a1a1c;   /* 짙은 회색 배경(완전 검정 아님) */
  --frme-surface:  #242427;   /* 카드/면 — 배경보다 한 단계 밝게 */
  --frme-ink:      #e8e6e1;   /* 본문·제목 — 톤다운 흰색 */
  --frme-soft:     #9a958c;   /* 보조 텍스트 */
  --frme-line:     #3a3a3e;   /* 구분선 */
  --frme-accent:   #e8e6e1;   /* 포인트 */
}

/* 1. 카테고리 라벨: 다크에선 ink가 밝아지므로 글자색을 배경색(어두운)으로 반전 */
body.dark .frme-article-cat{
  color: var(--frme-bg);
  background: var(--frme-ink);
}

/* 2. Most Read 띠: ink 배경이 밝아지면 안 되므로, 다크 전용 어두운 면으로 */
body.dark .frme-band{ background: #242427; }
body.dark .frme-band .frme-section-title,
body.dark .frme-band .frme-card-title{ color: var(--frme-ink); }
body.dark .frme-band .frme-card-date{ color: var(--frme-soft); }
body.dark .frme-band .frme-section-head{ border-bottom-color: var(--frme-line); }
body.dark .frme-band .frme-row-nav .frme-arrow-btn{ color: var(--frme-ink); }

/* 3. 헤더 스크롤 블러: 베이지 반투명 → 어두운 반투명 */
body.dark .frme-header.scrolled{ background: rgba(26,26,28,.62); }
/* 스크롤 후 로고/글자: 다크에선 밝은색 유지 */
body.dark.has-hero .frme-header.scrolled .frme-gnb a,
body.dark.has-hero .frme-header.scrolled .frme-search-btn{ color: var(--frme-ink); }
body.dark.has-hero .frme-header.scrolled .frme-logo-svg g{ fill: var(--frme-ink); stroke: var(--frme-ink); }
body.dark.has-hero .frme-header:has(.frme-gnb.open) .frme-theme-toggle{ color: var(--frme-ink) !important; }
/* 비히어로 페이지 헤더(평소): 로고 밝게 */
body.dark .frme-header .frme-logo-svg g{ fill: var(--frme-ink); stroke: var(--frme-ink); }

/* 다크 모바일: 히어로 페이지 햄버거 열었을 때 로고/아이콘 밝게 (19번 #000 강제를 덮음) */
body.dark.has-hero .frme-header:has(.frme-gnb.open) .frme-logo-svg g{
  fill: var(--frme-ink) !important;
  stroke: var(--frme-ink) !important;
}
body.dark.has-hero .frme-header:has(.frme-gnb.open) .frme-search-btn,
body.dark.has-hero .frme-header:has(.frme-gnb.open) .frme-nav-toggle span{
  color: var(--frme-ink) !important;
}
/* 코드블록: 원래 어두우니 그대로, 배경과 살짝 경계만 */
body.dark .frme-article-body pre{ border: 1px solid var(--frme-line); }

/* 푸터 로고 */
body.dark .frme-footer-logo .frme-logo-svg g{ fill: var(--frme-ink); stroke: var(--frme-ink); }

/* 첨부파일 다운로드 아이콘(티스토리 스프라이트 PNG) 반전 */
body.dark .frme-article-body figure.fileblock a::after{
  filter: invert(1) brightness(1.6);
}

/* 부드러운 전환 */
body, .frme-header, .frme-band, .frme-article-cat{
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* 다크: 댓글 영역 글자 (티스토리 기본 검정 덮기) */
body.dark .frme-article-reply .tt-link-user{ color: var(--frme-ink) !important; }          /* 작성자 아이디 */
body.dark .frme-article-reply .tt-wrap-desc .tt_desc{ color: var(--frme-ink) !important; }  /* 댓글 본문 */
body.dark .frme-article-reply .tt-box-total{ color: var(--frme-ink) !important; }           /* "댓글 N" 헤더 */
body.dark .frme-article-reply .tt_box_namecard .tt_btn_subscribe .tt_txt_g{
  color: var(--frme-soft) !important;
}

/* 다크: 댓글 본문·작성자·구독버튼 글자 (티스토리 기본 검정 덮기) */
body.dark .frme-article-reply .tt-wrap-desc .tt_desc{ color: var(--frme-ink) !important; }
body.dark .frme-article-reply .tt_txt_user{ color: var(--frme-ink) !important; }
body.dark .frme-article-reply .tt-box-total{ color: var(--frme-ink) !important; }

/* BW 모드 — 그레이스케일. fixed 요소(헤더·진행바·ymal) 가두지 않게,
   본문 콘텐츠 블록에만 직접 건다. .frme-main-wrap은 ymal의 부모라 제외. */
body.bw .frme-carousel,
body.bw .frme-section,
body.bw .frme-band,
body.bw .frme-newsletter,
body.bw .frme-list-head,
body.bw .frme-card-grid,
body.bw .frme-paging,
body.bw .frme-article-kv,
body.bw .frme-article,
body.bw .frme-related,
body.bw .frme-footer{
  filter: grayscale(1);
}

body.bw .frme-ymal-thumb,
body.bw .frme-ymal-body{
  filter: grayscale(1);
}
/* =============================================================
   28 · 본문 그래프 다크모드 대응 (하이브리드 방식)
   그래프는 인라인 hex로 그려 티스토리 앱에서도 보이게 하고,
   웹 다크모드에서만 이 규칙이 색을 덮어 가독성을 확보한다.
   막대형: frme-g-bar / frme-g-bar-hi
   도식형(선): frme-g-illust 안의 frme-g-line / frme-g-border
   공통: frme-g-title / frme-g-box / frme-g-key / frme-g-val / frme-g-sub / frme-g-src
   ============================================================= */
body.dark .frme-article-body .frme-g-title{ color: #9a958c !important; }
body.dark .frme-article-body .frme-g-box{
  border-top-color: #3a3a3e !important;
  border-bottom-color: #3a3a3e !important;
}
body.dark .frme-article-body .frme-g-key{ color: #e8e6e1 !important; }
body.dark .frme-article-body .frme-g-val{ color: #e8e6e1 !important; }
body.dark .frme-article-body .frme-g-sub{ color: #9a958c !important; }
body.dark .frme-article-body .frme-g-src{ color: #9a958c !important; }

/* 막대형: 강조(hi)는 밝은 잉크, 보조는 어두운 선색 */
body.dark .frme-article-body .frme-g-bar{ background: #3a3a3e !important; }
body.dark .frme-article-body .frme-g-bar-hi{ background: #e8e6e1 !important; }

/* 도식형(선): 줄·테두리를 밝은 잉크로 (착시 도식 등) */
body.dark .frme-article-body .frme-g-line{ background: #e8e6e1 !important; }
body.dark .frme-article-body .frme-g-border{ border-color: #e8e6e1 !important; }

/* 그래프 안쪽 행 구분선 */
body.dark .frme-article-body .frme-g-row{ border-bottom-color: #3a3a3e !important; }

/* =============================================================
   29 · You may also like — 떠 있는 추천 카드 (우측 하단)
   상세 페이지에서 50% 스크롤 시 JS가 채워 등장. 한 번 뜨면 유지.
   본문(960px 중앙)과 겹치지 않게 우측 바깥 여백에. 좁은 화면은 숨김.
   ============================================================= */
.frme-ymal{
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  width: 300px;
  padding: 16px 16px 14px;
  background: var(--frme-surface);
  border: 1px solid var(--frme-line);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(22,20,18,.10);
  /* 등장 전: 살짝 아래+투명. JS가 .on 붙이면 떠오름 */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.frme-ymal.on{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 라벨 */
.frme-ymal-label{
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--frme-soft);
  margin-bottom: 12px;
}

/* 카드 본체 (썸네일 + 텍스트) */
.frme-ymal-card{
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
}
.frme-ymal-thumb{
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-color: var(--frme-line);
  background-size: cover;
  background-position: center;
}
.frme-ymal-body{
  min-width: 0;   /* 말줄임 위해 */
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.frme-ymal-title{
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--frme-ink);
  /* 2줄까지, 넘으면 말줄임 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.frme-ymal-date{
  font-size: 12px;
  color: var(--frme-soft);
}

/* 닫기 버튼 */
.frme-ymal-close{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border: 0;
  background: transparent;
  color: var(--frme-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: color .2s, background .2s;
}
.frme-ymal-close:hover{
  color: var(--frme-ink);
  background: var(--frme-bg);
}

/* 다크모드: surface/line/shadow 톤 조정 */
body.dark .frme-ymal{
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* 좁은 화면: 본문과 겹치므로 숨김 (모바일·태블릿 포함)
   본문 960 + 카드 300 + 여백 → 대략 1400 미만이면 겹칠 위험 → 숨김 */
@media (max-width: 1200px){
  .frme-ymal{ display: none !important; }
}