/* ===== MEMU 탄생화 — 검정 풀스크린 · 흰 monospace ===== */

/* -----------------------------------------------------------------
 * 풀스크린: 탄생화 3개 화면에서만 헤더/푸터 숨김 + 검정 풀블리드.
 * 테마(Astra/블록테마/Elementor 등)에 상관없이 동작하도록 선택자 확장.
 * 스토어/커뮤니티 등 다른 페이지에는 영향 없음(클래스가 없으므로).
 * ----------------------------------------------------------------- */
html:has(body.memu-fullscreen),
body.memu-fullscreen{ background:#000 !important; }
body.memu-fullscreen{ color:#fff; margin:0; overflow-x:hidden; }

/* 헤더 / 푸터 / 페이지 제목 / 브레드크럼 숨김 */
body.memu-fullscreen header.site-header,
body.memu-fullscreen #masthead,
body.memu-fullscreen .site-header,
body.memu-fullscreen header[role="banner"],
body.memu-fullscreen [data-elementor-type="header"],
body.memu-fullscreen .ast-above-header-wrap,
body.memu-fullscreen .ast-below-header-wrap,
body.memu-fullscreen .main-header-bar-wrap,
body.memu-fullscreen .ast-sticky-header-wrap,
body.memu-fullscreen footer.site-footer,
body.memu-fullscreen #colophon,
body.memu-fullscreen .site-footer,
body.memu-fullscreen footer[role="contentinfo"],
body.memu-fullscreen [data-elementor-type="footer"],
body.memu-fullscreen .ast-small-footer,
body.memu-fullscreen .entry-header,
body.memu-fullscreen .page-header,
body.memu-fullscreen .entry-title,
body.memu-fullscreen .page-title,
body.memu-fullscreen .wp-block-post-title,
body.memu-fullscreen .ast-archive-description,
body.memu-fullscreen .ast-breadcrumbs,
body.memu-fullscreen nav.woocommerce-breadcrumb{ display:none !important; }

/* 본문 래퍼 폭/여백/배경 리셋 (가능한 많은 테마 래퍼 커버) */
body.memu-fullscreen #page,
body.memu-fullscreen .site,
body.memu-fullscreen #content,
body.memu-fullscreen .site-content,
body.memu-fullscreen .content-area,
body.memu-fullscreen .ast-container,
body.memu-fullscreen #primary,
body.memu-fullscreen .entry-content,
body.memu-fullscreen main,
body.memu-fullscreen .wp-site-blocks{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:#000 !important;
  border:0 !important;
  box-shadow:none !important;
}

/* 풀블리드: 어떤 좁은 컨테이너 안에 있어도 화면 전체 폭으로 펼침 */
/* 뷰포트 기준 풀스크린: 부모 컨테이너 폭(예: Astra .entry-content)이 좁아도 무시.
 * position:fixed 로 화면 전체를 덮고, 내용이 길면 내부 스크롤. */
body.memu-fullscreen{ overflow:hidden; }
body.memu-fullscreen .memu-entry,
body.memu-fullscreen .memu-result,
body.memu-fullscreen .memu-grid-page{
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:auto;
  max-width:none;
  margin:0;
  min-height:100vh;
  overflow-y:auto;
  z-index:1;
  box-sizing:border-box;
}

/* 버튼: 검정 배경용(흰 테두리) */
.memu-btn--light{ background:transparent; color:#fff; border-color:#fff; }
.memu-btn--light:hover{ background:#fff; color:#000; }

/* -----------------------------------------------------------------
 * 1) 입장(검색) 페이지
 * ----------------------------------------------------------------- */
.memu-entry{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  color:#fff;
  text-align:center;
  padding:40px 20px;
  box-sizing:border-box;
}
.memu-entry__form{ width:100%; max-width:480px; }
.memu-entry__title{
  font-family:var(--memu-mono,monospace);
  color:#fff;
  font-size:clamp(18px,4vw,26px);
  font-weight:500;
  margin-bottom:28px;
  letter-spacing:.5px;
  word-break:keep-all;
}
.memu-entry__input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid #fff;
  color:#fff;
  font-family:var(--memu-mono,monospace);
  font-size:15px;
  text-align:center;
  letter-spacing:2px;
  padding:12px 8px;
  margin-bottom:22px;
  box-sizing:border-box;
}
.memu-entry__input::placeholder{ color:#888; letter-spacing:1px; }
.memu-entry__input:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.memu-entry__btn{ background:transparent; color:#fff; border-color:#fff; }
.memu-entry__btn:hover{ background:#fff; color:#000; }
.memu-entry__help{
  min-height:1.2em; margin-top:14px; font-size:12px; color:#bbb;
  font-family:var(--memu-mono,monospace);
}

/* -----------------------------------------------------------------
 * 2) 결과 페이지 — 좌 그림 / 우 설명, 좌상단 캡션
 * ----------------------------------------------------------------- */
.memu-result{
  min-height:100vh;
  background:#000;
  color:#fff;
  box-sizing:border-box;
  padding:32px clamp(20px,5vw,64px) 64px;
}
.memu-result__code{
  font-family:var(--memu-mono,monospace);
  font-size:12px;
  letter-spacing:.5px;
  color:#fff;
  margin:0 0 28px;
  text-align:left;
  word-break:keep-all;
}
/* minmax(0,1fr) — 자식 칼럼이 0폭으로 무너지거나(글자 세로 깨짐) 넘치지 않도록 */
.memu-result__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,5vw,56px);
  align-items:center;
}
.memu-result__img{ min-width:0; }
.memu-result__img img{
  width:100%; height:auto; display:block;
  filter:grayscale(1);
}
.memu-result__body{ min-width:0; }
.memu-result__heading{
  font-family:var(--memu-mono,monospace);
  color:#fff;
  font-size:clamp(18px,2.4vw,24px);
  line-height:1.6;
  margin:0 0 24px;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.memu-result__text{
  font-size:15px;
  line-height:1.9;
  color:#eee;
  margin-bottom:24px;
  white-space:normal;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.memu-result__text p{ margin:0 0 1em; }
.memu-result__meaning{
  font-family:var(--memu-mono,monospace);
  color:#fff;
  font-size:15px;
  line-height:1.7;
  margin-bottom:32px;
  white-space:normal;
  word-break:keep-all;
}
.memu-result__nav{ display:flex; gap:12px; }

/* -----------------------------------------------------------------
 * 3) 전체 그리드 (see all) — 6열 흑백 카드, 365개 전부
 * ----------------------------------------------------------------- */
.memu-grid-page{
  min-height:100vh;
  background:#000;
  color:#fff;
  box-sizing:border-box;
  padding:40px clamp(20px,4vw,48px) 64px;
}
.memu-grid-page__head{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:32px;
}
.memu-grid-page__title{
  font-family:var(--memu-mono,monospace);
  color:#fff; font-size:18px; letter-spacing:1px; margin:0;
}
.memu-grid{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:18px;
}
.memu-grid__link{ display:block; text-decoration:none; color:#fff; }
.memu-grid__thumb{ display:block; aspect-ratio:1/1; overflow:hidden; background:#111; }
.memu-grid__thumb img{
  width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:opacity .2s;
}
.memu-grid__link:hover .memu-grid__thumb img{ opacity:.6; }
.memu-grid__caption{
  display:block; margin-top:8px;
  font-family:var(--memu-mono,monospace);
  font-size:11px; letter-spacing:.3px; color:#ccc; line-height:1.4;
  word-break:keep-all;
}
.memu-grid-page__empty{ color:#888; font-family:var(--memu-mono,monospace); }

/* -----------------------------------------------------------------
 * 반응형
 * ----------------------------------------------------------------- */
@media (max-width:921px){
  .memu-result__grid{ grid-template-columns:1fr; gap:28px; }
  .memu-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
}

/* =================================================================
 * 레퍼런스(messymute) 매칭 — 폰트 + 입력칸/결과이미지/그리드 디테일
 * 사용자 제공 폰트: Tasan Bold (assets/fonts/tasan.woff2)
 * ================================================================= */
@font-face{
  font-family:"Tasan";
  src:url("fonts/tasan-regular.woff2") format("woff2");
  font-weight:normal; font-style:normal; font-display:swap;
}

/* 탄생화 3화면 전체에 Tasan 적용 */
body.memu-fullscreen .memu-entry,
body.memu-fullscreen .memu-entry *,
body.memu-fullscreen .memu-result,
body.memu-fullscreen .memu-result *,
body.memu-fullscreen .memu-grid-page,
body.memu-fullscreen .memu-grid-page *{
  font-family:"Tasan","IBM Plex Mono",monospace;
}

/* 입장 입력칸 — 레퍼런스 측정값 (355x49, #ccc, radius4, 24px, 중앙) */
body.memu-fullscreen .memu-entry__input{
  width:355px; height:49px; max-width:90vw;
  padding:10px 20px; line-height:29px;
  border:0; border-radius:4px;
  background:#cccccc; color:#000;
  font-size:24px; text-align:center; letter-spacing:normal;
  box-sizing:border-box;
}
body.memu-fullscreen .memu-entry__input::placeholder{ color:#808080; opacity:1; }
body.memu-fullscreen .memu-entry__btn{
  font-size:26px; padding:6px 20px 4px;
  background:#fff; color:#000; border:0; border-radius:0; margin-top:12px;
}
body.memu-fullscreen .memu-entry__title{ font-size:30px; color:#eee; }

/* 결과 페이지: 화이트 톤 + 가운데 사진 / 세로 구분선 / 텍스트 (이 페이지만 화이트) */
body.memu-fullscreen .memu-result{ padding:0; background:#fff !important; color:#111; }
body.memu-fullscreen .memu-result__code{ position:absolute; top:20px; left:0; right:0; text-align:center; color:#111; margin:0; z-index:2; }
body.memu-fullscreen .memu-result__grid{ grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:0; min-height:100vh; align-items:stretch; }
body.memu-fullscreen .memu-result__img{ background:#fff; height:100vh; display:flex; align-items:center; justify-content:center; padding:72px 32px 32px; box-sizing:border-box; }
body.memu-fullscreen .memu-result__img img{ max-height:calc(100vh - 104px); max-width:100%; width:auto; object-fit:contain; filter:grayscale(1); }
body.memu-fullscreen .memu-result__body{ align-self:center; padding:72px clamp(24px,5vw,72px); border-left:1px solid #111; color:#111; background:#fff; }
body.memu-fullscreen .memu-result__heading{ color:#111; }
body.memu-fullscreen .memu-result__en{ color:#888; }
body.memu-fullscreen .memu-result__text{ color:#222; }
body.memu-fullscreen .memu-result__meaning{ color:#111; }
body.memu-fullscreen .memu-result__nav .memu-btn--light{ background:transparent; color:#111; border-color:#111; }
body.memu-fullscreen .memu-result__nav .memu-btn--light:hover{ background:#111; color:#fff; }

/* see all — 세로형 카드 + 흰 카드/얇은 테두리 + 작은 간격 + 상단 main 중앙 */
body.memu-fullscreen .memu-grid-page__head{ justify-content:center; }
body.memu-fullscreen .memu-grid-page__title{ display:none; }
body.memu-fullscreen .memu-grid{ gap:8px; }
body.memu-fullscreen .memu-grid__thumb{ aspect-ratio:3/4; background:#fff; border:1px solid #cfcfcf; }
body.memu-fullscreen .memu-grid__thumb img{ object-fit:contain; background:#fff; }

@media (max-width:921px){
  body.memu-fullscreen .memu-result__grid{ grid-template-columns:1fr; }
  body.memu-fullscreen .memu-result__img{ height:auto; min-height:50vh; }
}

@media (max-width:921px){
  body.memu-fullscreen .memu-result__body{ border-left:0; border-top:1px solid #111; }
}

/* ================= v1.3.0 레퍼런스 디테일 매칭 ================= */
/* 결과 본문 = 본고딕(Noto Sans KR), 버튼/캡션 = Tasan */
body.memu-fullscreen .memu-result__heading,
body.memu-fullscreen .memu-result__text,
body.memu-fullscreen .memu-result__text *,
body.memu-fullscreen .memu-result__meaning{ font-family:"Noto Sans KR","Apple SD Gothic Neo",sans-serif; }
body.memu-fullscreen .memu-result__nav .memu-btn,
body.memu-fullscreen .memu-result__code{ font-family:"Tasan","IBM Plex Mono",monospace; }

/* 입장: enter 아래로 + 플레이스홀더 더 옅게 */
body.memu-fullscreen .memu-entry__form{ display:flex; flex-direction:column; align-items:center; gap:14px; }
body.memu-fullscreen .memu-entry__btn{ margin-top:4px; }
body.memu-fullscreen .memu-entry__input::placeholder{ color:#b8b8b8; opacity:1; }

/* 결과 main/see all: 검정 버튼 흰 글자, hover 회색 버튼 검정 글자 */
body.memu-fullscreen .memu-result__nav .memu-btn{ background:#111; color:#fff; border:1px solid #111; }
body.memu-fullscreen .memu-result__nav .memu-btn:hover{ background:#bdbdbd; color:#111; border-color:#bdbdbd; }

/* see all 그리드: 캡션 제거(사진만), 양쪽 검정 여백, 좁은 간격, 세로 카드 */
body.memu-fullscreen .memu-grid-page{ padding:32px calc(100vw / 8) 64px !important; }
body.memu-fullscreen .memu-grid{ gap:3px; }
body.memu-fullscreen .memu-grid__caption{ display:none; }
body.memu-fullscreen .memu-grid__thumb{ aspect-ratio:4/5; background:#fff; border:1px solid #cfcfcf; }
body.memu-fullscreen .memu-grid__thumb img{ object-fit:contain; background:#fff; }

/* see all main 버튼: 상단 중앙, 흰 박스 검정 글자, hover 진회색 박스 흰 글자 */
body.memu-fullscreen .memu-grid-page__head{ justify-content:center; margin-bottom:28px; }
body.memu-fullscreen .memu-grid-page__head .memu-btn{ background:#fff; color:#111; border:0; padding:8px 26px; font-size:22px; }
body.memu-fullscreen .memu-grid-page__head .memu-btn:hover{ background:#333; color:#fff; }