/* 부산 디자인 시안(2026-10-30) — 공용 덮어쓰기. 원본 mockup의 <style> 뒤에 로드된다.
   원본 기존 변수·클래스는 그대로 두고 이 파일에서만 색·글꼴·메뉴·목록·바닥글·사진비율을 바꾼다.
   본문 글꼴(Jost·Noto Sans KR)은 손대지 않는다 — 제목류에만 세리프를 얹는다. */

:root{
  /* 바탕 #F5F3EF · 강조 바다색 #1F4E5F */
  --hn-paper:#F5F3EF;
  --hn-accent:#1F4E5F;
  --hn-rule:#DEDACC;
  --hn-grey:#666666; /* 원래 #727272는 크림 바탕(#F5F3EF)에서 4.34:1로 기준(4.5:1) 미달 — 5.18:1로 보정 */
  --hn-tile:#EAE6DA;
  --hn-tile-deep:#C9C2AE;
  --hn-tile-label:#8d8873;
  --hn-title-font:"Gowun Batang",serif;
}
body{background:var(--hn-paper)}

/* ── 제목류: Gowun Batang(명조) — 본문은 그대로 ── */
.hn-brand,.hn-foot-mark,.hn-sec-title,.hn-hero h1,.hn-close h2,.hn-page h1,
.hn-numlist .hn-name{
  font-family:var(--hn-title-font);
  letter-spacing:0;
  text-transform:none;
}
.hn-body h2{font-family:var(--hn-title-font)}

/* ── 헤더: 상단 가로 탭 메뉴(모바일 가로 스크롤) ── */
.hn-top{background:var(--hn-paper)!important;color:var(--hn-ink)!important;position:sticky!important;box-shadow:none!important}
.hn-top::before{content:none!important}
/* 격자로 1행(이름·19)·2행(탭) 자리를 고정해 겹침을 막는다 */
.hn-top .hn-shell{
  display:grid!important;
  grid-template-columns:1fr auto;
  grid-template-rows:var(--hn-head) auto;
  align-items:center;
  height:auto!important;
  row-gap:0;
}
.hn-brand{top:calc(var(--hn-head)/2)!important}
.hn-menu{display:none!important}
.hn-age{grid-column:2;grid-row:1;margin-left:0!important}
.hn-nav{
  display:flex!important;
  grid-column:1/-1;
  grid-row:2;
  gap:var(--hn-s2);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  border-top:1px solid var(--hn-rule);
  padding:0 var(--hn-s1);
}
.hn-nav::-webkit-scrollbar{display:none}
.hn-nav a{
  flex:none;
  white-space:nowrap;
  min-height:44px;
  font-size:var(--hn-fs-s);
  padding:0 var(--hn-s4);
  border-bottom:2px solid transparent;
}
.hn-nav a:hover{text-decoration:none;color:var(--hn-accent)}
.hn-nav a[aria-current]{
  text-decoration:none;
  color:var(--hn-accent);
  border-bottom-color:var(--hn-accent);
  font-weight:500;
}
@media (min-width:1024px){
  .hn-nav{justify-content:center}
  .hn-nav a{font-size:var(--hn-fs-m)}
}

/* ── 성인 안내: 배지만 남기고 상단 판매·안내 띠는 뺀다(19 표시는 머리글·바닥글에 그대로 남음) ── */
.hn-sale{display:none!important}
.hn-age{border-color:var(--hn-accent);color:var(--hn-accent)}

/* ── 사진 비율: 4:5로 통일(원본 파일 그대로, object-position만 유지).
   PC에서 4:5 그대로 두되 화면 높이를 넘지 않게 막아 과하게 길어지지 않게 한다(기존 max-height 유지). ── */
.hn-hero,.hn-close-ph{aspect-ratio:4/5!important;width:100%!important}
@media (min-width:768px){
  /* max-height를 주면 aspect-ratio가 width까지 끌어내리는 동작이 있어 width:100%를 다시 못 박는다 */
  .hn-hero{max-height:70vh!important;max-height:70svh!important;width:100%!important}
  .hn-close-ph{aspect-ratio:4/5!important;max-height:70vh!important;max-height:70svh!important;width:100%!important}
}

/* ── 첫 화면 히어로: 사진 위 글씨 대신, 사진 아래 흰(크림) 띠에 분리해 올린다 ── */
.hn-hero{color:var(--hn-ink)}
.hn-hero-fade{display:none}
.hn-hero-copy{
  position:static!important;
  background:var(--hn-paper);
  color:var(--hn-ink);
  text-shadow:none!important;
  padding:var(--hn-s8) var(--hn-gutter) var(--hn-s10);
  border-bottom:1px solid var(--hn-rule);
}
.hn-hero .hn-ph-label{display:none}
.hn-hero h1{color:var(--hn-ink);font-size:var(--hn-fs-xl);font-weight:400}
.hn-hero-sub{color:var(--hn-grey)}
.hn-hero-link{color:var(--hn-accent)}
@media (min-width:768px){.hn-hero h1{font-size:var(--hn-fs-3xl)}}

/* ── Alleys & Choices: 카드 격자 대신 번호 목록 01~04(사진은 작게 왼쪽) ── */
.hn-numlist{
  list-style:none;margin:var(--hn-s8) auto 0;padding:0;max-width:720px;
  border-top:1px solid var(--hn-rule);
}
.hn-numlist li{border-bottom:1px solid var(--hn-rule);counter-increment:hn-num}
.hn-numlist{counter-reset:hn-num}
.hn-numlist .hn-tilecard{
  display:flex;align-items:center;gap:var(--hn-s5);
  padding:var(--hn-s5) 0;text-align:left;
}
.hn-numlist .hn-tilecard::before{
  content:counter(hn-num,decimal-leading-zero);
  flex:none;width:2em;
  font-family:var(--hn-title-font);
  font-size:var(--hn-fs-2xl);
  color:var(--hn-accent);
  font-weight:400;
}
.hn-numlist .hn-ph{width:72px;flex:none;aspect-ratio:4/5;border-radius:2px}
.hn-numlist .hn-cap{padding-top:0}
.hn-numlist .hn-name{display:block;font-size:var(--hn-fs-l)}
.hn-numlist .hn-desc{color:var(--hn-grey)}
@media (min-width:768px){
  .hn-numlist .hn-ph{width:96px}
}

/* ── 바닥글: 2단(모든 화면 폭에서 동일한 2열) ── */
.hn-foot{border-top-color:var(--hn-rule)}
.hn-foot .hn-shell{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  column-gap:var(--hn-s8);
  row-gap:var(--hn-s6);
  max-width:1312px;margin:0 auto;
  padding-top:var(--hn-s12);padding-bottom:var(--hn-s12);
}
.hn-foot-mark{grid-column:1/-1;grid-row:1;order:0;text-align:left;margin:0 0 var(--hn-s2);color:var(--hn-accent)}
.hn-foot-nav{grid-column:1;grid-row:2;border-top:0;margin:0}
.hn-foot-nav a{border-bottom:0;min-height:36px}
#foot-info{grid-column:2;grid-row:2;align-self:start;margin:0}
.hn-youth{grid-column:1/-1;grid-row:3;margin-top:var(--hn-s4)}
.hn-foot .hn-shell > a{grid-column:1/-1;grid-row:4;justify-self:start;margin-top:var(--hn-s2);padding-top:0}
@media (min-width:480px) and (max-width:767.98px){
  .hn-foot-nav{columns:2;column-gap:var(--hn-s6)}
}