@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;900&display=swap');



:root{--pink:#EB4587;--ink:#14040A;--paper:#f5f5f5;--line:rgba(20,4,10,.24);--font-en:"Mercator","Helvetica Neue",Arial,sans-serif;--font-ko:"Gothic A1",sans-serif}

*{box-sizing:border-box}

html{background:var(--paper);scroll-behavior:smooth}

body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-en),var(--font-ko);min-height:100vh;overflow-x:hidden}

button,a{color:inherit;font:inherit}

button{cursor:pointer}

[hidden]{display:none!important}

.grain{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}

.topbar{height:64px;border-bottom:1px solid var(--ink);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;background:var(--paper);z-index:20}

.wordmark{text-decoration:none;font-size:22px;font-weight:900;letter-spacing:-.08em}.wordmark span{font-size:9px;vertical-align:top;margin-left:3px;letter-spacing:0}

.top-meta{display:flex;gap:32px;font-size:9px;letter-spacing:.12em}

.back-button{border:1px solid var(--ink);background:transparent;padding:8px 12px;font-size:10px;letter-spacing:.1em}.back-button:hover{background:var(--ink);color:var(--paper)}

.home-view,.listing-view,.post-view{max-width:1600px;margin:0 auto;padding:0 28px}

.hero-top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:30px}.eyebrow{font-size:10px;letter-spacing:.13em;margin:0;text-transform:uppercase}.hero-note{font-family:var(--font-ko);font-size:11px;line-height:1.8;text-align:right;margin:0}

.hero-title-wrap{position:relative;border-bottom:1px solid var(--ink);padding:50px 0 38px}

.hero-title{font-size:clamp(50px,9vw,150px);line-height:.78;letter-spacing:-.095em;font-weight:900;margin:0;text-transform:uppercase;max-width:1200px}

.hero-title em{font-style:normal;color:var(--pink)}.pink-dot{color:var(--pink)}

.hero-stamp{position:absolute;right:2%;bottom:32px;width:116px;height:116px;border:1px solid var(--pink);border-radius:50%;color:var(--pink);display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(12deg);font-size:8px;gap:8px;text-align:center}.hero-stamp span:first-child{font-family:var(--font-ko);font-size:27px;font-weight:900}

.intro-row{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 0 52px}.intro-copy{font-family:var(--font-ko);font-size:14px;line-height:1.9;margin:0}.intro-aside{font-size:9px;line-height:1.9;letter-spacing:.08em;text-align:right;margin:0}

.board-heading,.trace-label{display:flex;justify-content:space-between;border-top:1px solid var(--ink);padding:10px 0;font-size:9px;letter-spacing:.12em}

.category-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-left:1px solid var(--ink);border-top:1px solid var(--ink)}

.category-tile{min-height:225px;border:0;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:transparent;text-align:left;padding:16px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;transition:background .25s,color .25s}

.tile-index,.tile-foot{font-size:9px;letter-spacing:.09em;position:relative;z-index:1}.tile-name{font-size:clamp(24px,3.5vw,52px);font-weight:900;letter-spacing:-.075em;line-height:.95;position:relative;z-index:1;overflow-wrap:anywhere}.tile-mark{font-size:18px;float:right;letter-spacing:0}.tile-foot{font-size:8px}

.tile-text{background:var(--ink);color:var(--paper)}.tile-magazines{background:var(--pink);color:var(--ink)}.tile-column{background:var(--paper);color:var(--ink)}.tile-shoot{background:var(--ink);color:var(--pink)}

.category-tile::after{content:"";position:absolute;width:190px;height:190px;border:1px solid currentColor;border-radius:50%;right:-100px;top:28px;opacity:.18;transition:transform .4s}.category-tile:hover{background:var(--pink);color:var(--ink)}.category-tile:hover::after{transform:scale(1.7) translate(-15px,15px)}

.trace-section{padding-top:50px}.trace-art{height:180px;position:relative;overflow:hidden;background:var(--ink);color:var(--paper);margin-bottom:0}

.trace-line{position:absolute;left:8%;right:8%;top:50%;height:1px;background:var(--pink);transform:rotate(-4deg)}

.stone{position:absolute;top:calc(50% - 21px);width:42px;height:42px;border-radius:50%;border:1px solid var(--paper);background:var(--ink);color:var(--paper);font-size:10px;z-index:1;transition:transform .25s,background .25s}

