/* =========================================
   SANBAE 2.0 — BLACK & WHITE TYPOGRAPHIC ARCHIVE
   style.css
   ========================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #ffffff;
}

body {
  font-family: "Gowun Batang", "Song Myung", serif;
  color: #111111;
  line-height: 1.65;
  word-break: keep-all;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.layout {
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
  position: relative;
}

.main-area {
  width: min(1180px, calc(100vw - 80px));
  margin: 0 auto;
  padding: 92px 0 170px 0;
  min-height: 170vh;
  position: relative;
}

/* ---------- NAVIGATION ---------- */

.nav {
  position: fixed;
  left: 64px;
  top: 92px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 18px;
  line-height: 1.4;
  color: #111111;
}

.nav a {
  width: fit-content;
  border-bottom: 1px solid transparent;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease;
}

.nav a:hover {
  border-bottom-color: #111111;
  transform: translateX(4px);
}

/* ---------- HEADER ---------- */

.header {
  margin-left: 140px;
  margin-bottom: 44px;
}

.header h1 {
  margin: 0;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #111111;
}

.subtitle {
  margin-top: 16px;
  font-family: "Nanum Pen Script", cursive;
  font-size: clamp(24px, 3vw, 38px);
  color: #111111;
}

/* ---------- ARCHIVE POSTER CONTENT ---------- */

.content {
  position: relative;
  min-height: 1240px;
  padding-top: 24px;
}

