@charset "utf-8";
/* ==========================================================================
   골든디아망 공지사항 및 EVENT — 목록 1장 + 상세 4장
   main.css → sub.css → 이 파일 순으로 로드한다. 토큰·헤더·드로어·버튼·
   Contact·푸터·리빌은 전부 앞의 두 파일 것을 그대로 쓴다.

   다섯 장(events / event-summer / event-age-reset / event-motiva /
   event-selexo)이 같은 파일을 쓴다. 마크업은 tools/make_184.py 가 만든다 —
   손으로 고치지 말 것(드로어 130개 링크가 장마다 어긋난다).

   ⚠ 색은 사이트 기조 그대로다 — 흰(헤더 띠) → 크림(본문) → 흰(Contact).
     조판만 이 페이지 전용이다. 셀렉터는 전부 .gd-ev 안으로 스코프한다.

   ⚠ 본문이 **포스터 이미지 한 장**이다. 시술명·효과·가격이 이미지에 구워져
     있어 글자로 옮기지 않았다(RESUME 절대규칙 1). 그래서 이 파일에는
     본문 타이포가 거의 없고, 목록 카드와 글 이동만 담당한다.

   블록  01 SEC   02 HERO   03 LIST   04 POSTER   05 NAV   06 RESPONSIVE
   ========================================================================== */

/* --- 01. SEC ------------------------------------------------------------- */
.gd-ev .ev-sec{position:relative;padding:var(--gd-pad) 0}
.gd-ev .ev-sec--cream{background:var(--gd-cream)}

/* --- 02. HERO — 그림 없는 제목 띠 ----------------------------------------- */
/* location.html 의 hero header 와 같은 성격이다. 게시판 페이지라 원문에
   제목 말고는 문장이 없어서 부제를 지어 붙이지 않았다. */
.gd-ev .ev-hero{
  padding:calc(var(--gd-hdr) + clamp(36px,5.73vw,110px)) 0 clamp(40px,5.21vw,100px);
  text-align:center;
}
.gd-ev .ev-hero-body{max-width:min(100%,760px);margin-inline:auto}
.gd-ev .ev-kicker{
  font-family:var(--gd-serif);font-style:italic;font-weight:400;
  font-size:clamp(15px,1.35vw,26px);line-height:1;letter-spacing:.01em;color:var(--gd-brown);
}
.gd-ev .ev-hero-h{
  margin-top:clamp(12px,1.35vw,26px);
  font-size:clamp(28px,3.44vw,66px);font-weight:800;line-height:1.18;
  letter-spacing:-.04em;color:var(--gd-ink);
}
/* 원본 게시판 목록의 말머리 「공지」 */
.gd-ev .ev-badge{
  display:inline-block;padding:clamp(4px,.42vw,7px) clamp(10px,.94vw,17px);
  border-radius:999px;background:var(--gd-brown);color:#fff;
  font-size:clamp(10.5px,.68vw,13px);font-weight:700;letter-spacing:.06em;line-height:1.4;
}
.gd-ev .ev-date{
  display:block;margin-top:clamp(12px,1.25vw,24px);
  font-family:var(--gd-serif);font-size:clamp(12px,.94vw,18px);letter-spacing:.06em;
  color:var(--gd-muted);font-variant-numeric:lining-nums;
}

/* 상세 — 제목 위에 목록으로 돌아가는 자리 */
.gd-ev .ev-hero--post .ev-badge{margin-top:clamp(14px,1.46vw,28px)}
.gd-ev .ev-crumb{
  font-size:clamp(11px,.78vw,15px);letter-spacing:.02em;color:var(--gd-muted);
}
.gd-ev .ev-crumb a{
  border-bottom:1px solid var(--gd-line);padding-bottom:2px;
  transition:color .3s var(--gd-ease),border-color .3s var(--gd-ease);
}
.gd-ev .ev-crumb a:hover{color:var(--gd-brown);border-color:var(--gd-brown)}

