/* ============================================================
   el_imweb 테마 — imweb.me/theme(템플릿 카탈로그) 실측 재현
   실측: 콘텐츠 폭 1360px(패딩 40px), clay 디자인 시스템 토큰
        (그린 #008C00, slate 스케일), radius 6/8/12/16/999
   구성: 프로모 배너 → 헤더(sticky) → 히어로 → 카테고리 탭바(sticky, 앵커)
        → 카테고리 섹션 ×7(카드 그리드, 세로형 CSS 목업 썸네일) → 하단 안내 스트립
        → 최소 푸터. 자립형. 프리픽스 iw-
   ============================================================ */

:root {
  --iw-ink:      #15181e;  /* slate-900 본문 */
  --iw-ink-2:    #4b515b;  /* slate-600 진한 보조 */
  --iw-muted:    #717680;  /* slate-500 보조 */
  --iw-muted-2:  #9fa3ab;  /* 배너/카피라이트용 옅은 회색 */
  --iw-green:    #008c00;  /* 아이브로 그린(실측 정확값) */
  --iw-border:   #e2e5e9;  /* slate-100 밝은 보더 */
  --iw-border-2: #dbdee3;  /* slate-200 중간 보더 */
  --iw-border-h: #bcc0c6;  /* slate-300 호버 보더 */
  --iw-bg-gray:  #f8f9fb;  /* slate-50 배경 */
  --iw-blue:     #0090d4;
  --iw-blue-h:   #0072ab;
  --iw-black:    #15181e;
  --iw-black-h:  #24282f;

  --iw-r-sm: 6px;
  --iw-r: 8px;
  --iw-r-lg: 12px;
  --iw-r-xl: 16px;
  --iw-r-full: 999px;

  --iw-maxw: 1360px;
  --iw-pad: 40px;
  --iw-header-h: 72px;
  --iw-tabbar-h: 56px;

  --iw-font: 'Pretendard', 'Pretendard Variable', Arial, -apple-system, 'Noto Sans KR', sans-serif;
  color-scheme: light;
}

