@charset "utf-8";
/* ==========================================================================
   기부자 기념공간 — 공간별 배치도
   상단 큰 머리는 partials/_hero.php 가 그립니다(다른 화면과 같은 조각).
   본체: 공간 탭 + 배치도 / 하단: 헌와 위치 · 안내 바
   ========================================================================== */

/* ---------- 본체 카드 ---------- */
.mem{
  border-radius:var(--radius-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m);
}
.mem__body{padding-bottom:30px;min-width:0}

/* ---------- 공간 탭 ---------- */
.mem__tabs{
  display:flex;gap:0;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none;
}
.mem__tabs::-webkit-scrollbar{display:none}
.mem__tab{
  appearance:none;border:0;background:transparent;cursor:pointer;
  padding:18px 30px;white-space:nowrap;
  font-size:15px;font-weight:700;color:var(--text-dim);
  border-bottom:3px solid transparent;margin-bottom:-1px;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .18s,border-color .18s,background .18s;
}
.mem__tab:hover{color:var(--brand);background:var(--bg-alt)}
.mem__tab[aria-selected="true"]{color:var(--brand);border-bottom-color:var(--brand)}
.mem__note{
  margin:22px 30px 0;font-size:13.5px;color:var(--text-dim);word-break:keep-all;
}

.mem__map{margin:16px 30px 0;min-width:0}
.mem__mapinner{
  border-radius:var(--radius-m);border:1px solid var(--line);background:var(--bg-alt);
  overflow:hidden;
}
.mem__mapinner img{width:100%;height:auto;display:block}
.mem__mapzoom{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--brand);text-decoration:underline;
}
.mem__mapempty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  min-height:min(52vh,420px);padding:36px 24px;text-align:center;
  border-radius:var(--radius-m);border:1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(0,116,176,.028) 10px 20px),
    var(--bg-alt);
}
.mem__mapicon{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky-soft);color:var(--brand);
}
.mem__mapempty b{font-size:15px;font-weight:800;color:var(--text-mid)}
.mem__mapempty span{font-size:13px;color:var(--text-dim);word-break:keep-all}

.mem__fallback{padding:60px 20px;text-align:center;color:var(--text-dim);font-size:14px}

/* ---------- 하단 안내 바 ---------- */
.mem__foot{padding:20px 30px 24px;border-top:1px solid var(--line);background:var(--surface)}

/* 헌와 위치 안내 — 방문객이 가장 먼저 찾는 정보라 맨 위에 눈에 띄게 둔다 */
.mem__place{
  display:flex;align-items:center;gap:10px;
  padding:14px 18px;border-radius:var(--radius-m);
  background:var(--sky-soft);border:1px solid #cfe6f3;
  font-size:14.5px;font-weight:700;color:var(--brand-strong);word-break:keep-all;
}
.mem__place b{font-weight:900}
.mem__place .ico{
  flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand);color:#fff;
}