/* --- 03. LIST — 목록 카드 4 ---------------------------------------------- */
.gd-ev .ev-list{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,1.94vw,28px);
}
.gd-ev .ev-card{display:block;height:100%}
.gd-ev .ev-card-fig{
  display:block;aspect-ratio:1/1;border-radius:var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-ev .ev-card-fig picture{display:block;width:100%;height:100%}
.gd-ev .ev-card-fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--gd-ease);
}
.gd-ev .ev-card:hover .ev-card-fig img,
.gd-ev .ev-card:focus-visible .ev-card-fig img{transform:scale(1.05)}
.gd-ev .ev-card-body{display:block;padding-top:clamp(14px,1.46vw,28px)}
.gd-ev .ev-card-t{
  display:block;margin-top:clamp(10px,1.04vw,20px);
  font-size:clamp(14.5px,1.15vw,22px);font-weight:700;line-height:1.45;
  letter-spacing:-.03em;color:var(--gd-ink);
  transition:color .3s var(--gd-ease);
}
.gd-ev .ev-card:hover .ev-card-t{color:var(--gd-brown)}
.gd-ev .ev-card .ev-date{margin-top:clamp(8px,.83vw,16px)}

/* --- 04. POSTER — 상세 본문 ---------------------------------------------- */
/* 포스터가 900x14376 처럼 극단적으로 길다. 폭을 900 으로 묶어 세로로 흘린다 —
   화면 폭에 맞춰 늘리면 한 화면에 글자 두 줄만 남는다. */
.gd-ev .ev-poster{
  margin:0 auto;max-width:min(100%,900px);
  border-radius:var(--gd-r);overflow:hidden;background:#efe9e0;
}
.gd-ev .ev-poster img{width:100%;height:auto}

/* --- 05. NAV — 이전 / 다음 / 목록 ---------------------------------------- */
.gd-ev .ev-nav{
  max-width:min(100%,900px);margin:clamp(34px,4.17vw,80px) auto 0;
  padding-top:clamp(20px,2.29vw,44px);border-top:1px solid var(--gd-ink);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.25vw,24px);align-items:start;
}
.gd-ev .ev-nav-a{display:block;min-width:0}
.gd-ev .ev-nav-a--next{text-align:right}
.gd-ev .ev-nav-l{
  display:block;font-size:clamp(10.5px,.68vw,13px);font-weight:700;
  letter-spacing:.1em;color:var(--gd-brown);
}
.gd-ev .ev-nav-t{
  display:block;margin-top:clamp(6px,.63vw,12px);
  font-size:clamp(13px,.94vw,18px);font-weight:700;line-height:1.45;
  letter-spacing:-.025em;color:var(--gd-ink);
  transition:color .3s var(--gd-ease);
}
.gd-ev .ev-nav-a:hover .ev-nav-t{color:var(--gd-brown)}
/* 「목록으로」는 이전·다음이 하나뿐인 글에서도 늘 맨 아래 가운데에 선다 */
.gd-ev .ev-nav-list{
  grid-column:1/-1;justify-self:center;
  margin-top:clamp(20px,2.29vw,44px);
  display:inline-flex;align-items:center;gap:12px;
  min-height:44px;padding:0 clamp(20px,1.67vw,32px);
  border:1.4px solid var(--gd-ink);border-radius:999px;
  font-size:clamp(12.5px,.83vw,15px);font-weight:700;letter-spacing:-.01em;
  transition:background .3s var(--gd-ease),color .3s var(--gd-ease);
}
.gd-ev .ev-nav-list:hover{background:var(--gd-ink);color:#fff}
.gd-ev .ev-nav-list svg{width:22px;height:8px;overflow:visible;transition:transform .35s var(--gd-ease)}
.gd-ev .ev-nav-list svg path{stroke:currentColor;stroke-width:1.2;fill:none}
.gd-ev .ev-nav-list:hover svg{transform:translateX(5px)}

/* --- 06. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1024px){
  .gd-ev .ev-hero{padding-top:calc(var(--gd-hdr) + clamp(22px,3.4vw,44px))}
  .gd-ev .ev-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:600px){
  /* 4장뿐이라 1열로 내려도 목록이 길어지지 않는다 */
  .gd-ev .ev-list{grid-template-columns:minmax(0,1fr)}
  /* 세로 카드가 되면 정사각 대표컷이 화면을 다 먹는다 */
  /* 카드 원본이 620x620 정사각이라 16/10 은 위아래를 각 65px 잘라낸다
     (1번 카드 'Limited' 윗획, 3번 카드 금액·로고 바가 날아갔다) */
  .gd-ev .ev-card-fig{aspect-ratio:1/1}
  .gd-ev .ev-nav{grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,4vw,22px)}
  .gd-ev .ev-nav-a--next{text-align:left}
}