.stone:hover{background:var(--pink);color:var(--ink);transform:scale(1.2)}.stone-a{left:10%}.stone-b{left:34%;top:calc(50% - 48px)}.stone-c{left:61%;top:calc(50% + 8px)}.stone-d{right:10%;top:calc(50% - 20px);background:var(--pink);color:var(--ink);border-color:var(--pink)}

.trace-caption{position:absolute;font-size:8px;letter-spacing:.12em;color:var(--pink)}.cap-a{left:8%;top:25%}.cap-b{left:30%;bottom:20%}.cap-c{left:57%;top:23%}.cap-d{right:7%;bottom:20%}

.site-footer{display:flex;justify-content:space-between;padding:18px 0 24px;font-size:8px;letter-spacing:.12em}

.listing-view{padding-top:45px;min-height:80vh}.listing-head{border-bottom:1px solid var(--ink);padding-bottom:26px;position:relative}.listing-head h1{font-size:clamp(54px,10vw,130px);letter-spacing:-.09em;line-height:.9;margin:25px 0 14px;font-weight:900}.listing-head h1 span{color:var(--pink)}.listing-description{font-family:var(--font-ko);font-size:12px;margin:0;line-height:1.8}

.listing-controls{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid var(--ink);font-size:9px;letter-spacing:.1em}.listing-controls button{background:none;border:0;text-decoration:underline;text-underline-offset:3px;font-size:9px}

.post-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}.post-card{display:grid;grid-template-columns:56px 1fr 20px;gap:12px;padding:21px 0;border-bottom:1px solid var(--line);text-align:left;border-top:0;border-left:0;border-right:0;background:none;align-items:start}.post-card:hover .card-title{color:var(--pink)}.card-no{font-size:10px;color:var(--pink);padding-top:5px}.card-title{font-size:clamp(20px,3vw,36px);font-weight:800;letter-spacing:-.06em;line-height:1.05;margin:0 0 8px;transition:color .2s}.card-excerpt{font-family:var(--font-ko);font-size:11px;line-height:1.8;margin:0;max-width:560px}.card-meta{font-size:8px;letter-spacing:.1em;margin-top:12px;opacity:.7}.card-arrow{font-size:18px}

.post-view{max-width:1100px;padding-top:35px;padding-bottom:80px;min-height:80vh}.post-kicker{display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);padding-bottom:12px;font-size:9px;letter-spacing:.12em}.post-content{max-width:760px;margin:0 auto;padding:60px 0 0;font-family:var(--font-ko);font-size:14px;line-height:2.5;overflow-wrap:anywhere}.post-content h1,.post-content h2,.post-content h3{font-family:var(--font-en),var(--font-ko);line-height:1.05;letter-spacing:-.06em;margin:1.8em 0 .8em}.post-content h1{font-size:clamp(42px,7vw,88px);font-weight:900}.post-content h2{font-size:clamp(28px,4vw,48px)}.post-content h3{font-size:22px}.post-content p{margin:0 0 1.5em}.post-content blockquote{border-left:4px solid var(--pink);margin:2em 0;padding:2px 0 2px 20px;font-size:18px}.post-content img{display:block;width:100%;height:auto;margin:32px 0}.post-content a{color:var(--pink);text-underline-offset:3px}.post-content ul,.post-content ol{padding-left:1.5em}.post-content hr{border:0;border-top:1px solid var(--ink);margin:3em 0}.post-content table{border-collapse:collapse;width:100%;font-size:12px}.post-content td,.post-content th{border:1px solid var(--line);padding:8px;text-align:left}

.post-end{border-top:1px solid var(--ink);padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.1em}.post-end button{background:var(--pink);border:1px solid var(--ink);padding:12px 16px;font-size:9px;letter-spacing:.08em}

.notice{position:fixed;bottom:18px;left:50%;transform:translate(-50%,15px);background:var(--pink);color:var(--ink);padding:10px 14px;font-size:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:30}.notice.show{opacity:1;transform:translate(-50%,0)}

.gesture-hint{position:fixed;bottom:12px;right:18px;font-size:8px;letter-spacing:.1em;opacity:.45;pointer-events:none}

@media(min-width:1200px){.hero-title{font-size:clamp(150px,12vw,205px)}}

