@charset "UTF-8";
/* ============================================================
   themes/erp/style/home.css
   메인 페이지 전용 — 서가(히어로) + 메인 섹션
   ------------------------------------------------------------
   로드: additionalCss 에 'card.css', 'home.css'
   의존: base.css(토큰) · layout.css(헤더) · card.css(카드)
   ============================================================ */


/* ============================================================
   1. 히어로 — 서가
   대분류를 책등으로 세운다.
   도서관 담당자는 책등을 읽는 게 일이라 이 문법이 바로 읽힌다.
   ============================================================ */
.hero{
  padding-block:56px 0;
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface) 0%, var(--paper) 100%);
}

.hero-head{
  max-width:640px;
  margin-bottom:46px;
}
.hero-head h1{
  margin:14px 0 16px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:clamp(26px, 4vw, 42px);
  line-height:1.32;
  letter-spacing:-.025em;
}
.hero-head p{
  margin:0;
  max-width:46ch;
  font-size:15.5px;
  font-weight:300;
  color:var(--ink-soft);
}


/* ── 1-1. 서가 판 ─────────────────────────────── */
.shelf{
  position:relative;
  padding-bottom:30px;
}

/* 책등이 늘어선 줄. 분류가 많으면 가로 스크롤 */
.spines{
  display:flex;
  align-items:flex-end;      /* 아래(선반)를 기준으로 정렬 */
  gap:9px;
  padding:0 2px 4px;
  overflow-x:auto;
  scrollbar-width:thin;
}
.spines::-webkit-scrollbar{ height:6px; }
.spines::-webkit-scrollbar-thumb{
  background:var(--shelf-dark);
  border-radius:9px;
}


/* ── 1-2. 책등 하나 ───────────────────────────── */
.spine{
  --h:290px;

  position:relative;
  flex:1 1 0;                /* 분류 수에 맞춰 폭을 나눠 가짐 */
  min-width:88px;            /* 너무 좁아지면 세로 글씨가 깨짐 */
  height:var(--h);

  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 0 13px;

  background:var(--surface);
  border:1px solid var(--line);
  border-bottom:none;        /* 아래는 선반이 막음 */
  border-radius:2px 2px 0 0;
  box-shadow:1px 0 0 rgba(20,32,46,.05);   /* 옆 책과 닿는 그림자 */
  cursor:pointer;

  transition:transform .34s cubic-bezier(.22,1,.36,1),
             box-shadow .34s ease;
}

/* 색띠 — 분류색띠라벨 그 자체.
   --band 는 .spine 에 붙은 cat-{id} 에서 온다 */
.spine::before{
  content:"";
  display:block;
  width:100%;
  /* flex:0 0 34px — 내용이 길어도 절대 안 줄어들게.
     shrink 를 막지 않으면 긴 분류명(RFID/EM/RF)에서 색띠가 0이 된다 */
  flex:0 0 34px;
  background:var(--band);
  border-radius:1px 1px 0 0;
}
/* 색띠 아래 경계선 */
.spine::after{
  content:"";
  position:absolute;
  top:34px; left:0; right:0;
  height:1px;
  background:rgba(0,0,0,.13);
}

/* 책을 서가에서 뽑아 올리는 동작.
   이 페이지의 유일한 애니메이션 — 여기저기 움직이면 산만해진다 */
.spine:hover,
.spine:focus-visible{
  transform:translateY(-16px);
  box-shadow:0 14px 26px -12px rgba(20,32,46,.34);
}

/* 세로 제목 — 한글은 vertical-rl 에서 바로 선다 */
.spine-title{
  flex:1;
  min-height:0;              /* flex 자식이 내용만큼 부풀지 않게 */
  overflow:hidden;
  display:flex;
  align-items:center;
  padding-block:20px;
  
  writing-mode:vertical-rl;
  text-orientation:upright;

  font-family:var(--f-display);
  font-weight:500;
  font-size:16px;
  letter-spacing:.14em;
  color:var(--ink);
}