@media (max-width: 768px) {
  :root { --iw-header-h: 56px; --iw-pad: 20px; --iw-tabbar-h: 52px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; font-family: var(--iw-font); color: var(--iw-ink); background: #fff;
  -webkit-font-smoothing: antialiased; word-break: keep-all; line-height: 1.5; font-size: 16px;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
svg { display: block; }

.iw-container { max-width: var(--iw-maxw); padding: 0 var(--iw-pad); margin: 0 auto; }

/* ── 스크롤 리빌 + 로드 엔트런스 공통 유틸(.iw-reveal / .iw-hero-in) — 2026-07-07 추가 ──
   실측: imweb.me 메인은 스크롤 리빌(뷰포트 진입 시 fade-up) 기반. 은은하게 재현.
   JS 없을 때 콘텐츠가 안 보이면 안 되므로 opacity:0은 반드시 `.iw-anim` 스코프 안에서만
   걸린다 — `.iw-anim`은 theme.js 최상단에서 documentElement에 부여(모든 el_imweb 페이지 공통).
   IntersectionObserver(threshold .12)가 뷰포트 진입 시 `.is-in`을 붙이고 unobserve한다(theme.js).
   `.iw-reveal`은 일반 스크롤 리빌(섹션 헤딩·카드 등), `.iw-hero-in`은 페이지 로드 직후 히어로
   엔트런스(이미 뷰포트 안이라 옵저버가 로드 즉시 발화 — 같은 메커니즘 재사용). 둘 다
   `data-delay="1"`~다음 단계로 스태거 가능(각각 다른 폭의 딜레이 스케일). */
.iw-anim .iw-reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.iw-anim .iw-reveal.is-in { opacity: 1; transform: none; }
.iw-anim .iw-reveal[data-delay="1"] { transition-delay: .08s; }
.iw-anim .iw-reveal[data-delay="2"] { transition-delay: .16s; }
.iw-anim .iw-reveal[data-delay="3"] { transition-delay: .24s; }
.iw-anim .iw-reveal[data-delay="4"] { transition-delay: .32s; }

.iw-anim .iw-hero-in {
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.iw-anim .iw-hero-in.is-in { opacity: 1; transform: none; }
.iw-anim .iw-hero-in[data-delay="1"] { transition-delay: .12s; }
.iw-anim .iw-hero-in[data-delay="2"] { transition-delay: .24s; }
.iw-anim .iw-hero-in[data-delay="3"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  .iw-anim .iw-reveal, .iw-anim .iw-hero-in,
  .iw-anim .iw-reveal.is-in, .iw-anim .iw-hero-in.is-in {
    transition: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ── ① 프로모 배너(다크/라이트 2슬라이드 크로스페이드 캐러셀) ──
   프레임 data-tone 속성으로 bg·아이콘 색을 슬라이드에 맞춰 전환 */
.iw-promo {
  margin: 10px 10px 0; height: 78px; border-radius: var(--iw-r-xl);
  background: #26282c; display: flex; align-items: center; justify-content: center; gap: 24px;
  position: relative; transition: background-color .35s ease;
}
.iw-promo[data-tone="light"] { background: #eef1f4; }
.iw-promo.iw-hidden { display: none; }
.iw-promo-arrow {
  width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / .08);
  border: 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  color: #fff; transition: background-color .15s ease, color .15s ease;
}
.iw-promo-arrow:hover { background: rgb(255 255 255 / .16); }
.iw-promo-arrow svg { width: 16px; height: 16px; }
.iw-promo[data-tone="light"] .iw-promo-arrow { background: rgb(0 0 0 / .06); color: var(--iw-black-h); }
.iw-promo[data-tone="light"] .iw-promo-arrow:hover { background: rgb(0 0 0 / .12); }

/* 슬라이드 스택 — 고정 크기 안에서 opacity 크로스페이드 */
.iw-promo-slides { position: relative; width: 320px; height: 36px; flex: 0 0 auto; }
.iw-promo-slide {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
}
.iw-promo-slide.is-active { opacity: 1; pointer-events: auto; }
.iw-promo-line1 { font-size: 14px; }
.iw-promo-line2 { margin-top: 2px; font-size: 16px; font-weight: 700; }
.iw-promo-slide--dark .iw-promo-line1 { color: var(--iw-muted-2); }
.iw-promo-slide--dark .iw-promo-line2 { color: #fff; }
.iw-promo-slide--light .iw-promo-line1 { color: #4b515b; }
.iw-promo-slide--light .iw-promo-line2 { color: #0b7de0; }

.iw-promo-close {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 0;
  color: var(--iw-muted-2); display: flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.iw-promo-close:hover { background: rgb(255 255 255 / .08); color: #fff; }
.iw-promo-close svg { width: 18px; height: 18px; }
.iw-promo[data-tone="light"] .iw-promo-close { color: #6b7280; }
.iw-promo[data-tone="light"] .iw-promo-close:hover { background: rgb(0 0 0 / .06); color: var(--iw-black-h); }
@media (max-width: 768px) {
  .iw-promo { height: 64px; gap: 10px; }
  .iw-promo-arrow { display: none; }
  .iw-promo-slides { width: 240px; height: 32px; }
  .iw-promo-line1 { font-size: 12px; }
  .iw-promo-line2 { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .iw-promo, .iw-promo-arrow, .iw-promo-close, .iw-promo-slide { transition: none; }
}

/* ── ② 헤더(실측: position static — sticky 아님, 스크롤 시 페이지와 함께 흐름) ── */
.iw-header {
  position: relative; background: #fff; height: var(--iw-header-h);
}
.iw-header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.iw-logo { display: inline-flex; align-items: center; gap: 6px; font-size: 24px; font-weight: 800; color: var(--iw-ink); flex: 0 0 auto; }
.iw-logo-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--iw-green); }
.iw-gnb { display: flex; align-items: center; gap: 32px; flex: 1 1 auto; }
.iw-gnb-item-wrap { position: relative; }
.iw-gnb-item { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--iw-ink); white-space: nowrap; }
.iw-gnb-item.is-active { font-weight: 700; }
.iw-gnb-chevron { width: 12px; height: 12px; color: var(--iw-muted); flex: 0 0 auto; transition: transform .18s ease; }
.iw-gnb-item-wrap.is-open .iw-gnb-chevron { transform: rotate(180deg); }
.iw-header-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* GNB 드롭다운 패널 — hover(mouseenter/mouseleave) + focus 진입 시 theme.js가 .is-open 토글 */
.iw-gnb-panel {
  position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 60;
  background: #fff; border: 1px solid var(--iw-border); border-radius: var(--iw-r-lg);
  box-shadow: 0 8px 24px rgb(0 0 0 / .10); padding: 8px; min-width: 180px;
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.iw-gnb-item-wrap.is-open .iw-gnb-panel {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
/* 항목과 패널 사이 8px 틈(margin)은 호버 영역이 아니라서 지나는 순간 mouseleave가 발화
   → 패널 위에 투명 브리지를 붙여 틈을 호버 영역으로 만든다 */
.iw-gnb-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px;
}
.iw-gnb-panel-item {
  display: block; padding: 10px 14px; border-radius: var(--iw-r);
  font-size: 15px; font-weight: 500; color: var(--iw-black-h); white-space: nowrap;
  transition: background-color .15s ease;
}
.iw-gnb-panel-item:hover { background: var(--iw-bg-gray); }
.iw-gnb-badge {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; line-height: 1;
  background: #e8ffe4; color: #028907; border-radius: var(--iw-r-full); padding: 2px 6px;
  vertical-align: middle;
}
@media (prefers-reduced-motion: reduce) {
  .iw-gnb-panel, .iw-gnb-chevron { transition: none; }
}

.iw-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border-radius: var(--iw-r); font-size: 15px; font-weight: 600; border: 0; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.iw-btn-ghost { background: #fff; color: var(--iw-ink); border: 1px solid var(--iw-border-2); }
.iw-btn-ghost:hover { border-color: var(--iw-border-h); }
.iw-btn-black { background: var(--iw-black); color: #fff; }
.iw-btn-black:hover { background: var(--iw-black-h); }

.iw-burger {
  display: none; width: 40px; height: 40px; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--iw-ink); flex: 0 0 auto;
}
.iw-burger svg { width: 22px; height: 22px; }

.iw-mobile-menu { display: none; }

@media (max-width: 768px) {
  .iw-gnb, .iw-header-right { display: none; }
  .iw-burger { display: flex; }
  .iw-mobile-menu {
    display: none; position: fixed; inset: var(--iw-header-h) 0 0 0; background: #fff; z-index: 49;
    overflow-y: auto; padding: 8px var(--iw-pad) 24px;
  }
  .iw-mobile-menu.is-open { display: block; }
  .iw-mobile-menu .iw-gnb-item {
    display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--iw-border);
    font-size: 17px;
  }
  .iw-mobile-menu .iw-mobile-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
  .iw-mobile-menu .iw-btn { width: 100%; height: 48px; }
}

/* ── 히어로 ── */
.iw-hero { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 64px 0 70px; }
.iw-hero-eyebrow { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--iw-green); margin-bottom: 10px; }
.iw-hero-title { font-size: 48px; line-height: 60px; font-weight: 700; color: var(--iw-ink); margin-bottom: 24px; letter-spacing: -0.01em; }
.iw-hero-sub { font-size: 18px; line-height: 28px; font-weight: 400; color: var(--iw-muted); }
@media (max-width: 768px) {
  .iw-hero { margin: 24px 0 30px; }
  .iw-hero-eyebrow { font-size: 18px; line-height: 26px; }
  .iw-hero-title { font-size: 32px; line-height: 42px; margin-bottom: 16px; }
  .iw-hero-sub { font-size: 15px; line-height: 24px; }
}

/* ── 카테고리 탭바(실측: sticky top 0 — 헤더가 사라진 뒤 탭바만 뷰포트 최상단에 붙는다.
     원본은 붙었을 때도 보더·그림자가 없는 흰 바 그대로) ── */
.iw-tabbar {
  position: sticky; top: 0; z-index: 40; background: #fff;
}
.iw-tabs {
  /* 높이 고정 금지 — 필(40px) + 상하 padding이 곧 탭바 높이(원본 실측 여백 ~10px) */
  display: flex; align-items: center; padding: 10px 0; gap: 0;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.iw-tabs::-webkit-scrollbar { display: none; }
.iw-tab {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px;
  border-radius: var(--iw-r-full); font-size: 16px; font-weight: 600; background: transparent; border: 0;
  color: var(--iw-ink-2); margin-right: 4px; white-space: nowrap; flex: 0 0 auto;
  transition: background-color .15s ease, color .15s ease;
}
.iw-tab:hover { background: var(--iw-bg-gray); }
.iw-tab.is-active { background: var(--iw-black); color: #fff; }
.iw-tab.is-active:hover { background: var(--iw-black); }

/* ── 카테고리 섹션 ── */
.iw-section { border-top: 1px solid var(--iw-border); padding: 48px 0 96px; }
.iw-section.iw-section--first { border-top: 0; }
.iw-section-title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--iw-ink); margin-bottom: 24px; }

.iw-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 24px; row-gap: 56px;
}
@media (max-width: 1100px) { .iw-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 840px) { .iw-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 40px; } }

.iw-card { display: block; }
.iw-card-thumb {
  position: relative; aspect-ratio: 320 / 393; border: 1px solid var(--iw-border); border-radius: var(--iw-r-lg);
  overflow: hidden; background: #fff; transition: border-color .15s ease;
}
.iw-card:hover .iw-card-thumb { border-color: var(--iw-border-h); }
.iw-card-name { margin-top: 16px; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--iw-ink); text-align: left; }

/* ── 카드 썸네일: 순수 CSS 미니 사이트 목업 ── */
.iw-mock {
  position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff;
  opacity: 1; transition: opacity .25s ease;
}
.iw-mock--alt { opacity: 0; }
.iw-card:hover .iw-mock--alt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .iw-mock { transition: none; } }

.iw-mock-nav {
  flex: 0 0 20px; display: flex; align-items: center; gap: 4px; padding: 0 16px;
  border-bottom: 1px solid rgb(0 0 0 / .06);
}
.iw-mock--dark .iw-mock-nav { border-bottom-color: rgb(255 255 255 / .12); }
.iw-mock-dot { width: 5px; height: 5px; border-radius: 50%; background: rgb(0 0 0 / .18); }
.iw-mock--dark .iw-mock-dot { background: rgb(255 255 255 / .3); }
.iw-mock-nav-r { width: 22px; height: 6px; border-radius: 2px; background: rgb(0 0 0 / .14); margin-left: auto; }
.iw-mock--dark .iw-mock-nav-r { background: rgb(255 255 255 / .26); }

.iw-mock-hero {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 16px; text-align: center; min-height: 0;
}
.iw-mock-line { display: block; height: 6px; border-radius: 999px; width: 70%; }
.iw-mock-line.sm { width: 45%; opacity: .7; height: 5px; }
.iw-mock-poster { font-size: 15px; font-weight: 800; line-height: 1.2; word-break: keep-all; }

/* 원본 카드는 스크린샷이라 세로가 항상 꽉 참 — 타일 행이 body 높이를 강제로 채운다 */
.iw-mock-body { flex: 0 0 42%; padding: 12px; display: grid; gap: 6px; min-height: 0; grid-auto-rows: 1fr; align-content: stretch; }
.iw-mock-tile { border-radius: 3px; }

.iw-mock-body--products { grid-template-columns: repeat(4, 1fr); }
.iw-mock-body--gallery { grid-template-columns: repeat(3, 1fr); }
.iw-mock-body--feature { grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; }
.iw-mock-body--feature .iw-mock-tile:nth-child(1) { grid-row: 1 / 3; }
.iw-mock-body--feature .iw-mock-tile:nth-child(n+4) { display: none; }
.iw-mock-body--text { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.iw-mock-textline { display: block; height: 6px; border-radius: 999px; background: rgb(0 0 0 / .1); }
.iw-mock--dark .iw-mock-textline { background: rgb(255 255 255 / .18); }

/* 호버 alt 레이어 — 같은 팔레트의 그리드 변형(크롭/채도 차이)으로 "다른 스크린샷" 느낌 재현 */
.iw-mock--alt .iw-mock-body,
.iw-mock--alt .iw-mock-hero { direction: rtl; }
.iw-mock--alt .iw-mock-tile,
.iw-mock--alt .iw-mock-hero { filter: saturate(1.15) brightness(1.05); }

.iw-mock--blank { align-items: center; justify-content: center; }
.iw-mock-blank-text { font-size: 18px; color: var(--iw-muted); text-align: center; padding: 0 16%; direction: ltr; }

/* ── 하단 안내 스트립 ── */
.iw-strip { background: var(--iw-bg-gray); padding: 64px 0; }
.iw-strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 840px) { .iw-strip-grid { grid-template-columns: 1fr; } }
.iw-strip-card { background: #fff; border-radius: var(--iw-r-xl); padding: 32px; }
.iw-strip-icon { width: 44px; height: 44px; }
.iw-strip-title { margin-top: 20px; font-size: 18px; font-weight: 700; color: var(--iw-ink); }
.iw-strip-desc { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--iw-muted); }
.iw-strip-link { display: inline-block; margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--iw-blue); }
.iw-strip-link:hover { color: var(--iw-blue-h); }

/* ── 푸터(최소 구성 — 원본 미확인) ── */
.iw-footer { border-top: 1px solid var(--iw-border); background: #fff; }
.iw-footer-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 32px 0; flex-wrap: wrap; }
.iw-footer-copy { font-size: 13px; color: var(--iw-muted-2); }
.iw-footer-links { display: flex; gap: 20px; }
.iw-footer-links a { font-size: 13px; color: var(--iw-muted-2); }
.iw-footer-links a:hover { color: var(--iw-ink-2); }