@media(max-width:760px){.topbar{height:54px;padding:0 15px}.top-meta{gap:10px;font-size:7px}.top-meta span:first-child{display:none}.home-view,.listing-view,.post-view{padding-left:15px;padding-right:15px}.hero-top{padding-top:20px}.hero-note{font-size:9px}.hero-title-wrap{padding:50px 0 30px}.hero-title{font-size:clamp(49px,13.3vw,95px)}.hero-stamp{width:70px;height:70px;right:0;bottom:12px;font-size:6px;gap:3px}.hero-stamp span:first-child{font-size:17px}.intro-row{padding:16px 0 34px;gap:18px}.intro-copy{font-size:11px}.intro-aside{font-size:7px}.category-board{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tile{min-height:165px;padding:12px}.tile-name{font-size:clamp(26px,7vw,42px)}.tile-foot{font-size:7px}.trace-section{padding-top:34px}.trace-art{height:145px}.trace-caption{font-size:6px}.site-footer{font-size:6px;gap:10px;flex-wrap:wrap}.post-list{grid-template-columns:1fr}.post-card{grid-template-columns:40px 1fr 16px}.listing-view{padding-top:28px}.post-view{padding-top:22px}.post-content {
  padding: 40px 0 55px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}.post-kicker{font-size:7px}.gesture-hint{right:10px;bottom:7px;font-size:6px}.board-heading,.trace-label{font-size:7px}}


/* POST PAGE: monochrome typography and previous/next navigation */
.post-content blockquote {
  border-left: 1px solid var(--ink);
  color: var(--ink);
}

.post-content a {
  color: var(--ink);
}

.post-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding: 20px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font: inherit;
}

.post-nav-link:last-child {
  align-items: flex-end;
  text-align: right;
}

.post-nav-label {
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .55;
}

.post-nav-title {
  font-family: var(--font-en), var(--font-ko);
  font-size: clamp(16px, 2.5vw, 26px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.post-nav-link:hover .post-nav-title {
  opacity: .55;
}

@media (max-width: 600px) {
  .post-navigation { gap: 16px; }
  .post-nav-title { font-size: 15px; }
}

/* ===== Requested post page adjustments ===== */

/* 인용문 세로줄 제거 */
.post-content blockquote {
  border-left: 0 !important;
  margin: 1.5em 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: inherit !important;
}

/* 기존 문구와 하단 버튼 영역 숨기기 */
.post-end {
  display: none !important;
}

/* 본문 바로 아래 이전 글 / 다음 글 */
.post-navigation {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  margin: 0 auto;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  max-width: 760px;
}

.post-nav-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-en), var(--font-ko);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.post-nav-link:last-child {
  align-items: flex-end;
  text-align: right;
}

.post-nav-label {
  font-size: 9px;
  letter-spacing: .12em;
  opacity: .55;
}

.post-nav-link span:last-child {
  font-family: var(--font-en), var(--font-ko);
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.post-nav-link:hover span:last-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.post-nav-link:disabled {
  opacity: .35;
  cursor: default;
}

.post-nav-link:disabled:hover span:last-child {
  text-decoration: none;
}

/* "A collection of texts." 같은 카테고리 설명 숨기기 */
.listing-description {
  display: none !important;
}

@media (max-width: 600px) {
  .post-navigation {
    gap: 16px;
    padding: 18px 0;
  }

  .post-nav-link span:last-child {
    font-size: 15px;
  }
}

/* ===== 게시물 사진 / 본문 좌우 분할 ===== */

.post-view.has-post-images {
  max-width: 1600px;
}

.post-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 28px;
}

/* 왼쪽 사진 영역 */
.post-image-gallery {
  height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  padding-right: 12px;
}

.post-gallery-item {
  margin: 0 0 28px;
}

.post-gallery-item img {
  display: block;
  width: 50%;
  height: auto;
  margin: 0 auto;
}

.post-gallery-item figcaption {
  margin-top: 8px;
  font-family: var(--font-ko);
  font-size: 10px;
  line-height: 2.2;
  opacity: 0.65;
  text-align: center;
}

/* 오른쪽 본문 영역 */
.post-split-layout .post-content {
  width: 100%;
  max-width: none;
  height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  margin: 0;
  padding: 0 12px 30px 0;
}

/* 분할 레이아웃에서는 본문 이미지 숨김
   사진은 왼쪽 영역에서 표시 */
.post-split-layout .post-content img {
  display: none;
}

/* 이전 글 / 다음 글 */
.post-view.has-post-images .post-navigation {
  margin-top: 30px;
}

/* 모바일에서는 사진 위 / 본문 아래 */
@media (max-width: 760px) {
  .post-view.has-post-images {
    padding-left: 15px;
    padding-right: 15px;
  }

  .post-split-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
  }

  .post-image-gallery {
    height: auto;
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 0;
  }

  .post-gallery-item {
    margin-bottom: 18px;
  }

  .post-split-layout .post-content {
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0 0 30px;
  }
}
/* 본문 글자 크기와 자간 */
.post-content {
  font-size: 12.5px !important;
  letter-spacing: 0.04em !important;
}