.word {
  position: absolute;
  display: inline-block;
  color: #111111;
  line-height: 1.28;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.word:hover {
  opacity: 0.55;
  z-index: 5;
}

.word::before {
  content: attr(data-no);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  margin-right: 8px;
  border-radius: 50%;
  background: #111111;
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;
  vertical-align: 0.12em;
}

/* ---------- DESKTOP POSITIONS ---------- */

.w1 {
  left: 80px;
  top: 20px;
  max-width: 410px;
  font-family: "Gowun Batang", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.w2 {
  right: 92px;
  top: 70px;
  max-width: 460px;
  font-family: "Song Myung", serif;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.06em;
}

.w3 {
  left: 330px;
  top: 238px;
  max-width: 310px;
  font-family: "Nanum Pen Script", cursive;
  font-size: 44px;
  transform: rotate(-2deg);
}

.w4 {
  right: 40px;
  top: 300px;
  max-width: 430px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.05em;
}

.w5 {
  left: 70px;
  top: 430px;
  max-width: 350px;
  font-family: "Song Myung", serif;
  font-size: 30px;
  transform: rotate(1.5deg);
}

.w6 {
  left: 520px;
  top: 500px;
  max-width: 380px;
  font-family: "Gowun Batang", serif;
  font-size: 25px;
  font-weight: 700;
}

.w7 {
  right: 110px;
  top: 610px;
  max-width: 370px;
  font-family: "Nanum Pen Script", cursive;
  font-size: 46px;
  line-height: 1.05;
  transform: rotate(2deg);
}

.w8 {
  left: 180px;
  top: 675px;
  max-width: 420px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.w9 {
  right: 40px;
  top: 780px;
  max-width: 420px;
  font-family: "Song Myung", serif;
  font-size: 31px;
  letter-spacing: -0.05em;
}

.w10 {
  left: 70px;
  top: 900px;
  max-width: 440px;
  font-family: "Gowun Batang", serif;
  font-size: 27px;
  font-weight: 700;
}

.w11 {
  left: 520px;
  top: 980px;
  max-width: 430px;
  font-family: "Nanum Pen Script", cursive;
  font-size: 42px;
  transform: rotate(-1.2deg);
}

.w12 {
  left: 130px;
  top: 1110px;
  max-width: 540px;
  font-family: "Song Myung", serif;
  font-size: 38px;
  letter-spacing: -0.06em;
}

/* ---------- DECORATIONS ---------- */

.vertical-title {
  position: absolute;
  left: -90px;
  top: 210px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Georgia, "Song Myung", serif;
  font-size: 56px;
  line-height: 1;
  color: #111111;
  letter-spacing: -0.02em;
}

.symbol {
  position: absolute;
  color: #111111;
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.s1 {
  left: 640px;
  top: 190px;
  font-size: 42px;
}

.s2 {
  left: 690px;
  top: 400px;
  font-size: 58px;
  transform: rotate(12deg);
}

.s3 {
  right: 150px;
  top: 510px;
  font-size: 38px;
}

.s4 {
  left: 430px;
  top: 820px;
  font-size: 48px;
  transform: rotate(-20deg);
}

.s5 {
  right: 320px;
  top: 1080px;
  font-size: 40px;
}

.scale {
  position: absolute;
  right: 20px;
  top: 1040px;
  width: 260px;
  height: 420px;
  border-left: 2px solid #111111;
  border-bottom: 2px solid #111111;
  opacity: 1;
}

.scale span {
  position: absolute;
  left: -42px;
  font-family: Georgia, serif;
  font-size: 14px;
  color: #111111;
}

.scale span:nth-child(1) { top: 0; }
.scale span:nth-child(2) { top: 70px; }
.scale span:nth-child(3) { top: 140px; }
.scale span:nth-child(4) { top: 210px; }
.scale span:nth-child(5) { top: 280px; }
.scale span:nth-child(6) { top: 350px; }

.scale::before {
  content: "가  ㄴ  ㄷ  ㅁ";
  position: absolute;
  left: 22px;
  top: 20px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 58px;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #111111;
  line-height: 1.5;
  white-space: pre-line;
}

.scale::after {
  content: "●   ◐   ▲   ◆\A 3  7  0  ㄴ\A 5  6  ㅇ  ㅅ\A 2  3  ㅁ  ㄱ\A 7  4  ㅇ  ㄴ";
  white-space: pre;
  position: absolute;
  left: 24px;
  top: 160px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.7;
  color: #111111;
}

.content::before {
  content: "ㄱㄴㄷ\Aㄹㅁㅂ\Aㅅㅇㅈ";
  white-space: pre;
  position: absolute;
  left: 760px;
  top: 118px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  color: #111111;
  opacity: 0.9;
}

.content::after {
  content: "・・・・・・・・・・・・・・・・・・・・・・・・";
  position: absolute;
  left: 330px;
  top: 1165px;
  font-family: Georgia, serif;
  font-size: 26px;
  color: #111111;
  letter-spacing: 0.12em;
}

.bottom-left {
  position: fixed;
  left: 64px;
  bottom: 48px;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: 13px;
  color: black;
}

/* ---------- ARTICLE PAGE SUPPORT ---------- */

.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 90px 0 160px 0;
}

.article h1 {
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.2;
  margin: 0 0 56px 0;
  color: #111111;
}

.article p {
  font-family: "Gowun Batang", serif;
  font-size: 18px;
  line-height: 1.95;
  margin: 0 0 2em 0;
  color: #111111;
}

.article-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  font-family: "Gowun Batang", serif;
  font-size: 16px;
}

.article-nav a:hover {
  text-decoration: underline;
}

/* ==================================================
   TABLET
   흩어진 포스터 구도를 유지하되 폭을 줄인 배치
   ================================================== */

@media (max-width: 900px) {
  .nav {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    padding: 34px 20px 0 20px;
    font-size: 18px;
  }

  .main-area {
    width: min(720px, calc(100vw - 42px));
    padding: 42px 0 120px 0;
    min-height: 1660px;
  }

  .header {
    margin-left: 0;
    margin-bottom: 42px;
    text-align: center;
  }

  .header h1 {
    font-size: clamp(34px, 9vw, 54px);
    line-height: 1.18;
  }

  .subtitle {
    font-size: clamp(25px, 7vw, 36px);
    line-height: 1.25;
  }

  .content {
    position: relative;
    min-height: 1560px;
    padding-top: 10px;
    display: block;
  }

  .word {
    position: absolute;
    display: inline-block;
  }

  .vertical-title,
  .scale {
    display: none;
  }

  .content::before {
    left: auto;
    right: 12px;
    top: 245px;
    font-size: 15px;
    opacity: 0.48;
  }

  .content::after {
    left: 0;
    top: 1510px;
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .w1 {
    left: 0;
    top: 20px;
    max-width: 360px;
    font-size: 25px;
  }

  .w2 {
    right: 0;
    top: 150px;
    max-width: 360px;
    font-size: 30px;
  }

  .w3 {
    left: 42px;
    top: 300px;
    max-width: 300px;
    font-size: 40px;
  }

  .w4 {
    right: 8px;
    top: 445px;
    max-width: 340px;
    font-size: 27px;
  }

  .w5 {
    left: 0;
    top: 595px;
    max-width: 350px;
    font-size: 28px;
  }

  .w6 {
    right: 0;
    left: auto;
    top: 735px;
    max-width: 330px;
    font-size: 24px;
  }

  .w7 {
    left: 22px;
    right: auto;
    top: 875px;
    max-width: 340px;
    font-size: 42px;
  }

  .w8 {
    right: 0;
    left: auto;
    top: 1010px;
    max-width: 350px;
    font-size: 25px;
  }

  .w9 {
    left: 0;
    right: auto;
    top: 1148px;
    max-width: 350px;
    font-size: 28px;
  }

  .w10 {
    right: 0;
    left: auto;
    top: 1270px;
    max-width: 350px;
    font-size: 24px;
  }

  .w11 {
    left: 0;
    top: 1390px;
    max-width: 350px;
    font-size: 38px;
  }

  .w12 {
    right: 0;
    left: auto;
    top: 1515px;
    max-width: 360px;
    font-size: 34px;
  }

  .s1 {
    display: block;
    left: 48%;
    top: 265px;
    font-size: 34px;
    opacity: 0.58;
  }

  .s2 {
    display: block;
    left: 52%;
    top: 565px;
    font-size: 44px;
    opacity: 0.5;
  }

  .s3 {
    display: block;
    right: 18%;
    top: 815px;
    font-size: 34px;
    opacity: 0.5;
  }

  .s4 {
    display: block;
    left: 44%;
    top: 1190px;
    font-size: 40px;
    opacity: 0.42;
  }

  .s5 {
    display: block;
    right: 20%;
    top: 1420px;
    font-size: 34px;
    opacity: 0.48;
  }

  .bottom-left {
    position: static;
    padding: 40px 24px 50px 24px;
  }

  .article {
    width: min(720px, calc(100vw - 48px));
    padding-top: 60px;
  }
}

/* ==================================================
   MOBILE
   데스크톱 느낌 유지 + 겹침 방지
   ================================================== */

@media (max-width: 560px) {
  .nav {
    gap: 22px;
    font-size: 17px;
    padding-top: 30px;
  }

  .main-area {
    width: calc(100vw - 34px);
    padding-top: 38px;
    padding-bottom: 100px;
    min-height: 1960px;
  }

  .header {
    margin-bottom: 54px;
  }

  .header h1 {
    font-size: 36px;
  }

  .subtitle {
    font-size: 28px;
  }

  .content {
    min-height: 1820px;
  }

  .word::before {
    width: 24px;
    height: 24px;
    font-size: 14px;
    margin-right: 8px;
  }

  .w1 {
    left: 0;
    top: 20px;
    max-width: 92%;
    font-size: 22px;
  }

  .w2 {
    right: 0;
    top: 170px;
    max-width: 86%;
    font-size: 26px;
  }

  .w3 {
    left: 20px;
    top: 340px;
    max-width: 82%;
    font-size: 37px;
  }

  .w4 {
    right: 0;
    top: 505px;
    max-width: 92%;
    font-size: 23px;
  }

  .w5 {
    left: 0;
    top: 685px;
    max-width: 88%;
    font-size: 25px;
  }

  .w6 {
    right: 0;
    top: 845px;
    max-width: 88%;
    font-size: 21px;
  }

  .w7 {
    left: 18px;
    top: 1010px;
    max-width: 84%;
    font-size: 37px;
  }

  .w8 {
    right: 0;
    top: 1175px;
    max-width: 92%;
    font-size: 22px;
  }

  .w9 {
    left: 0;
    top: 1340px;
    max-width: 90%;
    font-size: 25px;
  }

  .w10 {
    right: 0;
    top: 1495px;
    max-width: 88%;
    font-size: 21px;
  }

  .w11 {
    left: 0;
    top: 1645px;
    max-width: 86%;
    font-size: 34px;
  }

  .w12 {
    right: 0;
    top: 1790px;
    max-width: 92%;
    font-size: 29px;
  }

  .content::before {
    right: 0;
    top: 282px;
    font-size: 13px;
    opacity: 0.3;
  }

  .content::after {
    top: 1905px;
    left: 0;
    font-size: 15px;
    opacity: 0.6;
  }

  .symbol {
  }

  .s1 {
    left: 47%;
    top: 295px;
    font-size: 30px;
  }

  .s2 {
    left: 50%;
    top: 645px;
    font-size: 38px;
  }

  .s3 {
    right: 16%;
    top: 945px;
    font-size: 30px;
  }

  .s4 {
    left: 40%;
    top: 1420px;
    font-size: 34px;
  }

  .s5 {
    right: 18%;
    top: 1710px;
    font-size: 30px;
  }

  .article h1 {
    font-size: 34px;
  }

  .article p {
    font-size: 17px;
    line-height: 1.9;
  }

  .article-nav {
    font-size: 15px;
  }
}

.header {
  margin-left: 0;
  margin-bottom: 44px;
  text-align: right;
}

/* ==================================================
   FORCE DESKTOP LAYOUT ON MOBILE
   모바일에서도 데스크톱 포스터 레이아웃 그대로 보기
   ================================================== */

@media (max-width: 900px) {
  html,
  body {
    min-width: 1180px;
    overflow-x: auto;
  }

  .layout {
    min-width: 1180px;
  }

  .main-area {
    width: 1180px;
    margin: 0 auto;
    padding: 92px 0 170px 0;
    min-height: 170vh;
    position: relative;
  }

  .nav {
    position: fixed;
    left: 64px;
    top: 92px;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 0;
    font-size: 18px;
  }

  .header {
    margin-left: 140px;
    margin-bottom: 44px;
    text-align: left;
  }

  .header h1 {
    font-size: 68px;
    line-height: 1.15;
  }

  .subtitle {
    font-size: 38px;
  }

  .content {
    position: relative;
    min-height: 1240px;
    padding-top: 24px;
    display: block;
  }

  .word {
    position: absolute;
    display: inline-block;
  }

  .word::before {
    width: 28px;
    height: 28px;
    margin-right: 8px;
    font-size: 16px;
  }

  .vertical-title {
    display: block;
    position: absolute;
    left: -110px;
    top: 210px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 56px;
  }

  .scale {
    display: block;
  }

  .content::before,
  .content::after {
    display: block;
  }

  .symbol {
    display: block;
  }

  .w1 {
    left: 80px;
    top: 20px;
    max-width: 410px;
    font-size: 27px;
  }

  .w2 {
    right: 92px;
    top: 70px;
    max-width: 460px;
    font-size: 34px;
  }

  .w3 {
    left: 330px;
    top: 238px;
    max-width: 310px;
    font-size: 44px;
    transform: rotate(-2deg);
  }

  .w4 {
    right: 40px;
    top: 300px;
    max-width: 430px;
    font-size: 30px;
  }

  .w5 {
    left: 70px;
    top: 430px;
    max-width: 350px;
    font-size: 30px;
    transform: rotate(1.5deg);
  }

  .w6 {
    left: 520px;
    right: auto;
    top: 500px;
    max-width: 380px;
    font-size: 25px;
  }

  .w7 {
    right: 110px;
    left: auto;
    top: 610px;
    max-width: 370px;
    font-size: 46px;
    transform: rotate(2deg);
  }

  .w8 {
    left: 180px;
    right: auto;
    top: 675px;
    max-width: 420px;
    font-size: 28px;
  }

  .w9 {
    right: 40px;
    left: auto;
    top: 780px;
    max-width: 420px;
    font-size: 31px;
  }

  .w10 {
    left: 70px;
    right: auto;
    top: 900px;
    max-width: 440px;
    font-size: 27px;
  }

  .w11 {
    left: 520px;
    top: 980px;
    max-width: 430px;
    font-size: 42px;
    transform: rotate(-1.2deg);
  }

  .w12 {
    left: 130px;
    right: auto;
    top: 1110px;
    max-width: 540px;
    font-size: 38px;
  }

  .s1 {
    left: 640px;
    top: 190px;
    font-size: 42px;
    opacity: 1;
  }

  .s2 {
    left: 690px;
    top: 400px;
    font-size: 58px;
    opacity: 1;
    transform: rotate(12deg);
  }

  .s3 {
    right: 150px;
    top: 510px;
    font-size: 38px;
    opacity: 1;
  }

  .s4 {
    left: 430px;
    top: 820px;
    font-size: 48px;
    opacity: 1;
    transform: rotate(-20deg);
  }

  .s5 {
    right: 320px;
    top: 1080px;
    font-size: 40px;
    opacity: 1;
  }
}

.bottom-left {
  position: static !important;
  width: 100%;
  margin: 70px 0 0 0;
  padding: 0 0 42px 0;
  text-align: center;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: 13px;
  color: black !important;
}

@media (max-width: 900px) {
  .bottom-left {
    position: static !important;
    width: 100%;
    margin: 60px 0 0 0;
    padding: 0 0 40px 0;
    text-align: center;
    color: black; !important;
  }
}

@media (max-width: 560px) {
  .bottom-left {
    position: static !important;
    width: 100%;
    margin: 50px 0 0 0;
    padding: 0 0 34px 0;
    text-align: center;
    font-size: 12px;
    color: #111111 !important;
  }
}

/* =========================
   RED BOAT NAVIGATION
   데스크톱: 빨간 배 위 네비게이션
   모바일: 배 없이 상단 네비게이션
   스크롤 따라오지 않음
   ========================= */

.boat-nav {
  position: relative;
  width: 250px;
  height: 150px;
  margin: 34px 0 20px 38px;
  z-index: 10;
  transform: translateY(24px);
}

.boat-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.boat-links {
  position: absolute;
  left: 23px;
  top: 58px;
  width: 205px;
  display: flex;
  justify-content: center;
  gap: 15px;
  align-items: center;
  transform: rotate(-1.5deg);
}

.boat-links a {
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 15px;
  font-weight: 700;
  color: #111111;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}

.boat-links a:hover {
  text-decoration: underline;
}

/* 모바일에서는 배 이미지는 숨기고,
   네비게이션만 제목 위에 삐뚜름하게 배치 */
@media (max-width: 560px) {
  .boat-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 86px !important;
    margin: 22px 0 34px 0 !important;
    z-index: 10 !important;
    background: transparent !important;
    pointer-events: none;
  }

  .boat-img {
    display: none !important;
  }

  .boat-links {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 86px !important;
    display: block !important;
    transform: none !important;
    pointer-events: auto;
  }

  .boat-links a {
    position: absolute !important;
    font-family: "Song Myung", "Gowun Batang", serif;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .boat-links a:nth-child(1) {
    left: 22px;
    top: 12px;
    transform: rotate(-5deg);
  }

  .boat-links a:nth-child(2) {
    left: 116px;
    top: 32px;
    transform: rotate(3deg);
  }

  .boat-links a:nth-child(3) {
    right: 22px;
    top: 14px;
    transform: rotate(-2deg);
  }
}

/* ==================================================
   FOOTPRINTS MOBILE OPTIMIZED POSTER LAYOUT
   데스크톱 느낌 유지 + 모바일 화면 안에서 보기 좋게 재배치
   반드시 style.css 맨 아래에 붙이기
   ================================================== */

@media (max-width: 900px) {
  html,
  body {
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  .layout {
    min-width: 0 !important;
    width: 100% !important;
  }

  .main-area {
    width: min(720px, calc(100vw - 42px)) !important;
    margin: 0 auto !important;
    padding: 44px 0 120px 0 !important;
    min-height: auto !important;
  }

  /* 빨간 배 네비게이션: 모바일에서는 배 숨김, 글자만 위에 배치 */
  .boat-nav {
    position: relative !important;
    width: 100% !important;
    height: 92px !important;
    margin: 22px 0 34px 0 !important;
    transform: none !important;
    z-index: 20 !important;
    pointer-events: none;
  }

  .boat-img {
    display: none !important;
  }

  .boat-links {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 92px !important;
    display: block !important;
    transform: none !important;
    pointer-events: auto;
  }

  .boat-links a {
    position: absolute !important;
    font-family: "Song Myung", "Gowun Batang", serif !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: #111111 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    letter-spacing: -0.04em;
  }

  .boat-links a:nth-child(1) {
    left: 0;
    top: 14px;
    transform: rotate(-5deg);
  }

  .boat-links a:nth-child(2) {
    left: 122px;
    top: 36px;
    transform: rotate(3deg);
  }

  .boat-links a:nth-child(3) {
    right: 0;
    top: 16px;
    transform: rotate(-2deg);
  }

  /* 제목 영역 */
  .header {
    margin-left: 0 !important;
    margin-bottom: 54px !important;
    text-align: right !important;
  }

  .header h1 {
    font-size: clamp(40px, 11vw, 68px) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.065em !important;
  }

  .subtitle {
    margin-top: 14px !important;
    font-size: clamp(25px, 7vw, 38px) !important;
    line-height: 1.2 !important;
  }

  /* 포스터 본문 */
  .content {
    position: relative !important;
    display: block !important;
    min-height: 1720px !important;
    padding-top: 8px !important;
  }

  .word {
    position: absolute !important;
    display: inline-block !important;
    line-height: 1.2 !important;
  }

  .word::before {
    width: 24px !important;
    height: 24px !important;
    margin-right: 7px !important;
    font-size: 14px !important;
  }

  .vertical-title {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 1648px !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 30px !important;
    line-height: 1 !important;
  }

  .scale {
    display: none !important;
  }

  .content::before {
    display: block !important;
    left: auto !important;
    right: 0 !important;
    top: 250px !important;
    font-size: 14px !important;
    opacity: 0.32 !important;
  }

  .content::after {
    display: block !important;
    left: 0 !important;
    top: 1695px !important;
    font-size: 17px !important;
    letter-spacing: 0.06em !important;
    opacity: 0.65 !important;
  }

  .symbol {
    display: block !important;
  }

  .w1 {
    left: 0 !important;
    top: 10px !important;
    max-width: 88% !important;
    font-size: 25px !important;
  }

  .w2 {
    right: 0 !important;
    left: auto !important;
    top: 138px !important;
    max-width: 84% !important;
    font-size: 31px !important;
  }

  .w3 {
    left: 32px !important;
    top: 292px !important;
    max-width: 78% !important;
    font-size: 42px !important;
    transform: rotate(-2deg) !important;
  }

  .w4 {
    right: 0 !important;
    left: auto !important;
    top: 444px !important;
    max-width: 90% !important;
    font-size: 27px !important;
  }

  .w5 {
    left: 0 !important;
    top: 608px !important;
    max-width: 84% !important;
    font-size: 30px !important;
    transform: rotate(1.5deg) !important;
  }

  .w6 {
    right: 0 !important;
    left: auto !important;
    top: 748px !important;
    max-width: 84% !important;
    font-size: 24px !important;
  }

  .w7 {
    left: 24px !important;
    right: auto !important;
    top: 902px !important;
    max-width: 82% !important;
    font-size: 42px !important;
    transform: rotate(2deg) !important;
  }

  .w8 {
    right: 0 !important;
    left: auto !important;
    top: 1055px !important;
    max-width: 90% !important;
    font-size: 25px !important;
  }

  .w9 {
    left: 0 !important;
    right: auto !important;
    top: 1212px !important;
    max-width: 86% !important;
    font-size: 29px !important;
  }

  .w10 {
    right: 0 !important;
    left: auto !important;
    top: 1352px !important;
    max-width: 84% !important;
    font-size: 24px !important;
  }

  .w11 {
    left: 0 !important;
    top: 1488px !important;
    max-width: 84% !important;
    font-size: 38px !important;
    transform: rotate(-1.2deg) !important;
  }

  .w12 {
    right: 0 !important;
    left: auto !important;
    top: 1628px !important;
    max-width: 88% !important;
    font-size: 32px !important;
  }

  .s1 {
    left: 46% !important;
    top: 250px !important;
    font-size: 32px !important;
  }

  .s2 {
    left: 52% !important;
    top: 560px !important;
    font-size: 42px !important;
    transform: rotate(12deg) !important;
  }

  .s3 {
    right: 18% !important;
    top: 835px !important;
    font-size: 30px !important;
  }

  .s4 {
    left: 38% !important;
    top: 1286px !important;
    font-size: 34px !important;
    transform: rotate(-20deg) !important;
  }

  .s5 {
    right: 18% !important;
    top: 1560px !important;
    font-size: 30px !important;
  }

  .bottom-left {
    position: static !important;
    width: 100% !important;
    margin: 54px 0 0 0 !important;
    padding: 0 0 40px 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #111111 !important;
  }
}

@media (max-width: 560px) {
  .main-area {
    width: calc(100vw - 32px) !important;
    padding-top: 34px !important;
  }

  .boat-nav {
    height: 84px !important;
    margin-bottom: 32px !important;
  }

  .boat-links a {
    font-size: 20px !important;
  }

  .boat-links a:nth-child(1) {
    left: 4px;
    top: 12px;
  }

  .boat-links a:nth-child(2) {
    left: 112px;
    top: 32px;
  }

  .boat-links a:nth-child(3) {
    right: 2px;
    top: 14px;
  }

  .header {
    margin-bottom: 48px !important;
  }

  .header h1 {
    font-size: 42px !important;
  }

  .subtitle {
    font-size: 28px !important;
  }

  .content {
    min-height: 1780px !important;
  }

  .w1 { top: 10px !important; font-size: 23px !important; }
  .w2 { top: 150px !important; font-size: 28px !important; }
  .w3 { top: 314px !important; font-size: 39px !important; }
  .w4 { top: 482px !important; font-size: 24px !important; }
  .w5 { top: 662px !important; font-size: 27px !important; }
  .w6 { top: 822px !important; font-size: 22px !important; }
  .w7 { top: 990px !important; font-size: 39px !important; }
  .w8 { top: 1158px !important; font-size: 23px !important; }
  .w9 { top: 1330px !important; font-size: 27px !important; }
  .w10 { top: 1482px !important; font-size: 22px !important; }
  .w11 { top: 1628px !important; font-size: 35px !important; }
  .w12 { top: 1772px !important; font-size: 30px !important; }

  .vertical-title {
    top: 1925px !important;
    font-size: 26px !important;
  }

  .content::after {
    top: 1948px !important;
    font-size: 14px !important;
  }

  .s1 { top: 278px !important; }
  .s2 { top: 615px !important; }
  .s3 { top: 930px !important; }
  .s4 { top: 1428px !important; }
  .s5 { top: 1700px !important; }
}

/* =========================
   BOAT NAV HOVER EFFECT
   기존 translateY 유지 버전
   ========================= */

.boat-img {
  transition:
    transform 0.25s ease,
    filter 0.25s ease,
    opacity 0.25s ease;
}

.boat-nav:hover .boat-img {
  animation: boatWiggle 0.55s ease-in-out;
  filter:
    brightness(1.12)
    contrast(1.08)
    drop-shadow(0 0 8px rgba(190, 20, 20, 0.38));
}

@keyframes boatWiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  20% {
    transform: rotate(-2deg) translateY(-2px);
  }

  45% {
    transform: rotate(2deg) translateY(1px);
  }

  70% {
    transform: rotate(-1deg) translateY(-1px);
  }

  100% {
    transform: rotate(0deg) translateY(0);
  }
}

/* ==================================================
   MAIN → FOOTPRINTS WHITE TRANSITION
   메인에서 Footprints를 눌렀을 때:
   흰 화면 + 배 슝 + 페이지 페이드인
   ================================================== */

.footprints-transition {
  display: none;
}

.from-main .layout,
.from-main .bottom-left {
  animation: footprintsPageFadeIn 1.4s ease 1.8s both;
}

.from-main .footprints-transition {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #ffffff;
  pointer-events: none;
  animation: transitionWhiteOut 2.7s ease forwards;
}

.from-main .transition-boat {
  position: absolute;
  left: -260px;
  top: 42%;
  width: 230px;
  height: auto;
  transform: translateY(-50%) rotate(-4deg);
  animation: transitionBoatSwim 1.45s cubic-bezier(0.68, 0.02, 0.22, 1) 0.15s forwards;
  filter:
    brightness(1.08)
    contrast(1.05)
    drop-shadow(0 0 8px rgba(190, 20, 20, 0.22));
}

.no-transition .footprints-transition {
  display: none !important;
}

@keyframes transitionBoatSwim {
  0% {
    left: -260px;
    transform: translateY(-50%) rotate(-5deg);
  }

  20% {
    transform: translateY(-58%) rotate(4deg);
  }

  55% {
    transform: translateY(-44%) rotate(-2deg);
  }

  100% {
    left: calc(100vw + 280px);
    transform: translateY(-50%) rotate(3deg);
  }
}

@keyframes transitionWhiteOut {
  0% {
    opacity: 1;
  }

  68% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes footprintsPageFadeIn {
  0% {
    opacity: 0;
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.essay-silent-mark {
  position: relative;
  width: min(820px, 100%);
  height: 120px;
  margin: 0 auto 58px auto;
  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;
  overflow: hidden;
}

.mark-line {
  position: absolute;
  left: 0;
  top: 58px;
  width: 100%;
  height: 2px;
  background: #111111;
}

.mark-circle {
  position: absolute;
  left: 12%;
  top: 28px;
  width: 58px;
  height: 58px;
  border: 2px solid #111111;
  border-radius: 50%;
  background: #ffffff;
}

.mark-dot {
  position: absolute;
  right: 13%;
  top: 50px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #111111;
}

.mark-wave {
  position: absolute;
  left: 34%;
  top: 36px;
  width: 260px;
  height: 48px;
  border-bottom: 2px solid #111111;
  transform: rotate(-2deg);
}

.mark-wave::before,
.mark-wave::after {
  content: "";
  position: absolute;
  bottom: -2px;
  width: 80px;
  height: 48px;
  border: 2px solid #111111;
  border-top: 0;
  border-left: 0;
  border-radius: 0 0 80px 0;
}

.mark-wave::before {
  left: 18px;
}

.mark-wave::after {
  left: 118px;
}
@media (max-width: 900px) {
  .essay-silent-mark {
    height: 104px;
    margin-bottom: 46px;
  }

  .mark-line {
    top: 51px;
  }

  .mark-circle {
    left: 8%;
    top: 26px;
    width: 50px;
    height: 50px;
  }

  .mark-wave {
    left: 32%;
    top: 31px;
    width: 210px;
  }

  .mark-dot {
    right: 9%;
    top: 43px;
  }
}

@media (max-width: 560px) {
  .essay-silent-mark {
    height: 88px;
    margin-bottom: 38px;
  }

  .mark-line {
    top: 43px;
  }

  .mark-circle {
    left: 4%;
    top: 24px;
    width: 40px;
    height: 40px;
  }

  .mark-wave {
    left: 28%;
    top: 26px;
    width: 150px;
    height: 38px;
  }

  .mark-wave::before,
  .mark-wave::after {
    width: 52px;
    height: 34px;
  }

  .mark-wave::before {
    left: 8px;
  }

  .mark-wave::after {
    left: 72px;
  }

  .mark-dot {
    right: 5%;
    top: 36px;
    width: 14px;
    height: 14px;
  }
}

.eye-chart-mark {
  width: min(820px, 100%);
  margin: 0 auto 58px auto;
  padding: 28px 28px 30px 28px;
  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #111111;
  overflow: hidden;
}

.eye-row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 0.85em;
  font-family: "Hahmlet", "Gowun Batang", sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
}

.eye-row span {
  display: inline-block;
  min-width: 0.8em;
  text-align: center;
}

.eye-row span:nth-child(even) {
  transform: rotate(-3deg);
}

.eye-row span:nth-child(odd) {
  transform: rotate(2deg);
}

.eye-row.r1 {
  font-size: clamp(74px, 10vw, 132px);
}

.eye-row.r2 {
  font-size: clamp(54px, 7vw, 88px);
}

.eye-row.r3 {
  font-size: clamp(40px, 5.2vw, 64px);
}

.eye-row.r4 {
  font-size: clamp(32px, 4.1vw, 50px);
}

.eye-row.r5 {
  font-size: clamp(26px, 3.2vw, 38px);
}

.eye-row.r6 {
  font-size: clamp(22px, 2.7vw, 31px);
}

.eye-row.r7 {
  font-size: clamp(18px, 2.2vw, 25px);
  letter-spacing: 0.02em;
}

.eye-row.r8 {
  font-size: clamp(15px, 1.8vw, 21px);
  letter-spacing: 0.05em;
}

.eye-row.r9 {
  font-size: clamp(12px, 1.4vw, 17px);
  letter-spacing: 0.08em;
}

.eye-divider {
  width: 88%;
  height: 1px;
  margin: 6px 0 5px 0;
  background: #111111;
}

@media (max-width: 900px) {
  .eye-chart-mark {
    margin-bottom: 46px;
    padding: 24px 20px 26px 20px;
    gap: 7px;
  }
}

@media (max-width: 560px) {
  .eye-chart-mark {
    margin-bottom: 38px;
    padding: 22px 12px 24px 12px;
    gap: 6px;
  }

  .eye-row {
    gap: 0.62em;
  }

  .eye-row.r1 {
    font-size: 68px;
  }

  .eye-row.r2 {
    font-size: 48px;
  }

  .eye-row.r3 {
    font-size: 34px;
  }

  .eye-row.r4 {
    font-size: 27px;
  }

  .eye-row.r5 {
    font-size: 22px;
  }

  .eye-row.r6 {
    font-size: 18px;
  }

  .eye-row.r7 {
    font-size: 15px;
  }

  .eye-row.r8 {
    font-size: 13px;
  }

  .eye-row.r9 {
    font-size: 11px;
  }

  .eye-divider {
    width: 94%;
  }
}

/* ==================================================
   FOOTPRINTS SCALE / EYE TEST MOBILE FIX
   풋프린트 하단 시력검사표를 모바일 맨 아래로 보내기
   ================================================== */

@media (max-width: 900px) {
  .footprints-page .content {
    min-height: 2280px !important;
  }

  .footprints-page .scale {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 1810px !important;
    transform: translateX(-50%) !important;
    width: min(300px, 86vw) !important;
    height: 420px !important;
    margin: 0 !important;
    border-left: 2px solid #111111 !important;
    border-bottom: 2px solid #111111 !important;
    opacity: 1 !important;
  }

  .footprints-page .scale span {
    display: block !important;
    position: absolute !important;
    left: -42px !important;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
    color: #111111 !important;
  }

  .footprints-page .scale span:nth-child(1) { top: 0 !important; }
  .footprints-page .scale span:nth-child(2) { top: 70px !important; }
  .footprints-page .scale span:nth-child(3) { top: 140px !important; }
  .footprints-page .scale span:nth-child(4) { top: 210px !important; }
  .footprints-page .scale span:nth-child(5) { top: 280px !important; }
  .footprints-page .scale span:nth-child(6) { top: 350px !important; }

  .footprints-page .scale::before {
    content: "가  ㄴ  ㄷ  ㅁ";
    position: absolute;
    left: 24px;
    top: 22px;
    font-family: "Hahmlet", "Gowun Batang", serif;
    font-size: 48px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #111111;
    line-height: 1.45;
    white-space: pre-line;
  }

  .footprints-page .scale::after {
    content: "●   ◐   ▲   ◆\A 3  7  0  ㄴ\A 5  6  ㅇ  ㅅ\A 2  3  ㅁ  ㄱ\A 7  4  ㅇ  ㄴ";
    white-space: pre;
    position: absolute;
    left: 26px;
    top: 158px;
    font-family: "Hahmlet", "Gowun Batang", serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.72;
    color: #111111;
  }
}

@media (max-width: 560px) {
  .footprints-page .content {
    min-height: 2320px !important;
  }

  .footprints-page .scale {
    top: 1910px !important;
    width: min(270px, 82vw) !important;
    height: 390px !important;
  }

  .footprints-page .scale span {
    left: -36px !important;
    font-size: 12px !important;
  }

  .footprints-page .scale::before {
    left: 20px;
    top: 20px;
    font-size: 40px;
    letter-spacing: 0.12em;
  }

  .footprints-page .scale::after {
    left: 22px;
    top: 145px;
    font-size: 20px;
    line-height: 1.78;
  }
}

@media (max-width: 560px) {
  .footprints-page .vertical-title {
    display: none !important;
  }
}

/* ==================================================
   KAKAOTALK ONLY — SEPARATE ARRIVAL TRANSITION
   카톡에서는 from-main을 쓰지 않고 별도 전환 실행
   ================================================== */

.kakao-arrive .layout,
.kakao-arrive .bottom-left {
  opacity: 0 !important;
  filter: none !important;
  animation: kakaoArrivePage 0.35s ease 1.05s forwards !important;
}

.kakao-arrive .footprints-transition {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: kakaoArriveWhite 1.55s ease forwards !important;
}

.kakao-arrive .transition-boat {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: 175px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;

  transform: translate3d(-95vw, -50%, 0) rotate(-5deg) !important;
  -webkit-transform: translate3d(-95vw, -50%, 0) rotate(-5deg) !important;

  animation: kakaoArriveBoat 1.05s ease-in-out 0.12s forwards !important;
  -webkit-animation: kakaoArriveBoat 1.05s ease-in-out 0.12s forwards !important;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.transition-done .footprints-transition {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.transition-done .layout,
.transition-done .bottom-left {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

@keyframes kakaoArriveBoat {
  0% {
    transform: translate3d(-95vw, -50%, 0) rotate(-5deg);
  }

  30% {
    transform: translate3d(-35vw, -58%, 0) rotate(4deg);
  }

  68% {
    transform: translate3d(25vw, -44%, 0) rotate(-2deg);
  }

  100% {
    transform: translate3d(95vw, -50%, 0) rotate(3deg);
  }
}

@-webkit-keyframes kakaoArriveBoat {
  0% {
    -webkit-transform: translate3d(-95vw, -50%, 0) rotate(-5deg);
  }

  30% {
    -webkit-transform: translate3d(-35vw, -58%, 0) rotate(4deg);
  }

  68% {
    -webkit-transform: translate3d(25vw, -44%, 0) rotate(-2deg);
  }

  100% {
    -webkit-transform: translate3d(95vw, -50%, 0) rotate(3deg);
  }
}

@keyframes kakaoArriveWhite {
  0% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes kakaoArrivePage {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* ==================================================
   KAKAOTALK ONLY — SEPARATE ARRIVAL TRANSITION
   카톡에서는 from-main을 쓰지 않고 별도 전환 실행
   ================================================== */

.kakao-arrive .layout,
.kakao-arrive .bottom-left {
  opacity: 0 !important;
  filter: none !important;
  animation: kakaoArrivePage 0.35s ease 1.05s forwards !important;
}

.kakao-arrive .footprints-transition {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: 1 !important;
  visibility: visible !important;
  animation: kakaoArriveWhite 1.55s ease forwards !important;
}

.kakao-arrive .transition-boat {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: 175px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;

  transform: translate3d(-95vw, -50%, 0) rotate(-5deg) !important;
  -webkit-transform: translate3d(-95vw, -50%, 0) rotate(-5deg) !important;

  animation: kakaoArriveBoat 1.05s ease-in-out 0.12s forwards !important;
  -webkit-animation: kakaoArriveBoat 1.05s ease-in-out 0.12s forwards !important;

  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.transition-done .footprints-transition {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.transition-done .layout,
.transition-done .bottom-left {
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
}

@keyframes kakaoArriveBoat {
  0% {
    transform: translate3d(-95vw, -50%, 0) rotate(-5deg);
  }

  30% {
    transform: translate3d(-35vw, -58%, 0) rotate(4deg);
  }

  68% {
    transform: translate3d(25vw, -44%, 0) rotate(-2deg);
  }

  100% {
    transform: translate3d(95vw, -50%, 0) rotate(3deg);
  }
}

@-webkit-keyframes kakaoArriveBoat {
  0% {
    -webkit-transform: translate3d(-95vw, -50%, 0) rotate(-5deg);
  }

  30% {
    -webkit-transform: translate3d(-35vw, -58%, 0) rotate(4deg);
  }

  68% {
    -webkit-transform: translate3d(25vw, -44%, 0) rotate(-2deg);
  }

  100% {
    -webkit-transform: translate3d(95vw, -50%, 0) rotate(3deg);
  }
}

@keyframes kakaoArriveWhite {
  0% {
    opacity: 1;
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes kakaoArrivePage {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* ==================================================
   MOBILE ONLY TINY FAVICON
   데스크톱에서는 무조건 숨김 / 모바일에서만 아주 작게 표시
   ================================================== */

/* 기본값: 모든 화면에서 무조건 숨김 */
.mobile-favicon-sparkle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* 모바일에서만 다시 표시 */
@media (max-width: 560px) {
  .mobile-favicon-sparkle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;

    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 100%;
    margin: 0 0 8px 0;
    padding-right: 6px;
  }

  .mobile-favicon-sparkle img {
  display: block;
  width: 64px;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter:
    drop-shadow(0 0 3px rgba(255, 60, 60, 0.48))
    drop-shadow(0 0 7px rgba(255, 160, 160, 0.32));
  animation: faviconTinyTwinkle 1.9s ease-in-out infinite;
}

  .mobile-favicon-sparkle::before,
  .mobile-favicon-sparkle::after {
    content: "✦";
    position: absolute;
    color: #111111;
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
    animation: tinySparkleBlink 1.5s ease-in-out infinite;
  }

  .mobile-favicon-sparkle::before {
  right: 68px;
  top: -4px;
  font-size: 10px;
}

.mobile-favicon-sparkle::after {
  right: 2px;
  top: 31px;
  font-size: 8px;
  animation-delay: 0.45s;
}

  @keyframes faviconTinyTwinkle {
    0%, 100% {
      transform: rotate(-4deg) scale(1);
      opacity: 0.88;
    }

    45% {
      transform: rotate(3deg) scale(1.12);
      opacity: 1;
    }
  }

  @keyframes tinySparkleBlink {
    0%, 100% {
      opacity: 0.12;
      transform: scale(0.7) rotate(0deg);
    }

    45% {
      opacity: 0.9;
      transform: scale(1.1) rotate(18deg);
    }
  }
}


/* ==================================================
   PROJECTS — HIP UNDER CONSTRUCTION
   흑백 글리치 / 로딩 보드 / 공사중 애니메이션
   ================================================== */

.project-glitch-board {
  position: relative;
  width: 100%;
  min-height: 168px;
  margin: 4px 0 38px 0;
  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;
  overflow: hidden;
}

.project-glitch-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(17, 17, 17, 0.08) 0px,
      rgba(17, 17, 17, 0.08) 1px,
      transparent 1px,
      transparent 9px
    );
  opacity: 0.45;
  animation: projectScanline 1.6s linear infinite;
  pointer-events: none;
}

.project-glitch-board::after {
  content: "UNDER / CONSTRUCTION / DO NOT CLOSE";
  position: absolute;
  left: 0;
  bottom: 14px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  white-space: nowrap;
  animation: projectTicker 9s linear infinite;
}

.glitch-row {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-weight: 800;
  color: #111111;
  mix-blend-mode: multiply;
}

.glitch-row span {
  display: inline-block;
  animation: wordJitter 1.8s steps(2, end) infinite;
}

.glitch-row span:nth-child(2) {
  animation-delay: 0.18s;
}

.glitch-row span:nth-child(3) {
  animation-delay: 0.34s;
}

.glitch-row span:nth-child(4) {
  animation-delay: 0.52s;
}

.glitch-row.row-a {
  top: 18px;
  font-size: clamp(26px, 4vw, 52px);
  letter-spacing: -0.06em;
}

.glitch-row.row-b {
  top: 86px;
  font-size: clamp(18px, 2.4vw, 28px);
  letter-spacing: 0.06em;
  opacity: 0.86;
}

.glitch-loader {
  position: absolute;
  left: 0;
  right: 0;
  top: 132px;
  height: 12px;
  border: 2px solid #111111;
  background: #ffffff;
  overflow: hidden;
}

.glitch-loader span {
  display: block;
  width: 36%;
  height: 100%;
  background: #111111;
  animation: projectLoadBar 2.1s cubic-bezier(0.7, 0, 0.2, 1) infinite;
}

.glitch-coordinates {
  position: absolute;
  right: 0;
  top: 60px;
  width: 122px;
  padding-left: 12px;
  border-left: 1px solid #111111;
  font-family: Georgia, "Hahmlet", serif;
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
  letter-spacing: 0.04em;
  background: #ffffff;
  animation: coordinateBlink 2.4s steps(2, end) infinite;
}

.project-loading {
  position: relative;
  overflow: hidden;
}

.project-loading::before {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  width: 36%;
  height: 100%;
  background: #111111;
  opacity: 0.08;
  transform: skewX(-18deg);
  animation: loadingSweep 2.4s ease-in-out infinite;
}

.project-loading .loading-code {
  display: inline-block;
  letter-spacing: 0.16em;
  animation: loadingCodeChange 1.2s steps(4, end) infinite;
}

/* 기존 장식과 겹칠 때 좀 더 포스터처럼 */
.construction-box {
  overflow: hidden;
}

.construction-title {
  position: relative;
}

.construction-title::after {
  content: "↯";
  display: inline-block;
  margin-left: 14px;
  font-family: Georgia, serif;
  font-size: 0.55em;
  vertical-align: 0.08em;
  animation: titleSignal 1.1s steps(2, end) infinite;
}

.construction-box::after {
  content: "COMING SOON";
  position: absolute;
  right: -38px;
  top: 84px;
  padding: 7px 46px 8px 46px;
  border: 2px solid #111111;
  background: #ffffff;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: rotate(12deg);
  animation: stampKnock 2.8s ease-in-out infinite;
}

@keyframes projectScanline {
  0% {
    transform: translateY(-18px);
  }

  100% {
    transform: translateY(18px);
  }
}

@keyframes projectTicker {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-120%);
  }
}

@keyframes wordJitter {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-1px, 1px) rotate(-0.5deg);
  }

  40% {
    transform: translate(1px, -1px) rotate(0.4deg);
  }

  60% {
    transform: translate(-2px, 0) rotate(0.2deg);
  }

  80% {
    transform: translate(1px, 1px) rotate(-0.3deg);
  }
}

@keyframes projectLoadBar {
  0% {
    transform: translateX(-110%);
  }

  48% {
    transform: translateX(95%);
  }

  100% {
    transform: translateX(320%);
  }
}

@keyframes coordinateBlink {
  0%, 100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@keyframes loadingSweep {
  0% {
    left: -44%;
  }

  52% {
    left: 108%;
  }

  100% {
    left: 108%;
  }
}

@keyframes loadingCodeChange {
  0% {
    content: "▮▯▯▯▯▯▯";
    opacity: 0.45;
  }

  25% {
    opacity: 0.7;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.45;
  }
}

@keyframes titleSignal {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px) rotate(8deg);
  }
}

@keyframes stampKnock {
  0%, 100% {
    transform: rotate(12deg) translateY(0);
  }

  46% {
    transform: rotate(9deg) translateY(3px);
  }

  52% {
    transform: rotate(15deg) translateY(-2px);
  }
}

@media (max-width: 900px) {
  .project-glitch-board {
    min-height: 154px;
    margin-bottom: 34px;
  }

  .glitch-row.row-a {
    font-size: clamp(25px, 7vw, 44px);
  }

  .glitch-row.row-b {
    top: 78px;
    font-size: clamp(16px, 3.6vw, 24px);
  }

  .glitch-loader {
    top: 122px;
  }

  .glitch-coordinates {
    display: none;
  }

  .construction-box::after {
    right: -42px;
    top: 78px;
    font-size: 11px;
  }
}

@media (max-width: 560px) {
  .project-glitch-board {
    min-height: 142px;
    margin: 0 0 30px 0;
  }

  .glitch-row {
    gap: 10px;
  }

  .glitch-row.row-a {
    top: 16px;
    font-size: 28px;
  }

  .glitch-row.row-b {
    top: 70px;
    font-size: 15px;
    letter-spacing: 0.03em;
  }

  .glitch-loader {
    top: 112px;
    height: 10px;
  }

  .project-glitch-board::after {
    bottom: 10px;
    font-size: 9px;
  }

  .construction-box::after {
    right: -50px;
    top: 76px;
    font-size: 10px;
    padding-left: 38px;
    padding-right: 38px;
  }
}

/* ==================================================
   PROJECT LEAD — GLITCH TYPOGRAPHIC BLOCK
   project-lead 문장 꾸미기
   ================================================== */

.project-lead.lead-system {
  position: relative;
  margin: 0;
  padding: 8px 0 12px 0;
  font-family: "Song Myung", "Gowun Batang", serif;
  color: #111111;
}

.lead-line {
  display: block;
  position: relative;
  width: fit-content;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.08em;
  color: #111111;
}

.lead-line-a {
  transform: rotate(-1.2deg);
  animation: leadSoftJitterA 2.6s steps(2, end) infinite;
}

.lead-line-b {
  margin-top: 8px;
  margin-left: 68px;
  transform: rotate(1deg);
  animation: leadSoftJitterB 2.2s steps(2, end) infinite;
}

.lead-line::before {
  content: "";
  position: absolute;
  left: 0;
  right: -12px;
  bottom: 0.08em;
  height: 0.28em;
  background: #111111;
  opacity: 0.08;
  z-index: -1;
  transform: skewX(-12deg);
}

.lead-line-a::after {
  content: "01";
  position: absolute;
  right: -44px;
  top: 4px;
  width: 28px;
  height: 28px;
  border: 2px solid #111111;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 13px;
  letter-spacing: -0.03em;
  line-height: 1;
  animation: leadBlink 1.4s steps(2, end) infinite;
}

.lead-line-b::after {
  content: "↯";
  position: absolute;
  right: -34px;
  bottom: 4px;
  font-family: Georgia, serif;
  font-size: 0.55em;
  line-height: 1;
  animation: leadSignal 1.1s steps(2, end) infinite;
}

.lead-subgrid {
  margin-top: 24px;
  padding-top: 14px;
  border-top: 2px solid #111111;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.lead-subgrid span {
  display: block;
  position: relative;
  overflow: hidden;
}

.lead-subgrid span::after {
  content: "";
  position: absolute;
  left: -120%;
  top: 0;
  width: 70%;
  height: 100%;
  background: #111111;
  opacity: 0.14;
  transform: skewX(-20deg);
  animation: leadSweep 2.3s ease-in-out infinite;
}

.lead-subgrid span:nth-child(2)::after {
  animation-delay: 0.25s;
}

.lead-subgrid span:nth-child(3)::after {
  animation-delay: 0.5s;
}

@keyframes leadSoftJitterA {
  0%, 100% {
    transform: translate(0, 0) rotate(-1.2deg);
  }

  45% {
    transform: translate(-1px, 1px) rotate(-0.6deg);
  }

  70% {
    transform: translate(1px, -1px) rotate(-1.5deg);
  }
}

@keyframes leadSoftJitterB {
  0%, 100% {
    transform: translate(0, 0) rotate(1deg);
  }

  42% {
    transform: translate(1px, -1px) rotate(0.4deg);
  }

  68% {
    transform: translate(-1px, 1px) rotate(1.4deg);
  }
}

@keyframes leadBlink {
  0%, 100% {
    opacity: 0.25;
  }

  50% {
    opacity: 1;
  }
}

@keyframes leadSignal {
  0%, 100% {
    opacity: 0.2;
    transform: translateY(0) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-3px) rotate(12deg);
  }
}

@keyframes leadSweep {
  0% {
    left: -120%;
  }

  48% {
    left: 120%;
  }

  100% {
    left: 120%;
  }
}

@media (max-width: 900px) {
  .lead-line {
    font-size: clamp(34px, 8vw, 58px);
  }

  .lead-line-b {
    margin-left: 42px;
  }

  .lead-line-a::after {
    right: -38px;
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
}

@media (max-width: 560px) {
  .project-lead.lead-system {
    padding-top: 4px;
  }

  .lead-line {
    font-size: clamp(34px, 10vw, 44px);
    line-height: 1.12;
  }

  .lead-line-b {
    margin-left: 24px;
    margin-top: 10px;
  }

  .lead-line-a::after {
    right: -30px;
    top: 2px;
    width: 22px;
    height: 22px;
    font-size: 10px;
    border-width: 1.5px;
  }

  .lead-line-b::after {
    right: -24px;
    bottom: 2px;
  }

  .lead-subgrid {
    margin-top: 20px;
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.05em;
  }
}

/* ==================================================
   PROJECT META — BLINKING STATUS PANEL
   STATUS / MODE / OPEN 깜빡임
   ================================================== */

.project-meta {
  position: relative;
}

.project-meta span {
  position: relative;
  padding-left: 18px;
  animation: projectMetaBlink 2.4s steps(2, end) infinite;
}

.project-meta span:nth-child(1) {
  animation-delay: 0s;
}

.project-meta span:nth-child(2) {
  animation-delay: 0.35s;
}

.project-meta span:nth-child(3) {
  animation-delay: 0.7s;
}

.project-meta span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: #111111;
  border-radius: 50%;
  animation: projectSignalDot 1.2s steps(2, end) infinite;
}

.project-meta span:nth-child(2)::before {
  animation-delay: 0.25s;
}

.project-meta span:nth-child(3)::before {
  animation-delay: 0.5s;
}

.project-meta span::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: #111111;
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0.45;
  animation: projectMetaLine 2.4s ease-in-out infinite;
}

.project-meta span:nth-child(2)::after {
  animation-delay: 0.35s;
}

.project-meta span:nth-child(3)::after {
  animation-delay: 0.7s;
}

@keyframes projectMetaBlink {
  0%, 100% {
    opacity: 0.42;
    transform: translateX(0);
  }

  45% {
    opacity: 1;
    transform: translateX(2px);
  }

  52% {
    opacity: 0.72;
    transform: translateX(-1px);
  }
}

@keyframes projectSignalDot {
  0%, 100% {
    opacity: 0.2;
    transform: scale(0.75);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes projectMetaLine {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  45% {
    transform: scaleX(1);
    opacity: 0.55;
  }

  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

.vertical-title {
  position: absolute;
  left: -56px;
  top: 240px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Georgia, "Hahmlet", serif;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: black !important;
  opacity: 0.75;
}

.footprints-page .scale {
  border-left: 0 !important;
  border-bottom: 1px solid #111111 !important;
  opacity: 0.9 !important;
}

.footprints-page .scale::before {
  font-size: 64px !important;
  letter-spacing: 0.22em !important;
}

.footprints-page .scale::after {
  font-size: 25px !important;
  letter-spacing: 0.14em !important;
}

.vertical-title {
  position: absolute;
  left: -56px;
  top: 240px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: Georgia, "Hahmlet", serif;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: black;
  opacity: 1.00;
}

/* ==================================================
   FOOTPRINTS — FINAL BOTTOM DECORATION CLEANUP
   원래 하단 장식 2개만 남기기:
   1) scale 시력검사표
   2) vision-dial 반원 장식
   ================================================== */

/* 중간에 넣었던 조각 장식은 제거 */
.footprints-page .vision-fragment,
.footprints-page .vf-a,
.footprints-page .vf-b,
.footprints-page .vf-c,
.footprints-page .vf-d,
.footprints-page .vf-e,
.footprints-page .vf-f,
.footprints-page .vf-g,
.footprints-page .vf-h,
.footprints-page .vf-i {
  display: none !important;
}

/* 빨강/초록 전체 선 제거 */
.footprints-page::before,
.footprints-page::after {
  display: none !important;
  content: none !important;
}

/* scale 안에 들어간 색 배경선 제거 */
.footprints-page .scale {
  background: transparent !important;
}

/* 데스크톱: scale + vision-dial 둘 다 copyright 위에 */
@media (min-width: 901px) {
  .footprints-page .content {
    min-height: 1760px !important;
  }

  .footprints-page .scale {
    display: block !important;
    position: absolute !important;
    top: 1040px !important;
    left: 120px !important;
    right: auto !important;
    transform: none !important;

    width: 260px !important;
    height: 420px !important;
    border-left: 2px solid #111111 !important;
    border-bottom: 2px solid #111111 !important;
    opacity: 1 !important;
  }

  .footprints-page .vision-dial {
    display: block !important;
    position: absolute !important;
    top: 1485px !important;
    left: 120px !important;
    right: auto !important;
    transform: none !important;

    width: 360px !important;
    height: 210px !important;
    pointer-events: none !important;
  }
}

/* 태블릿: scale 아래에 vision-dial */
@media (max-width: 900px) {
  .footprints-page .content {
    min-height: 2520px !important;
  }

  .footprints-page .scale {
    display: block !important;
    position: absolute !important;
    top: 1810px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: min(300px, 86vw) !important;
    height: 420px !important;
    border-left: 2px solid #111111 !important;
    border-bottom: 2px solid #111111 !important;
    opacity: 1 !important;
  }

  .footprints-page .vision-dial {
    display: block !important;
    position: absolute !important;
    top: 2260px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;

    width: 320px !important;
    height: 190px !important;
    pointer-events: none !important;
  }
}

/* 모바일: copyright보다 위에서 끝나게 */
@media (max-width: 560px) {
  .footprints-page .content {
    min-height: 2520px !important;
  }

  .footprints-page .scale {
    top: 1870px !important;
    width: min(270px, 82vw) !important;
    height: 390px !important;
  }

  .footprints-page .vision-dial {
    top: 2250px !important;
    width: 286px !important;
    height: 172px !important;
  }
}

/* copyright는 마지막에 따로 */
.footprints-page .bottom-left {
  position: static !important;
  width: 100% !important;
  margin: 44px 0 0 0 !important;
  padding: 0 0 42px 0 !important;
  text-align: center !important;
  color: #111111 !important;
}


/* ==================================================
   FOOTPRINTS — VISION DIAL DECORATION
   하단 시력검사 장식: 반원 눈금 + 빨강/초록 타깃
   ================================================== */

.vision-dial {
  position: absolute;
  left: 120px;
  top: 1490px;
  width: 360px;
  height: 210px;
  color: #111111;
  pointer-events: none;
  user-select: none;
}

.dial-rays {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 130px;
  overflow: hidden;
}

.dial-rays::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -58px;
  width: 116px;
  height: 116px;
  border: 2px solid #111111;
  border-radius: 50%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 2;
}

.dial-rays span {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 2px;
  height: 126px;
  background: #111111;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(calc(-76deg + (var(--i) * 9.5deg)));
}

.dial-numbers {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 158px;
  font-family: Georgia, "Hahmlet", serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}

.dial-numbers b {
  position: absolute;
  font-weight: 700;
}

.dial-numbers .n10 {
  left: 0;
  bottom: 60px;
}

.dial-numbers .n11 {
  left: 58px;
  top: 6px;
}

.dial-numbers .n12 {
  left: 122px;
  top: -12px;
}

.dial-numbers .n1 {
  right: 58px;
  top: 6px;
}

.dial-numbers .n2 {
  right: 0;
  bottom: 60px;
}

.dial-numbers .n3 {
  right: -6px;
  bottom: 4px;
}

.dial-targets {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 72px;
  height: 144px;
  border: 1px solid #111111;
}

.target {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border-bottom: 1px solid #111111;
}

.target.green {
  border-bottom: 0;
}

.target.red {
  background: #f0442e;
}

.target.green {
  background: #269245;
}

.target::before,
.target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 3px solid #111111;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.target::before {
  width: 34px;
  height: 34px;
}

.target::after {
  width: 18px;
  height: 18px;
}

/* 하단 장식들이 copyright보다 위에 있도록 content 높이 확보 */
@media (min-width: 901px) {
  .footprints-page .content {
    min-height: 1730px !important;
  }

  .footprints-page .scale {
    left: 120px !important;
    right: auto !important;
    top: 1040px !important;
  }

  .footprints-page .vision-dial {
    left: 120px !important;
    right: auto !important;
    top: 1490px !important;
  }
}

/* 태블릿 */
@media (max-width: 900px) {
  .footprints-page .content {
    min-height: 2520px !important;
  }

  .footprints-page .vision-dial {
    left: 50% !important;
    right: auto !important;
    top: 2260px !important;
    width: 320px !important;
    height: 190px !important;
    transform: translateX(-50%) !important;
  }

  .footprints-page .dial-rays {
    width: 220px;
    height: 116px;
  }

  .footprints-page .dial-rays span {
    height: 112px;
  }

  .footprints-page .dial-rays::before {
    width: 96px;
    height: 96px;
    bottom: -50px;
  }

  .footprints-page .dial-numbers {
    width: 220px;
    height: 142px;
    font-size: 24px;
  }

  .footprints-page .dial-targets {
    width: 62px;
    height: 124px;
  }

  .footprints-page .target {
    width: 62px;
    height: 62px;
  }
}

/* 모바일 */
@media (max-width: 560px) {
  .footprints-page .content {
    min-height: 2520px !important;
  }

  .footprints-page .vision-dial {
    top: 2250px !important;
    width: 286px !important;
    height: 172px !important;
  }

  .footprints-page .dial-rays {
    width: 198px;
    height: 104px;
  }

  .footprints-page .dial-rays span {
    height: 100px;
    width: 1.6px;
  }

  .footprints-page .dial-rays::before {
    width: 84px;
    height: 84px;
    bottom: -44px;
  }

  .footprints-page .dial-numbers {
    width: 198px;
    height: 128px;
    font-size: 22px;
  }

  .footprints-page .dial-numbers .n10 {
    left: 0;
    bottom: 50px;
  }

  .footprints-page .dial-numbers .n11 {
    left: 46px;
    top: 8px;
  }

  .footprints-page .dial-numbers .n12 {
    left: 94px;
    top: -8px;
  }

  .footprints-page .dial-numbers .n1 {
    right: 48px;
    top: 8px;
  }

  .footprints-page .dial-numbers .n2 {
    right: 0;
    bottom: 50px;
  }

  .footprints-page .dial-numbers .n3 {
    right: -4px;
    bottom: 2px;
  }

  .footprints-page .dial-targets {
    width: 54px;
    height: 108px;
  }

  .footprints-page .target {
    width: 54px;
    height: 54px;
  }

  .footprints-page .target::before {
    width: 26px;
    height: 26px;
    border-width: 2px;
  }

  .footprints-page .target::after {
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
}


/* ==================================================
   FOOTPRINTS — MOVE ONLY EYE CHART RIGHT
   태양/반원 장식은 그대로 두고, 시력검사표만 오른쪽 이동
   ================================================== */

@media (min-width: 901px) {
  .footprints-page .scale {
    left: 700px !important;
    right: auto !important;
    top: 1100px !important;
  }

  .footprints-page .vision-dial {
    left: 120px !important;
    right: auto !important;
    top: 1500px !important;
  }
}

/* ==================================================
   FOOTPRINTS — SOFT VISION FRAGMENTS
   글자 뒤에 연하게 깔리는 시력검사표 조각들
   ================================================== */

.footprints-page .content {
  isolation: isolate;
}

.footprints-page .word {
  z-index: 3;
}

.footprints-page .symbol {
  z-index: 2;
}

.vision-fragment {
  position: absolute;
  z-index: 1;
  font-family: "Hahmlet", "Gowun Batang", Georgia, serif;
  font-weight: 800;
  line-height: 1;
  color: #111111;
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
}

/* 큰 C — 2번/3번 근처 뒤 */
.vf-a {
  left: 535px;
  top: 90px;
  font-size: 150px;
  transform: rotate(-4deg);
}

/* 큰 4 — 5번 문장 뒤 */
.vf-b {
  left: 20px;
  top: 360px;
  font-size: 150px;
  transform: rotate(3deg);
}

/* ㄱ — 오른쪽 중간 */
.vf-c {
  right: 190px;
  top: 250px;
  font-size: 130px;
  transform: rotate(2deg);
}

/* 2 — 8번 근처 */
.vf-d {
  left: 430px;
  top: 650px;
  font-size: 96px;
  transform: rotate(-2deg);
}

/* 열린 도형 — 오른쪽 아래 */
.vf-e {
  right: 90px;
  top: 880px;
  font-size: 120px;
  transform: rotate(8deg);
}

/* 검은 점 */
.vf-f {
  left: 720px;
  top: 800px;
  font-size: 70px;
  opacity: 0.075;
}

/* 뒤집힌 c */
.vf-g {
  left: 245px;
  top: 1015px;
  font-size: 100px;
  transform: rotate(-12deg);
}

/* 7 */
.vf-h {
  right: 410px;
  top: 1120px;
  font-size: 84px;
  transform: rotate(4deg);
}

/* 검은 막대 */
.vf-i {
  right: 80px;
  top: 430px;
  font-size: 120px;
  transform: rotate(-3deg) scaleX(1.5);
  opacity: 0.07;
}

/* hover할 때 문장이 더 잘 읽히도록 조각은 살짝 더 옅어짐 */
.footprints-page .content:hover .vision-fragment {
  opacity: 0.055;
}

/* 태블릿 */
@media (max-width: 900px) {
  .vision-fragment {
    opacity: 0.07;
  }

  .vf-a {
    left: auto !important;
    right: 20px !important;
    top: 70px !important;
    font-size: 110px !important;
  }

  .vf-b {
    left: 0 !important;
    top: 390px !important;
    font-size: 110px !important;
  }

  .vf-c {
    right: 28px !important;
    top: 600px !important;
    font-size: 96px !important;
  }

  .vf-d {
    left: 44% !important;
    top: 840px !important;
    font-size: 72px !important;
  }

  .vf-e {
    right: 12px !important;
    top: 1180px !important;
    font-size: 82px !important;
  }

  .vf-f,
  .vf-g,
  .vf-h,
  .vf-i {
    display: none !important;
  }
}

/* 모바일 */
@media (max-width: 560px) {
  .vision-fragment {
    opacity: 0.055;
  }

  .vf-a {
    right: 0 !important;
    top: 90px !important;
    font-size: 82px !important;
  }

  .vf-b {
    left: 0 !important;
    top: 420px !important;
    font-size: 82px !important;
  }

  .vf-c {
    right: 8px !important;
    top: 690px !important;
    font-size: 72px !important;
  }

  .vf-d {
    left: 38% !important;
    top: 980px !important;
    font-size: 54px !important;
  }

  .vf-e {
    right: 6px !important;
    top: 1370px !important;
    font-size: 64px !important;
  }
}

/* ==================================================
   FOOTPRINTS — SYMBOL TWINKLE WITH SMALL GLITCH
   점멸 + 아주 약한 흔들림
   ================================================== */

.footprints-page .symbol {
  animation: symbolTwinkleGlitch 2.6s steps(2, end) infinite;
  transform-origin: center center;
}

.footprints-page .s1 { animation-delay: 0s; }
.footprints-page .s2 { animation-delay: 0.35s; }
.footprints-page .s3 { animation-delay: 0.7s; }
.footprints-page .s4 { animation-delay: 1.05s; }
.footprints-page .s5 { animation-delay: 1.4s; }

@keyframes symbolTwinkleGlitch {
  0%, 100% {
    opacity: 0.28;
    filter: blur(0.2px);
  }

  30% {
    opacity: 0.75;
    filter: blur(0);
  }

  42% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 3px rgba(17, 17, 17, 0.25));
  }

  50% {
    opacity: 0.38;
    filter: blur(0.3px);
  }

  58% {
    opacity: 0.95;
    filter: blur(0);
  }
}

/* ==================================================
   FOOTPRINTS — SYMBOL TWINKLE MOBILE FIX
   모바일에서도 기호 점멸 효과 유지
   ================================================== */

@media (max-width: 900px) {
  .footprints-page .symbol {
    display: block !important;
    animation: symbolTwinkleGlitchMobile 2.6s steps(2, end) infinite !important;
    transform-origin: center center;
    filter: none;
  }

  .footprints-page .s1 { animation-delay: 0s !important; }
  .footprints-page .s2 { animation-delay: 0.35s !important; }
  .footprints-page .s3 { animation-delay: 0.7s !important; }
  .footprints-page .s4 { animation-delay: 1.05s !important; }
  .footprints-page .s5 { animation-delay: 1.4s !important; }
}

@keyframes symbolTwinkleGlitchMobile {
  0%, 100% {
    opacity: 0.18;
    filter: blur(0.2px);
  }

  30% {
    opacity: 0.55;
    filter: blur(0);
  }

  42% {
    opacity: 0.95;
    filter:
      blur(0)
      drop-shadow(0 0 3px rgba(17, 17, 17, 0.25));
  }

  50% {
    opacity: 0.28;
    filter: blur(0.3px);
  }

  58% {
    opacity: 0.8;
    filter: blur(0);
  }
}

/* ==================================================
   PROJECTS — MOBILE ONLY CONSTRUCTION SIGN
   레드보트 모바일 장식처럼 모바일에서만 보이는 공사중 팻말
   ================================================== */

/* 기본값: 데스크톱/태블릿에서는 숨김 */
.construction-sign-wrap {
  display: none !important;
}

/* 모바일에서만 보이게 */
@media (max-width: 560px) {
  .construction-sign-wrap {
    display: block !important;
    position: relative !important;
    width: 132px !important;
    margin: 20px 0 6px auto !important;
    z-index: 8 !important;
    pointer-events: none !important;
    transform-origin: 50% 90%;
    animation: constructionSignWobble 2.6s ease-in-out infinite;
  }

  .construction-sign {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter:
      drop-shadow(3px 4px 0 rgba(17, 17, 17, 0.18))
      contrast(1.04)
      saturate(1.08);
  }
}

@keyframes constructionSignWobble {
  0%, 100% {
    transform: rotate(-2deg) translateY(0);
  }

  25% {
    transform: rotate(2.5deg) translateY(-2px);
  }

  48% {
    transform: rotate(-1deg) translateY(1px);
  }

  72% {
    transform: rotate(1.8deg) translateY(-1px);
  }
}

/* ==================================================
   PROJECTS — MOBILE TITLE CONSTRUCTION SIGN
   모바일에서만 Projects 제목 위에 작게 흔들리는 공사중 팻말
   ================================================== */

.mobile-construction-sparkle {
  display: none;
}

@media (max-width: 560px) {
  .mobile-construction-sparkle {
    display: block !important;
    width: 80px !important;
    margin: 0 0 8px auto !important;
    transform-origin: 50% 90%;
    animation: mobileConstructionWiggle 2.4s ease-in-out infinite;
    pointer-events: none;
  }

  .mobile-construction-sparkle img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    filter:
      drop-shadow(1px 2px 0 rgba(17, 17, 17, 0.16))
      contrast(1.04)
      saturate(1.06);
  }
}

@keyframes mobileConstructionWiggle {
  0%, 100% {
    transform: rotate(-3deg) translateY(0);
  }

  25% {
    transform: rotate(3deg) translateY(-1px);
  }

  50% {
    transform: rotate(-1.5deg) translateY(1px);
  }

  75% {
    transform: rotate(2deg) translateY(-1px);
  }
}

/* ==================================================
   PROJECTS — MOBILE TITLE CONSTRUCTION SIGN + STARS
   레드보트 모바일 장식처럼 제목 위 공사중 팻말 + 별 반짝임
   ================================================== */

.mobile-construction-sparkle {
  display: none;
}

@media (max-width: 560px) {
  .mobile-construction-sparkle {
    display: block !important;
    position: relative !important;
    width: 58px !important;
    height: 68px !important;
    margin: 0 0 8px auto !important;
    pointer-events: none !important;
    transform-origin: 50% 90%;
    animation: mobileConstructionWiggle 2.4s ease-in-out infinite;
  }

  .mobile-construction-sparkle img {
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    display: block !important;
    width: 54px !important;
    height: auto !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    filter:
      drop-shadow(1px 2px 0 rgba(17, 17, 17, 0.16))
      contrast(1.04)
      saturate(1.06);
  }

  .construction-star {
    position: absolute !important;
    display: block !important;
    color: #111111 !important;
    font-family: Georgia, serif !important;
    line-height: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
    opacity: 0;
    animation: constructionStarBlink 1.8s steps(2, end) infinite;
  }

  .construction-star.cs-a {
    left: -6px;
    top: 8px;
    font-size: 13px;
    animation-delay: 0s;
  }

  .construction-star.cs-b {
    right: -4px;
    top: 1px;
    font-size: 11px;
    animation-delay: 0.45s;
  }

  .construction-star.cs-c {
    right: 6px;
    top: 22px;
    font-size: 8px;
    animation-delay: 0.9s;
  }
}

@keyframes mobileConstructionWiggle {
  0%, 100% {
    transform: rotate(-3deg) translateY(0);
  }

  25% {
    transform: rotate(3deg) translateY(-1px);
  }

  50% {
    transform: rotate(-1.5deg) translateY(1px);
  }

  75% {
    transform: rotate(2deg) translateY(-1px);
  }
}

@keyframes constructionStarBlink {
  0%, 100% {
    opacity: 0;
    transform: scale(0.75);
  }

  35% {
    opacity: 0.95;
    transform: scale(1.1);
  }

  55% {
    opacity: 0.35;
    transform: scale(0.9);
  }

  75% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ==================================================
   FOOTPRINTS — EYE CHART GLITCH BLINK
   하단 시력검사 장식 기호 불규칙 점멸
   ================================================== */

.footprints-page .scale::before {
  animation: eyeChartBlinkA 3.7s steps(2, end) infinite !important;
}

.footprints-page .scale::after {
  animation: eyeChartBlinkB 4.6s steps(2, end) infinite !important;
}

/* 위쪽 큰 글자들: 가 ㄴ ㄷ ㅁ */
/*@keyframes eyeChartBlinkA {
  0%, 100% {
    opacity: 1;
    filter: blur(0);
    text-shadow: none;
  }

  8% {
    opacity: 0.38;
    filter: blur(0.4px);
  }

  11% {
    opacity: 1;
    filter: blur(0);
  }

  24% {
    opacity: 0.72;
  }

  27% {
    opacity: 0.18;
    filter: blur(0.7px);
  }

  30% {
    opacity: 1;
    filter: blur(0);
  }

  57% {
    opacity: 0.92;
  }

  61% {
    opacity: 0.28;
    filter: blur(0.5px);
  }

  64% {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 4px rgba(17, 17, 17, 0.22);
  }

  82% {
    opacity: 0.46;
  }

  85% {
    opacity: 1;
  }
}

/* 아래쪽 작은 숫자/기호들 */
@keyframes eyeChartBlinkB {
  0%, 100% {
    opacity: 1;
    filter: blur(0);
    text-shadow: none;
  }

  5% {
    opacity: 0.2;
    filter: blur(0.5px);
  }

  9% {
    opacity: 1;
  }

  18% {
    opacity: 0.64;
  }

  21% {
    opacity: 0.12;
    filter: blur(0.8px);
  }

  25% {
    opacity: 0.95;
    filter: blur(0);
  }

  43% {
    opacity: 0.35;
  }

  47% {
    opacity: 1;
    text-shadow: 0 0 3px rgba(17, 17, 17, 0.28);
  }

  66% {
    opacity: 0.78;
  }

  70% {
    opacity: 0.22;
    filter: blur(0.6px);
  }

  73% {
    opacity: 1;
  }

  91% {
    opacity: 0.5;
  }

  94% {
    opacity: 1;
  }
}

/* ==================================================
   MAIN — HOME SYMBOL GLITCH BLINK
   메인 페이지 작은 장식 점멸 효과
   ================================================== */

.home-symbol {
  animation: homeSymbolBlink 2.8s steps(2, end) infinite !important;
  transform-origin: center center;
}

/* 각각 다른 박자로 불규칙하게 */
.home-symbol.s-a {
  animation-delay: 0s !important;
}

.home-symbol.s-b {
  animation-delay: 0.55s !important;
}

.home-symbol.s-c {
  animation-delay: 1.15s !important;
}

@keyframes homeSymbolBlink {
  0%, 100% {
    opacity: 0.22;
    filter: blur(0.2px);
  }

  18% {
    opacity: 0.75;
    filter: blur(0);
  }

  31% {
    opacity: 0.12;
    filter: blur(0.45px);
  }

  38% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 3px rgba(17, 17, 17, 0.28));
  }

  52% {
    opacity: 0.34;
    filter: blur(0.25px);
  }

  67% {
    opacity: 0.92;
    filter: blur(0);
  }

  81% {
    opacity: 0.18;
    filter: blur(0.5px);
  }
}

/* 모바일에서도 메인 장식 점멸 유지 */
@media (max-width: 560px) {
  .home-symbol.s-a {
    display: block !important;
    animation: homeSymbolMobileBlink 2.4s steps(2, end) infinite !important;
  }
}

@keyframes homeSymbolMobileBlink {
  0%, 100% {
    opacity: 0.16;
    filter: blur(0.25px);
  }

  22% {
    opacity: 0.72;
    filter: blur(0);
  }

  39% {
    opacity: 1;
    filter:
      blur(0)
      drop-shadow(0 0 3px rgba(17, 17, 17, 0.3));
  }

  54% {
    opacity: 0.22;
    filter: blur(0.4px);
  }

  70% {
    opacity: 0.86;
    filter: blur(0);
  }
}

/* ==================================================
   FOOTPRINTS — DESKTOP ONLY TITLE
   풋프린트 제목/부제는 데스크톱에서만 표시
   ================================================== */

@media (max-width: 900px) {
  .footprints-page .header h1,
  .footprints-page .header .subtitle {
    display: none !important;
  }

  .footprints-page .header {
    margin-bottom: 18px !important;
  }
}

/* ==================================================
   FOOTPRINTS — MOBILE TOP SPACE
   모바일에서 네비게이션과 본문 사이 공백 늘리기
   ================================================== */

@media (max-width: 900px) {
  .footprints-page .main-area {
    padding-top: 92px !important;
  }
}

@media (max-width: 560px) {
  .footprints-page .main-area {
    padding-top: 118px !important;
  }
}

/* ==================================================
   FOOTPRINTS — SOFT COLORED TARGET TWINKLE
   안쪽 원만 아주 약하게 색감 있는 점멸
   ================================================== */

.footprints-page .target.red::after,
.footprints-page .target.green::after {
  background: transparent !important;
}

.footprints-page .target.red::after {
  animation: redTargetSoftTwinkle 2.8s steps(2, end) infinite !important;
}

.footprints-page .target.green::after {
  animation: greenTargetSoftTwinkle 2.8s steps(2, end) infinite !important;
  animation-delay: 1.15s !important;
}

@keyframes redTargetSoftTwinkle {
  0%, 100% {
    opacity: 0.38;
    box-shadow: none;
    filter: blur(0.1px);
  }

  42% {
    opacity: 1;
    box-shadow:
      0 0 3px rgba(17, 17, 17, 0.28),
      0 0 8px rgba(255, 55, 35, 0.20);
    filter: blur(0);
  }

  58% {
    opacity: 0.44;
    box-shadow: none;
    filter: blur(0.25px);
  }

  73% {
    opacity: 0.82;
    box-shadow:
      0 0 3px rgba(17, 17, 17, 0.20),
      0 0 7px rgba(255, 55, 35, 0.16);
    filter: blur(0);
  }
}

@keyframes greenTargetSoftTwinkle {
  0%, 100% {
    opacity: 0.38;
    box-shadow: none;
    filter: blur(0.1px);
  }

  42% {
    opacity: 1;
    box-shadow:
      0 0 3px rgba(17, 17, 17, 0.28),
      0 0 8px rgba(38, 190, 85, 0.20);
    filter: blur(0);
  }

  58% {
    opacity: 0.44;
    box-shadow: none;
    filter: blur(0.25px);
  }

  73% {
    opacity: 0.82;
    box-shadow:
      0 0 3px rgba(17, 17, 17, 0.20),
      0 0 7px rgba(38, 190, 85, 0.16);
    filter: blur(0);
  }
}

/* ==================================================
   FOOTPRINTS — SOFT COLORED SQUARE TWINKLE
   빨강/초록 네모 바탕도 아주 약하게 반짝이기
   ================================================== */

.footprints-page .target.red {
  animation: redSquareSoftTwinkle 3.4s steps(2, end) infinite !important;
}

.footprints-page .target.green {
  animation: greenSquareSoftTwinkle 3.4s steps(2, end) infinite !important;
  animation-delay: 1.15s !important;
}

@keyframes redSquareSoftTwinkle {
  0%, 100% {
    filter: saturate(1) brightness(1);
    box-shadow: none;
  }

  28% {
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
      inset 0 0 8px rgba(255, 255, 255, 0.12),
      0 0 5px rgba(255, 55, 35, 0.16);
  }

  44% {
    filter: saturate(1.16) brightness(1.08);
    box-shadow:
      inset 0 0 10px rgba(255, 255, 255, 0.18),
      0 0 9px rgba(255, 55, 35, 0.22);
  }

  57% {
    filter: saturate(0.96) brightness(0.98);
    box-shadow: none;
  }

  76% {
    filter: saturate(1.1) brightness(1.05);
    box-shadow:
      inset 0 0 7px rgba(255, 255, 255, 0.12),
      0 0 6px rgba(255, 55, 35, 0.16);
  }
}

@keyframes greenSquareSoftTwinkle {
  0%, 100% {
    filter: saturate(1) brightness(1);
    box-shadow: none;
  }

  28% {
    filter: saturate(1.08) brightness(1.04);
    box-shadow:
      inset 0 0 8px rgba(255, 255, 255, 0.10),
      0 0 5px rgba(38, 190, 85, 0.16);
  }

  44% {
    filter: saturate(1.16) brightness(1.08);
    box-shadow:
      inset 0 0 10px rgba(255, 255, 255, 0.16),
      0 0 9px rgba(38, 190, 85, 0.22);
  }

  57% {
    filter: saturate(0.96) brightness(0.98);
    box-shadow: none;
  }

  76% {
    filter: saturate(1.1) brightness(1.05);
    box-shadow:
      inset 0 0 7px rgba(255, 255, 255, 0.10),
      0 0 6px rgba(38, 190, 85, 0.16);
  }
}
/* ==================================================
   FOOTPRINTS — SLOW IRREGULAR DIAL NUMBER SIGNAL
   태양/반원 장식 숫자 느린 불규칙 점멸
   ================================================== */

.footprints-page .dial-numbers b {
  animation: dialNumberSignalSlow 7.8s steps(2, end) infinite !important;
  opacity: 0.38;
  filter: blur(0.15px);
}

.footprints-page .dial-numbers .n10 { animation-delay: 0s !important; }
.footprints-page .dial-numbers .n11 { animation-delay: 0.9s !important; }
.footprints-page .dial-numbers .n12 { animation-delay: 1.8s !important; }
.footprints-page .dial-numbers .n1 { animation-delay: 1.25s !important; }
.footprints-page .dial-numbers .n2 { animation-delay: 2.7s !important; }
.footprints-page .dial-numbers .n3 { animation-delay: 3.45s !important; }

@keyframes dialNumberSignalSlow {
  0%, 100% {
    opacity: 0.32;
    filter: blur(0.25px);
    text-shadow: none;
  }

  10% {
    opacity: 0.84;
    filter: blur(0);
    text-shadow: 0 0 3px rgba(17, 17, 17, 0.18);
  }

  18% {
    opacity: 0.28;
    filter: blur(0.35px);
    text-shadow: none;
  }

  32% {
    opacity: 1;
    filter: blur(0);
    text-shadow:
      0 0 3px rgba(17, 17, 17, 0.26),
      0 0 8px rgba(17, 17, 17, 0.12);
  }

  48% {
    opacity: 0.46;
    filter: blur(0.2px);
  }

  64% {
    opacity: 0.78;
    filter: blur(0);
  }

  78% {
    opacity: 0.22;
    filter: blur(0.45px);
    text-shadow: none;
  }

  88% {
    opacity: 0.92;
    filter: blur(0);
    text-shadow: 0 0 4px rgba(17, 17, 17, 0.18);
  }
}

body.footprints-page.no-transition .footprints-transition {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  pointer-events: none !important;
}

body.footprints-page.no-transition .transition-boat {
  animation: none !important;
}



/* ==================================================
   ESSAY BODY MEDIA MODULES
   본문(.essay-body) 안에 사진/영상/슬라이드/갤러리 삽입용
   ================================================== */

.essay-body .media-block,
.essay-body .essay-media,
.essay-body .kakao-image-grid,
.essay-body .media-video,
.essay-body .slideshow-wrap,
.essay-body .book-gallery {
  margin: 2.2em auto;
}

.essay-body .media-caption,
.essay-body figcaption {
  margin-top: 0.75em;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.65;
  color: rgba(17, 17, 17, 0.62);
  text-align: center;
  letter-spacing: -0.03em;
}

/* 단일 이미지 */
.essay-body .essay-image,
.essay-body .inline-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 2.2em auto;
  border-radius: 0;
  cursor: zoom-in;
}

.essay-body .essay-image.is-small,
.essay-body .inline-image-small {
  width: min(62%, 420px);
}

.essay-body .essay-image.is-medium {
  width: min(78%, 560px);
}

/* 두 장 나란히 */
.essay-body .image-row {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  margin: 2.2em auto;
}

.essay-body .image-row img {
  width: 50%;
  min-width: 0;
  height: auto;
  display: block;
  cursor: zoom-in;
}

/* 카카오톡 캡처 느낌 3열 이미지 그리드 */
.essay-body .kakao-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  width: 100%;
  max-width: 560px;
}

.essay-body .kakao-image-grid a,
.essay-body .kakao-image-grid button {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(17, 17, 17, 0.08);
  cursor: zoom-in;
}

.essay-body .kakao-image-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.essay-body .kakao-image-grid a:hover img,
.essay-body .kakao-image-grid button:hover img {
  transform: scale(1.035);
  opacity: 0.9;
}

/* 2x2 전용 그리드가 필요할 때 */
.essay-body .suji-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* 영상 */
.essay-body .media-video,
.essay-body video {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 2.2em auto;
  background: #000000;
  border-radius: 0;
}

.essay-body .media-video.is-vertical {
  width: min(62%, 420px);
  max-height: 72vh;
  object-fit: contain;
}

/* 이미지 슬라이드 */
.essay-body .slideshow-wrap {
  width: 100%;
}

.essay-body .slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #111111;
}

.essay-body .slideshow .slide {
  display: none;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.essay-body .slideshow .slide.active {
  display: block;
  animation: essayMediaFadeIn 0.22s ease;
}

.essay-body .slideshow-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 2px solid #111111;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #111111;
  font-family: Georgia, serif;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}

.essay-body .slideshow-arrow.prev { left: 12px; }
.essay-body .slideshow-arrow.next { right: 12px; }

.essay-body .slideshow-arrow:hover {
  background: #111111;
  color: #ffffff;
}

.essay-body .dots {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.essay-body .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(17, 17, 17, 0.32);
  cursor: pointer;
}

.essay-body .dot.active {
  background: rgba(17, 17, 17, 0.9);
  transform: scale(1.25);
}

/* 책처럼 넘기는 갤러리 */
.essay-body .book-gallery {
  position: relative;
  display: block;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.essay-body .book-gallery img {
  display: none;
  width: 100%;
  height: auto;
  margin: 0;
  cursor: default;
}

.essay-body .book-gallery img.active {
  display: block;
}

.essay-body .book-gallery .bg-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 2px solid #111111;
  border-radius: 999px;
  padding: 0;
  background: rgba(255, 255, 255, 0.86);
  color: #111111;
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
}

.essay-body .book-gallery .bg-arrow.left { left: 10px; }
.essay-body .book-gallery .bg-arrow.right { right: 10px; }

.essay-body .book-gallery .page-indicator {
  position: absolute;
  right: 10px;
  bottom: 12px;
  background: rgba(17, 17, 17, 0.72);
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  line-height: 1;
}

.essay-body .book-gallery .scrubber {
  display: block;
  width: 100%;
  margin-top: 10px;
}

.essay-body .book-gallery .scrubber input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 22px;
  background: transparent;
  margin: 0;
  padding: 0;
}

