/* ============================================================
   서브페이지(전체상품/카테고리/게시판/컨텐츠) 상단 히어로 - 공통 1곳
   전체상품(shop/index.php)도 이 클래스를 그대로 쓴다 - 사이즈/포맷 손볼 땐 여기 한 곳만 고치면
   전체상품·카테고리·게시판·컨텐츠 페이지 전부에 한번에 반영됨(개별로 안 고쳐도 됨).
   ============================================================ */
.aramchan-sub-intro{position:relative;padding:164px 0 64px;text-align:center;}
/* 164 = 헤더 높이(100px, position:fixed로 겹쳐 있어서 실제 여백 계산에서 빼줘야 함) + 아래 여백(64px)과 동일하게
   → 화면에 실제로 보이는 헤더 밑~탭 사이 공간 기준으로 정확히 정중앙에 오게 함 */
.aramchan-sub-kicker{position:relative;z-index:1;margin:0 0 14px;color:#92795f;font-size:12px;font-weight:800;letter-spacing:.16em;}
.aramchan-sub-intro h1{position:relative;z-index:1;margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.3;letter-spacing:-.03em;color:#1a1a1a;}
.aramchan-sub-categories{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}

/* 상품상세(shop/item.php) 전용 - 헤더 바로 밑에 콘텐츠가 붙어보여서 여백만 더 줌 */
body.sit-detail{padding-top:120px;}
@media(max-width:900px){
  body.sit-detail{padding-top:78px;}
  body.sit-detail .shop-wrap .aramchan-crumb{margin-top:8px;}
}
.aramchan-sub-categories a,.aramchan-sub-categories button{padding:12px 22px;border:1px solid #d5d2c7;background:#fff;color:#6d6d6d;text-decoration:none;font-size:15px;font-family:inherit;}
.aramchan-sub-categories a:hover,.aramchan-sub-categories a.active,.aramchan-sub-categories button:hover,.aramchan-sub-categories button.active{background:var(--board-accent);border-color:var(--board-accent);color:#fff;}
.board-wrap .btn_bo_user a.btn_b01[title="글쓰기"]{background:var(--board-accent);border-color:var(--board-accent);color:#fff;}
.board-wrap .btn_bo_user a.btn_b01[title="글쓰기"]:hover{background:var(--board-accent-hover);border-color:var(--board-accent-hover);color:#fff;}
.aramchan-board-categories{margin-bottom:48px;}
/* 브레드크럼 - 카테고리 탭 아래, 좀 더 조용한 톤 */
.aramchan-sub-breadcrumb{max-width:1280px;margin:0 auto;padding:20px clamp(20px,4vw,60px);display:flex;align-items:center;gap:8px;color:#9a9a9a;font-size:13px;}
.aramchan-sub-breadcrumb svg{width:15px;height:15px;flex:0 0 auto;}
.aramchan-sub-breadcrumb .sep{color:#d5d2c7;}
.aramchan-sub-breadcrumb .current{color:#1a1a1a;font-weight:600;}
/* 관리자에서 서브N 배너를 실제로 등록한 페이지만 사진 배경 - 배경 있으면 흰 글자(잊지 말 것),
   사진이라 존재감이 필요하니 위아래 여백도 더 넉넉하게 */
.aramchan-sub-intro.has-bg{padding:208px 0 108px;background-size:cover;background-position:center;}
/* 208 = 헤더 100px + 아래 여백 108px과 동일 (위와 같은 계산) */
.aramchan-sub-intro.has-bg::before{content:'';position:absolute;inset:0;background:rgba(20,18,15,.55);}
.aramchan-sub-intro.has-bg .aramchan-sub-kicker{color:#f1e6d3;}
.aramchan-sub-intro.has-bg h1{color:#fff;}
/* 사진 배경 히어로(아람찬이야기 등) 바로 아래 탭이 붙어보여서 80px 더 띄움 -
   사진 없는 밋밋한 히어로(.aramchan-sub-intro 만)는 이미 자체 padding-bottom이 있어서 안 건드림 */
.aramchan-sub-intro.has-bg + .aramchan-sub-categories{margin-top:80px;}
@media(max-width:520px){
  /* 이 구간은 헤더가 78px(header.css 참고)이라 계산 기준이 달라짐 */
  .aramchan-sub-intro{padding:122px 0 44px;}
  .aramchan-sub-intro.has-bg{padding:150px 0 72px;}
  .aramchan-board-categories{margin-bottom:32px;}
}