/* ============================================
   main.css — 메인 페이지(index.html) 전용
   배경영상 · 히어로 · M.C.M · 영상 · 제품 · 블로그
   (공통 헤더/푸터/색상/원스크롤은 common.css)
============================================ */

/* ===== CINEMATIC 배경영상 히어로 (첫 화면) ===== */
.cine-hero{position:relative;height:calc(100vh - var(--header-h));margin-top:var(--header-h);
  overflow:hidden;background:#000;}
.cine-hero .vbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.cine-hero .v-overlay{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.32));}
.cine-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:6;
  width:64px;height:64px;border-radius:50%;border:0;background:rgba(0,0,0,.4);color:#fff;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .2s,transform .2s;}
.cine-play:hover{background:rgba(0,0,0,.7);transform:translate(-50%,-50%) scale(1.06);}
.cine-play svg{width:28px;height:28px;}
.cine-mute{position:absolute;right:26px;bottom:26px;z-index:6;
  width:46px;height:46px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;cursor:pointer;
  display:grid;place-items:center;backdrop-filter:blur(4px);transition:background .2s;font-size:18px;}
.cine-mute:hover{background:rgba(0,0,0,.7);}
.cine-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:5;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.85);
  font-size:11px;letter-spacing:.25em;font-weight:600;}
.cine-scroll i{width:1px;height:34px;background:rgba(255,255,255,.6);animation:scrollPulse 1.8s ease-in-out infinite;}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}
@media(max-width:860px){.cine-hero{height:62vh;}}

/* ===== HERO (분할 — 현재 히든, 코드 보존) ===== */
.hero{display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - var(--header-h));min-height:560px;margin-top:var(--header-h);}
.hero-left{
  position:relative; overflow:hidden;
  background:#1a1f2e; /* 이미지 로딩 전 폴백 */
  display:flex;align-items:center;
}
/* 슬라이드 레이어 (페이드 순환) */
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease; z-index:0;
}
.hero-slide.on{ opacity:1; }
.hero-left::after{ /* 가독성용 어둠 오버레이 */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(20,20,24,.25),rgba(20,20,24,.6));
}
.hero-left .tagline{
  position:relative; z-index:2;
  color:#fff;font-size:clamp(15px,1.5vw,19px);font-weight:700;letter-spacing:1px;
  text-transform:uppercase;padding:0 50px;text-shadow:0 2px 12px rgba(0,0,0,.4);line-height:1.5;
}
.hero-right{
  position:relative;background:var(--beige);padding:70px 64px;
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
.eyebrow .bar{width:46px;height:3px;background:var(--orange);}
.eyebrow span{color:var(--orange);font-weight:800;font-size:14px;letter-spacing:.14em;text-transform:uppercase;}
.hero-right h1{font-size:clamp(38px,4.6vw,62px);font-weight:800;line-height:1.05;letter-spacing:-1.5px;color:var(--ink);margin-bottom:26px;}
.hero-right h1 .light{font-weight:300;}
.hero-desc{font-size:19px;color:var(--ink-soft);line-height:1.9;margin-bottom:18px;white-space:pre-line;min-height:3.4em;}
.hero-desc .cur{display:inline-block;width:2px;height:1.05em;background:var(--orange);
  margin-left:2px;vertical-align:-2px;animation:blink .8s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.hero-answer{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:18px;}
.hero-sub{font-size:14px;color:#777;line-height:1.8;margin-bottom:16px;}
.hero-quote{font-size:17px;font-weight:700;color:var(--orange);}
/* 장식: 오렌지 곡선 + 점 + 플러스 */
.deco-curve{position:absolute;right:-40px;bottom:30px;width:60%;height:120px;
  border-bottom:3px solid var(--orange);border-radius:0 0 50% 50%/0 0 100% 100%;opacity:.85;transform:rotate(-4deg);}
.deco-plus{position:absolute;right:46px;bottom:40px;color:var(--orange);font-size:42px;font-weight:300;line-height:1;}
.deco-dots{position:absolute;right:56px;top:120px;width:90px;height:60px;opacity:.5;
  background-image:radial-gradient(var(--orange) 1.4px,transparent 1.4px);background-size:11px 11px;}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;height:auto;}
  .hero-left{min-height:300px;}
  .hero-right{padding:50px 26px;}
}

/* ===== 영상 (유튜브 3개 — 현재 히든) ===== */
.video-band{background:#fff;}
.video-inner{max-width:1120px;margin:0 auto;padding:22px 24px;width:100%;}
.video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9);}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* 큰 영상: 첫 영상만 줄여 3개가 한 화면에 (작은 영상·너비는 유지) */
.video-main{height:min(38vh,400px);aspect-ratio:16/9;width:auto;max-width:100%;margin:0 auto;}
.video-sub{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;}
@media(max-width:860px){.video-sub{grid-template-columns:1fr;}}