.essay-body .book-gallery .scrubber input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, rgba(17,17,17,.68) 0%, rgba(17,17,17,.68) var(--fill,0%), rgba(17,17,17,.14) var(--fill,0%), rgba(17,17,17,.14) 100%);
}

.essay-body .book-gallery .scrubber input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(17,17,17,.82);
  border: none;
  cursor: pointer;
  margin-top: -4px;
}

.essay-body .book-gallery .scrubber input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(17,17,17,.14);
  border-radius: 999px;
}

.essay-body .book-gallery .scrubber input[type="range"]::-moz-range-progress {
  height: 6px;
  background: rgba(17,17,17,.68);
  border-radius: 999px;
}

.essay-body .book-gallery .scrubber input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(17,17,17,.82);
  border: none;
  cursor: pointer;
}

/* 공용 라이트박스 */
.universal-lightbox {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 100000;
  padding: 28px;
  background: rgba(0, 0, 0, 0.84);
  align-items: center;
  justify-content: center;
}

.universal-lightbox.active {
  display: flex;
}

.universal-lightbox-box {
  position: relative;
  z-index: 2;
  max-width: min(100%, 1080px);
  max-height: 86vh;
}

.universal-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #ffffff;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

.universal-lightbox-bg {
  position: absolute;
  inset: 0;
  cursor: zoom-out;
}

