*{margin:0;padding:0;box-sizing:border-box}
:root{--g:#00a000}
body{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  color:var(--g);
  background:#fff;
  line-height:1.45;
}
.container{
  max-width:700px;
  margin:0 auto;
  padding:2rem 1rem 6rem;
}

.section-block{
  margin-bottom:3rem;
  padding-top:1.2rem;
  border-top:1px solid var(--g);
}
.section-marker{
  font-size:.9rem;
  margin-bottom:1rem;
  opacity:.9;
}

/* DISCO (균일 폭 1줄) */
#disco-list{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.disco-line{
  display:grid;
  grid-template-columns:6rem .9rem 1fr .9rem 1fr .9rem 3.8rem;
  column-gap:.4rem;
  font-size:.9rem;
  white-space:nowrap;
}
.disco-line .col{
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.disco-line .sep{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
}

/* PICS GRID */
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.4rem;
}
@media(max-width:760px){
  .grid{grid-template-columns:repeat(3,1fr);}
}
.grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  cursor:pointer;
}

/* INFO — 중심 人 + 양측 정보 정렬 */
.info-grid{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:3rem;
}

/* 왼쪽 카드 = 오른쪽 정렬 */
.info-card:first-child{
  text-align:right;
}
.info-card:first-child .info-pic{
  margin-left:auto;
  display:block;
}

/* 오른쪽 카드 = 왼쪽 정렬 */
.info-card:last-child{
  text-align:left;
}
.info-card:last-child .info-pic{
  margin-right:auto;
  display:block;
}

/* 공통 */
.info-card{
  white-space:normal;
  color:var(--g);
  pointer-events:none;
  font-size:1rem;
  line-height:1.45;
}
.info-pic{
  width:150px;
  height:150px;
  object-fit:cover;
  cursor:pointer;
  pointer-events:auto;
  margin-bottom:.5rem;
}

/* 가운데 人 */
.info-glyph{
  font-size:min(18vw,180px);
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;                 /* 속 비우기 */
  -webkit-text-stroke:2px var(--g);  /* 초록 테두리 */
  text-stroke:2px var(--g);
}

/* 이메일 */
.mail{
  text-decoration:none;
  color:var(--g);
  border-bottom:1px solid transparent;
}
.mail:hover{
  border-bottom:1px solid var(--g);
}

/* MODAL */
#modal{
  background:#fff;
  border:none;
  max-width:600px;
  width:90%;
  padding:1rem;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:var(--g);
}
#modal::backdrop{
  background:rgba(0,0,0,.4);
}
.close{
  position:absolute;
  right:.5rem;
  top:.3rem;
  background:none;
  border:0;
  font-size:1.2rem;
  color:var(--g);
  cursor:pointer;
}
#modal-img{
  width:100%;
  height:auto;
  max-height:100vh;
  object-fit:contain;
}
#modal-notes{
  margin-top:1rem;
  font-size:.9rem;
  line-height:1.6;
  color:var(--g);
}
/* === MOBILE RATIO FIX PACK === */

/* 1) 썸네일(심 xīn / shén) : 컨테이너를 정확한 정사각형으로 만들고,
      이미지를 절대배치 + object-fit:cover */
.thumb{position:relative;margin:0}
.thumb::before{content:"";display:block;padding-top:100%} /* 정사각 프레임 */
.thumb > img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover; /* 잘려도 비율 유지 */
  display:block;cursor:pointer;
}

/* 그리드는 셀 갯수만 제어 (이미지 비율은 thumb이 책임짐) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}
@media(max-width:760px){.grid{grid-template-columns:repeat(3,1fr)}}

/* 2) INFO 사진: 썸네일과 동일한 ‘정사각 + 커버’ 느낌으로 고정 */
.info-pic{
  width:150px;height:150px; /* 필요하면 숫자만 바꿔 */
  object-fit:cover;display:block;cursor:pointer;
}

/* 3) 모달 이미지: 모바일 주소창 높이 변화를 고려해 dvh 사용 */
#modal-img{
  width:100%;height:auto;object-fit:contain;
  max-width:90vw;
  max-height:70dvh;            /* iOS 등에서 더 안정적 */
}
/* === MOBILE 비율 고정 + 가로 스크롤 차단 패치 === */

