/* HansamBio fullpage theme (CBN-like) r1
   - 컬러는 /assets/css/theme_palette.r1.css 의 --bg/--text/--muted/--accent ... 변수를 사용
*/
body.hsb-home{ --header-h:72px; }

html,body{height:100%;}
body.hsb-home{background:var(--bg); color:var(--text);}

/* Header: fixed glass */
body.hsb-home .site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  z-index:50;
  background: rgba(0,0,0,.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
body.hsb-home .site-header .brand a{color:var(--text)!important;}
body.hsb-home .site-header .nav a{color:var(--muted);}
body.hsb-home .site-header .nav a:hover{color:var(--text);}
body.hsb-home .site-header .tools a{color:var(--muted);}
body.hsb-home .site-header .tools a:hover{color:var(--text);}

/* Fullpage container */
main.hsb-fullpage{
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  padding:0;
}

/* Sections */
section.hsb-fp{
  height:100vh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: calc(var(--header-h) + 24px) 6vw 64px;
}

/* Background overlay
   - 요청: 메인 배경을 영상 대신 "이전 색상(컬러 테마)"로 운영
   - 이미지가 없을 때도 컬러 그라데이션이 자연스럽게 보이도록 ::before 추가
*/
.hsb-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.hsb-bg::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(1100px 520px at 15% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(1000px 520px at 88% 12%, color-mix(in srgb, var(--accent2) 22%, transparent), transparent 64%),
    radial-gradient(900px 600px at 50% 92%, color-mix(in srgb, var(--accent3) 18%, transparent), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.48));
}
.hsb-bg img, .hsb-bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: saturate(1.08) contrast(1.06) brightness(.86);
}
.hsb-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.62));
}

/* Section content */
.hsb-wrap{position:relative; width:min(1200px, 100%);}
.hsb-kicker{letter-spacing:.12em; text-transform:uppercase; font-size:12px; color:var(--muted);}
.hsb-title{font-size: clamp(30px, 4vw, 56px); line-height:1.1; margin:10px 0 12px; font-weight:900;}
.hsb-sub{font-size: clamp(14px, 1.3vw, 18px); color:var(--muted); max-width: 70ch;}

/* Home: mini company intro block */
.hsb-mini{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.hsb-mini-item{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  border-radius:14px;
  color: rgba(245,247,250,.88);
  font-size:13px;
}
.hsb-mini-item b{color:#fff;}

.hsb-cta{margin-top:22px; display:flex; gap:10px; flex-wrap:wrap;}
.hsb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid var(--border);
  background: var(--surface);
  color:var(--text);
  text-decoration:none;
  font-weight:700;
}
.hsb-btn:hover{background: var(--surface2);}
.hsb-btn.primary{border-color: rgba(255,255,255,.18); background: color-mix(in srgb, var(--accent) 18%, var(--surface));}

/* Cards */
.hsb-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:24px;}
.hsb-card{
  grid-column: span 3;
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  text-decoration:none;
  color:var(--text);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.hsb-card:hover{background: var(--surface2);}
.hsb-card .thumb{background: rgba(255,255,255,.05); aspect-ratio: 16/9; height:auto; max-height:260px;}
.hsb-card .thumb img, .hsb-card .thumb video{width:100%; height:100%; object-fit:cover;}
.hsb-card .body{padding:14px 14px 16px;}
.hsb-card .body .t{font-weight:900; font-size:16px; margin-bottom:6px;}
.hsb-card .body .d{color:var(--muted); font-size:13px; line-height:1.45; max-height: 3.1em; overflow:hidden;}

/* Two-column layout */
.hsb-two{display:grid; grid-template-columns: 1.1fr .9fr; gap:20px; align-items:start; margin-top:18px;}
.hsb-panel{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
}
.hsb-panel h3{margin:0 0 10px; font-size:18px;}
.hsb-panel p{margin:0; color:var(--muted); line-height:1.6;}

/* Dots nav */
.hsb-dots{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hsb-dot{
  width:10px;
  height:10px;
  border-radius:99px;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.10);
  cursor:pointer;
}
.hsb-dot.active{background: var(--accent); border-color: var(--accent);} 

/* Section label (optional) */
.hsb-dot[title]{position:relative;}
.hsb-dot[title]:hover::after{
  content: attr(title);
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  background: rgba(11,15,20,.75);
  border:1px solid var(--border);
  color:var(--text);
  padding:6px 10px;
  border-radius:12px;
  white-space:nowrap;
  font-size:12px;
}

/* Footer on home: hide default */
body.hsb-home .site-footer{display:none;}

/* Responsive (home cards)
   - Desktop: 4 per row (span 3)
   - Tablet: 2 per row
   - Mobile: 1 per row
*/
@media (max-width: 900px){
  body.hsb-home .site-header{height:64px;}
  :root{--header-h:64px;}
  .hsb-two{grid-template-columns:1fr;}
  .hsb-card{grid-column: span 6;}
  .hsb-dots{right:10px;}
  .hsb-card .thumb{max-height:240px;}
}
@media (max-width: 520px){
  .hsb-card{grid-column: span 12;}
}

.hsb-card.r16x9 .thumb{aspect-ratio:16/9; max-height:260px;}
.hsb-card.r3x5 .thumb{aspect-ratio:3/5; max-height:320px;}
.hsb-card.r1x1 .thumb{aspect-ratio:1/1; max-height:220px; background: rgba(255,255,255,.92);}
.hsb-card.r1x1 .thumb img{object-fit:contain; padding:16px;}
@media (max-width: 900px){
  .hsb-card.r16x9 .thumb{max-height:220px;}
  .hsb-card.r3x5 .thumb{max-height:260px;}
  .hsb-card.r1x1 .thumb{max-height:200px;}
}


.hsb-thumb-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 18%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent) 45%,
    color-mix(in srgb, var(--accent3) 12%, transparent));
}

/* Extra mobile safety: avoid 'blank screen' 느낌(100vh snap이 과하게 적용되는 기기) */
@media (max-width: 600px){
  main.hsb-fullpage{
    height:auto;
    scroll-snap-type:none;
  }
  section.hsb-fp{
    height:auto;
    min-height: calc(100vh - var(--header-h));
    padding: calc(var(--header-h) + 18px) 5vw 48px;
  }
  .hsb-dots{display:none;} /* 모바일에서는 점 네비 숨김 (터치 오작동 방지) */
}


/* Readability: text on hero images */
body.hsb-home .hsb-title, body.hsb-home .hsb-sub, body.hsb-home .hsb-kicker{
  text-shadow: 0 10px 28px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.55);
}
body.hsb-home .hsb-mini, body.hsb-home .hsb-cta, body.hsb-home .hsb-chiprow{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.hsb-home .hsb-mini{
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 16px;
  padding: 10px 12px;
}