/*
Theme Name: HongMedia
Theme URI: https://hongmedia.co.kr
Author: HongMedia
Description: 홍미디어 제조·산업 전문 콘텐츠 커스텀 테마
Version: 1.0
*/
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#0f0e0c;--steel:#1a1f2e;--paper:#faf9f6;--warm:#f4f1eb;
  --line:#d8d4cc;--sub:#5c5c58;--muted:#9e9d97;--og:#c85a00;
  --display:'DM Serif Display',serif;
  --mono:'Bebas Neue','Arial Narrow',Arial,sans-serif;
  --body:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}

/* ── NAV ── */
.nav{position:sticky;top:0;z-index:200;height:88px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;background:rgba(250,249,246,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:56px;width:auto;display:block}
.nav-menu{display:flex;gap:40px;list-style:none;align-items:center;margin:0;padding:0}
.nav-menu a{font-size:18px;color:var(--sub);text-decoration:none;font-weight:700;transition:color .2s;line-height:1;display:block}
.nav-menu a:hover{color:var(--og)}
.nav-cta{background:var(--ink);color:#fff;padding:13px 32px;font-size:15px;font-weight:700;letter-spacing:1px;text-decoration:none;transition:background .2s;display:flex;align-items:center;line-height:1}
.nav-cta:hover{background:var(--og)}

/* ══════════════════
   HERO — 풀와이드 3단 (상단 여백 / 중앙 플레이 / 하단 콘텐츠)
══════════════════ */
.hero{
  position:relative;
  background:var(--steel);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* 위: 영상 영역 */
.hero-top-video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  max-height:70vh;
  overflow:hidden;
  flex-shrink:0;
}
.hero-top-video iframe{
  position:absolute;
  top:50%;left:50%;
  width:177.78vh;min-width:100%;
  height:56.25vw;min-height:100%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  border:none;
}
/* 위: 플레이 버튼 오버레이 */

/* 아래: 텍스트 + 섹터 */
.hero-bottom{
  position:relative;z-index:4;
  padding:52px 56px 60px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  background:linear-gradient(to bottom, rgba(10,9,8,.95) 0%, rgba(10,9,8,1) 100%);
  border-top:1px solid rgba(255,255,255,.08);
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:hidden;
}
/* 그리드 패턴 */
.hero-r-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 80px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 80px);
}
/* 오버레이 */
.hero-r-ov{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top, rgba(10,9,8,.92) 0%, rgba(10,9,8,.5) 40%, rgba(10,9,8,.15) 100%);
}
/* 상단 오렌지 라인 */
.hero-r-acc{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--og),transparent 60%);z-index:2}

/* ── 상단 영역: 쇼릴 플레이 버튼 ── */




/* ── 하단 영역: 텍스트 + 섹터 ── */