/* 0) 전역: 가로 스크롤 차단 */
html, body { overflow-x: hidden; width: 100%; }
img, svg, video { max-width: 100%; height: auto; display: block; }
.container { max-width: 700px; width: 100%; overflow-x: hidden; }

/* 1) DISCO 줄맞춤: 극소 화면에서도 깨지지 않게 컬럼 수축 허용 + 폰트 유동 */
.disco-line{
  grid-template-columns:
    minmax(5rem,6rem) .9rem
    minmax(0,1fr)     .9rem
    minmax(0,1fr)     .9rem
    minmax(3.2rem,3.8rem);
  font-size: clamp(.75rem, 3.2vw, .9rem);
}

/* 2) 썸네일/프로필: 이미 정사각 유지 중. 모바일에서도 동일 비율 고정(기존 규칙 보강) */
.thumb::before{ padding-top:100%; }      /* 정사각 프레임 고정 */
.thumb > img{ object-fit:cover; }         /* 크롭로 비율 유지 */
.info-pic{ width:150px; height:150px; }   /* 정사각 고정 */

/* 3) INFO 3열(카드-人-카드) 모바일 감싸기: 비율은 유지, 가로 넘침만 제거 */
.info-grid{
  flex-wrap: wrap;
  gap: clamp(1rem, 6vw, 3rem);
}

/* 모바일에서 배치만 재정렬. 비율 유지 + 가운데 人은 한 줄 차지 */
@media (max-width: 760px){
  .info-card{ flex: 1 1 280px; }
  .info-glyph{
    flex-basis: 100%;
    text-align: center;
    margin: .5rem 0;
  }
}

/* 4) 모달: 뷰포트에 맞춰 안전하게 축소 (가로 스크롤 방지) */
#modal{ max-width: 100vw; }
#modal-img{
  max-width: 90vw;
  max-height: 70dvh;   /* 모바일 주소창 변동 대응 */
}
/* === INFO: 3열 고정(모바일 포함) === */
.info-grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;   /* 좌 · 心 · 우 */
  align-items:center;
  justify-items:center;
  gap: clamp(1rem, 6vw, 3rem);
}

/* 좌/우 카드가 그리드 셀 안에서 줄바꿈하며 수축되게 */
.info-card{
  max-width: 260px;       /* 필요 시 줄이면서 유지 */
  width: 100%;
  white-space: normal;
  overflow-wrap: anywhere; /* 이메일 등 긴 문자열 대응 */
  min-width: 0;
}

/* 사진은 화면폭에 맞춰 축소. 비율 유지 */
.info-pic{
  width: clamp(96px, 28vw, 150px);
  height: clamp(96px, 28vw, 150px);
  object-fit: cover;
}

/* 가운데 心 크기 유동. 한 줄 유지 */
.info-glyph{
  font-size: clamp(72px, 24vw, 180px);
  line-height: 1;
}

/* 전역 가로 스크롤 차단 유지(이미 적용되어도 중복 허용) */
html, body { overflow-x: hidden; width: 100%; }
/* === INFO 글꼴 / 크기 / 스타일 통일 === */
.info-card{
  font-size: .9rem;      /* DISCO / shen-grid 기본 텍스트 크기와 일치 */
  line-height: 1.45;     /* 문단 줄높이 통일 */
  font-family: inherit;  /* body와 동일 폰트 */
  color: var(--g);       /* 이미 동일하지만 혹시 모르니 명시 */
}
/* === 중앙 心을 이미지로 대체 === */
.info-glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0; /* 기존 텍스트 숨기기 */
}

.info-glyph-img{
  width: clamp(72px, 24vw, 180px);
  height: auto;
  object-fit: contain;
  display:block;
  pointer-events:none; /* 클릭 방지 (원하면 빼도 됨) */
}
/* INFO — 3장(좌 · 가운데 · 우) 항상 한 줄 유지 (PC + 모바일) */
.info-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3열 고정 */
  align-items:flex-start;
  justify-items:center;
  gap:1.5rem;
}

/* 공통 카드 스타일 */
.info-card{
  max-width:200px;          /* 텍스트가 너무 길면 줄바꿈되게 */
  width:100%;
  white-space:normal;
  overflow-wrap:anywhere;
  font-size:.9rem;
  line-height:1.45;
  color:var(--g);
  pointer-events:none;
}