.universal-lightbox-close {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 100002;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #000000;
  font-family: Arial, sans-serif;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.universal-lightbox-arrow {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100002;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #000000;
  font-family: Georgia, serif;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}

.universal-lightbox-arrow.prev { left: 20px; }
.universal-lightbox-arrow.next { right: 20px; }
.universal-lightbox-arrow.is-hidden { display: none !important; }

.universal-lightbox-thumbs {
  display: none;
}

@keyframes essayMediaFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 900px) {
  .essay-body .image-row {
    flex-direction: column;
    gap: 12px;
  }

  .essay-body .image-row img {
    width: 100%;
  }

  .essay-body .essay-image.is-small,
  .essay-body .essay-image.is-medium,
  .essay-body .inline-image-small,
  .essay-body .media-video.is-vertical {
    width: 100%;
    max-width: 100%;
  }

  .essay-body .kakao-image-grid {
    max-width: 100%;
    gap: 2px;
  }

  .universal-lightbox {
    padding: 14px;
  }

  .universal-lightbox-img {
    max-height: 78vh;
  }

  .universal-lightbox-close {
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    font-size: 26px;
  }

  .universal-lightbox-arrow {
    display: none !important;
  }

  .universal-lightbox-thumbs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 100002;
    display: none;
    gap: 8px;
    padding: 8px 14px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .universal-lightbox.active .universal-lightbox-thumbs.has-items {
    display: flex;
  }

  .universal-lightbox-thumbs::-webkit-scrollbar {
    display: none;
  }

  .universal-lightbox-thumb {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 3px;
    background: transparent;
    overflow: hidden;
    opacity: 0.72;
  }

  .universal-lightbox-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .universal-lightbox-thumb.is-active {
    border-color: #ffffff;
    opacity: 1;
  }

  .universal-lightbox-box {
    margin-bottom: 68px;
  }
}