/* 홈 제목 - PC */
.hero-title {
  font-size: clamp(40px, 8vw, 150px) !important;
}

/* 홈 제목 - 모바일 */
@media (max-width: 760px) {
  .post-content {
    font-size: 12.5px !important;
    letter-spacing: 0.04em !important;
  }

  .hero-title {
    font-size: clamp(42px, 10.5vw, 78px) !important;
  }
}

.theory-note {
  font-size: 12px;
  line-height: 2.5;
  margin-left: 36px;
  margin-right: 36px;
}


/* HOME HERO TITLE — EDITORIAL HANDWRITING */

.hero-title-wrap {
  padding: 28px 0 32px !important;
}

.hero-title {
  font-family: 'Gothic A1', sans-serif !important;
  font-size: clamp(17px, 2vw, 25px) !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: -0.045em !important;
  text-transform: none !important;
  max-width: 900px;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.hero-title em {
  font-style: normal;
  color: inherit;
}

@media (max-width: 760px) {
  .hero-title-wrap {
    padding: 24px 0 26px !important;
  }

  .hero-title {
    font-size: 17px !important;
    line-height: 1.85 !important;
  }
}

.handwriting-title {
  display: block;
  width: min(100%, 700px);
  height: auto;
  object-fit: contain;
}

/* 손글씨 헤더 로고 */
.wordmark img {
  display: block;
  width: 100px;
  height: auto;
}

/* 손글씨 카테고리 오른쪽 정렬 */
.tile-name {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

.tile-name img {
  display: block;
  width: 100%;
  padding-right: 40px;
  max-width: 200px;
  height: auto;
}

/* 카테고리 페이지 손글씨 제목 */
.listing-handwriting-title img {
  display: block;
  width: 240px;
  max-width: 100%;
  height: auto;
}

/* 카테고리 내부 제목 손글씨는 검은색으로 */
.listing-handwriting-title img {
  filter: brightness(0);
}

/* 손글씨 게시물 제목 */
.handwriting-post-title {
  display: block;
  width: auto;
  max-width: min(100%, 800px);
  max-height: 72px;
  object-fit: contain;
  object-position: left center;
}

/* 제목과 미리보기의 레이아웃 */
.card-info {
  display: block;
  min-width: 0;
  width: 100%;
}

.card-title {
  display: block;
  margin-bottom: 8px;
}

.card-excerpt {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: keep-all;
}

/* 게시물 목록 레이아웃 수정 */
#post-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#post-list .post-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#post-list .card-info {
  display: block;
  width: 100%;
  min-width: 0;
}

#post-list .card-title,
#post-list .card-excerpt {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#post-list .card-excerpt {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 손글씨 게시물 제목 크기 */
#post-list .handwriting-post-title {
display: block;
width: 420px !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain;
object-position: left center;
}

/* 이전·다음 글 손글씨 제목 */
.post-nav-title img.handwriting-post-title {
  display: block;
  width: auto;
  max-width: 320px;
  height: 60px;
  max-height: none;
  object-fit: contain;
  object-position: inherit;
}

.post-nav-link:last-child img.handwriting-post-title {
  margin-left: auto;
}

@media (max-width: 760px) {
  .post-nav-title img.handwriting-post-title {
    max-width: 180px;
    height: 42px;
  }
}

/* 게시물 목록: 제목과 미리보기 사이 간격 (기존 <br> 대신) */
#post-list .card-title {
  margin-bottom: 20px;
}

/* 사진이 있는 글: 사진·본문 영역을 끝까지 스크롤하면
   페이지 전체가 내려가서 이전 글 / 다음 글이 보이도록 */
.post-image-gallery,
.post-split-layout .post-content {
  overscroll-behavior: auto;
}

