/* -------------------------
   Base / Reset
-------------------------- */

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Times New Roman", Times, serif;
  background-color: #fafafa;
  color: #111;
  line-height: 1.7;
}

/* -------------------------
   Layout
-------------------------- */

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 24px 120px;
}

/* -------------------------
   Typography
-------------------------- */

h1 {
  font-size: 3.2rem;
  margin-bottom: 4rem;
  /* white-space: nowrap;   한 줄 유지 */
  overflow: visible;    /* 잘리지 않게 */
}

h2 {
  font-size: 1.3rem;         /* 소제목 크게 */
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}

/* 랜덤한 느낌을 주기 위한 미세한 변형 */
section:nth-of-type(odd) h2 {
  letter-spacing: 0.12em;
}

section:nth-of-type(even) h2 {
  letter-spacing: 0.04em;
}

p {
  margin: 0 0 1.4rem 0;
  max-width: 65ch;
}

/* -------------------------
   Sections
-------------------------- */

section {
  margin-bottom: 4.5rem;
  position: relative;
}

/* 랜덤 오프셋처럼 보이는 subtle shift */
section:nth-of-type(3n) {
  transform: translateX(-6px);
}

section:nth-of-type(4n) {
  transform: translateX(8px);
}

/* -------------------------
   Links
-------------------------- */

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

a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: #111;
  transform-origin: left;
  transition: transform 0.2s ease;
}

a:hover::after {
  transform: scaleX(1);
}

/* -------------------------
   Emphasis
-------------------------- */

em {
  font-style: italic;
}

/* -------------------------
   Footer
-------------------------- */

footer {
  margin-top: 6rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

/* -------------------------
   Random Noise Effect
-------------------------- */

/* 아주 약한 노이즈 레이어 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 30% 30%,
    rgba(0,0,0,0.015),
    rgba(0,0,0,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

img {
    position: relative;
  z-index: 2; /* noise 위로 */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 3rem 0;
}

/* -------------------------
   Responsive
-------------------------- */

@media (max-width: 600px) {
  main {
    padding: 40px 20px 80px;
  }

  h1 {
    font-size: 1.8rem;
  }
}