/* =========================
   POEM BLOCK
   본문 안 시 삽입용
   ========================= */

.poem-block {
  margin: 56px auto;
  padding: 34px 28px;
  width: min(560px, 100%);
  border-top: 1px solid #111111;
  border-bottom: 1px solid #111111;
  text-align: center;
}

.poem-block p {
  margin: 0 !important;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: 21px;
  line-height: 2.15;
  letter-spacing: -0.04em;
  color: #111111;
}

@media (max-width: 560px) {
  .poem-block {
    margin: 42px auto;
    padding: 28px 14px;
  }

  .poem-block p {
    font-size: 18px;
    line-height: 2.05;
  }
}


/* ==================================================
   MOBILE ESSAY MEDIA STABILITY FIX
   사진 크기 / 3열 그리드 / 가로·세로 영상 / 시 블록 모바일 보정
   style.css 맨 아래에 유지하세요.
   ================================================== */

.essay-body {
  overflow-wrap: break-word;
}

.essay-body .media-block {
  width: 100%;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.essay-body .media-block .essay-image,
.essay-body > .essay-image,
.essay-body .inline-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 76vh;
  height: auto;
  margin: 2.2em auto;
  object-fit: contain;
}

.essay-body .essay-image.is-small,
.essay-body .inline-image-small {
  width: min(62%, 420px);
  max-width: 100%;
}

