@charset "utf-8";

/* ==========================================================================
   명예의 전당 — 홈페이지 디자인과 맞물리는 부분
   /assets/css/honor-search.css
   --------------------------------------------------------------------------
   1) 기부자 검색 상자를 사이트의 다른 찾기 상자와 같은 모양으로
   2) site.css 와 honor.css 가 부딪히는 곳 정리 (사진 가운데 정렬)
   --------------------------------------------------------------------------
   사이트의 다른 찾기 상자(sub01/04.php 의 .hssearch)와 같은 모양입니다.
   알약 꼴 테두리 · 왼쪽 돋보기 · 포커스 때 테두리가 살아나는 방식이 같고,
   색만 명예의 전당의 금색 바탕에 맞춰 바꿨습니다.

   /css/honor.css 다음에 실어서 예전 #bo_sch 규칙을 대신합니다.
   ========================================================================== */

.hnsearch {
  display: flex;
  justify-content: center;
  margin: 0 0 34px;
  padding: 0 10px;
}

.hnsearch__form {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 420px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: border-color .16s, box-shadow .16s;
}

.hnsearch__form:focus-within {
  /* 테두리도 '어디에 초점이 있는지' 를 알려 주는 표시라 3:1 이상이어야
     합니다(#e2a733 은 흰 바탕에 2.14:1). */
  border-color: #946815;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22), 0 0 0 4px rgba(148, 104, 21, .34);
}

.hnsearch__ico {
  display: grid;
  place-items: center;
  width: 44px;
  flex: none;
  color: #7b8794;
}

.hnsearch input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 13px 4px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: #1b242e;
}

.hnsearch input[type="search"]:focus { outline: none; }
.hnsearch input[type="search"]::-webkit-search-cancel-button { display: none; }

.hnsearch__btn {
  flex: none;
  margin: 5px;
  padding: 9px 22px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  /* 흰 글자를 얹는 색이라 4.5:1 을 넘도록 금색을 어둡게 잡았습니다.
     밝은 금색(#e2a733)은 2.14:1 이라 햇빛 아래나 눈이 불편한 분께
     글자가 뭉개져 보입니다. */
  background: #946815;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.02em;
  transition: background .16s;
}