/* 왼쪽 카드 = 오른쪽 정렬 */
.info-card:first-child{
  text-align:right;
}
.info-card:first-child .info-pic{
  margin-left:auto;
}

/* 오른쪽 카드 = 왼쪽 정렬 */
.info-card:last-child{
  text-align:left;
}
.info-card:last-child .info-pic{
  margin-right:auto;
}

/* info 사진들(양옆 인물 사진) */
.info-pic{
  width:min(120px, 24vw);   /* 화면이 좁아지면 자동으로 같이 작아짐 */
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  display:block;
  cursor:pointer;
  pointer-events:auto;
  margin-bottom:.4rem;
}

/* 가운데 testmid.png 들어가는 칸 */
.info-glyph{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;              /* 혹시 남아 있을 텍스트 숨김 */
}

/* 가운데 이미지 (testmid.png) */
.info-glyph-img{
  width:min(120px, 24vw);   /* 양옆 사진과 같은 스케일로 줄어듦 */
  aspect-ratio:1/1;
  height:auto;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

/* 모바일에서 간격만 살짝 줄이기 */
@media (max-width:480px){
  .info-grid{
    gap:1rem;
  }
  .info-card{
    font-size:.85rem;
  }
}
/* 데스크톱에서 모달 안 사진/텍스트 좌우 간격 동일하게 맞추기 */
@media (min-width: 761px){
  /* 모달 자체의 좌우 padding 제거 */
  #modal{
    padding-inline: 0;
  }

  /* 사진과 텍스트에 같은 폭의 좌우 padding 부여 */
  #modal-img,
  #modal-notes{
    padding-inline: 1rem;   /* 모바일에서 마음에 들던 여백 값과 동일하게 */
    box-sizing: border-box; /* padding 포함해서 100%로 계산 */
  }
}
/* =========================================
   MODAL — PC/모바일 모두 사진·텍스트 폭 동일 정렬
   ========================================= */

/* 모달 전체: 좌우 padding 제거 */
#modal{
  padding:0 !important;
  max-width:600px;
  width:90%;
  background:#fff;
  border:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:var(--g);
}

/* 이미지·텍스트 공통: 같은 좌우 여백 */
#modal-img,
#modal-notes{
  padding:0 1rem !important;
  box-sizing:border-box !important; /* padding 포함해 100% 계산 */
  max-width:100% !important;
}

/* 이미지 */
#modal-img{
  width:100% !important;
  height:auto !important;
  max-height:70dvh !important;
  object-fit:contain !important;
  display:block !important;
}

/* 텍스트 */
#modal-notes{
  margin-top:1rem !important;
  font-size:.9rem;
  line-height:1.6;
  color:var(--g);
}

/* 모바일 최적화 */
@media(max-width:760px){
  #modal{
    width:100% !important;
    max-width:100vw !important;
  }
}
/* =========================================
   MODAL — 사진 위·아래·좌·우 여백 동일 + 텍스트 정렬 동일
   ========================================= */

#modal{
  padding:0 !important;                /* 모달 기본 패딩 제거 */
  max-width:600px;
  width:90%;
  background:#fff;
  border:none;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  color:var(--g);
}

/* 사진·텍스트 공통 여백 — 위/아래/좌/우 모두 동일 */
#modal-img,
#modal-notes{
  padding:1rem !important;             /* 네 방향 모두 1rem */
  box-sizing:border-box !important;    /* padding 포함 폭 계산 */
  max-width:100% !important;
}

/* 이미지 */
#modal-img{
  width:100% !important;
  height:auto !important;
  max-height:70dvh !important;
  object-fit:contain !important;
  display:block !important;
}

/* 텍스트 */
#modal-notes{
  margin:0 !important;                 /* 위 margin 제거 (이미 padding 있음) */
  font-size:.9rem;
  line-height:1.6;
  color:var(--g);
}

/* 모바일 */
@media(max-width:760px){
  #modal{
    width:100% !important;
    max-width:100vw !important;
  }
}
/* 모달 X 버튼 숨기기 */
/* X 버튼 제거 */
/* 모달 X 버튼 숨기기 */
.close{
  display:none !important;
}

/* 모달에 생기는 파란 포커스 테두리 제거 */
#modal,
#modal:focus,
#modal:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  border:none !important;
}