* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --black: #0f0f10;
  --white: #fafafa;
  --cdn: ''; /* R2 base는 각 배경에 직접 기재 */
}

html, body { height: 100%; }

body {
  font-family: 'Archivo', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
  background: var(--black);
  color: var(--white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── 상단 ──────────────────────────────── */
.topbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 26px 20px 18px;
}
.topbar-logo {
  font-weight: 900;
  font-size: 26px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
}
.topbar-sub {
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: #888;
}

/* ── 메인사이트 패널 (주인공) ───────────── */
.main-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 2.73;          /* 와이드 배너 이미지 비율과 일치 → 인물 안 잘림 */
  min-height: 340px;
  max-height: 68vh;
  margin: 0 2px;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  cursor: pointer;
}
.main-panel-bg {
  position: absolute;
  inset: 0;
  background-image:
    url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/hero_5230_wide.webp'),
    linear-gradient(160deg, #b8ada0 0%, #8f857a 55%, #5c554d 100%);
  background-size: cover;
  background-position: center top;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  filter: brightness(0.94);
}
.main-panel:hover .main-panel-bg { transform: scale(1.015); filter: brightness(0.92); }
.main-panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 60px 44px 44px;
  background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0) 85%);
}
.main-panel-eyebrow {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.32em;
  color: #ddd;
  margin-bottom: 10px;
}
.main-panel-title {
  font-size: clamp(52px, 8vw, 110px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  margin-bottom: 10px;
}
.main-panel-desc {
  font-size: 13.5px;
  color: #ddd;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}
.main-panel-cta {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  padding: 14px 30px;
  background: var(--white);
  color: var(--black);
  border-radius: 999px;
  transition: transform 0.25s ease;
}
.main-panel:hover .main-panel-cta { transform: translateY(-2px); }
.arrow { display: inline-block; transition: transform 0.3s ease; }
.main-panel:hover .arrow, .panel:hover .arrow { transform: translateX(4px); }

/* ── 아카이브 라벨 ─────────────────────── */
.mini-label {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.3em;
  color: #777;
  padding: 22px 0 10px;
}

/* ── 스타일 아카이브 5분할 (축소) ───────── */
.panels {
  display: flex;
  gap: 2px;
  padding: 0 2px;
  height: 24vh;
  min-height: 150px;
}

.panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  text-decoration: none;
  color: var(--white);
  transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: pointer;
}
.panel:hover { flex: 1.15; }

.panel-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease;
  filter: brightness(0.62) saturate(0.9);
}
.panel:hover .panel-bg { transform: scale(1.02); filter: brightness(0.85) saturate(1); }

.panel--raive .panel-bg {
  background-image: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/hero_raive.webp'), linear-gradient(160deg, #1c1c1e 0%, #3a3a3e 60%, #6b6b70 100%);
}
.panel--matin .panel-bg {
  background-image: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/hero_matin.webp'), linear-gradient(160deg, #b8ada0 0%, #8f857a 55%, #5c554d 100%);
}
.panel--three .panel-bg {
  background-image: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/hero_nox.webp'), linear-gradient(160deg, #23303a 0%, #16202a 60%, #0c1218 100%);
}
.panel--four .panel-bg {
  background-image: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/hero_blanc2.webp'), linear-gradient(160deg, #e9e6df 0%, #cfccc3 60%, #a8a49a 100%);
}
.panel--five .panel-bg {
  background-image: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/lc_look1_a.webp'), linear-gradient(160deg, #ececea 0%, #cfcfcb 60%, #9d9d97 100%);
  background-position: center 10%;
}

.panel-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 18px 16px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0) 90%);
}
.panel-num {
  display: block;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #bbb;
  margin-bottom: 4px;
}
.panel-title {
  font-size: clamp(13px, 1.5vw, 19px);
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.1;
  white-space: nowrap;
}

/* ── 푸터 ──────────────────────────────── */
.foot {
  text-align: center;
  font-size: 11px;
  color: #666;
  letter-spacing: 0.15em;
  padding: 18px 0 20px;
}

/* ── 모바일 ────────────────────────────── */
@media (max-width: 820px) {
  .main-panel { aspect-ratio: auto; min-height: 44vh; }
  .main-panel-bg { background-position: 72% top; }
  .main-panel-inner { padding: 40px 22px 30px; }
  .panels { flex-wrap: wrap; height: auto; }
  .panel { flex: 1 1 32%; min-height: 110px; }
  .panel:hover { flex: 1 1 32%; }
  .panel-title { white-space: normal; }
}

/* ── 법적 고지 푸터 (T-013) ─────────────────────────────────
   select.html 은 다크 테마라 색상만 다르고 마크업 문자열 규약은
   전 5230 페이지와 동일하다 (.footer-legal 블록). */
.foot-copy { margin-bottom: 0; }
.footer-legal {
  max-width: 1180px;
  margin: 14px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 22px 6px;
  font-size: 11px;
  line-height: 1.85;
  color: #7b7b80;
  text-align: left;
  letter-spacing: 0;
}
.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
  font-size: 11.5px;
}
.footer-legal-nav a { color: #9a9aa0; text-decoration: none; }
.footer-legal-nav a:hover { color: var(--white); text-decoration: underline; }
.footer-legal-em strong { font-weight: 800; color: var(--white); }
.footer-biz {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin: 0 0 10px;
  padding: 0;
}
.footer-biz li { white-space: nowrap; }
.footer-biz b { font-weight: 600; color: #c9c9cf; margin-right: 5px; }
.footer-legal-note { font-size: 10.5px; line-height: 1.8; max-width: 78ch; }

/* ── 고객센터 공통 블록 (S3-06) — 다크 톤 ── */
.footer-cs {
  max-width: 1180px;
  margin: 14px auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 18px 22px 0;
  font-size: 11px;
  line-height: 1.85;
  color: #7b7b80;
  text-align: left;
  letter-spacing: 0;
}
.footer-cs-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--white);
  margin-bottom: 8px;
}
.footer-cs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 8px;
  font-size: 11.5px;
}
.footer-cs-nav a { color: #9a9aa0; text-decoration: none; }
.footer-cs-nav a:hover { color: var(--white); text-decoration: underline; }
.footer-cs-note { font-size: 10.5px; line-height: 1.8; max-width: 78ch; }

@media (max-width: 820px) {
  .footer-legal { padding: 16px 18px 6px; }
  .footer-cs { padding: 16px 18px 0; }
  .footer-biz li { white-space: normal; }
}