/* =========================================
   검정 · 빨강 / 스코프 컨셉
   상단 가로 슬라이더 + 2단 목록형 + 좌측 서랍
   ========================================= */

:root{
  --void:    #0A0B0C;
  --panel:   #111315;
  --panel-2: #16191C;
  --line:    #23272B;
  --line-2:  #33383D;
  --red:     #C8102E;
  --red-lit: #FF2E45;
  --text:    #DCE0E4;
  --muted:   #79828A;
  --dim:     #4E565D;

  --sans: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', 'D2Coding', ui-monospace, monospace;

  --w: 1320px;
  --r: 2px;

  --reticle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23FF2E45' stroke-width='1.2'%3E%3Ccircle cx='16' cy='16' r='8.5' opacity='.9'/%3E%3Cpath d='M16 0v8M16 24v8M0 16h8M24 16h8'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='1.2' fill='%23FF2E45'/%3E%3C/svg%3E") 16 16, crosshair;

  --reticle-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cg fill='none' stroke='%23FF2E45' stroke-width='1.6'%3E%3Ccircle cx='16' cy='16' r='11'/%3E%3Cpath d='M16 1v7M16 24v7M1 16h7M24 16h7'/%3E%3C/g%3E%3Ccircle cx='16' cy='16' r='2' fill='%23FF2E45'/%3E%3C/svg%3E") 16 16, pointer;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: -0.01em;
  word-break: keep-all;
  cursor: var(--reticle);
}

a, button, input, textarea, label{ cursor: var(--reticle-lit); }
img{ max-width: 100%; height: auto; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; }

.sr-only{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--red); color:#fff; padding:10px 16px; z-index:120;
}
.skip:focus{ left:0; }
:focus-visible{ outline:1px solid var(--red-lit); outline-offset:3px; }
::selection{ background:var(--red); color:#fff; }

/* ---------- 노이즈 ----------
   세기 조절: .grain의 opacity 값 (0.05 = 약함 / 0.16 = 강함)
   흔들림 끄기: .grain의 animation 줄 삭제
   --------------------------------- */

.grain{
  position: fixed; inset: -50%;
  z-index: 100; pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}   20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)} 100%{transform:translate(0,0)}
}

/* 주사선 */
.grain::after{
  content:""; position:absolute; inset:0;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.055) 0 1px, transparent 1px 3px);
  opacity:.62;
}

/* 화면 가장자리 어둡게 (스코프 비네팅) */
.vignette{
  position: fixed; inset: 0;
  z-index: 99; pointer-events: none;
  background: radial-gradient(120% 85% at 50% 45%,
    transparent 42%, rgba(0,0,0,.34) 82%, rgba(0,0,0,.62) 100%);
}

/* ---------- 머리말 ---------- */

.head{
  max-width: var(--w);
  margin: 0 auto;
  padding: 52px 24px 0;
  text-align: center;
}