/* 좌: 텍스트 */
.eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.ey-line{width:32px;height:1.5px;background:var(--og)}
.ey-txt{font-size:11px;font-weight:700;letter-spacing:4px;color:var(--og)}
.hero-h1{
  font-family:var(--display);
  font-size:clamp(42px,5.5vw,80px);
  line-height:1.05;letter-spacing:-1.5px;color:#fff;
}
.h1-og{color:var(--og);font-style:italic}
.h1-dim{color:rgba(255,255,255,.3)}
.hero-desc{
  margin-top:20px;font-size:15px;line-height:1.95;
  color:rgba(255,255,255,.5);font-weight:300;max-width:500px;word-break:keep-all;
}
.hero-desc strong{font-weight:700;color:#fff}
.hero-btns{margin-top:36px;display:flex;gap:12px;flex-wrap:wrap}
.btn-dk{background:#fff;color:var(--ink);padding:14px 36px;font-size:13px;font-weight:700;letter-spacing:1px;border:none;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.btn-dk:hover{background:var(--og);color:#fff}
.btn-ln{border:1.5px solid rgba(255,255,255,.3);background:transparent;color:rgba(255,255,255,.75);padding:14px 36px;font-size:13px;font-weight:500;cursor:pointer;text-decoration:none;display:inline-block;transition:all .2s}
.btn-ln:hover{border-color:#fff;color:#fff}
.hero-kpi{
  margin-top:44px;padding-top:28px;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;gap:44px;
}
.kpi-n{font-family:var(--mono);font-size:44px;line-height:1;color:#fff}
.kpi-n span{color:var(--og)}
.kpi-l{font-size:11px;letter-spacing:1px;color:rgba(255,255,255,.3);margin-top:5px}

/* 우: 섹터 목록 */
.hero-sectors{display:flex;flex-direction:column;gap:1px}
.sector{
  display:flex;align-items:center;justify-content:space-between;
  padding:17px 22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  cursor:default;transition:background .3s,border-color .3s;
  backdrop-filter:blur(6px);
}
.sector:hover{background:rgba(200,90,0,.15);border-color:rgba(200,90,0,.3)}
.sector-l{display:flex;align-items:center;gap:14px}
.sector-ico{font-size:20px}
.sector-name{font-size:13px;font-weight:700;color:#fff}
.sector-sub{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px}
.sector-badge{font-family:var(--mono);font-size:9px;letter-spacing:2px;color:rgba(255,255,255,.2);padding:3px 8px;border:1px solid rgba(255,255,255,.1)}
.hero-r-bot{padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;margin-top:20px}
.hr-bot-l{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.25)}

/* ── TICKER ── */
.ticker{background:var(--og);overflow:hidden;padding:11px 0}
.ticker-track{display:flex;white-space:nowrap;animation:slide 26s linear infinite}
.tk{font-family:var(--mono);font-size:15px;letter-spacing:3px;color:rgba(255,255,255,.65);padding:0 26px;flex-shrink:0}
.tk.hi{color:#fff}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══════════════════
   섹션 공통
══════════════════ */
.sec{padding:96px 56px}
.sec-warm{background:var(--warm)}
.sec-ink{background:var(--ink)}
.lbl{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.lbl-line{width:28px;height:1.5px;background:var(--og);flex-shrink:0}
.lbl-txt{font-size:10px;font-weight:700;letter-spacing:4px;color:var(--og)}
.sec-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:64px;border-bottom:1px solid var(--line);padding-bottom:40px}
.sec-hd.dk{border-bottom-color:rgba(255,255,255,.08)}
.sec-title{font-family:var(--display);font-size:clamp(30px,3.8vw,54px);line-height:1.1;word-break:keep-all}
.sec-title.wh{color:#fff}
.sec-sub{font-size:15px;color:var(--sub);line-height:1.9;max-width:480px;word-break:keep-all}
.sec-sub.wh{color:rgba(255,255,255,.45)}

/* ══════════════════
   AGENT 개념 섹션
══════════════════ */
.agent-wrap{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5px;background:rgba(255,255,255,.07)}
.agent-col{padding:52px 48px;background:var(--ink);border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden}
.agent-col.mid{background:#111009;border-color:rgba(200,90,0,.2)}
.agent-col-tag{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:rgba(255,255,255,.3);margin-bottom:24px;display:block}
.agent-col.mid .agent-col-tag{color:var(--og)}
.agent-col-title{font-family:var(--display);font-size:26px;color:#fff;line-height:1.25;margin-bottom:20px;word-break:keep-all}
.agent-col.mid .agent-col-title{color:#fff;font-style:italic}
.agent-col-desc{font-size:14px;color:rgba(255,255,255,.4);line-height:1.9;word-break:keep-all}
.agent-col.mid .agent-col-desc{color:rgba(255,255,255,.6)}
.agent-col-pts{margin-top:28px;display:flex;flex-direction:column;gap:12px}
.agent-pt{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:rgba(255,255,255,.4);line-height:1.65;word-break:keep-all}
.agent-pt::before{content:'—';color:rgba(200,90,0,.5);flex-shrink:0;margin-top:1px}
.agent-col.mid .agent-pt{color:rgba(255,255,255,.7)}
.agent-col.mid .agent-pt::before{color:var(--og)}
/* 중간 칸 상단 오렌지 라인 */
.agent-col.mid::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;background:var(--og)}
/* 배경 워터마크 */
.agent-col::after{content:attr(data-mark);position:absolute;bottom:-20px;right:-10px;font-family:var(--mono);font-size:120px;color:rgba(255,255,255,.02);line-height:1;pointer-events:none}

/* 에이전트 하단 선언 바 */
.agent-bar{margin-top:1.5px;background:rgba(200,90,0,.08);border:1px solid rgba(200,90,0,.15);padding:36px 56px;display:flex;align-items:center;justify-content:space-between;gap:48px}
.agent-bar-quote{font-family:var(--display);font-size:20px;color:#fff;font-style:italic;word-break:keep-all;line-height:1.55;flex:1}
.agent-bar-quote em{font-style:normal;color:var(--og)}
.agent-bar-divider{width:1px;height:60px;background:rgba(255,255,255,.1);flex-shrink:0}
.agent-bar-right{font-size:13.5px;color:rgba(255,255,255,.45);line-height:1.9;max-width:380px;word-break:keep-all}

/* ══════════════════
   CONTENT PRODUCTION 섹션
══════════════════ */
.cp-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:120px;
  align-items:center;margin-bottom:72px;
  padding-bottom:72px;border-bottom:1px solid var(--line);
}
.cp-intro-l .sec-title{font-size:clamp(30px,3.6vw,52px)}
.cp-intro-r p{font-size:16px;color:var(--sub);line-height:2;word-break:keep-all;margin-bottom:20px}
.cp-intro-r p strong{color:var(--ink);font-weight:700}

/* 접근 방식 카드 그리드 */
.cp-approach{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5px;background:var(--line);margin-bottom:1.5px}
.cp-card{background:var(--paper);padding:48px 40px;cursor:default;transition:background .3s;position:relative;overflow:hidden}
.cp-card:hover{background:#fff}
.cp-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.5px;background:var(--og);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cp-card:hover::after{transform:scaleX(1)}
.cp-card-no{font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--muted);display:block;margin-bottom:24px}
.cp-card-title{font-family:var(--display);font-size:22px;line-height:1.3;margin-bottom:14px;word-break:keep-all}
.cp-card-desc{font-size:13.5px;color:var(--sub);line-height:1.85;word-break:keep-all}

/* 넓은 하단 배너 카드 */
.cp-bottom{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;background:var(--line)}
.cp-banner{background:var(--ink);padding:48px 48px;display:flex;flex-direction:column;justify-content:space-between;cursor:default;transition:background .3s}
.cp-banner:hover{background:#161510}
.cp-banner-label{font-family:var(--mono);font-size:10px;letter-spacing:3px;color:var(--og);margin-bottom:20px;display:block}
.cp-banner-title{font-family:var(--display);font-size:26px;color:#fff;line-height:1.35;word-break:keep-all;font-style:italic}
.cp-banner-title em{font-style:normal;color:var(--og)}
.cp-banner-foot{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.cp-tag{padding:5px 14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-size:11px;color:rgba(255,255,255,.5);font-weight:600;transition:all .2s}
.cp-tag:hover{background:rgba(200,90,0,.15);border-color:rgba(200,90,0,.3);color:var(--og)}
.cp-stat-grid{background:var(--warm);padding:48px 48px;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-content:center}
.cp-stat-item{}
.cp-stat-n{font-family:var(--mono);font-size:48px;line-height:1;color:var(--ink)}
.cp-stat-n span{color:var(--og)}
.cp-stat-l{font-size:12px;color:var(--muted);letter-spacing:1px;margin-top:6px;word-break:keep-all}

/* ══════════════════
   IMPOSSIBLE → POSSIBLE
══════════════════ */
.imp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:rgba(255,255,255,.06)}
.imp-card{background:var(--ink);padding:40px 36px;border:1px solid rgba(255,255,255,.07);position:relative;overflow:hidden;cursor:default;transition:border-color .3s,background .3s}
.imp-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--og);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.imp-card:hover{background:#161510;border-color:rgba(200,90,0,.2)}
.imp-card:hover::before{transform:scaleX(1)}
.imp-icon{width:44px;height:44px;background:rgba(200,90,0,.1);border:1px solid rgba(200,90,0,.2);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:24px}
.imp-before{font-size:11px;color:rgba(255,255,255,.28);letter-spacing:.5px;margin-bottom:8px}
.imp-after{font-size:15px;font-weight:700;color:#fff;word-break:keep-all;line-height:1.5;margin-bottom:12px}
.imp-how{font-size:13px;color:rgba(255,255,255,.4);line-height:1.75;word-break:keep-all}
.imp-how strong{color:var(--og);font-weight:600}
.imp-bar{margin-top:1.5px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);padding:40px 56px;display:flex;align-items:center;justify-content:space-between;gap:64px}
.imp-bar-q{font-family:var(--display);font-size:22px;color:#fff;font-style:italic;flex:1;word-break:keep-all;line-height:1.55}
.imp-bar-q em{font-style:normal;color:var(--og)}
.imp-bar-div{width:1px;height:72px;background:rgba(255,255,255,.1);flex-shrink:0}
.imp-bar-r{font-size:13.5px;color:rgba(255,255,255,.4);line-height:1.9;max-width:420px;word-break:keep-all}
.tech-tags{margin-top:18px;display:flex;flex-wrap:wrap;gap:7px}
.t-tag{padding:4px 12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:11px;font-weight:600;color:rgba(255,255,255,.5);transition:all .2s}
.t-tag:hover{background:rgba(200,90,0,.15);border-color:rgba(200,90,0,.3);color:var(--og)}

/* ══════════════════
   WHY — 4열
══════════════════ */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--line)}
.why-card{background:var(--paper);padding:44px 36px;cursor:default;transition:background .3s}
.why-card:hover{background:#fff}
.why-n{font-family:var(--mono);font-size:13px;color:var(--og);letter-spacing:2px;display:block;margin-bottom:20px}
.why-t{font-size:16px;font-weight:900;margin-bottom:12px;word-break:keep-all;line-height:1.4}
.why-d{font-size:13px;color:var(--sub);line-height:1.8;word-break:keep-all}
.num-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5px;background:var(--line);margin-top:1.5px}
.nb{background:var(--paper);padding:40px 36px}
.nb.dk{background:var(--ink)}
.nb.og{background:var(--og)}
.nb-n{font-family:var(--mono);font-size:56px;line-height:1;color:var(--ink)}
.nb.dk .nb-n,.nb.og .nb-n{color:#fff}
.nb-n span{color:var(--og)}
.nb.dk .nb-n span,.nb.og .nb-n span{color:rgba(255,255,255,.4)}
.nb-l{font-size:11px;letter-spacing:1px;color:var(--muted);margin-top:7px}
.nb.dk .nb-l,.nb.og .nb-l{color:rgba(255,255,255,.4)}

/* ══════════════════
   PROCESS
══════════════════ */
.proc-item{display:grid;grid-template-columns:80px 280px 1fr auto;gap:40px;padding:32px 0;border-bottom:1px solid var(--line);align-items:center;cursor:default;transition:padding .3s}
.proc-item:first-child{border-top:1px solid var(--line)}
.proc-item:hover{padding-left:12px}
.proc-item:hover .proc-n{color:var(--og)}
.proc-n{font-family:var(--mono);font-size:44px;line-height:1;color:var(--line);transition:color .3s}
.proc-name{font-size:18px;font-weight:900;word-break:keep-all;line-height:1.35}
.proc-desc{font-size:13.5px;color:var(--sub);line-height:1.8;word-break:keep-all}
.proc-badge{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--muted);padding:5px 14px;border:1px solid var(--line);white-space:nowrap;transition:all .3s}
.proc-item:hover .proc-badge{border-color:var(--og);color:var(--og)}

/* ══════════════════
   BLOG
══════════════════ */
.blog-hd{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px}
.blog-all{font-size:12px;color:var(--sub);text-decoration:none;letter-spacing:1px;border-bottom:1px solid var(--line);padding-bottom:2px;transition:color .2s,border-color .2s}
.blog-all:hover{color:var(--og);border-color:var(--og)}
.blog-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1.5px;background:var(--line)}
.blog-card{background:var(--paper);text-decoration:none;color:inherit;display:block;transition:background .25s}
.blog-card:hover{background:#fff}
.blog-img{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center}
.blog-card.feat .blog-img{aspect-ratio:4/3}
.bi-txt{font-family:var(--mono);font-size:52px;letter-spacing:-2px;font-weight:700}
.b1{background:#e8e4db;color:#ccc8bc}.b2{background:#dce4e8;color:#c4d0d8}.b3{background:#e4dce8;color:#d0c4d8}
.blog-body{padding:28px 32px 36px}
.blog-cat{font-size:9.5px;letter-spacing:3px;color:var(--og);font-weight:700;margin-bottom:10px;display:block}
.blog-ttl{font-size:16px;font-weight:900;line-height:1.4;margin-bottom:10px;word-break:keep-all}
.blog-card.feat .blog-ttl{font-size:21px}
.blog-ex{font-size:13px;color:var(--sub);line-height:1.8;word-break:keep-all}
.blog-meta{margin-top:18px;font-size:10.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.blog-meta::before{content:'';width:14px;height:1px;background:var(--muted);display:block}

/* ══════════════════
   CTA
══════════════════ */
.cta{background:#111009;border-top:3px solid var(--og);padding:96px 56px;display:flex;justify-content:space-between;align-items:center;gap:48px;position:relative;overflow:hidden}
.cta::after{content:'HONGMEDIA';position:absolute;right:-24px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:200px;color:rgba(255,255,255,.03);white-space:nowrap;pointer-events:none;letter-spacing:-4px}
.cta-badge{display:inline-block;background:var(--og);color:#fff;font-size:10px;letter-spacing:3px;padding:4px 13px;font-weight:700;margin-bottom:16px}
.cta-title{font-family:var(--display);font-size:clamp(30px,4vw,54px);line-height:1.12;color:#fff;word-break:keep-all}
.cta-sub{margin-top:14px;font-size:15px;color:rgba(255,255,255,.7);line-height:1.9;word-break:keep-all}
.btn-wh{background:#fff;color:var(--og);padding:17px 48px;font-size:14px;font-weight:700;letter-spacing:1px;border:none;cursor:pointer;flex-shrink:0;transition:all .25s;text-decoration:none;display:inline-block}
.btn-wh:hover{background:var(--ink);color:#fff}

/* ── FOOTER ── */
footer{background:var(--ink);padding:64px 56px 32px}
.ft-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:80px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08)}
.ft-logo{font-size:18px;font-weight:900;color:#fff;margin-bottom:14px}
.ft-logo span{color:var(--og)}
.ft-desc{font-size:13px;color:rgba(255,255,255,.35);line-height:1.9;word-break:keep-all}
.ft-info{margin-top:18px;font-size:12px;color:rgba(255,255,255,.2);line-height:2.3}
.ft-col h4{font-size:10px;letter-spacing:4px;font-weight:700;color:rgba(255,255,255,.3);margin-bottom:16px}
.ft-col ul{list-style:none}
.ft-col li{margin-bottom:11px}
.ft-col a{font-size:13px;color:rgba(255,255,255,.4);text-decoration:none;transition:color .2s}
.ft-col a:hover{color:var(--og)}
.ft-bot{padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:11px;color:rgba(255,255,255,.2)}
.socials{display:flex;gap:20px}
.socials a{font-size:11px;color:rgba(255,255,255,.25);text-decoration:none;letter-spacing:1.5px;transition:color .2s}
.socials a:hover{color:var(--og)}

/* ══════════════════
   RESPONSIVE — 태블릿 & 모바일
══════════════════ */
@media (max-width: 1024px) {
  .nav{padding:0 32px}
  .hero-bottom{padding:40px 32px;gap:48px}
  .sec{padding:72px 32px}
  .agent-wrap{grid-template-columns:1fr}
  .cp-grid{grid-template-columns:1fr 1fr}
  .process-steps{grid-template-columns:1fr 1fr}
  .imp-grid{grid-template-columns:1fr 1fr}
  .portfolio-grid{grid-template-columns:1fr 1fr}
  .cta{padding:72px 32px;flex-direction:column;text-align:center}
  footer{padding:48px 32px 24px}
  .ft-top{grid-template-columns:1fr 1fr;gap:32px}
}

@media (max-width: 768px) {
  /* NAV */
  .nav{padding:0 20px;height:64px}
  .nav-logo img{height:40px}
  .nav-menu{display:none}
  .nav-cta{padding:10px 20px;font-size:13px}

  /* HERO */
  .hero-top-video{max-height:50vw}
  .hero-bottom{
    grid-template-columns:1fr;
    padding:36px 20px 40px;
    gap:32px;
  }
  .hero-h1{font-size:clamp(32px,8vw,52px)}
  .hero-btns{flex-direction:column}
  .btn-dk,.btn-ln{text-align:center;padding:14px 24px}
  .hero-kpi{gap:24px;flex-wrap:wrap}
  .kpi-n{font-size:32px}

  /* 섹션 공통 */
  .sec{padding:56px 20px}
  .sec-hd{flex-direction:column;gap:20px;align-items:flex-start}
  .lbl-txt{font-size:9px}

  /* AGENT */
  .agent-wrap{grid-template-columns:1fr}
  .agent-col{padding:36px 28px}
  .agent-bar{flex-direction:column;padding:28px 20px;gap:20px;text-align:center}

  /* NUM STRIP */
  .num-strip{grid-template-columns:1fr 1fr;gap:1px}

  /* CAPABILITY */
  .cp-grid{grid-template-columns:1fr}
  .cp-stat-grid{grid-template-columns:1fr 1fr}

  /* PROCESS */
  .process-steps{grid-template-columns:1fr}

  /* IMPOSSIBLE */
  .imp-grid{grid-template-columns:1fr}
  .imp-bar{flex-direction:column;padding:28px 20px;gap:20px;text-align:center}

  /* PORTFOLIO */
  .portfolio-grid{grid-template-columns:1fr}

  /* CTA */
  .cta{padding:56px 20px;flex-direction:column;gap:32px;text-align:center}
  .cta-title{font-size:clamp(26px,6vw,40px)}

  /* FOOTER */
  footer{padding:40px 20px 20px}
  .ft-top{grid-template-columns:1fr;gap:28px}
  .ft-bot{flex-direction:column;gap:12px;text-align:center}

  /* TICKER */
  .tk{font-size:12px;padding:0 16px}
}

@media (max-width: 480px) {
  .nav-logo img{height:32px}
  .hero-h1{font-size:clamp(28px,9vw,44px)}
  .hero-kpi{flex-direction:column;gap:16px}
  .num-strip{grid-template-columns:1fr 1fr}
  .cp-stat-grid{grid-template-columns:1fr 1fr}
  .agent-col{padding:28px 20px}
  .sec-title{font-size:clamp(24px,6vw,36px)}
}


/* ====================================================================
 * [HM] CTA Pulse Animation v1.0  (2026-05)
 * Subtle glow pulse for primary contact CTAs.
 * Selectors: .nav-cta (header), .drawer-cta (mobile), .form-submit (contact form), .hm-qi-submit (footer mini form)
 * ================================================================== */
@keyframes hm-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, .55); }
  50%      { box-shadow: 0 0 0 10px rgba(255, 122, 26, 0); }
}
.nav-cta, .drawer-cta, .form-submit, .hm-qi-submit {
  animation: hm-cta-pulse 2.4s ease-in-out infinite;
}
.nav-cta:hover, .drawer-cta:hover, .form-submit:hover, .hm-qi-submit:hover {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .nav-cta, .drawer-cta, .form-submit, .hm-qi-submit { animation: none; }
}