.mem__footrow{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 20px;
  margin-top:18px;
}
.mem__footmsg{display:flex;align-items:flex-start;gap:13px;min-width:0}
.mem__footmsg .ico{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky-soft);color:var(--brand);
}
.mem__footmsg p{font-size:14px;font-weight:700;color:var(--text);word-break:keep-all}
.mem__footmsg span{display:block;margin-top:4px;font-size:12.5px;font-weight:400;color:var(--text-dim)}
.mem__footbtns{display:flex;gap:9px;flex-wrap:wrap}
.mem__btn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:12px 22px;border-radius:999px;font-size:14px;font-weight:800;
  transition:transform .18s,box-shadow .18s,background .18s;
}
.mem__btn--primary{
  background:linear-gradient(135deg,var(--royal),var(--royal-deep));color:#fff;
  box-shadow:0 8px 20px rgba(59,117,192,.3);
}
.mem__btn--dark{background:var(--navy);color:#fff}
.mem__btn:hover{transform:translateY(-2px)}

/* ---------- 명패 찾기 ---------- */
.mem__find{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin:26px 30px 0;
}
.mem__search{
  position:relative;display:flex;align-items:center;flex:1 1 340px;min-width:0;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
  transition:border-color .16s,box-shadow .16s;
}
.mem__search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(0,116,176,.13)}
.mem__searchico{display:grid;place-items:center;width:44px;flex:none;color:var(--text-dim)}
.mem__search input{
  flex:1;min-width:0;padding:13px 4px;border:0;background:none;
  font:inherit;font-size:15px;color:var(--text);
}
.mem__search input:focus{outline:none}
.mem__search input::-webkit-search-cancel-button{display:none}
.mem__clear{
  flex:none;margin-right:6px;padding:8px 14px;border:0;border-radius:999px;cursor:pointer;
  background:var(--bg-alt);color:var(--text-mid);font:inherit;font-size:13px;font-weight:700;
}
.mem__clear:hover{background:var(--line);color:var(--text)}
.mem__count{
  margin:0;flex:none;font-size:13.5px;font-weight:700;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

.mem__list{margin:18px 30px 4px;display:flex;flex-direction:column;gap:22px}
.mem__empty{
  margin:0;padding:34px 20px;text-align:center;border-radius:var(--radius-m);
  background:var(--bg-alt);color:var(--text-dim);font-size:14px;line-height:1.9;
  word-break:keep-all;
}
.mem__empty a{color:var(--brand-strong);font-weight:800;text-decoration:underline}
.mem__empty a:hover{color:var(--brand)}

/* 그룹 한 덩어리 — 색은 배치도 안내판의 그룹 색을 따라간다
 *
 * --gc  : 안내판과 같은 그룹 색. 밑줄 같은 장식에 씁니다.
 * --gci : 같은 색을 글자용으로 조금 어둡게 잡은 것.
 *         연두(#4a9a2f)와 주황(#c2701b)은 흰 바탕에서 3.5~3.7:1 밖에 되지
 *         않아, 글자로 쓰면 저시력이신 분께 흐리게 보입니다(기준 4.5:1).
 *         색감은 그대로 두고 명도만 낮춰 5:1 가까이 올렸습니다.
 *         밑줄은 장식이라 기준(3:1)을 이미 넘으므로 안내판 색 그대로 둡니다. */
.memgrp{--gc:var(--brand);--gci:var(--brand)}
.memgrp--pd{--gc:#1f6f3d;--gci:#1f6f3d}   /* Premium Diamond — 진한 초록 */
.memgrp--d {--gc:#4a9a2f;--gci:#3f8228}   /* Diamond — 연두 */
.memgrp--sb{--gc:#0074b0;--gci:#0074b0}   /* Silver-B — 파랑 */
.memgrp--sa{--gc:#2f7d32;--gci:#2f7d32}   /* Silver-A — 초록 */
.memgrp--g {--gc:#c2701b;--gci:#a05c12}   /* Gold — 주황 */

/* 헌와 — 명패의 금동색을 금액 구간에 따라 진하기만 달리했습니다.
   다섯 색 모두 흰 바탕에서 4.6:1 이상이라 글자로 써도 흐리지 않습니다
   (기준 4.5:1). 같은 색을 배지 바탕으로도 쓰므로 흰 글씨도 함께 통과합니다. */
.memgrp--h1{--gc:#7a4a10;--gci:#7a4a10}   /* 1억원 이상 — 7.5:1 */
.memgrp--h2{--gc:#8a5a16;--gci:#8a5a16}   /* 1천만원 이상 — 5.9:1 */
.memgrp--h3{--gc:#96651a;--gci:#96651a}   /* 5백만원 이상 — 5.0:1 */
.memgrp--h4{--gc:#9c6a1c;--gci:#9c6a1c}   /* 1백만원 이상 — 4.7:1 */
.memgrp--h5{--gc:#8a6a3a;--gci:#8a6a3a}   /* 1백만원 미만 — 5.0:1 */

.memgrp__head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  padding-bottom:10px;border-bottom:2px solid var(--gc);
}
.memgrp__badge{
  flex:none;display:grid;place-items:center;min-width:34px;height:26px;padding:0 8px;
  border-radius:999px;background:var(--gci);color:#fff;
  font-size:12px;font-weight:900;letter-spacing:.02em;
}
.memgrp__name{font-size:16px;font-weight:900;color:var(--text);letter-spacing:-.02em}
.memgrp__tree{
  font-size:12px;font-weight:700;color:var(--text-dim);
  padding:3px 9px;border-radius:999px;background:var(--bg-alt);
}
.memgrp__n{
  margin-left:auto;font-size:13px;font-weight:800;color:var(--gci);
  font-variant-numeric:tabular-nums;
}

.memgrp__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 20px;
}
.memplate{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 10px;border-radius:8px;min-width:0;
}
.memplate:hover{background:var(--bg-alt)}
.memplate__name{
  flex:1;min-width:0;font-size:14.5px;font-weight:700;color:var(--text);
  word-break:keep-all;
}
.memplate__note{
  display:block;font-style:normal;font-size:11.5px;font-weight:500;
  color:var(--text-dim);margin-top:2px;
}
.memplate__code{
  flex:none;font-size:12.5px;font-weight:800;color:var(--gci);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ---------- 반응형 ---------- */
@media (max-width:620px){
  .mem{margin-top:32px}
  .mem__tab{padding:15px 20px;font-size:14px}
  .mem__map,.mem__note,.mem__find,.mem__list{margin-inline:16px}
  .mem__find{gap:10px}
  .mem__count{width:100%;text-align:right}
  .memgrp__list{grid-template-columns:1fr}
  .memgrp__name{font-size:15px}
  .mem__foot{padding:18px 16px 20px}
  .mem__place{align-items:flex-start;font-size:13.5px;padding:13px 15px}
  .mem__footbtns{width:100%}
  .mem__btn{flex:1;justify-content:center}
}

/* ==========================================================================
   헌와(한옥정문) — 나무보드 · 명패 크게 보기
   보드 그림 위에 명패마다 누를 자리를 %로 얹습니다. 그림이 줄어들어도
   자리는 명패를 그대로 따라갑니다.
   ========================================================================== */
.memboard{
  border-radius:var(--radius-m);border:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;background:#b98747;
  -webkit-overflow-scrolling:touch;
}
/* 좁은 화면에서도 가로로 밀지 않고 통째로 줄입니다. 글씨는 작아지지만
   어차피 눌러서 크게 보는 그림이라, 안쪽에 또 스크롤이 생기는 편이
   훨씬 불편합니다. */
.memboard__row{
  position:relative;display:block;line-height:0;
}
.memboard__img{width:100%;height:auto;display:block}

/* 명패 한 칸 — 겉보기에는 테두리 없는 투명한 자리 */
.memboard__plate{
  position:absolute;margin:0;padding:0;cursor:zoom-in;
  border:0;border-radius:3px;background:transparent;
  transition:box-shadow .18s,transform .18s;
}
.memboard__plate .memboard__lens{
  position:absolute;right:5%;top:8%;
  width:clamp(22px,2.1vw,34px);height:clamp(22px,2.1vw,34px);
  display:grid;place-items:center;border-radius:50%;
  background:#ffd98a;color:#3a2c12;
  opacity:0;transform:scale(.7);
  transition:opacity .18s,transform .18s;
  box-shadow:0 2px 8px rgba(26,18,7,.5);
}
.memboard__plate .memboard__lens svg{width:62%;height:62%}

/* 마우스를 올리면 금빛 테가 돌면서 살짝 떠오릅니다 */
.memboard__plate:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 3px rgba(255,217,138,.95),
    0 0 26px 2px rgba(255,201,88,.55),
    0 10px 22px rgba(26,18,7,.45);
}
.memboard__plate:hover .memboard__lens{opacity:1;transform:scale(1)}

/* 키보드 초점 — 흰 테와 짙은 테를 겹쳐 둡니다.
   나무 바탕에서는 흰 테가(3.1:1), 금테 위에서는 짙은 테가(9.2:1)
   드러나므로 명패 어디에 놓여도 초점이 보입니다(기준 3:1). */
.memboard__plate:focus-visible{
  outline:3px solid #fff;outline-offset:2px;
  box-shadow:0 0 0 9px #1a1207;
  transform:translateY(-3px);
}
.memboard__plate:focus-visible .memboard__lens{opacity:1;transform:scale(1)}

.memboard__hint{
  margin:10px 0 0;font-size:13px;color:var(--text-dim);word-break:keep-all;
}

/* ---------- 명패 크게 보기 창 ---------- */
.memzoom{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:22px}
.memzoom[hidden]{display:none}
.memzoom__back{position:absolute;inset:0;background:rgba(10,20,30,.78);cursor:zoom-out}
html.memzoom-open{overflow:hidden}

.memzoom__panel{
  position:relative;width:min(1100px,100%);max-height:100%;
  display:flex;flex-direction:column;gap:12px;
  padding:16px 18px 18px;border-radius:var(--radius-m);
  background:var(--surface);box-shadow:var(--shadow-l);
}
.memzoom__bar{display:flex;align-items:center;gap:12px}
.memzoom__title{
  margin:0;flex:1;min-width:0;font-size:17px;font-weight:900;color:var(--text);
  word-break:keep-all;
}
.memzoom__close{
  flex:none;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:50%;
  background:var(--surface);color:var(--text-mid);
  transition:background .16s,color .16s;
}
.memzoom__close:hover{background:var(--bg-alt);color:var(--text)}

.memzoom__stage{
  flex:1;min-height:0;display:grid;place-items:center;
  border-radius:var(--radius-s,10px);background:#241d14;overflow:auto;
}
.memzoom__img{max-width:100%;max-height:min(66vh,760px);width:auto;height:auto;display:block}

.memzoom__foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.memzoom__nav{
  padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;cursor:pointer;
  background:var(--surface);color:var(--text-mid);font:inherit;font-size:13.5px;font-weight:700;
  transition:background .16s,color .16s,border-color .16s;
}
.memzoom__nav:hover:not(:disabled){background:var(--brand);border-color:var(--brand);color:#fff}
.memzoom__nav:disabled{opacity:.4;cursor:default}
.memzoom__pos{
  margin:0;font-size:13px;font-weight:800;color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}

/* ---------- 찾아가는 길 지도 ---------- */
.memmap{margin:26px 30px 0}
.memmap[hidden]{display:none}
.memmap__head{
  margin:0 0 10px;font-size:15px;font-weight:900;color:var(--text);letter-spacing:-.02em;
}
.memmap__frame{
  position:relative;aspect-ratio:16/9;border-radius:var(--radius-m);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-alt);
}
.memmap__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.memmap__addr{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
  margin:10px 0 0;font-size:13.5px;color:var(--text-dim);word-break:keep-all;
}
.memmap__pin{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--sky-soft);color:var(--brand);
}
.memmap__go{color:var(--brand-strong);font-weight:800;text-decoration:underline}
.memmap__go:hover{color:var(--brand)}

/* 하단 안내에서 헌와 탭으로 보내는 링크 */
.mem__place a{
  margin-left:6px;color:var(--brand-strong);font-weight:800;text-decoration:underline;
  white-space:nowrap;
}
.mem__place a:hover{color:var(--brand)}

@media (max-width:620px){
  .memmap{margin-inline:16px}
  .memmap__frame{aspect-ratio:4/3}
  .memzoom{padding:12px}
  .memzoom__panel{padding:13px 14px 15px}
  .memzoom__img{max-height:52vh}
  .memzoom__nav{padding:9px 12px;font-size:12.5px}
}

/* 움직임을 줄이도록 설정한 분께는 떠오름·확대를 끕니다 */
@media (prefers-reduced-motion:reduce){
  .memboard__plate,.memboard__lens{transition:none}
  .memboard__plate:hover,.memboard__plate:focus-visible{transform:none}
  .memboard__lens{transform:none !important}
}