/* ===== M.C.M 3카드 (hover flip) ===== */
.mcm{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.mcm-card{height:360px;perspective:1400px;background:transparent;}
.mcm-inner{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.2,.2,1);
  transform-style:preserve-3d;}
.mcm-card:hover .mcm-inner{transform:rotateY(180deg);}
.mcm-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:36px 30px;text-align:center;}
/* 앞면 — 아이콘 + 큰 글자 + 라벨 */
.mcm-front{background:#fff;}
.mcm-front img{height:58px;width:auto;margin-bottom:6px;}
.mcm-front .big{font-size:88px;font-weight:900;line-height:1;color:var(--ink);letter-spacing:-2px;}
.mcm-front .lbl{font-size:22px;font-weight:400;color:#8a8a8a;letter-spacing:.5px;margin-top:4px;}
/* 뒷면 — 다크 사진 배경 + 설명 */
.mcm-back{transform:rotateY(180deg);color:#fff;
  background:linear-gradient(180deg,rgba(10,15,31,.82),rgba(10,15,31,.92)),
    url("https://iezngo.com/wp-content/uploads/2023/11/129721228.jpg");
  background-size:cover;background-position:center;}
.mcm-back .blbl{font-size:24px;font-weight:800;letter-spacing:.5px;margin-bottom:16px;color:#fff;}
.mcm-back p{font-size:15px;color:rgba(255,255,255,.9);line-height:1.8;}
@media(max-width:860px){.mcm{grid-template-columns:1fr;}}

/* ===== 제품 3 ===== */
.products{background:#fff;}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:var(--max);margin:0 auto;}
.prod{background:#fff;border-radius:16px;padding:46px 32px;text-align:center;
  transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;align-items:center;gap:20px;}
.prod:hover{transform:translateY(-6px);box-shadow:0 24px 50px -30px rgba(0,0,0,.3);}
.prod img{height:46px;width:auto;}
.prod span{font-size:16px;font-weight:600;color:var(--ink);}
@media(max-width:860px){.prod-grid{grid-template-columns:1fr;}}

/* ===== BLOG ===== */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.post{display:block;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  transition:transform .25s,box-shadow .25s;}
.post:hover{transform:translateY(-5px);box-shadow:0 20px 44px -28px rgba(42,139,204,.35);}
.post .thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;
  background:linear-gradient(135deg,#2a3a5c,#16335c);} /* 이미지 없을 때 폴백 */
.post .pad{padding:24px;}
.post .cat{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--orange);text-transform:uppercase;}
.post .t{display:block;margin:14px 0 12px;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);}
.post .x{font-size:14px;color:var(--ink-soft);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post .d{display:block;margin-top:16px;font-size:13px;color:#9a9a9a;}
.blog-more{text-align:center;margin-top:40px;}
.blog-more a{display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border:1.5px solid var(--ink);
  border-radius:999px;font-weight:700;font-size:15px;transition:all .25s;}
.blog-more a:hover{background:var(--ink);color:#fff;}
@media(max-width:860px){.blog-grid{grid-template-columns:1fr;}}