/* 청구기호 라벨 스티커 — 책등 아래 흰 라벨 */
.spine-label{
  flex:0 0 auto;             /* 라벨도 안 줄어들게 */
  width:52px;
  padding:5px 0 4px;
  text-align:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:1px;
  box-shadow:0 1px 0 rgba(0,0,0,.04);

  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  line-height:1.3;
  color:var(--ink);
}
/* 8글자 넘는 분류명 (RFID/EM/RF 등)
   글자를 줄여 세로 공간에 맞춘다. PHP가 is-long 을 붙여준다 */
.spine-title.is-long{
  font-size:13px;
  letter-spacing:.04em;
  padding-block:12px;
}

/* ── 1-3. 선반 널 ─────────────────────────────── */
.shelf-board{
  height:11px;
  background:linear-gradient(180deg, var(--shelf) 0%, var(--shelf-dark) 100%);
  border-radius:0 0 2px 2px;
  box-shadow:0 2px 5px rgba(20,32,46,.16);
}
.shelf-note{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:11px;
  color:var(--ink-faint);
}


/* ============================================================
   2. 메인 섹션
   관리자 main_sections 에 등록한 묶음.
   왼쪽 소개 패널 + 오른쪽 상품
   ============================================================ */
.home-sec{ padding-block:60px; }
.home-sec + .home-sec{ border-top:1px solid var(--line-soft); }
.home-sec.alt{ background:var(--surface); }

/* 섹션 제목 옆 배지 (badge_text) */
.sec-badge{
  display:inline-block;
  margin-right:9px;
  padding:3px 9px;
  background:var(--band);
  color:#fff;
  border-radius:1px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  vertical-align:3px;
}

/* 소개 패널 + 상품 2단 */
.spot{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
}

/* 왼쪽 소개 패널 */
.spot-intro{
  display:flex;
  flex-direction:column;
  padding:30px 26px;
  background:var(--band-lt);
}
.spot-intro h3{
  margin:0 0 12px;
  font-family:var(--f-display);
  font-weight:600;
  font-size:23px;
  line-height:1.4;
  letter-spacing:-.02em;
}
.spot-intro p{
  margin:0 0 22px;
  font-size:13.5px;
  font-weight:300;
  line-height:1.75;
  color:var(--ink-soft);
}
.spot-intro .go{
  align-self:flex-start;
  margin-top:auto;                       /* 패널 바닥에 붙임 */
  padding-bottom:2px;
  border-bottom:1.5px solid var(--band);
  font-size:13.5px;
  font-weight:500;
  color:var(--band-dk);
}

/* 배너 이미지가 등록된 섹션 */
.spot-intro .banner{
  margin:-30px -26px 20px;               /* 패널 여백을 뚫고 꽉 차게 */
  aspect-ratio:3/2;
  overflow:hidden;
}
.spot-intro .banner img{
  width:100%; height:100%;
  object-fit:cover;
}

/* 오른쪽 상품 — 카드 3개 */
.spot-items{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line-soft);
}

/* 상품이 없는 섹션 */
.spot-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 20px;
  background:var(--surface);
  font-size:13.5px;
  font-weight:300;
  color:var(--ink-faint);
}


/* ============================================================
   3. 반응형
   ============================================================ */
@media (max-width:980px){
  .spot{ grid-template-columns:1fr; }
  .spot-intro{ padding:24px 22px; }
  .spot-intro .banner{ margin:-24px -22px 18px; aspect-ratio:16/6; }
  .spot-intro .go{ margin-top:0; }
  .spot-items{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:640px){
  .hero{ padding-top:36px; }
  .hero-head{ margin-bottom:30px; }

  /* 모바일에선 책등을 낮추고 좁힌다 (가로 스와이프) */
  .spine{ --h:224px; min-width:72px; }
  .spine-title{ font-size:14px; letter-spacing:.1em; padding-block:14px; }
  .spine-label{ width:44px; font-size:11px; }

  .home-sec{ padding-block:40px; }
  .spot-items{ grid-template-columns:repeat(2,1fr); }
}