.essay-body .essay-image.is-medium {
  width: min(78%, 560px);
  max-width: 100%;
}

.essay-body .kakao-image-grid {
  width: min(100%, 560px);
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px;
}

.essay-body .kakao-image-grid a,
.essay-body .kakao-image-grid button {
  min-width: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.essay-body .kakao-image-grid img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
}

.essay-body .media-video,
.essay-body video.media-video {
  display: block;
  width: min(100%, 680px);
  max-width: 680px;
  height: auto;
  margin: 2.2em auto;
  object-fit: contain;
  background: #000000;
}

.essay-body .media-video:not(.is-vertical),
.essay-body video.media-video:not(.is-vertical) {
  aspect-ratio: 16 / 9;
  max-height: 72vh;
}

.essay-body .media-video.is-vertical,
.essay-body video.media-video.is-vertical {
  width: min(62%, 420px);
  max-width: 420px;
  max-height: 72vh;
  aspect-ratio: 9 / 16;
}

.poem-block {
  overflow: hidden;
}

.poem-block p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: keep-all;
}

@media (max-width: 900px) {
  .essay-body .media-block,
  .essay-body .essay-media,
  .essay-body .slideshow-wrap,
  .essay-body .book-gallery {
    width: 100%;
    max-width: 100%;
  }

  .essay-body .media-block .essay-image,
  .essay-body > .essay-image,
  .essay-body .inline-image {
    width: auto !important;
    max-width: 100% !important;
    max-height: 70vh !important;
    height: auto !important;
  }

  .essay-body .essay-image.is-small,
  .essay-body .inline-image-small {
    width: min(74%, 360px) !important;
    max-width: 100% !important;
  }

  .essay-body .essay-image.is-medium {
    width: min(88%, 520px) !important;
    max-width: 100% !important;
  }

  .essay-body .kakao-image-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }

  .essay-body .media-video:not(.is-vertical),
  .essay-body video.media-video:not(.is-vertical) {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 62vh !important;
  }

  .essay-body .media-video.is-vertical,
  .essay-body video.media-video.is-vertical {
    width: min(72%, 360px) !important;
    max-width: 360px !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: 70vh !important;
  }
}