/* 사진이 있는 글도 다른 글과 같은 좌우 여백 사용
   - 위쪽 선(카테고리·날짜 줄): 다른 글과 같은 폭
   - 사진 + 본문 영역: 다른 글의 본문 폭(760px)과 같은 위치 */
.post-view.has-post-images {
  max-width: 1100px;
}

.post-split-layout {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 761px) {
  /* PC: 칸이 좁아진 만큼 사진은 칸 너비에 맞춤 */
  .post-gallery-item img {
    width: 100%;
  }

  /* PC: 사진 맨 윗선과 본문 첫 글자 윗선 맞추기
     (본문 줄 간격 2.5 때문에 글자 위에 생기는 여백만큼 사진을 내림) */
  .post-image-gallery {
    padding-top: 9px;
  }
}

/* ===== 글 화면에서는 헤더 가운데 문구(이름·시계) 숨김 ===== */
body[data-view="post"] .top-meta {
  visibility: hidden;
}

/* ===== 홈 문구: 손글씨 이미지 → 고딕 텍스트 (줄 배치는 손글씨와 동일) ===== */
.hero-poem {
  max-width: none !important;
  margin: 0;
  color: var(--ink);
}

.hero-poem .poem-line {
  display: block;
  white-space: nowrap;
}

/* 마지막 줄은 살짝 들여쓰기 */
.hero-poem .poem-indent {
  padding-left: 1em;
}

/* 계단 배치: 두 번째 줄이 첫 번째 줄이 끝나는 위치에서 시작 */
.hero-poem .poem-stair {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  column-gap: .3em;
}

.hero-poem .poem-stair > span {
  white-space: nowrap;
}

.hero-poem .poem-stair > span:last-child {
  grid-column: 2;
  grid-row: 2;
}

/* 모바일: 화면이 좁아 계단 배치 대신 비율로 들여쓰기 */
@media (max-width: 760px) {
  .hero-poem .poem-line,
  .hero-poem .poem-stair > span {
    white-space: normal;
  }

  .hero-poem .poem-stair {
    display: block;
  }

  .hero-poem .poem-stair > span {
    display: block;
  }

  .hero-poem .poem-stair:nth-of-type(2) > span:last-child {
    padding-left: 45%;
  }

  .hero-poem .poem-stair:nth-of-type(3) > span:last-child {
    padding-left: 30%;
  }
}

/* ===== 카테고리 손글씨 색: PNG 모양대로 색을 칠해서 호버 시 색 변경 ===== */
.tile-word {
  position: relative;
  display: block;
  width: 100%;
  max-width: 200px;
}

/* 원래 PNG는 크기만 잡아 주고 화면에서는 숨김 */
.tile-word img {
  opacity: 0;
}

/* PNG 글씨 모양으로 색을 칠한 층
   (오른쪽 40px은 기존 이미지의 오른쪽 여백과 동일) */
.tile-word::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 40px;
  background-color: var(--word-color);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: background-color .25s;
}

