@charset "utf-8";

:root{
  --line:#ddd;
  --soft:#eee;
  --text:#333;
  --muted:#aaa;

  /* V4보다 전체 약 10% 축소 */
  --side:171px;
  --main:612px;
  --gap:45px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:10px Arial,"Noto Sans KR","Apple SD Gothic Neo",sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

#wrap{
  width:calc(var(--side) + var(--gap) + var(--main));
  margin:49px auto 99px;
  display:grid;
  grid-template-columns:var(--side) var(--main);
  gap:var(--gap);
  align-items:start
}
#sidebar{position:sticky;top:29px}
.panel,.profile,.menu{border:1px solid var(--line);border-radius:4px;background:#fff;overflow:hidden}

/* profile */
.profile-img{display:block;width:100%;aspect-ratio:1/1;overflow:hidden}
.profile-img img{display:block;width:100%;height:100%;object-fit:cover}
.profile-name{
  min-height:47px;
  padding:0 10px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:10px;
  line-height:1.4;
  overflow-wrap:anywhere
}

/* sidebar */
.menu{margin-top:22px}
.menu>a,.categories a,.search-open{
  width:100%;height:46px;padding:0 22px;
  display:flex;align-items:center;
  border:0;border-bottom:1px solid var(--line);
  background:#fff;font-size:9px;text-align:left
}
.menu>a:hover,.categories a:hover,.search-open:hover{background:#fafafa}
.categories ul{list-style:none;margin:0;padding:0}
.categories .sub_category_list a{padding-left:31px;color:#777;font-size:8px}
.categories .c_cnt{margin-left:auto;color:#aaa;font-size:7px}
.search-open{border-bottom:0}
.search-open i{display:block;position:relative;width:13px;height:13px;border:1px solid #555;border-radius:50%}
.search-open i:after{content:"";position:absolute;width:6px;height:1px;background:#555;right:-5px;bottom:-3px;transform:rotate(45deg)}
.side-paging{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;overflow:hidden}
.side-paging a{height:43px;display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:8px}
.side-paging a:last-child{border-right:0}

/* notice/home row */
.notice-index{min-height:46px;display:grid;grid-template-columns:92px 1fr;margin-bottom:9px}
.date{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:8px;font-weight:600}
.row-title{padding:0 27px;display:flex;align-items:center;font-size:10px}

/* category gallery */
.category-head{height:47px;margin-bottom:16px;display:grid;grid-template-columns:72px 1fr}
.category-count{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:8px;font-weight:600}
.category-name{padding:0 24px;display:flex;align-items:center;font-size:9px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.gallery-card{position:relative;aspect-ratio:1/1;border-radius:4px;overflow:hidden;background:#eee}
.gallery-card img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-title{position:absolute;inset:0;padding:22px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.7;color:transparent;background:transparent;transition:.15s}
.gallery-card:hover .gallery-title{background:rgba(65,65,65,.62);color:#fff}
.gallery-card:not(:has(img)) .gallery-title{color:#555}

/* category list 아래에는 어떠한 날짜/제목 행도 없음 */
.category-page + .notice-index,
.category-page ~ .home-index-row{display:none!important}

/* article */
.article-head{min-height:55px;display:grid;grid-template-columns:92px 1fr;border-bottom:1px solid var(--line)}
.article-title{padding:0 27px;display:flex;align-items:center;font-size:10px}

/* 핵심: 예전 min-height 320px 삭제.
   본문 내용에 맞게 높이가 자동으로 줄어들고,
   네 4번째 이미지 정도만 위아래 여백 유지 */
.article-body{
  min-height:0;
  padding:29px 27px 31px;
  font-size:11px;
  line-height:1.9;
  overflow-wrap:anywhere
}
.article-body p{margin:0 0 1.35em}
.article-body p:last-child{margin-bottom:0}
.article-body img{display:block;max-width:100%;height:auto;margin:16px auto}
.article-body figure{max-width:100%;margin:16px 0}
.article-body iframe{max-width:100%}

.article-foot{height:54px;display:grid;grid-template-columns:122px 1fr;border-top:1px solid var(--line)}
.article-foot>a:first-child{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--line);font-size:8px}
.article-foot>a:last-child,.article-foot>span:last-child{padding:0 27px;display:flex;align-items:center;justify-content:flex-end;color:#aaa;font-size:8px}

/* 티스토리 공감/공유/통계/더보기 바 숨김 + 공간도 0 */
.container_postbtn,
.postbtn_like,
.postbtn_ccl,
.postbtn_share,
.postbtn_statistics,
.postbtn_more,
.wrap_btn,
.area_btn,
.another_category,
#tistorySnsLayer,
#tistoryEtcLayer,
.tt-share-entry-with-sns,
.tt_like_layer,
.tt-btn-reaction,
.reaction-button,
[data-tistory-react-app],
div[class*="postbtn"],
div[class*="btn_post"],
.article-body > .container_postbtn{
 display:none!important;
 visibility:hidden!important;
 width:0!important;height:0!important;min-height:0!important;
 margin:0!important;padding:0!important;border:0!important;
 overflow:hidden!important
}

/* guestbook */
.guest-head{height:43px;padding:0 22px;display:flex;align-items:center;border-bottom:1px solid var(--line);font-size:9px}
.guest-info{margin:20px 21px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.guest-info input{height:32px;min-width:0;padding:0 9px;border:1px solid var(--line);outline:0}
.guest-write{margin:20px 21px 21px;display:grid;grid-template-columns:1fr 95px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.guest-write textarea{height:115px;padding:13px;border:0;outline:0;resize:vertical}
.guest-control{display:grid;grid-template-rows:1fr 1fr;border-left:1px solid var(--line)}
.guest-control label,.guest-control button{display:flex;align-items:center;justify-content:center;border:0;background:#fff;font-size:8px}
.guest-control label{gap:4px;border-bottom:1px dashed var(--line)}
.guest-control button:hover{background:#fafafa}
.guest-list{border-top:1px solid var(--line);padding:0 21px}
.guest-item{padding:16px 0;border-bottom:1px solid var(--soft)}
.guest-meta{display:flex;justify-content:space-between;margin-bottom:7px;color:#999;font-size:8px}
.guest-meta b{color:#333;font-weight:400}
.guest-desc{line-height:1.7}
.guest-actions{display:flex;gap:9px;margin-top:7px;color:#aaa;font-size:7px}
.guest-replies{margin:13px 0 0 16px;padding-left:14px;border-left:1px solid var(--line)}

/* search modal only */
#search-layer{position:fixed;inset:0;z-index:9999;display:none;place-items:center;background:rgba(255,255,255,.9)}
#search-layer.show{display:grid}
.search-modal{position:relative;width:351px;padding:25px;border:1px solid var(--line);border-radius:4px;background:#fff}
.search-form{display:grid;grid-template-columns:1fr 81px}
.search-form input,.search-form button{height:38px;border:1px solid var(--line);background:#fff;outline:0}
.search-form input{padding:0 11px}
.search-form button{border-left:0}
.search-close{position:absolute;right:0;top:-27px;border:0;background:transparent;font-size:18px}

/*
  NARROW / TABLET LAYOUT
  창이 좁아지면 레퍼런스처럼:
  [가로형 프로필]
  [NOTICE | COMMENT | 카테고리...]
  [검색 전체폭]
  [본문 전체폭]
  순서로 재배치
*/
@media(max-width:880px){
  #wrap{
    width:calc(100% - 24px);
    max-width:750px;
    margin:18px auto 70px;
    display:block;
  }

  #sidebar{
    position:static;
    width:100%;
    margin:0 0 16px;
  }

  /* 프로필 카드는 가로 전체폭.
     이미지는 카드 전체를 늘리지 않고 가운데에 정사각형으로 배치 */
  .profile{
    width:100%;
  }

  .profile-img{
    width:100%;
    height:198px;
    aspect-ratio:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }

  .profile-img img{
    width:176px;
    height:176px;
    object-fit:cover;
    flex:0 0 auto;
  }

  .profile-name{
    min-height:52px;
    font-size:10px;
  }

  /* 메뉴를 가로 탭처럼 정렬 */
  .menu{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    overflow:hidden;
  }

  .menu > a{
    height:49px;
    padding:0 8px;
    justify-content:center;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-align:center;
  }

  .menu > a:nth-of-type(2){
    border-right:1px solid var(--line);
  }

  /*
    동적 카테고리를 NOTICE / COMMENT와 같은 가로 칸에 놓기 위해
    wrapper 요소는 레이아웃에서 제거하고 링크만 grid item처럼 사용.
  */
  .categories,
  .categories > ul,
  .categories > ul > li{
    display:contents;
  }

  .categories a{
    height:49px;
    padding:0 8px;
    justify-content:center;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
    text-align:center;
  }

  .categories .sub_category_list,
  .categories .sub_category_list > li{
    display:contents;
  }

  .categories .sub_category_list a{
    padding:0 8px;
    color:#777;
  }

  .categories .c_cnt{
    margin-left:5px;
  }

  /* 검색 버튼은 다음 줄 전체 폭 */
  .search-open{
    grid-column:1 / -1;
    height:50px;
    padding:0 25px;
    border-right:0;
    border-bottom:0;
    justify-content:flex-start;
  }

  /* 좁은 화면에서는 좌측 PREV/NEXT/TOP 박스는 숨겨
     레퍼런스처럼 본문 위 공간을 단순화 */
  .side-paging{
    display:none;
  }

  #content{
    width:100%;
  }

  .article-box,
  .category-page,
  .guestbook{
    width:100%;
  }

  .notice-index{
    width:100%;
  }
}

@media(max-width:540px){
  #wrap{
    width:calc(100% - 20px);
    margin-top:12px;
  }

  .profile-img{
    height:184px;
  }

  .profile-img img{
    width:162px;
    height:162px;
  }

  /*
    카테고리가 하나인 경우 레퍼런스와 같은 3칸,
    여러 개여도 3열씩 자연스럽게 다음 줄로 이어짐.
  */
  .menu{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .menu > a,
  .categories a{
    font-size:8px;
  }

  .gallery{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }

  .article-head,
  .notice-index{
    grid-template-columns:78px 1fr;
  }

  .article-body{
    padding:24px 18px 28px;
  }

  .guest-info{
    grid-template-columns:1fr;
  }

  .guest-write{
    grid-template-columns:1fr;
  }

  .guest-control{
    height:63px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr;
    border-left:0;
    border-top:1px solid var(--line);
  }

  .guest-control label{
    border-bottom:0;
    border-right:1px dashed var(--line);
  }
}

/* V5.3 — 티스토리 NEW 배지/아이콘 완전 숨김 */
img[alt="N"],
img[alt="NEW"],
img[src*="new_ico"],
img[src*="new.gif"],
img[src*="new.png"],
img[src*="new.svg"],
.ico_new,
.icon_new,
.new_ico,
.new-icon,
.newIcon,
.c_cnt + img,
.categories img,
.category-name img,
.gallery-title img,
.notice-index img,
.menu img[src*="new"],
span[class*="new"],
em[class*="new"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* V5.4 — 카테고리 글 개수 숨김 */
.categories .c_cnt,
.category-menu .c_cnt,
.c_cnt {
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}


/* =========================================================
   V5.5 — 게시글 하단 카테고리 텍스트 제거
   COMMENT만 왼쪽에 남고 오른쪽 칸은 완전히 비어 있음
   ========================================================= */
.article-foot-empty {
  display:block !important;
  padding:0 !important;
  color:transparent !important;
}

/* 혹시 티스토리가 footer에 카테고리 링크를 별도 생성해도 숨김 */
.article-foot .entry-category,
.article-foot a[href*="/category/"],
.article-foot a[href$="/category"] {
  display:none !important;
}


/* =========================================================
   V5.5 — YouTube / 외부 영상 반응형
   영상 삽입 자체는 티스토리 에디터가 담당.
   스킨에서는 삽입된 영상을 본문 폭 안에서 16:9로 표시.
   ========================================================= */

/* 티스토리/에디터에서 만들어지는 대표적인 영상 wrapper */
.article-body .tt-youtube-plugin,
.article-body .video-container,
.article-body .youtube-player,
.article-body .iframe-wrap,
.article-body figure[data-ke-type="video"],
.article-body figure[data-ke-type="video"] .video-wrap,
.article-body .kakao_video,
.article-body .figure-video {
  width:100% !important;
  max-width:100% !important;
  margin:0 auto 18px !important;
}

/* 일반 YouTube iframe */
.article-body iframe[src*="youtube.com"],
.article-body iframe[src*="youtube-nocookie.com"],
.article-body iframe[src*="youtu.be"] {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16 / 9;
  height:auto !important;
  min-height:0 !important;
  margin:0 auto !important;
  border:0 !important;
}

/* 티스토리가 iframe에 고정 px 크기를 넣는 경우 wrapper까지 정상화 */
.article-body figure[data-ke-type="video"] iframe,
.article-body .tt-youtube-plugin iframe,
.article-body .video-container iframe,
.article-body .youtube-player iframe {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  aspect-ratio:16 / 9;
  height:auto !important;
  border:0 !important;
}

/* 링크 자동 미리보기나 figure가 불필요한 좌우 여백을 만들지 않게 */
.article-body figure {
  max-width:100% !important;
}

/* 영상 바로 뒤 문단과 footer 사이가 과하게 벌어지지 않도록 */
.article-body > figure:last-child,
.article-body > .tt-youtube-plugin:last-child,
.article-body > .video-container:last-child,
.article-body > iframe:last-child {
  margin-bottom:0 !important;
}


/* =========================================================
   V5.6 — "분류 전체보기" 링크만 제거
   실제 카테고리(TRPG, COMMISION 등)는 그대로 유지
   ========================================================= */

/* 티스토리 기본 카테고리 구조의 전체보기 제목 링크만 숨김 */
.categories .tt_category > li > .link_tit,
.categories > ul > li > .link_tit {
  display:none !important;
}

/* 전체보기 링크가 사라진 뒤 하위 카테고리 목록은 정상 노출 */
.categories .category_list,
.categories .tt_category .category_list {
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}

/* 기존 요청 유지: 카테고리 옆 글 개수는 숨김 */
.categories .c_cnt,
.category-menu .c_cnt,
.c_cnt {
  display:none !important;
}

/* 데스크톱에서 실제 카테고리 링크는 한 줄씩 정상 표시 */
.categories .category_list > li > a,
.categories .sub_category_list > li > a {
  display:flex;
}

/* 좁은 화면에서는 기존 V5.2 가로 메뉴 동작 유지 */
@media(max-width:880px){
  .categories .category_list,
  .categories .category_list > li,
  .categories .sub_category_list,
  .categories .sub_category_list > li{
    display:contents !important;
  }
}


/* V5.7 — 보호글 비밀번호 입력 화면 */
.protected-body{min-height:255px;padding:34px 27px;display:flex;align-items:center;justify-content:center}
.protected-form{width:min(275px,78%);height:66px;display:grid;grid-template-columns:1fr 68px;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff}
.protected-password{min-width:0;width:100%;height:100%;padding:0 18px;border:0;border-right:1px solid var(--line);outline:0;background:#eef4ff;font-size:13px;letter-spacing:2px}
.protected-submit{width:100%;height:100%;border:0;background:#fff;font-size:11px}
.protected-submit:hover{background:#fafafa}

/* V5.7 — 좁은/세로 화면에서 PREV/NEXT/TOP 하단 고정 */
@media(max-width:880px){
  .side-paging{display:grid !important;position:fixed;z-index:9990;left:50%;bottom:20px;transform:translateX(-50%);width:282px;max-width:calc(100vw - 32px);margin:0;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:5px;overflow:hidden}
  .side-paging a{height:67px;background:#fff;font-size:11px}
  #content{padding-bottom:95px}
  .protected-body{min-height:235px}
}
@media(max-width:540px){
  .side-paging{bottom:max(16px, env(safe-area-inset-bottom));width:282px}
  .side-paging a{height:66px}
  .protected-form{width:min(280px,86%);height:62px;grid-template-columns:1fr 64px}
  .protected-body{min-height:230px;padding:28px 16px}
}


/* =========================================================
   V5.8 — 게시글 하단 태그
   COMMENT 바 바로 위 왼쪽에 작고 옅은 회색으로 표시
   ========================================================= */
.article-tags{
  padding:0 27px 12px;
  margin-top:-4px;
  color:#aaa;
  font-size:8px;
  line-height:1.7;
  text-align:left;
  font-weight:400;
}

.article-tags a{
  color:#aaa !important;
  text-decoration:none !important;
  margin-right:7px;
  font-weight:400;
}

.article-tags a:hover{
  color:#777 !important;
}

/* 티스토리에서 태그 앞에 붙이는 불필요한 장식이 있다면 최대한 얌전하게 */
.article-tags .tag_label,
.article-tags span{
  color:#aaa;
}

@media(max-width:540px){
  .article-tags{
    padding:0 18px 11px;
    font-size:8px;
  }
}


/* =========================================================
   V5.9 — TRPG 백업 로그 보정
   1) 작은 인장 + 이름/첫 문장 상단 정렬
   2) 다이스 판정 표가 본문 밖으로 튀어나오지 않게
   다른 일반 이미지/본문에는 영향 최소화
   ========================================================= */

/*
  작은 인장이 문단 첫 요소로 들어가는 경우:
  인장 자체를 아래로 끌어내리는 baseline 정렬을 없애고
  텍스트 첫 줄과 같은 윗선에 맞춤.
*/
.article-body p > img:first-child,
.article-body div > img:first-child {
  vertical-align: top !important;
}

/*
  로그 백업에서 흔한 24~64px 안팎의 인장 이미지에만
  아래 여백/기준선 보정을 적용.
  큰 삽화/일러스트에는 영향 없음.
*/
.article-body img[width="24"],
.article-body img[width="25"],
.article-body img[width="32"],
.article-body img[width="36"],
.article-body img[width="40"],
.article-body img[width="48"],
.article-body img[width="50"],
.article-body img[width="56"],
.article-body img[width="64"] {
  display:inline-block !important;
  vertical-align:top !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/*
  이미지와 같은 줄의 이름/텍스트가 line-height 때문에 아래로 밀리지 않게.
  작은 인장이 포함된 문단/블록에만 적용.
*/
.article-body p:has(> img:first-child),
.article-body div:has(> img:first-child) {
  vertical-align:top;
}

/* ---------------------------------------------------------
   다이스 판정 / 로그 표
   --------------------------------------------------------- */

/* 백업 로그의 판정표가 고정 px 너비를 가져도 본문 폭을 넘지 않게 */
.article-body table {
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  table-layout:auto;
}

/* 셀 내부 긴 텍스트/숫자 때문에 표가 강제로 넓어지는 현상 방지 */
.article-body table th,
.article-body table td {
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/*
  판정표를 감싸는 흔한 wrapper가 고정 너비를 가져도
  본문 바깥으로 넘어가지 않게 제한.
*/
.article-body .dice,
.article-body .dice-roll,
.article-body .roll,
.article-body .roll-result,
.article-body .chatlog__message,
.article-body .message,
.article-body .result,
.article-body [class*="dice"],
.article-body [class*="roll"] {
  max-width:100% !important;
  box-sizing:border-box !important;
}

/*
  혹시 표 자체가 브라우저 최소폭 때문에 줄어들지 않는 경우
  잘리는 대신 해당 판정 블록 안에서만 가로 스크롤 허용.
  본문 전체 레이아웃에는 영향 없음.
*/
.article-body .dice,
.article-body .dice-roll,
.article-body .roll,
.article-body .roll-result,
.article-body [class*="dice"],
.article-body [class*="roll"] {
  overflow-x:auto;
}

/* 모바일/세로 화면에서 판정표 폰트가 아주 살짝 줄어들도록 */
@media(max-width:540px){
  .article-body table {
    font-size:0.95em;
  }
}


/* =========================================================
   V6.0 — 첨부파일 박스 축소
   티스토리 첨부파일 카드에만 적용
   ========================================================= */
.article-body .fileblock,
.article-body .tt-file-plugin,
.article-body figure[data-ke-type="file"],
.article-body .file-wrap,
.article-body [class*="fileblock"] {
  max-width:520px !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

.article-body .fileblock,
.article-body .tt-file-plugin,
.article-body figure[data-ke-type="file"] {
  transform:scale(.92);
  transform-origin:left top;
  margin-bottom:-6px !important;
}

/* 너무 넓은 내부 행도 함께 제한 */
.article-body figure[data-ke-type="file"] > *,
.article-body .tt-file-plugin > *,
.article-body .fileblock > * {
  max-width:100% !important;
}


/* =========================================================
   V6.0 — 보호글 비밀번호 입력창 축소
   첨부파일 박스와 비슷하게 조금 더 작게
   ========================================================= */
.protected-form {
  width:min(245px, 74%) !important;
  height:56px !important;
  grid-template-columns:1fr 60px !important;
}

.protected-password {
  padding:0 15px !important;
  font-size:12px !important;
}

.protected-submit {
  font-size:10px !important;
}


/* =========================================================
   V6.0 — 태그 미세조정
   조금 더 위로 + 1px 크게
   ========================================================= */
.article-tags {
  margin-top:-10px !important;
  padding-bottom:10px !important;
  font-size:9px !important;
}

.article-tags a {
  font-size:9px !important;
}

@media(max-width:540px){
  .article-tags{
    margin-top:-8px !important;
    font-size:9px !important;
  }

  .article-tags a{
    font-size:9px !important;
  }

  .protected-form{
    width:min(245px, 84%) !important;
    height:54px !important;
    grid-template-columns:1fr 58px !important;
  }
}


/* V6.1 — 태그 위치를 조금 더 위로 */
.article-tags{
  margin-top:-18px !important;
  padding-bottom:10px !important;
}

@media(max-width:540px){
  .article-tags{
    margin-top:-16px !important;
  }
}


/* =========================================================
   V6.2 — 좁은 화면 카테고리 3열 + 플로팅 페이징 축소
   ========================================================= */
@media(max-width:880px){

  /* NOTICE / COMMENT / 카테고리를 왼쪽부터 3칸씩 채우기 */
  .menu{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
  }

  /* 티스토리 카테고리 wrapper는 grid item을 만들지 않게 */
  .categories,
  .categories > ul,
  .categories > ul > li,
  .categories .tt_category,
  .categories .tt_category > li,
  .categories .category_list,
  .categories .category_list > li,
  .categories .sub_category_list,
  .categories .sub_category_list > li{
    display:contents !important;
  }

  /* NOTICE / COMMENT / 실제 카테고리를 모두 같은 한 칸 규격으로 */
  .menu > a,
  .categories .category_list > li > a,
  .categories .sub_category_list > li > a{
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 8px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    font-size:9px !important;
  }

  /* 검색은 항상 카테고리들 다음 줄 전체폭 */
  .search-open{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 22px !important;
    justify-content:flex-start !important;
    border-right:0 !important;
    border-bottom:0 !important;
  }

  /*
    PREV/NEXT/TOP: 기존보다 훨씬 작게
    카테고리 한 칸 높이와 거의 같게
  */
  .side-paging{
    display:grid !important;
    position:fixed !important;
    z-index:9990 !important;
    left:50% !important;
    bottom:16px !important;
    transform:translateX(-50%) !important;
    width:216px !important;
    max-width:calc(100vw - 28px) !important;
    height:46px !important;
    margin:0 !important;
    grid-template-columns:repeat(3,1fr) !important;
    background:#fff !important;
    border:1px solid var(--line) !important;
    border-radius:4px !important;
    overflow:hidden !important;
  }

  .side-paging a{
    height:46px !important;
    min-height:46px !important;
    padding:0 6px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#fff !important;
    border-right:1px solid var(--line) !important;
    font-size:8px !important;
    white-space:nowrap !important;
  }

  .side-paging a:last-child{
    border-right:0 !important;
  }

  #content{
    padding-bottom:68px !important;
  }
}

@media(max-width:540px){
  .menu > a,
  .categories .category_list > li > a,
  .categories .sub_category_list > li > a{
    height:44px !important;
    min-height:44px !important;
    font-size:8px !important;
  }

  .search-open{
    height:44px !important;
    min-height:44px !important;
  }

  .side-paging{
    width:210px !important;
    height:44px !important;
    bottom:max(14px, env(safe-area-inset-bottom)) !important;
  }

  .side-paging a{
    height:44px !important;
    min-height:44px !important;
    font-size:8px !important;
  }

  #content{
    padding-bottom:64px !important;
  }
}


/* =========================================================
   V6.3 — 실제 티스토리 DOM 대응 3열 카테고리 강제 정렬
   ========================================================= */
@media(max-width:880px){

  /*
    sidebar 자체를 3열 grid로 사용한다.
    profile은 전체폭, menu wrapper는 contents로 풀어서
    NOTICE / COMMENT / 카테고리 링크를 전부 동일한 grid 자식으로 만든다.
  */
  #sidebar{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    align-items:stretch !important;
  }

  #sidebar .profile{
    grid-column:1 / -1 !important;
    width:100% !important;
  }

  #sidebar .menu{
    display:contents !important;
  }

  /*
    티스토리가 만들어내는 여러 단계 wrapper를 모두 제거.
    실제 링크만 sidebar grid의 item이 되게 한다.
  */
  #sidebar .categories,
  #sidebar .categories .tt_category,
  #sidebar .categories .tt_category > li,
  #sidebar .categories .category_list,
  #sidebar .categories .category_list > li,
  #sidebar .categories .sub_category_list,
  #sidebar .categories .sub_category_list > li,
  #sidebar .categories ul,
  #sidebar .categories li{
    display:contents !important;
  }

  /* NOTICE / COMMENT */
  #sidebar .menu > a:not(.search-open){
    grid-column:auto !important;
    width:auto !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border:0 !important;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    box-sizing:border-box !important;
    font-size:9px !important;
  }

  /* 등록 카테고리 전부 */
  #sidebar .categories a{
    grid-column:auto !important;
    width:auto !important;
    height:46px !important;
    min-height:46px !important;
    padding:0 8px !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    border:0 !important;
    border-right:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    box-sizing:border-box !important;
    font-size:9px !important;
  }

  /*
    분류 전체보기는 링크 자체만 숨김.
    실제 category_list wrapper/카테고리는 절대 제거하지 않음.
  */
  #sidebar .categories .link_tit{
    display:none !important;
  }

  /* 검색은 카테고리가 끝난 뒤 무조건 다음 행 전체폭 */
  #sidebar .search-open{
    grid-column:1 / -1 !important;
    width:100% !important;
    height:46px !important;
    min-height:46px !important;
    margin:0 !important;
    padding:0 22px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    border:0 !important;
    box-sizing:border-box !important;
  }

  /* profile과 메뉴 사이 간격은 grid row-gap 대신 profile margin으로 */
  #sidebar .profile{
    margin-bottom:14px !important;
  }
}

@media(max-width:540px){
  #sidebar .menu > a:not(.search-open),
  #sidebar .categories a{
    height:44px !important;
    min-height:44px !important;
    font-size:8px !important;
  }

  #sidebar .search-open{
    height:44px !important;
    min-height:44px !important;
  }
}


/* =========================================================
   V6.4 — 프로필 이미지 + 이름을 하나의 대표게시글 카드로
   카드 전체 hover 오버레이
   ========================================================= */
.profile-featured{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}

.profile-featured .profile-img{
  pointer-events:none;
}

.profile-featured .profile-name{
  pointer-events:none;
}

/* 이미지 + 이름 영역 전체를 덮는 오버레이 */
.profile-hover{
  position:absolute;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(65,65,65,.62);
  color:#fff;
  opacity:0;
  transition:opacity .15s ease;
  text-align:center;
  line-height:1.6;
  pointer-events:none;
}

.profile-hover-text{
  font-size:9px;
  font-weight:400;
}

/* 게시글 썸네일과 동일한 느낌으로 카드 전체가 회색으로 */
.profile-featured:hover .profile-hover{
  opacity:1;
}

/* 기존 profile-img/profile-name 개별 링크 스타일을 span에도 그대로 적용 */
.profile-featured .profile-img{
  display:block;
}

.profile-featured .profile-name{
  display:flex;
}

/* 좁은 화면에서도 카드 전체 hover 범위 유지 */
@media(max-width:880px){
  .profile-featured{
    grid-column:1 / -1 !important;
  }

  .profile-hover-text{
    font-size:9px;
  }
}


/* =========================================================
   V6.5 — 좁은 화면 프로필 이미지 중앙 정렬
   ========================================================= */
@media(max-width:880px){

  /*
    프로필 카드 전체는 기존처럼 가로 100%.
    이미지 영역 안에서 실제 프로필 이미지만 가운데 정렬.
  */
  .profile-featured .profile-img{
    width:100% !important;
    height:198px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  .profile-featured .profile-img img{
    display:block !important;
    width:176px !important;
    height:176px !important;
    max-width:none !important;
    object-fit:cover !important;
    margin:0 auto !important;
    flex:0 0 auto !important;
  }
}

@media(max-width:540px){
  .profile-featured .profile-img{
    height:184px !important;
  }

  .profile-featured .profile-img img{
    width:162px !important;
    height:162px !important;
    margin:0 auto !important;
  }
}


/* V6.6 — 프로필 hover 시 중앙의 흰색 이름 텍스트 제거 */
.profile-hover-text{
  display:none !important;
}


/* =========================================================
   V6.7 — 카테고리 갤러리 아래 중복 게시글 제목 행 제거
   ========================================================= */
.category-page ~ .home-index-row,
.category-page ~ .protected-index-row,
.category-page ~ .notice-index.home-index-row,
.category-page ~ .notice-index.protected-index-row {
  display:none !important;
}

/* Tistory가 중간 wrapper를 넣는 경우까지 대응 */
#content:has(.category-page) .home-index-row,
#content:has(.category-page) .protected-index-row {
  display:none !important;
}


/* =========================================================
   V6.8 — 방문자 화면 기준: 갤러리 제목은 hover 시에만 표시
   관리자 로그인 여부와 무관하게 적용
   ========================================================= */

/* 평소에는 제목 완전히 숨김 */
.gallery-card .gallery-title,
.gallery-card:not(:has(img)) .gallery-title {
  color: transparent !important;
  background: transparent !important;
}

/* 마우스를 올렸을 때만 회색 오버레이 + 흰색 제목 */
.gallery-card:hover .gallery-title,
.gallery-card:not(:has(img)):hover .gallery-title {
  color: #fff !important;
  background: rgba(65,65,65,.62) !important;
}

/* 썸네일 없는 글도 평소엔 빈 회색 카드로만 */
.gallery-card:not(:has(img)) {
  background: #eee !important;
}

/* 링크 내부 텍스트가 별도 색을 상속받는 경우까지 차단 */
.gallery-card .gallery-title *,
.gallery-card:not(:has(img)) .gallery-title * {
  color: inherit !important;
}