:root{
  --bg:#233D4D;
  --text:#F5EFE7;
  --accent:#FE7F2D;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: "ABCFavorit", Arial, sans-serif;
}

.page{
  min-height:100vh;
  padding:32px 20px 40px;
  display:flex;
  flex-direction:column;
  max-width:1100px;
  margin:0 auto;
}

.controls{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
  font-size:12px;
  letter-spacing:0.15em;
  text-transform:uppercase;
}

.controls label{
  padding:4px 10px;
  border:1px solid rgba(245,239,231,0.6);
}

.controls input[type="range"]{
  flex:1;
}

.text-body{
  font-size:clamp(20px, 2.7vw, 30px);
  line-height:1.25;
  filter:blur(14px);           /* 처음엔 많이 흐리게 */
  transition:filter .25s ease; /* 슬라이더 움직일 때 부드럽게 */
}

/* 제목을 조금 더 크게 */
.text-body h1{
  font-size:clamp(32px, 3.4vw, 42px);
  margin:0 0 18px;
}

/* I 글자 : 속 비우고 테두리만 */
.letter-i{
  -webkit-text-stroke:1px var(--text);
  color:transparent;
  font-weight:900;
  cursor:pointer;
}

/* I 위에 올리면 채워지고 살짝 강조 */
.letter-i:hover{
  color:var(--text);
  background:rgba(254,127,45,0.12);
}

/* 호버 사진: 브루탈 감성이라 라운드/그림자 없음 */
/* 호버 사진 — 항상 한 버전만 남겨두기! */
.hover-photo {
  position: fixed;          /* 화면 기준으로 위치 */
  top: 0;
  left: 0;
  transform: translate(-50%, -110%); /* 마우스 위치 기준, 살짝 위에 */
  display: none;            /* 기본은 숨김 */
  pointer-events: none;     /* 사진 위에 마우스 올라가도 텍스트 호버 안 깨지게 */
  z-index: 1000;
        /* 브루탈 느낌, 원하면 없애도 됨 */
  margin: 0;
  padding: 0;
}

.hover-photo img {
  display: block;
  max-width: 350px;         /* 사진 너무 크지 않게 */
  max-height: 350px;
  object-fit: cover;
}