/* 기본 색 (PNG 원래 색과 동일) */
.tile-text      { --word-color: #f5f5f5; }
.tile-magazines { --word-color: #000000; }
.tile-column    { --word-color: #000000; }
.tile-shoot     { --word-color: #e4007f; }

/* 호버 색 */
.tile-text:hover      { --word-color: var(--pink); }
.tile-magazines:hover { --word-color: #ffffff; }
.tile-column:hover    { --word-color: #ffffff; }
.tile-shoot:hover     { --word-color: #000000; }

/* 글씨 모양 */
.tile-text .tile-word::after {
  -webkit-mask-image: url("images/text.png");
  mask-image: url("images/text.png");
}

.tile-magazines .tile-word::after {
  -webkit-mask-image: url("images/magazines.png");
  mask-image: url("images/magazines.png");
}

.tile-column .tile-word::after {
  -webkit-mask-image: url("images/column.png");
  mask-image: url("images/column.png");
}

.tile-shoot .tile-word::after {
  -webkit-mask-image: url("images/shoot.png");
  mask-image: url("images/shoot.png");
}

/* text 칸은 호버해도 배경을 검정으로 유지
   (배경이 분홍이 되면 분홍 글씨가 안 보이므로) */
.tile-text:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ===== 홈 문구 크기: 기존보다 5px 작게 ===== */
.hero-title.hero-poem {
  font-size: clamp(12px, calc(2vw - 5px), 20px) !important;
  /* 손글씨 이미지가 있던 때와 같은 높이를 차지하게 해서
     아래 카테고리·하단 문구 위치를 예전과 같게 유지 */
  min-height: calc(min(100vw - 56px, 700px) * 0.475);
}

@media (max-width: 760px) {
  .hero-title.hero-poem {
    font-size: 12px !important;
    min-height: calc(min(100vw - 30px, 700px) * 0.475);
  }
}

/* ===== GUEST 입구 버튼 (홈, 카테고리 위 오른쪽) ===== */
.hero-title-wrap {
  position: relative;
}

.guest-button {
  position: absolute;
  right: 0;
  bottom: 24px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-ko), "Apple SD Gothic Neo", "Noto Sans CJK KR", sans-serif;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s, color .25s, border-color .25s;
}

.guest-button:hover {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--ink);
}

@media (max-width: 760px) {
  .guest-button {
    width: 48px;
    height: 48px;
    bottom: 16px;
    font-size: 20px;
  }
}

/* ===== GUEST 2차 수정 ===== */

/* 手 버튼: 더 크고, 살짝 돌아간 손으로 그린 듯한 원 */
.guest-button {
  width: 96px;
  height: 96px;
  font-size: 40px;
  border-radius: 52% 48% 50% 47% / 48% 53% 47% 52%;
  transform: rotate(-14deg);
  transition: background .25s, color .25s, border-color .25s, transform .35s;
}

.guest-button:hover {
  transform: rotate(-4deg);
}

@media (max-width: 760px) {
  .guest-button {
    width: 64px;
    height: 64px;
    font-size: 27px;
  }
}

/* 돌아간 원이 카테고리 오른쪽 끝을 넘지 않도록 */
.guest-button {
  right: 10px;
  bottom: 28px;
}

@media (max-width: 760px) {
  .guest-button {
    right: 7px;
    bottom: 18px;
  }
}

/* ===== 홈 문구 크기: 10px 더 작게 (PC 20px → 10px) ===== */
.hero-title.hero-poem {
  font-size: 10px !important;
}

@media (max-width: 760px) {
  .hero-title.hero-poem {
    font-size: 10px !important;
  }
}

/* ===== 홈 문구 크기: 1.5배 (10px → 15px) ===== */
.hero-title.hero-poem {
  font-size: 15px !important;
}

@media (max-width: 760px) {
  .hero-title.hero-poem {
    font-size: 15px !important;
  }
}

/* ===== 홈 문구 행간 1.5배 (1.9 → 2.85) ===== */
.hero-title.hero-poem {
  line-height: 2.85 !important;
}

/* ===== 방명록 버튼: 글자 '방명록' ===== */
.guest-button {
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .guest-button {
    font-size: 13px;
  }
}

/* ===== 사진만 있는 글 (아카이브): 사진을 가운데에 크게 한 줄로 ===== */
.post-view.is-photo-only .post-split-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1000px;
}

.post-view.is-photo-only .post-image-gallery {
  height: auto;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.post-view.is-photo-only .post-gallery-item {
  margin: 0 0 40px;
}

.post-view.is-photo-only .post-gallery-item img {
  width: 100%;
}

.post-view.is-photo-only .post-split-layout .post-content {
  display: none;
}

@media (max-width: 760px) {
  .post-view.is-photo-only .post-gallery-item {
    margin-bottom: 16px;
  }
}

/* ===== 홈 제목 모션: 글이 입체 고리를 따라 시계 방향으로 천천히 회전 (poem-ring.js) ===== */
/* 원래 문구는 자리(높이)만 유지하고 화면에서는 숨김 — 다시 보이게 하려면 이 규칙을 지우세요 */
.hero-title.hero-poem {
  opacity: 0;
}

.poem-ring {
  position: absolute;
  left: 0;                   /* 고리 왼쪽 끝 = 제목 왼쪽 끝 */
  top: 47%;                  /* 고리 중심 (세로) */
  width: min(64%, 640px);    /* 고리 지름 (넓은 화면에서도 640px까지만) */
  height: 0;
  pointer-events: none;      /* 아래 버튼·카테고리 클릭 방해하지 않음 */
  z-index: 1;
}

/* 고리 한 겹 (기본 고리 + 어두운 칸 위에 덧씌우는 고리) */
.poem-ring-layer {
  position: absolute;
  inset: 0;
  perspective: 2200px;
  color: var(--ink);
}

.poem-ring-spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  font-family: var(--font-en), var(--font-ko);
  font-size: 18px;           /* 글자 크기 */
  font-weight: 700;          /* 글자 두께 */
  white-space: nowrap;
  /* 기울기: rotateZ = 고리를 오른쪽 위로 기울임, rotateX = 위에서 내려다보는 각도 */
  animation: poem-ring-spin 48s linear infinite;   /* 48초에 한 바퀴 (숫자가 클수록 느림) */
}

.poem-ring-spin span {
  position: absolute;
  left: 50%;
  top: 50%;
  letter-spacing: -0.03em;   /* 자간 (음수일수록 좁음) */
  transform-origin: 0 0;     /* 회전 기준점 = 고리 중심 (뒤쪽에서 단어가 밀리지 않게) */
}

@keyframes poem-ring-spin {
  from { transform: rotateZ(-20deg) rotateX(-22deg) rotateY(0deg); }
  to   { transform: rotateZ(-20deg) rotateX(-22deg) rotateY(-360deg); }
}

/* 모바일: 고리가 작아서 글자를 작게, 고리는 조금 크게 */
@media (max-width: 760px) {
  .poem-ring {
    left: 2%;
    width: 90%;
  }

  .poem-ring-spin {
    font-size: 13px;
  }
}

/* 방명록 버튼은 고리 위에 */
.guest-button {
  z-index: 2;
}

/* 움직임 줄이기 설정을 켠 사람에게는 멈춘 고리로 */
@media (prefers-reduced-motion: reduce) {
  .poem-ring-spin {
    animation: none;
    transform: rotateZ(-20deg) rotateX(-22deg);
  }
}

/* ===== 마우스 커서: 흰 원 + 색 반전 (pisache.kr과 같은 효과, cursor.js) ===== */
.cursor {
  display: none;
}

@media (min-width: 994px) and (hover: hover) {
  * {
    cursor: none !important;     /* 기본 화살표 숨김 */
  }

  .cursor {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000000;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    background-color: #fff;
    mix-blend-mode: difference;  /* 아래 색을 반전시켜 보여 줌 */
    opacity: 0;
    transition: transform .5s ease-out;
  }

  /* 링크·버튼 위: 1.5배로 커짐 */
  .cursor.cursor-hover {
    transform: translate(-50%, -50%) scale(1.5);
    transition: transform .3s ease-out;
  }
}


/* ===== 방명록 버튼: 검은 원 → 마우스를 올리면 분홍 + 'guestbook' ===== */
.guest-button {
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--ink);
  transform: none;
  font-family: var(--font-en), var(--font-ko);
  font-size: 11px;
  letter-spacing: .02em;
  transition: background .25s;
}

.guest-button .guest-button-label {
  opacity: 0;
  transition: opacity .25s;
}

.guest-button:hover {
  background: var(--pink);
  color: var(--ink);
  transform: none;
}

.guest-button:hover .guest-button-label {
  opacity: 1;
}

@media (max-width: 760px) {
  .guest-button {
    width: 48px;
    height: 48px;
    font-size: 9px;
  }
}

/* ===== 네모 테두리 버튼 → 테두리 없는 볼드, 마우스를 올리면 분홍 글씨 ===== */
.back-button {
  border: 0;
  padding: 8px 0;
  font-weight: 700;
  background: transparent;
  transition: color .2s;
}

.back-button:hover {
  background: transparent;
  color: var(--pink);
}

/* ===== 사이트 전체: 화면 위쪽 헤더 줄 숨김 =====
   글 화면 (카테고리 · 날짜 · 제목), 목록 화면 (ARCHIVE / 01, 00 ITEMS)
   — 내용은 script.js가 계속 채우지만 화면에는 보이지 않음 */
.post-kicker,
.listing-head .eyebrow,
#listing-count {
  display: none !important;
}

/* 목록 화면: SHUFFLE ORDER 줄의 위아래 선 없애고 버튼만 오른쪽에 */
.listing-controls {
  border-top: 0;
  justify-content: flex-end;
}

/* ===== 사이트 전체 글자 버튼: 밑줄·테두리 없이 볼드, 마우스를 올리면 분홍 ===== */
.listing-controls button {
  text-decoration: none;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .06em;
  transition: color .2s;
}

.listing-controls button:hover {
  color: var(--pink);
}

/* ===== 사이트 전체: 구분선 모두 없애기 ===== */
.topbar,
.hero-title-wrap,
.listing-head,
.listing-controls,
.post-card,
.post-kicker,
.post-end {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.post-navigation,
.post-nav-link {
  border: 0 !important;
}

.category-board,
.category-tile {
  border: 0 !important;
}

/* ===== 번호 · SHUFFLE ORDER 지우기 ===== */
/* 목록 화면의 글 번호 (01, 02 …) — 번호 자리만큼 비어 있던 칸도 없앰 */
.card-no {
  display: none !important;
}

#post-list .post-card {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* 홈 화면 카테고리 칸의 번호 (01 ~ 04) — 자리는 남겨서 손글씨 위치는 그대로 */
.tile-index {
  visibility: hidden !important;
}

/* 목록 화면의 SHUFFLE ORDER 줄 */
.listing-controls {
  display: none !important;
}

/* ===== UP TO TOP 버튼 (to-top.js) — BACK 버튼과 같은 모양, 같은 세로선 ===== */
.top-button {
  position: fixed;
  right: 28px;                 /* BACK 버튼과 같은 오른쪽 여백 */
  bottom: 24px;
  z-index: 30;
  border: 0;
  background: transparent;
  padding: 8px 0;
  font-size: 10px;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;        /* 숨어 있을 때는 눌리지 않게 */
  transition: opacity .3s, color .2s;
}

.top-button.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.top-button:hover {
  color: var(--pink);
}

@media (max-width: 760px) {
  .top-button {
    right: 15px;               /* 모바일 BACK 버튼과 같은 오른쪽 여백 */
    bottom: 16px;
  }
}

/* ===== 카테고리 목록: 2열 (글 글 / 글 글) ===== */
#post-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  align-items: start;
}

/* 휴대폰처럼 좁은 화면에서는 1열 */
@media (max-width: 760px) {
  #post-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 방명록 버튼: 또잉또잉 (말랑하게 튀는 크기 변화) ===== */
@keyframes boing {
  0%, 52%, 100% { transform: scale(1, 1); }
  58% { transform: scale(1.22, 0.84); }
  65% { transform: scale(0.88, 1.14); }
  72% { transform: scale(1.1, 0.93); }
  80% { transform: scale(0.96, 1.04); }
  88% { transform: scale(1.03, 0.98); }
  94% { transform: scale(1, 1); }
}

.guest-button {
  animation: boing 1.9s ease-in-out infinite;
}

/* 마우스를 올리면 멈추고 분홍 + guestbook 글씨 */
.guest-button:hover {
  animation: none;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .guest-button { animation: none; }
}

/* ===== 글 폰트 =====
   본문: 영문 Inter Light + 한글 Gothic A1 Light (섞어짜기 — 알파벳은 Inter, 한글은 Gothic A1)
   글 안 제목 (#, ##, ### 줄): 원래 쓰던 폰트 그대로, 크기만 줄임 */
.post-content {
  font-family: "Inter", "Gothic A1", sans-serif;
  font-weight: 300;
}

.post-content h1,
.post-content h2,
.post-content h3 {
  line-height: 1.2;
  margin: 2.2em 0 .9em;
}

.post-content h1 { font-size: 30px; }   /* # 제목 (원래 최대 88px) */
.post-content h2 { font-size: 24px; }   /* ## 제목 (원래 최대 48px) */
.post-content h3 { font-size: 18px; }   /* ### 제목 (원래 22px) */

/* **굵게**: 본문 폰트의 굵은 글씨 */
.post-content strong {
  font-weight: 700;
}

@media (max-width: 760px) {
  .post-content h1 { font-size: 24px; }
  .post-content h2 { font-size: 20px; }
  .post-content h3 { font-size: 16px; }
}

/* ===== 글 본문: 행간 1.5배, 본문 시작점 올리기 ===== */
.post-content {
  line-height: 2;           /* 행간 (원래 2.5) */
  padding-top: 12px;           /* 본문 시작 위 여백 (원래 60px) */
}

/* 사진 글 오른쪽 본문 칸도 같은 행간 */
.post-split-layout .post-content {
  padding-top: 0;
}

/* ===== *** (볼드+이탤릭) 풀기 → 일반 본문 글씨로 ===== */
.post-content em strong,
.post-content strong em {
  font-style: normal;
  font-weight: inherit;
}
.post-content em:has(> strong:only-child) {
  font-style: normal;
}