@media (max-width: 560px) {
  .essay-paper {
    overflow: hidden;
  }

  .essay-body .media-block,
  .essay-body .essay-media,
  .essay-body .kakao-image-grid,
  .essay-body .media-video,
  .essay-body .slideshow-wrap,
  .essay-body .book-gallery,
  .poem-block {
    margin-top: 2em !important;
    margin-bottom: 2em !important;
  }

  .essay-body .media-block .essay-image,
  .essay-body > .essay-image,
  .essay-body .inline-image {
    width: auto !important;
    max-width: 100% !important;
    max-height: 66vh !important;
    height: auto !important;
  }

  .essay-body .essay-image.is-small,
  .essay-body .inline-image-small {
    width: min(82%, 300px) !important;
  }

  .essay-body .essay-image.is-medium {
    width: min(92%, 360px) !important;
  }

  .essay-body .kakao-image-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  .essay-body .kakao-image-grid a,
  .essay-body .kakao-image-grid button {
    aspect-ratio: 1 / 1 !important;
  }

  .essay-body .media-video:not(.is-vertical),
  .essay-body video.media-video:not(.is-vertical) {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 56vh !important;
  }

  .essay-body .media-video.is-vertical,
  .essay-body video.media-video.is-vertical {
    width: min(78%, 300px) !important;
    max-width: 300px !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    max-height: 68vh !important;
  }

  .poem-block {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 12px !important;
    text-align: center !important;
  }

  .poem-block p {
    font-size: clamp(16px, 4.5vw, 18px) !important;
    line-height: 2 !important;
    letter-spacing: -0.05em !important;
  }
}


/* ==================================================
   MOBILE TAP LIGHTBOX FIX
   모바일에서 사진 탭 확대가 막히지 않도록 터치/포인터 보강
   ================================================== */
.essay-body img.js-lightbox-image,
.essay-body .media-block img,
.essay-body .image-row img,
.essay-body .kakao-image-grid a,
.essay-body .kakao-image-grid img,
.essay-body .slideshow .slide {
  cursor: zoom-in;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
}

.universal-lightbox,
.universal-lightbox * {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.universal-lightbox.active {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.universal-lightbox-bg,
.universal-lightbox-close,
.universal-lightbox-arrow,
.universal-lightbox-thumb {
  touch-action: manipulation;
}

@media (max-width: 900px) {
  .universal-lightbox {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    z-index: 2147483000 !important;
    padding: 14px !important;
  }

  .universal-lightbox-box {
    max-width: calc(100vw - 28px) !important;
    max-height: 78dvh !important;
  }

  .universal-lightbox-img {
    max-width: calc(100vw - 28px) !important;
    max-height: 78dvh !important;
    object-fit: contain !important;
  }

  .universal-lightbox-close {
    z-index: 2147483002 !important;
  }

  .universal-lightbox-thumbs {
    z-index: 2147483002 !important;
  }
}


/* 모바일에서만 단어 강제 묶음 해제 */
@media (max-width: 900px) {
  body,
  .essay-body,
  .essay-body p,
  .essay-paper,
  .article,
  .article p {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}



/* ==================================================
   MOBILE TEXT SIZE TINY REDUCTION
   모바일에서만 본문 글씨를 아주 조금 줄임
   ================================================== */
@media (max-width: 560px) {
  .essay-body {
    font-size: 15.5px !important;
    line-height: 1.92 !important;
  }

  .essay-body p {
    font-size: 15.5px !important;
  }

  .essay-quote {
    font-size: 21px !important;
  }

  .essay-note,
  figcaption {
    font-size: 11.5px !important;
  }
}


/* 모바일: 일반 사진 확대 끄기 / 3열 그리드 확대만 유지 */
@media (max-width: 900px) {
  .essay-body img.js-lightbox-image,
  .essay-body .media-block img,
  .essay-body .image-row img,
  .slideshow .slide {
    cursor: default !important;
  }

  .kakao-image-grid a,
  .kakao-image-grid img {
    cursor: zoom-in !important;
  }
}

/* ==================================================
   CUSTOM MOUSE CURSOR
   같은 폴더에 cursor.png 파일을 업로드하면 사이트 전체 커서가 바뀝니다.
   커서 클릭 지점은 이미지의 왼쪽 상단(0 0)입니다.
   ================================================== */

html,
body,
body * {
  cursor: url("cursor.png") 0 0, auto !important;
}

a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.boat-links a,
.word {
  cursor: url("cursor.png") 0 0, pointer !important;
}


/* ==================================================
   CUSTOM IMAGE CURSOR — FINAL FIX
   cursor.png 파일을 style.css와 같은 폴더에 업로드해야 보입니다.
   CSS 커서 + JS 가짜 커서를 동시에 지원합니다.
   ================================================== */

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  body * {
    cursor: url("cursor.png") 0 0, auto !important;
  }

  a,
  button,
  [role="button"],
  input,
  textarea,
  select,
  label,
  summary,
  .word,
  .boat-links a,
  .js-lightbox-image,
  .kakao-image-grid a,
  .kakao-image-grid img {
    cursor: url("cursor.png") 0 0, pointer !important;
  }

  html.custom-cursor-on,
  html.custom-cursor-on body,
  html.custom-cursor-on body * {
    cursor: none !important;
  }

  .custom-cursor-img {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 42px !important;
    height: 42px !important;
    background-image: url("cursor.png") !important;
    background-repeat: no-repeat !important;
    background-position: left top !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    transform: translate3d(-9999px, -9999px, 0);
    will-change: transform;
  }
}

@media (hover: none), (pointer: coarse) {
  .custom-cursor-img {
    display: none !important;
  }
}


/* 2.html 이름:내용 목록 줄바꿈 고정 + hr 표시 */
.free-index2 li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.35em;
  align-items: start;
}

.free-index2 .label {
  white-space: nowrap;
}

.free-index2 .desc {
  min-width: 0;
}

.essay-body hr,
.essay-hr {
  display: block;
  width: min(180px, 42%);
  height: 0;
  margin: 3em auto;
  padding: 0;
  border: 0;
  border-top: 1.5px solid #111111;
  background: transparent;
  opacity: 1;
}

/* =========================
   PDF DOWNLOAD BUTTON — FINAL FIX
   파란 링크색 / 보라 방문색 제거 + 흑백 버튼 통합
   ========================= */

.pdf-download-box,
.essay-body .pdf-download-box {
  width: auto !important;
  max-width: 100% !important;
  margin: 34px 0 34px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

.pdf-download-box a,
.pdf-download-box a:link,
.pdf-download-box a:visited,
.pdf-download-box a:active,
.pdf-download-box a:focus,
.essay-body .pdf-download-box a,
.essay-body .pdf-download-box a:link,
.essay-body .pdf-download-box a:visited,
.essay-body .pdf-download-box a:active,
.essay-body .pdf-download-box a:focus {
  display: inline-block !important;
  padding: 0.32em 0.72em !important;
  border: 1px solid #111111 !important;
  background: #ffffff !important;
  color: #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  text-decoration: none !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  outline: none !important;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    -webkit-text-fill-color 0.18s ease;
}

.pdf-download-box a::before,
.essay-body .pdf-download-box a::before {
  content: none !important;
}

.pdf-download-box:hover,
.essay-body .pdf-download-box:hover {
  background: transparent !important;
}

.pdf-download-box a:hover,
.pdf-download-box a:visited:hover,
.pdf-download-box a:active:hover,
.pdf-download-box a:focus:hover,
.essay-body .pdf-download-box a:hover,
.essay-body .pdf-download-box a:visited:hover,
.essay-body .pdf-download-box a:active:hover,
.essay-body .pdf-download-box a:focus:hover {
  background: #111111 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-decoration: none !important;
}

@media (max-width: 560px) {
  .pdf-download-box,
  .essay-body .pdf-download-box {
    width: auto !important;
    margin: 30px 0 30px 0 !important;
    padding: 0 !important;
    font-size: inherit !important;
  }

  .pdf-download-box a,
  .pdf-download-box a:link,
  .pdf-download-box a:visited,
  .pdf-download-box a:active,
  .pdf-download-box a:focus,
  .essay-body .pdf-download-box a,
  .essay-body .pdf-download-box a:link,
  .essay-body .pdf-download-box a:visited,
  .essay-body .pdf-download-box a:active,
  .essay-body .pdf-download-box a:focus {
    padding: 0.32em 0.68em !important;
    font-size: inherit !important;
  }
}

/* ==================================================
   DESKTOP KOREAN LINE-BREAK FIX
   데스크탑에서 한글 단어가 이상하게 쪼개지는 현상 보정
   ================================================== */

h1,
.header h1,
.essay-header h1,
.article h1 {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  word-wrap: normal !important;
  line-break: strict;
}

@media (min-width: 901px) {
  body,
  .essay-paper,
  .essay-body,
  .essay-body p,
  .essay-body li,
  .article,
  .article p {
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    word-wrap: normal !important;
    line-break: strict;
  }
}


/* ==================================================
   WEEK 04 TEAM ORACLE
   4.html 본문 안에서만 쓰는 팀 소개 / 팀원 소개 마법창
   ================================================== */

body.team-modal-open {
  overflow: hidden;
}

.essay-team-grimoire {
  --team-paper: #fffaf0;
  position: relative;
  left: 50%;
  width: min(900px, calc(100vw - 92px));
  transform: translateX(-50%);
  margin: 62px 0 68px 0;
  padding: 34px 34px 30px 34px;
  border: 2px solid #111111;
  background:
    radial-gradient(circle at 10% 8%, rgba(17, 17, 17, 0.08), transparent 28%),
    radial-gradient(circle at 92% 18%, rgba(17, 17, 17, 0.06), transparent 26%),
    #ffffff;
  box-shadow: 8px 8px 0 #111111;
  color: #111111;
  isolation: isolate;
}

.essay-team-grimoire::before,
.essay-team-grimoire::after {
  content: "✦ ✧ ✦";
  position: absolute;
  left: 24px;
  right: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 16px;
  letter-spacing: 0.65em;
  color: #111111;
  background: #ffffff;
  z-index: 1;
}

.essay-team-grimoire::before {
  top: -12px;
}

.essay-team-grimoire::after {
  bottom: -12px;
}

.team-grimoire-header {
  text-align: center;
  margin-bottom: 24px;
}

.team-grimoire-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
}

.team-grimoire-header h2 {
  margin: 0;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.075em;
}

.team-grimoire-header p {
  width: min(620px, 100%);
  margin: 14px auto 0 auto !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

.team-nabi-card {
  width: min(560px, 100%);
  margin: 0 auto 26px auto;
  padding: 16px 18px 15px 18px;
  border: 1px dashed #111111;
  background: rgba(255, 255, 255, 0.78);
  text-align: center;
  font-family: "Gowun Batang", "Song Myung", serif;
}

.team-nabi-card strong,
.team-nabi-card em {
  display: block;
}

.team-nabi-mark {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 22px;
}

.team-nabi-card strong {
  font-size: 17px;
}

.team-nabi-card em {
  margin-top: 5px;
  font-style: normal;
  font-size: 16px;
  line-height: 1.45;
}

.team-oracle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.team-oracle-card,
.team-member-card,
.team-modal-close {
  appearance: none;
  border-radius: 0;
  font: inherit;
}

.team-oracle-card {
  --team-color: #111111;
  --team-glow: rgba(17, 17, 17, 0.18);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 10px;
  border: 1.5px solid #111111;
  background: #0a0a0a;
  color: #ffffff;
  text-align: left;
  overflow: hidden;
  transition:
    transform 0.26s ease,
    box-shadow 0.26s ease,
    filter 0.26s ease;
}

.team-oracle-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index: 2;
}

.team-oracle-card::after {
  content: "✦";
  position: absolute;
  right: 18px;
  top: 16px;
  color: var(--team-color);
  font-family: Georgia, serif;
  font-size: 18px;
  text-shadow: 0 0 14px var(--team-glow);
  z-index: 3;
}

.team-oracle-card:hover,
.team-oracle-card:focus-visible {
  transform: translateY(-6px) rotate(-0.5deg);
  box-shadow:
    0 0 0 2px #111111,
    0 0 28px var(--team-glow),
    7px 7px 0 #111111;
  filter: brightness(1.08) contrast(1.05);
  outline: none;
}

.team-oracle-card:nth-child(2):hover,
.team-oracle-card:nth-child(2):focus-visible {
  transform: translateY(-6px) rotate(0.7deg);
}

.team-oracle-card:nth-child(3):hover,
.team-oracle-card:nth-child(3):focus-visible {
  transform: translateY(-6px) rotate(-0.3deg);
}

.team-card-number {
  position: absolute;
  left: 18px;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background: rgba(0, 0, 0, 0.48);
  color: #ffffff;
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1;
}

.team-card-image {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #111111;
}

.team-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  opacity: 0.88;
  transition:
    transform 0.35s ease,
    opacity 0.35s ease;
}

.team-oracle-card:hover .team-card-image img,
.team-oracle-card:focus-visible .team-card-image img {
  transform: scale(1.075);
  opacity: 1;
}

.team-card-body {
  position: relative;
  z-index: 3;
  display: block;
  padding: 15px 10px 11px 10px;
}

.team-card-body strong,
.team-card-body small,
.team-card-body em {
  display: block;
}

.team-card-body strong {
  font-family: Georgia, "Song Myung", serif;
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--team-color);
}

.team-card-body small {
  margin-top: 9px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}

.team-card-body em {
  margin-top: 10px;
  font-style: normal;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.055em;
  color: rgba(255, 255, 255, 0.92);
}

.team-card-open {
  position: relative;
  z-index: 3;
  display: block;
  margin: auto 10px 8px 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--team-color);
}

.team-oracle-hint {
  margin: 18px 0 0 0 !important;
  text-align: center;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.55 !important;
  opacity: 0.82;
}

.team-choo {
  --team-color: #ff7a35;
  --team-soft: #ffe0c7;
  --team-glow: rgba(255, 122, 53, 0.42);
}

.team-wol {
  --team-color: #a3bd64;
  --team-soft: #dce7b8;
  --team-glow: rgba(163, 189, 100, 0.42);
}

.team-ting {
  --team-color: #8da4ff;
  --team-soft: #dce4ff;
  --team-glow: rgba(77, 110, 255, 0.46);
}

.team-magic-modal {
  --team-color: #ffffff;
  --team-soft: #eeeeee;
  --team-glow: rgba(255, 255, 255, 0.24);
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: #f7f1df;
}

.team-magic-modal.is-open {
  display: flex;
  animation: teamModalAppear 0.24s ease both;
}

.team-modal-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, var(--team-glow), transparent 34%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.team-modal-window {
  position: relative;
  width: min(980px, 100%);
  max-height: min(86vh, 820px);
  overflow: auto;
  padding: 34px 32px 32px 32px;
  border: 1.5px solid var(--team-color);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    radial-gradient(circle at 50% -10%, var(--team-glow), transparent 34%),
    #040404;
  background-size: 100% 100%, 22px 22px, 100% 100%, 100% 100%;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 46px var(--team-glow),
    12px 12px 0 rgba(0, 0, 0, 0.72);
  animation: teamWindowRise 0.34s ease both;
}

.team-modal-window::before,
.team-modal-window::after {
  content: "✦ ✧ ✦";
  position: absolute;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: center;
  font-family: Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.7em;
  color: var(--team-color);
  pointer-events: none;
}

.team-modal-window::before {
  top: 12px;
}

.team-modal-window::after {
  bottom: 12px;
}

.team-modal-close {
  position: sticky;
  top: 0;
  z-index: 5;
  display: block;
  margin: 0 0 6px auto;
  padding: 8px 12px;
  border: 1px solid var(--team-color);
  background: #050505;
  color: var(--team-color);
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.team-modal-close:hover,
.team-modal-close:focus-visible {
  background: var(--team-color);
  color: #050505;
  outline: none;
}

.team-modal-header {
  width: min(780px, 100%);
  margin: 4px auto 26px auto;
  text-align: center;
}

.team-modal-eyebrow {
  display: inline-block;
  margin-bottom: 9px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.62);
}

.team-modal-header h3 {
  margin: 0;
  font-family: Georgia, "Song Myung", serif;
  font-size: clamp(38px, 6vw, 74px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: 0.03em;
  color: var(--team-color);
  text-shadow: 0 0 22px var(--team-glow);
}

.team-modal-header p {
  margin: 14px 0 0 0 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.82);
}