.hnsearch__btn:hover,
.hnsearch__btn:focus-visible { background: #7c5710; }

@media (max-width: 640px) {
  .hnsearch { margin-bottom: 22px; }
  .hnsearch input[type="search"] { padding: 11px 4px; font-size: 14px; }
  .hnsearch__btn { padding: 8px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .hnsearch__form,
  .hnsearch__btn { transition: none; }
}


/* ==========================================================================
   사진 가운데 정렬
   --------------------------------------------------------------------------
   site.css 는 그림을 블록으로 깝니다(img{display:block}). 그러면 너비가
   정해진 사진이 가운데가 아니라 칸 왼쪽에 붙습니다. honor.css 는 글줄
   흐름에 놓인 그림을 text-align:center 로 가운데 맞추도록 짜여 있어서,
   그림을 원래대로 글줄 흐름에 돌려놓으면 예전처럼 가운데로 옵니다.
   ========================================================================== */

.honor_content img {
  display: inline-block;
  vertical-align: middle;
}

/* GOLD 는 사진에 오른쪽 여백 20px 이 붙어 있어 가운데에서 그만큼
   왼쪽으로 밀립니다. 가운데로 맞추기 위해 그 여백을 지웁니다. */
.gold_contnet ul li p img { margin-right: 0; }

/* 검색 상자 안의 돋보기는 위에서 잡은 그대로 두어야 합니다. */
.hnsearch__ico svg { display: block; }

/* 상단 큰 머리(partials/_hero.php) 바로 아래에 본문이 붙도록 합니다.
   honor.css 는 .honor_content 에 margin-top:80px 를 줍니다. 예전에는
   그 위가 흰 바탕이라 자연스러웠지만, 지금은 히어로와 본문 사이에
   흰 띠가 생깁니다. honor.css 다음에 실리므로 이 값이 이깁니다.
   (안쪽 padding:50px 0 80px 은 honor.css 것을 그대로 씁니다) */
.honor_content{margin-top:0}


/* ── 쪽 넘김 ─────────────────────────────────────────────────────────
   글자색 자체는 /css/honor.css 에서 기준에 맞게 고쳤습니다. 여기서는
   손가락·마우스가 닿았을 때의 색만 홈페이지 남색으로 맞춥니다. */
.pg_wrap a:hover,.pg_wrap a:focus-visible{color:var(--navy,#123a63)}


/* ── 명예의 전당 머리(히어로) — 크림색 비단 · 금 리본 ─────────────────
   다른 화면의 남색 머리와 달리, 명예의 전당은 밝은 크림 바탕에 금빛
   제목을 둡니다(재단 시안). 바탕 그림: assets/img/hero-honor-gold.jpg
   (2880×900, 가운데는 비워 두고 양옆에만 리본이 지나갑니다).

   제목 글꼴은 이랜드 나이스 Medium(재단이 보내 준 파일을 woff2 로 바꿔
   assets/fonts/ELANDNice-M.woff2 에 담았습니다 · 105KB). 방문자 컴퓨터에
   이미 깔려 있으면 그것을 먼저 씁니다. 명예의 전당 화면에서만 받습니다. */
@font-face{
  font-family:"ELAND Nice";
  src:local("ELAND Nice Medium"),local("ELANDNice-Medium"),
      url("/assets/fonts/ELANDNice-M.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
}

.hero--honor{background:#fbf1e2;color:#3a2c12}
.hero--honor::before,.hero--honor::after{display:none}          /* 남색 머리의 둥근 빛은 뺍니다 */
.hero--honor .hero__bg{opacity:1;background-position:center;background-color:#fbf1e2}
/* 사진 위 어두운 막 대신, 글자 뒤만 살짝 밝혀 금 리본과 겹쳐도 읽히게 */
.hero--honor .hero__bg::after{
  background:radial-gradient(ellipse 46% 62% at 50% 50%,rgba(255,252,244,.78),rgba(255,252,244,0) 100%);
}
.hero--honor h1{
  font-family:"ELAND Nice",var(--font);font-weight:500;
  font-size:clamp(34px,5.6vw,54px);   /* 이 글꼴은 글자가 조금 작게 그려져 한 단계 키웁니다 */
  letter-spacing:-.01em;color:#5a4520;
  /* 입체감 — 크림 바탕이라 남색 대신 밝은 윗면 · 모래색 층 · 옅은 금빛 그림자 */
  text-shadow:0 -.02em 0 #fff,0 .02em 0 #eadbbd,0 .04em 0 #dcc79f,0 .06em 0 #cdb384,
              0 .05em .1em rgba(120,80,0,.28),0 .11em .25em rgba(120,80,0,.16);
}
/* 금빛 제목 — 위는 밝은 금, 아래는 짙은 금. 크림 바탕에서도 큰 글자
   기준(3:1)을 넘도록 아래쪽을 짙게 잡았습니다. 그라디언트 글자를 못
   그리는 환경에서는 짙은 금색 한 가지(#a87a00, 3.45:1)로 보입니다. */
.hero--honor h1 em{
  color:#a87a00;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(190,140,20,.28);
}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .hero--honor h1 em{
    /* 밝은 금 — 위는 옅은 금빛, 가운데 반짝이는 띠, 아래로 갈수록 따뜻한 금색.
       (예전 #e4b31a → #8f6200 는 너무 짙어 보인다는 말씀에 밝게 바꿨습니다)
       크림 바탕에서 글자 모양이 흐려지지 않게 가는 금갈색 테두리를 두릅니다. */
    background:linear-gradient(180deg,#fff0a8 0%,#fbd54e 28%,#e8b020 52%,#f8d35a 70%,#d69a14 100%);
    background-size:100% 1.2em;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:#a87a00;
    -webkit-text-stroke:.5px rgba(150,100,10,.55);
    text-shadow:none;
    /* 입체감 — 그라디언트 글자에는 text-shadow 가 비쳐 보여 drop-shadow 를 겹칩니다.
       겹칠 때마다 1px 씩 아래로 쌓여 금판 같은 두께가 생깁니다. */
    filter:drop-shadow(0 -1px 0 rgba(255,255,255,.95))
           drop-shadow(0 1px 0 #c8961e) drop-shadow(0 1px 0 #ad7f14) drop-shadow(0 1px 0 #8f660c)
           drop-shadow(0 2.5px 4px rgba(120,80,0,.28));
  }
}
/* 고대비 모드에서는 그라디언트 글자가 사라질 수 있어 보통 글자로 */
@media (forced-colors:active){
  .hero--honor h1 em{-webkit-text-fill-color:currentColor;-webkit-text-stroke:0;background:none;filter:none}
}
.hero--honor p{color:#4a3818}

/* 예우등급 단추(클럽 이름)도 같은 글꼴로 */
.honor_tab ul li a{font-family:"ELAND Nice",var(--font);font-weight:500;letter-spacing:0}
.honor_tab ul li a.on{font-weight:500}
/* 첫 화면 명패의 클럽 이름 · 검색 결과 카드의 클럽 이름도 같은 글꼴로.
   검색 결과의 클럽 이름은 원래 분홍(#ff2455, 흰 바탕 3.7:1)이라 작은 글씨
   기준(4.5:1)에 못 미쳐 조금 짙게 했습니다(#d6123f, 5.2:1). */
.honor_menu ul li a p{font-family:"ELAND Nice",var(--font);font-weight:500}
.hn-club{font-family:"ELAND Nice",var(--font);font-weight:500;color:#d6123f}
/* 휴대폰에서는 글자가 작아 금판 두께를 두 겹으로 줄입니다(한글 획이 뭉개지지 않게) */
@media (max-width:640px){
  @supports (-webkit-background-clip:text) or (background-clip:text){
    .hero--honor h1 em{
      -webkit-text-stroke:0;          /* 작은 글씨에서는 테두리가 한글 획을 무겁게 합니다 */
      filter:drop-shadow(0 -1px 0 rgba(255,255,255,.95))
             drop-shadow(0 1px 0 #c8961e) drop-shadow(0 1px 0 #8f660c)
             drop-shadow(0 1.5px 2.5px rgba(120,80,0,.26));
    }
  }
}