.blog-title{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.blog-title a:hover{ color: var(--red-lit); }

.blog-desc{
  margin: 8px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .16em;
}

/* 파이프 구분 가로 메뉴 — 카테고리를 오른쪽으로 뺐으므로 기본 숨김.
   다시 쓰려면 display 줄을 지우세요. */
.topnav{
  display: none;
  margin-top: 26px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.topnav ul{
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.topnav li{ display: flex; align-items: center; }
.topnav li + li::before{
  content: "";
  width: 1px; height: 11px;
  margin: 0 4px;
  background: var(--line-2);
}
.topnav a{
  position: relative;
  display: block;
  padding: 6px 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .16s;
}
.topnav a:hover{ color: var(--red-lit); }
.topnav a::after{
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  width: 3px; height: 3px;
  background: var(--red-lit);
  transform: translateX(-50%) scale(0);
  transition: transform .18s ease;
}
.topnav a:hover::after{ transform: translateX(-50%) scale(1); }

/* 2단계 카테고리는 서랍에서만 노출 */
.topnav ul ul{ display: none; }


/* ---------- 좌측 서랍 ---------- */

.drawer-btn{
  position: fixed;
  top: 50%; left: 20px;
  transform: translateY(-50%);
  z-index: 92;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(10,11,12,.9);
  backdrop-filter: blur(6px);
  transition: border-color .18s, background .18s;
}
.drawer-btn span{
  position: relative;
  display: block;
  width: 15px; height: 1px;
  background: var(--muted);
  transition: background .18s, transform .22s ease, opacity .18s;
}
.drawer-btn span::before,
.drawer-btn span::after{
  content: "";
  position: absolute; left: 0;
  width: 15px; height: 1px;
  background: var(--muted);
  transition: transform .22s ease, background .18s;
}
.drawer-btn span::before{ top: -5px; }
.drawer-btn span::after{ top: 5px; }
.drawer-btn:hover{ border-color: var(--red); }
.drawer-btn:hover span,
.drawer-btn:hover span::before,
.drawer-btn:hover span::after{ background: var(--red-lit); }

body.drawer-open .drawer-btn span{ background: transparent; }
body.drawer-open .drawer-btn span::before{ transform: translateY(5px) rotate(45deg); background: var(--red-lit); }
body.drawer-open .drawer-btn span::after{ transform: translateY(-5px) rotate(-45deg); background: var(--red-lit); }

.drawer-dim{
  position: fixed; inset: 0;
  z-index: 88;
  background: rgba(5,6,7,.72);
  opacity: 0; visibility: hidden;
  transition: opacity .24s ease, visibility .24s;
}
body.drawer-open .drawer-dim{ opacity: 1; visibility: visible; }

.drawer{
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 90;
  width: 288px;
  max-width: 82vw;
  padding: 30px 24px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.3,.7,.2,1);
}
body.drawer-open .drawer{ transform: translateX(0); }

.drawer-sec + .drawer-sec{
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.drawer-head{
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.drawer-head::before{
  content:""; width:5px; height:5px; background: var(--red-lit); flex:none;
}

/* 서랍 안 메시지 */
.msg-body{ font-size: .875rem; line-height: 1.85; color: #C5CAD0; }
.msg-body p{ margin: 0 0 10px; }
.msg-body p:last-child{ margin-bottom: 0; }
.msg-body strong{ color: var(--red-lit); font-weight: 600; }
.msg-sign{
  margin: 14px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .12em;
}

/* 서랍 안 카테고리 */
.drawer-cats ul{ list-style: none; margin: 0; padding: 0; }
.drawer-cats a{
  position: relative;
  display: block;
  padding: 7px 10px 7px 22px;
  color: var(--muted);
  font-size: .875rem;
  border-radius: var(--r);
  transition: color .16s, background .16s;
}
.drawer-cats a::before{
  content:"";
  position:absolute; left:8px; top:50%;
  width:5px; height:1px; background: var(--line-2);
  transition: background .16s, width .16s;
}
.drawer-cats a:hover{ color: var(--text); background: var(--panel-2); }
.drawer-cats a:hover::before{ background: var(--red-lit); width: 9px; }
.drawer-cats ul ul a{ padding-left: 36px; font-size: .8125rem; color: var(--dim); }
.drawer-cats ul ul a::before{ left: 22px; }

/* 서랍 안 검색 */
.search{
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.search input{
  flex:1; min-width:0;
  padding: 9px 12px;
  border:0; background: transparent;
  font-family: var(--mono); font-size:.75rem; color: var(--text);
}
.search input::placeholder{ color: var(--dim); }
.search input:focus{ outline: none; }
.search button{
  padding: 9px 13px;
  border:0; border-left:1px solid var(--line);
  background: transparent; color: var(--red-lit);
  font-family: var(--mono); font-size:.625rem;
  letter-spacing:.1em; text-transform: uppercase;
  transition: background .16s, color .16s;
}
.search button:hover{ background: var(--red); color:#fff; }

/* ---------- 본체 ---------- */

.wrap{
  max-width: var(--w);
  margin: 0 auto;
  padding: 34px 24px 84px;
}

.eyebrow{
  margin: 0 0 8px;
  color: var(--red-lit);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow span{ color: var(--dim); margin: 0 4px; }


/* ---------- 본문 + 오른쪽 카테고리 단 ---------- */

/* 왼쪽에 카테고리와 같은 폭의 빈 칸을 두어
   사진과 목록이 화면 정중앙에 오도록 맞춘다 */
.cols{
  display: grid;
  grid-template-columns: 206px minmax(0, 1fr) 206px;
  gap: 36px;
  align-items: start;
}
.col-spacer{ min-height: 1px; }

.side{
  position: sticky;
  top: 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 옆단 상자 */
.box{
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  overflow: hidden;
}
.box-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .5625rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.box-head::before{
  content:""; width: 4px; height: 4px; background: var(--red-lit); flex: none;
}
.box-body{ padding: 12px 6px 14px; }

/* 카테고리 목록
   티스토리가 자체 스타일을 얹기 때문에 !important 로 눌러 준다 */

.side-cats ul,
.side-cats ol,
.side-cats li{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
}

/* 배경·테두리·그림자 제거 + 글자색을 스킨 색으로 되돌림 */
.side-cats,
.side-cats *{
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--muted) !important;
}

.side-cats a,
.side-cats a:link,
.side-cats a:visited{
  position: relative;
  display: block !important;
  padding: 6px 12px 6px 24px !important;
  color: var(--muted) !important;
  font-family: var(--sans) !important;
  font-size: .8125rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  border-radius: var(--r);
  transition: color .16s, background-color .16s;
}

/* 앞의 짧은 선 */
.side-cats a::before{
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 5px; height: 1px;
  background: var(--line-2) !important;
  transition: background .16s, width .16s;
}

.side-cats a:hover{
  color: var(--text) !important;
  background-color: var(--panel-2) !important;
}
.side-cats a:hover::before{ background: var(--red-lit) !important; width: 9px; }

/* 현재 보고 있는 카테고리 */
.side-cats .selected > a,
.side-cats a.selected{ color: var(--red-lit) !important; }
.side-cats .selected > a::before,
.side-cats a.selected::before{ background: var(--red-lit) !important; width: 9px; }

/* 하위 카테고리 */
.side-cats ul ul a{
  padding: 4px 12px 4px 36px !important;
  color: var(--dim) !important;
  font-size: .75rem !important;
}
.side-cats ul ul a::before{ left: 22px; }

/* 글 개수 */
.side-cats .c_cnt,
.side-cats .cnt{
  display: inline !important;
  color: var(--dim) !important;
  font-family: var(--mono) !important;
  font-size: .625rem !important;
}

/* 티스토리가 넣는 아이콘 · 접기 버튼 · 트리 선 감추기 */
.side-cats img,
.side-cats button,
.side-cats .btn_fold,
.side-cats .btn_arrow,
.side-cats [class^="ico_"],
.side-cats [class*=" ico_"]{ display: none !important; }

/* 옆단 검색 — 상자 자체가 테두리 역할을 하므로 안쪽은 얇게 */
.search-box .box-body{ padding: 7px; }

.side .search{
  border: 1px solid var(--line);
  border-radius: var(--r);
  align-items: stretch;
}
.side .search input{
  padding: 5px 9px;
  font-size: .6875rem;
  line-height: 1.4;
}
.side .search button{
  padding: 5px 9px;
  font-size: .5625rem;
  line-height: 1.4;
}



/* ---------- 목록 화면에서만 보이는 요소 ----------
   티스토리는 페이지 종류에 따라 <body id> 를 바꿉니다.
   목록(index) · 카테고리 · 검색 · 태그 화면에서만 상단 사진과
   목록 머리말을 보여 줍니다. */

.index-only{ display: none; }

#tt-body-index .list-head,
#tt-body-category .list-head,
#tt-body-search .list-head,
#tt-body-tag .list-head{ display: flex; }

#tt-body-index .list-rule,
#tt-body-category .list-rule,
#tt-body-search .list-rule,
#tt-body-tag .list-rule{ display: block; }

#tt-body-index .home:not([hidden]){ display: grid; }

/* 미리보기(단독 HTML)에서는 body id가 없으므로 그대로 보이게 */
body:not([id]) .index-only{ display: revert; }
body:not([id]) .home[hidden]{ display: none; }


/* ---------- 홈 상단: 사진 2장 + 메신저창 ---------- */

.home{
  display: grid;
  /* 가로로 긴 사진 한 장.
     두 장으로 늘리려면 1fr 1fr 로 바꾸고
     script.js의 LIMIT 값을 2로 수정 */
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  margin-bottom: 48px;
}
.home[hidden]{ display: none; }

/* 썸네일이 없으면 상단 자체를 숨김 */
.home.no-shots{ display: none; }

/* 사진 한 장 */
.shot{ min-width: 0; display: flex; flex-direction: column; }
.shot-art{
  position: relative;
  display: block;
  flex: 1;
  aspect-ratio: 21 / 9;   /* 가로로 긴 직사각형 */
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0D0F11;
  overflow: hidden;
}
.shot-art img,
.shot-art svg{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.05);
  transition: filter .3s, transform .5s ease;
}
.shot:hover .shot-art img{ filter: saturate(1) contrast(1.05); transform: scale(1.03); }

.shot-art::before,
.shot-art::after{
  content:"";
  position:absolute;
  width: 20px; height: 20px;
  border: 1px solid var(--red-lit);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.shot-art::before{ top:14px; left:14px; border-right:0; border-bottom:0; transform: translate(6px,6px); }
.shot-art::after{ bottom:14px; right:14px; border-left:0; border-top:0; transform: translate(-6px,-6px); }
.shot:hover .shot-art::before,
.shot:hover .shot-art::after{ opacity:1; transform: translate(0,0); }

/* ---------- 사진 위 조준경 오버레이 ---------- */

.scope-ov{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  transition: opacity .3s ease;
}
.shot:hover .scope-ov{ opacity: .82; }

.scope-ov .ring,
.scope-ov .tick,
.scope-ov .hair{ fill: none; stroke: #FFFFFF; stroke-opacity: .5; }
.scope-ov .hair{ stroke-width: .6; }
.scope-ov .tick{ stroke-width: .8; }
.scope-ov .ring{ stroke: var(--red-lit); stroke-opacity: .55; stroke-width: .8; }
.scope-ov .core{ fill: var(--red-lit); }
.scope-ov .rdg{
  fill: var(--red-lit);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 1.4;
  opacity: .85;
}

/* 스캔선: 사진 위를 천천히 지나간다 */
.scope-scan{
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 44px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent, rgba(255,46,69,.10) 45%, rgba(255,46,69,.22) 50%,
    rgba(255,46,69,.10) 55%, transparent);
  animation: scan 6.5s linear infinite;
}
@keyframes scan{
  0%{ transform: translateY(-60px); opacity: 0; }
  12%{ opacity: 1; }
  88%{ opacity: 1; }
  100%{ transform: translateY(560px); opacity: 0; }
}

.shot-cap{
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .16s;
}
.shot:hover .shot-cap{ color: var(--red-lit); }


/* 사진 파일이 아직 없을 때도 틀은 보이도록 */
.home .shot-art{ background: #0D0F11; }
.home .shot-art img{ min-height: 1px; }

/* ---------- 메신저 팝업창 ----------
   화면 위에 따로 떠 있는 창. 제목 표시줄을 잡고 옮길 수 있고
   X로 닫으면 오른쪽 아래 작은 버튼으로 줄어든다. */

.mgr{
  position: fixed;
  left: 26px;
  top: 132px;
  z-index: 94;
  width: 330px;
  max-width: calc(100vw - 36px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
  overflow: hidden;
  transition: opacity .22s ease, transform .22s ease;
}
.mgr.is-closed{
  opacity: 0;
  transform: translateY(-12px) scale(.98);
  pointer-events: none;
}
.mgr.is-dragging{ transition: none; }

.mgr-bar{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  cursor: move;
  user-select: none;
  touch-action: none;
}
.mgr-dots{ display: flex; gap: 5px; flex: none; }
.mgr-dots i{ width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.mgr-dots i:first-child{ background: var(--red); }

.mgr-name{
  flex: 1;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .625rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-live{
  flex: none;
  display: flex; align-items: center; gap: 5px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .1em;
}
.mgr-live::before{
  content:"";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red-lit);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.25} }

.mgr-x{
  flex: none;
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1;
  transition: color .16s;
}
.mgr-x:hover{ color: var(--red-lit); }

.mgr-body{
  flex: 1;
  min-height: 150px;
  max-height: 300px;
  padding: 16px 14px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.mgr-body::-webkit-scrollbar{ width: 6px; }
.mgr-body::-webkit-scrollbar-thumb{ background: var(--line-2); }

.mgr-day{
  align-self: center;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .12em;
}

.bubble{
  position: relative;
  max-width: 86%;
  padding: 9px 13px;
  border-radius: 3px;
  font-size: .8125rem;
  line-height: 1.65;
}
.bubble strong{ color: var(--red-lit); font-weight: 600; }
.bubble.in{
  align-self: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-2);
  color: #C5CAD0;
}
.bubble.out{
  align-self: flex-end;
  background: rgba(200,16,46,.14);
  border: 1px solid rgba(200,16,46,.4);
  border-right: 2px solid var(--red);
  color: var(--text);
}
.bubble time{
  display: block;
  margin-top: 5px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .06em;
}
.bubble.out time{ text-align: right; }

.mgr-foot{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.mgr-foot p{
  flex: 1;
  margin: 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mgr-send{
  flex: none;
  padding: 5px 13px;
  border: 1px solid var(--red);
  border-radius: var(--r);
  color: var(--red-lit);
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .16s, color .16s;
}
.mgr-send:hover{ background: var(--red); color: #fff; }

/* 닫았을 때 나타나는 작은 버튼 */
.mgr-open{
  position: fixed;
  left: 26px; top: 132px;
  z-index: 93;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(17,19,21,.94);
  backdrop-filter: blur(6px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, border-color .16s, color .16s;
}
.mgr-open::before{
  content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--red-lit);
}
.mgr-open.is-shown{ opacity: 1; transform: translateY(0); pointer-events: auto; }
.mgr-open:hover{ border-color: var(--red); color: var(--red-lit); }

/* ---------- 목록형 ---------- */

.list-head{
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 6px;
}
.list-head h2{
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.list-head .n{
  color: var(--dim);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
}
.list-rule{
  height: 1px;
  background: var(--line-2);
  margin-bottom: 4px;
}

.rows{
  columns: 1;
}

/* 각 글을 감싸는 티스토리 표준 컨테이너 — 레이아웃에 영향 주지 않게 */
.art{ display: contents; }

/* 보이는 글 수는 티스토리 설정에서 조절합니다.
   스킨 편집 → 홈 설정 → 홈 화면 글 수 / 기본 설정 → 글 목록 글 수 */

.row{
  display: flex;
  break-inside: avoid;
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 12px 2px 12px 14px;
  border-bottom: 1px solid var(--line);
}
.row::before{
  content:"";
  position:absolute;
  left: 2px; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--line-2);
  transition: background .16s, box-shadow .16s;
}
.row:hover::before{
  background: var(--red-lit);
  box-shadow: 0 0 0 3px rgba(255,46,69,.16);
}

.row-title{
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .16s;
}
.row:hover .row-title{ color: var(--red-lit); }

.row-cat{
  flex: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.row-date{
  flex: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .04em;
}

/* 기본 목록에서는 썸네일을 숨김 (갤러리형에서만 보임) */
.row .thumb,
.row .thumb-link{ display: none; }



/* 홈에서 티스토리가 <s_list> 목록을 대신 그리는 경우,
   스킨이 넣은 "목록" 머리말과 겹치므로 하나만 남긴다 */
.col-main:has(.list-mode) > .list-head.index-only,
.col-main:has(.list-mode) > .list-rule.index-only{ display: none !important; }

/* ---------- 카테고리 · 검색 · 태그 목록 ---------- */

.list-mode .list-head{ display: flex; }
.list-mode .list-rule{ display: block; }

.list-empty{
  padding: 28px 4px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .1em;
}

/* ---------- 서랍 안 메뉴 ---------- */

.drawer-links{ list-style: none; margin: 0; padding: 0; }
.drawer-links a{
  position: relative;
  display: block;
  padding: 7px 10px 7px 22px;
  color: var(--muted);
  font-size: .875rem;
  border-radius: var(--r);
  transition: color .16s, background .16s;
}
.drawer-links a::before{
  content:"";
  position:absolute; left:8px; top:50%;
  width:5px; height:1px; background: var(--line-2);
  transition: background .16s, width .16s;
}
.drawer-links a:hover{ color: var(--text); background: var(--panel-2); }
.drawer-links a:hover::before{ background: var(--red-lit); width: 9px; }

/* ---------- 티스토리 기본 댓글 영역 ---------- */

.comments .tt-box-total,
.comments .tt_txt_g,
.comments .tt_num_g{ color: var(--muted); }
.comments .tt_num_g{ color: var(--red-lit); }
.comments .tt_desc,
.comments .tt-link-user{ color: var(--text); }
.comments .tt_date{ color: var(--dim); }



/* ---------- 고정글 (공지사항) ---------- */

.pinned{
  position: relative;
  display: flex;
  gap: 20px;
  margin: 0 0 26px;
  padding: 20px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--red);
  border-radius: var(--r);
  background: var(--panel);
  transition: border-color .2s, background .2s;
}
.pinned:hover{ background: #14171A; border-color: #33383D; border-left-color: var(--red); }

.pinned-art{
  flex: none;
  width: 150px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #0D0F11;
}
.pinned-art img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  filter: saturate(.9) contrast(1.04);
  transition: filter .25s, transform .35s ease;
}
.pinned:hover .pinned-art img{ filter: saturate(1) contrast(1.04); transform: scale(1.03); }

.pinned-text{ flex: 1; min-width: 0; }

.pinned-title{
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.015em;
}
.pinned-title a:hover{ color: var(--red-lit); }

.pinned-desc{
  margin: 0;
  color: var(--muted);
  font-size: .875rem;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pinned-date{
  margin: 12px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .1em;
}

/* 고정글만 보이게 하기
   <body id="[##_body_id_##]" class="pinned-only"> 로 켭니다.
   홈에서 일반 글 목록과 "목록" 머리말이 숨겨집니다. */
body.pinned-only#tt-body-index .rows,
body.pinned-only#tt-body-index .list-head,
body.pinned-only#tt-body-index .list-rule,
body.pinned-only#tt-body-index .paging{ display: none !important; }

@media (max-width: 680px){
  .pinned{ gap: 14px; padding: 16px; }
  .pinned-art{ width: 96px; }
  .pinned-title{ font-size: 1rem; }
}


/* ---------- 갤러리형 목록 ----------
   사진을 원본 비율 그대로, 빈틈 없이 쌓습니다.
   어떤 카테고리를 갤러리로 볼지는 script.js 의
   GALLERY_CATEGORIES 에서 지정합니다. */

.rows.gallery{
  display: block;
  columns: 3;
  column-gap: 14px;
}

/* 머리말은 전체 폭을 차지 */
.rows.gallery > .list-head,
.rows.gallery > .list-rule,
.rows.gallery > .list-empty{
  column-span: all;
}

.rows.gallery .row{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  background: none;
}
.rows.gallery .row:hover{ background: none; }
.rows.gallery .row::before{ display: none; }

/* 사진 — 자르지도, 늘이지도 않음 */
.rows.gallery .thumb-link{
  display: block;
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0D0F11;
  transition: border-color .2s, box-shadow .2s;
}
.rows.gallery .thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: saturate(.96) contrast(1.02);
  transition: filter .25s, transform .4s ease;
}
.rows.gallery .row:hover .thumb-link{
  border-color: #3A4046;
  box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.rows.gallery .row:hover .thumb{
  filter: saturate(1) contrast(1.02);
  transform: scale(1.015);
}

/* 사진이 없는 글은 제목만 조용히 한 줄로
   (script.js 가 .no-img 클래스를 붙여 줍니다) */
.rows.gallery .row.no-img .row-title{
  display: block;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-2);
  border-radius: 5px;
  background: var(--panel);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.5;
}
.rows.gallery .row.no-img:hover .row-title{ border-left-color: var(--red); }
.rows.gallery .row.no-img .row-title a:hover{ color: var(--red-lit); }

/* 제목 · 날짜 · 카테고리는 숨김 (사진만 보여 주기)
   보이게 하려면 아래 블록을 지우세요 */
.rows.gallery .row-title,
.rows.gallery .row-date,
.rows.gallery .row-cat{ display: none; }

@media (max-width: 900px){
  .rows.gallery{ columns: 2; }
}
@media (max-width: 480px){
  .rows.gallery{ columns: 1; column-gap: 0; }
}

/* ---------- 본문 ---------- */

.notice,
.post{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 42px 38px;
  margin: 0 0 20px;
}
.post-head{
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.post-title{
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.02em;
}

.post-body{ font-size: 1.0625rem; color: #CDD2D7; }
.post-body img{ border: 1px solid var(--line); border-radius: var(--r); }
.post-body a{ color: var(--red-lit); border-bottom: 1px solid rgba(255,46,69,.4); }
.post-body a:hover{ border-bottom-color: var(--red-lit); }
.post-body blockquote{
  margin: 28px 0;
  padding: 6px 0 6px 22px;
  border-left: 2px solid var(--red);
  color: var(--muted);
}
.post-body hr{ border:0; border-top:1px solid var(--line); margin: 38px 0; }
.post-body code{
  padding: 2px 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .875em;
  color: var(--red-lit);
}

.tags{ margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }
.tags a{
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
  transition: border-color .16s, color .16s;
}
.tags a:hover{ border-color: var(--red); color: var(--red-lit); }

/* ---------- 댓글 ---------- */

.comments{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 38px 34px;
}
.section-title{
  display:flex; align-items:center; gap:12px;
  margin: 0 0 20px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-title em{ font-style: normal; color: var(--red-lit); }
.section-title::after{ content:""; flex:1; height:1px; background: var(--line); }

.rp-list, .rp-child{ list-style:none; margin:0; padding:0; }
.rp-child{ margin: 14px 0 0 18px; padding-left: 16px; border-left: 1px solid var(--line); }
.rp-item{ padding: 16px 0; border-top: 1px solid var(--line); }
.rp-name{ margin: 0 0 4px; font-size: .875rem; font-weight: 600; }
.rp-date{ margin-left: 10px; color: var(--dim); font-family: var(--mono); font-size: .6875rem; font-weight: 400; }
.rp-desc{ font-size: .9375rem; color: #C5CAD0; }
.rp-tool{ margin: 6px 0 0; font-family: var(--mono); font-size: .6875rem; }
.rp-tool a{ color: var(--dim); margin-right: 12px; }
.rp-tool a:hover{ color: var(--red-lit); }

.rp-form{ margin-top: 24px; }
.rp-form-row{ display: flex; gap: 8px; margin-bottom: 8px; }
.rp-form input,
.rp-form textarea{
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel-2);
  font-family: inherit;
  font-size: .875rem;
  color: var(--text);
  resize: vertical;
}
.rp-form input::placeholder, .rp-form textarea::placeholder{ color: var(--dim); }
.rp-form input:focus, .rp-form textarea:focus{ outline:none; border-color: var(--red); }
.rp-form-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; }
.secret{ color: var(--muted); font-size: .8125rem; }

.btn{
  padding: 9px 22px;
  border: 1px solid var(--red);
  border-radius: var(--r);
  background: transparent;
  color: var(--red-lit);
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .16s, color .16s;
}
.btn:hover{ background: var(--red); color:#fff; }

/* ---------- 페이지 ---------- */

.paging{ display:flex; justify-content:center; gap:6px; margin-top: 44px; }
.paging a{
  min-width: 38px;
  padding: 8px 12px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--muted);
  font-family: var(--mono);
  font-size: .75rem;
  transition: border-color .16s, color .16s;
}
.paging a:hover{ border-color: var(--red); color: var(--red-lit); }
.paging .selected{ background: var(--red); border-color: var(--red); color:#fff; }

/* ---------- 꼬리말 ---------- */

.foot{
  padding: 32px 24px 48px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  color: var(--dim);
  text-transform: uppercase;
}
.foot p{ margin: 0; }
.foot-sub{ margin-top: 6px; }


/* =========================================
   저격수 컨셉 추가 요소
   ========================================= */

/* ---------- 마우스를 따라오는 조준선 ----------
   빼려면 skin.html의 <div class="cross"> 두 줄 삭제 */

.cross-x, .cross-y{
  position: fixed;
  z-index: 97;
  pointer-events: none;
  background: var(--red-lit);
  opacity: 0;
  transition: opacity .3s ease;
}
.cross-x{ left: 0; right: 0; height: 1px; }
.cross-y{ top: 0; bottom: 0; width: 1px; }
body.aiming .cross-x,
body.aiming .cross-y{ opacity: .17; }

/* ---------- 머리말 아래 계기 표시줄 ---------- */

.hud{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  padding: 9px 0 0;
  color: var(--dim);
  font-family: var(--mono);
  font-size: .5625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hud b{
  font-weight: 400;
  color: var(--red-lit);
  margin-left: 6px;
}
.hud span{ padding: 0 14px; }
.hud span + span{ border-left: 1px solid var(--line); }

/* 밀도트 눈금 */
.hud-scale{
  display: block;
  width: 100%;
  max-width: 420px;
  height: 9px;
  margin: 10px auto 0;
  opacity: .5;
}
.hud-scale line{ stroke: var(--line-2); stroke-width: 1; }
.hud-scale .mid{ stroke: var(--red); }

/* ---------- 타 들어간 모서리 ----------
   오른쪽 위 모서리가 타 들어가고 경계에 벌건 선이 남는 표현.
   불꽃은 넣지 않음. */

.burn{
  position: fixed;
  top: 0; right: 0;
  width: 560px;
  height: 430px;
  z-index: 98;
  pointer-events: none;
}
.burn svg{ width: 100%; height: 100%; display: block; overflow: visible; }

/* 경계선이 은은하게 달아올랐다 사그라든다 */
.burn-ember{ animation: ember 3.4s ease-in-out infinite; }
.burn-ember2{ animation-duration: 2.6s; animation-delay: -.8s; }
.burn-ember3{ animation-duration: 4.1s; animation-delay: -1.7s; }

@keyframes ember{
  0%,100%{ opacity: .82; }
  40%{ opacity: 1; }
  74%{ opacity: .66; }
}

/* 주변 열기 */
.burn-heat{ animation: heat 5.2s ease-in-out infinite; }
@keyframes heat{
  0%,100%{ opacity: .85; }
  50%{ opacity: 1.15; }
}

.burn-ash{ opacity: .45; }

/* 실제 불탄 종이 사진(배경 투명 PNG)을 쓰고 싶을 때:
   1) 스킨 편집 → 파일업로드로 올린다
   2) 아래 주석을 풀고 파일 이름을 넣는다
   3) skin.html의 <div class="burn"> 안 <svg>는 지운다

.burn::after{
  content:"";
  position:absolute; inset:0;
  background: url("./images/burn.png") top right / contain no-repeat;
}
*/


/* ---------- 화면 전체에 흩날리는 불티 ----------
   여기저기서 피어올라 식으며 사라진다.
   빼려면 skin.html의 <div class="embers"> 블록 삭제 */

.embers{
  position: fixed;
  inset: 0;
  z-index: 96;
  pointer-events: none;
  overflow: hidden;
}

.embers i{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #FF8A1E;
  box-shadow: 0 0 4px 1px rgba(230,70,10,.85);
  opacity: 0;
  animation-name: spark;
  animation-timing-function: cubic-bezier(.2,.55,.45,1);
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* 피어올라 식는다 — 밝은 주황에서 검붉게 */
@keyframes spark{
  0%{
    transform: translate(0,0) scale(1.15);
    background: #FFB43C;
    box-shadow: 0 0 6px 2px rgba(255,130,25,.95);
    opacity: 0;
  }
  8%{ opacity: 1; }
  34%{
    transform: translate(14px, -60px) scale(1);
    background: #FF7A18;
    opacity: .9;
  }
  66%{
    transform: translate(-10px, -128px) scale(.72);
    background: #D63A0A;
    box-shadow: 0 0 4px 1px rgba(190,45,8,.55);
    opacity: .55;
  }
  100%{
    transform: translate(10px, -210px) scale(.34);
    background: #7A1806;
    box-shadow: 0 0 2px 0 rgba(120,25,5,.15);
    opacity: 0;
  }
}

/* 크기를 섞는다 */
.embers i:nth-child(3n){ width: 3px; height: 3px; }
.embers i:nth-child(4n){ width: 1px; height: 1px; }

/* 잘게 깜빡인다 */
.embers i::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: inherit;
  animation: flick .26s steps(2) infinite;
}
.embers i:nth-child(3n)::after{ animation-duration: .17s; }
.embers i:nth-child(4n)::after{ animation-duration: .33s; }
@keyframes flick{
  0%,100%{ opacity: .25; }
  50%    { opacity: .9; }
}

/* 타는 모서리 근처의 불티는 조금 더 밝게 */
.embers i.hot{
  box-shadow: 0 0 6px 2px rgba(255,140,30,.95);
}

@media (max-width: 900px){
  .embers i:nth-child(2n){ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .embers{ display: none; }
}

/* ===========================================================
   불티 다른 버전
   skin.html 의 <body id="[##_body_id_##]"> 에 클래스를 붙이면 바뀝니다.

     기본            <body id="[##_body_id_##]">
     ② 재            <body id="[##_body_id_##]" class="ember-ash">
     ③ 스파크        <body id="[##_body_id_##]" class="ember-spark">
     ④ 모닥불        <body id="[##_body_id_##]" class="ember-fire">
     ⑤ 없음          <body id="[##_body_id_##]" class="ember-off">
   =========================================================== */

/* ② 재 — 잿빛으로 천천히 흩날리며 내려앉는다 */
body.ember-ash .embers i{
  background: #8A7A6C;
  box-shadow: none;
  opacity: 0;
  animation-name: ashfall;
  animation-timing-function: linear;
}
body.ember-ash .embers i::after{ animation: none; opacity: .4; }
body.ember-ash .embers i.hot{ box-shadow: none; background: #9A8A7A; }

@keyframes ashfall{
  0%   { transform: translate(0,0) scale(1); opacity: 0; }
  10%  { opacity: .55; }
  40%  { transform: translate(-26px, 34vh) scale(.9); opacity: .45; }
  70%  { transform: translate(18px, 62vh) scale(.75); opacity: .3; }
  100% { transform: translate(-10px, 96vh) scale(.6); opacity: 0; }
}

/* ③ 스파크 — 짧고 빠르게 튀었다 사라진다 */
body.ember-spark .embers i{
  width: 2px; height: 2px;
  background: #FFD27A;
  box-shadow: 0 0 5px 1px rgba(255,170,40,.95);
  animation-name: sparkshort;
  animation-timing-function: cubic-bezier(.1,.75,.3,1);
  animation-duration: 2.4s !important;
}
body.ember-spark .embers i:nth-child(2n){ animation-duration: 1.7s !important; }
body.ember-spark .embers i:nth-child(3n){ animation-duration: 3.1s !important; }
body.ember-spark .embers i:nth-child(5n){ animation-duration: 2.1s !important; }
body.ember-spark .embers i::after{ animation-duration: .12s; }

@keyframes sparkshort{
  0%   { transform: translate(0,0) scale(1.4); background:#FFF0C0; opacity: 0; }
  10%  { opacity: 1; }
  55%  { transform: translate(8px, -34px) scale(.9); background:#FF9A28; opacity: .8; }
  100% { transform: translate(-6px, -72px) scale(.3); background:#B02605; opacity: 0; }
}

/* ④ 모닥불 — 화면 아래에서 위로 길게 피어오른다 */
body.ember-fire .embers i{
  top: auto !important;
  bottom: -12px;
  animation-name: firerise;
  animation-timing-function: ease-out;
}
body.ember-fire .embers i.hot{ background: #FFB44A; }

@keyframes firerise{
  0%   { transform: translate(0,0) scale(1.1); background:#FFC24A; opacity: 0; }
  7%   { opacity: 1; }
  35%  { transform: translate(22px, -32vh) scale(.95); background:#FF7A18; opacity: .9; }
  68%  { transform: translate(-16px, -64vh) scale(.72); background:#D63A0A; opacity: .5; }
  100% { transform: translate(12px, -102vh) scale(.34); background:#7A1806; opacity: 0; }
}

/* ⑤ 없음 */
body.ember-off .embers{ display: none; }



/* ===========================================================
   불티 모양
   <body> 에 클래스를 붙입니다. 위의 움직임 버전과 같이 쓸 수 있습니다.

     기본(동그라미)   <body id="[##_body_id_##]">
     ⓐ 궤적          class="shape-streak"
     ⓑ 종이 조각      class="shape-flake"
     ⓒ 파편          class="shape-shard"
     ⓓ 마름모        class="shape-diamond"
     ⓔ 반짝임        class="shape-star"

   같이 쓰는 예: <body id="[##_body_id_##]" class="ember-fire shape-streak">
   =========================================================== */

/* ⓐ 궤적 — 길쭉한 선. 빠르게 지나가는 느낌이 가장 강하다 */
body.shape-streak .embers i,
body.shape-streak .embers i::after{
  border-radius: 1px;
  clip-path: none;
}
body.shape-streak .embers i{
  width: 1.5px !important;
  height: 9px !important;
}
body.shape-streak .embers i:nth-child(3n){ height: 13px !important; }
body.shape-streak .embers i:nth-child(4n){ height: 6px !important; width: 1px !important; }

/* ⓑ 종이 조각 — 타다 떨어져 나온 불규칙한 조각 */
body.shape-flake .embers i,
body.shape-flake .embers i::after{
  border-radius: 0;
  clip-path: polygon(22% 0%, 78% 12%, 100% 58%, 62% 100%, 12% 82%, 0% 34%);
}
body.shape-flake .embers i{
  width: 5px !important;
  height: 4px !important;
}
body.shape-flake .embers i:nth-child(3n){ width: 7px !important; height: 6px !important; }
body.shape-flake .embers i:nth-child(4n){ width: 3px !important; height: 3px !important; }
body.shape-flake .embers i:nth-child(5n){
  clip-path: polygon(0% 18%, 58% 0%, 100% 40%, 84% 92%, 28% 100%);
}

/* ⓒ 파편 — 뾰족한 삼각 조각 */
body.shape-shard .embers i,
body.shape-shard .embers i::after{
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
body.shape-shard .embers i{
  width: 5px !important;
  height: 6px !important;
}
body.shape-shard .embers i:nth-child(3n){ width: 7px !important; height: 9px !important; }
body.shape-shard .embers i:nth-child(4n){ width: 3px !important; height: 4px !important; }
body.shape-shard .embers i:nth-child(2n){
  clip-path: polygon(50% 100%, 100% 0%, 0% 0%);
}

/* ⓓ 마름모 — 각지고 정돈된 느낌 */
body.shape-diamond .embers i,
body.shape-diamond .embers i::after{
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
body.shape-diamond .embers i{
  width: 5px !important;
  height: 5px !important;
}
body.shape-diamond .embers i:nth-child(3n){ width: 7px !important; height: 7px !important; }
body.shape-diamond .embers i:nth-child(4n){ width: 3px !important; height: 3px !important; }

/* ⓔ 반짝임 — 네 갈래로 빛이 뻗는 모양 */
body.shape-star .embers i,
body.shape-star .embers i::after{
  border-radius: 0;
  clip-path: polygon(
    50% 0%, 58% 42%, 100% 50%, 58% 58%,
    50% 100%, 42% 58%, 0% 50%, 42% 42%
  );
}
body.shape-star .embers i{
  width: 8px !important;
  height: 8px !important;
}
body.shape-star .embers i:nth-child(3n){ width: 11px !important; height: 11px !important; }
body.shape-star .embers i:nth-child(4n){ width: 6px !important; height: 6px !important; }


/* ---------- 종이 결 ---------- */

.paper{
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background:
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    radial-gradient(140% 100% at 12% 0%, rgba(255,255,255,.02), transparent 55%);
}

@media (max-width: 900px){
  .burn{ width: 340px; height: 270px; }
}
@media (max-width: 680px){
  .burn{ display: none; }
  .cross-x, .cross-y{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .burn-ember, .burn-heat, .scope-scan{ animation: none !important; }
}

/* ---------- 반응형 ---------- */

@media (max-width: 1000px){
  .mgr-body{ max-height: 260px; }
}

@media (max-width: 1100px){
  .cols{ grid-template-columns: 1fr; gap: 30px; }
  .col-spacer{ display: none; }
  .side{ position: static; flex-direction: row; flex-wrap: wrap; }
  .side .box{ flex: 1; min-width: 220px; }
}

@media (max-width: 900px){
  .drawer-btn{ top: auto; bottom: 22px; left: 18px; transform: none; }
}

@media (max-width: 680px){
  .head{ padding: 38px 18px 0; }
  .blog-title{ font-size: 1.25rem; letter-spacing: .16em; }
  .topnav a{ padding: 5px 12px; font-size: .6875rem; }
  .wrap{ padding: 26px 18px 72px; }

  .home{ grid-template-columns: 1fr; gap: 14px; margin-bottom: 38px; }
  .shot-art{ aspect-ratio: 4 / 3; }

  .mgr{ right: 12px; left: 12px; top: auto; bottom: 12px; width: auto; }
  .mgr-body{ min-height: 140px; max-height: 220px; }
  .mgr-open{ left: auto; right: 14px; top: auto; bottom: 14px; }

  .row{ flex-wrap: wrap; gap: 4px 10px; padding-left: 12px; }
  .row-title{ flex-basis: 100%; white-space: normal; }

  .notice, .post, .comments{ padding: 28px 20px; }
  .post-title{ font-size: 1.375rem; }
  .rp-form-row{ flex-direction: column; }
}

@media (hover: none){
  body, a, button, input, textarea, label{ cursor: auto; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  .grain{ opacity: .04; }
}