.team-modal-header blockquote {
  margin: 18px auto 0 auto;
  padding: 14px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.35;
  letter-spacing: -0.06em;
  color: #ffffff;
}

.team-member-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.team-member-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  min-height: 126px;
  padding: 14px 14px 13px 14px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  text-align: left;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.team-member-card:hover,
.team-member-card:focus-visible,
.team-member-card.is-open {
  transform: translateY(-3px);
  border-color: var(--team-color);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 0 18px var(--team-glow);
  outline: none;
}

.member-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--team-color);
  border-radius: 50%;
  color: var(--team-color);
  background: radial-gradient(circle, var(--team-glow), transparent 65%);
  font-family: Georgia, serif;
  font-size: 20px;
  line-height: 1;
  text-shadow: 0 0 12px var(--team-glow);
}

.member-text {
  display: block;
  min-width: 0;
}

.member-text strong,
.member-text em,
.member-click,
.member-reason {
  display: block;
}

.member-text strong {
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--team-soft);
}

.member-text em {
  margin-top: 7px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
}

.member-click {
  margin-top: 8px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--team-color);
}

.member-reason {
  grid-column: 1 / -1;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
  transition:
    max-height 0.26s ease,
    opacity 0.26s ease,
    padding-top 0.26s ease;
}

.team-member-card.is-open .member-reason {
  max-height: 220px;
  opacity: 1;
  padding-top: 12px;
}

@keyframes teamModalAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes teamWindowRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 900px) {
  .essay-team-grimoire {
    left: auto;
    width: 100%;
    transform: none;
    margin: 54px 0 60px 0;
    padding: 30px 22px 28px 22px;
    box-shadow: 6px 6px 0 #111111;
  }

  .team-oracle-grid {
    grid-template-columns: 1fr;
  }

  .team-oracle-card {
    display: grid;
    grid-template-columns: minmax(126px, 42%) 1fr;
    gap: 12px;
    align-items: stretch;
    min-height: 0;
  }

  .team-card-image {
    height: 100%;
    min-height: 158px;
  }

  .team-card-body {
    padding: 34px 10px 34px 0;
  }

  .team-card-open {
    grid-column: 2;
    margin-left: 0;
  }

  .team-magic-modal {
    padding: 18px;
  }

  .team-modal-window {
    max-height: 88vh;
    padding: 30px 22px 28px 22px;
  }

  .team-member-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .essay-team-grimoire {
    padding: 28px 14px 25px 14px;
  }

  .team-grimoire-header h2 {
    font-size: 36px;
  }

  .team-grimoire-header p {
    font-size: 14px !important;
  }

  .team-oracle-card {
    display: flex;
  }

  .team-card-image {
    min-height: 0;
  }

  .team-card-body {
    padding: 14px 10px 10px 10px;
  }

  .team-card-body strong {
    font-size: 25px;
  }

  .team-modal-window {
    padding: 28px 16px 26px 16px;
  }

  .team-modal-header h3 {
    font-size: 42px;
  }

  .team-member-grid {
    grid-template-columns: 1fr;
  }

  .team-member-card {
    min-height: 0;
  }
}


/* =========================
   IMAGE CAPTION STYLE
   사진 밑 설명글
   ========================= */

figcaption,
.essay-body figcaption {
  margin-top: 8px;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 13px;
  line-height: 1.65;
  color: #777777;
  text-align: center;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  figcaption,
  .essay-body figcaption {
    margin-top: 7px;
    font-size: 12px;
    line-height: 1.6;
  }
}

figcaption,
.essay-body figcaption {
  margin-top: 3px;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 13px;
  line-height: 1.65;
  color: #777777;
  text-align: center;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  figcaption,
  .essay-body figcaption {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.6;
  }
}

.essay-body figure img {
  margin-bottom: 0;
}

/* =========================
   IMAGE + CAPTION GAP FIX
   사진과 캡션 사이 자연스럽게 조정
   ========================= */

.essay-body figure.media-block > img.essay-image,
.essay-body .media-block > img.essay-image {
  display: block;
  margin: 0 auto !important;
}

.essay-body figure.media-block > figcaption,
.essay-body .media-block > figcaption {
  margin-top: 9px !important;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 14px;
  line-height: 1.65;
  color: #777777;
  text-align: center;
  letter-spacing: -0.02em;
}

@media (max-width: 560px) {
  .essay-body figure.media-block > figcaption,
  .essay-body .media-block > figcaption {
    margin-top: 7px !important;
    font-size: 13px;
    line-height: 1.6;
  }
}

/* ==================================================
   ESSAY INNER TEXT
   본문 안에 삽입하는 또 하나의 글
   사용 예: <section class="essay-inner-text">...</section>
   ================================================== */

.essay-inner-text {
  position: relative;
  margin: 54px 0;
  padding: 38px 34px 34px 34px;
  border-top: 2px solid #111111;
  border-bottom: 2px solid #111111;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 16px;
  line-height: 1.95;
  color: #111111;
}

.essay-inner-text::before {
  content: attr(data-label);
  display: block;
  margin-bottom: 24px;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.essay-inner-text::after {
  content: "※";
  position: absolute;
  right: 12px;
  top: 10px;
  font-family: Georgia, serif;
  font-size: 22px;
  line-height: 1;
}

.essay-inner-text h2,
.essay-inner-text h3 {
  margin: 0 0 24px 0;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.055em;
  color: #111111;
}

.essay-inner-text p {
  margin: 0 0 1.6em 0;
  font-size: inherit;
  line-height: inherit;
}

.essay-inner-text p:last-child {
  margin-bottom: 0;
}

.essay-inner-text .inner-author {
  display: block;
  margin-top: 26px;
  padding-top: 15px;
  border-top: 1px solid #111111;
  font-family: "Hahmlet", "Gowun Batang", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-align: right;
  letter-spacing: -0.02em;
}

.essay-inner-text blockquote {
  margin: 30px 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid #111111;
  font-family: "Song Myung", "Gowun Batang", serif;
  font-size: 21px;
  line-height: 1.55;
  letter-spacing: -0.04em;
}

@media (max-width: 900px) {
  .essay-inner-text {
    margin: 46px 0;
    padding: 34px 28px 30px 28px;
  }
}

@media (max-width: 560px) {
  .essay-inner-text {
    margin: 38px 0;
    padding: 30px 18px 26px 18px;
    font-size: 15px;
    line-height: 1.9;
  }

  .essay-inner-text::before {
    margin-bottom: 20px;
    padding-right: 28px;
    font-size: 10px;
  }

  .essay-inner-text::after {
    right: 8px;
    top: 9px;
    font-size: 18px;
  }

  .essay-inner-text h2,
  .essay-inner-text h3 {
    margin-bottom: 20px;
    font-size: 25px;
  }

  .essay-inner-text blockquote {
    margin: 26px 0;
    padding-left: 15px;
    border-left-width: 3px;
    font-size: 19px;
  }
}

/* ==================================================
   ESSAY NOTICE BOX
   본문 안 공지 영역 — Apple 시스템 폰트 계열
   사용 클래스: .essay-notice-box
   ================================================== */

.essay-notice-box {
  width: 100%;
  margin: 46px 0;
  padding: 24px 26px 22px;
  border: 1px solid #111111;
  background: #ffffff;
  color: #111111;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

.essay-notice-box::before {
  content: "공지";
  display: block;
  width: fit-content;
  margin-bottom: 14px;
  padding-bottom: 4px;
  border-bottom: 1px solid #111111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.essay-notice-box h2,
.essay-notice-box h3 {
  margin: 0 0 12px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.035em;
}

.essay-notice-box p {
  margin: 0 0 0.9em;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.essay-notice-box p:last-child {
  margin-bottom: 0;
}

.essay-notice-box ul,
.essay-notice-box ol {
  margin: 12px 0 0;
  padding-left: 1.3em;
}

.essay-notice-box li {
  margin: 0.45em 0;
  padding-left: 0.18em;
}

.essay-notice-box strong {
  font-weight: 700;
}

/* 공지 종류를 바꾸고 싶을 때 data-label 사용 */
.essay-notice-box[data-label]::before {
  content: attr(data-label);
}

/* ==================================================
   ESSAY PDF DOWNLOAD LINK
   기존 PDF 버튼과 분리된 본문형 다운로드 링크
   사용 클래스: .essay-pdf-text-link
   ================================================== */

.essay-pdf-text-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin: 16px 0;
  color: #111111 !important;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.7;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: currentColor;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.essay-pdf-text-link::before {
  content: "➡️";
  display: inline-block;
  flex: 0 0 auto;
  font-family: Georgia, serif;
  font-size: 1.05em;
  line-height: 1;
  text-decoration: none;
  transform: translateY(0.03em);
}

.essay-pdf-text-link:hover {
  opacity: 0.55;
  text-decoration-line: underline;
}

.essay-pdf-text-link:visited {
  color: #111111 !important;
}

.essay-pdf-text-link:focus-visible {
  outline: 1px solid #111111;
  outline-offset: 5px;
}

/* 공지 안에 PDF 링크가 있을 때 간격 조절 */
.essay-notice-box .essay-pdf-text-link {
  margin: 8px 0 0;
  font-family: "Gowun Batang", "Song Myung", serif;
  font-size: 16px;
}

@media (max-width: 560px) {
  .essay-notice-box {
    margin: 36px 0;
    padding: 20px 18px 18px;
    font-size: 14px;
    line-height: 1.7;
  }

  .essay-notice-box h2,
  .essay-notice-box h3 {
    font-size: 17px;
  }

  .essay-pdf-text-link {
    line-height: 1.65;
  }

  .essay-notice-box .essay-pdf-text-link {
    font-size: 15px;
  }
}

/* ==================================================
   ESSAY INNER TEXT — FINAL UNIFIED BOX
   박스 디자인만 통일하고 내부 h4 디자인은 건드리지 않음
   ================================================== */

.essay-inner-text {
  position: relative;
  margin: 54px 0;
  padding: 34px 32px 32px;
  background: #f7f7f7;
  border-top: 1px solid #d8d8d8;
  border-right: 0;
  border-bottom: 1px solid #d8d8d8;
  border-left: 4px solid #111111;
  color: #111111;
}

/* 기존 자동 라벨과 ※ 장식 제거 */
.essay-inner-text::before,
.essay-inner-text::after {
  content: none !important;
  display: none !important;
}

/* h4에는 별도 규칙을 넣지 않아 기존 디자인을 그대로 유지 */
@media (max-width: 900px) {
  .essay-inner-text {
    margin: 46px 0;
    padding: 30px 27px 28px;
  }
}

@media (max-width: 560px) {
  .essay-inner-text {
    margin: 38px 0;
    padding: 26px 18px 24px;
    border-left-width: 3px;
    font-size: 15px;
    line-height: 1.9;
  }
}

/* ==================================================
   ESSAY INNER TEXT HR — SAME AS PAGE 6
   ================================================== */
.essay-body > .essay-inner-text hr {
  display: block !important;
  width: min(180px, 42%) !important;
  height: 0 !important;
  margin: 3em auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1.5px solid #111111 !important;
  background: transparent !important;
  opacity: 1 !important;
}



/* ==================================================
   7번 essay-inner-text 안의 hr만 6번 inner-reply-start와 동일
   ================================================== */
.essay-body > .essay-inner-text hr{
  display:block;
  width:100%;
  height:0;
  margin:2.2em 0;
  padding:0;
  border:0;
  border-top:1px solid #bdbdbd;
  background:none;
  box-shadow:none;
}



/* ===== Essay Guide ===== */
.essay-inner-text-guide{
margin:56px 0;
border:1px solid #d9d9d9;
background:#fff;
}
.essay-inner-text-guide>summary{
display:flex;justify-content:space-between;align-items:center;
padding:18px 20px;background:#111;color:#fff;cursor:pointer;
font:700 14px "Hahmlet","Gowun Batang",serif;list-style:none;
}
.essay-inner-text-guide>summary::-webkit-details-marker{display:none}
.guide-summary-label::before{content:"GUIDE / ";font:400 .82em Georgia,serif;letter-spacing:.08em}
.guide-summary-icon{font:22px Georgia,serif;transition:.25s}
.essay-inner-text-guide[open] .guide-summary-icon{transform:rotate(45deg)}
.essay-inner-text-guide__content{
padding:28px 32px 30px 36px;
border-left:5px solid #111;
background:#fcfcfc;
border:1px solid #e5e5e5;
border-left:6px solid #111;
padding:34px 38px 36px 42px;
box-shadow:none;
font-family:"Gowun Batang","Song Myung",serif;
font-size:16px;line-height:1.95;color:#111;
}
.essay-inner-text-guide__content::before{display:none!important;content:none!important;}
.essay-inner-text-guide__content h4{
  font-size:19px;
  line-height:1.4;
}
.essay-inner-text-guide__content hr{
    position:relative;
    width:72%;
    height:1px;
    margin:2.7em auto;
    border:0;
    background:#111111;
    overflow:visible;
}
.essay-inner-text-guide__content hr::after{
    content:"◆";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-58%);
    padding:0 .7em;
    background:#fcfcfc;
    color:#111111;
    font-size:10px;
    line-height:1;
}
@media(max-width:560px){
.essay-inner-text-guide__content{
padding:24px 16px 24px 20px;
}
.essay-inner-text-guide__content hr{
margin:2em -16px 2em -20px;
width:calc(100% + 36px);
}
.guide-summary-label::before{display:none}
}


/* refinement */
.essay-inner-text-guide__content{
    font-size: 14.5px;
    line-height:1.9;
}

.essay-inner-text-guide__content hr{
    width:72%;
    margin:2.6em auto;
    border:0;
    border-top:1px solid #d2d2d2;
    opacity:1;
}

@media (max-width:560px){
 .essay-inner-text-guide__content{
    font-size: 13px;
    line-height:1.85;
 }
 .essay-inner-text-guide__content hr{
    width:68%;
    margin:2.3em auto;
 }
}


/* Mobile typography override (fix specificity/cache) */
@media screen and (max-width:560px){
  .essay-inner-text-guide .essay-inner-text-guide__content,
  .essay-inner-text-guide__content{
      font-size:14.5px !important;
      line-height:1.85 !important;
  }
}


/* Mobile typography tweak */
@media (max-width:560px){
  .essay-inner-text-guide h4{
    font-size:17px !important;
    line-height:1.35 !important;
  }
  .essay-inner-text-guide p,
  .essay-inner-text-guide li,
  .essay-inner-text-guide__content{
    font-size:14px !important;
    line-height:1.8 !important;
  }
}

/* ==================================================
   FINAL MOBILE GUIDE TYPOGRAPHY + HR FIX
   본문 전체 크기 통일 / 구분선 완전한 검정
   ================================================== */
@media screen and (max-width: 560px) {
  .essay-inner-text-guide__content {
    font-size: 16px !important;
    line-height: 1.9 !important;
    color: #111111 !important;
  }

  /* 뒤쪽 문단까지 모든 본문 요소가 부모 크기를 그대로 상속 */
  .essay-inner-text-guide__content p,
  .essay-inner-text-guide__content li,
  .essay-inner-text-guide__content div,
  .essay-inner-text-guide__content span,
  .essay-inner-text-guide__content strong,
  .essay-inner-text-guide__content em,
  .essay-inner-text-guide__content a {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .essay-inner-text-guide__content h4 {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .essay-inner-text-guide__content hr {
    display: block !important;
    position: relative !important;
    width: 68% !important;
    height: 0 !important;
    margin: 2.3em auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid #111111 !important;
    background: transparent !important;
    opacity: 1 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .essay-inner-text-guide__content hr::after {
    color: #111111 !important;
    background: #fcfcfc !important;
  }
}


/* Guide mobile typography tweak */
@media screen and (max-width:560px){
  .essay-inner-text-guide__content{
    font-size:14.5px !important;
    line-height:1.85 !important;
  }

  .essay-inner-text-guide__content h4{
    font-size:17px !important;
    line-height:1.35 !important;
  }
}